/* ===========================================================================
   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. Every step is px/4, so --s5 is
     20px. It was missing while four rules used it, which made each of
     those declarations invalid and computed that padding to zero — the
     style-tip bubbles had their text hard against the border (29 Sep). */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --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}
/* An approved block sets its own paragraph spacing rather than depending on
   the wrapper it happens to be dropped into. It went without one on the
   Carnival destination pages for as long as they have existed. */
.approved p + p{margin-top:var(--s6)}
: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. */
/* Sized to the photograph, not the other way round. The band Tiah chose —
   feather tips down to her wrists — is 1440×944, so the section takes that
   ratio and the picture is never stretched to fill a shape it was not cut for.
   max-width stops at the band's own width: enlarging past the source is what
   made the homepage illustration soft, and there is no reason to repeat it. */
.scrub-stage{position:relative;width:100%;max-width:1440px;margin-inline:auto;
  aspect-ratio:1440/944;max-height:min(78vh,760px);
  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)}
/* The band already is the crop, so it sits whole in the frame. */
.scrub-stage .band-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;transform:none;display:block}
.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:1440/944;max-height:min(58vh,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:auto}
  .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%}
  /* Size only. Setting `top` here as well as `bottom` over-constrains the box,
     and the browser then drops `bottom` — which silently cancelled the
     clearance above the sticker and put the bulb back on her head. */
  .pin-bulb{width:10px;height:10px}
}
/* The wire, the clip and the card are placed from one set of numbers so they
   cannot drift apart. Read them together:

     --wire-top   where the wire starts, measured from the top of the row
     --clip-h     the clip's height
     --clip-grip  how far the clip reaches DOWN over the card's top edge

   The wire's SVG is exactly as tall as its viewBox, so one unit is one pixel
   and the curve it draws is the same curve --drop is computed from. A clip
   hangs with its top ON the wire; the card begins where the clip stops
   gripping. That is why the card's offset is (drop + wire-top + clip-h -
   grip): every term is a real distance, not a number that looked right. */
.pinboard{--wire-top:6px;--clip-h:22px;--clip-grip:8px}
/* Smaller clip on a phone, same relationship between the three numbers. This
   sits after the base rule on purpose: an override placed before it loses. */
@media(max-width:620px){
  .pinboard{--wire-top:5px;--clip-h:19px;--clip-grip:7px}
  .pin-clip{width:15px}
}
.pin-wire{position:absolute;left:0;right:0;top:var(--wire-top);
  width:100%;height:var(--wire-h,26px);
  color:rgba(18,33,43,.32);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 + var(--wire-top) + var(--clip-h) - var(--clip-grip));
  /* Rotate about the hang point, not the middle. With the default centre
     origin the whole tile pivots, which walks the clip sideways off the wire
     by up to 4.5px — visible as a bulb that misses its own light. Pinned at
     the top, the tile swings under a clip that stays put, which is what a
     photograph on a line actually does. */
  transform-origin:50% 0;
  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. */
/* Hangs from the wire and grips the card. `top` alone — setting `bottom` as
   well over-constrains the box and the browser drops one of them, which is
   how the clearance silently disappeared once before. */
.pin-clip{position:absolute;left:50%;transform:translateX(-50%);
  top:calc(-1 * (var(--clip-h) - var(--clip-grip)));
  width:17px;height:var(--clip-h);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:start center;width:100%;aspect-ratio:1;
  /* Headroom. The clip hangs above with daylight between, and the artwork
     starts below the tile's top edge, so a bulb never sits on her head and
     nothing is flush against the wire — her note, 26 Sep. */
  padding-top:13%;box-sizing:border-box;
  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}
  /* Side by side the board's tilt reads as tape on a wall. Stacked under the
     intro card on a phone it reads as a mistake: the rotation widens its
     bounding box by 14px and walks the bottom row ~9px right of the top one.
     Square it here and let the tape corners carry the scrapbook. */
  .board{padding:var(--s8) var(--s4) var(--s6);width:100%;transform:none}
  .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:5px;
  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:9px}
.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 --------------------
   The clipping Tiah reported was in the artwork, not in these rules: the
   extracted mark was 402x372 with the ring running off three edges and the
   cream baked in. It has been re-cut from the submitted logo board with the
   whole circumference and a transparent background, squared on its own centre
   with a little breathing room, so every size renders the complete circle.

   These rules keep it that way: a square box, contain rather than cover, and
   nothing on the way up that clips. */
