/* ===========================================================================
   Tiah Arnold — website prototype
   Colour comes from palette.css (the token source of record, NFR-39).
   Nothing here re-declares a brand hex. Type scale is BRD §8.1.
   ======================================================================== */

:root{
  /* type scale — BRD §8.1 */
  --f-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-text:"Montserrat",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-accent:"Allura",cursive;
  --f-record:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  /* spacing — 4px base, restrained scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
  --s8:32px; --s12:48px; --s16:64px; --s24:96px;

  --r-card:14px; --r-control:8px;
  --shadow:0 1px 2px rgba(23,23,23,.04), 0 8px 24px rgba(23,23,23,.06);
  /* Same colours, running the way the guide describes a sunset: turquoise at
     the lowest point, gold at the highest. One gradient per view — the hero. */
  --gradient-sky:linear-gradient(to top,var(--turquoise),var(--ocean-blue) 16%,
    var(--hot-pink) 44%,var(--sunset-coral) 64%,var(--tangerine) 83%,var(--sun-glow));
  --measure:68ch;
  --page:1160px;
  --t:250ms cubic-bezier(.22,.61,.36,1);

  /* room accent — reassigned per room, never a new colour */
  --accent:var(--hot-pink);
  --room-wash:transparent;
}

/* the record layer. U-02 is open: Plex Mono proposed, tracked Montserrat
   is the fallback. The review panel switches between them. */
:root[data-record="mono"]  { --f-rec:var(--f-record); --rec-track:0; --rec-size:13px; }
:root[data-record="sans"]  { --f-rec:var(--f-text);   --rec-track:.06em; --rec-size:12px; }

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:400 16px/26px var(--f-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* paper. The site is a scrapbook; the ground is stock, not screen. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
#app{position:relative;z-index:1}

/* --- type ------------------------------------------------------------ */
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:400;text-wrap:balance}
.d-xl{font-size:clamp(38px,7vw,56px);line-height:1.1;letter-spacing:.02em;font-weight:300}
.d-l {font-size:clamp(30px,5vw,40px);line-height:1.2;font-weight:300}
.h1  {font-size:clamp(26px,4vw,32px);line-height:1.25}
.h2  {font-size:24px;line-height:32px;font-weight:500}
.h3  {font-family:var(--f-text);font-size:19px;line-height:26px;font-weight:600;letter-spacing:-.01em}
p{margin:0}
.lede{font-size:19px;line-height:31px}
small,.small{font-size:14px;line-height:21px}

/* Micro — eyebrows and labels. 12px floor, nothing smaller. */
.micro{
  font-size:12px;line-height:16px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);
}
.micro.accent{color:var(--action)}

/* Allura. Tagline only, once per surface, never below 20px (§8.1). */
.tagline{font-family:var(--f-accent);font-size:28px;line-height:34px;color:var(--action);font-weight:400}

/* the record face — dates, fields, references, provenance */
.rec{font-family:var(--f-rec);font-size:var(--rec-size);letter-spacing:var(--rec-track);
     line-height:20px;color:var(--ink-muted);font-weight:500}

a{color:var(--action);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}

/* --- layout ---------------------------------------------------------- */
.wrap{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:20px}
.room{padding-block:var(--s12) var(--s16)}
.stack{display:flex;flex-direction:column}
.stack.s2{gap:var(--s2)} .stack.s3{gap:var(--s3)} .stack.s4{gap:var(--s4)}
.stack.s6{gap:var(--s6)} .stack.s8{gap:var(--s8)} .stack.s12{gap:var(--s12)}
.row{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.grid{display:grid;gap:var(--s6)}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.spread{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);flex-wrap:wrap}

/* section head — the same object in every room, accent is the only variable */
.sec-head{display:flex;flex-direction:column;gap:var(--s2);
  padding-bottom:var(--s3);border-bottom:1px solid var(--hairline);margin-bottom:var(--s8)}
.sec-head .micro{color:var(--accent)}

/* --- header / nav ---------------------------------------------------- */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:color-mix(in srgb,var(--cream) 88%,transparent);
  backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--hairline)}
header.site .wrap{display:flex;align-items:center;gap:var(--s6);
  padding-block:var(--s3);min-height:60px}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;color:inherit;flex:0 0 auto}
/* The mark is a thin-stroked circle with sun rays reaching its edge. It needs
   room to breathe or it reads as cropped — Tiah's note, 25 Sep. The asset now
   carries its own padding; these rules make sure nothing clips it back. */
.brand img{width:44px;height:44px;display:block;overflow:visible;flex:0 0 auto}
@media(max-width:560px){.brand img{width:38px;height:38px}}
header.site .wrap{overflow:visible}
.foot-brand{align-items:center;gap:var(--s4);text-decoration:none}
.foot-brand img{width:64px;height:64px}
.foot-words{display:flex;flex-direction:column;gap:2px}
.foot-words .name{font-family:var(--f-display);font-size:19px;letter-spacing:.18em}
.foot-words .rec{letter-spacing:.14em;text-transform:uppercase}
.brand .name{font-family:var(--f-display);font-size:18px;letter-spacing:.18em;font-weight:400;white-space:nowrap}
nav.rooms{display:flex;gap:var(--s1);flex-wrap:wrap;margin-left:auto}
nav.rooms a{
  font-size:12.5px;font-weight:500;letter-spacing:.01em;color:var(--ink);
  text-decoration:none;padding:7px 10px;border-radius:999px;white-space:nowrap;
  transition:background var(--t),color var(--t)}
nav.rooms a:hover{background:var(--surface-tint)}
nav.rooms a[aria-current="page"]{background:var(--ink);color:var(--cream)}

/* --- buttons / chips -------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--s2);
  font:600 14px/1 var(--f-text);letter-spacing:.06em;text-transform:uppercase;
  padding:14px 20px;border-radius:var(--r-control);border:1px solid transparent;
  background:var(--action);color:var(--cream);cursor:pointer;text-decoration:none;
  transition:transform var(--t),box-shadow var(--t),background var(--t)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--cream)}
.btn.quiet{background:transparent;color:var(--action);border-color:var(--hairline);text-transform:none;letter-spacing:0;font-weight:500}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

.chip{display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;
  letter-spacing:.04em;background:var(--surface-tint);color:var(--ink-muted)}

/* onward routes — DR-05, never a dead end */
.onward{display:flex;flex-wrap:wrap;gap:var(--s3);padding-top:var(--s8);margin-top:var(--s12);
  border-top:1px solid var(--hairline)}
.onward a{
  flex:1 1 240px;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;
  padding:var(--s4) var(--s6) var(--s4) var(--s4);border:1px solid var(--hairline);
  border-radius:var(--r-card);background:var(--cream);transition:border-color var(--t),transform var(--t)}
.onward a:hover{border-color:var(--accent);transform:translateY(-2px)}
.onward b{font-family:var(--f-display);font-size:22px;font-weight:400}
.onward span{font-size:13px;color:var(--ink-muted)}

/* --- cards ------------------------------------------------------------ */
.card{background:var(--cream);border:1px solid var(--hairline);border-radius:var(--r-card);
      padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3)}

/* Room card — the routing unit on Home. Image or colour field + one invitation. */
.room-card{position:relative;overflow:hidden;text-decoration:none;color:inherit;
  border-radius:var(--r-card);border:1px solid var(--hairline);background:var(--cream);
  display:flex;flex-direction:column;transition:transform var(--t),box-shadow var(--t)}
.room-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.room-card .rc-field{aspect-ratio:16/10;position:relative;overflow:hidden;display:block}
.room-card .body{padding:var(--s4) var(--s6) var(--s6);display:flex;flex-direction:column;gap:var(--s2)}
.room-card h3{font-family:var(--f-display);font-size:26px;font-weight:400}
.room-card p{font-size:14px;line-height:21px;color:var(--ink-muted)}
.room-card .go{font-size:13px;font-weight:600;color:var(--action);margin-top:var(--s2)}

/* --- asset slots ------------------------------------------------------ */
/* Every image is a labelled slot. No stock photograph stands in for her work. */
.slot{position:relative;display:grid;place-items:center;overflow:hidden;
  border-radius:var(--r-card);background:var(--surface-tint);isolation:isolate}
.slot::after{
  content:attr(data-slot);position:absolute;left:10px;bottom:10px;z-index:3;
  font:600 10px/1.4 var(--f-text);letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream);background:rgba(23,23,23,.62);backdrop-filter:blur(3px);
  padding:5px 9px;border-radius:5px;max-width:calc(100% - 20px)}
.slot .sunset{position:absolute;inset:0;z-index:1;background:var(--gradient-sky)}
.slot .veil{position:absolute;inset:0;z-index:2;
  background:radial-gradient(120% 90% at 30% 110%, rgba(18,33,43,.38), transparent 60%)}
.slot .glyph{position:relative;z-index:2;font-family:var(--f-display);font-size:clamp(30px,7vw,78px);
  color:rgba(255,249,242,.34);line-height:1;user-select:none}
/* Support tones. Flat, from the muted set, so the sunset stays the hero's alone. */
.slot.t-tint{background:var(--surface-tint)}          .slot.t-tint .glyph{color:var(--blush)}
.slot.t-blush{background:var(--blush-light)}          .slot.t-blush .glyph{color:rgba(23,23,23,.22)}
.slot.t-sand{background:var(--sand)}                  .slot.t-sand .glyph{color:rgba(23,23,23,.2)}
.slot.t-sea{background:var(--sea-glass)}              .slot.t-sea .glyph{color:rgba(23,23,23,.22)}
.slot.t-coral{background:var(--peach)}                .slot.t-coral .glyph{color:rgba(23,23,23,.22)}
.slot.t-teal{background:var(--deep-teal)}             .slot.t-teal .glyph{color:rgba(255,249,242,.4)}
.slot.t-tint::after,.slot.t-sand::after,.slot.t-blush::after,.slot.t-sea::after,.slot.t-coral::after{
  background:rgba(23,23,23,.55)}

/* --- copy placeholder --------------------------------------------------
   The written counterpart of .slot. Filler inherits the type it sits in, so
   the layout is judged on real line-length and rhythm; the muted colour and
   the dotted rule mark it as unwritten without shouting over the design.
   Colour is never the only signal (NFR-12) — the rule carries it too. */
.ph{color:var(--ink-muted);text-decoration:underline;text-decoration-style:dotted;
  text-decoration-color:var(--hairline);text-underline-offset:4px;
  -webkit-text-decoration-style:dotted}
/* On the dark surfaces (studio queue, intake, teal cards) invert it. */
.on-dark .ph,.t-teal .ph,.studio .ph{color:rgba(255,249,242,.62);
  text-decoration-color:rgba(255,249,242,.28)}
