/* ————————————————————————————————————————————————————————————
   MEe · mee.is · "Quiet room" — 2026-10-16e
   One dark ground, warm ivory type, one restrained gold accent.
   Rewritten from the 2026-10-16d "Bedside Lamp" sheet (same class
   names, same JS hooks). What went, on purpose: the lamp glow and the
   drifting motes, the text and button shine sweeps, the gradient gold
   pill with its glow, the noise-textured "paper" cards, the card icon
   motifs, the tracked all-caps labels, the monospace spec lines, the
   peeking carousels, the heavy shadows.
   Why no light "paper" surfaces at all: on the owner's iPhone a
   dark-mode extension (Dark Reader / Noir class) turned the cream cards
   olive and erased the shop button's text, which was painted with
   -webkit-text-fill-color:transparent + background-clip:text. A page
   with no light islands and no clipped-text tricks has nothing for such
   an engine to invert. Do not bring either back.
   Italic means one thing here: the child's voice.
   2026-10-16g: the hero follows the visitor's clock (day/night pair),
   "Her room" is an edge-to-edge silent film, nothing waits for a script
   to become visible, type sizes are in rem so they follow the reader's
   font size.
   ———————————————————————————————————————————————————————————— */
:root{
  --plum:oklch(0.2553 0.0209 340.25);          /* #2A1F26, the ground (critical paint + theme-color depend on it) */
  --raised:oklch(0.2890 0.0220 340.25);        /* the ground, one step up: dialog panel */
  --cream:oklch(0.9038 0.0427 81.11);          /* #EEDDC0 warm ivory, all primary text */
  --muted:oklch(0.8551 0.0203 77.30);          /* #D7CEC1 body copy */
  --muted-dim:oklch(0.7754 0.0314 78.73);      /* #C1B4A0 captions, notes */
  --whisper:oklch(0.7781 0.0343 27.18);        /* #CCAFAB the child's voice */
  --amber:oklch(0.7507 0.1295 79.85);          /* #D9A441 the one accent */
  --lamp:oklch(0.8388 0.1213 81.55);           /* #F2C268 gold words in the child's lines */
  --ink-fine:oklch(0.7000 0.0280 75.00);       /* fine print (was #8A7D6F, 3.97:1, now >= 5:1) */
  --rose:oklch(0.8100 0.0750 30.00);           /* error line on the dark ground */
  --joy:oklch(0.7507 0.1295 79.85); --sad:oklch(0.6637 0.0555 252.15); --peace:oklch(0.7471 0.0448 145.11);
  --anger:oklch(0.6592 0.1077 42.86); --thought:oklch(0.6658 0.0698 302.43); --neutral:oklch(0.6793 0.0454 77.42);
  --rule:color-mix(in oklch, var(--cream) 16%, transparent);
  --rule-strong:color-mix(in oklch, var(--cream) 50%, transparent); /* input + outline-button edges: >= 3:1 on plum and on the dialog panel */
  --rule-gold:color-mix(in oklch, var(--amber) 60%, transparent);
  --plum-deep:oklch(0.2100 0.0190 340.25);     /* inside the hero frame before its picture arrives */
  --ease:cubic-bezier(.25,.6,.35,1);
  --gutter:clamp(20px, 4vw + 4px, 32px);
  --measure:1080px;
  --display:'Fraunces',Georgia,serif;
  --text:'Atkinson',system-ui,sans-serif;
  color-scheme:dark;
}
body{
  margin:0; background:var(--plum); color:var(--cream);
  font-family:var(--text); font-size:1.125rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
main{container:page / inline-size}
:root{text-wrap:pretty}

/* page to page (home, how we decide, privacy, terms): a plain crossfade,
   so moving between them never flashes; no movement, so no motion guard */
@view-transition{navigation:auto}

/* retired ambient layers (markup removed from the pages; kept hidden in
   case a cached page still carries them) */
.lampglow,.motes{display:none}

/* the colour of the day fills the room (mee.js sets the background) */
.tintlayer{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:0; transition:opacity 1.6s var(--ease), background 1.6s var(--ease);
}
.page-wrapper{position:relative; z-index:1}

.skip-link{
  position:absolute; inset-block-start:-100px; inset-inline-start:var(--gutter); z-index:10;
  background:var(--cream); color:var(--plum); font-family:var(--text); font-weight:600;
  padding:10px 16px; border-radius:2px; text-decoration:none; font-size:0.9375rem;
}
.skip-link:focus{inset-block-start:14px}

a{color:var(--cream); text-decoration-color:var(--rule-gold); text-underline-offset:.22em; text-decoration-thickness:1px}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:2px}
@media (hover:hover) and (pointer:fine){
  a:hover{text-decoration-color:var(--amber)}
}