header.site .wrap{min-height:auto;padding-block:var(--s4)}
.brand img{width:40px;height:40px;object-fit:contain;display:block;flex:0 0 auto}
/* The footer mark is the larger one. Two classes, so it beats the single-class
   rule above on specificity rather than on source order \u2014 which is what had
   been quietly holding it at 40px. */
.brand.foot-brand img{width:64px;height:64px}
@media(max-width:560px){
  .brand img{width:38px;height:38px}
  .brand.foot-brand img{width:56px;height:56px}
}
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%;align-self:start;
  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}

/* ===========================================================================
   26 SEPTEMBER CHANGES
   ======================================================================== */

/* --- Polaroid treatment --------------------------------------------------
   Her scrapbook already reads as things pinned to a board, so a photograph
   with a printed border belongs to it. The border is uneven on purpose — a
   real Polaroid has a deeper lip at the bottom — and the whole thing is one
   white plate so an image can never look like it is floating loose.
   Applied to the stacked decks and the lookbook rows; not to full-bleed
   bands, where a frame would fight the edge. */
.polaroid{background:#FFFDF8;padding:10px 10px 34px;border-radius:3px;
  box-shadow:0 1px 2px rgba(18,33,43,.16), 0 12px 26px rgba(18,33,43,.16);
  transition:transform 260ms cubic-bezier(.22,.68,.24,1),box-shadow 260ms ease}
.polaroid > .slot,.polaroid > .photo,.polaroid > .mcard{border-radius:1px}
.polaroid:hover{box-shadow:0 3px 6px rgba(18,33,43,.2), 0 20px 38px rgba(18,33,43,.22)}
.deck-card .polaroid,.look-rows .polaroid{width:100%}
@media(prefers-reduced-motion:reduce){.polaroid{transition:none}}

/* --- Made You Look: rows, not a flip ------------------------------------
   Her note, 26 Sep. A deck asks you to scroll through one at a time; a
   lookbook is for scanning, so the looks sit side by side and wrap. */
.look-rows{display:grid;gap:var(--s8);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
@media(max-width:620px){
  .look-rows{grid-template-columns:1fr;gap:var(--s6)}
}

/* --- read on -------------------------------------------------------------
   What follows an entry: the next one, and one more suggestion. */
.read-on{display:grid;gap:var(--s6);margin-top:var(--s12);
  grid-template-columns:1fr}
@media(min-width:760px){.read-on{grid-template-columns:1.4fr 1fr;align-items:start}}
.read-on a{text-decoration:none;color:inherit;display:flex;flex-direction:column;
  gap:var(--s2);transition:transform 260ms cubic-bezier(.22,.68,.24,1)}
.read-on a:hover{transform:translateY(-3px)}
.read-on .other-piece{background:var(--surface-tint)}
@media(prefers-reduced-motion:reduce){.read-on a{transition:none}
  .read-on a:hover{transform:none}}

/* --- what subscribing actually gets you --------------------------------- */
.sub-expect{margin:0;max-width:52ch;
  font-size:15px;line-height:24px;color:rgba(255,249,242,.78)}

/* --- the Carnival reference --------------------------------------------- */
.ref-card{display:grid;gap:var(--s6);align-items:start;
  grid-template-columns:1fr;margin-block:var(--s8);
  padding:var(--s6);background:var(--surface-tint);border-radius:var(--r-card)}
@media(min-width:680px){.ref-card{grid-template-columns:180px 1fr}}
.ref-portrait{width:100%;max-width:180px}
.ref-portrait img{width:100%;height:auto;display:block;border-radius:var(--r-card)}

/* --- homepage hero, larger on desktop ------------------------------------
   Her 26 Sep note: the illustration should take up more space on a desktop.
   The stage runs to the full viewport width above 1100px instead of sitting
   inside the page measure, and the copy plate stops competing for width so
   the picture is what fills the screen.

   On the resolution: the source she supplied is 1024x572. Everything above
   that is interpolation, so the exports get bigger but not sharper. Only a
   larger original fixes it — see the note in docs. */
@media(min-width:1100px){
  .hero-stage{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw)}
  .hero-grid{padding-inline:clamp(32px,6vw,110px)}
  .hero-inner{max-width:30rem}
}
@media(min-width:1500px){
  .hero-grid{padding-inline:clamp(48px,8vw,180px)}
}

/* --- consistent centring -------------------------------------------------
   Her 26 Sep note asked for headings and main content to line up the same way
   everywhere. Room titles were already centred; these are the sections that
   still read as left-aligned blocks floating in a centred page. */
