/* ==========================================================================
   Home · presentation build
   Everything here is scoped to body.p-index and overrides css/fot.css.
   Reading path on the first screen: lockup → label → FILM × TECH × BUSINESS → date → two actions → status card,
   then the band: where · by day · evenings · dinner. Footage under a dark scrim.
   ========================================================================== */

/* ---------- header and viewfinder over the footage (light text until the page scrolls) ---------- */
body.p-index .hd:not(.is-scrolled) { --fg: #FFFFFF; --fg-2: rgba(255, 255, 255, .82); --bg: #0B0B0C; }
body.p-index.hx-top .vf i:nth-child(1), body.p-index.hx-top .vf i:nth-child(2) { color: #fff; }
body.p-index.hx-bot .vf i:nth-child(3), body.p-index.hx-bot .vf i:nth-child(4) { color: #fff; }
body.p-index .vf i { transition: color .3s; }

/* keyboard focus over the footage: a white ring (violet is 1.5–2.6:1 on the video) */
body.p-index a.sr:focus-visible, body.p-index .hd:not(.is-scrolled) :focus-visible, body.p-index .hx :focus-visible { outline-color: #fff; }

/* keyboard: the skip link becomes visible on focus */
body.p-index .sr:focus-visible { position: fixed !important; left: var(--edge); top: var(--edge); width: auto; height: auto; clip: auto; padding: 12px 16px; background: var(--fg); color: var(--bg); z-index: 100; }

/* the route keeps its dots; labels show on hover/focus below 1600 px so they never cover text */
body.p-index .route a { font-size: 12px; }
@media (max-width: 1599px) {
  body.p-index .route a.is-here span { opacity: 0; transform: translateX(6px); }
  body.p-index .route a:hover span, body.p-index .route a:focus-visible span { opacity: 1; transform: none; }
}

/* ---------- HERO ---------- */
body.p-index .hero { display: flex; flex-direction: column; height: 100svh; min-height: 720px; max-height: 1180px; background: #0B0B0C; color: #fff; }
body.p-index .hero::after { display: none; }
body.p-index .hero__media { overflow: hidden; }
body.p-index .hero__media img, body.p-index .hero__media video { object-position: 62% 40%; }
body.p-index .hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 6, 8, .62) 0%, rgba(6, 6, 8, 0) 22%),
    linear-gradient(90deg, rgba(6, 6, 8, .9) 0%, rgba(6, 6, 8, .78) 38%, rgba(6, 6, 8, .38) 66%, rgba(6, 6, 8, .2) 100%),
    linear-gradient(0deg, rgba(6, 6, 8, .7) 0%, rgba(6, 6, 8, 0) 42%); }
body.p-index .hx { --fg: #FFFFFF; --fg-2: rgba(255, 255, 255, .8); --bg: #0B0B0C; --accent: #6827C1; --accent-t: #C4A6FF; --on-accent: #FFFFFF;
  position: relative; z-index: 2; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto; column-gap: var(--gap);
  padding: calc(var(--edge) + 92px) var(--gut) clamp(28px, 4.2svh, 48px); color: var(--fg); }
body.p-index .hx__head { position: static; transform: none; grid-column: 1 / 10; grid-row: 1; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 1.8svh, 20px); padding: 0; text-align: left; }
body.p-index .hx__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
body.p-index .hx__top .hx__meta { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .4); min-height: 28px; }
body.p-index .hx__lock { display: flex; align-items: center; gap: 12px; font: 700 clamp(17px, 1.35vw, 21px)/1 var(--sans); letter-spacing: -.01em; text-transform: uppercase; }
body.p-index .hx__lock .mark { inline-size: 26px; block-size: 28px; }
body.p-index .hx__lock .mark .glyph { fill: #fff; }
body.p-index .hx__meta { font-size: 13px; color: #fff; flex-wrap: wrap; row-gap: 4px; }
body.p-index .hx__meta > span:not(.hx__dot) { white-space: nowrap; }
body.p-index .hx__h { margin: 0; font: 700 clamp(56px, min(8.6vw, 12.6svh), 150px)/.84 var(--sans); letter-spacing: -.045em; text-transform: uppercase; color: #fff; }
body.p-index .hx__l { display: block; white-space: nowrap; }
body.p-index .hx__x { display: inline-block; margin-left: .12em; color: #9C6BFF; font-weight: 400; transform: translateY(-.02em); }
body.p-index .hx__intro { position: static; grid-column: 1 / 9; grid-row: 2; inline-size: auto; display: flex; flex-direction: column; gap: clamp(14px, 2svh, 22px); padding-top: clamp(16px, 2.4svh, 26px); }
body.p-index .hx__date { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; }
body.p-index .hx__date b { font: 500 clamp(28px, min(3.2vw, 5.2svh), 52px)/1 var(--mono); letter-spacing: -.04em; white-space: nowrap; }
body.p-index .hx__date span { font: 500 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; }
body.p-index .hero__intro p.hx__sub { display: none; font-size: 17px; line-height: 1.5; max-width: 40ch; color: #fff; }
body.p-index .hx__acts { display: flex; flex-wrap: wrap; gap: 14px 18px; }
body.p-index .hx__act { display: flex; flex-direction: column; gap: 10px; flex: 0 1 330px; min-width: 0; }
body.p-index .hx__acts .btn { white-space: nowrap; }
body.p-index .hero__intro p.hx__closed { order: -1; }
body.p-index .hx__acts .btn { min-height: 56px; padding: 0 24px; font-size: 13px; }
body.p-index .hx__acts .btn--o { box-shadow: inset 0 0 0 1.5px #fff; color: #fff; }
body.p-index .hx__acts .btn--o.is-primary { background: #fff; color: #0B0B0C; box-shadow: none; }
body.p-index .hero__intro p.hx__cap { font: 400 15px/1.35 var(--sans); color: rgba(255, 255, 255, .86); }
/* each caption fact on its own line: no separator dot left at a line end, and a date never splits */
body.p-index .hx__cap > span:not(.sr) { display: block; }
body.p-index .hx__cap [data-st] { white-space: nowrap; }
body.p-index .hero__intro p.hx__closed { flex-basis: 100%; font-size: 17px; color: #fff; }
/* the status card (the NoArt "Next up" pattern): black, with a hairline */
body.p-index .hx__next { position: relative; right: auto; bottom: auto; grid-column: 9 / 13; grid-row: 2; align-self: end; justify-self: end; inline-size: min(100%, 420px); background: #0B0B0C; color: #F2F2F2; box-shadow: 0 0 0 1px #3A3A3E, 0 18px 50px rgba(0, 0, 0, .5); }
body.p-index .hx__next .lbl { color: #F2F2F2; }
body.p-index .hx__next .lbl::before { background: #9C6BFF; }
body.p-index .hx__next b { font-size: 19px; line-height: 1.15; }
body.p-index .next__t b { text-wrap: balance; }
body.p-index .hx__cd { display: flex; align-items: baseline; gap: 10px; }
body.p-index .hx__cdl { font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #ADADAD; }
body.p-index .hx__cdv { font: 500 22px/1 var(--mono); letter-spacing: -.02em; }
body.p-index .hx__cdv small, body.p-index .way__cd b small { font-size: 13px; letter-spacing: 0; margin: 0 6px 0 2px; color: inherit; opacity: .72; }
body.p-index .hx__cd[hidden] { display: none; }
body.p-index .scroll-cue { color: #fff; font-size: 12px; left: auto; right: var(--gut); transform: none; bottom: calc(clamp(28px, 4.2svh, 48px) + 150px); }
@media (max-width: 1080px) { body.p-index .scroll-cue { display: none; } }
body.p-index .route:focus-within ~ main .scroll-cue { visibility: hidden; }   /* a focused route label would sit on it */
/* the band: four facts on a solid surface */
body.p-index .hx__band { position: relative; z-index: 2; margin: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 0 var(--gap); padding: 18px var(--gut) 20px; background: var(--bg); color: var(--fg); border-top: 1px solid var(--fg); }
body.p-index .hx__band div { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
body.p-index .hx__band dt { font: 500 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-t); }
body.p-index .hx__band dd { margin: 0; font: 700 17px/1.35 var(--sans); letter-spacing: -.005em; }


/* ---------- ticker ---------- */
@media (prefers-reduced-motion: reduce) {
  body.p-index .ticker__in { display: flex; flex-wrap: wrap; white-space: normal; gap: 12px 40px; padding: 17px var(--gut); line-height: 1.4; transform: none !important; }
}

/* ---------- shared bits ---------- */
body.p-index .ix-stack { display: flex; flex-direction: column; gap: 16px; }
body.p-index .ix-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; }
body.p-index .h1, body.p-index .h2 { text-wrap: balance; }
body.p-index .body, body.p-index .lead { text-wrap: pretty; }
body.p-index .body { max-width: 31em; }
body.p-index .counts span, body.p-index .card__t span { font-size: 16px; line-height: 1.45; }
body.p-index .rowhead { gap: 20px 40px; }
body.p-index .rowhead > p, body.p-index .rowhead > div:not(.ix-stack) { max-width: 30em; }
body.p-index .hs__side p, body.p-index .ix-ment__side p, body.p-index .ix-cross__t { font-size: 17px; line-height: 1.5; color: var(--fg-2); }
body.p-index .hs__side, body.p-index .ix-ment__side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* ---------- 01 · what it is ---------- */
body.p-index .ix-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
body.p-index .ix-head__h { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 24px; }
body.p-index .ix-head__h .h1 em { font-style: normal; color: var(--accent-t); }
body.p-index .ix-head__t { grid-column: 8 / 13; display: flex; flex-direction: column; gap: 16px; }
body.p-index .ix-head__t .lead { max-width: 26ch; }
/* the trio: three objects, two crossings */
body.p-index .trio { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 clamp(10px, 1.6vw, 28px); margin-top: clamp(64px, 8vw, 120px); padding-top: 22px; border-top: 1px solid var(--fg); }
body.p-index .trio__i { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
body.p-index .trio__obj { position: relative; display: grid; place-items: center; block-size: clamp(190px, 18vw, 280px); margin-bottom: 8px; background: radial-gradient(60% 46% at 50% 62%, var(--soft), transparent 72%); }
body.p-index .trio__obj picture { display: contents; }
body.p-index .trio__obj img { position: absolute; inset: 6% 7%; inline-size: 86%; block-size: 88%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .14)); will-change: transform; }
body.p-index .trio__h { font: 700 clamp(44px, 4.6vw, 76px)/.9 var(--sans); letter-spacing: -.035em; text-transform: uppercase; }
body.p-index .trio__t { font-size: 17px; line-height: 1.5; max-width: 30ch; }
body.p-index .trio__on { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 6px; font: 700 16px/1.35 var(--sans); }
body.p-index .trio__on b { font-weight: 700; }
body.p-index .trio__on > span { font: 500 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
body.p-index .trio__x { align-self: start; margin-top: clamp(70px, 7vw, 116px); font: 300 clamp(48px, 5vw, 88px)/1 var(--sans); color: var(--accent-t); display: inline-block; }
body.p-index .ix-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(56px, 6vw, 88px); }

/* ---------- 02 · two ways in ---------- */
body.p-index .way { gap: 20px; min-height: 0; border: 1px solid var(--hair); }
body.p-index .way .h2 { font-size: clamp(36px, 3.6vw, 60px); }
body.p-index .kv { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--fg); }
body.p-index .kv div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
body.p-index .kv dt { font: 500 12px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
body.p-index .kv dd { margin: 0; font-size: 17px; line-height: 1.45; }
body.p-index .way__f { padding-top: 8px; }
body.p-index .way__cd { font: 400 15px/1.35 var(--sans); letter-spacing: 0; text-transform: none; max-width: 22ch; }
body.p-index .way__cd b { font-size: 26px; }
body.p-index .ix-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 22px; font-size: 17px; color: var(--fg-2); }

/* ---------- 03 · five stops ---------- */
body.p-index .hs__side { max-width: 30em; }
body.p-index .panel__n { align-items: center; flex-wrap: wrap; row-gap: 6px; }
body.p-index .panel__n .pi { inline-size: clamp(40px, 4vw, 64px); block-size: clamp(40px, 4vw, 64px); color: var(--accent-t); flex: none; }
body.p-index .panel__n .pi use { stroke-width: 1.5; }
body.p-index .panel__n span { white-space: nowrap; }
body.p-index .panel__t dl { font-size: 16px; }
body.p-index .panel__t .title { text-wrap: balance; }
body.p-index .hs__hint span { white-space: nowrap; }
@media (min-width: 901px) {
  body.p-index .panel { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-height: 0; height: clamp(320px, calc(100svh - 450px), 540px); }
  body.p-index .panel__img { min-height: 0; }
}
/* at rest (reduced motion, or no motion layer) every stop is visible: a vertical list */
@media (prefers-reduced-motion: reduce) {
  body.p-index .hs__vp { overflow: visible; }
  body.p-index .hs__track { flex-direction: column; inline-size: auto; }
  body.p-index .panel { inline-size: auto; height: auto; }
  body.p-index .hs__line, body.p-index .hs__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 901px) { body.p-index .panel__img { min-height: 280px; } }
body.p-index .hs.is-static .hs__vp { overflow: visible; }
body.p-index .hs.is-static .hs__track { flex-direction: column; inline-size: auto; }
body.p-index .hs.is-static .panel { inline-size: auto; height: auto; }
@media (min-width: 901px) { body.p-index .hs.is-static .panel__img { min-height: 280px; } }
body.p-index .hs.is-static .hs__line, body.p-index .hs.is-static .hs__hint { display: none; }

/* ---------- 04 · four days ---------- */
body.p-index .ix-days { grid-column: 7 / 13; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
body.p-index .ix-days__note { max-width: 36ch; }
body.p-index .tab-t span { font-size: 12px; }
body.p-index .tt .w { font-size: 16px; }
body.p-index .tt .par { font: 400 16px/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
body.p-index .tt .par::before { content: "↔ "; }
body.p-index .tabs button { border-color: var(--fg-3); }

/* ---------- 05 · crossings ---------- */
body.p-index .xs { border-top: 1px solid var(--fg); }
body.p-index .xs a { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 4.6fr) minmax(0, 2.6fr) 28px; gap: 10px 28px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--hair); transition: background .35s var(--ease); }
body.p-index .xs__pair { font: 700 clamp(26px, 2.6vw, 44px)/.95 var(--sans); letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance; }
body.p-index .xs__pair i { display: inline-block; margin: 0 .22em; font-style: normal; font-weight: 300; color: var(--accent-t); transition: transform .5s var(--ease); }
body.p-index .xs__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.p-index .xs__t b { font: 700 18px/1.3 var(--sans); }
body.p-index .xs__t span { font-size: 16px; line-height: 1.45; color: var(--fg-2); }
body.p-index .xs__m { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 16px; line-height: 1.4; }
body.p-index .xs__a { font-family: var(--mono); transition: transform .4s var(--ease); }
body.p-index .xs a:hover .xs__pair i, body.p-index .xs a:focus-visible .xs__pair i { transform: rotate(90deg); }
body.p-index .xs a:hover .xs__a { transform: translateX(4px); }
body.p-index .xs a:hover b { color: var(--accent-t); }
body.p-index .ix-more { margin-top: 18px; }

/* ---------- 06 · mentors ---------- */
body.p-index .pcard__none b { -webkit-text-stroke: 1.5px var(--fg-2); }
body.p-index .pcard__none span { font-size: 12px; }
body.p-index .bullet--w { color: #fff; box-shadow: inset 0 0 0 2px #fff; background: rgba(10, 10, 10, .62); } /* a dark disc keeps "1:1" legible over any photo (and before a lazy photo loads) */
body.p-index .ix-credit { margin-top: 12px; text-align: center; }

/* ---------- 07 · past editions ---------- */
body.p-index .collage__text { text-align: left; align-items: flex-start; padding-top: clamp(150px, 15vw, 230px); }
/* ≥901: the text owns a reserved centre column; the six photos live only in the two side zones
   (placed from the column's edge outwards), so the vertical parallax can never carry one over the text.
   Every measure comes from the section's width (cqw on .wrap), so it holds at any screen size. */
@media (min-width: 901px) {
  body.p-index #people > .wrap { container-type: inline-size; }
  body.p-index .collage {
    --tc: clamp(400px, 40cqw, 600px);                       /* text column */
    --cg: clamp(28px, 3cqw, 64px);                          /* air between text and photos */
    --half: calc(var(--tc) / 2 + var(--cg));                /* half of the reserved area */
    --side: calc(50cqw - var(--half));                      /* each side zone */
    --S: min(var(--side), 500px);                           /* photo cluster width */
    --o: calc((var(--side) - var(--S)) * .3);               /* keeps a wide screen's cluster near the text */
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(2.62 * var(--S));
  }
  body.p-index .collage__text { width: 100%; max-width: var(--tc); margin: 0 auto; padding: clamp(40px, 4cqw, 72px) 0; }
  body.p-index .ph-f { inset: auto; }
  /* left zone: right edge = text column edge + air + offset */
  body.p-index .ph-f.f1 { top: 0;                       right: calc(50cqw + var(--half) + var(--o) + .34 * var(--S)); width: calc(.66 * var(--S)); }
  body.p-index .ph-f.f2 { top: calc(1.06 * var(--S));   right: calc(50cqw + var(--half) + var(--o));                  width: calc(.56 * var(--S)); }
  body.p-index .ph-f.f4 { top: calc(1.76 * var(--S));   right: calc(50cqw + var(--half) + var(--o) + .06 * var(--S)); width: calc(.92 * var(--S)); }
  /* right zone: left edge = text column edge + air + offset */
  body.p-index .ph-f.f3 { top: calc(.1 * var(--S));     left: calc(50cqw + var(--half) + var(--o) + .05 * var(--S));  width: calc(.95 * var(--S)); }
  body.p-index .ph-f.f6 { top: calc(1.04 * var(--S));   left: calc(50cqw + var(--half) + var(--o));                   width: calc(.6 * var(--S)); }
  body.p-index .ph-f.f5 { top: calc(1.92 * var(--S));   left: calc(50cqw + var(--half) + var(--o) + .44 * var(--S));  width: calc(.5 * var(--S)); }
}
body.p-index .collage__text .body { max-width: 31em; }
body.p-index .ph-f figcaption { font-size: 12px; white-space: nowrap; }
body.p-index .chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.p-index .chips li { padding: 7px 12px; border: 1px solid var(--fg); font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
body.p-index .ix-photo { font-size: 15px; color: var(--fg-2); }

/* ---------- 08 · globe ---------- */
body.p-index .globe__data b { font-size: 26px; }
body.p-index .globe__data p.ix-tz { font: 400 16px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--fg-2); max-width: 26ch; }
body.p-index .globe__t { position: relative; z-index: 2; background: var(--bg); padding: 18px 0 0 18px; margin-left: -18px; }
body.p-index .ix-legs { display: flex; flex-direction: column; gap: 0; position: relative; }
body.p-index .ix-legs::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 2px; background: var(--accent); }
body.p-index .ix-legs li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px 0; }
body.p-index .ix-legs li > span:last-child { font: 500 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2); }
body.p-index .ix-legs b { display: block; font: 700 19px/1.2 var(--sans); letter-spacing: -.01em; text-transform: none; color: var(--fg); }
body.p-index .ix-legs__s { inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--accent); position: relative; z-index: 1; }
body.p-index .ix-legs__s.is-done { background: var(--accent); box-shadow: none; }
body.p-index .globe__ll { font-size: 12px; }

/* ---------- 09 · venues (the 3D map of Midtown East lives only here) ---------- */
body.p-index .ix-ven__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
body.p-index .ix-ven__head .ix-stack { grid-column: 1 / 8; }
body.p-index .ix-ven__t { grid-column: 8 / 13; display: flex; flex-direction: column; gap: 16px; }
body.p-index .ix-map { margin-top: clamp(36px, 4vw, 60px); }
body.p-index .ix-map__img { display: block; aspect-ratio: 16 / 9; background: #E6E6E8; }
body.p-index .ix-map__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
body.p-index .ix-map__img:hover img, body.p-index .ix-map__img:hover .ix-pins { transform: scale(1.03); }
/* the venue names on the map, pinned from the route map's anchors (build.py MAP_PINS): a dot on the building, the name above */
body.p-index .ix-map__img { position: relative; overflow: hidden; }
body.p-index .ix-pins { position: absolute; inset: 0; pointer-events: none; transition: transform 1.4s var(--ease); }
body.p-index .ix-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-12px, calc(-100% - 12px)); padding: 7px 10px 8px; background: #111; color: #fff; border-top: 2px solid #8F4BFF; font: 700 15px/1.1 var(--sans); letter-spacing: -.005em; white-space: nowrap; }
body.p-index .ix-pin::after { content: ""; position: absolute; left: 8px; bottom: -16px; width: 8px; height: 8px; border-radius: 50%; background: #6827C1; box-shadow: 0 0 0 2px #fff; }
@media (max-width: 720px) {
  body.p-index .ix-pin { padding: 4px 7px 5px; font-size: 12px; transform: translate(-9px, calc(-100% - 9px)); }
  body.p-index .ix-pin::after { left: 6px; bottom: -12px; width: 6px; height: 6px; }
}
body.p-index .ix-map__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; padding-top: 14px; font-size: 15px; line-height: 1.4; color: var(--fg-2); }
body.p-index .ix-walk { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--fg); }
body.p-index .ix-walk b { font: 500 14px/1 var(--mono); color: var(--accent-t); margin-left: 4px; white-space: nowrap; }
body.p-index .ix-map__osm { flex-basis: 100%; font: 500 12px/1.35 var(--mono); letter-spacing: .03em; color: var(--fg-2); }
body.p-index .ix-vlist { margin-top: clamp(36px, 4vw, 56px); }
body.p-index .ix-vlist > li > * { grid-template-columns: 48px 132px minmax(0, 3fr) minmax(0, 4fr) minmax(0, 2.4fr) 28px; align-items: center; padding: 16px 0; }
body.p-index .ix-th { display: block; inline-size: 132px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--soft); }
body.p-index .ix-th img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
body.p-index .ix-vlist a:hover .ix-th img { transform: scale(1.1); }
body.p-index .ix-th--none { display: grid; place-items: center; border: 1px solid var(--hair); background: transparent; }
body.p-index .ix-th--none .pi { inline-size: 30px; block-size: 30px; color: var(--fg-2); }
body.p-index .ix-vlist .x, body.p-index .ix-vlist .w { font-size: 16px; }


/* ---------- ≤1080 ---------- */
@media (max-width: 1080px) {
  body.p-index .hx__head { grid-column: 1 / -1; }
  body.p-index .hx__intro { grid-column: 1 / -1; }
  body.p-index .hx__next { display: none; }
  body.p-index .hx__band { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  body.p-index .ix-head__h, body.p-index .ix-head__t, body.p-index .ix-ven__head .ix-stack, body.p-index .ix-ven__t { grid-column: 1 / -1; }
  body.p-index .ix-head__t, body.p-index .ix-ven__t { margin-top: 28px; }
  body.p-index .ix-days { grid-column: 1 / -1; margin-top: 32px; }
  body.p-index .xs a { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 28px; }
  body.p-index .xs__m { grid-column: 2; }
  body.p-index .xs__a { grid-column: 3; grid-row: 1; }
  body.p-index .ix-vlist > li > * { grid-template-columns: 40px 112px minmax(0, 1fr) minmax(0, 1.2fr) 22px; }
  body.p-index .ix-vlist > li > * > :nth-child(5) { grid-column: 4; }
  body.p-index .ix-th { inline-size: 112px; }
}
@media (min-width: 901px) and (max-width: 1080px) {
  body.p-index .panel { inline-size: min(84vw, 900px); }
}

/* ---------- ≤900: stops stacked, collage 2×2 ---------- */
@media (max-width: 900px) {
  body.p-index .trio { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; border-top: 0; }
  body.p-index .trio__i { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto auto 1fr; column-gap: 20px; row-gap: 8px; padding: 22px 0; border-top: 1px solid var(--fg); }
  body.p-index .trio__obj { grid-column: 1; grid-row: 1 / 5; block-size: auto; min-block-size: 150px; margin: 0; align-self: stretch; }
  body.p-index .trio__i > :not(.trio__obj) { grid-column: 2; }
  body.p-index .trio__x { margin: -6px 0 -18px; justify-self: center; line-height: .8; font-size: 44px; position: relative; z-index: 1; background: var(--bg); padding: 0 12px; }
  body.p-index .trio__on { margin-top: 6px; }
  body.p-index .panel__n b { font-size: clamp(44px, 13vw, 72px); }
  body.p-index .panel__img { min-height: 0; aspect-ratio: 16 / 9; }
  /* the first photo row drifts up by up to 14% of a 4:5 half-width frame (≈ 9vw): keep that much air under the credit */
  body.p-index .collage__text { padding: 0 0 calc(20px + 9vw); }
  body.p-index .ph-f.f5, body.p-index .ph-f.f6 { display: none; }
  body.p-index .ph-f.f3, body.p-index .ph-f.f4 { grid-column: auto; aspect-ratio: 4 / 5 !important; }
}

/* ---------- ≤720: the hero in normal flow ---------- */
@media (max-width: 720px) {
  body.p-index .hero { height: auto; min-height: 0; max-height: none; }
  body.p-index .hx { display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; min-height: 100svh; padding: calc(var(--edge) + 76px) var(--gut) calc(var(--edge) + 18px); }
  body.p-index .hero__media::after { background: linear-gradient(180deg, rgba(6, 6, 8, .66) 0%, rgba(6, 6, 8, .5) 30%, rgba(6, 6, 8, .78) 60%, rgba(6, 6, 8, .92) 100%); }
  body.p-index .hero__media img, body.p-index .hero__media video { object-position: 56% 35%; }
  body.p-index .hx__head { gap: 12px; align-self: stretch; }
  body.p-index .hx__top { gap: 10px; }
  body.p-index .hx__top .hx__meta { padding-left: 0; border-left: 0; min-height: 0; }
  body.p-index .hx__h { font-size: clamp(48px, 15.5vw, 76px); line-height: .86; }
  body.p-index .hx__meta { font-size: 12px; }
  body.p-index .hx__intro { padding-top: 0; gap: 14px; }
  body.p-index .hero__intro p.hx__sub { display: block; }
  body.p-index .hx__acts { flex-direction: column; flex-wrap: wrap; gap: 12px; }
  body.p-index .hx__act { flex: none; }
  body.p-index .hx__acts .btn { inline-size: 100%; min-height: 52px; }
  body.p-index .hx__next { display: none; }
  body.p-index .hx__band { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding: 18px var(--gut) 20px; }
  body.p-index .hx__band div { gap: 4px; }
  body.p-index .hx__band dd { font-size: 16px; }
  body.p-index .ix-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.p-index .kv div { grid-template-columns: 1fr; gap: 4px; }
  body.p-index .way__f { flex-direction: column; align-items: flex-start; }
  body.p-index .way__cd { text-align: left; }
  body.p-index .way .btn { inline-size: 100%; }
  body.p-index .trio__i { grid-template-columns: minmax(0, 1fr); }
  body.p-index .trio__obj { grid-row: auto; min-block-size: 0; block-size: 180px; }
  body.p-index .trio__i > :not(.trio__obj) { grid-column: 1; }
  body.p-index .xs a { grid-template-columns: minmax(0, 1fr) 22px; gap: 8px 12px; padding: 18px 0; }
  body.p-index .xs__pair { font-size: clamp(24px, 7.4vw, 32px); grid-column: 1; }
  body.p-index .xs__t, body.p-index .xs__m { grid-column: 1; }
  body.p-index .xs__a { grid-column: 2; grid-row: 1; }
  body.p-index .xs__m { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--fg-2); }
  body.p-index .ix-vlist > li > * { grid-template-columns: 34px minmax(0, 1fr) 22px; gap: 10px 12px; }
  body.p-index .ix-vlist .ix-th { grid-column: 2; inline-size: 100%; max-inline-size: 260px; }
  body.p-index .ix-vlist .ix-th--none { display: none; }
  body.p-index .ix-vlist > li > * > b, body.p-index .ix-vlist > li > * > .x, body.p-index .ix-vlist > li > * > :nth-child(5) { grid-column: 2; }
  body.p-index .ix-vlist .a { grid-column: 3; grid-row: 1; }
  body.p-index .ix-map__cap { flex-direction: column; }
  body.p-index .ix-walk { flex-direction: column; }
  body.p-index .ix-map__osm { flex-basis: auto; }
  body.p-index .globe__t { padding: 0; margin-left: 0; }
  body.p-index .route { display: none; }
}
@media (max-width: 380px) {
  body.p-index .hx__h { font-size: clamp(42px, 14.6vw, 56px); }
  body.p-index .hx__meta .hx__dot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.p-index .trio__obj img { will-change: auto; }
}

/* header wash: fully opaque behind the links so text never shows through */
body.p-index .hd.is-scrolled::before { opacity: 1; background: linear-gradient(rgb(var(--wash)) 72%, rgba(var(--wash), 0)); }
@media (min-width: 901px) {
  body.p-index .hs.is-pinned .hs__pin { padding-top: clamp(76px, 9vh, 110px); }
  body.p-index .hs.is-pinned .hs__track { padding-top: clamp(24px, 3vh, 44px); }
  body.p-index .hs.is-pinned .hs__line { margin-top: 26px; }
}

/* cookie card: docked and compact site-wide (css/fot.css) */

/* hero media caption: the footage is from a past edition in Bucharest, not New York */
body.p-index .hx__arch { position: absolute; z-index: 1; right: var(--gut); top: calc(var(--edge) + 62px); margin: 0; padding: 5px 8px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(6, 6, 8, .72); pointer-events: none; max-inline-size: calc(100% - 2 * var(--gut)); }
@media (max-width: 720px) {
  body.p-index .hx { padding-bottom: calc(var(--edge) + 18px + 44px); }
  body.p-index .hx__arch { right: auto; left: var(--gut); top: auto; bottom: 12px; letter-spacing: .03em; line-height: 1.3; padding: 4px 6px; }
}

/* reading floor */
body.p-index .ix-days__note, body.p-index .ix-credit { font-size: 17px; line-height: 1.5; }

/* 08 · the globe stays whole: the sphere keeps out of the text column, and the text panel has no fill over it */
@media (min-width: 1081px) {
  body.p-index .globe__c { grid-column: 3 / 9; justify-self: end; margin-top: 20px; }
  body.p-index .globe__t { background: none; }
}

/* phones: the archive caption keeps clear of the fixed viewfinder corner (bottom-left, 16 px at --edge) */
@media (max-width: 720px) {
  body.p-index .hx { padding-bottom: calc(var(--edge) + 18px + 64px); }
  body.p-index .hx__arch { left: calc(var(--edge) + 22px); bottom: calc(var(--edge) + 12px); max-inline-size: calc(100% - 2 * var(--edge) - 44px); }
}

/* ---------- four days (17–20 Nov) ---------- */
/* the trio's Film column: the four screenings, one per night, each with its date */
body.p-index .trio__films { display: flex; flex-direction: column; margin-top: 2px; }
body.p-index .trio__films li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 0; border-top: 1px solid var(--hair); font: 700 16px/1.45 var(--sans); }
body.p-index .trio__films li:first-child { border-top: 0; padding-top: 2px; }
body.p-index .trio__d { font: 500 13px/23px var(--mono); color: var(--accent-t); font-variant-numeric: tabular-nums; }
/* a film title and its "Work in progress" chip wrap as one piece; a title and its name never part ("Dr." stays with the name) */
body.p-index .fw { display: inline-block; }
body.p-index .nm { white-space: nowrap; }
/* chips on consecutive lines keep a little air between them */
body.p-index .trio__films .wip { margin-block: 3px; }
/* the three "On the programme" lines start at the same height (the Film list is the longest) */
@media (min-width: 901px) { body.p-index .trio__on { margin-top: 4px; } }
/* "One theme a day": four tabs, two by two, so every theme stays readable in the half column */
body.p-index .ix-days .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.p-index .tt .par--one::before { content: none; }
body.p-index .tt .par--one { color: var(--fg-2); }