/* In specimen mode every outstanding block is counted, so make them scannable. */
:root[data-specimen] .ph{background:rgba(247,194,90,.22);
  box-shadow:0 0 0 2px rgba(247,194,90,.22);border-radius:2px}

/* --- hero ------------------------------------------------------------- */
.hero{position:relative;padding-block:var(--s16) var(--s12)}
.hero-grid{display:grid;gap:var(--s8);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--s12)}}
.hero .mark{width:104px;height:auto;display:block;margin-bottom:var(--s4)}
.hero-slot{aspect-ratio:4/5;min-height:280px;max-height:min(62vh,520px);margin-inline:auto;width:100%}

/* the one signature moment — Home only, and it yields entirely */
.settle{animation:settle 600ms cubic-bezier(.2,.7,.3,1) both}
.settle-2{animation-delay:120ms} .settle-3{animation-delay:220ms}
@keyframes settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --- scrapbook ornament (the 30%) ------------------------------------- */
/* Decorative only. Never carries meaning. Yields to reduced motion. */
.tape{position:relative}
.tape::before{
  content:"";position:absolute;top:-11px;left:22px;width:86px;height:26px;z-index:4;
  background:linear-gradient(105deg,rgba(247,194,90,.42),rgba(247,184,179,.42));
  transform:rotate(-4deg);box-shadow:0 1px 2px rgba(23,23,23,.07)}
.tape.right::before{left:auto;right:22px;transform:rotate(3.5deg)}
.underline{position:relative;display:inline-block}
.underline svg{position:absolute;left:0;right:0;bottom:-9px;width:100%;height:9px;
  color:var(--sunset-coral);overflow:visible}
.sticker{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  background:var(--blush);color:var(--ink);font-size:12px;font-weight:600;
  transform:rotate(-1.5deg);box-shadow:0 1px 2px rgba(23,23,23,.08)}
.emo{font-style:normal}

/* --- T-Time ----------------------------------------------------------- */
/* Muted support register. Paper, faint lines, taped corners. Not academic. */
#t-time{--accent:var(--deep-teal);--room-wash:var(--sea-glass)}
.paper{
  background:
    repeating-linear-gradient(to bottom,transparent 0 30px,rgba(132,198,192,.16) 30px 31px),
    var(--cream);
  border:1px solid var(--hairline);border-radius:var(--r-card)}
.piece-card{padding:var(--s8);position:relative}
.piece-card.latest{background-image:
    repeating-linear-gradient(to bottom,transparent 0 31px,rgba(132,198,192,.2) 31px 32px)}
.piece-list{border-top:1px solid var(--hairline)}
.piece-row{display:flex;gap:var(--s4);align-items:baseline;justify-content:space-between;
  padding-block:var(--s4);border-bottom:1px solid var(--hairline);text-decoration:none;color:inherit;
  transition:padding-left var(--t),background var(--t)}
.piece-row:hover{padding-left:var(--s3);background:var(--surface-tint)}
.piece-row .t{font-family:var(--f-display);font-size:22px;line-height:1.25;flex:1 1 260px}
.piece-meta{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}

/* reading column — 62–72 characters, never more (§8.1) */
.reading{max-width:var(--measure);font-size:19px;line-height:31px}
.reading p + p{margin-top:var(--s6)}

/* audio — first class, never an attachment, never autoplay */
.player{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  background:var(--blush);border-radius:var(--r-card);padding:var(--s4) var(--s6)}
.player .label{font-size:15px;font-weight:500;flex:1 1 200px}
.player .bar{flex:1 1 180px;height:5px;border-radius:999px;background:rgba(23,23,23,.16);position:relative;cursor:pointer}
.player .bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink);border-radius:999px;display:block}
.play{width:46px;height:46px;border-radius:50%;border:0;background:var(--ink);color:var(--cream);
  display:grid;place-items:center;cursor:pointer;flex:0 0 auto;font-size:15px}

/* references — grouped read / watch / listen, mono labels */
.refs{display:flex;flex-direction:column;gap:var(--s4)}
.ref-group{display:flex;flex-direction:column;gap:var(--s2)}
.ref{display:flex;gap:var(--s3);align-items:baseline;padding-block:var(--s2);
     border-bottom:1px dotted var(--hairline)}
.ref .k{flex:0 0 74px}

/* --- Carnival --------------------------------------------------------- */
#carnival{--accent:var(--sunset-coral)}
.gateway-blurb{max-width:60ch;font-size:19px;line-height:31px}
/* link standing — meaning never carried by colour alone (DR-06, TR-29) */
.standing{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:3px 10px;border-radius:999px;border:1px solid}
.standing .ic{font-size:11px;line-height:1}
.st-official{color:var(--turquoise-text);border-color:var(--turquoise);background:rgba(19,184,196,.1)}
.st-affiliated{color:var(--tangerine-text);border-color:var(--tangerine);background:rgba(255,138,50,.1)}
.st-related{color:var(--ink-muted);border-color:var(--hairline);background:var(--surface-tint)}
.link-row{display:flex;gap:var(--s3);align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;padding-block:var(--s4);border-bottom:1px solid var(--hairline)}

/* Spotify — click to play. Nothing third-party loads until asked (ADR-06). */
.embed{border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;background:var(--cream)}
.embed .face{display:flex;gap:var(--s4);align-items:center;padding:var(--s4);cursor:pointer;
  background:none;border:0;width:100%;text-align:left;font:inherit;color:inherit}
.embed .art{width:72px;height:72px;border-radius:10px;flex:0 0 auto;display:block;
  background:var(--gradient-sunset);position:relative;overflow:hidden}
.embed .art span{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-display);font-size:30px;color:rgba(255,249,242,.85)}
.embed .loaded{padding:var(--s6);background:var(--surface-tint);font-size:14px}

/* provenance card — credit is never fine print */
.prov{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s6);
  border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--cream)}
.prov dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);align-items:baseline}
.prov dt{font-family:var(--f-rec);font-size:var(--rec-size);letter-spacing:var(--rec-track);
         color:var(--ink-muted);font-weight:500;white-space:nowrap}
.prov dd{margin:0;font-size:14px;line-height:21px}

/* --- Made You Look ---------------------------------------------------- */
#made-you-look{--accent:var(--hot-pink)}
.mul-tabs{display:flex;gap:var(--s2);flex-wrap:wrap;border-bottom:1px solid var(--hairline);
  padding-bottom:var(--s3);margin-bottom:var(--s8)}
.mul-tabs button{font:600 14px/1 var(--f-text);padding:10px 16px;border-radius:999px;
  border:1px solid var(--hairline);background:transparent;cursor:pointer;color:var(--ink);
  transition:background var(--t),color var(--t),border-color var(--t)}
.mul-tabs button[aria-selected="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
/* DR-04: nothing reads as a shop. Styling note above the source link, never a price. */
.look{display:flex;flex-direction:column;gap:var(--s3)}
.look .note{font-size:15px;line-height:24px}
.obsession{background:var(--blush);border-radius:var(--r-card);padding:var(--s8);
  display:flex;flex-direction:column;gap:var(--s3)}

/* --- Let's Talk Travel ------------------------------------------------- */
#travel{--accent:var(--turquoise-text)}
.rec-card{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s6);
  border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--cream);
  transition:border-color var(--t)}
.rec-card:hover{border-color:var(--turquoise)}
.rec-card .take{font-size:15px;line-height:24px}
.expand{border-top:1px dotted var(--hairline);padding-top:var(--s3);margin-top:var(--s1);
  display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);align-items:baseline}
.expand dt{font-family:var(--f-rec);font-size:var(--rec-size);letter-spacing:var(--rec-track);color:var(--ink-muted)}
.expand dd{margin:0;font-size:14px;line-height:21px}

/* --- Work With Me ------------------------------------------------------ */
/* The quietest room. Professional without becoming corporate. */
#work-with-me{--accent:var(--ocean-text)}
.kit{display:flex;gap:var(--s4);align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;padding:var(--s6);border:1px solid var(--hairline);border-radius:var(--r-card)}
.reel{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.reel .slot{aspect-ratio:3/2}
table.catalogue{width:100%;border-collapse:collapse;font-size:14px}
table.catalogue th{text-align:left;font:600 12px/16px var(--f-text);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-muted);padding-block:var(--s3);border-bottom:1px solid var(--ink)}
table.catalogue td{padding-block:var(--s3);border-bottom:1px solid var(--hairline);vertical-align:top}
table.catalogue tr:nth-child(even) td{background:rgba(253,241,236,.5)}
table.catalogue td:last-child{font-family:var(--f-rec);font-size:var(--rec-size);
  letter-spacing:var(--rec-track);color:var(--ink-muted);white-space:nowrap}
.tbl-scroll{overflow-x:auto}

/* --- forms -------------------------------------------------------------- */
form{display:flex;flex-direction:column;gap:var(--s6)}
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-size:13px;font-weight:600;letter-spacing:.02em}
.field .help{font-size:13px;color:var(--ink-muted)}
input[type=text],input[type=email],input[type=url],input[type=date],select,textarea{
  font:400 16px/24px var(--f-text);color:var(--ink);background:var(--cream);
  border:1px solid var(--hairline);border-radius:var(--r-control);padding:12px 14px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--ocean-blue);outline:none;
  box-shadow:0 0 0 3px rgba(22,143,209,.18)}
textarea{min-height:120px;resize:vertical}
.checks{display:flex;flex-direction:column;gap:var(--s3)}
.check{display:flex;gap:var(--s3);align-items:center;padding:12px 14px;
  border:1px solid var(--hairline);border-radius:var(--r-control);cursor:pointer;
  transition:border-color var(--t),background var(--t)}
.check:hover{background:var(--surface-tint)}
.check input{width:19px;height:19px;accent-color:var(--hot-pink);flex:0 0 auto;margin:0}
.check:has(input:checked){border-color:var(--hot-pink);background:rgba(217,30,91,.05)}
.consent{font-size:13px;line-height:20px;color:var(--ink-muted);max-width:60ch}

/* subscribe block — one field, one button, one consent line, no modal */
.subscribe{background:var(--twilight);color:var(--cream);border-radius:var(--r-card);padding:var(--s12)}
.subscribe .micro{color:var(--blush)}
.subscribe h2,.subscribe p{color:var(--cream)}
.subscribe .consent{color:rgba(255,249,242,.72)}
.subscribe input[type=email]{background:rgba(255,249,242,.07);border-color:rgba(255,249,242,.24);color:var(--cream)}
.subscribe input::placeholder{color:rgba(255,249,242,.5)}
.subscribe .check{border-color:rgba(255,249,242,.24)}
.subscribe .check:hover{background:rgba(255,249,242,.06)}
.subscribe .check:has(input:checked){border-color:var(--blush);background:rgba(247,184,179,.12)}
.subscribe .tagline{color:var(--blush)}