.room > .sec-head,
.room > section > .sec-head{align-items:center;text-align:center}
.room > .sec-head .d-l,
.room > .sec-head .h1,
.room > .sec-head .h2,
.room > section > .sec-head .d-l,
.room > section > .sec-head .h1,
.room > section > .sec-head .h2{margin-inline:auto}
/* A spread head has two ends on purpose (a title and a control), so it keeps
   its own alignment rather than being forced to the middle. */
.sec-head.spread{align-items:flex-start;text-align:left}
/* Reading columns stay centred as a block, ragged-left inside — centred body
   text is harder to read, and she asked for layout alignment, not prose. */
.reading,.room-lede{margin-inline:auto}

/* --- the content map -----------------------------------------------------
   Which page, what it draws on, what it still needs. Counted from the live
   content every time it opens, so it cannot drift from the site. */
.map-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.map{width:100%;border-collapse:collapse;font-size:14px;min-width:680px}
.map th,.map td{padding:12px 10px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--hairline)}
.map thead th{font:600 10px/1.4 var(--f-text);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-muted);white-space:nowrap}
.map tbody th{font-weight:600;white-space:nowrap}
.map .num{text-align:right;font-family:var(--f-record),monospace;
  font-variant-numeric:tabular-nums}
.map .num.warn{color:var(--hot-pink);font-weight:600}
.map-route{display:block;margin-top:3px;font-weight:400;text-decoration:none;
  color:var(--ink-muted)}
.map-route:hover{color:var(--ocean-blue);text-decoration:underline}
.map-needs{font-size:13px;line-height:20px;color:var(--ink-muted)}
.chip.ok{background:var(--sea-glass)}
/* Never colour alone: the bad chip carries a mark as well (NFR-12). */
.chip.bad{background:var(--blush-light);font-weight:600}
.chip.bad::before{content:"\00d7 ";font-weight:700}
@media(max-width:620px){
  .map{font-size:13px}
  .map th,.map td{padding:10px 8px}
}
.map-orphan{border-left:4px solid var(--hot-pink)}

/* A slideshow's caption sat on top of the previous-frame control. It moves
   above the control bar, where it can be read and the button can be hit. */
.show-slide .photo figcaption,
.show-slide figcaption.rec{left:10px;right:10px;bottom:52px;
  background:rgba(18,33,43,.62);color:var(--cream);
  padding:4px 9px;border-radius:5px;width:max-content;max-width:calc(100% - 20px)}

/* A photographer's credit under a set of their pictures, and an honest note
   where the licence has not been confirmed yet. */
.media-credit{margin-top:var(--s3);text-align:center;color:var(--ink-muted)}
.media-credit .pending{color:var(--hot-pink);font-weight:600}

/* --- sources, collapsed --------------------------------------------------
   Her note, 27 Sep. A <details> so it opens from the keyboard and is
   announced as a disclosure without us writing any ARIA, and so it still
   works with no JavaScript — which matters most for the part of the page
   that backs up what it claims. */
.sources{border:1px solid var(--hairline);border-radius:var(--r-card);
  background:var(--surface-tint);overflow:hidden}
.sources > summary{list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:var(--s3);
  padding:14px var(--s6);
  font:600 11px/1.4 var(--f-text);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);transition:background 200ms ease}
.sources > summary::-webkit-details-marker{display:none}
.sources > summary:hover{background:var(--sand)}
.sources > summary:focus-visible{outline:3px solid var(--ocean-blue);outline-offset:-3px}
/* The chevron is the state, and the summary's own text says so to a screen
   reader — colour is doing none of the work here (NFR-12). */
.sources > summary::before{content:"";width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid var(--ink-muted);border-bottom:2px solid var(--ink-muted);
  transform:rotate(-45deg);margin-left:2px;
  transition:transform 220ms cubic-bezier(.22,.68,.24,1)}
.sources[open] > summary::before{transform:rotate(45deg)}
.sources-label{flex:1 1 auto}
.sources-count{font-size:11px;color:var(--ink-muted)}
.sources > .stack{padding:0 var(--s6) var(--s6)}
@media(prefers-reduced-motion:reduce){
  .sources > summary,.sources > summary::before{transition:none}
}

/* --- a destination, by year ----------------------------------------------
   Her note, 27 Sep: the pill under the name paginates. These are real links,
   so a year can be sent to someone, opened in a new tab and found again —
   which a scripted tab cannot do. */
.year-pills{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;
  margin-top:var(--s3)}
