/* Careers exhibition prototype, world edition. One continuous plane:
   rooms are districts on an exhibition floor plan, the camera travels
   between them. Brand system: PP Neue Montreal, paper #F4F2EE,
   ink #101010, orange #FF5314. */

@font-face { font-family: "PP Neue Montreal"; font-weight: 500; font-style: normal; font-display: block; src: url("assets/fonts/PPNeueMontreal-Medium.woff2") format("woff2"); }
@font-face { font-family: "PP Neue Montreal"; font-weight: 600; font-style: normal; font-display: block; src: url("assets/fonts/PPNeueMontreal-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "PP Neue Montreal"; font-weight: 700; font-style: normal; font-display: block; src: url("assets/fonts/PPNeueMontreal-Bold.woff2") format("woff2"); }

:root {
  --paper: #F4F2EE;
  --ink: #101010;
  --orange: #FF5314;
  --grey: #8a8a86;
  --rule: rgba(16, 16, 16, 0.14);
  --card: #ffffff;
  --floorline: rgba(16, 16, 16, 0.05);
  /* secondary tokens (theme-swappable) */
  --text-body: #2e2e2a;
  --text-soft: #4a4a46;
  --text-muted: #6e6e68;
  --plot-bg: #f9f8f6;
  --beige: #e7e3db;
  --beige-ink: #191919;
  --beige-soft: #4a453c;
  --img-bg: #f1efec;
  --swin-bg: #ffffff;
  --shadow: rgba(16, 16, 16, 0.12);
  --scrim-panel: rgba(255, 255, 255, 0.92);
  color-scheme: light;
}

html[data-theme="dark"] {
  --paper: #121211;
  --ink: #F4F2EE;
  --grey: #8f8f8a;
  --rule: rgba(244, 242, 238, 0.14);
  --card: #1c1c1a;
  --floorline: rgba(244, 242, 238, 0.045);
  --text-body: #d9d7d2;
  --text-soft: #b9b7b2;
  --text-muted: #8f8f8a;
  --plot-bg: #181816;
  --beige: #2a2724;
  --beige-ink: #f0ede7;
  --beige-soft: #b9b3a8;
  --img-bg: #24231f;
  --swin-bg: #1f1f1d;
  --shadow: rgba(0, 0, 0, 0.5);
  --scrim-panel: rgba(28, 28, 26, 0.92);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

body.world-mode { overflow: hidden; height: 100vh; user-select: none; -webkit-user-select: none; }
/* while the entry veil is up, the world is not painted at all: on large,
   high-DPI screens rasterizing the 6000px plane behind the veil starved
   the reveal animation (words and buttons dropped) */
body.entry-up #viewport { visibility: hidden; }
/* pre-warm: after the entry reveal, the world is painted but invisible at
   exact overview scale so Chromium rasters the far tiles before anyone
   flies out to the map (zoom-out flights showed unready tiles) */
body.entry-up.prewarm #viewport { visibility: visible; opacity: 0; pointer-events: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ---------- viewport + world plane ---------- */

#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

body.panning, body.panning #viewport { cursor: grabbing; }
body.panning #world { user-select: none; }

#world {
  position: absolute;
  top: 0; left: 0;
  width: 6440px; /* keep equal to WORLD in site.js */
  height: 2860px;
  transform-origin: 0 0;
  /* NO permanent will-change: it pins the raster at DPR resolution at
     every zoom level (hundreds of MB of tiles at overview -> eviction ->
     flicker) and disables subpixel text AA. Flights are compositor
     animations (site.js flyTo) which promote and pin the raster on their
     own; interactive gestures get a temporary will-change from JS
     (setGestureWC), removed on settle for a crisp re-raster. Nothing
     INSIDE #world is ever promoted. See perf-research.md. */
}

/* the exhibition floor grid: its own composited layer so the parallax
   never repaints (background-position repaints killed pan smoothness) */
#world-grid {
  position: absolute;
  inset: -320px;
  background-image:
    linear-gradient(var(--floorline) 1px, transparent 1px),
    linear-gradient(90deg, var(--floorline) 1px, transparent 1px);
  background-size: 120px 120px;
  pointer-events: none;
}

/* flights are a JS rAF tween (site.js flyTo): no CSS transitions here */

#world-paths { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#world-paths path { fill: none; stroke: color-mix(in srgb, var(--ink) 18%, transparent); stroke-width: 2.5; stroke-dasharray: 3 14; stroke-linecap: round; }
#world-paths circle { fill: var(--orange); }

/* ---------- plots (rooms as districts) ---------- */

.plot {
  position: absolute;
  /* contain, not content-visibility: auto. The auto relevancy heuristic
     skips nothing at overview scale (the whole world fits the viewport
     test) and drags rooms across its boundary mid-flight, causing style
     and layout churn exactly during camera moves. */
  contain: layout paint;
  background: var(--plot-bg);
  border: 1.5px solid color-mix(in srgb, var(--ink) 40%, transparent);
  border-radius: 18px;
  padding: 52px 56px;
  overflow: hidden;
}
/* hover feedback is opacity-only on an overlay: compositor work, zero repaint */
#world-paths .plot-ring {
  fill: none;
  stroke: var(--orange);
  stroke-width: 5;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
#world-paths .walker { fill: var(--orange); }

/* painted floor label outside each plot, like wayfinding on concrete */
.plot-label {
  position: absolute;
  font-weight: 700;
  font-size: 64px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 12%, transparent);
  white-space: nowrap;
  pointer-events: none;
}
.plot-label b { color: rgba(255, 83, 20, 0.35); margin-right: 18px; transition: color 0.6s ease; }
.plot-label { transition: color 0.6s ease; }
/* the lit toggle happens at flight start: a color transition would repaint
   inside the world for 600ms of the flight, so it applies instantly while
   the camera moves and eases only at rest */
