/* liamrieber.com v5, "Viewfinder"
   Every photograph carries the settings it was taken at; every number carries its source.
   Ink and print white, one amber readout colour, Big Shoulders Display (made for Chicago) and Libre Franklin
   (the American newsroom gothic).

   Layers
     1. tokens, fonts, base
     2. shared pieces: header, menu, buttons, readout, viewfinder corners, focus box
     3. home: stage, strip, story, index, contact (static layout first)
     4. .is-pinned: the scroll-driven layouts, applied by site.js on large screens with motion allowed
     5. project pages, 404, figures, share cards
*/

/* ------------------------------------------------------------------ 1. tokens, fonts, base */
@font-face { font-family: 'Big Shoulders Display'; src: url(fonts/big-shoulders-display-latin-900-normal.woff2) format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Big Shoulders Display'; src: url(fonts/big-shoulders-display-latin-800-normal.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Big Shoulders Display'; src: url(fonts/big-shoulders-display-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url(fonts/libre-franklin-latin-wght-normal.woff2) format('woff2-variations'), url(fonts/libre-franklin-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url(fonts/libre-franklin-latin-wght-italic.woff2) format('woff2-variations'), url(fonts/libre-franklin-latin-wght-italic.woff2) format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --ink: #0c0c0b;
  --ink-2: #151513;
  --ink-3: #20201d;
  --paper: #efeee9;
  --paper-2: #e3e1da;
  --print: #fbfaf6;
  --fg-d: #ecebe5;
  --mute-d: #a9a79f;
  --line-d: rgba(236, 234, 229, .16);
  --fg-l: #0c0c0b;
  --mute-l: #55534c;
  --line-l: rgba(12, 12, 11, .16);
  --amber: #ffa526;
  --red: #ff5d4f;

  --f-display: 'Big Shoulders Display', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --f-text: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;

  --hdr: 64px;
  --pad: clamp(20px, 3.4vw, 56px);
  --gut: clamp(16px, 2vw, 32px);
  --ease: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ink); }
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
body {
  margin: 0; background: var(--ink); color: var(--fg-d);
  font: 400 1.0625rem/1.6 var(--f-text);
  font-feature-settings: 'kern', 'liga';
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 1px; }
.sec--light :focus-visible, .hdr--light :focus-visible { outline-color: var(--ink); }
::selection { background: var(--amber); color: var(--ink); }

.kicker {
  font: 600 .8125rem/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--amber);
  display: flex; align-items: center; gap: .6em;
}
.kicker::before { content: ''; width: .55em; height: .55em; background: currentColor; flex: none; }
.sec--light .kicker { color: var(--fg-l); }
.sec--light .kicker::before { background: var(--amber); outline: 1px solid var(--ink); outline-offset: 0; }

/* ------------------------------------------------------------------ 2. shared pieces */
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 16px; background: var(--amber); color: var(--ink);
  font-weight: 600; text-decoration: none; transform: translateY(-160%);
}
.skip:focus { transform: none; }

.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 70; height: var(--hdr);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--pad);
  color: var(--fg-d);
  background: linear-gradient(to bottom, rgba(12, 12, 11, .78), rgba(12, 12, 11, 0));
  transition: background-color .3s, color .3s;
}
.hdr.is-solid { background: rgba(12, 12, 11, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line-d); }
.hdr--light, .hdr--light.is-solid { color: var(--fg-l); background: var(--paper); box-shadow: 0 1px 0 var(--line-l); }
.hdr { transition: background-color .3s, color .3s, transform .35s var(--ease); }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr__mark {
  font: 800 1.375rem/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  padding: 10px 0;
}
.hdr__nav { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.hdr__nav a, .ftr a, .menu__foot a {
  text-decoration: none; font-weight: 500; font-size: .9375rem; padding: 10px 0; position: relative;
}
.hdr__nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease);
}
.hdr__nav a:hover::after { transform: scaleX(1); }
.hdr__menu {
  display: none; background: none; border: 1px solid currentColor; border-radius: 2px; min-height: 44px; padding: 0 16px;
  font-weight: 600; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.hdr__menu-close { display: none; }
.menu-open .hdr__menu-open { display: none; }
.menu-open .hdr__menu-close { display: inline; }
.menu-open .hdr { background: var(--ink); color: var(--fg-d); box-shadow: none; }

.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--ink); color: var(--fg-d);
  padding: calc(var(--hdr) + 24px) var(--pad) 32px; display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; transition: opacity .25s;
}
.menu.is-open { opacity: 1; }
.menu__nav a {
  display: flex; align-items: baseline; gap: 16px; text-decoration: none; padding: 6px 0;
  font: 900 clamp(3.4rem, 17vw, 6.5rem)/.95 var(--f-display); text-transform: uppercase;
  border-bottom: 1px solid var(--line-d);
}
.menu__n { font: 600 .8125rem/1 var(--f-text); color: var(--amber); letter-spacing: .1em; }
.menu__foot { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 24px; color: var(--mute-d); }

@media (max-width: 759.98px) {
  .hdr__nav { display: none; }
  .hdr__menu { display: inline-flex; align-items: center; }
}

.btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px;
  border: 1px solid currentColor; border-radius: 2px; text-decoration: none; cursor: pointer; background: transparent;
  font: 600 .875rem/1 var(--f-text); letter-spacing: .07em; text-transform: uppercase;
  transition: background-color .25s, color .25s, border-color .25s;
}
.btn:hover { background: var(--fg-d); color: var(--ink); border-color: var(--fg-d); }
.sec--light .btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--amber { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.btn--amber:hover { background: var(--fg-d); border-color: var(--fg-d); }
.arr { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .3s var(--ease); }
a:hover > .arr, a:hover .arr { transform: translateX(3px); }
.lnk { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; font-weight: 500; }
.lnk:hover { text-decoration-thickness: 2px; }

/* the readout: camera settings or the numbers behind a project */
.ro {
  display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--mute-d);
  font: 500 .75rem/1.5 var(--f-text); letter-spacing: .07em; text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
}
.ro__seg { white-space: nowrap; }
.ro__seg:first-child { color: var(--amber); }
.ro--data .ro__seg:first-child { color: var(--mute-d); }
.ro--data b { color: var(--amber); font-weight: 700; letter-spacing: .03em; margin-right: .35em; }
.ro--none { text-transform: none; letter-spacing: .01em; font-style: italic; }
.ro--none::before { content: ''; }
.sec--light .ro { color: var(--mute-l); }
.sec--light .ro__seg:first-child { color: var(--fg-l); font-weight: 700; }
.sec--light .ro--data b { color: var(--fg-l); }

/* viewfinder corners */
.vf { position: absolute; inset: 0; pointer-events: none; z-index: 3; color: rgba(255, 255, 255, .9); }
.vf__c { position: absolute; width: 22px; height: 22px; border: 0 solid currentColor; transition: color .4s; }
.vf__c--tl { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.vf__c--tr { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.vf__c--bl { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.vf__c--br { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }

/* focus box (autofocus point) */
.af {
  position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; z-index: 4; display: none;
  --c: var(--amber);
  background:
    linear-gradient(var(--c), var(--c)) left top / 16px 2px, linear-gradient(var(--c), var(--c)) left top / 2px 16px,
    linear-gradient(var(--c), var(--c)) right top / 16px 2px, linear-gradient(var(--c), var(--c)) right top / 2px 16px,
    linear-gradient(var(--c), var(--c)) left bottom / 16px 2px, linear-gradient(var(--c), var(--c)) left bottom / 2px 16px,
    linear-gradient(var(--c), var(--c)) right bottom / 16px 2px, linear-gradient(var(--c), var(--c)) right bottom / 2px 16px;
  background-repeat: no-repeat;
}
.af::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--c); }

/* ------------------------------------------------------------------ 3. home, static layout */

/* stage: opening frame + selected work */
.stage { position: relative; background: var(--ink); --open-h: clamp(560px, 100svh, 1100px); }
.stage__pin { position: relative; }
.stage__well { position: relative; height: var(--open-h); overflow: hidden; background: #000; }
.frames, .frame { position: absolute; inset: 0; }
.frame { margin: 0; overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.frame:not([data-i="0"]), .shutter, .stage__ro, .stage__nav { display: none; }
.vf--stage { inset: calc(var(--hdr) + 8px) var(--pad) 22px var(--pad); }
.hero {
  position: absolute; left: 0; right: 0; top: 0; height: var(--open-h); align-content: end; z-index: 2; padding: 0 var(--pad) 64px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); gap: 20px 48px; align-items: end;
  background: linear-gradient(to top, rgba(12, 12, 11, .9) 0, rgba(12, 12, 11, .62) 42%, rgba(12, 12, 11, 0) 100%);
  padding-top: 160px;
}
.hero__kicker { font: 600 .8125rem/1.4 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.hero__name {
  font: 900 clamp(5rem, 15.5vw, 15.5rem)/.8 var(--f-display); text-transform: uppercase; letter-spacing: -.004em;
  margin: 0 0 -.06em -.03em;
}
.hero__name span { display: block; }
.hero__aside { display: grid; gap: 16px; padding-bottom: 4px; }
.hero__lede { font-size: 1.125rem; line-height: 1.5; }
.hero__note { font-size: .9375rem; line-height: 1.5; color: var(--mute-d); border-left: 2px solid var(--amber); padding-left: 12px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 4px; }
.hero__ro { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--open-h) - 48px); z-index: 3; }
.chapter__media.chapter__media--hero { display: none; }

.chapters { padding: clamp(72px, 10vw, 140px) var(--pad) 40px; display: grid; gap: clamp(72px, 9vw, 140px); }
.chapter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gut); align-items: center; }
.chapter[data-i="0"] { padding-top: 0; }
.chapter__media { grid-column: 1 / span 7; display: grid; gap: 12px; }
.chapter:nth-child(odd) .chapter__media { grid-column: 6 / span 7; order: 2; }
.chapter__text { grid-column: 9 / span 4; display: grid; gap: 16px; justify-items: start; }
.chapter:nth-child(odd) .chapter__text { grid-column: 1 / span 4; }
.chapter[data-i="0"] .chapter__text { grid-column: 1 / span 6; }
.well-sm { position: relative; aspect-ratio: 3 / 2; background: var(--ink-2); overflow: hidden; }
.well-sm > img { width: 100%; height: 100%; object-fit: cover; }
.well-sm .vf { inset: 10px; }
.chapter__meta, .panel__meta, .ph__meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 .8125rem/1.3 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--mute-d);
}
.chapter__num { color: var(--amber); font-weight: 700; }
.chapter__of { color: var(--mute-d); font-weight: 500; }
.chapter__title {
  font: 900 clamp(3rem, 6.4vw, 6.25rem)/.86 var(--f-display); text-transform: uppercase; letter-spacing: -.003em; text-wrap: balance;
}
.chapter__title a { text-decoration: none; }
.chapter__title a:hover { color: var(--amber); }
.chapter__summary { font-size: 1.1875rem; line-height: 1.5; max-width: 30em; text-wrap: pretty; }
.chapter__note { display: grid; gap: 6px; max-width: 30em; border-top: 1px solid var(--line-d); padding-top: 14px; }
.chapter__note p { font-size: .9375rem; line-height: 1.5; text-wrap: pretty; }
.chapter__note .chapter__note-k { font: 600 .75rem/1.3 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.chapter__status { font-size: .875rem; color: var(--mute-d); padding-left: 12px; border-left: 2px solid var(--line-d); }

/* strip: photo projects, a horizontal film of frames */
.strip { position: relative; background: var(--ink); padding: clamp(80px, 10vw, 140px) 0 72px; border-top: 1px solid var(--line-d); }
.strip__head { padding: 0 var(--pad); max-width: 52rem; display: grid; gap: 18px; }
.strip__title { font: 900 clamp(3.25rem, 8.5vw, 8.5rem)/.9 var(--f-display); text-transform: uppercase; }
.strip__lede { font-size: 1.1875rem; line-height: 1.5; max-width: 32em; color: var(--fg-d); }
.strip__hint { display: none; }
.strip__viewport {
  position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad);
  padding: 40px var(--pad) 20px; scrollbar-width: thin; scrollbar-color: var(--mute-d) transparent;
}
.strip__track { display: flex; gap: clamp(16px, 2.4vw, 40px); width: max-content; align-items: flex-start; }
.panel { scroll-snap-align: start; width: min(80vw, 560px); }
.panel--tall { width: min(62vw, 400px); }
.panel__link { position: relative; display: grid; gap: 16px; text-decoration: none; }
.panel__media { display: block; position: relative; overflow: hidden; aspect-ratio: var(--ar); background: var(--ink-2); }
.panel__img { width: 100%; height: 100%; object-fit: cover; }
.panel__cap { display: grid; gap: 8px; max-width: 34em; }
.panel__title { font: 900 clamp(2.4rem, 4vw, 3.75rem)/.88 var(--f-display); text-transform: uppercase; }
.panel__summary { font-size: 1rem; line-height: 1.5; }
.panel__count { display: inline-flex; align-items: center; gap: 10px; font: 600 .8125rem/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.panel__link:hover .panel__title { color: var(--amber); }
.strip__bar { display: none; }

/* story */
.story { background: var(--paper); color: var(--fg-l); padding: clamp(96px, 12vw, 180px) var(--pad) clamp(80px, 10vw, 140px); }
.story__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--gut); align-items: start; }
.print { grid-column: 1 / span 5; position: sticky; top: calc(var(--hdr) + 32px); }
.print { display: grid; gap: 16px; }
.print__img { position: relative; aspect-ratio: 1536 / 1800; background: var(--paper-2); }
.print__img .vf { inset: -12px; color: var(--ink); }
.print__img img { width: 100%; height: 100%; object-fit: cover; }
.story__text { grid-column: 7 / span 6; display: grid; gap: 28px; }
.story__title { font: 900 clamp(3.25rem, 7.4vw, 8rem)/.84 var(--f-display); text-transform: uppercase; text-wrap: balance; }
.route { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 30px; margin: 8px 0 4px; }
.route__line { position: absolute; left: 6px; right: 0; top: 5px; width: calc(100% - 6px); height: 2px; overflow: visible; }
.route__line line { stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.route__stop { position: relative; display: grid; gap: 2px; }
.route__dot { position: absolute; top: -31px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.route__stop:last-child .route__dot { background: var(--amber); }
.route__place { font: 800 1.5rem/1 var(--f-display); text-transform: uppercase; }
.route__when { font: 600 .75rem/1.4 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--mute-l); }
.route__what { font-size: .9375rem; line-height: 1.45; color: var(--mute-l); }
.story__body { display: grid; gap: 1.1em; }
.story__body p { font-size: clamp(1.125rem, 1.4vw, 1.3125rem); line-height: 1.58; max-width: 34em; text-wrap: pretty; }
.story__body p:first-child::first-line { font-weight: 600; }
.story__sub { font: 800 clamp(1.75rem, 2.6vw, 2.5rem)/.95 var(--f-display); text-transform: uppercase; margin-bottom: 24px; }
.story__modes { margin-top: clamp(80px, 10vw, 140px); }
.modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--gut); }
.mode { border-top: 2px solid var(--ink); padding-top: 16px; }
.mode__t { font: 600 .8125rem/1.3 var(--f-text); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.mode li { display: grid; padding: 12px 0; border-bottom: 1px solid var(--line-l); }
.mode__org { font-weight: 600; }
.mode__role { color: var(--mute-l); font-size: .9375rem; }
.story__aside { margin-top: clamp(64px, 8vw, 110px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--gut); }
.story__aside > div:first-child { grid-column: 1 / span 6; }
.story__aside > div:last-child { grid-column: 8 / span 5; }
p.ints { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.55; max-width: 30em; text-wrap: pretty; }
.ints li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line-l); }
.int__name { font: 800 clamp(1.5rem, 2.2vw, 2rem)/1 var(--f-display); text-transform: uppercase; }
.int__note { color: var(--mute-l); font-size: .9375rem; }
.recs li { padding: 14px 0; border-bottom: 1px solid var(--line-l); font-size: 1rem; line-height: 1.45; }