.year-chip{text-decoration:none;font-family:var(--f-record),monospace;
  letter-spacing:.06em;cursor:pointer;
  flex:0 0 auto;
  transition:background 200ms ease,color 200ms ease}
.year-chip:hover{background:var(--sand);color:var(--ink)}
.year-chip:focus-visible{outline:3px solid var(--ocean-blue);outline-offset:2px}
/* Weight and fill mark the year on show, and aria-current says it for anyone
   seeing neither (NFR-12). */
.year-chip.is-on{background:var(--ink);color:var(--cream);font-weight:700}
.place-line{display:inline-block;letter-spacing:.1em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.year-chip{transition:none}}

/* `.room-title .chip` gives every chip auto side margins so a lone one
   centres. That is two classes, so it beat a bare `.year-chip` and pushed the
   pills to opposite ends of the row however they were written. Matched here
   rather than fought with !important. */
.year-pills .year-chip{margin-inline:0}

/* A year that has not happened yet. Not a link, marked by a word as well as
   by weight, so it reads as "coming" rather than as a control that ignores
   you (NFR-12). */
.year-chip.is-soon{opacity:.62;cursor:default;border:1px dashed var(--hairline);
  background:transparent}
.year-chip.is-soon .soon{font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.year-empty{text-align:center;color:var(--ink-muted);margin-block:var(--s8)}

/* --- a look that links ---------------------------------------------------
   The whole card is the link to where the piece came from. A card with no
   link stays a plain card rather than an anchor that goes nowhere. */
.look.is-linked{text-decoration:none;color:inherit;display:flex;
  flex-direction:column;cursor:pointer}
.look.is-linked:hover{box-shadow:0 3px 6px rgba(18,33,43,.2), 0 20px 38px rgba(18,33,43,.22)}
.look.is-linked:focus-visible{outline:3px solid var(--ocean-blue);outline-offset:3px}
.look-go{margin-top:auto;padding-top:var(--s2);color:var(--ink-muted)}
.look.is-linked:hover .look-go{color:var(--ocean-blue)}

/* --- Work With Me, in the footer -----------------------------------------
   The sticker that came off the top bar. It keeps the board's clip and light
   so it reads as the same object in a different place, but hangs straight —
   there is no wire down here for it to hang crooked from. */
.foot-sticker{width:132px;max-width:132px;flex:0 0 auto;margin-top:22px}
.foot-sticker .pin-sticker{padding-top:11%}
.foot-sticker .pin-label{font-size:12px}
@media(max-width:620px){.foot-sticker{width:118px;margin-inline:auto}}

/* --- what Tiah posts ----------------------------------------------------
   One lead card and a wrapping row beneath it. Both are the room's existing
   card, so a post looks like it was always part of the page.

   Nothing here has a fixed height and nothing counts its children, which is
   the whole requirement: two posts and two hundred use the same rules, and
   the only thing that changes is how many rows the flex wraps onto. */
.post-lead{display:block;padding:0;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform 260ms cubic-bezier(.22,.68,.24,1),box-shadow 260ms ease}
.post-lead:hover{transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(18,33,43,.12), 0 18px 38px rgba(18,33,43,.16)}
.post-lead:focus-visible,.post-row:focus-visible{outline:3px solid var(--ocean-blue);outline-offset:3px}
.post-lead .photo,.post-row .photo{border-radius:0;width:100%}
.post-body{padding:var(--s6)}
.post-lead h3{font-family:var(--f-display);font-size:clamp(24px,3.4vw,32px);font-weight:400;line-height:1.15}
.post-lead .go{font-size:13px;font-weight:600;color:var(--action)}

/* Most recent left to right, wrapping as she adds more. `flex` rather than a
   fixed column count because the last row of a wrapped flex list keeps the
   card width of the rows above it — a grid would stretch a lone final card
   across the full width and make her newest-but-one post look like a banner. */
.post-list{display:flex;flex-wrap:wrap;gap:var(--s6);margin-top:var(--s6)}
.post-row{flex:1 1 260px;max-width:100%;display:flex;flex-direction:column;
  padding:0;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform 260ms cubic-bezier(.22,.68,.24,1),box-shadow 260ms ease}
.post-row:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.post-row h4{font-family:var(--f-display);font-size:21px;font-weight:400;line-height:1.2}
.post-row .post-body{padding:var(--s4) var(--s6) var(--s6)}
.post-row p{color:var(--ink-muted)}
/* A long title must wrap rather than widen its card and push the row out of
   the page. Titles come from a phone keyboard, so one of them will be a URL. */
.post-lead h3,.post-row h4,.post-row p{overflow-wrap:anywhere}
@media(max-width:620px){
  /* On a phone the newest post is the first thing under the year, at full
     width, and the rest stack beneath it in the order she wrote them. */
  .post-list{gap:var(--s4)}
  .post-row{flex:1 1 100%}
}

/* --- the studio's posting form -------------------------------------------
   The room's own dark surface. Inputs inherit the site's form rules, so what
   is set here is only what has to change to read on twilight. */
.studio-post .field > label,.studio-post legend{color:var(--cream)}
.studio-post .rec{color:rgba(255,249,242,.62)}
.studio-post input[type="text"],.studio-post input[type="url"],
.studio-post textarea,.studio-post select{
  background:rgba(255,249,242,.06);border:1px solid rgba(255,249,242,.24);
  color:var(--cream);border-radius:var(--r3);padding:11px 13px;font:inherit;width:100%}
.studio-post textarea{resize:vertical;min-height:64px}
.studio-post select option,.studio-post select optgroup{background:var(--twilight);color:var(--cream)}
.studio-post input::placeholder,.studio-post textarea::placeholder{color:rgba(255,249,242,.38)}
.studio-post input[type="file"]{color:rgba(255,249,242,.82);font-size:13px}
.studio-post :is(input,textarea,select):focus-visible{
  outline:3px solid var(--blush);outline-offset:2px;border-color:var(--blush)}
/* The consent question reads as one decision, not two loose radios. */
.cd-who{border:1px solid rgba(255,249,242,.2);border-radius:var(--r3);padding:var(--s4);gap:var(--s2)}
.cd-who legend{padding-inline:6px;font-size:13px;font-weight:600}
.cd-radio{display:flex;align-items:center;gap:8px;color:var(--cream);font-size:14px;cursor:pointer}
.cd-radio input{width:auto;accent-color:var(--blush)}
.studio-post .ack,.studio-post .notice{color:var(--cream)}
.studio-post .ack a,.studio-post .notice a{color:var(--blush)}

/* --- style tips, as thoughts ---------------------------------------------
   Her tips are thought bubbles rather than text messages (29 Sep): a rounded
   body with two circles drifting away from it, the way one is drawn in a
   comic. A message bubble said these had been sent to someone; a thought
   bubble says they are hers, which is what they are.

   Her side is the left. The right is left free for tips visitors send in and
   she approves, so the thread reads as a conversation rather than as one
   voice with its newest line displaced.

   Colour is decoration and never the meaning (NFR-12) — every tip reads as
   text with the colour ignored, and nothing is encoded in which one she
   chose. Each bubble names its own foreground because the palette runs from
   sun-glow to ocean-blue and no single ink holds contrast across both. */
.tip-thread{display:flex;flex-direction:column;gap:var(--s6);max-width:min(560px,100%)}
.tip-bubble{position:relative;display:flex;flex-direction:column;gap:var(--s3);
  align-items:flex-start;
  background:var(--tip-bg,var(--surface-tint));color:var(--tip-ink,var(--ink));
  border:1px solid var(--tip-edge,var(--hairline));
  border-radius:26px;padding:var(--s5) var(--s6);
  text-decoration:none;align-self:flex-start;width:88%;margin-bottom:22px;
  transition:transform 220ms cubic-bezier(.22,.68,.24,1),box-shadow 220ms ease}
/* The trail. Decoration, and invisible to assistive technology: two circles
   under a paragraph are not something worth announcing. */
.tip-bubble::before,.tip-bubble::after{content:"";position:absolute;
  border-radius:50%;background:var(--tip-bg,var(--surface-tint));
  border:1px solid var(--tip-edge,var(--hairline));pointer-events:none}
.tip-bubble::before{width:15px;height:15px;left:28px;bottom:-9px}
.tip-bubble::after {width:8px;height:8px;left:16px;bottom:-21px}
/* The newest reads first and reads larger. It stays on her side. */
.tip-bubble.is-lead{width:100%}
.tip-bubble.is-linked:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.tip-bubble.is-linked:focus-visible{outline:3px solid var(--ocean-blue);outline-offset:3px}
.tip-title{font-family:var(--f-display);font-size:21px;font-weight:400;line-height:1.2}
.tip-bubble.is-lead .tip-title{font-size:clamp(22px,3vw,27px)}
.tip-note,.tip-more{font-size:15px;line-height:23px}
.tip-more{white-space:pre-line;opacity:.88}
.tip-shot{display:block;width:100%;border-radius:14px;overflow:hidden}
.tip-shot .photo{border-radius:0;width:100%}
.tip-held{opacity:.8}
.tip-tags{display:flex;flex-wrap:wrap;gap:6px}
.tip-go{font-weight:600}
/* Long words and pasted links wrap rather than widening the bubble. */
.tip-title,.tip-note,.tip-more{overflow-wrap:anywhere}

/* Her palette, and the ink that stays legible on each one.

   These are measured, not chosen by eye. Cream on turquoise looked right and
   is 2.31:1 — WCAG 2.2 AA wants 4.5:1 for body text, so it was a failure that
   read as a design decision. Against the page's own ink the same bubble is
   7.41:1. Coral and ocean blue were wrong the same way.

   Only hot pink genuinely wants cream: 4.68:1 against 3.66:1 for ink. Every
   other bubble in her palette is darker text on her colour. The worst case
   here is now 4.68:1 and every one passes AA.

   The ratio is what decides this. If a brand colour changes, re-measure — do
   not assume a saturated colour wants light text. */
.tip-bubble.c-sun-glow    {--tip-bg:var(--sun-glow);     --tip-ink:var(--ink)}   /* 10.94:1 */
.tip-bubble.c-blush       {--tip-bg:var(--blush);        --tip-ink:var(--ink)}   /* 10.64:1 */
.tip-bubble.c-sea-glass   {--tip-bg:var(--sea-glass);    --tip-ink:var(--ink)}   /*  9.24:1 */
.tip-bubble.c-tangerine   {--tip-bg:var(--tangerine);    --tip-ink:var(--ink)}   /*  7.63:1 */
.tip-bubble.c-turquoise   {--tip-bg:var(--turquoise);    --tip-ink:var(--ink)}   /*  7.41:1 */
.tip-bubble.c-sunset-coral{--tip-bg:var(--sunset-coral); --tip-ink:var(--ink)}   /*  5.83:1 */
.tip-bubble.c-ocean-blue  {--tip-bg:var(--ocean-blue);   --tip-ink:var(--ink)}   /*  5.02:1 */
.tip-bubble.c-hot-pink    {--tip-bg:var(--hot-pink);     --tip-ink:var(--cream); /*  4.68:1 */
                           --tip-tint:rgba(255,249,242,.24)}
.tip-bubble[class*="c-"]{--tip-edge:transparent}
.tip-bubble[class*="c-"] .chip{background:var(--tip-tint,rgba(23,23,23,.12));
  color:inherit;border-color:transparent}

/* A preview on the T-Time note, where she attached one. */
.tt-preview{display:block;border-radius:var(--r3);overflow:hidden;margin-bottom:var(--s4)}
.tt-preview .photo{border-radius:0;width:100%}

/* A phone is where she and most of her visitors read this, so the two sides
   have to survive here rather than collapse to one column. The bubbles
   widen instead; 92% still leaves the offset visible. This rule used to
   stretch them, which was right when the newest one flipped to the other
   side and wrong now that the other side belongs to someone else. */
@media(max-width:620px){
  .tip-bubble{width:92%}
}

/* Her colour picker. Swatch plus name, never swatch alone — the colour is the
   thing being chosen, so the name has to carry it for anyone who cannot see
   the difference (NFR-12). */
.cd-swatches{display:flex;flex-wrap:wrap;gap:var(--s3)}
.cd-swatch{display:flex;align-items:center;gap:7px;cursor:pointer;
  font-size:13px;color:var(--cream);padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,249,242,.2)}
