/* ————————————————————————————————————————————————————————————
   MEe · mee.is landing · "Bedside Lamp"
   One dark world by design: a child's room at dusk, one lamp.
   Ported from the mee.space theme (mee-foundation.css + the
   homepage sections' stylesheet blocks). The tuned values in
   here are decisions from ~15 iteration rounds, not defaults.
   ———————————————————————————————————————————————————————————— */
:root{
  --plum:#2A1F26; --glow:#3D2A2E;
  --paper:#EAD3A4; --paper-lit:#F2DDB0;
  --amber:#D9A441; --lamp:#F2C268;
  --cream:#EEDDC0; --cocoa:#3D1F14;
  --muted:#D7CEC1; --muted-dim:#C1B4A0;
  --whisper:#CCAFAB; --whisper-paper:#7D524C;
  --sage:#8B9970;
  --joy:#D9A441; --sad:#7B96B5; --peace:#9CB59C;
  --anger:#C97B5B; --thought:#9C8AB8; --neutral:#A89579;
  --rule:rgba(238,221,192,.14);
  --mee-mono:ui-monospace,'Cascadia Code',Consolas,monospace;
  --mee-shadow:0 8px 24px rgba(0,0,0,.35);
  --ease:cubic-bezier(.25,.6,.35,1);
  color-scheme:dark;
}
body{
  margin:0; background:var(--plum); color:var(--cream);
  font-family:'Atkinson',system-ui,sans-serif; font-size:18px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* the lamp: one light source, breathing very slowly like a flame */
.lampglow{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(115% 85% at 66% -8%, var(--glow) 0%, var(--plum) 62%);
}
.lampglow::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(58% 42% at 66% -4%, rgba(242,194,104,.11), transparent 70%);
  animation:lampflicker 11s ease-in-out infinite;
}
@keyframes lampflicker{
  0%,100%{opacity:.35} 18%{opacity:.7} 34%{opacity:.5} 52%{opacity:.85} 71%{opacity:.55} 86%{opacity:.75}
}

/* the room's colour, shifted by "what colour is your day" */
.tintlayer{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:0; transition:opacity 1.6s var(--ease), background 1.6s var(--ease);
}

/* drifting lamplight motes: few, slow, faint; footer masks them */
.motes{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0}
.motes i{
  position:absolute; bottom:-4%; width:3px; height:3px; border-radius:50%;
  background:var(--lamp); opacity:0;
  animation:drift linear infinite;
  box-shadow:0 0 6px rgba(242,194,104,.55);
}
@keyframes drift{
  0%{transform:translateY(0) translateX(0); opacity:0}
  12%{opacity:.4}
  55%{opacity:.28}
  100%{transform:translateY(-78vh) translateX(3vw); opacity:0}
}
.motes i:nth-child(1){left:14%; animation-duration:19s; animation-delay:0s}
.motes i:nth-child(2){left:28%; animation-duration:24s; animation-delay:6s; width:2px; height:2px}
.motes i:nth-child(3){left:44%; animation-duration:21s; animation-delay:11s}
.motes i:nth-child(4){left:60%; animation-duration:26s; animation-delay:3s; width:2px; height:2px}
.motes i:nth-child(5){left:72%; animation-duration:18s; animation-delay:9s}
.motes i:nth-child(6){left:84%; animation-duration:23s; animation-delay:14s; width:2px; height:2px}
.motes i:nth-child(7){left:36%; animation-duration:28s; animation-delay:17s; width:2px; height:2px}
.motes i:nth-child(8){left:66%; animation-duration:22s; animation-delay:20s}
.motes i:nth-child(9){left:8%; animation-duration:27s; animation-delay:4s; width:2px; height:2px}
.motes i:nth-child(10){left:52%; animation-duration:20s; animation-delay:13s}
.motes i:nth-child(11){left:92%; animation-duration:25s; animation-delay:8s; width:2px; height:2px}
.motes i:nth-child(12){left:22%; animation-duration:30s; animation-delay:24s}

/* page content sits above the fixed ambient layers */
.page-wrapper{position:relative; z-index:1}

/* keyboard users can skip straight to the content (the theme's
   skip-to-content-link, restyled with brand primitives) */
.skip-link{
  position:absolute; top:-100px; left:26px; z-index:10;
  background:var(--cocoa); color:var(--paper-lit); font-family:'Fraunces',serif;
  padding:10px 18px; border-radius:999px; text-decoration:none; font-size:15px;
}
.skip-link:focus{top:14px}

a{color:var(--lamp)}
a:focus-visible,button:focus-visible{outline:2px solid var(--lamp); outline-offset:3px; border-radius:4px}