/* ─ layout primitives ─ */
.wrap{max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); box-sizing:border-box}
.mee-sec,.quiet,.naming-sec,.page-hero,.hello-strip{
  --pt:clamp(calc(var(--mee-pt, 118px) * .78), calc(var(--mee-pt, 118px) * .55 + 3vw), var(--mee-pt, 118px));
}
.mee-sec{padding-block:var(--pt) var(--mee-pb,0px); container-type:inline-size}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* the editorial grid: on a wide page each section's label moves into a
   narrow margin column and everything else reads in the main column;
   pictures and lists that need the room span both */
@container page (width > 56rem){
  .mee-sec{display:grid; grid-template-columns:10rem minmax(0,1fr); column-gap:clamp(32px, 4vw, 56px); align-content:start}
  .mee-sec > *{grid-column:2}
  .mee-sec > .eyebrow{grid-column:1; grid-row:1; margin-block-start:.95em}
  .mee-sec > .rail,.mee-sec > .day,.mee-sec > .shop-grid,.mee-sec > .shop-cta-row,
  .mee-sec > .lineage{grid-column:1 / -1}
  /* legal pages: the 68ch article stays centred under its page title */
  .mee-sec > .legal{grid-column:1 / -1}
}

/* section label: sentence case, small, a short gold hairline before it */
.eyebrow{
  font-family:var(--text); font-size:0.9375rem; font-weight:500; letter-spacing:.01em;
  color:var(--muted-dim); margin:0 0 14px; line-height:1.4;
}
.eyebrow::before{
  content:""; display:inline-block; inline-size:20px; block-size:1px; background:var(--amber);
  vertical-align:middle; margin-inline-end:10px; translate:0 -.15em;
}
@container page (width > 56rem){
  .mee-sec > .eyebrow::before{display:block; margin-block-end:12px; translate:none}
}
.mee-h2{
  font-family:var(--display); font-weight:400; font-size:clamp(1.875rem, 1.2rem + 2.4vw, 2.875rem);
  line-height:1.12; margin:0 0 22px; text-wrap:balance; letter-spacing:-.012em; color:var(--cream);
}
.h2-alt{font-size:.6em; color:var(--muted-dim); letter-spacing:0; white-space:nowrap}
.lede{color:var(--muted); font-size:clamp(1.125rem, 1rem + .3vw, 1.25rem); max-width:58ch; margin:0; text-wrap:pretty}
.mee-p{max-width:64ch}

/* the child's voice: the one place italics live */
.whisper{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.3125rem, 1rem + 1.4vw, 1.6875rem); line-height:1.42; color:var(--whisper);
  max-width:30ch; margin:0 auto; text-wrap:balance;
}

.handrule{display:block; inline-size:56px; block-size:1px; background:var(--rule-gold); margin:64px auto 0}
.handrule svg{display:none}

/* the old shine spans stay in the markup; they are plain words now */
.text-shine,.paper-shine{color:inherit}

/* ─ buttons: flat, square-shouldered, confident type. No light fills:
   the primary is a full-strength ivory edge, the secondary a softer one.
   (A light fill is what a dark-mode extension turns khaki.) ─ */
.cta{
  display:inline-block; margin-block-start:36px;
  background:transparent; color:var(--cream); border:1px solid var(--cream);
  font-family:var(--text); font-weight:600; font-size:1.0625rem; letter-spacing:.01em; line-height:1.2;
  border-radius:2px; padding:16px 30px; text-decoration:none; cursor:pointer;
}
.cta-paper{
  display:inline-block; background:transparent; color:var(--cream);
  border:1px solid var(--rule-strong);
  font-family:var(--text); font-weight:600; font-size:1.0625rem; letter-spacing:.01em; line-height:1.2;
  border-radius:2px; padding:15px 26px; text-decoration:none;
}
@media (prefers-reduced-motion:no-preference){
  .cta,.cta-paper,.nbtn{transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease)}
}
@media (hover:hover) and (pointer:fine){
  .cta:hover,.nbtn:hover{border-color:var(--amber)}
  .cta-paper:hover{border-color:var(--amber)}
}
.cta:active,.nbtn:active{background:color-mix(in oklch, var(--cream) 10%, transparent)}
.cta-paper:active{background:color-mix(in oklch, var(--cream) 8%, transparent)}
.dot:active{opacity:.8}
.nskip:active,.nclose:active{opacity:.7}

/* ─ panels (the old .paper): a hairline edge on the ground, no fill ─ */
.paper{position:relative; color:var(--cream)}

/* ─ reveals: none since 2026-10-16g. Sections used to start at opacity 0
   and wait for mee.js; if the script failed to load, or a scroller never
   reported, everything below the hero stayed blank. The class .reveal
   stays in the markup and means nothing now. The one staged moment left
   is the spoken field below, and it is dimmed only by mee.js itself. ─ */