/* result panes */
.ack{border-left:3px solid var(--turquoise);background:var(--surface-tint);
  border-radius:0 var(--r-control) var(--r-control) 0;padding:var(--s6);font-size:15px;line-height:24px}
.notice{border-left:3px solid var(--sun-glow);background:rgba(247,194,90,.12);
  border-radius:0 var(--r-control) var(--r-control) 0;padding:var(--s6);font-size:15px;line-height:24px}

/* --- quiet states (BR-15 / DR-19 / DR-07) ------------------------------- */
/* An empty room renders its invitation. Never a placeholder, never a count,
   never an elapsed time. */
.invitation{border:1px dashed var(--hairline);border-radius:var(--r-card);
  padding:var(--s12) var(--s8);text-align:center;display:flex;flex-direction:column;
  gap:var(--s3);align-items:center;background:var(--surface-tint)}
.invitation .d-l{max-width:22ch}
.invitation p{max-width:46ch;color:var(--ink-muted);font-size:15px;line-height:24px}

/* --- studio (editorial surface) ---------------------------------------- */
#studio{--accent:var(--ocean-text)}
.studio-shell{background:var(--twilight);color:var(--cream);border-radius:var(--r-card);
  padding:var(--s8);display:flex;flex-direction:column;gap:var(--s8)}
.studio-shell .micro{color:var(--blush)}
.studio-shell h2,.studio-shell h3{color:var(--cream)}
.studio-tabs{display:flex;gap:var(--s2);flex-wrap:wrap}
.studio-tabs button{font:600 13px/1 var(--f-text);padding:9px 14px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,249,242,.22);background:transparent;color:var(--cream);transition:background var(--t)}
.studio-tabs button[aria-selected="true"]{background:var(--cream);color:var(--twilight);border-color:var(--cream)}
.q-item{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s6);
  border:1px solid rgba(255,249,242,.16);border-radius:var(--r-card);background:rgba(255,249,242,.04)}
.q-item .rec{color:rgba(255,249,242,.62)}
.gate{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);border-radius:var(--r-control);
  font-size:14px;line-height:21px}
.gate.pass{background:rgba(19,184,196,.14);border-left:3px solid var(--turquoise)}
.gate.block{background:rgba(217,30,91,.16);border-left:3px solid var(--hot-pink)}
.gate.hold{background:rgba(247,194,90,.14);border-left:3px solid var(--sun-glow)}
.gate b{color:var(--cream)}
.seg{display:inline-flex;border:1px solid rgba(255,249,242,.24);border-radius:999px;overflow:hidden}
.seg button{font:600 12px/1 var(--f-text);letter-spacing:.06em;text-transform:uppercase;
  padding:9px 15px;background:transparent;border:0;color:var(--cream);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--blush);color:var(--twilight)}
.phone{width:288px;max-width:100%;border:9px solid rgba(255,249,242,.14);border-radius:26px;
  overflow:hidden;background:var(--cream);color:var(--ink);flex:0 0 auto}
.phone .inner{padding:var(--s4);font-size:13px;line-height:20px;max-height:420px;overflow-y:auto}
.bars{display:flex;flex-direction:column;gap:var(--s3)}
.bar-row{display:grid;grid-template-columns:minmax(120px,1.1fr) 1fr auto;gap:var(--s4);
  align-items:center;font-size:13px}
.bar-row .track{height:9px;border-radius:999px;background:rgba(255,249,242,.14);overflow:hidden}
.bar-row .track i{display:block;height:100%;background:var(--blush);border-radius:999px}
.bar-row .v{font-family:var(--f-rec);font-size:var(--rec-size);letter-spacing:var(--rec-track);
  color:rgba(255,249,242,.8);font-variant-numeric:tabular-nums}
.kpi{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.kpi div{padding:var(--s4);border:1px solid rgba(255,249,242,.16);border-radius:var(--r-control)}
.kpi b{display:block;font-family:var(--f-display);font-size:34px;font-weight:300;
  line-height:1.1;color:var(--cream);font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;color:rgba(255,249,242,.66)}

/* --- review layer ------------------------------------------------------- */
/* Not part of the site. The instrument Tiah and the team review through. */
.rv-toggle{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;
  border:0;border-radius:999px;background:var(--ink);color:var(--cream);cursor:pointer;
  font:600 12px/1 var(--f-text);letter-spacing:.1em;text-transform:uppercase;padding:13px 18px;
  box-shadow:0 6px 20px rgba(23,23,23,.25)}
.rv-panel{position:fixed;right:16px;bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:60;
  width:min(330px,calc(100vw - 32px));max-height:min(72vh,620px);overflow-y:auto;
  background:var(--twilight);color:var(--cream);border-radius:var(--r-card);
  padding:var(--s6);box-shadow:0 20px 50px rgba(18,33,43,.4);display:flex;flex-direction:column;gap:var(--s6)}
.rv-panel .micro{color:var(--blush)}
.rv-group{display:flex;flex-direction:column;gap:var(--s2)}
.rv-group > .lbl{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,249,242,.6)}
.rv-panel .seg{width:100%}
.rv-panel .seg button{flex:1;padding:9px 6px;font-size:11px;letter-spacing:.04em}
.sw{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  font-size:13px;cursor:pointer;padding:9px 0;border-bottom:1px solid rgba(255,249,242,.1)}
.sw input{width:18px;height:18px;accent-color:var(--blush);margin:0}
.rv-note{font-size:12px;line-height:18px;color:rgba(255,249,242,.64)}

/* requirement annotations — off by default */
[data-req]{position:relative}
:root:not([data-review]) [data-req]::after{display:none}
:root[data-review] [data-req]{outline:1px dashed rgba(217,30,91,.5);outline-offset:4px}
:root[data-review] [data-req]::after{
  content:attr(data-req);position:absolute;top:-9px;left:0;z-index:30;
  font:600 9px/1.5 var(--f-record),monospace;letter-spacing:.06em;
  background:var(--hot-pink);color:var(--cream);padding:2px 6px;border-radius:3px;
  white-space:nowrap;pointer-events:none}
:root[data-review] .approved{outline:1px solid rgba(19,184,196,.6);outline-offset:6px}
:root[data-review] .approved::before{
  content:"APPROVED COPY " attr(data-copy-ref);position:absolute;
  font:600 9px/1.5 var(--f-record),monospace;letter-spacing:.06em;
  background:var(--turquoise-text);color:var(--cream);padding:2px 6px;border-radius:3px;
  margin-top:-22px}
.approved{position:relative}
:root[data-specimen] [data-spec]{background:rgba(247,194,90,.16);
  box-shadow:inset 3px 0 0 var(--sun-glow);padding-left:var(--s3)}

/* phone frame simulation */
:root[data-viewport="phone"] #app{max-width:390px;margin-inline:auto;
  border-inline:1px solid var(--hairline);min-height:100vh}
:root[data-viewport="phone"] .wrap{padding-inline:16px}

/* reduced motion — the real one, and the simulated one */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .tape::before{transform:none}
}
:root[data-motion="off"] *,:root[data-motion="off"] *::before,:root[data-motion="off"] *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important}
:root[data-motion="off"] .settle{animation:none}

@media(max-width:860px){
  nav.rooms{order:3;width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap;
    padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav.rooms::-webkit-scrollbar{display:none}
  header.site .wrap{flex-wrap:wrap;gap:var(--s3)}
}
@media(max-width:700px){
  .room{padding-block:var(--s8) var(--s12)}
  .hero{padding-block:var(--s8)}
  .piece-card{padding:var(--s6)}
  .subscribe,.studio-shell{padding:var(--s6)}
  .slot .glyph{font-size:clamp(28px,16vw,64px)}
}
@media print{.rv-toggle,.rv-panel,header.site{display:none}}

.field > .flabel{font-size:13px;font-weight:600;letter-spacing:.02em}

/* ===========================================================================
   MOTION
   The resting state of every rule below is the finished design. Motion is
   added by script only when it is permitted, so a reader with no JavaScript
   or a reduced-motion request sees a complete page, not a broken one.
   ======================================================================== */

/* reveal — only armed once [data-anim="on"] is set by motion.js */
:root[data-anim="on"] [data-rv]{opacity:0;transform:translate3d(0,18px,0)}
:root[data-anim="on"] [data-rv].is-in{opacity:1;transform:none;
  transition:opacity 640ms cubic-bezier(.22,.68,.24,1),transform 640ms cubic-bezier(.22,.68,.24,1)}
:root[data-anim="on"] [data-rv-stagger] > *{opacity:0;transform:translate3d(0,14px,0)}
:root[data-anim="on"] [data-rv-stagger] > *.is-in{opacity:1;transform:none;
  transition:opacity 560ms cubic-bezier(.22,.68,.24,1),transform 560ms cubic-bezier(.22,.68,.24,1)}
:root[data-anim="on"] [data-rv-stagger].is-in{opacity:1;transform:none}

/* depth + spin — transform only, and capped in script at 14px / 7deg */
[data-depth]{will-change:transform}
[data-spin]{transform-style:preserve-3d}
.spin-stage{perspective:1100px}

/* room transition */
:root[data-anim="on"] #view.room-in{animation:roomIn 480ms cubic-bezier(.22,.68,.24,1) both}
@keyframes roomIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}

/* the signature sequence — canvas sits over the static plate and only
   reveals itself once it has drawn, so the fallback is never a blank box */
.seq{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity 420ms ease;
  display:block;width:100%;height:100%;max-width:100%}
.seq.is-live{opacity:1}
.slot:has(.seq.is-live) .sunset,.slot:has(.seq.is-live) .glyph{opacity:0;transition:opacity 420ms ease}

/* hover — under 250ms, as §8.3 requires of a transition */
.room-card,.rec-card,.onward a,.btn{transition-duration:220ms}
.room-card .rc-field{overflow:hidden}
.room-card .rc-field > .slot{transition:transform 420ms cubic-bezier(.22,.68,.24,1)}
.room-card:hover .rc-field > .slot{transform:scale(1.035)}
.brand img{transition:transform 420ms cubic-bezier(.22,.68,.24,1)}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}
.play{transition:transform 220ms cubic-bezier(.22,.68,.24,1)}
.play:hover{transform:scale(1.07)}

/* reduced motion removes all of it, including the scrub */
@media(prefers-reduced-motion:reduce){
  [data-depth],[data-spin]{transform:none!important}
  .seq{transition:none}
  :root[data-anim] [data-rv],:root[data-anim] [data-rv-stagger] > *{opacity:1!important;transform:none!important}
}
:root[data-motion="off"] [data-depth],:root[data-motion="off"] [data-spin]{transform:none!important}
:root[data-motion="off"] [data-rv],:root[data-motion="off"] [data-rv-stagger] > *{opacity:1!important;transform:none!important}