/* index */
.index { position: relative; background: var(--paper); color: var(--fg-l); padding: clamp(80px, 10vw, 140px) var(--pad) clamp(96px, 12vw, 160px); border-top: 1px solid var(--line-l); }
.index__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px var(--gut); align-items: end; margin-bottom: 40px; }
.index__head .kicker { grid-column: 1 / -1; }
.index__title { grid-column: 1 / span 7; font: 900 clamp(3.25rem, 8.6vw, 9rem)/.88 var(--f-display); text-transform: uppercase; }
.index__title span { display: block; color: var(--mute-l); }
.index__lede { grid-column: 9 / span 4; font-size: 1.0625rem; line-height: 1.5; }
.chips { grid-column: 1 / span 9; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; cursor: pointer;
  background: transparent; border: 1px solid var(--ink); border-radius: 2px;
  font: 600 .8125rem/1 var(--f-text); letter-spacing: .07em; text-transform: uppercase;
}
.chip__n { font-variant-numeric: tabular-nums; color: var(--mute-l); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.chip[aria-pressed="true"] .chip__n { color: var(--amber); }
.chip:hover:not([aria-pressed="true"]) { background: rgba(12, 12, 11, .07); }
.index__status { grid-column: 10 / span 3; justify-self: end; font-size: .875rem; color: var(--mute-l); }
.index__cols, .row__link {
  display: grid; grid-template-columns: 3.5rem minmax(0, 2.4fr) minmax(0, 1.2fr) 7.5rem minmax(0, 1.5fr) 2rem; gap: 16px; align-items: baseline;
}
.index__cols { padding: 0 0 10px; font: 600 .75rem/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--mute-l); border-bottom: 2px solid var(--ink); }
.row { border-bottom: 1px solid var(--line-l); }
.row__link { position: relative; padding: 18px 0; min-height: 68px; text-decoration: none; isolation: isolate; }
.row__link::before {
  content: ''; position: absolute; inset: 0 calc(var(--pad) * -1); z-index: -1; background: var(--amber);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .35s var(--ease);
}
.row__link:hover::before, .row__link:focus-visible::before { transform: scaleY(1); }
.row__n { font: 600 .875rem/1 var(--f-text); font-variant-numeric: tabular-nums; color: var(--mute-l); }
.row__title { font: 800 clamp(1.625rem, 2.7vw, 2.625rem)/.95 var(--f-display); text-transform: uppercase; }
.row__label, .row__year, .row__status { font-size: .9375rem; color: var(--mute-l); }
.row__link:hover .row__n, .row__link:hover .row__label, .row__link:hover .row__year, .row__link:hover .row__status { color: var(--ink); }
.row__go { justify-self: end; }
.index__preview {
  position: fixed; left: 0; top: 0; z-index: 40; width: 300px; aspect-ratio: 3 / 2; pointer-events: none;
  opacity: 0; transition: opacity .2s; overflow: hidden; background: var(--ink-2);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .5);
}
.index__preview.is-on { opacity: 1; }
.index__preview img { width: 100%; height: 100%; object-fit: cover; }

