/* ==========================================================================
   Opportunities — the ledger. Page-scoped styles, loaded AFTER style.css.
   Lifted from design-explorations/round-11-ledger.html.

   Removed on the way in: the reset, :root tokens, html/body/img/button/
   textarea base, .sr-only, the bare `footer` rule and the R11 context bar —
   all of those already live in style.css, and `footer` in particular would
   have leaked onto the site's mega-footer.
   Renamed: .hero -> .led-hero. The homepage .hero is a different component
   (radial ::before, its own h1 scale) and the two cannot share a name.
   ========================================================================== */

::selection { background: var(--water); color: var(--ink); }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(11,14,15,.66), rgba(11,14,15,.32) 62%, rgba(11,14,15,0));
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
  mask-image: linear-gradient(to bottom, #000 40%, transparent); }

.eyebrow { font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--water); font-weight: 500; }
.note { color: var(--mist); font-size: .8rem; line-height: 1.6; }
html.anim [data-reveal] { opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.anim [data-reveal].is-in { opacity: 1; transform: none; }
html.js-failed [data-reveal] { opacity: 1 !important; transform: none !important; }
html.anim [data-drift] { --d: 0; transform: translate3d(calc(var(--d) * 1px), 0, 0); will-change: transform; }

/* scenes + the one material */
.scene { position: relative; overflow: clip; }
.scene .media { position: absolute; inset: 0; z-index: 0; }
.scene .media img { width: 100%; height: 100%; object-fit: cover; }
.scene .media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,14,15,.94) 0%, rgba(11,14,15,.44) 40%, rgba(11,14,15,.16) 66%, rgba(11,14,15,.4) 100%); }
.scene .inner { position: relative; z-index: 2; }
[data-resolve] { --r: 1; position: relative; overflow: hidden; }
html.anim [data-resolve] { --r: 0; }
html.anim [data-resolve] img { will-change: transform, filter;
  filter: grayscale(calc((1 - var(--r)) * 88%)) contrast(calc(1 + (1 - var(--r)) * .18)) brightness(calc(1 - (1 - var(--r)) * .16));
  transform: scale(calc(1 + (1 - var(--r)) * .045)); }
html.anim [data-resolve]::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: calc((1 - var(--r)) * .55);
  background: repeating-linear-gradient(90deg, rgba(11,14,15,.85) 0 1px, rgba(11,14,15,0) 1px 4px); }

/* ---------- S1 · arrival, type bridging into the ink ---------- */
/* The site nav is sticky but sits IN FLOW, so it consumes the top of the first
   scene. The exploration page's context bar overlaid the hero instead, so this
   subtraction did not exist there — without it the headline loses a further
   80px below the fold. svh keeps the same promise on phones, where 100vh
   measures the viewport with the browser chrome retracted. */
.led-hero { --nav-h: 5rem; min-height: min(calc(100vh - var(--nav-h)), 66rem);
  min-height: min(calc(100svh - var(--nav-h)), 66rem);
  display: grid; align-items: end; overflow: visible; }
@media (max-width: 760px) { .led-hero { --nav-h: 3rem; } }
.led-hero .media { overflow: clip; }
.led-hero .media::after { background: linear-gradient(to top, rgba(11,14,15,.5) 0%, rgba(11,14,15,.16) 34%, rgba(11,14,15,.1) 62%, rgba(11,14,15,.44) 100%); }
.led-hero .inner { padding: clamp(6rem, 16vh, 11rem) var(--gutter) 0; width: 100%; }
.led-hero .eyebrow { text-shadow: 0 1px 18px rgba(11,14,15,.6); }
.led-hero h1 { font-family: var(--display); font-weight: 500;
  font-size: clamp(3.2rem, 9vw, 9rem); line-height: .96; letter-spacing: -.02em;
  max-width: 10ch; position: relative; z-index: 3; margin-bottom: -.36em; }

/* ---------- S2 · the judgment as a sentence ---------- */
.judgment { padding: calc(clamp(1.2rem, 3.3vw, 3.3rem) + clamp(4.5rem, 12vh, 7.5rem)) var(--gutter) clamp(4rem, 11vh, 7rem); }
.judgment .standfirst { margin: 0 0 clamp(3rem, 8vh, 5.5rem); font-size: clamp(.98rem, 1.4vw, 1.14rem);
  line-height: 1.65; color: var(--grey); max-width: 42rem; }