/* ===========================================================================
   REVIEW ORIENTATION CARD
   Part of the review instrument, not the site. It exists so a first-time
   reviewer knows what is finished, what is standing in, and what the switches
   do. It never ships: no equivalent exists in the public build, and it is not
   a subscription prompt — DR-17 and US-38 are untouched.
   ======================================================================== */
.rv-hello{position:fixed;inset:0;z-index:70;display:grid;place-items:center;
  padding:20px;background:rgba(18,33,43,.55);backdrop-filter:blur(6px)}
.rv-hello .sheet{width:min(560px,100%);max-height:86vh;overflow-y:auto;
  background:var(--cream);border-radius:var(--r-card);padding:var(--s12);
  box-shadow:0 30px 70px rgba(18,33,43,.35);display:flex;flex-direction:column;gap:var(--s6)}
.rv-hello h2{font-family:var(--f-display);font-size:clamp(26px,5vw,34px);font-weight:300;line-height:1.15}
.rv-hello ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:var(--s3);
  font-size:15px;line-height:24px}
.rv-hello li b{font-weight:600}
.rv-hello .foot{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
@media(max-width:700px){.rv-hello .sheet{padding:var(--s8)}}
.rv-hello .sheet:focus{outline:none}

/* ===========================================================================
   FILM MODULES
   Poster first, always. The poster is the finished design — the film is the
   enhancement, which is what keeps the page complete on a slow phone and
   under a reduced-motion request (TR-06, NFR-08, NFR-44).
   ======================================================================== */
.film{margin:0;display:flex;flex-direction:column;gap:var(--s3)}
.film-stage{position:relative;overflow:hidden;border-radius:var(--r-card);
  background:var(--twilight);isolation:isolate}
.film-canvas{display:block;width:100%;height:100%;position:absolute;inset:0;z-index:1;
  opacity:0;transition:opacity 420ms ease}
.film[data-state="playing"] .film-canvas,
.film[data-mode="scrub"] .film-canvas{opacity:1}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.film-poster{position:absolute;inset:0;z-index:2;transition:opacity 420ms ease,transform 640ms cubic-bezier(.22,.68,.24,1)}
.film[data-state="playing"] .film-poster{opacity:0;transform:scale(1.04)}
.film[data-mode="scrub"] .film-poster{opacity:0}

/* Control surface is visible AT REST, so the module reads as a video player
   before anything plays. Big play on the poster, and a persistent rail with
   play/pause, a seek bar and a timecode. The rail stays on ambient tiles too:
   WCAG 2.2.2 requires a way to pause anything that moves by itself for more
   than five seconds, and NFR-06 sets the target at 2.2 AA. */
.film-big{position:absolute;z-index:4;left:50%;top:calc(50% - 14px);
  transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,249,242,.94);color:var(--twilight);font-size:19px;
  display:grid;place-items:center;padding-left:4px;
  transition:transform 260ms cubic-bezier(.22,.68,.24,1),opacity 260ms ease;
  box-shadow:0 6px 24px rgba(18,33,43,.3)}
.film-big:hover{transform:translate(-50%,-50%) scale(1.09)}
.film[data-state="playing"] .film-big{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.9)}
.film[data-mode="ambient"] .film-big,.film[data-mode="scrub"] .film-big{display:none}

.film-rail{position:absolute;z-index:4;left:0;right:0;bottom:0;
  padding:var(--s6) var(--s4) var(--s4);
  display:flex;align-items:center;gap:var(--s3);
  background:linear-gradient(to top,rgba(18,33,43,.82),rgba(18,33,43,.34) 55%,transparent)}
.film[data-mode="scrub"] .film-rail{display:none}
.film-play{width:34px;height:34px;border-radius:50%;border:0;flex:0 0 auto;cursor:pointer;
  background:rgba(255,249,242,.92);color:var(--twilight);font-size:12px;
  display:grid;place-items:center;transition:transform 200ms ease}
.film-play:hover{transform:scale(1.08)}
.film-bar{flex:1;height:4px;border-radius:999px;background:rgba(255,249,242,.34);
  position:relative;cursor:pointer;min-width:40px}
.film-bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:999px;
  background:var(--cream);display:block}
.film-bar::after{content:"";position:absolute;inset:-9px 0}   /* a real touch target */
.film-bar:focus-visible{outline:3px solid var(--focus);outline-offset:6px}
.film-time{font-family:var(--f-rec);font-size:var(--rec-size);letter-spacing:var(--rec-track);
  color:var(--cream);font-variant-numeric:tabular-nums;white-space:nowrap}
.film-close{position:absolute;z-index:5;top:var(--s4);right:var(--s4);width:40px;height:40px;
  border-radius:50%;border:0;cursor:pointer;background:rgba(18,33,43,.6);color:var(--cream);
  font-size:17px;display:none;place-items:center}
.film[data-open="1"] .film-close{display:grid}

/* the poster label sits clear of the rail */
.film-poster.slot::after{bottom:auto;top:10px}

/* credit is a first-class element, never fine print (TR-34, DR-03) */
.film figcaption{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}

/* theatre — the tile grows into the room; no modal appears over it */
.film-back{position:fixed;inset:0;z-index:78;background:rgba(18,33,43,.82);
  backdrop-filter:blur(8px);opacity:0;transition:opacity 320ms ease}
.film-back.is-in{opacity:1}
.film[data-open="1"]{position:fixed;z-index:79;inset:auto;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1100px,calc(100vw - 32px));margin:0}
.film[data-open="1"] .film-stage{aspect-ratio:16/9;
  box-shadow:0 40px 90px rgba(18,33,43,.5);
  transition:transform 480ms cubic-bezier(.22,.68,.24,1)}
.film[data-open="1"] figcaption{color:var(--cream)}
.film[data-open="1"] figcaption .rec{color:rgba(255,249,242,.75)}

/* ambient tiles keep the rail — a pause control is not optional for
   anything that starts moving on its own (WCAG 2.2.2) */

/* a phone never runs an ambient loop; reduced motion never runs any of them */
@media(max-width:899px){
  /* a phone never runs a loop by itself; the reader presses play */
  .film[data-mode="ambient"] .film-canvas{opacity:0}
  .film-big{width:56px;height:56px;font-size:17px}
  .film-rail{padding:var(--s8) var(--s3) var(--s3)}
}
@media(prefers-reduced-motion:reduce){
  .film[data-mode="ambient"] .film-canvas{opacity:0!important}
  .film-poster,.film-canvas,.film-play{transition:none}
}
:root[data-motion="off"] .film[data-mode="ambient"] .film-canvas{opacity:0!important}

/* ===========================================================================
   REVISION 5
   Home as the Pitons-backed personalized entrance with stacked sticker-style
   room buttons; About at the end with her photograph; internal prose held
   out of visitor copy.
   ======================================================================== */

/* --- first screen ------------------------------------------------------- */
.hero-full{position:relative;isolation:isolate;display:grid;align-items:end;
  min-height:min(86vh,760px);padding-block:var(--s16) var(--s12);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* where the photograph goes. The drawn island stands in for it until the
   licensed image arrives (U-01). */
.hero-photo{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(to top,#0E2A33 0%,#12212B 46%,#1F3A48 100%)}
.hero-photo svg{width:min(78%,900px);height:auto;opacity:.92}
/* the sunset rides over the image rather than replacing it, so the scrub
   still runs when the reader scrolls into the section beneath */
/* soft enough that the photograph still reads through it once it arrives */
.hero-bg .seq{mix-blend-mode:screen;opacity:.58}
.hero-photo svg{filter:drop-shadow(0 2px 14px rgba(0,0,0,.45))}
.hero-bg .seq{position:absolute;inset:0;width:100%;height:100%;max-width:100%;display:block;
  opacity:0;transition:opacity 600ms ease}
.hero-bg .seq.is-live{opacity:1}
.hero-scrim{position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(18,33,43,.86),rgba(18,33,43,.40) 40%,rgba(18,33,43,.16) 68%,rgba(18,33,43,.30)),
    radial-gradient(120% 80% at 18% 100%, rgba(18,33,43,.45), transparent 62%)}
/* superseded: the note now sits in the flow of the copy card */
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--s4)}
.hero-inner .mark{width:88px;height:auto;display:block;margin-bottom:var(--s2);
  filter:drop-shadow(0 3px 10px rgba(18,33,43,.55))}
.hero-inner .d-xl{color:var(--cream);max-width:16ch;text-shadow:0 2px 20px rgba(18,33,43,.4)}
/* line two is elegant italic, not the Allura tagline — v5 §9 keeps the
   tagline out of the visible hero position */
.hero-sub{font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:clamp(21px,3.4vw,28px);line-height:1.3;color:var(--blush)}
.hero-line{font-size:clamp(15px,2vw,18px);line-height:1.6;color:rgba(255,249,242,.92);max-width:44ch;
  text-shadow:0 1px 12px rgba(18,33,43,.5)}
.hero-sub{text-shadow:0 1px 12px rgba(18,33,43,.45)}

/* --- stacked room entrances --------------------------------------------- */
/* v5 §2: "The interaction can recall Linktree, but the execution should be
   richer, personalized and scrapbook-like." Sticker labels with paper edges,
   tape, tiny rotations and tactile movement — elegant typography throughout,
   no novelty fonts (v5 §9). */
.stack-rooms{display:flex;flex-direction:column;gap:var(--s4);
  max-width:620px;margin-inline:auto}
.room-sticker{
  --rot:0deg;
  position:relative;display:flex;align-items:center;gap:var(--s4);
  padding:var(--s6) var(--s6) var(--s6) var(--s8);
  background:var(--cream);color:var(--ink);text-decoration:none;
  border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:0 1px 2px rgba(23,23,23,.05), 0 10px 26px rgba(23,23,23,.07);
  transform:rotate(var(--rot));
  transition:transform 260ms cubic-bezier(.22,.68,.24,1),box-shadow 260ms ease}
.room-sticker:nth-child(1){--rot:-.9deg}
.room-sticker:nth-child(2){--rot:.7deg;border-radius:var(--r-card) 26px var(--r-card) 22px}
.room-sticker:nth-child(3){--rot:-.5deg;border-radius:24px var(--r-card) 20px var(--r-card)}
.room-sticker:nth-child(4){--rot:1deg}
.room-sticker:nth-child(5){--rot:-.6deg;border-radius:22px 22px var(--r-card) var(--r-card)}
.room-sticker:hover,.room-sticker:focus-visible{
  transform:rotate(0deg) translateY(-3px) scale(1.012);
  box-shadow:0 2px 4px rgba(23,23,23,.06), 0 18px 40px rgba(23,23,23,.12)}