.stage{opacity:0; animation:arrive 1s var(--ease) forwards}
.s1{animation-delay:.05s}.s2{animation-delay:.2s}.s3{animation-delay:.38s}.s4{animation-delay:.52s}.s5{animation-delay:.66s}
@keyframes arrive{to{opacity:1}}

/* ─ the naming card (section + dialog share these) ─ */
.naming{
  max-width:600px; margin:0 auto; text-align:center; box-sizing:border-box;
  border:1px solid var(--rule); border-radius:3px;
  padding:clamp(36px, 5vw + 12px, 56px) clamp(22px, 5vw, 48px) clamp(30px, 4vw + 10px, 44px);
}
.naming p{margin-inline:auto}
.heart{width:52px; height:52px; margin:0 auto 24px; color:var(--amber); position:relative}
.heart svg{width:100%; height:100%; display:block}
.heart .outline{opacity:.85}
.heart .fill{position:absolute; inset:0; opacity:0; color:var(--anger); transition:opacity 1.2s var(--ease)}
.naming.named .heart .fill{opacity:1}
.naming.named .heart .outline{opacity:0}
.shimmer{display:none}
.naming .whisper{font-size:clamp(1.25rem, 1rem + 1vw, 1.5rem); max-width:26ch}
.nhelp{font-size:0.9688rem; color:var(--muted); max-width:40ch; margin:16px auto 0; line-height:1.55}
.named-line{font-family:var(--display); font-weight:400; font-size:clamp(1.3125rem, 1rem + 1vw, 1.5625rem); color:var(--cream); margin:6px 0 0}
.named-line b{font-weight:600}
.nform{margin-block-start:26px}
.nrow{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.ninput{
  font-family:var(--text); font-size:1.0625rem; color:var(--cream); caret-color:var(--amber);
  background:transparent; border:1px solid var(--rule-strong);
  border-radius:2px; padding:13px 16px; flex:1 1 10rem; min-inline-size:0; max-inline-size:300px; box-sizing:border-box;
}
.ninput::placeholder{color:var(--muted-dim); opacity:1}
.ninput:focus{border-color:var(--cream)}
.ninput:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
.nbtn{
  font-family:var(--text); font-weight:600; font-size:1.0625rem; cursor:pointer; line-height:1.2;
  background:transparent; color:var(--cream); border:1px solid var(--cream); border-radius:2px; padding:12px 26px;
}
.nbtn-icon{padding:11px 22px; display:inline-flex; align-items:center}
.nbtn-icon svg{width:20px; height:20px; display:block}
.nskip{
  display:inline-block; margin-block-start:18px; font-size:0.9375rem; color:var(--muted);
  background:none; border:none; cursor:pointer; font-family:var(--text);
  text-decoration:underline; text-decoration-color:var(--rule-gold); text-underline-offset:.22em;
}
.nprivacy{font-size:0.875rem; color:var(--muted-dim); margin:24px 0 0}
.ndone{font-family:var(--display); font-style:italic; font-size:1.3125rem; color:var(--whisper); margin-block-start:26px}
.nerror{font-size:0.9375rem; color:var(--rose); margin:14px auto 0; max-width:40ch}
.hidden{display:none}

/* the dialog shell */
dialog.hello{
  border:none; background:transparent; padding:24px; max-width:none; width:min(660px,94vw);
  box-sizing:border-box; /* content-box made it 94vw + 48px: on a 390px phone the card ran 24px off the right edge */
  color:var(--cream);
}
dialog.hello .naming{background:var(--raised); border-color:var(--rule-strong)}
dialog.hello::backdrop{background:color-mix(in oklch, oklch(0.1641 0.0130 338.79) 82%, transparent)}
@media (prefers-reduced-motion:no-preference){
  dialog.hello[open] .naming{animation:arrive .4s var(--ease)}
}
.nclose{
  display:inline-block; margin-block-start:18px; font-size:0.9062rem; color:var(--muted);
  background:none; border:none; cursor:pointer; font-family:var(--text);
  text-decoration:underline; text-decoration-color:var(--rule-strong); text-underline-offset:.22em;
}
/* the dialog is not inside a container, so it keeps one window rule */
@media (max-width:760px){
  dialog.hello{padding:10px; width:100%}
}
.naming-top{display:flex; align-items:center; justify-content:center; margin:0 auto 22px}
.naming-top .heart{margin:0; width:44px; height:44px}
/* short screens (iPhone SE with Safari's bars): keep the dialog card short */
@media (max-height:700px){
  .naming-top{margin-block-end:14px}
  .naming-top .heart{width:34px; height:34px}
}

/* ─ nav ─ */
.mee-nav{position:relative; z-index:2; container-type:inline-size}
.mee-nav .nav-in{
  max-width:var(--measure); margin:0 auto; padding:28px var(--gutter) 0; box-sizing:border-box;
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
}
.mee-nav .nav-mark{
  font-family:var(--display); font-weight:500; font-size:1.5rem; color:var(--amber);
  text-decoration:none; letter-spacing:-.01em;
}
.mee-nav .nav-links{display:flex; gap:28px; flex-wrap:nowrap}
.mee-nav .nav-links a{color:var(--muted); text-decoration:none; font-size:0.9375rem; white-space:nowrap; padding-block:4px}
.mee-nav .nav-links a[aria-current="page"]{color:var(--cream); border-block-end:1px solid var(--amber)}
@container (width < 40rem){
  .mee-nav .nav-links{gap:18px}
  .mee-nav .nav-links a{font-size:0.9062rem}
  .mee-nav .nav-hello{display:none}
}
@media (hover:hover) and (pointer:fine){
  .mee-nav .nav-links a:hover{color:var(--cream)}
}

/* ─ footer ─ */
.mee-footer{
  max-width:var(--measure); margin:clamp(120px, 115px + 1vw, 140px) auto 0; box-sizing:border-box;
  padding:40px var(--gutter) 48px; position:relative; z-index:1;
}
.mee-footer::before{content:""; display:block; block-size:1px; background:var(--rule); margin-block-end:40px}
.mee-footer .f-care{color:var(--muted); font-size:0.9688rem; max-width:56ch; margin:0 0 28px; line-height:1.6}
.mee-footer .f-care p{margin:0; color:var(--muted)}
.mee-footer .f-care p + p{margin-block-start:8px}
.mee-footer .f-links{display:flex; gap:10px 26px; flex-wrap:wrap; margin-block-end:22px}
.mee-footer .f-links a{color:var(--cream); font-size:0.9688rem; text-decoration:none}
.mee-footer .f-fine{color:var(--ink-fine); font-size:0.8438rem; margin:0}
@media (hover:hover) and (pointer:fine){
  .mee-footer .f-links a:hover{text-decoration:underline}
}

/* ————————————————————————————————————————————————————————————
   Section styles, in page order
   ———————————————————————————————————————————————————————————— */

/* ─ hero: the words, and a window into her room at night. Words left,
   window right once the hero is wide enough; stacked on a phone. ─ */
.mee-hero{
  --pt:clamp(calc(var(--mee-pt, 96px) * .5), calc(var(--mee-pt, 96px) * .3 + 3vw), var(--mee-pt, 96px));
  container:hero / inline-size;
  padding:var(--pt) var(--gutter) var(--mee-pb,30px);
  position:relative;
}
.hero-in{
  max-width:calc(var(--measure) - 2 * var(--gutter)); margin-inline:auto;
  display:grid; align-items:center; gap:clamp(48px, 6vw, 88px);
}
.mee-hero .mark{
  font-family:var(--display); font-weight:400; font-size:clamp(4.75rem, 3rem + 7vw, 8.25rem);
  line-height:.9; letter-spacing:-.03em; color:var(--amber); margin:0;
}
.mee-hero .mark-sub{
  font-family:var(--display); font-weight:400; font-size:clamp(1.25rem, 1rem + .8vw, 1.5rem);
  color:var(--muted); margin:14px 0 0;
}
.mee-hero .standfirst{
  font-family:var(--display); font-weight:400; font-size:clamp(1.5625rem, 1rem + 1.9vw, 2.25rem);
  line-height:1.24; letter-spacing:-.01em; text-wrap:balance; max-width:22ch;
  margin:clamp(34px, 5vw, 56px) 0 0; color:var(--cream);
  padding-block-start:clamp(28px, 4vw, 40px); border-block-start:1px solid var(--rule);
}
.mee-hero .hero-plain{color:var(--muted); font-size:clamp(1.125rem, 1rem + .3vw, 1.25rem); max-width:44ch; margin:22px 0 0; line-height:1.6; text-wrap:pretty}
.mee-hero .hero-note{font-size:0.9375rem; color:var(--muted-dim); margin:16px 0 0}

/* the window: a plain frame with a hairline mount around it. The frame
   holds its 4:5 shape before the picture arrives (the picture is written
   by an inline script), and stacks a second picture on the first when
   the hour turns from day to night while the page is open. */
.hero-window{
  margin:10px; inline-size:min(calc(100% - 20px), 420px); justify-self:center;
  display:grid; aspect-ratio:4/5; background:var(--plum-deep);
  outline:1px solid var(--rule-strong); outline-offset:9px; border-radius:1px;
}
.hero-window > picture{grid-area:1 / 1; display:block; transition:opacity 2.4s var(--ease)}
.hero-window img{display:block; inline-size:100%; block-size:100%; object-fit:cover; border-radius:1px}
.hero-window > picture.leaving{opacity:0}
@container hero (width > 52rem){
  .hero-in{grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr)}
  .hero-window{justify-self:end}
}