/* contact */
.contact { position: relative; background: var(--ink); min-height: 100svh; display: grid; align-items: center; padding: clamp(110px, 14vw, 180px) var(--pad); overflow: hidden; }
.contact__inner { position: relative; display: grid; gap: 24px; max-width: 1240px; width: 100%; margin: 0 auto; }
.contact__title { font: 900 clamp(3.75rem, 11vw, 11.5rem)/.82 var(--f-display); text-transform: uppercase; }
.contact__lede { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.5; max-width: 32em; color: var(--fg-d); }
.contact__target { position: relative; justify-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; padding: 22px 0; }
.contact__email {
  font: 800 clamp(2.4rem, 6.8vw, 6.75rem)/1 var(--f-display); color: var(--amber); text-decoration: none; overflow-wrap: anywhere;
  text-transform: lowercase; letter-spacing: .005em;
}
.contact__email:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 10px; }
.contact__copied { font-size: .875rem; color: var(--mute-d); min-width: 1px; }
.contact__links { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 8px; }
.contact__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line-d); }
.contact__links a:hover { border-color: currentColor; }
.vf--contact { display: none; }
.contact:not(.is-live) .contact__target::before, .contact:not(.is-live) .contact__target::after {
  content: ''; position: absolute; width: 22px; height: 22px; border: 0 solid var(--amber);
}
.contact:not(.is-live) .contact__target::before { left: -18px; top: 0; border-left-width: 2px; border-top-width: 2px; }
.contact:not(.is-live) .contact__target::after { right: -18px; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.contact.is-live .vf--contact { display: block; inset: auto; }
.vf--contact.is-locked { color: var(--amber); }

/* footer */
.ftr { background: var(--ink); color: var(--fg-d); border-top: 1px solid var(--line-d); padding: 40px var(--pad) 48px; }
.ftr__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gut); align-items: start; }
.ftr__mark { grid-column: 1 / span 3; font: 900 2rem/.9 var(--f-display); text-transform: uppercase; }
.ftr__where { grid-column: 4 / span 3; color: var(--mute-d); font-size: .9375rem; }
.ftr__links { grid-column: 7 / span 3; display: grid; gap: 2px; }
.ftr__links a { display: inline-block; padding: 6px 0; }
.ftr__links a:hover, .ftr__top:hover { color: var(--amber); }
.ftr__colophon { grid-column: 1 / span 8; color: var(--mute-d); font-size: .8125rem; line-height: 1.6; max-width: 60em; }
.ftr__top { grid-column: 10 / span 3; grid-row: 1; justify-self: end; font-weight: 600; text-decoration: none; padding: 6px 0; }