/* a strip of tape on two of them, never on all */
.room-sticker:nth-child(2)::before,.room-sticker:nth-child(4)::before{
  content:"";position:absolute;top:-10px;left:26px;width:74px;height:22px;
  background:linear-gradient(105deg,rgba(247,194,90,.46),rgba(247,184,179,.46));
  transform:rotate(-5deg);box-shadow:0 1px 2px rgba(23,23,23,.07)}
.room-sticker:nth-child(4)::before{left:auto;right:30px;transform:rotate(4deg)}
.sticker-emo{font-size:26px;line-height:1;flex:0 0 auto}
.sticker-name{flex:1;font-family:var(--f-text);font-size:15px;font-weight:600;
  letter-spacing:.12em}
.sticker-go{font-size:19px;color:var(--action);transition:transform 260ms cubic-bezier(.22,.68,.24,1)}
.room-sticker:hover .sticker-go{transform:translateX(5px)}

/* --- About at the end of Home -------------------------------------------- */
/* She reads first, then you see her. The columns follow the same order as the
   source, so the reading order and the visual order agree at every width.

   Side by side once there is room, stacked on a phone. The tops are pinned to
   the same line, so the first line of her writing and the top of the first
   photograph start level rather than eleven pixels apart. */
.about-grid{display:grid;gap:var(--s8);grid-template-columns:1fr;align-items:start}
.about-grid > *{align-self:start;min-width:0}
.about-copy > :first-child{margin-top:0}
.about-photo{margin-top:0}
.about-photo .deck,.about-photo .mcard,.about-photo figure{margin-top:0}
/* no live deck means nothing to keep pace with */
.about-grid:not(:has(.deck.is-live)) .about-copy{
  position:static;min-height:0;display:block}
@media(min-width:860px){
  .about-grid{grid-template-columns:1.2fr minmax(300px,.8fr);gap:var(--s12)}
}
/* A phone stacks it: her words, then the photographs beneath them. */
@media(max-width:859px){
  .about-grid{grid-template-columns:1fr;gap:var(--s8)}
  .about-photo{width:100%}
}
.about-photo{position:relative}
/* The pictures are a scroll-driven deck, so they hold their place while you
   scroll through them. The copy sticks alongside so the two stay level
   instead of the text sliding away from the face it belongs to. It releases
   at the end of the section, and only where there are two columns to align —
   on one column there is nothing to stay level with. */
@media(min-width:860px){
  /* The photographs are a scroll-driven deck whose stage sticks at 14vh. The
     copy sticks to the SAME line and stands the same height, so the two stay
     level the whole way through the flip instead of drifting apart. Matching
     the deck's own offset is the point — any other value and they separate as
     soon as the cards start moving. */
  .about-copy{position:sticky;top:14vh;align-self:start;
    min-height:72vh;display:flex;flex-direction:column;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.about-copy{position:static}}
.about-photo .slot{max-height:520px}

/* --- Carnival gateway ----------------------------------------------------- */
/* The Carnival banner is the same photograph and the same sunset wash as the
   homepage, sized as a banner rather than a plate: wide enough to read as the
   island, short enough that the writing beneath it starts on the first screen. */
/* width must be stated: with aspect-ratio and a capped max-height the browser
   derives width FROM the height, which on a phone produced a 480px box inside
   a 350px column. */
/* The Carnival banner stays within the section — it is the top of a page, not
   a full-bleed cover. The illustration fills the band and is served from the
   same 4800px export as the homepage, so it is sharp at any width. */
.scrub-stage{position:relative;width:100%;max-width:100%;
  aspect-ratio:21/8;max-height:min(62vh,520px);
  border-radius:var(--r-card);overflow:hidden;margin-bottom:var(--s12);isolation:isolate;
  background:var(--cream);
  box-shadow:0 3px 8px rgba(18,33,43,.14), 0 24px 54px rgba(18,33,43,.2)}
.scrub-stage .band-img{object-fit:cover;object-position:50% 54%;transform:none}
.scrub-stage .seq{position:absolute;inset:0;width:100%;height:100%;max-width:100%;display:block;
  opacity:0;transition:opacity 600ms ease;mix-blend-mode:soft-light}
.scrub-stage .seq.is-live{opacity:1}
/* no copy sits on this one, so the scrim weights to the foot rather than the left */
.scrim-banner{background:linear-gradient(to top,rgba(18,33,43,.42),rgba(18,33,43,.06) 46%,rgba(18,33,43,0))}
@media(max-width:700px){
  .scrub-stage{aspect-ratio:4/5;max-height:min(62vh,520px);margin-bottom:var(--s8)}
  /* narrow and tall: hold the right of the frame, where Tiah and the
     Pitons are, the same choice the homepage crop makes */
  .scrub-stage .band-img{object-position:66% 48%}
}
.carnival-story{max-width:var(--measure);margin-inline:auto}
.carnival-story .reading + .reading{margin-top:var(--s6)}
.story-art{margin:var(--s12) 0;width:100%}
@media(min-width:1100px){
  /* the photography breaks the measure, the writing does not */
  .story-art{width:calc(100% + 180px);margin-inline:-90px}
}
.refrain{list-style:none;margin:var(--s12) 0 var(--s6);padding:0;
  display:flex;flex-direction:column;gap:var(--s2)}
.refrain li{font-family:var(--f-display);font-size:clamp(24px,4vw,32px);
  line-height:1.3;font-weight:400;color:var(--action)}
.carnival-story .close{font-family:var(--f-display);font-size:21px;font-style:italic;
  color:var(--ink-muted)}
.ref-link{display:block;padding:var(--s3) 0;border-bottom:1px solid var(--hairline);
  font-size:15px;line-height:23px}

/* --- Instagram door on the Lookbook -------------------------------------- */
.ig-card{display:flex;gap:var(--s6);align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:var(--s8);border-radius:var(--r-card);background:var(--blush)}

/* --- internal prose is not visitor copy (v5 §12, §13) --------------------- */
:root:not([data-review]) .dev-note{display:none}
:root[data-review] .dev-note{opacity:.75;border-left:2px solid var(--hot-pink);padding-left:var(--s3)}

/* --- the mark is never cropped (v5 §2, §12) ------------------------------- */
.brand img,.hero-inner .mark{object-fit:contain;border-radius:0;overflow:visible;flex:0 0 auto}

@media(max-width:700px){
  .hero-full{min-height:min(78vh,620px);padding-block:var(--s12) var(--s8)}
  .hero-inner .mark{width:66px}
  .room-sticker{padding:var(--s4) var(--s4) var(--s4) var(--s6);gap:var(--s3)}
  .sticker-emo{font-size:21px}
  .sticker-name{font-size:13px;letter-spacing:.09em}
  .scrub-stage{height:min(62vh,520px)}
  .story-art{margin-block:var(--s8)}
}

/* ===========================================================================
   HOME — cream ground, placed photograph, board on top
   Her note: the homepage background should be warm cream in the site's own
   style. So cream is the ground, and the Pitons photograph is a plate placed
   on it — a photo pasted into the scrapbook — rather than bleeding to the
   edges. The sunset lives on a layer over that plate and comes up as the
   reader scrolls into the section beneath.
   ======================================================================== */
/* Tiah's 25 Sep note: the cream around the illustration read as empty. The
   picture now fills the section and the copy and the board sit on top of it,
   which is what a scrapbook page actually looks like. The cream stays as the
   ground beneath, so nothing flashes white while the image decodes. */
.hero-full{position:relative;background:var(--cream);
  padding-block:0;
  display:grid;align-items:center;min-height:100vh;min-height:100svh}
.hero-stage{position:relative;width:100%;
  min-height:100svh;display:grid;align-items:center;
  padding-block:var(--s12)}

.hero-plate{position:absolute;inset:0;z-index:0;overflow:hidden;
  border-radius:0;background:var(--cream);
  border:0;padding:0;
  box-shadow:none}
/* The whole illustration, uncropped — it was drawn as one composition and
   cropping it throws away the framing. `contain` letterboxes onto the plate's
   own ground rather than cutting the Pitons out of their own view. */
.hero-photo-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;display:block;
  transform:scale(1);transform-origin:50% 50%;
  transition:transform 620ms cubic-bezier(.22,.68,.24,1)}
/* Below 900px the stage is taller than the illustration — the copy and the
   board need that height — so showing the whole composition would leave them
   sitting on cream beside it. There the picture fills the plate instead and
   everything hangs on the image, which is the point of the scrapbook. The
   crop favours the Pitons and the bay; the zoom still opens the full frame. */
/* On a phone the frame is tall and narrow, so the crop has to choose. It
   holds the right of the composition, where Tiah stands on the deck with the
   Pitons behind her — her note asks for both to stay visible. */
@media(max-width:899px){
  .hero-photo-img{object-position:66% 46%}
}
@media(max-width:560px){
  .hero-photo-img{object-position:70% 48%}
}
.hero-scrim{transition:opacity 620ms ease}
.hero-plate .seq{position:absolute;inset:0;width:100%;height:100%;max-width:100%;
  display:block;opacity:0;transition:opacity 600ms ease;
  /* soft-light takes the light down while the illustration keeps its own
     colour; overlay was crushing the greens to mud once the wash got
     strong enough to be worth scrolling for. */
  mix-blend-mode:soft-light}
.hero-plate .seq.is-live{opacity:1}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(18,33,43,.62),rgba(18,33,43,.22) 48%,rgba(18,33,43,.04) 72%)}
.hero-asset{position:absolute;left:14px;bottom:12px;z-index:3;
  color:rgba(255,249,242,.62);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;background:rgba(18,33,43,.4);
  padding:4px 8px;border-radius:4px;backdrop-filter:blur(3px)}

.hero-grid{position:relative;z-index:2;display:grid;gap:var(--s8);
  grid-template-columns:1fr;align-items:center;
  padding:clamp(20px,4vw,var(--s10))}
@media(min-width:940px){
  .hero-grid{grid-template-columns:1.02fr .98fr;gap:var(--s12);padding:var(--s12)}
}

/* the writing sits on its own card, so it never lands on a peak */
.hero-inner{display:flex;flex-direction:column;gap:var(--s3);
  background:color-mix(in srgb,var(--twilight) 58%,transparent);
  backdrop-filter:blur(10px) saturate(1.1);
  border-radius:var(--r-card);padding:var(--s8);
  box-shadow:0 2px 6px rgba(18,33,43,.2), 0 26px 56px rgba(18,33,43,.28);
  max-width:44ch;justify-self:start}
.hero-inner .d-xl{color:var(--cream);text-wrap:balance}
.hero-sub{font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:clamp(20px,2.8vw,26px);line-height:1.3;color:var(--blush)}
.hero-line{font-size:clamp(14px,1.6vw,16px);line-height:1.65;
  color:rgba(255,249,242,.9)}

