/* DESIGN CONTROLS — sizes and spacing are intentionally independent. */
:root {
  color-scheme: dark;
  --header-size: clamp(64px, 11vw, 220px);
  --details-size: 40px;
  --artists-size: 30px;
  --header-size-tablet: 13vw;
  --details-size-tablet: 34px;
  --artists-size-tablet: 28px;
  --header-size-mobile: 17vw;
  --details-size-mobile: 28px;
  --artists-size-mobile: 26px;
  --header-leading: .72;
  --details-leading: .80;
  --artists-leading: .78;
  --letter-spacing: 0em;
  /* Inversionz's native space already occupies one .625em grid cell. */
  --grid-step: .625em;
  --word-spacing: calc(var(--grid-step) + var(--letter-spacing) - .625em);
  --reading-font: Arial, Helvetica, sans-serif;
  --reading-size: 18px;
  --reading-leading: 1.65;
  --reading-gap: clamp(40px, 7vw, 100px);
  --tile-border: .025em;
  --page-gutter: clamp(16px, 1.8vw, 40px);
  --section-gap: clamp(32px, 5vh, 80px);
  --section-gap-mobile: 48px;
  --location-gap: 1em;
  --artists-bottom-space: 34px;
  --control-size: 25px;
  --background-fade: 2000ms;
}