.cd-swatch input{width:auto;accent-color:var(--blush)}
.cd-swatch:has(input:checked){border-color:var(--blush);background:rgba(247,184,179,.14)}
.cd-swatch:has(input:focus-visible){outline:3px solid var(--blush);outline-offset:2px}
.cd-chip{width:16px;height:16px;border-radius:50%;display:inline-block;flex:0 0 auto;
  border:1px solid rgba(255,249,242,.35)}
.cd-chip.c-sun-glow{background:var(--sun-glow)}
.cd-chip.c-tangerine{background:var(--tangerine)}
.cd-chip.c-sunset-coral{background:var(--sunset-coral)}
.cd-chip.c-hot-pink{background:var(--hot-pink)}
.cd-chip.c-blush{background:var(--blush)}
.cd-chip.c-turquoise{background:var(--turquoise)}
.cd-chip.c-ocean-blue{background:var(--ocean-blue)}
.cd-chip.c-sea-glass{background:var(--sea-glass)}

/* Maya's own logo, as the signature under the reference she supports. Sized
   small and set at low weight: it is a credit, not a second brand competing
   with Tiah's on her own page. */
.ref-signature{display:block;width:104px;height:auto;margin-top:var(--s3);opacity:.9}
@media(max-width:620px){.ref-signature{width:88px}}