/* --- the page ------------------------------------------------------------ */
/* The page is translucent so the island reads through it, matched to the
   copy card beside it. The stickers and their pins stay fully opaque — they
   are the content, and they have to stay legible over whatever is behind. */
.board{position:relative;justify-self:center;width:min(100%,480px);
  background:color-mix(in srgb,var(--cream) 58%,transparent);
  backdrop-filter:blur(12px) saturate(1.05);
  border-radius:5px;
  padding:var(--s12) var(--s6) var(--s8);
  transform:rotate(-1.1deg);
  box-shadow:0 2px 6px rgba(18,33,43,.2), 0 34px 70px rgba(18,33,43,.34)}
.board::after{content:"";position:absolute;inset:0;border-radius:5px;
  box-shadow:inset 0 0 0 1px rgba(23,23,23,.06);pointer-events:none}
.board-tape{position:absolute;width:104px;height:27px;z-index:3;
  background:linear-gradient(105deg,rgba(247,194,90,.55),rgba(247,184,179,.55));
  box-shadow:0 1px 2px rgba(23,23,23,.1)}
.board-tape-a{top:-12px;left:-18px;transform:rotate(-38deg)}
.board-tape-b{bottom:-11px;right:-20px;transform:rotate(-38deg)}

/* --- the five, laid out --------------------------------------------------- */
/* Rows of strung lights rather than a wrapped grid: each row is its own wire,
   and the split tapers downward (three over two, two-two-one on a phone). The
   rows are built in stickers.js so a wire always knows its own row's width. */
.pinboard{display:flex;flex-direction:column;align-items:center;gap:var(--s8);
  padding-top:26px}
.pin-row{position:relative;display:flex;justify-content:center;
  align-items:flex-start;gap:var(--s4);width:100%}
.pin-row[data-count="2"]{width:72%}
.pin-row[data-count="1"]{width:40%}
@media(max-width:620px){
  .pinboard{gap:var(--s6)}
  .pin-row{gap:var(--s3)}
  .pin-row[data-count="2"]{width:84%}
  .pin-row[data-count="1"]{width:46%}
  .pin-clip{top:-11px;width:15px;height:19px}
  .pin-bulb{top:12px;width:10px;height:10px}
}
.pin-wire{position:absolute;left:0;right:0;top:2px;width:100%;height:28px;
  color:rgba(18,33,43,.28);pointer-events:none;z-index:1;overflow:visible}

.pin-item{position:relative;z-index:2;flex:1 1 0;max-width:180px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  text-decoration:none;color:inherit;
  margin-top:calc(var(--drop,0) * 1px);
  transform:rotate(var(--rot));
  transition:transform 260ms cubic-bezier(.22,.68,.24,1)}
.pin-item:hover,.pin-item:focus-visible{transform:rotate(0deg) translateY(-4px) scale(1.06);z-index:4}
.pin-item:focus-visible{outline:3px solid var(--ocean-blue);outline-offset:5px;border-radius:12px}

/* the clip that holds the sticker to the wire, and its bulb */
/* The clip and its bulb hang entirely ABOVE the tile. They used to overlap the
   top of the sticker, which put the light over Tiah's face — her note, 25 Sep.
   The clip now grips the tile's very edge and nothing sits on the artwork. */
.pin-clip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  margin-bottom:-3px;
  width:17px;height:22px;border-radius:3px;z-index:5;
  background:linear-gradient(180deg,#F2EDE4,#D6CEC1);
  box-shadow:0 1px 3px rgba(18,33,43,.34)}
.pin-clip::after{content:"";position:absolute;left:3px;right:3px;top:6px;height:1px;
  background:rgba(18,33,43,.2)}