@font-face {
  font-family: Inversionz;
  src: url('fonts/inversionz/Inversionz.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
  /* Font's actual cap height: 576 / 1024 units. Remove extra line metrics. */
  ascent-override: 56.25%;
  descent-override: 0%;
  line-gap-override: 0%;
}
/* Small text uses bare glyphs so CSS owns the only tile edge. */
@font-face {
  font-family: Inversionz Unboxed;
  src: url('fonts/inversionz/Inversionz Unboxed.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
  ascent-override: 56.25%;
  descent-override: 0%;
  line-gap-override: 0%;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: #111; color: white; }
.background { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.background__image { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--background-fade) ease; }
.background__image.is-visible { opacity: 1; }
.poster { min-height: 100svh; padding: var(--page-gutter); display: flex; flex-direction: column; gap: var(--section-gap); }
.is-loading .poster { visibility: hidden; }
.header { position: relative; }
h1 { font: 400 var(--header-size)/var(--header-leading) Inversionz, monospace; margin: 0; filter: drop-shadow(3px 5px 2px #000b); }
h1 > span { display: block; width: fit-content; }
.institution { position: absolute; top: 0; right: 0; writing-mode: vertical-rl; display: flex; align-items: center; font: 400 clamp(23px, 2.6vw, 52px)/1 Arial, sans-serif; text-shadow: 0 1px 5px #000; }
.institution small { font: 700 clamp(7px, .65vw, 13px)/1.5 Arial, sans-serif; letter-spacing: .03em; }
.details { margin-block: auto; font: 400 var(--details-size)/var(--details-leading) Inversionz, monospace; max-width: 95%; }
.detail-line { margin: 0; }
.location { margin-top: var(--location-gap); }
.artists { font: 400 var(--artists-size)/var(--artists-leading) Inversionz, monospace; padding-bottom: var(--artists-bottom-space); overflow-wrap: anywhere; }
[data-animate] { text-transform: lowercase; letter-spacing: 0; word-spacing: var(--word-spacing); }
h1 > span:first-child .letter:first-child { text-transform: uppercase; }
.ink { font-family: Inversionz Unboxed, monospace; box-decoration-break: clone; -webkit-box-decoration-break: clone; background: var(--tile-foreground); color: var(--tile-background); }
[data-ink="white"] { --tile-background: #080808; --tile-foreground: #fff; }
[data-ink="black"] { --tile-background: #fff; --tile-foreground: #080808; }
.word { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
/* Fixed font units, not measured DOM widths. A cell fits its visible glyph;
   its advance includes the font's own 64-unit gutter. Jumbles never reflow. */
.letter { position: relative; display: inline-block; width: var(--grid-step); height: .5625em; line-height: .5625em; vertical-align: baseline; letter-spacing: 0; margin-right: var(--letter-spacing); visibility: hidden; }
.letter.is-revealed { visibility: visible; }
.text-visual .ink { background: transparent; }
.ink .letter { isolation: isolate; }
/* A single painted box replaces the font's boxed outline plus overlay border. */
.ink .letter::before { content: ''; position: absolute; z-index: -1; inset: 0 .0625em 0 0; background: var(--tile-foreground); border: var(--tile-border) solid var(--tile-background); }
.font-unavailable [data-animate] { font-family: monospace; text-transform: none; line-height: 1.2; }
.font-unavailable .ink { font-family: monospace; color: white; background: #111; }
.motion-toggle { position: fixed; bottom: 10px; right: var(--page-gutter); z-index: 3; width: var(--control-size); height: var(--control-size); padding: 4px; border: 1px solid white; border-radius: 0; background: #080808; color: white; cursor: pointer; opacity: .7; }
.motion-toggle::before { content: ''; position: absolute; inset: -9px; }
.motion-toggle:hover, .motion-toggle:focus-visible { opacity: 1; }
.motion-toggle:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.motion-toggle svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.motion-toggle .icon-play { display: none; }
.motion-toggle[aria-pressed="true"] { background: white; color: #080808; border-color: #080808; }
.motion-toggle[aria-pressed="true"] .icon-pause { display: none; }
.motion-toggle[aria-pressed="true"] .icon-play { display: block; }
.loading { position: fixed; inset: 0; display: grid; place-items: center; z-index: 4; pointer-events: none; }
.loading__spinner { width: 25px; height: 25px; border: 3px solid #ffffff40; border-top-color: white; animation: load-turn 1s steps(4) infinite; }
.load-notice { position: fixed; left: var(--page-gutter); bottom: 8px; z-index: 3; max-width: calc(100% - 85px); margin: 0; padding: 6px; background: #111; color: white; font: 12px/1.4 monospace; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes load-turn { to { transform: rotate(360deg); } }
@media (min-width: 601px) and (max-width: 1024px) {
  :root { --header-size: var(--header-size-tablet); --details-size: var(--details-size-tablet); --artists-size: var(--artists-size-tablet); }
}
@media (max-width: 600px) {
  :root { --header-size: var(--header-size-mobile); --details-size: var(--details-size-mobile); --artists-size: var(--artists-size-mobile); --section-gap: var(--section-gap-mobile); }
  .institution { position: static; writing-mode: horizontal-tb; align-items: baseline; gap: 9px; margin-top: 18px; font-size: 20px; }
  .institution small { font-size: 7px; }
  .details { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .background__image { transition: none; }
  .loading__spinner { animation: none; }
}

/* Links retain the poster typography and get clear pointer/keyboard feedback. */
.location-link, .artist-link { color: inherit; text-decoration: none; }
.location-link { display: block; width: fit-content; max-width: 100%; }
.artist-link:hover .ink, .location-link:hover .ink { --tile-border: .06em; }
.artist-link:focus-visible, .location-link:focus-visible { outline: 2px solid white; outline-offset: 5px; background: #111; }
.reading-area { background: #111; color: #f5f3ec; padding: var(--reading-gap) var(--page-gutter); font: 400 var(--reading-size)/var(--reading-leading) var(--reading-font); }
.curatorial, .credits { max-width: 1280px; margin-inline: auto; display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: var(--reading-gap); }
.curatorial + .curatorial, .credits { margin-top: var(--reading-gap); padding-top: var(--reading-gap); border-top: 1px solid #ffffff40; }
.reading-area h2 { margin: 0; max-width: 14ch; font: 400 clamp(27px, 3vw, 42px)/1.12 var(--reading-font); letter-spacing: -.025em; }
.prose { max-width: 66ch; }
.reading-area p { margin: 0 0 1.25em; }
.reading-area p:last-child { margin-bottom: 0; }
.credits { font-size: 15px; }
.credits dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; margin: 0; }
.credits dt { color: #b0ada5; }
.credits dd { margin: .2em 0 0; }
.acknowledgement { max-width: 66ch; margin-top: 36px !important; color: #cfccc3; }
@media (max-width: 700px) {
  .curatorial, .credits { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .reading-area h2 { max-width: 22ch; }
  .credits dl { grid-template-columns: minmax(0, 1fr); }
}