/* ─ the spoken field: the child's voice, phrase by phrase ─ */
.spoken-field{max-width:var(--measure); margin:0 auto; padding:var(--mee-pt,118px) var(--gutter) var(--mee-pb,0px); container-type:inline-size; box-sizing:border-box}
.spoken{
  font-family:var(--display); font-style:italic; font-weight:400;
  line-height:1.45; color:var(--whisper); max-width:26ch; margin:0;
}
.ph{transition:opacity 1s var(--ease)}
/* mee.js adds .armed only while the field is still below the screen, then
   .on as it arrives: the phrases light one by one along the delay ladder */
.spoken-field.armed:not(.on) :is(.ph, .spoken-note){opacity:0; transition:none}
.sp-1{font-size:clamp(1.5625rem, 1rem + 1.6vw, 2rem)}
.sp-2{font-size:clamp(1.25rem, 1rem + .7vw, 1.4375rem); margin-block-start:44px; margin-inline-start:12%}
.sp-3{font-size:clamp(1.1875rem, 1rem + .4vw, 1.3125rem); margin-block-start:40px; margin-inline-start:24%}
.sp-4{font-size:clamp(1.25rem, 1rem + .7vw, 1.4375rem); margin-block-start:44px; margin-inline-start:12%; max-width:24ch}
.sp-5{font-size:clamp(1.375rem, 1rem + 1vw, 1.625rem); margin-block-start:44px}
.spoken-note{
  color:var(--muted-dim); font-size:0.9375rem; margin:56px 0 0; max-width:40ch;
  transition:opacity 1.4s var(--ease) 9.5s;
}
.gold{color:var(--lamp)}
@container (width < 37rem){
  .sp-2,.sp-4{margin-inline-start:8%}
  .sp-3{margin-inline-start:16%}
}

