@font-face {
  font-family: "Hanken Grotesk MIIS";
  src: url("fonts/hanken-grotesk-miis.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces MIIS Text";
  src: url("fonts/fraunces-miis-text.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

/* Design tokens. table.js reads the colours and --font-words from here. */
:root {
  --aubergine: #2d1728;
  --warm-paper: #f5efe3;
  --stone: #e4d9c4;
  --straw: #e9d99c;
  --clay: #b84732;        /* descriptors on Warm Paper (roles; later dates, venues, credit lines): 4.6:1 there, too low on Aubergine */
  --table-white: #faf9f6; /* the turning table: a soft white, like the white of the table video */

  --font-body: "Hanken Grotesk MIIS", system-ui, sans-serif;   /* reading text and practical details */
  --font-words: "Hanken Grotesk MIIS", system-ui, sans-serif;  /* the words around the table */
  --font-title: "Fraunces MIIS Text", Georgia, serif;          /* headings, titles and names */

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  /* The space between sections (9 Nov: 20% less than before). */
  --section-gap: 52px;      /* above About, and above the footer */
  --section-gap-wide: 76px; /* above Contributors; on desktop, above About too */
  --margin: 24px;
  --column-gap: 24px;
}
@media (min-width: 900px) {
  :root { --margin: 64px; }
}

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

html {
  background: var(--aubergine);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  color: var(--aubergine);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--aubergine); outline-offset: 4px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

h2, h3 { margin: 0; font-family: var(--font-title); font-weight: 400; }

/* ---------- The table ---------- */

/* table.js draws the turning table on the canvas and sets the glossary around it as lines of
   text, and sets the section's height to fit them. Until then, and if they can't be drawn, the
   words show as ordinary text. */
.table {
  --words-size: 14px;
  --wordmark-height: 26px;
  --subtitle-size: 12px;     /* "Still Life" keeps a readable size instead of scaling with the wordmark */
  --masthead-height: 42px;   /* wordmark, gap and subtitle: reserves room for the text version */
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--margin) * 2 + var(--masthead-height)) var(--margin) calc(var(--margin) * 2 + var(--words-size) * 1.45);
  overflow: hidden;
  background: var(--aubergine);
  color: var(--warm-paper);
}
.table canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
.table.is-drawn canvas { visibility: visible; }

/* The glossary's lines, placed by table.js. Hidden from screen readers, which read #table-words. */
.table-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--stone);
  font-family: var(--font-words);
  white-space: pre;
  pointer-events: none;
}
.table-lines span { position: absolute; top: 0; left: 0; }

/* The MIIS lockup at small size: the wordmark with "Still Life" beneath, outlined in Hanken Grotesk.
   At this size the subtitle is set larger than in the full lockup so it stays readable. */
.masthead {
  position: absolute;
  z-index: 1;
  top: var(--margin);
  left: var(--margin);
  margin: 0;
  line-height: 0;
}
.wordmark { display: block; width: auto; height: var(--wordmark-height); }
.subtitle {
  display: block;
  width: auto;
  height: calc(var(--subtitle-size) * 0.73); /* the outline is cropped to its capitals */
  margin-top: calc(var(--subtitle-size) * 0.5);
}

.table-words {
  margin: 0;
  color: var(--stone);
  font-family: var(--font-words);
  font-size: var(--words-size);
  line-height: 1.45;
}

.table-caption {
  position: absolute;
  z-index: 1;
  right: var(--margin);
  bottom: var(--margin);
  left: var(--margin);
  margin: 0;
  font-family: var(--font-words);
  font-size: var(--words-size);
  line-height: 1.45;
  text-align: center;
}

/* An invisible button over the table: tap to stop or start it, drag to turn it.
   table.js places it on whole rows of words, so its focus ring runs between lines. */
.turntable {
  position: absolute;
  z-index: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
}
.turntable:active { cursor: grabbing; }
.turntable:focus-visible { outline-color: var(--straw); outline-offset: 0; }

@media (min-width: 900px) {
  .table { --words-size: 18px; --wordmark-height: 32px; --subtitle-size: 13px; --masthead-height: 51px; }
  .masthead { top: 48px; }
}

/* ---------- About and contributors ---------- */

/* About and Contributors sit on Warm Paper with no divider: the change from Aubergine marks the
   start of About, and space alone separates the two. */
.about,
.contributors {
  padding: var(--section-gap) var(--margin) 0;
  background: var(--warm-paper);
}
.contributors { padding-top: var(--section-gap-wide); }
.about h2,
.contributors h2 {
  margin-bottom: var(--space-3);
  font-size: 36px;
  line-height: 1.05;
}
.about p {
  max-width: 34em;
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
}

/* Contributors are a compact list: one entry per person, separated by space alone. */
.contributors ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}
.contributors li { padding: var(--space-2) 0; }
.contributors li:first-child { padding-top: 0; }
.contributors h3 { font-size: 20px; line-height: 1.2; }
.contributors .role { margin: 2px 0 0; color: var(--clay); }
.contributors .bio { max-width: 34em; margin: var(--space-1) 0 0; }

/* The handle links to the person's Instagram; screen readers hear "… on Instagram". Only the
   colour changes on hover and press, so nothing moves. */
.contributors a {
  display: inline-block;
  padding: 2px 0;
  color: inherit;
  text-decoration: none;
}
.contributors a:active { color: var(--clay); }
@media (hover: hover) {
  .contributors a:hover { color: var(--clay); }
}

@media (min-width: 900px) {
  .about,
  .contributors {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--column-gap);
    padding-top: var(--section-gap-wide);
  }
  .about h2,
  .contributors h2 { grid-column: 1 / 4; font-size: 48px; }
  .about p,
  .contributors ul { grid-column: 4 / 13; }
  .about p { font-size: 24px; }
  /* Who, then the biography, then the handle, on one row per person. */
  .contributors li {
    display: grid;
    grid-template-columns: 3fr 5fr 2fr;
    grid-template-areas: "who bio handle";
    column-gap: var(--column-gap);
    align-items: baseline;
    padding: var(--space-3) 0;
  }
  .contributors li:first-child { padding-top: 6px; }
  .contributors .who { grid-area: who; }
  .contributors .bio { grid-area: bio; margin: 0; }
  .contributors a { grid-area: handle; justify-self: end; padding: 0; }
}

/* ---------- Footer ---------- */

.site-footer {
  padding: var(--section-gap) var(--margin) var(--space-4);
  background: var(--warm-paper);
  text-align: center;
}
.mark { display: block; width: 48px; height: auto; margin: 0 auto var(--space-2); }
.site-footer p { margin: 0; font-size: 15px; }