body.cam-moving .plot-label, body.cam-moving .plot-label b { transition: none; }
.plot-label.lit { color: color-mix(in srgb, var(--ink) 40%, transparent); }
.plot-label.lit b { color: var(--orange); }

/* in overview, rooms are click targets and their innards sleep */
body.overview .plot { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2278%22%20height%3D%2230%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2276%22%20height%3D%2228%22%20rx%3D%2214%22%20fill%3D%22%23FF5314%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.5%22%2F%3E%3Ctext%20x%3D%2239%22%20y%3D%2220%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2213%22%20font-weight%3D%22bold%22%20fill%3D%22%23ffffff%22%20text-anchor%3D%22middle%22%3EEnter%20%E2%86%92%3C%2Ftext%3E%3C%2Fsvg%3E") 8 15, pointer; }
body.overview .plot * { pointer-events: none; }

body.overview #world-paths .plot-ring.on { opacity: 1; }

/* ---------- nav ---------- */

.nav[hidden] { display: none; }

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 28px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.nav-wordmark { display: flex; align-items: center; gap: 10px; }
.nav-wordmark img { height: 18px; display: block; }
.nav-wordmark span { color: var(--grey); font-weight: 600; letter-spacing: 0.08em; font-size: 15px; }

.nav-rooms { display: flex; gap: 18px; flex: 1; }

.nav-room {
  font-size: 16px;
  color: var(--ink);
  opacity: 0.55;
  letter-spacing: 0.02em;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: opacity 0.15s ease;
}
.nav-room b { font-weight: 600; margin-right: 6px; color: inherit; }
.nav-room.active { opacity: 1; border-bottom-color: var(--orange); }
.nav-room:hover { opacity: 1; }

.nav-map {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
}
.nav-map:hover, .nav-map.active { background: var(--ink); color: var(--paper); }

.nav-proto {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 10px;
}

.nav-theme {
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.nav-theme:hover { border-color: var(--orange); color: var(--orange); }
.nav-theme svg { width: 18px; height: 18px; display: block; }
.nav-theme .sun { display: none; }
html[data-theme="dark"] .nav-theme .sun { display: block; }
html[data-theme="dark"] .nav-theme .moon { display: none; }
/* logo inverts on dark */
html[data-theme="dark"] .nav-wordmark img { filter: invert(1); }
/* brand glyph icons and product stills stay as they are; the beige mission
   world stays beige by design (it is a scene, not chrome) */

.nav-cta {
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 18px;
  border-radius: 999px;
}
.nav-cta:hover { background: var(--orange); }

/* ---------- minimap ---------- */

#minimap {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  width: 250px;
  height: 162px; /* 116px map (MINI in site.js) + 46px navigator bar */
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 10px 30px var(--shadow);
  overflow: hidden;
}
#minimap[hidden] { display: none; }
#minimap { cursor: pointer; }
#minimap:hover { border-color: var(--orange); }

/* the navigator under the map: one click walks the tour stop by stop */
.mm-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46px;
  display: flex;
  align-items: stretch;
  border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  background: var(--paper);
  cursor: default;
}
.mm-arrow {
  flex: none;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--ink);
}
.mm-arrow.prev { border-right: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.mm-arrow.next { border-left: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.mm-next {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-arrow:hover, .mm-next:hover { color: var(--orange); }

.minimap-room {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--ink) 50%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  cursor: pointer;
}
.minimap-room:hover, .minimap-room.here { background: rgba(255, 83, 20, 0.3); border-color: var(--orange); }

#minimap-view {
  position: absolute;
  left: 0; top: 0;
  width: 100px; height: 100px;
  transform-origin: 0 0;
  border: 1.5px solid var(--orange);
  border-radius: 3px;
  pointer-events: none;
}

/* ---------- stops tracker ---------- */

#tracker {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 11px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-size: 15.5px;
  font-weight: 600;
  box-shadow: 0 10px 30px var(--shadow);
}
#tracker[hidden] { display: none; }
#tracker svg { width: 20px; height: 20px; transform: rotate(-90deg); }
#tracker .track-bg { fill: none; stroke: var(--rule); stroke-width: 3; }
#tracker .track-fg {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 50.27;
  stroke-dashoffset: 50.27;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.22, 0.8, 0.24, 1);
}
#tracker.done { border-color: var(--orange); color: var(--orange); }

/* ---------- film grain ---------- */

#grain { display: none; }
body.entry-up #grain { display: block; }
#grain {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- entry veil ---------- */