/* ─ what this is / what this isn't: two ruled columns ─ */
.isnt{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap:28px clamp(28px, 4vw, 48px); margin-block-start:34px; container-type:inline-size;
}
.is-card{border-block-start:1px solid var(--rule-gold); padding-block-start:22px}
.is-card h3{font-family:var(--display); font-weight:500; font-size:1.3125rem; margin:0 0 10px; color:var(--cream)}
.is-card ul{margin:0; padding:0; list-style:none}
.is-card li{padding:11px 0; border-block-end:1px solid var(--rule); color:var(--cream); font-size:1.0625rem}
.is-card li:last-child{border-block-end:none}
.is-card li span{color:var(--muted-dim); font-size:0.9375rem; display:block; margin-block-start:2px}
.isnt-quote{font-family:var(--display); font-size:clamp(1.25rem, 1rem + .8vw, 1.5rem); line-height:1.45; color:var(--cream); margin:0}
.isnt-quote strong, .isnt-quote b{font-weight:600}
.isnt-quote small{
  display:block; font-family:var(--text); font-size:0.9688rem; color:var(--muted);
  margin-block-start:20px; line-height:1.6;
}
@container (width < 45rem){
  .isnt-quote strong{display:block}
}

/* ─ a day with MEe ─ */
.day{display:grid; grid-template-columns:minmax(220px,320px) 1fr; gap:clamp(32px, 5vw, 64px); margin-block-start:40px; align-items:start; container-type:inline-size}
.day-art{margin:0}
.day-art img{width:100%; height:auto; display:block; border-radius:1px}
.day-art figcaption,.arc-map figcaption{font-size:0.875rem; color:var(--muted-dim); margin-block-start:12px}
.beats{border-block-start:1px solid var(--rule-gold)}
.beat{display:grid; grid-template-columns:8.5rem 1fr; gap:20px; padding:15px 0; border-block-end:1px solid var(--rule)}
.beat:last-child{border-block-end:none}
.beat-l{font-family:var(--text); font-size:0.9375rem; font-weight:600; color:var(--muted-dim); padding-block-start:2px}
.beat p{margin:0; font-size:1.0625rem; line-height:1.55; max-width:52ch; color:var(--cream)}
.beat .w{font-family:var(--display); font-style:italic; color:var(--whisper); font-size:1.125rem}
.day-close{color:var(--muted); font-size:1.0312rem; margin:34px 0 0; max-width:none}
.day-close strong, .day-close b{color:var(--cream); font-weight:600; display:block; margin-block-start:4px}
@container (width < 40rem){
  .beat{grid-template-columns:1fr; gap:3px}
}
@container page (width < 48rem){
  .day{grid-template-columns:1fr}
  .day-art{max-width:320px}
}