.judgment .standfirst b { color: var(--porcelain); font-weight: 500; }
.judgment .j-head { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: baseline;
  margin-bottom: clamp(2.2rem, 6vh, 4rem); }
.j-tag { display: inline-block; border: 1px solid rgba(127,178,196,.5); border-radius: 999px;
  padding: .26rem .8rem; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--water); }
.jline { font-family: var(--display); font-weight: 500; letter-spacing: -.025em;
  font-size: clamp(2.8rem, 8vw, 8rem); line-height: 1.04; color: var(--grey); }
.jline .cnum { color: var(--porcelain); font-variant-numeric: tabular-nums; }
.jline.j2 { margin-left: clamp(2rem, 16vw, 16rem); }
.jline.j3 { text-align: right; }
.jline.j3 .cnum { color: var(--water); }
.judgment .j-note { margin-top: clamp(2rem, 5vh, 3rem); max-width: 44ch; }

/* ---------- S3 · the moment ---------- */
.moment { min-height: min(88vh, 56rem); display: grid; align-items: center; border-top: 1px solid var(--line); }
.moment .media::after { background: rgba(11,14,15,.9); }
.moment .inner { width: 100%; padding: clamp(4rem, 10vh, 6rem) var(--gutter); display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.moment h2 { font-family: var(--display); font-weight: 500; font-size: clamp(2.4rem, 5.6vw, 5.2rem);
  line-height: 1.02; letter-spacing: -.014em; margin-top: 1.1rem; max-width: 13ch; }
.moment .m-sub { margin-top: 1.2rem; color: var(--grey); max-width: 33rem; line-height: 1.7; }
.fitcount { text-align: right; }
.fitcount .fc-num { display: block; font-family: var(--display); font-weight: 500;
  font-size: clamp(8rem, 24vw, 23rem); line-height: .76; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; }
html.anim .fitcount .fc-num { transition: opacity .2s var(--ease), transform .3s var(--ease); }
.fitcount .fc-num.is-swap { opacity: .16; transform: translateY(-14px); }
.fitcount .fc-num.is-zero { color: var(--water); }
.fitcount .fc-lbl { display: block; margin-top: .7rem; font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--mist); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: clamp(1.6rem, 4vh, 2.4rem); }
.chip { border: 1px solid var(--line-strong); border-radius: 999px; padding: .62rem 1.25rem; color: var(--grey);
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; background: rgba(11,14,15,.4);
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease); }
.chip:hover { color: var(--porcelain); }
.chip[aria-pressed="true"] { background: var(--porcelain); color: var(--ink); border-color: var(--porcelain); }

/* ---------- S4 · the signature: type births the image ---------- */
.sig { position: relative; height: 230vh; border-top: 1px solid var(--line);
  transition: opacity .55s var(--ease); }
html.anim .sig.is-out { opacity: 0; }
.sig.is-hidden { display: none; }
.sig-pin { position: sticky; top: 0; height: 100vh; overflow: clip; }
.sig-bg { position: absolute; inset: 0; opacity: var(--bg, 0); }
.sig-bg img { width: 100%; height: 100%; object-fit: cover; }
.sig-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,14,15,.9) 0%, rgba(11,14,15,.35) 45%, rgba(11,14,15,.25) 100%); }
.sig-word { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.sig-word .sw { font-family: var(--display); font-weight: 600; line-height: .85;
  font-size: clamp(9rem, 26vw, 26rem); letter-spacing: -.02em; white-space: nowrap;
  transform: translateY(calc(var(--sp, 0) * -4vh)); }
.sw.fill { background: url("photos/en01/terraces-2000.jpg") 50% 38% / cover no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: var(--wo, 1); }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .sw.fill { background: none; color: var(--porcelain); }
}
.sw.line { position: absolute; inset: 0; display: grid; place-items: center;
  color: transparent; -webkit-text-stroke: 1px rgba(243,241,234,.55); opacity: var(--lo, 0); }
.sig-cue { position: absolute; left: 0; right: 0; text-align: center;
  bottom: clamp(1.4rem, 5vh, 3rem); font-size: .68rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--mist); opacity: var(--wo, 1); }