.entry {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vh 7vw;
  gap: 26px;
  background: var(--paper);
  transition: opacity 0.6s ease;
}
.entry.gone { opacity: 0; pointer-events: none; }

/* the logo lockup, replacing the old text kicker. Resting CSS is the FINAL
   state (everything visible, no clip): the intro animation runs hidden ->
   visible with fill both, and the safety net forces this state (same rule
   as the headline words) */
.entry-lockup {
  display: flex;
  align-items: center;
  color: var(--ink);
}
.entry-lockup .elk-mark { height: 46px; width: auto; overflow: visible; flex: none; }
.entry-lockup .elk-blk { transform-box: fill-box; transform-origin: 50% 50%; }
.entry-lockup .elk-mask { overflow: hidden; margin-left: 17px; flex: none; }
.entry-lockup .elk-word { height: 46px; width: auto; display: block; }
.entry-tag {
  margin-left: 22px;
  padding-top: 12px; /* optically align with the wordmark's baseline */
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
}

.entry-headline .ew { display: inline-block; opacity: 1; }

.entry-headline {
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 14ch;
}

.entry-sub { font-size: clamp(17px, 1.6vw, 22px); color: var(--text-soft); max-width: 44ch; line-height: 1.45; }

.entry-actions { display: flex; align-items: center; gap: 28px; margin-top: 10px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 16px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 17px;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--orange); }

.btn-skip { font-size: 16px; font-weight: 600; border-bottom: 2px solid var(--orange); padding-bottom: 3px; }
.btn-skip:hover { color: var(--orange); }