/* ─ the journey arc ─ */
.arcline{
  display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; margin:36px 0 0;
  font-family:var(--display); font-size:clamp(0.9375rem, .7rem + 1vw, 1.25rem); color:var(--muted);
}
.arcline b{color:var(--cream); font-weight:400; white-space:nowrap}
.arcline svg{color:var(--amber); flex:none; width:18px; height:7px}
@container (width < 34.5rem){ .arcline{gap:6px; font-size:0.8125rem} .arcline svg{width:13px} }
.loops{margin:32px 0 0; padding:0; list-style:none; max-width:60ch}
.loops li{
  padding-block:14px; padding-inline:32px 0; position:relative; border-block-start:1px solid var(--rule);
  color:var(--cream); font-size:1.0625rem;
}
.loops li svg{position:absolute; inset-inline-start:0; inset-block-start:17px; width:16px; height:16px; color:var(--amber)}
.arc-top{
  display:grid; grid-template-columns:1fr minmax(220px,300px);
  grid-template-areas:"lede map" "rest map"; column-gap:clamp(32px, 5vw, 56px); align-items:start;
  container-type:inline-size;
}
.arc-lede{grid-area:lede}
.arc-rest{grid-area:rest}
.arc-map{grid-area:map; margin:0}
.arc-map img{width:100%; height:auto; display:block; border-radius:1px}
@container page (width < 48rem){
  .arc-top{grid-template-columns:1fr; grid-template-areas:"lede" "map" "rest"}
  .arc-map{max-width:300px; margin:30px 0 0}
}
/* the illustrations: a plain grid that reflows; never a sideways rail */
.rail{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap:28px 18px; margin:48px 0 0}
.rail figure{margin:0}
.rail img{width:100%; height:auto; display:block; border-radius:1px}
.rail figcaption{font-size:0.875rem; color:var(--muted-dim); margin-block-start:10px; line-height:1.4}
.lineage{font-size:0.9375rem; color:var(--muted-dim); margin-block-start:26px; max-width:none}
@container page (width < 30rem){
  .rail{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

/* ─ what colour is your day ─ */
.dots{display:flex; gap:16px; flex-wrap:wrap; margin-block-start:32px}
.dot{
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer; padding:0;
  box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--plum) 30%, transparent);
}
.dot[aria-pressed="true"]{outline:1px solid var(--cream); outline-offset:4px}
.dot:focus-visible{outline:2px solid var(--amber); outline-offset:4px; border-radius:50%}
@media (prefers-reduced-motion:no-preference){
  .dot{transition:opacity .2s var(--ease)}
}
@media (hover:hover) and (pointer:fine){
  .dot:hover{opacity:.85}
}
.colour-answer{margin-block-start:34px}
.colour .whisper{margin:0}

/* ─ why this exists ─ */
.why-quote{
  font-family:var(--display); font-weight:400; font-size:clamp(1.75rem, 1rem + 2.4vw, 2.75rem);
  line-height:1.16; letter-spacing:-.012em; max-width:24ch; margin:0; text-wrap:balance; color:var(--cream);
}
.why-body{color:var(--muted); margin:28px 0 0; max-width:56ch; text-wrap:pretty}
.why-close{font-family:var(--display); font-weight:500; color:var(--cream); font-size:1.3125rem; margin:30px 0 0; padding-inline-start:18px; border-inline-start:1px solid var(--amber)}

/* ─ the five filters: a numbered list, because it is one ─ */
.filters{list-style:none; margin:40px 0 0; padding:0; max-width:64ch; container-type:inline-size}
.filters li{
  display:grid; grid-template-columns:2.5rem 1fr; column-gap:18px;
  padding:24px 0; border-block-start:1px solid var(--rule);
}
.filters li:last-child{border-block-end:1px solid var(--rule)}
.fnum{font-family:var(--display); font-weight:400; font-size:1rem; line-height:1.9; color:var(--amber); font-variant-numeric:tabular-nums lining-nums}
.fq{font-family:var(--display); font-weight:400; font-size:clamp(1.25rem, 1rem + .5vw, 1.375rem); line-height:1.36; color:var(--cream); margin:0; max-width:42ch}
.ffail{grid-column:2; color:var(--muted); font-size:1.0312rem; margin:8px 0 0; max-width:46ch}
.filters-close{
  margin:36px 0 0; max-width:56ch; color:var(--muted);
  border-inline-start:1px solid var(--amber); padding-inline-start:20px;
}
.filters-close strong, .filters-close b{color:var(--cream); font-weight:400}
@container (width < 24rem){
  .filters li{grid-template-columns:1fr; row-gap:4px}
  .ffail{grid-column:1}
  .fnum{line-height:1.2}
}

/* ─ the shop preview: three ruled entries, read like a short catalogue.
   On a phone they simply stack. ─ */
.shop-doctrine{color:var(--muted); max-width:58ch; margin:0}
.shop-doctrine strong, .shop-doctrine b{color:var(--cream); font-weight:600}
.shop-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap:0 clamp(28px, 4vw, 48px); margin-block-start:44px}
/* each entry spans four rows of the shared grid (subgrid), so titles,
   sources, texts and spec lines line up across the three */