.sig-place { position: absolute; top: clamp(5.5rem, 14vh, 8rem); left: 0; right: 0; text-align: center;
  opacity: var(--wo, 1); }
.sig-panel { position: absolute; right: var(--gutter); bottom: 6vh; width: min(30rem, calc(100% - 2 * var(--gutter)));
  background: rgba(14,20,23,.9); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.3rem, 2.4vw, 2rem);
  opacity: var(--pp, 0); transform: translateY(calc((1 - var(--pp, 0)) * 44px)); }
html:not(.anim) .sig { height: auto; }
html:not(.anim) .sig-pin { position: relative; height: auto; min-height: 100vh; }
html:not(.anim) .sig-bg { opacity: 1; }
html:not(.anim) .sw.fill { opacity: 0; }
html:not(.anim) .sw.line { opacity: 1; }
html:not(.anim) .sig-panel { position: relative; right: auto; margin: 2rem var(--gutter) 3rem auto; opacity: 1; transform: none; }
html:not(.anim) .sig-cue, html:not(.anim) .sig-place { opacity: 0; }

.d-ref { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.d-ref .ref { font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: .9; letter-spacing: -.02em; }
.d-ref .place { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--water); }
.d-lead { margin-top: .9rem; font-family: var(--display); font-weight: 500;
  font-size: clamp(1rem, 1.55vw, 1.26rem); line-height: 1.42; }
.d-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.3rem;
  margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.spec .sp-num { display: block; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: .9; letter-spacing: -.02em; }
.spec .sp-num i { font-style: normal; font-size: .5em; letter-spacing: 0; }
.spec .sp-lbl { display: block; margin-top: .4rem; font-size: .64rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--mist); line-height: 1.5; }
.spec.await .sp-num { color: var(--water); }
.d-price { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: .95rem;
  font-size: .86rem; line-height: 1.6; color: var(--grey); }
.d-price b { color: var(--porcelain); font-weight: 500; }
.dmore { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; margin: 1.1rem 0 0; padding: .7rem 0; border-top: 1px solid var(--line);
  color: var(--grey); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  transition: color .25s var(--ease); }
.dmore:hover { color: var(--porcelain); }
.dmore-sign { position: relative; display: inline-block; flex: none; width: 1.5rem; height: 1.5rem;
  border: 1px solid currentColor; border-radius: 999px; }
.dmore-sign::before, .dmore-sign::after { content: ""; position: absolute; left: 50%; top: 50%;
  background: currentColor; transform: translate(-50%,-50%); }
.dmore-sign::before { width: .58rem; height: 1px; } .dmore-sign::after { width: 1px; height: .58rem; }
html.anim .dmore-sign { transition: transform .5s var(--ease); }
.dmore[aria-expanded="true"] .dmore-sign { transform: rotate(135deg); }

/* ---------- S5 · the open dossier ---------- */
.d-detail { overflow: hidden; height: 0; background: var(--ink); position: relative; z-index: 3; }
html:not(.anim) .d-detail, html.js-failed .d-detail { height: auto; }
.d-open { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.6rem, 4vw, 4rem); padding: clamp(2.2rem, 5vh, 4rem) var(--gutter);
  border-top: 1px solid var(--line); }
.strip-wrap { min-width: 0; }
.strip-head { display: flex; align-items: baseline; gap: .35rem; margin-bottom: 1rem; }
.strip-head .s-now { font-family: var(--display); font-weight: 500; font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: .82; letter-spacing: -.02em; }
html.anim .strip-head .s-now { transition: opacity .18s var(--ease); }
.strip-head .s-now.is-swap { opacity: .22; }
.strip-head .s-sep, .strip-head .s-all { font-size: clamp(.95rem, 1.6vw, 1.3rem); color: var(--mist); font-style: normal; }
/* An unlabelled affordance is a missed one. The label lives INSIDE the scroller,
   sticky at its left edge, so it stays put while the strip is dragged and labels
   the control rather than sitting beside it. Zero-width flex item with the gap
   cancelled, so it overlays the first frame instead of displacing it.
   Treatment is the figcaption's, exactly — caps, letterspaced, one shadow, no
   plate. A chip here read as broken the moment a bright sky sat behind it, and
   inventing a second label language for one element is how a page gets noisy. */