/* The three link folds on a destination page, stacked. */
.source-folds{display:flex;flex-direction:column;gap:var(--s4);
  margin-top:var(--s12);max-width:var(--measure)}
.source-folds .sources .link-row:last-child{border-bottom:0}

/* ---------------------------------------------------------------------------
   A POST'S OWN PAGE
   ---------------------------------------------------------------------------
   One centred column. The head is centred inside it and the writing is not:
   a title and a date are labels and sit in the middle of the measure, while
   a paragraph wants a straight left edge to return to on every line, and
   centring it costs the reader a beat per line — her note, 28 Sep.
   ------------------------------------------------------------------------ */
.post-page .post-head,
.post-page .post-copy,
.post-page .post-audio,
.post-page .post-actions,
.post-page .post-tags,
.post-page .post-held,
.post-page .playlist-face,
.post-page .post-folds{max-width:var(--measure);margin-inline:auto}
.post-head{text-align:center;margin-block:var(--s8) 0}
.post-head .lede{color:var(--ink-muted)}
.post-copy{margin-block:var(--s8);text-align:left}
.post-audio,.post-actions,.post-tags,.post-held{margin-top:var(--s6)}
.post-page .playlist-face{margin-block:var(--s8)}
.post-folds{margin-top:var(--s12)}

