:root {
  /* type */
  --font-family: "Times New Roman", Times, serif;
  /* --font-family: "Arial", sans-serif; */
  --font-size: 20px;
  --font-size-mobile: 18px;
  --line-height: 1.2;
  --color-text: #000;
  --color-bg: #fff;
  --underline-thickness: 1px;
  --underline-offset: 0.15em;

  /* grid */
  --columns: 8;
  --margin: 24px;
  --gutter: 24px;
  --margin-mobile: 24px;
  --gutter-mobile: 24px;
  --max-width: 1920px;

  /* spacing */
  --space-block: 1.2em;  /* between text groups */
  --space-item: var(--space-block);  /* between column items */
  --space-media: var(--gutter);
  --space-section-mobile: 2.4em;
  --space-caption-mobile: 0.4em;

  /* media */
  --media-max-height: 80vh;
  --embed-ratio: 16 / 9;

  /* focus */
  --focus-width: 1px;
  --focus-offset: 2px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: normal;
  font-kerning: normal;
}

h1, h2, h3, h4, h5, h6,
p, ul, ol, li, blockquote, figure, figcaption, dl, dd, pre {
  margin: 0;
  padding: 0;
  font: inherit;
}

ul, ol {
  list-style: none;
}

strong, b, th {
  font-weight: inherit;
}

small, big, sub, sup {
  font-size: inherit;
  vertical-align: baseline;
}

i, em, cite {
  font-style: italic;
}

hr {
  display: none;
}

a,
a:visited {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
}

a:hover {
  text-decoration-line: none;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-width) solid var(--color-text);
  outline-offset: var(--focus-offset);
}

.object {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--margin);
}

.main {
  grid-column: 1 / span 4;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
}

.text {
  grid-column: 2 / span 3;
  overflow-wrap: break-word;
}

.text > * + *,
.description > * + *,
.links > li + li {
  margin-top: var(--space-block);
}

.description blockquote > * + * {
  margin-top: var(--space-block);
}

.media-item {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  margin-top: var(--space-media);
}

.text + .media-item {
  margin-top: var(--space-block);
}

.media {
  grid-column: 2 / span 3;
  grid-row: 1;
  min-width: 0;
}

.media-item figcaption {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  text-align: right;
  overflow-wrap: break-word;
  hyphens: auto;
}

.caption-line {
  display: block;
}

.col {
  grid-row: 1;
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.col li + li {
  margin-top: var(--space-item);
}

.col-years        { grid-column: 5; }
.col-associations { grid-column: 6; }
.col-forms        { grid-column: 7; }
.col-artists      { grid-column: 8; }

.media picture,
.media-link {
  display: block;
  width: fit-content;
  max-width: 100%;
}

.media img,
.media video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--media-max-height);
}

.media-link {
  text-decoration-line: none;
}

.embed {
  position: relative;
  width: min(100%, calc(var(--media-max-height) * (var(--embed-ratio))));
  aspect-ratio: var(--embed-ratio);
}

.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.media audio {
  display: block;
  width: 100%;
}

/* mobile (also update sizes in snippets/media.php) */
@media (max-width: 767.98px) {
  body {
    font-size: var(--font-size-mobile);
  }

  .object {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter-mobile);
    padding: var(--margin-mobile);
  }

  .main {
    grid-column: 1 / -1;
  }

  .text,
  .media-item {
    grid-column: 1 / -1;
  }

  .media-item {
    display: block;
  }

  .media-item figcaption {
    margin-top: var(--space-caption-mobile);
    text-align: left;
  }

  .col {
    margin-top: var(--space-section-mobile);
  }

  .col.is-empty {
    display: none;
  }

  .col-associations { grid-column: 1;      grid-row: 2; }
  .col-forms        { grid-column: 2;      grid-row: 2; }
  .col-years        { grid-column: 1 / -1; grid-row: 3; }
  .col-artists      { grid-column: 1 / -1; grid-row: 4; }
}