/* ─ shared layout primitives ─ */
.wrap{max-width:1000px; margin:0 auto; padding-left:26px; padding-right:26px}
/* section spacing: sections set --mee-pt/--mee-pb inline;
   mobile keeps the prototype's proportional reduction (118→104) */
.mee-sec{padding-top:var(--mee-pt,118px); padding-bottom:var(--mee-pb,0px)}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

.eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber);
  font-weight:700; margin:0 0 12px;
}
.mee-h2{
  font-family:'Fraunces',serif; font-weight:600; font-size:clamp(28px,4.6vw,38px);
  line-height:1.16; margin:0 0 16px; text-wrap:balance; letter-spacing:-.3px; color:var(--cream);
}
.h2-alt{
  font-style:italic; font-weight:500; color:var(--lamp); letter-spacing:0;
  font-size:.72em;
}
.lede{color:var(--muted); font-size:18px; max-width:60ch; margin:0}
.mee-p{max-width:64ch}

.whisper{
  font-family:'Fraunces',serif; font-style:italic; font-weight:450;
  font-size:clamp(21px,3.4vw,27px); line-height:1.45; color:var(--whisper);
  max-width:30ch; margin:0 auto; text-wrap:balance;
}

/* hand-drawn rules: the brand's own SVGs, tinted via currentColor */
.handrule{color:var(--muted-dim); opacity:.55; display:flex; justify-content:center; margin:64px auto 0; max-width:210px}
.handrule svg{width:100%; height:14px}

/* ─ text shine: a soft highlight sweeps through, then repeats.
   Deliberately no reduced-motion guard; that guard is what kept it
   invisible on machines with Windows animation effects off.
   Do not let a cleanup "fix" it back. ─ */
.shine-armed .text-shine{
  background:linear-gradient(100deg,
    var(--cream) 38%,
    var(--lamp) 50%,
    var(--cream) 62%);
  background-size:300% 100%;
  background-position:130% 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:text-shine-sweep 15s ease-in-out 0s infinite;
}
@keyframes text-shine-sweep{
  0%{background-position:130% 0}
  10%{background-position:-30% 0}
  100%{background-position:-30% 0}
}
/* a full-sentence line gets a slower, longer sweep — the single-word
   timing read as too quick there */
.shine-slow.shine-armed .text-shine{ animation-name:text-shine-slow; animation-duration:16s }
@keyframes text-shine-slow{
  0%{background-position:130% 0}
  22%{background-position:-30% 0}
  100%{background-position:-30% 0}
}

/* ─ CTAs: one lamp per screen ─ */
.cta{
  display:inline-block; margin-top:38px;
  background:linear-gradient(90deg,var(--amber),var(--lamp));
  color:var(--cocoa); font-family:'Fraunces',serif; font-weight:700; font-size:18px;
  border:none; border-radius:999px; padding:17px 42px; text-decoration:none; cursor:pointer;
  box-shadow:var(--mee-shadow);
  transition:transform .2s var(--ease);
}
.cta:hover{transform:scale(.97)}
/* CTA on paper inverts: cocoa fill, cream label (amber fails non-text
   contrast on the cream card — Kete-approved component decision) */