.entry-proto { font-size: 15.5px; color: var(--grey); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- room interior typography (fixed px: the camera does the scaling) ---------- */

.room-head { max-width: 860px; margin-bottom: 30px; }
/* headings may run the full room width; only body copy is measure-limited */
.room-head .room-title { max-width: none; width: max-content; max-width: 100%; }
.room-head .room-body { max-width: 860px; }
.room-head { max-width: none; }

.room-number {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 10px;
}
.room-number b { color: var(--orange); margin-right: 10px; }

.room-title {
  font-size: 48px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}

.room-body { font-size: 20px; line-height: 1.5; color: var(--text-body); max-width: 56ch; }
.room-body p + p { margin-top: 8px; }

.room-hint {
  margin-top: 14px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}

.room-closing {
  margin-top: 26px;
  font-size: 21px;
  font-weight: 600;
  max-width: 62ch;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}


/* ---------- room 01: mission (three-act theater) ---------- */

.m-plot { padding: 52px 64px; }

/* backdrops: act 1 beige sameness world, acts 2-3 dark stage */
.m-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}
.m-bg.on { opacity: 1; }
.m-bg.beige { background: #e7e3db; }
.m-bg.dark { background: #101010; }

/* the endless replication field (film S4/S5). Cards keep their shape at
   every width: the grid adds/drops columns and the plot crops the
   overflow, instead of squeezing 7 columns into candles. */
.m-field {
  position: absolute;
  inset: -60px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 22px;
  align-content: center;
  padding: 40px 60px;
}
.m-fcard {
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 200px;
  opacity: 0;
}
/* after the first reveal the field stays lit (choreography animations are
   cancelled on slide changes; the class keeps the cards from vanishing) */
.m-field.lit .m-fcard { opacity: 1; }
/* the one card that refuses to be average */
.m-fspark {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: var(--orange);
  opacity: 0;
}
.m-field.lit .m-fspark { opacity: 1; }
/* the orange wipe: the spark card zoomed to fill the stage (slide 2's
   canvas). Transform-only one-shot, animated while the camera is still. */
.m-owipe {
  position: absolute;
  background: var(--orange);
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
}
/* slide 2 lives on the orange canvas */
.m-slide.m-onorange .m-statement { color: #ffffff; }
.m-slide.m-onorange .m-sub { color: rgba(255, 255, 255, 0.88); }
.m-fimg { flex: 1; background: #ddddda; border-radius: 6px; }
.m-fbar { height: 8px; border-radius: 99px; background: #c9c9c6; width: 70%; }
.m-fbar.b2 { width: 42%; background: #ddddda; }

.m-stage { position: relative; height: calc(100% - 150px); z-index: 1; }

.m-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  opacity: 0;
  transform: translateX(46px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.8, 0.24, 1);
  pointer-events: none;
}
.m-slide.before { transform: translateX(-46px); }
.m-slide.on { opacity: 1; transform: none; pointer-events: auto; }

.m-slide .w { display: inline-block; opacity: 0; }

.m-statement {
  font-size: 78px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.025em;
  max-width: 15ch;
  color: #191919;
}

.m-sub { font-size: 26px; line-height: 1.4; color: #3d3a34; max-width: 40ch; opacity: 0; }


.m-punch {
  font-size: 66px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #f4f4f2;
}
.m-punch .m-line2 .w { color: var(--orange); }

.m-closing { font-size: 26px; font-weight: 600; color: #b9b9b6; opacity: 0; margin-top: 18px; }

.m-ctas { display: flex; gap: 18px; margin-top: 30px; opacity: 0; }
.m-cta {
  display: inline-block;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 17px;
  border: 1.5px solid #f4f4f2;
  color: #f4f4f2;
}
.m-cta:hover { border-color: var(--orange); color: var(--orange); }
.m-cta.primary { background: var(--orange); border-color: var(--orange); color: #ffffff; }
.m-cta.primary:hover { background: #e64a10; }

/* controls arrive with the choreography */

/* conviction slide: white statement on the dark stage, orange accent word */
.m-conv .m-statement { color: #f4f4f2; }
.m-conv .m-statement .accent { color: var(--orange); }
.m-conv .m-sub { color: #b9b9b6; }

/* conviction: a strip of real product stills blooming into color */
.m-photos { display: flex; gap: 18px; margin-top: 34px; }
.m-photo {
  width: 170px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  opacity: 0;
}
.m-photo:nth-child(even) { margin-top: 14px; }
.m-photo img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* the split: two panels, machines vs people */
.m-split .m-statement { color: #f4f4f2; font-size: 56px; }

.m-split-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 34px;
}

.m-panel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 26px 30px;
  opacity: 0;
}
.m-panel h3 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.m-panel.machines h3 { color: #b9b9b6; }
.m-panel.humans h3 { color: var(--orange); }
.m-panel ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.m-panel li {
  font-size: 19px;
  color: #e4e4e0;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
}
.m-item-icon { width: 30px; height: 30px; flex: none; }
.m-panel.machines .m-item-icon { opacity: 0.55; }

/* the mission room is a scene: chrome colors are pinned per act, not themed */
.m-plot { color: #191919; }
.m-plot .m-arrow { border-color: #191919; color: #191919; }
.m-plot .m-arrow:hover:not(:disabled) { background: #191919; color: #f4f4f2; }
.m-plot .m-dot { border-color: #191919; }
.m-plot .m-dot.on { background: var(--orange); border-color: var(--orange); }

/* dark theme: the beige acts get a charcoal twin so the mission room no longer
   glows like a lightbox on a dark map. Same idea (identical cards receding),
   dark materials. The dark acts are unchanged. */
html[data-theme="dark"] .m-bg.beige { background: #232220; }
html[data-theme="dark"] .m-fcard { background: #34322f; border-color: rgba(255, 255, 255, 0.05); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
html[data-theme="dark"] .m-fimg { background: #46433f; }
html[data-theme="dark"] .m-fbar { background: #55524d; }
html[data-theme="dark"] .m-fbar.b2 { background: #46433f; }
html[data-theme="dark"] .m-s1 .m-statement { color: #f4f4f2; }
html[data-theme="dark"] .m-s1 .m-sub { color: #b9b7b2; }
html[data-theme="dark"] .m-plot { color: #f4f4f2; }
html[data-theme="dark"] .m-plot .m-arrow { border-color: #f4f4f2; color: #f4f4f2; }
html[data-theme="dark"] .m-plot .m-arrow:hover:not(:disabled) { background: #f4f4f2; color: #101010; }
html[data-theme="dark"] .m-plot .m-dot { border-color: #f4f4f2; }

/* dark-stage chrome */
.m-dark { border-color: rgba(16, 16, 16, 0.7); }
.m-dark .m-arrow { border-color: #f4f4f2; color: #f4f4f2; }
.m-dark .m-arrow:hover:not(:disabled) { background: #f4f4f2; color: #101010; }
.m-dark .m-dot { border-color: #f4f4f2; }
.m-dark .m-dot.on { background: var(--orange); border-color: var(--orange); }

.m-chrome {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 18px;
}

.m-arrow {
  width: 52px;
  height: 52px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-arrow:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.m-arrow:disabled { opacity: 0.25; cursor: default; }

.m-dots { display: flex; gap: 10px; }
.m-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  padding: 0;
}
.m-dot.on { background: var(--orange); border-color: var(--orange); }






/* ---------- room 02: floor (one collection, four looks) ---------- */

.look-switch { display: flex; gap: 10px; margin-bottom: 18px; }

.look-btn {
  border-radius: 999px;
  padding: 11px 22px;
  font-weight: 600;
  font-size: 15.5px;
}

/* the default is the grey average; the three looks are where the color is */
.look-btn.default-look { border: 1.5px solid #8a8a86; color: var(--text-body); }
.look-btn.default-look:hover { border-color: var(--ink); }
.look-btn.default-look.on { background: #8a8a86; border-color: #8a8a86; color: #ffffff; }

.look-arrow { color: var(--grey); font-weight: 600; font-size: 17px; align-self: center; }

.look-btn.curated { border: 1.5px solid var(--orange); color: var(--orange); }
.look-btn.curated:hover { background: rgba(255, 83, 20, 0.08); }
.look-btn.curated.on { background: var(--orange); border-color: var(--orange); color: #ffffff; }

.look-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 93px;
  grid-auto-flow: dense;
  gap: 12px;
}

.look-cell {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--img-bg);
}
.look-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cell-caption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: var(--scrim-panel);
  border-radius: 10px;
  padding: 7px 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: normal;
  line-height: 1.25;
  font-size: 15.5px;
  color: var(--text-body);
  max-width: calc(100% - 20px);
}
.cell-caption b { font-weight: 600; display: block; white-space: normal; overflow: visible; text-overflow: clip; }
.cell-caption .price { display: block; color: var(--text-muted); font-size: 0.92em; }

/* the default look: plain PLP cards, deliberately dull */
.look-cell.plain {
  background: var(--card);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}
/* the caption keeps its full height (a two-line title plus the price never
   clips); the image takes whatever is left */
.look-cell.plain img { position: static; flex: 1 1 0; min-height: 0; height: auto; width: 100%; object-fit: cover; display: block; }
.look-cell.plain .cell-caption {
  position: static;
  flex: none;
  display: block;
  background: none;
  border-radius: 0;
  padding: 7px 12px 8px;
  max-width: none;
}

/* content cards */
.content-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 22px;
}
.content-cell h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; }
.content-cell p { font-size: 16.5px; line-height: 1.35; }

.cell-text { background: var(--beige); color: var(--beige-ink); }
.cell-text p { color: var(--beige-soft); }

.cell-quote { background: var(--beige); color: var(--beige-ink); }
.cell-quote p { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }

.cell-cta { background: var(--orange); color: #ffffff; }
.cell-cta p { font-size: 18px; font-weight: 700; }

.cell-banner { background: #101010; color: #F4F2EE; align-items: flex-start; }
.cell-banner p { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.cell-banner.has-img { justify-content: flex-end; }
.cell-banner .cell-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cell-banner .cell-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16, 16, 16, 0) 30%, rgba(16, 16, 16, 0.62));
}
/* the type sits ABOVE the scrim, always white on the photo */
.cell-banner.has-img p { position: relative; z-index: 2; color: #F4F2EE; }

.look-note {
  margin-top: 34px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.look-note-label {
  flex: none;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--orange);
  border-radius: 999px;
  padding: 5px 12px;
}
.look-note-label.start { background: #8a8a86; }
.look-note-text { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }

.look-tail {
  margin-top: 12px;
  font-size: 17px;
  color: var(--text-muted);
}

/* ---------- room 03: street ---------- */

.street {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  height: calc(100% - 210px);
  min-height: 560px;
}

.storefront {
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.storefront { position: relative; }
.storefront::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 3px solid var(--orange);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.storefront:hover::after { opacity: 1; }
.storefront.open::after { opacity: 1; }

.awning {
  height: 14px;
  background: var(--orange);
}

.store-window {
  position: relative;
  margin: 22px 22px 0;
  flex: 1;
  min-height: 0;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(180deg, var(--card), var(--img-bg));
  border-bottom-width: 5px;
  overflow: hidden;
}

/* the miniature product surface inside the window */
.swin {
  width: 100%;
  max-width: 330px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 8px 22px var(--shadow);
  text-align: left;
}

.swin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.swin-cell { position: relative; }
.swin-cell img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; }
.swin-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  padding: 2px 7px;
}

.swin-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 15.5px;
  font-weight: 600;
}
.swin-mag { font-size: 15px; }
.swin-understood { font-size: 16px; color: var(--text-muted); margin: 9px 2px 2px; }

.swin-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.swin-row img { width: 46px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; flex: none; }
.swin-row.hero { margin-top: 0; }
.swin-row.hero img { width: 68px; }
.swin-name { font-size: 16px; font-weight: 600; }
.swin-price { font-size: 16px; color: var(--text-muted); }

.swin-pairs {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 14px 0 8px;
}
.swin-thumbs { display: flex; gap: 8px; }
.swin-thumbs img { flex: 1; min-width: 0; width: 0; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; }

/* Demo-brand wordmarks: uppercase Helvetica Neue 500, tracked wide, per
   brand guidelines. Never image-rendered. */
.store-wordmark {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: #1C1B1A;
  font-size: 21px;
  padding: 20px 0 6px;
  text-indent: 0.32em;
}

.store-product {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 20px 0 4px;
}

.store-vertical {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
  padding-bottom: 12px;
}

.store-enter {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 18px;
  opacity: 0.45;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.store-enter { color: var(--orange); opacity: 0.55; }
.storefront:hover .store-enter { opacity: 1; }

/* ---------- the product modal (fixed to screen, above everything) ---------- */

.pmodal-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(16, 16, 16, 0.55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}
.pmodal-scrim.on { display: flex; }

.pmodal {
  width: min(1100px, 100%);
  max-height: 88vh;
  overflow: auto;
  background: var(--paper);
  border-radius: 18px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.4);
  padding: 36px 44px 40px;
}

.pmodal-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }

.pmodal-wordmark {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.32em;
  font-size: 17px;
  color: #1C1B1A;
}
.pmodal-product {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 6px;
}

.pmodal-close {
  font-size: 30px;
  line-height: 1;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  flex: none;
}
.pmodal-close:hover { background: var(--ink); color: var(--paper); }

.pmodal-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.pmodal-tab {
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 16px;
}
.pmodal-tab:hover { border-color: var(--orange); color: var(--orange); }
.pmodal-tab.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.pmodal-body { min-height: 240px; }
.pmodal-panel { display: none; }
.pmodal-panel.on { display: block; }
.pmodal-panel h3 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
  max-width: 24ch;
}
.pmodal-panel p {
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-body);
  max-width: 58ch;
}
.pmodal-panel p + p { margin-top: 10px; }

.pmodal-cols { display: grid; grid-template-columns: 1fr 400px; gap: 36px; align-items: start; }

/* the coded product-surface mock */
.pmock {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 20px 22px;
  box-shadow: 0 16px 50px var(--shadow);
}

.pmock-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.pmock-brand {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.32em;
  font-size: 15px;
  color: var(--ink);
}
.pmock-app {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--orange);
}

.pmock-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pmock-row b { font-size: 16px; font-weight: 600; }
.pmock-pill {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2e7d43;
  border: 1px solid #2e7d43;
  border-radius: 999px;
  padding: 3px 10px;
}

.pmock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pmock-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--img-bg);
}
.pmock-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.pmock-card.drag {
  transform: rotate(2.5deg) scale(1.04);
  box-shadow: 0 10px 26px rgba(16, 16, 16, 0.28);
  z-index: 2;
}
.pmock-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  padding: 3px 9px;
}
.pmock-badge.pin { background: var(--orange); color: #fff; }

.pmock-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 600;
}
.pmock-mag { font-size: 18px; }
.pmock-caret { width: 2px; height: 20px; background: var(--orange); }
.pmock-understood { margin-top: 12px; font-size: 16px; font-weight: 600; }
.pmock-syn { margin-top: 3px; font-size: 15px; color: var(--text-muted); margin-bottom: 14px; }

.pmock-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pmock-prod {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pmock-swatch { border-radius: 6px; aspect-ratio: 5 / 3; border: 1px solid rgba(16, 16, 16, 0.06); display: block; width: 100%; height: auto; object-fit: cover; background: var(--img-bg); }
img.pmock-heroswatch { object-fit: cover; height: auto; }
.pmock-name { font-size: 15.5px; font-weight: 600; }
.pmock-price { font-size: 16px; color: var(--text-muted); }

.pmock-hero { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.pmock-heroswatch { width: 120px; aspect-ratio: 1; border-radius: 10px; flex: none; }
.pmock-hero .pmock-name { font-size: 17px; }
.pmock-hero .pmock-price { font-size: 15px; }
.pmock-pairshead {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}

@media (max-width: 900px) {
  .pmodal-cols { grid-template-columns: 1fr; }
}

/* ---------- room 04: life at depict ---------- */

.life-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}

.life-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 22px 24px;
}
.life-icon { width: 34px; height: 34px; margin-bottom: 10px; }
.life-card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 6px; }
.life-card p { font-size: 18.5px; line-height: 1.45; color: var(--text-body); }

.life-strip { position: relative; }

.life-portraits {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 0 10px;
  scrollbar-width: none;
  /* fading edges signal that the row continues */
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.life-portraits::-webkit-scrollbar { display: none; }
.life-strip.at-start .life-portraits { mask-image: linear-gradient(90deg, #000, #000 calc(100% - 40px), transparent); }
.life-strip.at-end .life-portraits { mask-image: linear-gradient(90deg, transparent, #000 40px, #000); }
.life-strip.at-start.at-end .life-portraits { mask-image: none; }

.life-person { flex: none; width: 200px; }

.strip-arrow {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 6px 16px var(--shadow);
  transition: opacity 0.18s ease;
}
/* straddling the strip's own edges (not the room's), half over the fade */
.strip-arrow.prev { left: -23px; }
.strip-arrow.next { right: -23px; }
.strip-arrow:hover { border-color: var(--orange); color: var(--orange); }
.life-strip:not(.ready) .strip-arrow,
.life-strip.at-start .strip-arrow.prev,
.life-strip.at-end .strip-arrow.next { opacity: 0; pointer-events: none; }

.life-frame {
  flex: 1;
  aspect-ratio: 3 / 4;
  max-width: 110px;
  border: 1.5px dashed var(--grey);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.life-portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  background: var(--img-bg);
}
.life-name { font-size: 18px; font-weight: 600; margin-top: 10px; line-height: 1.2; }
.life-role { font-size: 16px; color: var(--text-muted); line-height: 1.3; margin-top: 2px; }
.life-note { margin-top: 10px; font-size: 15px; color: var(--text-muted); }

/* ---------- room 05: roles ---------- */

/* Daniel's snapshot hangs over the room's left edge (rotated, so its
   corner reaches past the resting edge): the content steps right of it.
   The snapshot is elsewhere on small screens, so the indent goes too. */
#roles { padding-left: 122px; }
body.flat #roles { padding-left: 22px; }
body.flat .role-card { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }

.roles-list { max-width: 860px; display: flex; flex-direction: column; gap: 14px; }

.role-card {
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 10px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.role-card .role-title { font-size: 21px; font-weight: 600; }
.role-card .role-meta { font-size: 17px; line-height: 1.45; margin-top: 6px; color: var(--text-body); max-width: 56ch; }
.role-card .role-tag {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  border: 1.5px solid var(--orange);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
  flex: none;
}

.role-cta {
  display: inline-block;
  margin-top: 14px;
  font-size: 17px;
  font-weight: 600;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
}
.role-cta:hover { color: var(--orange); }

.role-api { margin-top: 12px; font-size: 16px; color: var(--text-muted); }
.role-api a {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 15.5px;
  color: var(--text-body);
  border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent);
}
.role-api a:hover { color: var(--orange); border-color: var(--orange); }

/* clickable opening cards + the study modal */
button.role-open { width: 100%; text-align: left; cursor: pointer; transition: border-color 0.18s ease; }
button.role-open:hover { border-color: var(--orange); }
.role-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.role-chip {
  font-size: 14.5px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  color: var(--text-soft);
  white-space: nowrap;
}
.role-study { margin-top: 14px; font-size: 16.5px; font-weight: 600; color: var(--orange); }
.rmodal { width: min(780px, 100%); }
.rmodal .role-chips { margin-top: 10px; }
.rmodal-h {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 28px 0 10px;
}
.rmodal-p { font-size: 17.5px; line-height: 1.55; color: var(--text-body); max-width: 62ch; }
.rmodal-p + .rmodal-p { margin-top: 10px; }
.rmodal-ul { list-style: none; max-width: 62ch; }
.rmodal-ul li {
  position: relative;
  padding-left: 26px;
  margin: 9px 0;
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--text-body);
}
.rmodal-ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--orange);
}
.rmodal-apply { margin-top: 32px; border-top: 1px solid var(--rule); }
.rmodal-note { font-size: 16px; color: var(--text-muted); margin-top: 14px; }

.roles-note { margin-top: 18px; font-size: 17px; color: var(--text-muted); max-width: 58ch; line-height: 1.5; }

/* ---------- islands ---------- */

.plot.island {
  padding: 36px 40px;
  border-radius: 16px;
  background: var(--card);
}

.island-icon { width: 56px; height: 56px; margin-bottom: 14px; }

.island-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}

.island-line { font-size: 19px; line-height: 1.45; color: var(--text-body); margin-bottom: 8px; }

.island-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.island-chip {
  font-size: 16px;
  font-weight: 600;
  padding: 7px 13px;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: 999px;
  background: var(--card);
  white-space: nowrap;
}

.island-note { font-size: 15px; color: var(--text-muted); margin-top: 12px; }

/* the polaroid pinned to the board's corner */
.polaroid {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 150px;
  background: #fbfaf7;
  padding: 10px 10px 30px;
  border-radius: 3px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  z-index: 2;
}
.polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* the vintage grade is baked into the file (a live filter re-rasters the
     world every camera frame) */
}
.polaroid figcaption {
  position: absolute;
  left: 0; right: 0;
  bottom: 8px;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.5px;
  color: #6b655c;
  letter-spacing: 0.02em;
}
.plot.island { overflow: hidden; }

/* flat mode: the polaroid floats right and the text wraps around it */
body.flat .polaroid.flat-only {
  position: static;
  float: right;
  width: 128px;
  margin: 0 0 12px 16px;
}

/* press links */
.island-presshead {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.island-press {
  list-style: none;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: 100%;
}
.press-link { display: block; min-width: 0; }
.clip {
  display: block;
  background: #fbfaf7;
  color: #191919;
  border: 1px solid rgba(16, 16, 16, 0.12);
  border-radius: 4px;
  padding: 10px 12px 11px;
  transition: border-color 0.18s ease;
  overflow: hidden;
}
.press-link:hover .clip { border-color: var(--orange); }
.clip-mast {
  display: block;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(16, 16, 16, 0.25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clip-mast-serif { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.clip-mast-sans { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 15.5px; }
.clip-mast-box { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 0.18em; }
.clip-mast-green { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; font-size: 15px; color: #0a8f5c; letter-spacing: -0.02em; }
.clip-head {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15.5px;
  line-height: 1.3;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clip-meta { display: block; margin-top: 6px; font-size: 14px; color: #6b655c; }

/* investor logos */
.island-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 16px; }
.island-logo { height: 26px; width: auto; max-width: 130px; object-fit: contain; }
html[data-theme="dark"] .island-logos { background: #F4F2EE; border-radius: 10px; padding: 12px 14px; }

/* painted brand glyphs on the concrete */
.floor-icon {
  position: absolute;
  opacity: 0.16;
  pointer-events: none;
}

/* snapshots lying on the plan (content.worldPhotos + island photos): the
   polaroid frame positioned in world px, over a corner of a room, with a
   small resting tilt set inline (site.js drawSnap). The tilt is a static
   rotate on an unpromoted child: it paints into the world's raster once,
   like any other content. What is banned is promotion (will-change,
   translateZ) and animating it, not the angle itself. */
.polaroid.snap {
  top: auto; right: auto;
  z-index: 3;
  transform-origin: 50% 50%;
}
.polaroid.snap img { height: auto; }
.polaroid.snap figcaption { font-size: 15.5px; bottom: 10px; }
body.far #world .polaroid.snap { box-shadow: none; }

/* map vs flat: photos and clippings live outside the island on the map,
   inside it when the world stacks on small screens */
.flat-only { display: none; }
body.flat .polaroid.flat-only { display: block; }
body.flat .island-presshead.flat-only { display: block; }
body.flat .island-press.flat-only { display: grid; }
body.flat .floor-icon, body.flat .snap:not([data-flat-after]), body.flat .press-fan { display: none; }

/* the founder's clippings: a loose cascade fanned out from behind the
   island's right edge (site.js buildFan). Under the island in DOM order. */
.press-fan {
  position: absolute;
  width: 380px;
  height: 700px;
}
.fan-head {
  position: absolute;
  left: 44px; top: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  white-space: nowrap;
}
.fan-card {
  position: absolute;
  display: block;
  width: 320px;
  text-decoration: none;
  transform: rotate(var(--tilt, 0deg));
  transform-origin: 20% 50%;
  /* the slide-out on landing: a one-shot transition while the camera is
     still (delay staggered inline per card) */
  transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fan-card .clip {
  /* the card's left 30px rest under the island edge: text starts past it */
  padding: 12px 16px 13px 46px;
  border-color: rgba(16, 16, 16, 0.16);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}
.press-fan.tucked .fan-card {
  /* tucked fully behind the island; set at flight start with NO transition
     (only the way out animates) */
  transform: translateX(-420px) rotate(0deg);
  transition: none;
}
body.far #world .fan-card .clip { box-shadow: none; }

.minimap-island { border-radius: 2px; }

/* ---------- far mode: level of detail at overview scale ----------
   Below scale ~0.4 (the map view) rooms show a lightweight version of
   themselves: photos, portrait strips, product grids and clippings become
   flat placeholder blocks that keep the room's silhouette. The far raster
   is cheap, so zoom-out flights find their tiles ready. Toggled by the
   camera (body.far), never mid-flight. */

/* the images that carry each room's identity at map scale (product cells,
   portraits, product mini-surfaces) STAY: they are display-sized thumbs
   and are what makes the map readable. Only invisible detail is dropped. */

/* dense small type is invisible at far scale anyway: skip it */
body.far #world .cell-caption,
body.far #world .swin-understood,
body.far #world .swin-name,
body.far #world .swin-price,
body.far #world .swin-pairs,
body.far #world .life-name,
body.far #world .life-role,
body.far #world .clip-meta,
body.far #world .clip-head,
body.far #world .island-note,
body.far #world .look-note,
body.far #world .look-tail,
body.far #world .m-chrome,
body.far #world .store-enter,
body.far #world .island-logo,
body.far #world .m-item-icon,
body.far #world .life-icon,
body.far #world .island-icon { visibility: hidden; }

/* the sameness field: 28 shadowed cards become plain blocks */
body.far #world .m-fcard { box-shadow: none; }
body.far #world .swin, body.far #world .clip, body.far #world .polaroid, body.far #world .life-card, body.far #world .press-link .clip { box-shadow: none; }

/* corridors: dashes are expensive to stroke across the whole plane; solid at far */
body.far #world-paths path { stroke-dasharray: none; stroke-width: 3; }

/* ---------- flat mode (small screens): the world stacks, no camera ---------- */

body.flat #viewport { position: static; overflow: visible; }
body.flat #world {
  position: static;
  width: auto; height: auto;
  transform: none !important;
  background: none;
  /* stacked in tour order (site.js sets `order`), not DOM order */
}
body.flat #world-paths, body.flat #world-grid, body.flat #minimap, body.flat .nav-map { display: none; }
/* the painted room labels become the stack's section headers */
body.flat .plot-label {
  position: static;
  font-size: 24px;
  letter-spacing: 0.14em;
  margin: 46px 5vw 0;
  color: var(--grey);
  white-space: normal;
}
body.flat .plot-label b { color: var(--orange); margin-right: 12px; }
/* snapshots with a flat home appear between sections; the rest stay hidden */
body.flat .polaroid.snap[data-flat-after] {
  display: block;
  position: static;
  margin: 30px auto 2px;
}
body.flat .plot {
  position: relative !important;
  left: auto !important; top: auto !important;
  width: auto !important; height: auto !important;
  margin: 18px 4vw 26px;
  padding: 30px 22px;
  overflow: hidden;
}
/* the fixed nav needs clearance above the first header in the stack */
body.flat #world { display: flex; flex-direction: column; padding-top: 104px; }
body.flat .m-field { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; padding: 20px; }
body.flat .m-fcard { height: 140px; }
body.flat .m-photos { flex-wrap: wrap; }
body.flat .m-photo { width: 130px; }
body.flat .m-split-cols { grid-template-columns: 1fr; }
body.flat .m-ctas { flex-wrap: wrap; }
body.flat .look-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 84px; }
body.flat .look-switch { flex-wrap: wrap; }
body.flat .look-note { flex-direction: column; align-items: flex-start; gap: 10px; }
body.flat .street { grid-template-columns: 1fr; height: auto; min-height: 0; }
body.flat .life-grid { grid-template-columns: 1fr; }
body.flat #tracker { display: none; }
body.flat .walker { display: none; }
body.flat .store-window { min-height: 220px; }
body.flat .room-title { font-size: 30px; }
body.flat .m-stage { height: auto; min-height: 480px; }
body.flat .m-slide { position: relative; display: none; }
body.flat .m-slide.on { display: flex; }
body.flat .m-statement { font-size: 38px; }
body.flat .m-punch { font-size: 34px; }

@media (max-width: 900px) {
  .nav { padding: 14px 18px; gap: 14px; }
  .nav-rooms { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}