.strip .s-drag { position: sticky; left: 0; z-index: 4; flex: 0 0 0; width: 0;
  margin-right: -1rem; align-self: flex-start; pointer-events: none; }
.strip .s-drag b { display: block; margin: 1rem 0 0 1rem; white-space: nowrap;
  font-weight: 400; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(243,241,234,.88); text-shadow: 0 1px 12px rgba(11,14,15,.9), 0 0 4px rgba(11,14,15,.75); }
.strip-head .s-cap { margin-left: auto; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); text-align: right; }
.strip { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strip::-webkit-scrollbar { display: none; }
.strip figure { flex: 0 0 auto; width: min(46rem, 88%); scroll-snap-align: start; position: relative; }
.strip img { width: 100%; aspect-ratio: 16 / 9.4; object-fit: cover; border-radius: 2px; }
.strip figcaption { position: absolute; left: 1rem; bottom: .9rem; z-index: 2; font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(243,241,234,.88);
  text-shadow: 0 1px 12px rgba(11,14,15,.75); }
.strip-nav { display: flex; gap: .5rem; margin-top: 1rem; }
.strip-nav button { width: 2.7rem; height: 2.7rem; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--porcelain); font-size: 1rem; display: grid; place-items: center;
  transition: background-color .3s, color .3s, border-color .3s, transform .2s var(--ease); }
.strip-nav button:hover { background: var(--porcelain); color: var(--ink); border-color: var(--porcelain); }
.strip-nav button:active { transform: scale(.94); }
.plan-block { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.3rem; }
.plan-block h4, .d-col h4 { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--water); font-weight: 500; }
.d-col { min-width: 0; display: flex; flex-direction: column; gap: 1.3rem; }
.decade { border-left: 2px solid var(--water); padding: .2rem 0 .2rem 1.1rem; }
.decade .dc-cat { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--water); }
.decade p { margin-top: .5rem; color: var(--grey); font-size: .92rem; line-height: 1.65; }
.record ul { list-style: none; margin-top: .7rem; display: grid; gap: .55rem; }
.record li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line);
  padding-bottom: .55rem; font-size: .9rem; color: var(--grey); }
.record li i { font-style: normal; color: var(--mist); font-size: .76rem; letter-spacing: .08em; }
.actual img { border-radius: 2px; }
.actual figcaption { margin-top: .55rem; font-size: .78rem; color: var(--mist); line-height: 1.6; }
.composer { border: 1px solid var(--line-strong); background: var(--ink-2); border-radius: 2px;
  padding: 1.1rem; max-width: 34rem; transition: border-color .3s, box-shadow .3s; }
.composer:focus-within { border-color: var(--water); box-shadow: 0 0 0 3px rgba(127,178,196,.15); }
.composer textarea::placeholder { color: var(--mist); }
.composer-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .7rem; flex-wrap: wrap; }
.composer-hint { font-size: .8rem; color: var(--mist); }
.composer-send { background: var(--porcelain); color: var(--ink); font-weight: 500; font-size: .95rem;
  padding: .7rem 1.4rem; border-radius: 2px; transition: transform .25s var(--ease), box-shadow .25s; }
.composer-send:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(243,241,234,.14); }

/* ---------- EN·02 seat + zero ---------- */
.seat { border-top: 1px solid var(--line); padding: clamp(2.6rem, 7vh, 4.5rem) var(--gutter);
  transition: opacity .55s var(--ease), transform .55s var(--ease); }
html.anim .seat.is-out { opacity: 0; transform: translateY(10px); }
.seat.is-hidden { display: none; }
.seat-frame { border: 1px dashed var(--line-strong); border-radius: 4px;
  padding: clamp(1.4rem, 3.5vw, 2.6rem); display: grid;
  grid-template-columns: auto minmax(0,1fr) auto; gap: 1.2rem 2.5rem; align-items: baseline; }
.seat .ref { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 4.6vw, 3.8rem);
  line-height: .9; letter-spacing: -.02em; color: var(--grey); }
.seat p { color: var(--grey); font-size: .95rem; line-height: 1.7; max-width: 52ch; }
.seat .ph-tag { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--mist);
  border: 1px dashed var(--line-strong); border-radius: 2px; padding: .3rem .7rem; white-space: nowrap; }