/* ------------------------------------------------------------------ 4. pinned layouts (site.js adds .is-pinned) */
.stage.is-pinned {
  --well-top: calc(var(--hdr) + max(14px, (100vh - var(--hdr) - 92px - var(--well-h) - 40px) / 2));
  --well-w: min(57vw, calc((100vh - var(--hdr) - 190px) * 1.5));
  --well-h: calc(var(--well-w) / 1.5);
  --col-x: calc(var(--pad) + var(--well-w) + clamp(32px, 4vw, 72px));
}
.is-pinned .stage__pin { height: 100vh; overflow: hidden; }
.is-pinned .stage__well {
  position: absolute; left: var(--pad); top: var(--well-top); width: var(--well-w); height: var(--well-h);
  min-height: 0; max-height: none; transform-origin: 50% 50%; will-change: transform; z-index: 1;
}
.is-pinned .frame { display: block; }
.is-pinned .frame img { object-position: 50% 50%; }
.is-pinned .frame--fig { background: var(--ink-2); }
.is-pinned .frame--fig .figwrap { position: absolute; inset: 3.5%; }
.is-pinned .shutter { display: block; position: absolute; left: 0; right: 0; top: 0; height: 2px; margin-top: -1px; background: var(--amber); z-index: 4; box-shadow: 0 0 0 1px rgba(12, 12, 11, .4); }
.is-pinned .vf--stage { inset: auto; left: 24px; top: 76px; width: calc(100% - 48px); height: calc(100% - 100px); z-index: 5; }
.is-pinned .af { display: block; z-index: 6; }
.is-pinned .hero { top: auto; bottom: 0; height: auto; z-index: 5; padding-bottom: 84px; background: linear-gradient(to top, rgba(12, 12, 11, .86) 0, rgba(12, 12, 11, .55) 46%, rgba(12, 12, 11, 0) 100%); }
.is-pinned .hero__ro { top: auto; bottom: 28px; z-index: 6; }
.is-pinned .chapters {
  position: absolute; left: var(--col-x); right: var(--pad); top: var(--well-top); height: var(--well-h);
  padding: 0; display: block; z-index: 2;
}
.is-pinned .chapter { position: absolute; inset: 0; display: block; }
.is-pinned .chapter__media { display: none; }
.is-pinned .chapter__text { height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.is-pinned .chapter__status { display: none; }
.is-pinned .chapter__note { margin-top: 4px; }
.is-pinned .chapter .btn { margin-top: 10px; }
@media (max-height: 760px) { .is-pinned .chapter__note { display: none; } .is-pinned .chapter__text { gap: 12px; } }
.is-pinned .chapter__title { font-size: clamp(2.75rem, min(5.3vw, 8.6vh), 6.5rem); margin-top: 6px; }
.is-pinned .chapter__summary { font-size: clamp(1rem, 1.25vw, 1.25rem); }
.is-pinned .stage__ro { display: block; position: absolute; left: var(--pad); width: var(--well-w); top: calc(var(--well-top) + var(--well-h) + 14px); height: 2.4em; z-index: 2; }
.is-pinned .stage__ro-row { position: absolute; inset: 0; }
.is-pinned .stage__nav {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 32px;
  position: absolute; left: var(--pad); right: var(--pad); bottom: 22px; z-index: 2;
}
.stage__nav ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gut); }
.stage__nav a[data-i] {
  display: grid; gap: 4px; padding: 12px 0 10px; text-decoration: none; color: var(--mute-d);
  border-top: 2px solid var(--line-d); transition: color .3s, border-color .3s;
}
.stage__nav a[data-i]:hover { color: var(--fg-d); }
.stage__nav a.is-on { color: var(--fg-d); border-top-color: var(--amber); }
.stage__nav-n { font: 600 .75rem/1 var(--f-text); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.stage__nav a.is-on .stage__nav-n { color: var(--amber); }
.stage__nav-t { font: 800 1.125rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage__bar { grid-column: 1 / -1; order: -1; height: 1px; background: var(--line-d); margin-bottom: -1px; position: relative; display: none; }
.stage__skip { font-size: .875rem; padding: 12px 0 10px; color: var(--mute-d); }
.stage__skip:hover { color: var(--fg-d); }

.strip.is-pinned { padding: 0; }
.is-pinned .strip__pin { position: relative; height: 100vh; overflow: hidden; }
.is-pinned .strip__head { position: absolute; left: var(--pad); top: calc(var(--hdr) + 7vh); width: min(30vw, 30rem); padding: 0; z-index: 2; }
.is-pinned .strip__title { font-size: clamp(3.5rem, min(7vw, 12vh), 8rem); }
.is-pinned .strip__hint { display: block; margin-top: 12px; font: 600 .8125rem/1 var(--f-text); letter-spacing: .1em; color: var(--mute-d); }
.strip__count b { color: var(--amber); font-variant-numeric: tabular-nums; }
.is-pinned .strip__viewport { position: absolute; inset: 0; overflow: visible; padding: 0; scroll-snap-type: none; }
.is-pinned .strip__track {
  position: absolute; left: 0; top: 0; height: 100%; align-items: center;
  padding: 0 var(--pad) 0 calc(var(--pad) + min(30vw, 30rem) + 7vw); gap: 6vw;
}
.is-pinned .panel { width: auto; display: flex; }
.is-pinned .panel__link { gap: 18px; }
.is-pinned .panel__media { --h: 56vh; height: var(--h); width: calc(var(--h) * var(--ar)); aspect-ratio: auto; }
.is-pinned .panel--1 .panel__media { --h: 46vh; }
.is-pinned .panel--2 .panel__media { --h: 60vh; }
.is-pinned .panel { align-self: flex-end; margin-bottom: calc(8vh + 24px); }
.is-pinned .panel__cap { min-height: 9.5rem; align-content: start; }
.is-pinned .panel--tall .panel__media { --h: 56vh; }
.is-pinned .panel__img { width: 112%; max-width: none; margin-left: -6%; }
.is-pinned .panel__cap { max-width: min(30rem, calc(var(--h, 56vh) * 1.2)); }
.is-pinned .strip__bar { display: block; position: absolute; left: var(--pad); right: var(--pad); bottom: 28px; height: 2px; background: var(--line-d); }
.strip__bar i, .stage__bar i { position: absolute; inset: 0; background: var(--amber); transform: scaleX(0); transform-origin: 0 50%; }

/* ------------------------------------------------------------------ 5. project pages */
.ph { background: var(--ink); padding: calc(var(--hdr) + clamp(32px, 6vw, 80px)) var(--pad) clamp(56px, 7vw, 96px); }
.ph__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--gut); align-items: end; }
.ph__text { grid-column: 1 / span 5; display: grid; gap: 22px; }
.ph__meta a { color: var(--fg-d); }
.ph__title { font: 900 clamp(3.5rem, 7.6vw, 8.5rem)/.84 var(--f-display); text-transform: uppercase; text-wrap: balance; }
.ph__dek { font-size: clamp(1.125rem, 1.45vw, 1.3125rem); line-height: 1.55; max-width: 32em; text-wrap: pretty; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gut); border-top: 1px solid var(--line-d); }
.facts > div { padding: 12px 0; border-bottom: 1px solid var(--line-d); }
.facts dt { font: 600 .75rem/1.3 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--mute-d); }
.facts dd { font-size: .9375rem; line-height: 1.45; margin-top: 2px; }
.ph__media { grid-column: 6 / span 7; display: grid; gap: 14px; }
.ph__title.is-long { font-size: clamp(3rem, 5.4vw, 6.25rem); }
.ph__media--tall { grid-column: 8 / span 4; }
.ph__media--tall .ph__frame { max-height: calc(100svh - var(--hdr) - 120px); aspect-ratio: auto; height: min(calc(100svh - var(--hdr) - 120px), calc((100vw - 2 * var(--pad)) * .3 * 1400 / 958)); }
.ph__frame { position: relative; aspect-ratio: var(--ar); background: var(--ink-2); }
.ph__frame > img { width: 100%; height: 100%; object-fit: cover; }
.ph__frame--fig .figwrap { position: absolute; inset: 3.5%; }
.ph__frame .vf { inset: -12px; }