/* The bulb sits inside the clip, so its glow falls on the board, not on her. */
.pin-bulb{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 42% 34%, #FFF6DC 0 26%, var(--sun-glow) 58%, #E9A02F 100%)}
/* The glow is a separate layer so its strength can ride the scroll without
   recomputing a gradient on every frame. */
.pin-bulb::after,.rb-bulb::after{content:"";position:absolute;inset:-1px;
  border-radius:50%;pointer-events:none;
  opacity:calc(0.25 + var(--dusk, 0) * 0.75);
  box-shadow:0 0 10px 3px rgba(247,194,90,.75),
             0 0 26px 11px rgba(247,194,90,.42),
             0 0 52px 22px rgba(247,194,90,.20)}

/* Every tile is the same square whatever shape the sticker is, so the board
   reads as a set rather than a pile of odd sizes. The art is normalised onto a
   square canvas at build time and then scaled past the tile edge here, so the
   overhang stays the same proportion at every breakpoint. overflow stays
   visible — the bleed is the point. */
.pin-sticker{display:grid;place-items:center;width:100%;aspect-ratio:1;
  position:relative;z-index:2;overflow:visible;
  background:var(--cream);border-radius:14px;
  box-shadow:0 1px 2px rgba(18,33,43,.12), 0 8px 18px rgba(18,33,43,.12);
  transition:box-shadow 260ms ease,transform 260ms ease}
.pin-item:hover .pin-sticker{box-shadow:0 3px 5px rgba(18,33,43,.14), 0 16px 32px rgba(18,33,43,.2)}
.pin-sticker svg{display:block;width:100%;height:100%}

/* her note: larger, more central labels */
.pin-label{position:relative;z-index:2;
  background:var(--cream);padding:3px 8px;border-radius:4px;
  box-shadow:0 1px 3px rgba(18,33,43,.12);
  font:600 14px/1.25 var(--f-text);
  letter-spacing:.05em;text-align:center;color:var(--ink);
  max-width:calc(100% + 30px)}

@media(max-width:620px){
  /* her note: keep the desktop display, stack it vertically on mobile */
  .hero-full{padding-block:0;min-height:100svh}
  .hero-stage{padding-block:var(--s8);min-height:100svh}
  .hero-plate{border-radius:0}
  .hero-grid{padding:var(--s4);gap:var(--s6)}
  .hero-inner{padding:var(--s6);max-width:none;justify-self:stretch}
  .board{padding:var(--s8) var(--s4) var(--s6);width:100%}
  .pin-item{width:calc(50% - var(--s4))}
  .pin-label{font-size:13px;letter-spacing:.03em}
  .board-tape{width:74px;height:20px}
  .board-tape-a{top:-9px;left:10px;transform:rotate(-26deg)}
  .board-tape-b{bottom:-8px;right:12px;transform:rotate(-26deg)}
}

/* ===========================================================================
   THE DIVE, AND THE RAILS
   ======================================================================== */

/* Pressing a sticker flies into that part of the island. Decorative only —
   it carries nothing, and a reduced-motion request skips it outright. */
/* --- travelling into her work -------------------------------------------
   Pressing a sticker should feel like going through the screen into the room,
   not like a page changing. Four things move together to sell that:

     the picture    pushes into the Pitons and softens, the way the world does
                    when you move fast through it
     the sticker    comes at you and past you — it is the thing you aimed at,
                    so it has to arrive before you do
     the rest       falls back and away, because it is not where you are going
     the new room   opens already in motion, slightly past you and settling,
                    so there is no cut between leaving and arriving

   The easing accelerates rather than settling: nothing here should look like
   it is coming to rest, because the rest happens on the other side.

   It is fast on purpose — about a fifth of a second end to end. A transition
   you wait for stops being travel and becomes a loading screen, and this one
   sits between every tap and the room behind it.
   ======================================================================== */
.hero-full{perspective:1200px;perspective-origin:50% 42%}

.hero-full .hero-photo-img{
  transition:transform 210ms cubic-bezier(.4,0,.75,0), filter 210ms ease}
.hero-full .pinboard,.hero-full .hero-inner{
  transition:opacity 150ms ease, transform 200ms cubic-bezier(.4,0,.75,0), filter 150ms ease}

/* the picture: in, and softening as it goes */
.hero-full.is-diving .hero-photo-img{transform:scale(4.2);filter:saturate(1.14) blur(2.5px)}
.hero-full.is-diving .hero-scrim{opacity:.12;transition:opacity 210ms ease}

/* the board falls back through the frame */
.hero-full.is-diving .pinboard{opacity:0;transform:translateZ(-260px) scale(.86);filter:blur(3px)}
.hero-full.is-diving .hero-inner{opacity:0;transform:translateZ(-180px) translateY(10px);filter:blur(2px)}

/* the one you pressed comes past you */
.hero-full.is-diving .pin-item.is-chosen{
  position:relative;z-index:9;opacity:0;
  transform:translate3d(var(--dive-x,0px), var(--dive-y,0px), 520px) scale(2.6);
  filter:blur(1.5px);
  transition:transform 210ms cubic-bezier(.4,0,.75,0), opacity 190ms ease-in,
             filter 210ms ease}

/* and the room opens already moving */
#view.arriving{animation:arrive 230ms cubic-bezier(.18,.86,.3,1) both}
@keyframes arrive{
  from{opacity:0;transform:scale(1.07);filter:blur(3px)}
  55% {opacity:1}
  to  {opacity:1;transform:none;filter:blur(0)}
}

/* --- the room bar --------------------------------------------------------
   Her photo wall, as navigation: a drooping wire of clip lights with each room
   pegged to it. The wire and the items are drawn from the same parabola, so a
   room always hangs exactly where the wire passes. The glow is warm and small
   on a light screen and opens up on a dark one, because that is when a string
   of lights actually reads as lit.
   ======================================================================== */
.roombar:empty{display:none}
.roombar{border-top:1px solid var(--hairline);background:transparent}
.rb-track{position:relative;display:flex;gap:var(--s1);
  align-items:flex-start;justify-content:center;
  padding-block:var(--s8) var(--s3);overflow-x:auto;overflow-y:visible;
  scrollbar-width:none}
.rb-track::-webkit-scrollbar{display:none}

/* the wire */
.rb-wire{position:absolute;left:0;right:0;top:10px;width:100%;height:32px;
  color:var(--hairline);pointer-events:none;z-index:0;overflow:visible}

/* Wide screens: the rows are grouping only, the items hang from the one wire. */
.rb-row{display:contents}
.rb-wire-row{display:none}

.rb-item{position:relative;z-index:1;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  width:78px;text-decoration:none;color:var(--ink);
  margin-top:calc(var(--drop,0) * 1px);
  padding:7px 4px 7px;border-radius:12px;
  transition:background 200ms ease,transform 200ms cubic-bezier(.22,.68,.24,1)}
.rb-item:hover{background:var(--surface-tint);transform:translateY(-2px)}
.rb-item.is-on{background:var(--surface-tint);box-shadow:inset 0 0 0 1px var(--hairline)}
.rb-item:focus-visible{outline:3px solid var(--ocean-blue);outline-offset:3px}

/* the clip, and the bulb inside it */
.rb-clip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  margin-bottom:-2px;
  width:15px;height:19px;border-radius:3px;
  background:linear-gradient(180deg,#F2EDE4,#D9D2C6);
  box-shadow:0 1px 2px rgba(18,33,43,.28);z-index:3}
.rb-clip::after{content:"";position:absolute;left:3px;right:3px;top:5px;height:1px;
  background:rgba(18,33,43,.18)}
.rb-bulb{position:absolute;left:50%;bottom:1px;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 42% 34%, #FFF6DC 0 26%, var(--sun-glow) 58%, #E9A02F 100%)}
.rb-item.is-on .rb-bulb::after{opacity:calc(0.45 + var(--dusk, 0) * 0.55);
  box-shadow:0 0 12px 4px rgba(247,194,90,.85),
             0 0 30px 13px rgba(247,194,90,.5),
             0 0 60px 26px rgba(247,194,90,.24)}
/* Away from the hero there is no sunset to read, so the room bar settles at a
   lit-but-calm level rather than sitting dark. */
.roombar{--dusk:.55}

.rb-icon{width:34px;height:34px;display:block;margin-top:4px}
.rb-icon svg{width:100%;height:100%;display:block}
.rb-label{font:600 10px/1.25 var(--f-text);letter-spacing:.07em;text-align:center;
  color:var(--ink-muted);max-width:74px}
.rb-item.is-on .rb-label{color:var(--ink)}

/* On a dark browser the lights carry the bar, so they get to be brighter and
   the wire has to stay visible against the dark. */
@media(prefers-color-scheme:dark){
  .rb-wire{color:rgba(255,249,242,.30)}
  .rb-bulb{background:radial-gradient(circle at 42% 34%, #FFFDF2 0 30%, #FFD98A 60%, #F0A833 100%);
    box-shadow:0 0 12px 4px rgba(255,205,110,.85),
               0 0 30px 13px rgba(255,190,90,.45),
               0 0 58px 26px rgba(255,180,80,.20)}
  .rb-item.is-on .rb-bulb{
    box-shadow:0 0 15px 6px rgba(255,214,130,.95),
               0 0 40px 18px rgba(255,195,95,.55),
               0 0 76px 34px rgba(255,180,80,.26)}
  .rb-clip{background:linear-gradient(180deg,#EFE9DE,#BDB5A6)}
}

/* Narrow screens: two strung rows, four over two, tapering to an inverted
   triangle. Nothing scrolls sideways, so no room hides off the edge. */
@media(max-width:700px){
  .rb-track{flex-direction:column;align-items:center;justify-content:flex-start;
    gap:var(--s5);padding-block:var(--s5) var(--s3);padding-inline:10px;
    overflow-x:visible}
  .rb-wire-main{display:none}
  .rb-wire-row{display:block;top:8px;height:22px}
  .rb-row{position:relative;display:flex;justify-content:space-around;
    align-items:flex-start;width:100%}
  /* the taper: the short row is narrower than the wide one above it */
  .rb-row-b{width:56%;min-width:170px}
  .rb-item{width:auto;min-width:56px;max-width:78px;flex:1 1 0;
    padding:6px 2px;margin-top:calc(var(--dropm,0) * 1px)}
  .rb-icon{width:30px;height:30px}
  .rb-label{font-size:9.5px;max-width:74px;letter-spacing:.04em}
  .rb-clip{top:-9px;width:13px;height:17px}
  .rb-bulb{top:11px;width:8px;height:8px}
}
@media(max-width:360px){
  .rb-label{font-size:9px;letter-spacing:.02em}
  .rb-icon{width:27px;height:27px}
}

@media(prefers-reduced-motion:reduce){
  .hero-full .hero-photo-img,.hero-full .pinboard,.hero-full .hero-inner,
  .rail,.rail-home{transition:none}
  #view.arriving{animation:none}
}
:root[data-motion="off"] #view.arriving{animation:none}

/* ===========================================================================
   CARD DECKS
   Resting state is a grid — every card present, in order. The stack is added
   by script only when motion is allowed.
   ======================================================================== */
.deck-stage{display:grid;gap:var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.deck-count{display:none}

/* The step compresses past nine cards so a well-stocked room does not become
   an endless scroll as Tiah adds records. */
.deck.is-live .deck-track{position:relative;height:calc(min(var(--n), 9) * 64vh)}
.deck.is-live .deck-stage{
  position:sticky;top:14vh;height:72vh;
  display:flex;align-items:center;justify-content:center;
  perspective:1400px}
.deck.is-live .deck-card{
  backface-visibility:hidden;-webkit-font-smoothing:antialiased;
  position:absolute;top:50%;left:50%;
  width:min(100%,460px);max-width:calc(100vw - 40px);margin:0;
  transform-origin:50% 60%;
  will-change:transform,opacity;
  /* centred by its own size, so a narrow screen cannot push it off-canvas */
  translate:-50% -50%}
/* the card itself keeps the room's own furniture, just lifted off the page */
.deck.is-live .deck-card > *{
  box-shadow:0 2px 4px rgba(18,33,43,.07), 0 24px 54px rgba(18,33,43,.16);
  background:var(--cream)}
.deck.is-live .deck-count{
  display:block;position:sticky;top:calc(14vh + 72vh + 8px);
  text-align:center;font-variant-numeric:tabular-nums}

@media(max-width:560px){
  .deck.is-live .deck-card{
  backface-visibility:hidden;-webkit-font-smoothing:antialiased;width:min(calc(100% - 12px),320px)}
  .deck.is-live .deck-track{height:calc(min(var(--n), 9) * 58vh)}
  .deck.is-live .deck-stage{height:66vh;top:12vh}
}

/* focus must never be invisible behind the stack */
.deck.is-live .deck-card:focus-within{z-index:200!important;opacity:1!important}

/* ===========================================================================
   25 SEPTEMBER REVIEW
   ======================================================================== */

/* her note: centre the Carnival room title; "Before we play mas…" sits in the
   margin rather than as the headline */
/* Every room opens the same way: its name, centred, at the top, so you always
   know which room you are standing in (25 Sep review). */
.room-title{text-align:center;padding-block:var(--s6) var(--s8)}
.room-title .d-l{margin-inline:auto}
.room-lede{margin:var(--s3) auto 0;max-width:46ch;
  font-family:var(--f-display);font-size:clamp(17px,2.2vw,21px);line-height:1.45;
  color:var(--ink-muted)}
.room-lede.underline{position:relative;display:inline-block}
.room-lede svg{display:block;width:100%;height:9px;margin-top:6px;color:var(--blush)}
/* The way back sits above the title, on its own line, so it never pulls the
   heading off centre. Every room page uses this pair: back link, then title. */
.room-back{padding-top:var(--s6)}
.room-back a{text-decoration:none;color:var(--ink-muted)}
.room-back a:hover{color:var(--ink)}
.room-back + .room-title{padding-top:var(--s3)}
/* the micro eyebrow, where a page has one, centres with its title */
.room-title .micro{display:block;margin-bottom:var(--s2);color:var(--accent)}
.room-title .chip{margin-inline:auto}
.story-margin{font:600 11px/1.5 var(--f-text);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:var(--s6)}
@media(min-width:1180px){
  .carnival-story{position:relative}
  .story-margin{position:absolute;left:-170px;top:4px;width:140px;text-align:right;margin:0}
}

/* --- slideshows ----------------------------------------------------------- */
.show{margin:0;display:flex;flex-direction:column;gap:var(--s3)}
.show-stage{position:relative;border-radius:var(--r-card);overflow:hidden;
  background:var(--surface-tint)}
.show-slide{position:absolute;inset:0;opacity:0;transition:opacity 620ms ease;
  pointer-events:none}
.show-slide.is-on{position:relative;opacity:1;pointer-events:auto}
.show-slide .slot{border-radius:0}
.show-rail{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);
  background:linear-gradient(to top,rgba(18,33,43,.66),transparent)}
.show-btn{width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;flex:0 0 auto;
  background:rgba(255,249,242,.9);color:var(--twilight);font-size:14px;line-height:1;
  display:grid;place-items:center;transition:transform 200ms ease}
.show-btn:hover{transform:scale(1.08)}
.show-play{margin-left:auto;font-size:10px}
.show-dots{display:flex;gap:6px;align-items:center;justify-content:center;flex:1}
.show-dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,249,242,.45);transition:background 200ms ease,transform 200ms ease}
.show-dot.is-on{background:var(--cream);transform:scale(1.35)}
.show-btn:focus-visible,.show-dot:focus-visible{outline:3px solid var(--ocean-blue);outline-offset:3px}
.show figcaption{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:baseline}
@media(prefers-reduced-motion:reduce){.show-slide{transition:none}}

/* --- Highlight Reel: rows of three on laptop, one column on a phone -------- */
.reel{display:grid;gap:var(--s6);grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.reel{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.reel{grid-template-columns:1fr}}

/* --- the mark is never cropped, at any scroll position -------------------- */
header.site .wrap{min-height:auto;padding-block:var(--s4)}
.brand img{width:40px;height:auto;max-height:44px;object-fit:contain;
  display:block;flex:0 0 auto}
header.site{overflow:visible}


/* --- real photographs ----------------------------------------------------- */
.photo{margin:0;position:relative;overflow:hidden;border-radius:var(--r-card);
  background:var(--surface-tint);display:block;width:100%}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo figcaption{position:absolute;left:8px;bottom:8px;
  background:rgba(18,33,43,.55);color:var(--cream);backdrop-filter:blur(3px);
  padding:3px 8px;border-radius:4px;font-size:10px;letter-spacing:.06em;
  max-width:calc(100% - 16px)}
.show-slide .photo{border-radius:0}
.room-card .rc-field .photo{border-radius:0;height:100%}

/* ===========================================================================
   MEDIA CARDS AND THE LIGHTBOX
   ======================================================================== */
.mcard{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  border-radius:var(--r-card);overflow:hidden;background:var(--surface-tint);
  transition:transform 260ms cubic-bezier(.22,.68,.24,1),box-shadow 260ms ease}
.mcard img{width:100%;height:100%;object-fit:cover;display:block}
.mcard:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(18,33,43,.18)}
.mcard:focus-visible{outline:3px solid var(--ocean-blue);outline-offset:3px}
.mcard-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;pointer-events:none;
  filter:drop-shadow(0 4px 12px rgba(18,33,43,.4))}
.mcard-play svg{width:100%;height:100%;display:block}
.mcard-dur{position:absolute;right:8px;bottom:8px;color:var(--cream);
  background:rgba(18,33,43,.6);padding:2px 7px;border-radius:4px;backdrop-filter:blur(3px)}
.mcard-cap{position:absolute;left:8px;bottom:8px;color:var(--cream);font:600 10px/1.4 var(--f-text);
  letter-spacing:.06em;background:rgba(18,33,43,.55);padding:3px 8px;border-radius:4px}
.deck.is-live .deck-card .mcard{box-shadow:none}
/* the same face without the button, for a card that is already a link */
.mcard-plain{display:block;position:relative;overflow:hidden;width:100%}
.mcard-plain img{width:100%;height:100%;object-fit:cover;display:block}
/* The Carnivals grid: the Highlight Reel's shape, as Tiah asked. */
.reel-card{display:flex;flex-direction:column;
  transition:transform 260ms cubic-bezier(.22,.68,.24,1),box-shadow 260ms ease}
.reel-card:hover{transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(18,33,43,.12), 0 18px 38px rgba(18,33,43,.16)}
.reel-card:focus-visible{outline:3px solid var(--ocean-blue);outline-offset:3px}
.reel-card .chip{align-self:flex-start}
/* The front card is the clickable one. It carries a deeper shadow and the
   zoom cursor so that is legible without a caption saying so; the others are
   inert while they wait. Colour is not doing the work here — size, shadow and
   cursor all say the same thing (NFR-12). */
.deck-card{cursor:default}
.deck.is-live .deck-card.is-front{cursor:zoom-in}
.deck.is-live .deck-card.is-front .mcard{
  box-shadow:0 10px 22px rgba(18,33,43,.22), 0 2px 5px rgba(18,33,43,.14)}
.deck.is-live .deck-card:not(.is-front){pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .deck.is-live .deck-card:not(.is-front){pointer-events:auto}
  .deck-card,.deck.is-live .deck-card.is-front{cursor:pointer}
}
.show-slide .mcard{border-radius:0}

/* Her cut-outs, sized past the tile so they overhang it like a sticker stuck
   slightly off-register. The stacked white drop-shadows trace the alpha
   silhouette, which gives the die-cut border a real sticker has; the last
   shadow is the one that lifts it off the board. */
.stk-photo{width:112%;height:112%;object-fit:contain;display:block;
  object-position:50% 100%;
  transition:filter 260ms ease,transform 260ms ease;
  filter:drop-shadow(0 0 2px var(--cream)) drop-shadow(0 0 2px var(--cream))
         drop-shadow(0 0 2px var(--cream)) drop-shadow(0 0 1px rgba(255,249,242,.9))
         drop-shadow(0 4px 7px rgba(18,33,43,.26))}
.pin-item:hover .stk-photo{transform:scale(1.04);
  filter:drop-shadow(0 0 2px var(--cream)) drop-shadow(0 0 2px var(--cream))
         drop-shadow(0 0 2px var(--cream)) drop-shadow(0 0 1px rgba(255,249,242,.9))
         drop-shadow(0 9px 14px rgba(18,33,43,.32))}
@media(prefers-reduced-motion:reduce){
  .stk-photo,.pin-sticker,.hero-photo-img{transition:none}
  .pin-item:hover .stk-photo{transform:none}
}

/* --- the modal ------------------------------------------------------------ */
.lb{position:fixed;inset:0;z-index:90;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s3);
  padding:var(--s8) var(--s4);
  background:rgba(12,20,26,.92);backdrop-filter:blur(10px);
  opacity:0;transition:opacity 220ms ease}
.lb.is-in{opacity:1}
.lb-stage{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s3);min-width:0;max-height:100%}
.lb-stage img,.lb-stage video{max-width:100%;max-height:78vh;width:auto;height:auto;
  display:block;border-radius:8px;background:#000}
.lb-stage figcaption{color:rgba(255,249,242,.7);text-align:center}
.lb-nav{width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;flex:0 0 auto;
  background:rgba(255,249,242,.14);color:var(--cream);font-size:22px;
  display:grid;place-items:center;transition:background 200ms ease}
.lb-nav:hover{background:rgba(255,249,242,.26)}
.lb-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:16px;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,249,242,.14);color:var(--cream);font-size:17px;
  display:grid;place-items:center;z-index:2}