.zero { border-top: 1px solid var(--line); padding: clamp(3rem, 8vh, 5rem) var(--gutter); display: none; }
.zero.is-on { display: block; }
.zero h3 { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 4.6vw, 4rem);
  line-height: 1.06; max-width: 18ch; letter-spacing: -.012em; }
.zero p { margin-top: 1rem; color: var(--grey); max-width: 52ch; line-height: 1.7; }
.zero .composer { margin-top: 1.6rem; }

/* ---------- scene 6 · the drawn map ---------- */
.mapsec { border-top: 1px solid var(--line); padding: clamp(4rem, 11vh, 7rem) var(--gutter); }
.mapsec h2 { font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem, 5vw, 4.6rem);
  line-height: 1.04; letter-spacing: -.014em; margin-top: 1rem; max-width: 16ch; }
.map-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .58fr);
  gap: clamp(1.8rem, 4vw, 3.6rem); align-items: start; margin-top: clamp(2rem, 5vh, 3.2rem); }

/* --- the drawing --- */
.mapstage svg { width: 100%; height: auto; display: block; overflow: hidden; }
.mapdraw { --ct: rgba(243,241,234,.115); --ct-i: rgba(243,241,234,.2); }
.mapdraw text { font-family: var(--sans); text-transform: uppercase;
  paint-order: stroke fill; stroke: var(--ink); stroke-width: 2.8px; stroke-linejoin: round;
  stroke-opacity: .92; }
.mapdraw path, .mapdraw line { fill: none; }