.is { background: var(--paper); color: var(--fg-l); padding: clamp(72px, 9vw, 130px) var(--pad); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gut); }
.is__title { grid-column: 1 / span 3; font: 900 clamp(2.5rem, 4.4vw, 4.5rem)/.86 var(--f-display); text-transform: uppercase; }
.is__list { grid-column: 4 / span 9; border-top: 2px solid var(--ink); }
.is__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 8px var(--gut); padding: 22px 0; border-bottom: 1px solid var(--line-l); }
.is__row dt { font: 800 clamp(1.375rem, 1.9vw, 1.75rem)/1 var(--f-display); text-transform: uppercase; }
.is__row dd { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.55; max-width: 36em; text-wrap: pretty; }

.stats { background: var(--ink); padding: clamp(64px, 8vw, 110px) var(--pad); }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--gut); }
.stat { border-top: 2px solid var(--amber); padding-top: 18px; display: grid; gap: 10px; align-content: start; }
.stat__v { font: 900 clamp(2.75rem, 5.2vw, 5.5rem)/.86 var(--f-display); color: var(--amber); font-variant-numeric: lining-nums; }
.stat__v.is-long { font-size: clamp(2.25rem, 3.6vw, 3.75rem); line-height: .9; }
.stat__k { font-size: 1rem; line-height: 1.45; }
.stat__s { font-size: .8125rem; line-height: 1.45; color: var(--mute-d); }

.case { background: var(--paper); color: var(--fg-l); padding: clamp(72px, 9vw, 130px) var(--pad); display: grid; gap: clamp(56px, 7vw, 100px); }
.case + .lk { background: var(--paper); color: var(--fg-l); }
.sect { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px var(--gut); }
.sect__title { grid-column: 1 / span 4; font: 900 clamp(2rem, 3.4vw, 3.5rem)/.9 var(--f-display); text-transform: uppercase; }
.sect__body { grid-column: 5 / span 7; display: grid; gap: 1em; }
.sect__body p { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.62; max-width: 36em; text-wrap: pretty; }
.fig-block { display: grid; gap: 14px; }
.fig-block__frame { position: relative; aspect-ratio: var(--ar); overflow: hidden; background: var(--ink); box-shadow: 0 0 0 1px var(--line-l); }
.fig-block__frame > img { width: 100%; height: 100%; object-fit: contain; }
.fig-block--paper .fig-block__frame { background: #fff; }
.fig-block__frame--fig .figwrap { position: absolute; inset: 3.5%; }
.fig-block figcaption { font-size: .9375rem; line-height: 1.5; color: var(--mute-l); max-width: 44em; }

.group { padding: clamp(64px, 8vw, 120px) var(--pad) 0; }
.group:last-of-type { padding-bottom: clamp(64px, 8vw, 120px); }
.group__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px var(--gut); align-items: baseline; margin-bottom: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line-d); padding-top: 18px; }
.group__title { grid-column: 1 / span 6; font: 900 clamp(2.25rem, 4.6vw, 4.75rem)/.88 var(--f-display); text-transform: uppercase; }
.group__note { grid-column: 7 / span 4; color: var(--mute-d); font-size: .9375rem; }
.group__n { grid-column: 11 / span 2; justify-self: end; font: 600 .8125rem/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.shots { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(48px, 7vw, 110px) var(--gut); align-items: start; }
.shot { display: grid; gap: 12px; }
.shot__img { aspect-ratio: var(--ar); background: var(--ink-2); overflow: hidden; }
.shot__img img { width: 100%; height: 100%; object-fit: cover; }
.shot.is-wide { grid-column: 1 / -1; }
.shot.is-left { grid-column: 1 / span 8; }
.shot.is-right { grid-column: 5 / span 8; }
.shot.is-tall-l { grid-column: 2 / span 5; }
.shot.is-tall-r { grid-column: 7 / span 5; }
.pts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--gut); }
.pt { display: grid; gap: 10px; }
.pt__img { aspect-ratio: 958 / 1400; overflow: hidden; background: var(--ink-2); }
.pt__img img { width: 100%; height: 100%; object-fit: cover; }