/* The playlist face, wherever it appears. */
.playlist-name{font-family:var(--f-display);font-size:21px;font-weight:400}
.playlist-note{margin-top:var(--s3)}

/* The gallery, folded like Sources. Her pictures are last on the page and
   closed; they used to open the post, which put a photograph between the
   title and the first sentence of the writing it belonged to (29 Sep). */
.gallery-body{padding:0 var(--s6) var(--s6)}
/* One frame fills the column at its own proportions rather than being cropped
   into a shape the page chose for it: a portrait stays a portrait. */
.mcard-fill{aspect-ratio:auto;cursor:zoom-in}
.mcard-fill img{height:auto;object-fit:contain}

/* Maya's line keeps the break she wrote it with. */
.ref-line{white-space:pre-line}

/* --- taking something down ----------------------------------------------
   The studio's own dark surface. The table is the whole point of the screen,
   so it is given room and the trash control is the only thing that looks
   pressable in a row. */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.studio-archive .rec{color:rgba(255,249,242,.62)}
.arc-table{width:100%;border-collapse:collapse;font-size:14px;color:var(--cream)}
.arc-table th{text-align:left;font:600 11px/1.4 var(--f-text);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,249,242,.62);
  padding:0 var(--s4) var(--s3) 0;border-bottom:1px solid rgba(255,249,242,.24)}
.arc-table td{padding:var(--s4) var(--s4) var(--s4) 0;vertical-align:top;
  border-bottom:1px solid rgba(255,249,242,.14)}
.arc-table tr:last-child td{border-bottom:0}
.arc-thumb{width:64px}
.arc-thumb img{width:56px;height:56px;object-fit:cover;border-radius:8px;display:block}
.arc-nothumb{display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:8px;color:rgba(255,249,242,.4);
  background:rgba(255,249,242,.08)}
.arc-title{min-width:14ch}
.arc-title b{display:block;font-family:var(--f-display);font-size:19px;font-weight:400;line-height:1.25}
.arc-title .rec{display:block;margin-top:2px}
.arc-blurb{color:rgba(255,249,242,.78);max-width:46ch;line-height:20px}
/* Titles and descriptions come off a phone keyboard, so one of them will be a
   URL with no spaces in it. */
.arc-title b,.arc-blurb{overflow-wrap:anywhere}
.arc-act{width:1%;white-space:nowrap;text-align:right}
.arc-trash{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;cursor:pointer;
  background:transparent;border:1px solid rgba(255,249,242,.24);
  color:var(--cream);transition:background var(--t),color var(--t),border-color var(--t)}
.arc-trash svg{width:20px;height:20px;display:block}
.arc-trash:hover:not(:disabled){background:var(--hot-pink);border-color:var(--hot-pink);color:var(--cream)}
.arc-trash:focus-visible{outline:3px solid var(--blush);outline-offset:2px}
/* Disabled because posts sit under it. The reason is printed beside the
   control as well as in its title, so it is never colour or state alone. */