.cta-paper{
  display:inline-block; background:var(--cocoa); color:var(--paper-lit);
  font-family:'Fraunces',serif; font-weight:700; font-size:17px;
  border-radius:999px; padding:14px 34px; text-decoration:none;
  transition:transform .2s var(--ease);
}
.cta-paper:hover{transform:scale(.97)}
.cta-paper .paper-shine{
  background:linear-gradient(100deg,
    var(--paper-lit) 42%,
    var(--lamp) 50%,
    var(--paper-lit) 58%);
  background-size:300% 100%; background-position:130% 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.cta-paper{ animation:paper-breathe 4.8s ease-in-out infinite }
.cta-paper .paper-shine{ animation:paper-letters 7s ease-in-out 1.4s infinite }
@keyframes paper-breathe{
  0%,100%{ box-shadow:0 0 0 1px rgba(242,194,104,.10), 0 4px 16px rgba(217,164,65,.12) }
  50%{ box-shadow:0 0 0 1px rgba(242,194,104,.36), 0 9px 30px rgba(217,164,65,.5) }
}
@keyframes paper-letters{
  0%{background-position:130% 0}
  11%{background-position:-30% 0}
  100%{background-position:-30% 0}
}

/* ─ paper surface: the brand's card primitive ─ */
.paper{
  position:relative;
  background:var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256%22%20height%3D%22256%22%20viewBox%3D%220%200%20256%20256%22%3E%20%3Cfilter%20id%3D%22n%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%222%22%20seed%3D%223%22%2F%3E%20%3CfeColorMatrix%20values%3D%220%200%200%200%200.85%20%200%200%200%200%200.72%20%200%200%200%200%200.55%20%200%200%200%200.18%200%22%2F%3E%20%3C%2Ffilter%3E%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%2F%3E%20%3C%2Fsvg%3E"),
    radial-gradient(88% 66% at 50% 14%, var(--paper-lit) 0%, var(--paper) 74%);
  color:var(--cocoa); border-radius:16px; box-shadow:var(--mee-shadow);
}
.paper p{color:var(--cocoa)}

/* ─ scroll reveals ─ */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.on{opacity:1; transform:none}
/* paper settles like a letter laid on a desk */
.settle-l{transform:translateY(18px) rotate(-.6deg)}
.settle-r{transform:translateY(18px) rotate(.6deg)}
.settle-l.on,.settle-r.on{transform:none}
/* sections marked .no-anim load already settled: after the first two
   entrances the page stops performing and just is there */
.no-anim .reveal,.no-anim .settle-l,.no-anim .settle-r{opacity:1; transform:none; transition:none}

/* staged entrances (hero) */
.stage{opacity:0; transform:translateY(14px); animation:arrive .9s var(--ease) forwards}
.s1{animation-delay:.05s}.s2{animation-delay:.22s}.s3{animation-delay:.42s}.s4{animation-delay:.6s}.s5{animation-delay:.78s}
@keyframes arrive{to{opacity:1; transform:none}}

/* ─ the naming card (section + dialog share these) ─ */
.naming{max-width:620px; margin:0 auto; padding:52px 46px 44px; text-align:center}
.naming p{margin-left:auto; margin-right:auto}
.heart{width:58px; height:58px; margin:0 auto 24px; color:#b98d43; position:relative}
.heart svg{width:100%; height:100%}
.heart .outline{animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:.95}}
.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{animation:none; opacity:0}
/* the shimmer: a quiet sparkle, never confetti */
.shimmer{position:absolute; inset:-14px; pointer-events:none}
.shimmer i{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--lamp); opacity:0; box-shadow:0 0 6px rgba(242,194,104,.9);
}
.naming.named .shimmer i{animation:glint 1.6s var(--ease) forwards}
.shimmer i:nth-child(1){left:8%;  top:18%; animation-delay:.15s}
.shimmer i:nth-child(2){left:88%; top:26%; animation-delay:.35s}
.shimmer i:nth-child(3){left:18%; top:82%; animation-delay:.55s}
.shimmer i:nth-child(4){left:80%; top:74%; animation-delay:.75s}
.shimmer i:nth-child(5){left:50%; top:-6%; animation-delay:.5s}
@keyframes glint{0%{opacity:0; transform:scale(.4)}35%{opacity:1; transform:scale(1.25)}100%{opacity:0; transform:scale(.5)}}
.naming .whisper{color:var(--whisper-paper); font-size:clamp(19px,3vw,23px); max-width:26ch}
.nhelp{font-size:14.5px; color:#8a7355; max-width:38ch; margin:14px auto 0; line-height:1.5}
.named-line{font-family:'Fraunces',serif; font-size:clamp(20px,3.2vw,25px); color:var(--cocoa); margin:6px 0 0}
.named-line b{font-weight:700}
.nform{margin-top:24px}
.nrow{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.ninput{
  font-family:'Atkinson'; font-size:17px; color:var(--cocoa);
  background:rgba(255,252,244,.55); border:1.5px solid rgba(61,31,20,.35);
  border-radius:14px; padding:13px 18px; width:min(300px,100%);
}
.ninput::placeholder{color:#8a7355}
.ninput{caret-color:var(--cocoa)}
/* keyboard users get a real ring — outline:none alone was a WCAG failure
   (08 §6, finally fixed): the border darkens and thickens visibly instead */
.ninput:focus{outline:none; border-color:var(--cocoa); box-shadow:0 0 0 2px rgba(61,31,20,.35)}
.nbtn{
  font-family:'Fraunces',serif; font-weight:700; font-size:17px; cursor:pointer;
  background:var(--cocoa); color:var(--paper-lit); border:none; border-radius:999px;
  padding:13px 30px; transition:transform .2s var(--ease);
}
.nbtn:hover{transform:scale(.97)}
/* the name is given with a heart, not a verb */
.nbtn-icon{padding:12px 26px; display:inline-flex; align-items:center}
.nbtn-icon svg{width:21px; height:21px; display:block}
.nskip{
  display:inline-block; margin-top:16px; font-size:14.5px; color:var(--whisper-paper);
  background:none; border:none; cursor:pointer; text-decoration:underline; font-family:'Atkinson';
}
.nprivacy{font-size:13.5px; color:#8a7355; margin:22px 0 0}
.ndone{font-family:'Fraunces',serif; font-style:italic; font-size:20px; color:var(--cocoa); margin-top:26px}
.nerror{font-size:14.5px; color:#8a3a2a; 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);
}
dialog.hello::backdrop{background:rgba(18,12,16,.72)}
dialog.hello .naming{animation:arrive .5s var(--ease)}
.nclose{
  display:inline-block; margin-top:18px; font-size:14px; color:#8a7355;
  background:none; border:none; cursor:pointer; text-decoration:underline; font-family:'Atkinson';
}

@media (max-width:760px){
  .mee-sec{padding-top:calc(var(--mee-pt,118px)*.88)}
  .naming{padding:40px 24px 36px}
}

/* ─ nav ─ */
.mee-nav{position:relative; z-index:2}
.mee-nav .nav-in{
  max-width:1000px; margin:0 auto; padding:26px 26px 0;
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
}
.mee-nav .nav-mark{
  font-family:'Fraunces',serif; font-weight:700; font-size:23px; color:var(--amber);
  text-decoration:none; letter-spacing:-.3px;
}
.mee-nav .nav-links{display:flex; gap:24px; flex-wrap:nowrap}
.mee-nav .nav-links a{color:var(--muted); text-decoration:none; font-size:15px; white-space:nowrap}
.mee-nav .nav-links a:hover{color:var(--cream)}
.mee-nav .nav-links a[aria-current="page"]{
  color:var(--cream); border-bottom:1.5px solid var(--amber); padding-bottom:2px;
}
@media (max-width:640px){
  .mee-nav .nav-links{gap:16px}
  .mee-nav .nav-links a{font-size:14px}
  .mee-nav .nav-hello{display:none}
}

/* ─ footer. Quiet: three centred lines on opaque plum; the opacity
   masks the fixed mote layer. (No policy row on mee.is — Privacy/
   Refunds/Shipping/Terms are shop commitments; they live on
   mee.space where the buying happens.) ─ */
.mee-footer{
  margin-top:130px; border-top:1px solid var(--rule);
  /* bottom padding matches the top gap (border to care line) on purpose */
  padding:44px 26px; text-align:center; background:var(--plum);
  position:relative; z-index:1; font-style:normal;
}
.mee-footer p{margin-left:auto; margin-right:auto}
.mee-footer .f-care{color:var(--muted); font-size:15px; max-width:52ch; margin:0 auto 26px; line-height:1.6}
.mee-footer .f-care p{margin:0; color:var(--muted)}
.mee-footer .f-care p + p{margin-top:8px}
.mee-footer .f-care a{color:var(--muted)}
.mee-footer .f-links{display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin-bottom:12px}
.mee-footer .f-links a{color:var(--muted-dim); font-size:16px; text-decoration:none}
.mee-footer .f-links a:hover{color:var(--cream)}
.mee-footer .f-fine{color:#8A7D6F; font-size:13px}
@media (max-width:760px){
  .mee-footer{margin-top:120px}
}

/* ————————————————————————————————————————————————————————————
   Section styles, in page order (ported from each section's
   stylesheet block in the theme)
   ———————————————————————————————————————————————————————————— */

/* ─ hero — the lamp. Staged entrance; the shine word catches the
   light 2.5s after load (armed by mee.js via data-mee-shine="load") ─ */
.mee-hero{text-align:center; padding:var(--mee-pt,96px) 26px var(--mee-pb,30px); position:relative}
.mee-hero .mark{
  font-family:'Fraunces',serif; font-weight:700; font-size:clamp(78px,16vw,128px);
  line-height:.92; letter-spacing:-1px; color:var(--amber); margin:0;
}
.mee-hero .mark-sub{
  font-family:'Fraunces',serif; font-style:italic; font-size:clamp(19px,3vw,24px);
  color:var(--cream); opacity:.72; margin-top:10px;
}
.mee-hero .standfirst{
  font-family:'Fraunces',serif; font-weight:500; font-size:clamp(21px,3.6vw,30px);
  line-height:1.32; text-wrap:balance; max-width:24ch; margin:52px auto 0; color:var(--cream);
}
.mee-hero .hero-plain{color:var(--muted); font-size:18px; max-width:46ch; margin:22px auto 0; line-height:1.6}
.mee-hero .hero-note{font-size:14px; color:var(--muted-dim); margin-top:16px}

/* ─ the spoken field — the child's voice arrives phrase by phrase ─ */
.spoken-field{max-width:1000px; margin:0 auto; padding:var(--mee-pt,118px) 26px var(--mee-pb,0px)}
.spoken{
  font-family:'Fraunces',serif; font-style:italic; font-weight:450;
  line-height:1.5; color:var(--whisper); max-width:24ch;
}
.spoken-field.reveal{opacity:1; transform:none; transition:none}
.ph{opacity:0; filter:blur(6px); transition:opacity .9s var(--ease), filter .9s var(--ease)}
.spoken-field.on .ph{opacity:1; filter:blur(0)}
/* ghost drift: each quote sways on its own slow clock */
.spoken-field.on .spoken{animation:floaty var(--fd,9s) ease-in-out var(--fo,0s) infinite alternate}
@keyframes floaty{from{transform:translateY(0)}to{transform:translateY(-7px)}}
.sp-1{font-size:clamp(23px,3.6vw,28px); margin-left:4%; --fd:10s}
.sp-2{font-size:clamp(19px,3vw,22px); margin-left:auto; margin-right:8%; margin-top:46px; text-align:right; --fd:12s; --fo:-3s}
.sp-3{font-size:clamp(17px,2.6vw,19px); margin-left:14%; margin-top:42px; opacity:.9; --fd:8s; --fo:-5s}
.sp-4{font-size:clamp(19px,3vw,22px); margin-left:auto; margin-right:16%; margin-top:48px; text-align:right; max-width:22ch; --fd:11s; --fo:-2s}
.sp-5{font-size:clamp(21px,3.2vw,24px); margin-left:8%; margin-top:44px; --fd:9s; --fo:-6s}
.spoken-note{
  color:var(--muted-dim); font-size:15px; margin:60px auto 0; text-align:center; max-width:40ch;
  opacity:0; transition:opacity 1.4s var(--ease) 9.5s;
}
.spoken-field.on .spoken-note{opacity:1}
/* a few words catch the lamplight */
.gold{color:var(--lamp); text-shadow:0 0 16px rgba(242,194,104,.28); animation:goldshine 5.5s ease-in-out infinite}
@keyframes goldshine{
  0%,100%{text-shadow:0 0 10px rgba(242,194,104,.18)}
  50%{text-shadow:0 0 22px rgba(242,194,104,.5)}
}
@media (max-width:640px){
  .sp-1,.sp-3,.sp-5{margin-left:2%}
  .sp-2,.sp-4{margin-right:2%}
  .spoken{max-width:26ch}
}

/* ─ what this is / what this isn't ─ */
.isnt{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:38px}
.is-card{background:var(--glow); border-radius:16px; padding:30px 32px}
.is-card h3{font-family:'Fraunces',serif; font-weight:600; font-size:20px; margin:0 0 16px; color:var(--lamp)}
.is-card ul{margin:0; padding:0; list-style:none}
.is-card li{padding:9px 0; border-bottom:1px solid var(--rule); color:var(--cream); font-size:16.5px}
.is-card li:last-child{border-bottom:none}
.is-card li span{color:var(--muted-dim); font-size:14px; display:block; margin-top:1px}
.isnt-quote{
  font-family:'Fraunces',serif; font-size:clamp(19px,2.8vw,23px); line-height:1.5; color:var(--cream); margin:0;
}
.isnt-quote strong, .isnt-quote b{color:var(--lamp); font-weight:600}
.isnt-quote small{
  display:block; font-family:'Atkinson'; font-size:15px; color:var(--muted-dim);
  margin-top:18px; line-height:1.55;
}
@media (max-width:760px){
  .isnt{grid-template-columns:1fr}
  /* "Not a therapist." takes its own line on phones instead of breaking
     mid-phrase across two */
  .isnt-quote strong{display:block}
}

/* ─ a day with MEe ─ */
.day{display:grid; grid-template-columns:minmax(230px,340px) 1fr; gap:34px; margin-top:42px; align-items:start}
.day-art{position:relative; margin:0}
.day-art img{width:100%; height:auto; display:block; border-radius:14px; box-shadow:var(--mee-shadow)}
.day-art figcaption{font-size:13px; color:var(--muted-dim); margin-top:10px; text-align:center}
.beats{padding:34px 36px}
.beat{display:grid; grid-template-columns:86px 1fr; gap:16px; padding:13px 0; border-bottom:1px dashed rgba(61,31,20,.18)}
.beat:last-child{border-bottom:none}
.beat-l{
  font-family:var(--mee-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:#8a6a3a; padding-top:5px;
}
.beat p{margin:0; font-size:16.5px; line-height:1.5; max-width:52ch}
.beat .w{font-family:'Fraunces',serif; font-style:italic; color:var(--whisper-paper); font-size:17px}
/* wide enough that the seven arrows stay on one line on desktop; the
   bold "Seven beats…" sentence always starts its own line (it used to
   wrap mid-phrase on phones) */
.day-close{color:var(--muted); font-size:16px; margin:30px 0 0; max-width:none}
.day-close strong, .day-close b{color:var(--cream); display:block; margin-top:4px}
@media (max-width:760px){
  .day{grid-template-columns:1fr}
  .day-art{max-width:320px; margin:0 auto}
  .beats{padding:26px 22px}
  .beat{grid-template-columns:1fr; gap:3px}
}

/* ─ the journey arc ─ */
.arcline{
  display:flex; align-items:center; gap:9px; flex-wrap:nowrap; margin:38px 0 0;
  font-family:'Fraunces',serif; font-size:clamp(15px,2.1vw,20px); color:var(--muted);
}
.arcline b{color:var(--lamp); font-weight:600; white-space:nowrap}
.arcline svg{opacity:.5; flex:none; width:18px; height:7px}
/* phones: smaller type instead of wrapping — all three stages hold one
   line (deliberate trade, per Raitis: small beats cut off) */
@media (max-width:600px){ .arcline{gap:6px; font-size:12px} .arcline svg{width:14px} }
.loops{margin:34px 0 0; padding:0; list-style:none; max-width:62ch}
.loops li{
  padding:13px 0 13px 34px; position:relative; border-bottom:1px solid var(--rule);
  color:var(--cream); font-size:16.5px;
}
.loops li:last-child{border-bottom:none}
.loops li svg{position:absolute; left:0; top:15px; width:18px; height:18px; color:var(--amber); opacity:.8}

.arc-top{
  display:grid; grid-template-columns:1fr minmax(240px,340px);
  grid-template-areas:"lede map" "rest map"; column-gap:34px; align-items:center;
}
.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:14px; box-shadow:var(--mee-shadow)}
.arc-map figcaption{font-size:13px; color:var(--muted-dim); margin-top:10px; text-align:center}
@media (max-width:760px){
  .arc-top{grid-template-columns:1fr; grid-template-areas:"lede" "map" "rest"}
  .arc-map{max-width:340px; margin:30px auto 0}
}

/* rail: a calm grid on desktop, a slider only on small screens */
.rail{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin:44px 0 0}
.rail figure{margin:0}
.rail img{
  width:100%; height:auto; display:block; border-radius:12px; box-shadow:var(--mee-shadow);
  transition:transform .45s var(--ease);
}
.rail figure:hover img{transform:translateY(-5px)}
.rail figcaption{font-size:12.5px; color:var(--muted-dim); margin-top:9px; line-height:1.4}
.lineage{font-size:14px; color:var(--muted-dim); margin-top:22px; max-width:none}
@media (max-width:760px){
  .rail{
    display:flex; overflow-x:auto; margin-left:-26px; margin-right:-26px;
    padding:4px 26px 18px; scroll-snap-type:x proximity;
  }
  .rail figure{flex:0 0 172px; scroll-snap-align:start}
}

/* ─ what colour is your day ─ */
.colour{text-align:center}
.colour p{margin-left:auto; margin-right:auto}
.dots{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:40px}
.dot{
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  box-shadow:0 0 0 2px rgba(0,0,0,.25), var(--mee-shadow);
  transition:transform .2s var(--ease);
  animation:dotnudge 3.8s ease-in-out infinite;
}
.dot:nth-child(2){animation-delay:.5s}
.dot:nth-child(3){animation-delay:1s}
.dot:nth-child(4){animation-delay:1.5s}
.dot:nth-child(5){animation-delay:2s}
.dot:nth-child(6){animation-delay:2.5s}
@keyframes dotnudge{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.dot:hover{animation-play-state:paused; transform:scale(.94)}
.dot[aria-pressed="true"]{animation:none; box-shadow:0 0 0 3px var(--cream), var(--mee-shadow)}
.colour-answer{margin-top:42px}

/* ─ why this exists ─ */
.why-quote{
  font-family:'Fraunces',serif; font-weight:600; font-size:clamp(24px,4vw,33px);
  line-height:1.3; max-width:26ch; margin:0; text-wrap:balance; color:var(--cream);
}
.why-body{color:var(--muted); margin:26px 0 0; max-width:56ch}
.why-close{font-family:'Fraunces',serif; font-style:italic; color:var(--whisper); font-size:19px; margin:28px 0 0}

/* ─ the five filters — deliberately NOT cards: a numbered editorial
   list reads as an internal standard overheard, which is the point ─ */
.filters{list-style:none; margin:46px 0 0; padding:0; max-width:66ch}
.filters li{
  display:grid; grid-template-columns:auto 1fr; column-gap:24px;
  padding:26px 0; border-top:1px solid var(--rule);
}
.filters li:last-child{border-bottom:1px solid var(--rule)}
.fnum{
  font-family:'Fraunces',serif; font-weight:600; font-size:15px; line-height:1.75;
  color:var(--amber); font-variant-numeric:tabular-nums;
}
.fq{
  font-family:'Fraunces',serif; font-weight:500; font-size:20px; line-height:1.36;
  color:var(--cream); margin:0; max-width:42ch;
}
.ffail{grid-column:2; color:var(--whisper); font-size:16px; margin:9px 0 0; max-width:46ch}
.filters-close{
  margin:38px 0 0; max-width:54ch; color:var(--muted);
  border-left:2px solid var(--rule); padding-left:20px;
}
.filters-close strong, .filters-close b{color:var(--cream); font-weight:400}
@media (max-width:560px){
  .filters li{grid-template-columns:1fr; row-gap:6px}
  .ffail{grid-column:1}
  .fnum{line-height:1.2}
}

/* ─ the shop preview — three paper cards + the breathing CTA.
   The CTA breath/letter-shine is on by default — arming it on view
   popped (07 §5) ─ */
.shop-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:42px}
.product-card{padding:30px 30px 26px; display:flex; flex-direction:column}
.product-card .motif{width:30px; height:30px; color:var(--whisper-paper); opacity:.9; margin-bottom:18px}
.product-card .motif svg{width:30px; height:30px; display:block}
.product-card h3{font-family:'Fraunces',serif; font-weight:600; font-size:21px; margin:0 0 10px; color:var(--cocoa)}
.product-card h3 a{color:var(--cocoa); text-decoration:none}
.product-card h3 a:hover{text-decoration:underline}
.product-card p{font-size:16px; line-height:1.5; margin:0 0 14px; flex:1}
.product-card .from{font-family:'Fraunces',serif; font-style:italic; font-size:14.5px; color:var(--whisper-paper); margin:0 0 16px; flex:none}
.product-card .spec{font-family:var(--mee-mono); font-size:12px; color:#8a6a3a; border-top:1px dashed #cdb98f; padding-top:12px; margin-bottom:0; flex:none}
.shop-cta-row{margin-top:34px}
.shop-doctrine{color:var(--muted); max-width:58ch}
.shop-doctrine strong, .shop-doctrine b{color:var(--cream)}
/* on phones the cards become a full-bleed swipeable rail; the next
   card peeking past the edge is the whole signal that it swipes */
@media (max-width:640px){
  .shop-grid{
    display:flex; grid-template-columns:none;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    gap:14px; margin:42px -26px 0; padding:4px 26px 10px; scroll-padding:0 26px;
    scrollbar-width:none;
  }
  .shop-grid::-webkit-scrollbar{display:none}
  .shop-grid .product-card{flex:0 0 82%; scroll-snap-align:center}
}

/* ─ a quiet minute — Day 17's breath ring ─ */
.quiet{text-align:center; padding:var(--mee-pt,130px) 26px var(--mee-pb,96px)}
.quiet p{margin-left:auto; margin-right:auto}
.ringwrap{position:relative; width:220px; height:220px; margin:46px auto 0}
.ring{
  position:absolute; inset:44px; border-radius:50%;
  border:1.5px solid var(--lamp);
  box-shadow:0 0 40px rgba(242,194,104,.14), inset 0 0 28px rgba(242,194,104,.08);
  animation:breathe 10s var(--ease) infinite;
}
@keyframes breathe{
  0%{transform:scale(.72); opacity:.5}
  40%{transform:scale(1); opacity:.95}
  58%{transform:scale(1); opacity:.95}
  100%{transform:scale(.72); opacity:.5}
}
.spark{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--lamp); opacity:0; transition:opacity 1.4s var(--ease);
  box-shadow:0 0 8px rgba(242,194,104,.8);
}
.spark.lit{opacity:.85}
.quiet-cap{font-family:'Fraunces',serif; font-style:italic; color:var(--whisper); font-size:17px; margin-top:32px}
.quiet-sub{font-size:14px; color:var(--muted-dim); margin-top:10px}
@media (max-width:760px){
  .quiet{padding-top:calc(var(--mee-pt,130px)*.92)}
}

/* ─ the naming — Day 1 as the closing waitlist section. Keeps its
   entrance animation by design (the page's final breath). ─ */
.naming-sec{padding-top:var(--mee-pt,130px); padding-bottom:var(--mee-pb,0px)}
@media (max-width:760px){
  .naming-sec{padding-top:calc(var(--mee-pt,130px)*.92)}
}

/* ————————————————————————————————————————————————————————————
   How-we-decide page sections (added with the /how-we-decide/
   port; from mee-page-hero, mee-prose-list and mee-hello-strip)
   ———————————————————————————————————————————————————————————— */

/* ─ generic page hero — eyebrow, headline, lede ─ */
.page-hero{text-align:center; padding:var(--mee-pt,84px) 26px var(--mee-pb,0px)}
.page-hero p{margin-left:auto; margin-right:auto}
.page-hero h1{
  font-family:'Fraunces',serif; font-weight:600; font-size:clamp(30px,5.6vw,46px);
  line-height:1.16; letter-spacing:-.4px; color:var(--cream); margin:14px 0 0;
  text-wrap:balance; max-width:22ch; margin-inline:auto;
}
.page-hero .lede-c{color:var(--muted); max-width:54ch; margin:24px auto 0; line-height:1.6}

/* ─ prose + promise list — the decide page's workhorse. The
   struck-through treatment is deliberate: the refused tactics are
   named and crossed out in public, not merely omitted. ─ */
.creed{
  font-family:'Fraunces',serif; font-weight:500; font-style:italic;
  font-size:clamp(22px,3.6vw,30px); line-height:1.35; color:var(--cream);
  max-width:26ch; margin:0; text-wrap:balance;
}
.creed strong, .creed b{color:var(--lamp); font-weight:600; font-style:normal}
.creed-lede{margin-top:26px}
.plist{list-style:none; margin:38px 0 0; padding:0; max-width:66ch}
.plist li{padding:14px 0; border-bottom:1px solid var(--rule); color:var(--cream); font-size:17px}
.plist li:last-child{border-bottom:none}
.plist li span{color:var(--muted-dim); font-size:15px; display:block; margin-top:3px; line-height:1.5}
.plist .never{color:var(--whisper); text-decoration:line-through; text-decoration-color:rgba(204,175,171,.6); display:inline}
.vow{
  background:var(--glow); border-radius:16px; padding:34px 38px; margin-top:40px; max-width:620px;
}
.vow p{margin:0}
.vow .vow-line{
  font-family:'Fraunces',serif; font-size:clamp(19px,3vw,23px); line-height:1.45; color:var(--cream);
}
.vow .vow-sub{color:var(--muted-dim); font-size:15px; margin-top:12px; line-height:1.55}

/* ─ the quiet ask — one soft CTA into the Say-hello dialog ─ */
.hello-strip{text-align:center; padding:var(--mee-pt,110px) 26px var(--mee-pb,0px)}
.hello-strip p{color:var(--muted); max-width:44ch; margin:0 auto}
.hello-strip .hello-cta{margin-top:26px; font-size:17px; padding:15px 38px}

/* ─ the 404 — a wrong turn, answered without blame and without a pitch ─ */
.notfound{
  text-align:center; max-width:1000px; margin:0 auto;
  padding:var(--mee-pt,120px) 26px var(--mee-pb,120px);
}
.notfound p{margin-left:auto; margin-right:auto}

/* the motif is the "we left a light on" gesture — a slow breathe, never a blink */
.nf-motif{color:var(--lamp); width:34px; margin:0 auto 26px; animation:nf-breathe 6s ease-in-out infinite}
.nf-motif svg{width:100%; height:auto; display:block; filter:drop-shadow(0 0 12px rgba(242,194,104,.35))}
@keyframes nf-breathe{
  0%,100%{opacity:.72; transform:translateY(0)}
  50%{opacity:1; transform:translateY(-2px)}
}

.nf-h{
  font-family:'Fraunces',serif; font-weight:600; font-size:clamp(30px,5.6vw,46px);
  line-height:1.16; letter-spacing:-.4px; color:var(--cream); margin:0;
  text-wrap:balance; max-width:24ch; margin-inline:auto;
}
.nf-lede{color:var(--muted); font-size:18px; max-width:50ch; margin-top:24px; line-height:1.6}
.nf-note{color:var(--muted-dim); font-size:15px; max-width:46ch; margin-top:16px; line-height:1.6}

.nf-ways{display:flex; flex-direction:column; align-items:center; gap:22px}
.nf-ways .cta{margin-top:38px}
.nf-alt{
  color:var(--muted-dim); font-size:15px; text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:2px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.nf-alt:hover{color:var(--cream); border-color:var(--muted-dim)}
.notfound .handrule{margin-top:70px}

/* Reduced motion: by explicit product decision the site's calm, slow
   animation set runs for everyone. All motion here is small-amplitude
   and low-frequency by design; only smooth scrolling defers to the OS. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
/* forced-colors strips shadows and gradients; the paper card's edge is
   defined only by its shadow, so give surfaces a real border */
@media (forced-colors:active){
  .paper,.ninput{border:1px solid CanvasText}
  .cta,.cta-paper,.nbtn{border:1px solid CanvasText}
  .is-card{border:1px solid CanvasText}
  .dot{border:1px solid CanvasText}
  .ring{border:1px solid CanvasText}
  .vow{border:1px solid CanvasText} /* added with /how-we-decide/ */
}