.exs { background: var(--paper); color: var(--fg-l); padding: clamp(64px, 8vw, 120px) var(--pad) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gut); }
.exs__title { grid-column: 1 / span 3; font: 900 clamp(2.5rem, 4.4vw, 4.5rem)/.86 var(--f-display); text-transform: uppercase; }
.exs__list { grid-column: 4 / span 9; display: grid; gap: clamp(36px, 4vw, 56px); }
.ex { display: grid; gap: 14px; border-top: 2px solid var(--ink); padding-top: 18px; }
.ex__q p { font: 400 clamp(1.25rem, 1.9vw, 1.75rem)/1.45 var(--f-text); max-width: 34em; text-wrap: pretty; }
.ex__q p::before { content: '\201C'; color: var(--mute-l); margin-left: -.42em; }
.ex__q p::after { content: '\201D'; color: var(--mute-l); }
.ex figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; font-size: .9375rem; }
.ex figcaption a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line-l); }
.ex figcaption a:hover { border-color: currentColor; }
.ex__d, .ex__n { color: var(--mute-l); font-variant-numeric: tabular-nums; }
.by { background: var(--paper); color: var(--fg-l); padding: clamp(64px, 8vw, 120px) var(--pad); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gut); }
.by__title { grid-column: 1 / span 3; font: 900 clamp(2.5rem, 4.4vw, 4.5rem)/.86 var(--f-display); text-transform: uppercase; }
.by__list { grid-column: 4 / span 9; border-top: 2px solid var(--ink); }
.by__list a { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 11rem 1.5rem; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line-l); text-decoration: none; }
.by__list a:hover .by__t { text-decoration: underline; text-underline-offset: 4px; }
.by__d, .by__s { font-size: .875rem; color: var(--mute-l); font-variant-numeric: tabular-nums; }
.by__t { font-weight: 600; font-size: 1.125rem; line-height: 1.35; }

.lk { padding: clamp(48px, 6vw, 90px) var(--pad); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px var(--gut); background: var(--ink); }
.lk__title { grid-column: 1 / span 3; font: 900 clamp(2rem, 3.4vw, 3.5rem)/.9 var(--f-display); text-transform: uppercase; }
.lk__list { grid-column: 4 / span 9; border-top: 2px solid currentColor; }
.lk__list a { display: grid; grid-template-columns: minmax(0, 1fr) auto 1.5rem; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line-d); text-decoration: none; }
.case + .lk .lk__list a, .by + .lk .lk__list a { border-bottom-color: var(--line-l); }
.by + .lk { background: var(--paper); color: var(--fg-l); }
.lk__t { font-weight: 600; font-size: 1.125rem; line-height: 1.35; }
.lk__n { font-size: .875rem; color: var(--mute-d); }
.case + .lk .lk__n, .by + .lk .lk__n { color: var(--mute-l); }
.lk__list a:hover .lk__t { text-decoration: underline; text-underline-offset: 4px; }

.next { background: var(--ink); border-top: 1px solid var(--line-d); }
.next__link {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px var(--gut); align-items: end;
  padding: clamp(64px, 8vw, 120px) var(--pad); text-decoration: none;
}
.next__k { grid-column: 1 / span 6; font: 600 .8125rem/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.next__title { grid-column: 1 / span 7; grid-row: 2; font: 900 clamp(3.5rem, 9vw, 10rem)/.82 var(--f-display); text-transform: uppercase; transition: color .3s; }
.next__sum { grid-column: 1 / span 5; grid-row: 3; color: var(--mute-d); font-size: 1rem; line-height: 1.5; margin-top: 8px; }
.next__title.is-long { font-size: clamp(3rem, 6.4vw, 7rem); }
.next__media { grid-column: 8 / span 5; grid-row: 1 / span 3; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-2); position: relative; }
.next__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.next__media--fig .figwrap { position: absolute; inset: 4%; }
.next__link:hover .next__title { color: var(--amber); }
.next__link:hover .next__media > img { transform: scale(1.03); }

.nf { min-height: 100svh; display: grid; place-items: center; padding: calc(var(--hdr) + 40px) var(--pad) 60px; }
.nf__frame { position: relative; width: min(100%, 900px); padding: clamp(40px, 7vw, 96px); display: grid; gap: 22px; }
.nf__title { font: 900 clamp(3.5rem, 11vw, 9rem)/.84 var(--f-display); text-transform: uppercase; }
.nf__lede { font-size: 1.1875rem; max-width: 28em; color: var(--fg-d); }
.nf__actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.af--miss { display: block; left: 82%; top: 22%; --c: var(--red); }