.arc-trash:disabled{opacity:.34;cursor:not-allowed}
.arc-why{display:block;margin-top:6px;white-space:normal;max-width:18ch;text-align:right}
.arc-gone{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;padding:var(--s4) var(--s5);border-radius:var(--r3);
  background:rgba(255,249,242,.06);border:1px solid rgba(255,249,242,.16);color:var(--cream)}
.arc-gone b{font-family:var(--f-display);font-size:19px;font-weight:400}

@media(max-width:620px){
  /* The table becomes a stack of rows: a 4-column grid at 375px would put two
     words per line in the description and nothing would be readable. */
  .arc-table,.arc-table tbody,.arc-table tr,.arc-table td{display:block;width:auto}
  .arc-table thead{display:none}
  .arc-table tr{position:relative;padding:var(--s4) 0;border-bottom:1px solid rgba(255,249,242,.14)}
  .arc-table td{border:0;padding:0 56px 0 0}
  .arc-table .arc-thumb{padding-bottom:var(--s3)}
  .arc-table .arc-blurb{padding-top:var(--s2);max-width:none}
  .arc-act{position:absolute;top:var(--s4);right:0;width:auto;text-align:right}
  .arc-why{max-width:14ch}
}

/* The archive's own controls. "Delete for good" is the only thing in the
   studio that destroys anything, so it is outlined rather than filled: it
   should not be the most inviting thing on the row, and it should not sit
   under her thumb next to "Put it back". */
.arc-gone-thumb{width:48px;height:48px;object-fit:cover;border-radius:8px;
  display:block;flex:0 0 auto}
.arc-forever{background:transparent;border:1px solid rgba(255,249,242,.32);color:var(--cream)}
.arc-forever:hover:not(:disabled){background:var(--hot-pink);border-color:var(--hot-pink)}
.arc-forever:focus-visible{outline:3px solid var(--blush);outline-offset:2px}
.arc-empty-row{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid rgba(255,249,242,.16)}
.arc-empty-row .rec{flex:1 1 22ch;max-width:52ch}
@media(max-width:620px){
  .arc-gone{align-items:flex-start}
  .arc-gone .row{width:100%}
  .arc-gone .btn{flex:1 1 auto}
}

/* A built-in record that has been hidden stays in the table, greyed, so she
   can see it is off rather than wondering where it went. */
.arc-table tr.is-off .arc-title b,
.arc-table tr.is-off .arc-blurb{opacity:.5}
.arc-table tr.is-off .arc-thumb img{opacity:.35}
/* The numbers on This month. */
.studio-live .nums{display:flex;flex-wrap:wrap;gap:var(--s6)}
.studio-live .nums > div{display:flex;flex-direction:column;gap:2px;min-width:14ch}
.studio-live .nums b{font-family:var(--f-display);font-size:34px;font-weight:400;color:var(--cream);line-height:1}
.studio-live .nums span{font-size:12px;color:rgba(255,249,242,.62)}
.studio-live .rec{color:rgba(255,249,242,.62)}
.studio-live .notice{color:var(--cream)}

/* --- Contacts ------------------------------------------------------------
   What visitors sent her. The studio is dark, so these read as cards on it
   rather than as a table: a message is something you read, not something you
   scan a column of. One marked done steps back without leaving the list —
   she may still want to answer it, and hiding it would decide that for her. */
.contact-row{gap:var(--s4)}
.contact-row.is-done{opacity:.58}
.contact-row.is-done:hover,.contact-row.is-done:focus-within{opacity:1}
.contact-fields{display:grid;grid-template-columns:auto 1fr;gap:4px var(--s4);
  margin:0;font-size:14px}
.contact-fields dt{color:rgba(255,249,242,.62);font:600 11px/1.6 var(--f-text);
  letter-spacing:.06em;text-transform:uppercase;align-self:baseline}
.contact-fields dd{margin:0;color:var(--cream);overflow-wrap:anywhere}
.contact-fields a{color:var(--blush)}
/* Her visitor's own line breaks are kept: a styling brief arrives as several
   labelled lines and losing them makes it one long sentence. */
.contact-message{white-space:pre-line;color:var(--cream);font-size:15px;
  line-height:23px;overflow-wrap:anywhere;
  border-left:2px solid rgba(255,249,242,.22);padding-left:var(--s4);margin:0}
@media(max-width:620px){
  .contact-fields{grid-template-columns:1fr;gap:0 0}
  .contact-fields dd{margin-bottom:var(--s3)}
}