.lb-close:hover{background:rgba(255,249,242,.26)}
.lb-count{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom,0px));color:rgba(255,249,242,.72);margin:0}
.lb-nav:focus-visible,.lb-close:focus-visible{outline:3px solid var(--ocean-blue);outline-offset:3px}

@media(max-width:700px){
  /* the arrows move off the sides so the frame gets the full width */
  .lb{grid-template-columns:1fr;padding:var(--s12) var(--s3) var(--s16)}
  .lb-nav{position:absolute;bottom:calc(52px + env(safe-area-inset-bottom,0px));width:44px;height:44px}
  .lb-prev{left:22%}
  .lb-next{right:22%}
  .lb-stage img,.lb-stage video{max-height:70vh}
}
@media(prefers-reduced-motion:reduce){
  .lb{transition:none}
  .mcard{transition:none}
}

/* ===========================================================================
   FOLDED SECTIONS
   ---------------------------------------------------------------------------
   Keep Me in the Loop and Suggest a T-Time both start closed. The button is
   not a lid on the panel — it becomes the panel, so the expansion reads as one
   object growing rather than two things swapping places.
   ======================================================================== */
.sub-open{display:inline-flex;align-items:center;gap:var(--s3);
  font:600 15px/1 var(--f-text);letter-spacing:.02em;
  background:var(--blush);color:var(--twilight);border:0;
  padding:16px 26px;border-radius:999px;cursor:pointer;
  box-shadow:0 2px 6px rgba(18,33,43,.18), 0 12px 26px rgba(18,33,43,.16);
  transition:transform 320ms cubic-bezier(.22,.68,.24,1),
             box-shadow 320ms ease,border-radius 420ms ease,opacity 220ms ease}
.sub-open:hover{transform:translateY(-2px);
  box-shadow:0 4px 9px rgba(18,33,43,.2), 0 18px 34px rgba(18,33,43,.2)}
.sub-open:focus-visible{outline:3px solid var(--ocean-blue);outline-offset:4px}
.sub-open-mark{font-size:17px;line-height:1}
.subscribe.is-open .sub-open{opacity:0;transform:scale(.94);pointer-events:none;
  position:absolute;pointer-events:none}
.subscribe{position:relative}
.sub-panel{overflow:hidden;max-height:0;opacity:0;
  transition:max-height 560ms cubic-bezier(.22,.68,.24,1),opacity 360ms ease}
.subscribe.is-open .sub-panel{opacity:1}
.subscribe.is-folded .sub-panel{max-height:0;opacity:0}

/* --- the note ------------------------------------------------------------
   Drawn as a folded sheet: the crease is a corner turned down, and opening it
   unfolds the sheet rather than sliding a drawer. */
.note-open{position:relative;display:inline-flex;align-items:center;
  align-self:flex-start;gap:var(--s3);
  font:500 16px/1.2 var(--f-display);letter-spacing:.01em;
  background:var(--cream);color:var(--ink);
  border:1px solid var(--hairline);border-radius:3px;
  padding:16px 22px 16px 20px;cursor:pointer;
  box-shadow:0 1px 2px rgba(18,33,43,.1), 0 8px 18px rgba(18,33,43,.12);
  transition:transform 320ms cubic-bezier(.22,.68,.24,1),box-shadow 320ms ease}
.note-open:hover{transform:translateY(-2px) rotate(-.6deg);
  box-shadow:0 3px 6px rgba(18,33,43,.14), 0 16px 30px rgba(18,33,43,.18)}
.note-open:focus-visible{outline:3px solid var(--ocean-blue);outline-offset:4px}
/* the turned-down corner */
.note-fold{position:absolute;top:0;right:0;width:20px;height:20px;
  background:linear-gradient(225deg, var(--sand) 0 50%, transparent 50%);
  border-left:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  transition:width 320ms ease,height 320ms ease}
.note-open[aria-expanded="true"] .note-fold{width:0;height:0}
.note-open[aria-expanded="true"]{opacity:0;pointer-events:none;position:absolute}
.note-panel{overflow:hidden;max-height:0;opacity:0;transform-origin:top center;
  transition:max-height 560ms cubic-bezier(.22,.68,.24,1),opacity 360ms ease}
.note-host.is-open .note-panel{opacity:1}

/* --- posting it ----------------------------------------------------------
   The sheet drops into the envelope and the envelope leaves. Decorative only:
   the acknowledgement is written to #sgResult either way, and reduced motion
   skips straight to the fold. */
.note-post{position:relative;height:0;pointer-events:none}
.note-post.is-posting{height:92px}
.note-letter,.note-envelope{position:absolute;left:50%;opacity:0}
.note-letter{width:46px;height:58px;top:0;margin-left:-23px;
  background:var(--cream);border:1px solid var(--hairline);border-radius:2px;
  box-shadow:0 4px 10px rgba(18,33,43,.18)}
.note-envelope{width:74px;height:50px;top:34px;margin-left:-37px;
  background:var(--sand);border:1px solid var(--hairline);border-radius:3px;
  box-shadow:0 5px 14px rgba(18,33,43,.2)}
.note-envelope::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom right, transparent 48%, var(--blush-light) 48%),
             linear-gradient(to bottom left,  transparent 48%, var(--blush-light) 48%);
  background-size:50% 58%;background-repeat:no-repeat;
  background-position:left top, right top;opacity:.9}
.note-post.is-posting .note-letter{animation:letterDrop 720ms cubic-bezier(.4,.1,.5,1) forwards}
.note-post.is-posting .note-envelope{animation:envGo 1180ms cubic-bezier(.4,.1,.4,1) forwards}
@keyframes letterDrop{
  0%  {opacity:0;transform:translateY(-26px) rotate(-3deg) scale(1)}
  22% {opacity:1}
  70% {opacity:1;transform:translateY(30px) rotate(1deg) scale(.86)}
  100%{opacity:0;transform:translateY(40px) rotate(2deg) scale(.7)}
}
@keyframes envGo{
  0%  {opacity:0;transform:translateY(6px) scale(.96)}
  18% {opacity:1;transform:translateY(0) scale(1)}
  52% {opacity:1;transform:translateY(0) scale(1.05)}
  64% {opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translate(120px,-70px) rotate(-14deg) scale(.6)}
}
@media(prefers-reduced-motion:reduce){
  .sub-open,.note-open,.sub-panel,.note-panel{transition:none}
  .note-post.is-posting{height:0}
  .note-post.is-posting .note-letter,.note-post.is-posting .note-envelope{animation:none;opacity:0}
}
:root[data-motion="off"] .note-post.is-posting{height:0}
:root[data-motion="off"] .note-post.is-posting .note-letter,
:root[data-motion="off"] .note-post.is-posting .note-envelope{animation:none;opacity:0}