/* figures drawn from data (figures.py) */
.fig { width: 100%; height: 100%; font-family: var(--f-text); overflow: visible; }
.figwrap { display: grid; place-items: center; }
.fig-fg { fill: var(--fg-d); }
.fig-mu { fill: var(--mute-d); }
.fig-am { fill: var(--amber); }
.fig-red { fill: var(--red); }
.fig-display { font-family: var(--f-display); font-weight: 900; }
.fig-rule { stroke: rgba(236, 234, 229, .38); stroke-width: 1.5; }
.fig-ref { stroke: rgba(236, 234, 229, .38); stroke-width: 1.5; stroke-dasharray: 4 7; }
.fig-bar { fill: rgba(236, 234, 229, .34); }
.fig-line { fill: none; stroke: var(--amber); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.fig-dot { fill: var(--amber); }
.fig-dot-o { fill: var(--ink-2); stroke: var(--fg-d); stroke-width: 2.5; }
.fig-dot-w { fill: var(--ink-2); stroke: var(--fg-d); stroke-width: 3; }
.fig-blk { fill: rgba(236, 234, 229, .14); stroke: rgba(236, 234, 229, .45); stroke-width: 1.5; }
.fig-blk-o { fill: rgba(236, 234, 229, .05); stroke: var(--fg-d); stroke-width: 2; }
.fig-blk-am { fill: rgba(255, 165, 38, .14); stroke: var(--amber); stroke-width: 2; stroke-dasharray: 8 6; }
.fig-arrow { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fig-int, .fig-int-am, .fig-int-red { stroke-width: 5; stroke-linecap: round; }
.fig-int { stroke: var(--fg-d); }
.fig-int-am { stroke: var(--amber); }
.fig-int-red { stroke: var(--red); }
.fig-bound { fill: none; stroke: rgba(236, 234, 229, .45); stroke-width: 2; stroke-dasharray: 10 8; }
.fig-key { fill: var(--ink-3); stroke: var(--fg-d); stroke-width: 2; }

/* share cards (tools/og.js) */
.og { position: relative; color: var(--fg-d); font-family: var(--f-text); }
.og__media { position: absolute; inset: 0; }
.og__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.og--fig .og__media { inset: 50px 40px 50px 560px; }
.og__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 12, 11, .94) 0, rgba(12, 12, 11, .7) 38%, rgba(12, 12, 11, 0) 70%); }
.og--fig .og__shade { background: none; }
.og .vf { inset: 26px; }
.og__text { position: absolute; left: 64px; bottom: 60px; width: 520px; display: grid; gap: 14px; }
.og__sub { font: 600 18px/1.3 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.og__title { font: 900 112px/.84 var(--f-display); text-transform: uppercase; }
.og__title.is-long { font-size: 78px; }
.og--fig .og__media img { object-fit: contain; object-position: 50% 50%; }
.og__url { font: 500 18px/1 var(--f-text); color: var(--mute-d); letter-spacing: .04em; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 959.98px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-bottom: 72px; }
  .chapter, .chapter:nth-child(odd) { gap: 20px; }
  .chapter__media, .chapter:nth-child(odd) .chapter__media { grid-column: 1 / -1; order: 0; }
  .chapter__text, .chapter:nth-child(odd) .chapter__text, .chapter[data-i="0"] .chapter__text { grid-column: 1 / -1; }
  .print { grid-column: 1 / span 5; }
  .story__text { grid-column: 6 / span 7; }
  .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gut); }
  .index__title { grid-column: 1 / -1; }
  .index__lede { grid-column: 1 / span 8; }
  .chips { grid-column: 1 / -1; }
  .index__status { grid-column: 1 / -1; justify-self: start; }
  .ph__text, .ph__media, .ph__media--tall { grid-column: 1 / -1; }
  .ph--photo .ph__media { order: -1; }
  .exs__title, .exs__list { grid-column: 1 / -1; }
  .ph__media--tall .ph__frame { height: auto; max-height: none; aspect-ratio: var(--ar); width: min(100%, 420px); }
  .ph__grid { align-items: start; }
  .is__title, .is__list, .by__title, .by__list, .lk__title, .lk__list { grid-column: 1 / -1; }
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sect__title, .sect__body { grid-column: 1 / -1; }
  .shot.is-left, .shot.is-right { grid-column: 1 / -1; }
  .shot.is-tall-l { grid-column: 1 / span 6; }
  .shot.is-tall-r { grid-column: 7 / span 6; }
  .pts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .next__media { grid-column: 1 / -1; grid-row: auto; order: -1; margin-bottom: 24px; }
  .next__title, .next__sum, .next__k { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 699.98px) {
  :root { --hdr: 58px; }
  .stage { --open-h: max(440px, 72svh); }
  .hero { position: relative; top: auto; height: auto; background: var(--ink); padding: 0 var(--pad) 8px; margin-top: -4.4rem; gap: 18px; }
  .hero__name { font-size: clamp(4.4rem, 26vw, 8rem); }
  .hero__ro { position: absolute; top: calc(var(--hdr) + 12px); bottom: auto; }
  .hero__ro .ro__seg:nth-child(n+6) { display: none; }
  .stage__well::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 34%; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(12, 12, 11, .82), rgba(12, 12, 11, 0)); }
  .frame img { object-position: 62% 40%; }
  .vf--stage { inset: calc(var(--hdr) + 4px) 12px 12px 12px; }
  .chapters { padding-top: 64px; }
  .chapter__title { font-size: clamp(2.75rem, 14vw, 4.25rem); }
  .story__grid { row-gap: 40px; }
  .print { grid-column: 2 / span 10; position: relative; top: 0; }
  .story__text { grid-column: 1 / -1; }
  .route { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 0 0 0 30px; }
  .route__line { left: 5px; top: 6px; width: 2px; height: calc(100% - 20px); }
  .route__line line { display: none; }
  .route__line { background: var(--ink); }
  .route__dot { top: 4px; left: -30px; }
  .modes { grid-template-columns: minmax(0, 1fr); }
  .story__aside > div:first-child, .story__aside > div:last-child { grid-column: 1 / -1; }
  .index__cols { display: none; }
  .row__link { grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; gap: 4px 12px; padding: 16px 0; }
  .row__n { grid-row: 1 / span 3; }
  .row__title { grid-column: 2; }
  .row__label, .row__year, .row__status { grid-column: 2; font-size: .875rem; }
  .row__year { display: none; }
  .row__go { grid-column: 3; grid-row: 1; }
  .index__lede { grid-column: 1 / -1; }
  .ftr__mark, .ftr__where, .ftr__links, .ftr__colophon { grid-column: 1 / -1; }
  .ftr__top { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .is__row { grid-template-columns: minmax(0, 1fr); }
  .stats__grid { grid-template-columns: minmax(0, 1fr); }
  .shot.is-tall-l, .shot.is-tall-r { grid-column: 1 / -1; }
  .pts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .by__list a { grid-template-columns: minmax(0, 1fr) 1.5rem; gap: 4px 12px; }
  .by__d, .by__s { grid-column: 1; }
  .by__t { grid-column: 1; grid-row: 2; }
  .by__s { grid-row: 3; }
  .by__list a .arr { grid-column: 2; grid-row: 1; }
  .group__title, .group__note, .group__n { grid-column: 1 / -1; justify-self: start; }
  .lk__list a { grid-template-columns: minmax(0, 1fr) 1.5rem; }
  .lk__n { grid-column: 1; grid-row: 2; }
  .lk__list a .arr { grid-column: 2; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hdr.is-hidden { transform: none; }
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .hdr, .menu, .stage__nav, .af, .vf, .index__preview, .skip { display: none !important; }
  body, .stage, .strip, .contact, .ph, .stats, .group, .next, .lk, .ftr { background: #fff !important; color: #000 !important; }
}