.product-card{display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0; align-content:start; border-block-start:1px solid var(--rule-gold); padding:22px 0 30px}
.product-card .motif{display:none}
.product-card h3{font-family:var(--display); font-weight:400; font-size:clamp(1.5rem, 1rem + .7vw, 1.6875rem); line-height:1.2; margin:0 0 6px; color:var(--cream)}
.product-card h3 a{color:var(--cream); text-decoration:none}
.product-card p{font-size:1.0312rem; line-height:1.55; margin:0 0 16px; color:var(--muted)}
.product-card .from{font-size:0.9375rem; color:var(--muted-dim); margin:0 0 14px}
.product-card .spec{
  font-size:0.9062rem; color:var(--muted-dim); font-variant-numeric:tabular-nums lining-nums;
  border-block-start:1px solid var(--rule); padding-block-start:12px; margin:0; align-self:start;
}
@media (hover:hover) and (pointer:fine){
  .product-card h3 a:hover{text-decoration:underline; text-decoration-color:var(--amber)}
}
.shop-cta-row{margin-block-start:14px}

/* ─ a quiet minute: Day 17's breath ring. Centred on purpose: it is the
   one moment on the page that asks you to stop. ─ */
.quiet{text-align:center; padding:var(--pt) var(--gutter) var(--mee-pb,96px)}
.quiet p{margin-inline:auto}
.quiet .eyebrow::before{display:block; margin:0 auto 12px; translate:none}
.ringwrap{position:relative; width:220px; height:220px; margin:40px auto 0}
.ring{position:absolute; inset:44px; border-radius:50%; border:1px solid var(--amber); opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .ring{animation:breathe 10s var(--ease) infinite}
}
@keyframes breathe{
  0%{transform:scale(.72); opacity:.45}
  40%{transform:scale(1); opacity:.95}
  58%{transform:scale(1); opacity:.95}
  100%{transform:scale(.72); opacity:.45}
}
.spark{position:absolute; width:4px; height:4px; border-radius:50%; background:var(--amber); opacity:0; transition:opacity 1.4s var(--ease)}
.spark.lit{opacity:.9}
.quiet-cap{font-family:var(--display); font-style:italic; color:var(--whisper); font-size:clamp(1.125rem, 1rem + .4vw, 1.25rem); margin-block-start:30px; max-width:34ch}
.quiet-sub{font-size:0.9375rem; color:var(--muted-dim); margin-block-start:10px; max-width:44ch}

/* ─ the naming, as the closing section ─ */
.naming-sec{padding-block:var(--pt) var(--mee-pb,0px)}

/* ————————————————————————————————————————————————————————————
   How-we-decide, legal and 404 pages
   ———————————————————————————————————————————————————————————— */
.page-hero{max-width:var(--measure); margin-inline:auto; box-sizing:border-box; padding:var(--pt) var(--gutter) var(--mee-pb,0px)}
body:has(.legal) .page-hero{max-width:calc(68ch + 2 * var(--gutter))}
.page-hero h1{
  font-family:var(--display); font-weight:400; font-size:clamp(2.125rem, 1.2rem + 3vw, 3.5rem);
  line-height:1.08; letter-spacing:-.015em; color:var(--cream); margin:0;
  text-wrap:balance; max-width:20ch;
}
.page-hero .lede-c{color:var(--muted); max-width:56ch; margin:26px 0 0; line-height:1.6; font-size:clamp(1.125rem, 1rem + .3vw, 1.25rem)}

.creed{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5625rem, 1rem + 1.8vw, 2.125rem); line-height:1.25; color:var(--cream);
  max-width:26ch; margin:0; text-wrap:balance;
}
.creed strong, .creed b{font-weight:600}
.creed-lede{margin-block-start:26px}
.plist{list-style:none; margin:36px 0 0; padding:0; max-width:64ch}
.plist li{padding:16px 0; border-block-start:1px solid var(--rule); color:var(--cream); font-size:1.0938rem}
.plist li:last-child{border-block-end:1px solid var(--rule)}
.plist li span{color:var(--muted); font-size:1rem; display:block; margin-block-start:4px; line-height:1.55}
.plist .never{color:var(--whisper); text-decoration:line-through; text-decoration-color:var(--whisper); text-decoration-thickness:1px; display:inline; font-size:inherit; margin:0}
.vow{border-inline-start:1px solid var(--amber); padding:4px 0 4px clamp(18px, 3vw, 26px); margin-block-start:44px; max-width:600px}
.vow p{margin:0}
.vow .vow-line{font-family:var(--display); font-size:clamp(1.25rem, 1rem + .9vw, 1.5625rem); line-height:1.4; color:var(--cream)}
.vow .vow-sub{color:var(--muted); font-size:1rem; margin-block-start:12px; line-height:1.6}

.hello-strip{max-width:var(--measure); margin-inline:auto; box-sizing:border-box; padding:var(--pt) var(--gutter) var(--mee-pb,0px)}
.hello-strip p{color:var(--muted); max-width:46ch; margin:0}
.hello-strip .hello-cta{margin-block-start:24px}