.m-sea .sea-fill { fill: url(#mapDeep); stroke: none; }
.m-iso path { stroke: var(--water); stroke-opacity: .42; stroke-width: .75; }
.m-iso:nth-of-type(1) path { stroke-opacity: .5; }
.m-iso:nth-of-type(4) path { stroke-opacity: .26; }

.m-ct path { stroke: var(--ct); stroke-width: .5; }
.m-ct:nth-of-type(3n+1) path { stroke: var(--ct-i); stroke-width: .75; }

.m-wood .wood { fill: url(#mapWood); fill-opacity: .7;
  stroke: var(--mist); stroke-opacity: .22; stroke-width: .55; }

.m-coast path { stroke: var(--water); stroke-opacity: .92; stroke-width: 1.7; stroke-linecap: round; }

.m-road .rd { stroke: var(--porcelain); stroke-linecap: round; }
.m-road .rd-0 { stroke: var(--ink); stroke-opacity: .9; stroke-width: 3.4; }
.m-road .rd-1 { stroke-opacity: .27; stroke-width: 1.3; }
.m-road .rd-2 { stroke-opacity: .16; stroke-width: .9; }
.m-road .rd-3 { stroke-opacity: .1; stroke-width: .7; }

.m-span .span-case { stroke: var(--ink); stroke-opacity: .95; stroke-width: 6; }
.m-span .span-deck { stroke: var(--porcelain); stroke-opacity: .58; stroke-width: 1.1; }
.m-span .span-tow  { stroke: var(--porcelain); stroke-opacity: .5; stroke-width: 1.4; }

/* --- type on the map --- */
.mapdraw .wtr { fill: var(--water); fill-opacity: .6; font-size: 10.5px; letter-spacing: .45em; font-weight: 500; }
.mapdraw .dst { fill: var(--mist); fill-opacity: .72; font-size: 8.8px; letter-spacing: .2em; }
.m-furn { stroke: var(--mist); stroke-opacity: .45; }
.m-furn path { fill: var(--mist); fill-opacity: .5; stroke: none; }
.m-furn line { stroke-width: .8; }
.m-furn text { fill: var(--mist); fill-opacity: .7; font-size: 8.2px; letter-spacing: .18em; }
.m-furn .north text { font-size: 10px; letter-spacing: 0; }

/* --- pins: every one a relation, never an object --- */
.map-pin { cursor: pointer; }
.map-pin .hit { fill: transparent; stroke: none; pointer-events: all; }
.map-pin .ring { fill: none; stroke: var(--grey); stroke-opacity: .75; stroke-width: 1.1;
  transition: stroke .3s var(--ease), stroke-opacity .3s var(--ease), r .35s var(--ease); }
.map-pin .halo { fill: none; stroke: var(--water); stroke-width: .9; opacity: 0;
  transition: opacity .45s var(--ease), r .55s var(--ease); r: 15px; }
.map-pin text.pl { fill: var(--grey); fill-opacity: .88; font-size: 9.5px; letter-spacing: .16em;
  transition: fill-opacity .3s; }
.map-pin text.pl .pm { fill: var(--water); }
.map-pin text.pmob { display: none; fill: var(--grey); font-size: 19px; letter-spacing: .04em; }
.map-pin:hover .ring, .map-pin:focus-visible .ring { stroke: var(--porcelain); stroke-opacity: 1; }
.map-pin:hover text.pl, .map-pin:focus-visible text.pl { fill-opacity: 1; }
.map-pin.is-on .ring { stroke: var(--porcelain); stroke-opacity: 1; stroke-width: 1.5; r: 5.6px; }
.map-pin.is-on .halo { opacity: .85; r: 12px; }
.map-pin.is-on text.pl { fill: var(--porcelain); fill-opacity: 1; }
.map-pin:focus { outline: none; }
.map-pin:focus-visible .halo { opacity: .5; }

/* the relation is the road actually taken, drawn from EN·01 outward */
.m-route path { fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
#mapRelationCase { stroke: var(--ink); stroke-opacity: .85; stroke-width: 5; }
#mapRelation { stroke: var(--porcelain); stroke-opacity: .92; stroke-width: 2; }
.m-route.is-on path { opacity: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset .95s var(--ease), opacity .18s linear; }

/* --- EN·01: the only solid object on the drawing --- */
#mapHome .home-dot { fill: var(--porcelain); stroke: none; }
#mapHome .home-ring { fill: none; stroke: var(--porcelain); stroke-opacity: .55; stroke-width: 1; }
#mapHome .home-far { fill: none; stroke: var(--porcelain); stroke-opacity: .16; stroke-width: .7; }
#mapHome .home-lbl { fill: var(--porcelain); font-family: var(--display); font-weight: 600;
  font-size: 12.5px; letter-spacing: .1em; text-transform: none; stroke-width: 3.4px; }

/* --- neatline + graticule: this is a plate, not a diagram --- */
.m-furn .neat rect { fill: none; stroke: rgba(243,241,234,.24); stroke-width: 1; }
.m-furn .neat line { stroke: rgba(243,241,234,.3); stroke-width: 1; }

/* --- readout --- */
.map-read { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.map-read .mr-cap { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mist); margin-bottom: .5rem; }
.map-read .mr-live { display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap; }
.map-read .mr-min { font-family: var(--display); font-weight: 500; font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: .82; letter-spacing: -.02em; }
.map-read .mr-min i { font-style: normal; font-size: .38em; color: var(--mist); letter-spacing: .04em; }
.map-read p#mrTxt { color: var(--grey); font-size: .92rem; max-width: 26rem; }
.map-prose { color: var(--grey); font-size: .95rem; line-height: 1.8; }
.map-prose p b { color: var(--porcelain); font-weight: 500; }
.map-side { display: flex; flex-direction: column; gap: clamp(1.6rem, 4vh, 2.6rem); }
.map-side .map-read { margin-top: 0; border-top: 0; padding-top: 0; }
.map-side .map-prose .note { margin-top: 1rem; }

/* --- staged draw-in: water, then land, then roads, then the pins --- */
html.anim .mapstage .draw { stroke-dasharray: 100; stroke-dashoffset: 100; }
html.anim .mapstage .m-sea .sea-fill, html.anim .mapstage .m-sea rect,
html.anim .mapstage .m-wood, html.anim .mapstage .m-type,
html.anim .mapstage .m-furn, html.anim .mapstage .m-span .span-tow,
html.anim .mapstage .map-pin, html.anim .mapstage #mapHome { opacity: 0; }

html.anim .mapstage.is-drawn .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s var(--ease); }
html.anim .mapstage.is-drawn .m-sea .sea-fill, html.anim .mapstage.is-drawn .m-sea rect,
html.anim .mapstage.is-drawn .m-wood, html.anim .mapstage.is-drawn .m-type,
html.anim .mapstage.is-drawn .m-furn, html.anim .mapstage.is-drawn .m-span .span-tow,
html.anim .mapstage.is-drawn .map-pin, html.anim .mapstage.is-drawn #mapHome {
  opacity: 1; transition: opacity .85s var(--ease); }

/* stage 1 — the water */
html.anim .mapstage.is-drawn .m-iso .draw { transition-delay: calc(.2s + var(--i) * .12s); }
html.anim .mapstage.is-drawn .m-sea .sea-fill { transition-duration: 1.1s; }
html.anim .mapstage.is-drawn .m-sea rect { transition-delay: .3s; }
/* stage 2 — the coastline */
html.anim .mapstage.is-drawn .m-coast .draw { transition-delay: .18s; transition-duration: 1.9s; }
/* stage 3 — the land */
html.anim .mapstage.is-drawn .m-ct .draw { transition-delay: calc(.95s + var(--i) * .055s); transition-duration: 1.3s; }
html.anim .mapstage.is-drawn .m-wood { transition-delay: 1.6s; transition-duration: 1s; }
html.anim .mapstage.is-drawn .m-wood .draw { transition-delay: 1.5s; transition-duration: 1.2s; }
/* stage 4 — the roads and the span */
html.anim .mapstage.is-drawn .m-road .rd-1 { transition-delay: 1.55s; transition-duration: 1.5s; }
html.anim .mapstage.is-drawn .m-road .rd-2 { transition-delay: 1.75s; transition-duration: 1.3s; }
html.anim .mapstage.is-drawn .m-road .rd-3 { transition-delay: 1.9s; transition-duration: 1.1s; }
html.anim .mapstage.is-drawn .m-span .span-case, html.anim .mapstage.is-drawn .m-span .span-deck { transition-delay: 2s; transition-duration: .7s; }
html.anim .mapstage.is-drawn .m-span .span-tow { transition-delay: 2.5s; }
/* stage 5 — type, furniture, pins; stage 6 — EN·01 last */
html.anim .mapstage.is-drawn .m-type { transition-delay: 2.35s; }
html.anim .mapstage.is-drawn .m-furn { transition-delay: 2.55s; }
html.anim .mapstage.is-drawn .map-pin { transition-delay: 2.5s; }
html.anim .mapstage.is-drawn .pin-2 { transition-delay: 2.7s; }
html.anim .mapstage.is-drawn #mapHome { transition-delay: 2.95s; transition-duration: 1s; }

/* ---------- responsive ----------
   Label sizing keys off the drawing's own width, not the viewport — the map
   column is 800px at 1440 but only ~570px at 1024, and 900px again once the
   grid collapses to one column. A viewport breakpoint gets that wrong twice. */
@media (max-width: 980px) {
  .map-grid { grid-template-columns: 1fr; }
}
.mapstage { container-type: inline-size; container-name: mapc; }

@container mapc (max-width: 660px) {
  .mapdraw .dst.t-3 { display: none; }
  .mapdraw .dst { font-size: 11px; }
  .map-pin text.pl { font-size: 12.5px; }
  .mapdraw .wtr { font-size: 12.5px; letter-spacing: .4em; }
  .m-furn text { font-size: 10px; }
  #mapHome .home-lbl { font-size: 15px; }
  .m-road .rd-3 { stroke-opacity: .07; }
}
@container mapc (max-width: 500px) {
  /* phone: the drawing keeps every line and drops its names — the pins carry
     minutes only, and the readout names whatever was last selected. */
  .mapdraw .dst.t-2, .mapdraw .m-furn .edge, .map-pin text.pl { display: none; }
  .map-pin text.pmob { display: block; }
  .mapdraw .dst { font-size: 17px; letter-spacing: .16em; }
  .mapdraw .wtr { font-size: 19px; letter-spacing: .34em; }
  .m-furn text { font-size: 14px; }
  .m-furn .north text { font-size: 16px; }
  #mapHome .home-lbl { font-size: 20px; }
  #mapHome .home-dot { r: 7.5px; }
  .map-pin .hit { r: 38px; }
  .map-pin text.pmob { font-size: 22px; stroke-width: 5px; }
  .map-pin .ring { stroke-width: 1.6; r: 5.4px; }
  .map-pin.is-on .ring { r: 6.6px; stroke-width: 2; }
  .m-ct:nth-of-type(2n) { display: none; }
  .m-ct path { stroke-width: .8; }
  .m-ct:nth-of-type(3n+1) path { stroke-width: 1.1; }
  .mapdraw text { stroke-width: 4.6px; }
  .m-coast path { stroke-width: 2.2; }
  .m-iso path { stroke-width: 1; }
  .m-road .rd-1 { stroke-width: 2; }
  .m-road .rd-2 { stroke-width: 1.5; }
  .m-road .rd-3 { display: none; }
  .m-wood .wood { stroke-width: .9; }
  #mapRelation { stroke-width: 3; }
  #mapRelationCase { stroke-width: 6.5; }
}
@media (max-width: 560px) {
  .map-read .mr-min { font-size: clamp(3.4rem, 20vw, 6rem); }
}

/* ---------- reduced motion: the finished map, instantly ---------- */
@media (prefers-reduced-motion: reduce) {
  html.anim .mapstage .draw { stroke-dashoffset: 0 !important; stroke-dasharray: none !important;
    transition: none !important; }
  html.anim .mapstage .m-sea .sea-fill, html.anim .mapstage .m-sea rect,
  html.anim .mapstage .m-wood, html.anim .mapstage .m-type,
  html.anim .mapstage .m-furn, html.anim .mapstage .m-span .span-tow,
  html.anim .mapstage .map-pin, html.anim .mapstage #mapHome {
    opacity: 1 !important; transition: none !important; }
  .map-pin .ring, .map-pin .halo, .map-pin text.pl { transition: none !important; }
  .m-route.is-on path { transition: none !important; }
}
html.js-failed .mapstage .draw { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }

/* ---------- ending ---------- */
/* This file loads AFTER style.css on the dossier pages, so its padding won a
   cascade the index never entered — which is how the same band ended up 90px
   here and 57.6px everywhere else the moment the rhythm was promoted. The
   padding is dropped rather than restated: style.css owns it site-wide now,
   and duplicating a value in two stylesheets is how they drift apart. */
.petro { background: var(--petroleum);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.petro h2 { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.06; letter-spacing: -.012em; margin-top: 1rem; max-width: 16ch; }
.petro p { color: #AFC4C9; line-height: 1.65; margin-top: 1rem; max-width: 30rem; }
.petro .composer { background: rgba(11,14,15,.35); border-color: rgba(127,178,196,.35); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .moment .inner { grid-template-columns: 1fr; align-items: start; }
  .fitcount { text-align: left; }
  .d-open { grid-template-columns: 1fr; }
  .map-grid { grid-template-columns: 1fr; }
  .petro { grid-template-columns: 1fr; }
  .sig { height: 200vh; }
  .sig-panel { right: var(--gutter); left: var(--gutter); width: auto; bottom: 4vh; }
  .seat-frame { grid-template-columns: 1fr; gap: .9rem; }
  .jline.j2 { margin-left: clamp(1rem, 8vw, 6rem); }
}

@media (max-width: 560px) {
  .fitcount .fc-num { font-size: clamp(6rem, 30vw, 9rem); }
  .strip figure { width: 88%; }
  .nav .ctx { font-size: .56rem; letter-spacing: .12em; }
  .sw { white-space: nowrap; }
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.anim [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.anim [data-drift] { transform: none !important; }
  html.anim [data-resolve] { --r: 1 !important; }
  html.anim [data-resolve] img { filter: none !important; transform: none !important; }
  html.anim [data-resolve]::before { display: none !important; }

  html.anim .sig { height: auto !important; }
  html.anim .sig-pin { position: relative !important; height: auto !important; min-height: 100vh; }
  html.anim .sig-bg { opacity: 1 !important; }
  html.anim .sw.fill { opacity: 0 !important; }
  html.anim .sw.line { opacity: 1 !important; }
  html.anim .sig-panel { position: relative !important; right: auto !important; margin: 2rem var(--gutter) 3rem auto; opacity: 1 !important; transform: none !important; }
  html.anim .sig-cue, html.anim .sig-place { opacity: 0 !important; }
  html { scroll-behavior: auto; }
}