.notfound{max-width:var(--measure); margin:0 auto; box-sizing:border-box; padding:var(--mee-pt,120px) var(--gutter) var(--mee-pb,120px)}
.nf-motif{color:var(--amber); width:30px; margin:0 0 26px}
.nf-motif svg{width:100%; height:auto; display:block}
.nf-h{
  font-family:var(--display); font-weight:400; font-size:clamp(2.125rem, 1.2rem + 3vw, 3.5rem);
  line-height:1.08; letter-spacing:-.015em; color:var(--cream); margin:0; text-wrap:balance; max-width:22ch;
}
.nf-lede{color:var(--muted); font-size:1.125rem; max-width:50ch; margin-block-start:24px; line-height:1.6}
.nf-note{color:var(--muted-dim); font-size:0.9375rem; max-width:46ch; margin-block-start:16px; line-height:1.6}
.nf-ways{display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 28px}
.nf-alt{color:var(--muted); font-size:0.9688rem; text-decoration:underline; text-decoration-color:var(--rule-strong)}
.notfound .handrule{margin-inline:0}

/* ─ her room: a silent film of the 3D playground, edge to edge (the one
   place the page leaves its column), then the invitation under it. The
   section is not a .wrap, so the film can span the whole window; its
   heading and its footer are. On a narrow screen the film keeps a usable
   height and crops toward her and the window instead of shrinking. ─ */
.room-film{
  margin:clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem) 0 0; position:relative;
  display:grid;
}
.room-film > *{grid-area:1 / 1}
.room-film > picture{display:block}
.film{
  display:block; inline-size:100%; block-size:clamp(20rem, 56.25vw, 86svh);
  object-fit:cover; object-position:60% 50%;
  /* the film's edges settle into the ground instead of cutting it */
  mask-image:linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
}
/* the moving film lies over its own first frame; it shows once it plays */
video.film{opacity:0; transition:opacity .6s var(--ease)}
video.film.playing{opacity:1}
.film-toggle{
  place-self:end end; position:relative; z-index:1; /* above the masked film's own layer */
  margin-inline-end:max(var(--gutter), calc((100% - var(--measure)) / 2 + var(--gutter)));
  margin-block-end:clamp(1.25rem, .75rem + 2vw, 2.5rem);
  inline-size:2.75rem; block-size:2.75rem; display:grid; place-items:center; padding:0; cursor:pointer;
  color:var(--cream); background:color-mix(in oklch, var(--plum) 82%, transparent);
  border:1px solid color-mix(in oklch, var(--cream) 55%, transparent); border-radius:50%;
}
.film-toggle[hidden]{display:none}
.film-toggle svg{inline-size:1rem; block-size:1rem; fill:currentColor; display:block}
.film-toggle .i-play,.film-toggle.paused .i-pause{display:none}
.film-toggle.paused .i-play{display:block}
.film-toggle:active{background:var(--plum)}
@media (hover:hover) and (pointer:fine){
  .film-toggle:hover{border-color:var(--amber)}
}
@media (prefers-reduced-motion:no-preference){
  .film-toggle{transition:border-color .2s var(--ease), background-color .2s var(--ease)}
}
.room-foot{margin-block-start:clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem)}
@container page (width > 56rem){
  /* line the invitation up with the main column of the sections around it */
  .room-foot{padding-inline-start:calc(var(--gutter) + 10rem + clamp(32px, 4vw, 56px))}
}
.room-go{margin:0; font-family:var(--display); font-weight:400; font-size:clamp(1.4375rem, 1rem + 1vw, 1.75rem); line-height:1.2}
.room-go a{color:var(--cream); text-decoration:underline; text-decoration-color:var(--amber); text-underline-offset:.24em; text-decoration-thickness:1px}
.room-go a:active{color:var(--muted)}
.room-note{font-size:0.9375rem; color:var(--muted-dim); margin:10px 0 0}

/* Reduced motion: nothing moves. The fades that only reveal content
   are dropped too, so everything is simply there. The breath ring
   breathes by light alone. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage{animation:none; opacity:1}
  .ph,.spoken-note{opacity:1; transition:none}
  .ring{animation:breathe-light 10s var(--ease) infinite}
  .heart .fill{transition:none}
}
@keyframes breathe-light{0%,100%{opacity:.4}40%,58%{opacity:.95}}

/* forced colours: give the hairlines and buttons real borders */
@media (forced-colors:active){
  .naming,.ninput,.cta,.cta-paper,.nbtn,.dot,.ring,.vow{border:1px solid CanvasText}
}

/* the waitlist honeypot: off-screen, never focusable, never read aloud */
.hp{position:absolute; inset-inline-start:-9999px; inset-block-start:auto; width:1px; height:1px; overflow:hidden}