/* ── typefaces, self-hosted ───────────────
   Self-hosted so the experience is complete with no network.
   A reader at 3am on no signal still gets Newsreader, not
   Georgia. Latin subset, woff2 only, 142 KB for seven faces. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300;font-display:block;src:url(../fonts/newsreader-300.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300;font-display:block;src:url(../fonts/newsreader-300-italic.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/newsreader-400.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:block;src:url(../fonts/newsreader-400-italic.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:block;src:url(../fonts/newsreader-500.woff2) format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/hanken-400.woff2) format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:block;src:url(../fonts/hanken-500.woff2) format('woff2');}



/* ═══════════════════════════════════════════════════════
   THE WAY BACK TO YOU — Quiet Japandi Editorial · v7
   Content per canonical v4. No new copy.

   AXIS      Two verticals: the SPINE and the CONTENT LINE.
             The rule is drawn only where it orients.
   SCALE     One reading size. Three display steps above it.
   MATERIAL  Bone = reading · Mineral = insert ·
             Stone = safety · Night = held.
   ═══════════════════════════════════════════════════════ */

html{color-scheme:light;background-color:#F1EAE0;background-image:linear-gradient(#F1EAE0,#F1EAE0);}
:root{
  color-scheme:light;
  /* planes paint as flat image layers, not as background-color, so that a
     viewer forcing background-color cannot black the page out */
  --bone:#EDE5D8; --mineral:#FAF6EE; --stone:#DFD5C4; --night:#1C1917;
  --paint-bone:linear-gradient(var(--bone),var(--bone));
  --paint-mineral:linear-gradient(var(--mineral),var(--mineral));
  --paint-stone:linear-gradient(var(--stone),var(--stone));
  --paint-night:linear-gradient(var(--night),var(--night));
  --mushroom:#C3B9A9; --warmstone:#C9B2A0; --taupe:#60584C; --ink:#262220;
  --clay:#874D35; --clayline:#9C5B41;
  --candle:#EDE6D9; --ash:#B4A896; --ember:#C9A45C;
  --hair:rgba(96,88,76,.26); --hair-strong:rgba(96,88,76,.4);

  /* vertical rhythm: four steps, each with one job.
     s1 text follows text · s2 same plane · s3 inside another
     material · s4 a full screen or the Nightfall page        */
  --s1:6svh; --s2:10svh; --s3:13svh; --s4:16svh;

  --edge:22px; --track:34px;
  --flow:calc(var(--edge) + var(--track));
  --measure:33rem;

  /* one reading voice, three display steps, two utility steps */
  --t-micro:.645rem;
  --t-lbl:.82rem;       /* section labels: readable, still quiet */
  --t-util:.82rem;      /* retired from prose; kept for micro-metadata only */
  --t-read:1.15rem;
  --t-emph:1.24rem;     /* set-apart only: recognition, contents index, week */
  --d3:clamp(1.38rem,5.2vw,1.8rem);
  --d2:clamp(1.58rem,6.1vw,2.2rem);
  --d1:clamp(2.1rem,8.8vw,3.5rem);

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
}
/* tablet */
@media (min-width:760px){ :root{ --edge:min(9vw,120px); --track:56px; --t-read:1.18rem; --t-emph:1.3rem; } }
/* desktop: the reading plane is composed within the viewport, not pinned left */
@media (min-width:1000px){
  :root{ --track:64px; --edge:calc((100vw - var(--measure))/2 - var(--track)); }
  .asym{ --edge:calc((100vw - var(--measure))/2 - var(--track) - 9vw); }
}
@media (max-width:360px){ :root{ --edge:18px; --track:30px; --t-read:1.1rem; --t-emph:1.18rem; } }

*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none!important;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
/* The canvas is cloth until she leaves the cover. Anything cream painted
   underneath a charcoal cover shows as a flash on every load. */
html:not(.js) body,html.paper body{background-color:var(--bone);
  background-image:radial-gradient(120% 58% at 16% -6%, rgba(255,250,240,.42), rgba(255,250,240,0) 55%), var(--paint-bone);}
body{
  background-color:#2A2623;
  background-image:none;   /* paper only once she is past the cover */
  color:var(--ink);font-family:var(--sans);font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.032;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.serif{font-family:var(--serif);}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ── axis ─────────────────────────────────────────────── */
.pl{position:relative;padding-left:var(--flow);padding-right:var(--edge);}
.spine::before{content:"";position:absolute;left:var(--edge);top:0;bottom:0;width:1px;background:var(--hair);z-index:2;}

/* ── the scale ────────────────────────────────────────── */
.lbl{font-family:var(--sans);font-size:var(--t-lbl);letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe);font-weight:500;line-height:1.55;text-indent:.2em;}
.util{font-family:var(--serif);font-weight:400;font-size:var(--t-read);line-height:1.82;color:var(--ink);max-width:34ch;}
.read{font-family:var(--serif);font-weight:400;font-size:var(--t-read);line-height:1.82;color:var(--ink);max-width:var(--measure);}
.read p{margin:0 0 1.38em;text-wrap:pretty;}
.read p:last-child{margin-bottom:0;}
/* no lede size step: continuous prose is one size. Space and the label carry the entry. */
.read .lede{margin-bottom:1.5em;}
.aside{font-family:var(--serif);font-style:italic;font-weight:300;font-size:var(--t-read);line-height:1.82;color:var(--taupe);max-width:31ch;}
.d3{font-family:var(--serif);font-weight:300;font-size:var(--d3);line-height:1.2;letter-spacing:-.014em;max-width:20ch;text-wrap:balance;}
.d2{font-family:var(--serif);font-weight:300;font-size:var(--d2);line-height:1.34;letter-spacing:-.012em;max-width:19ch;text-wrap:pretty;}
.d1{font-family:var(--serif);font-weight:300;font-size:var(--d1);line-height:1.06;letter-spacing:-.022em;max-width:12ch;text-wrap:balance;}
.tick{width:26px;height:1px;background:var(--clayline);opacity:.85;}

/* ── actions ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:.68rem;
  letter-spacing:.24em;text-transform:uppercase;font-weight:500;background:transparent;color:var(--clay);
  border:1px solid var(--clay);cursor:pointer;text-decoration:none;padding:1.1rem 1.85rem;border-radius:0;
  min-height:50px;transition:background .5s ease,color .5s ease;}
.btn:hover{background-color:var(--clay);background-image:linear-gradient(var(--clay),var(--clay));color:var(--bone);}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair-strong);}
.btn.ghost:hover{border-color:var(--ink);}
.tlink{display:inline-flex;align-items:center;min-height:44px;font-family:var(--sans);font-size:.78rem;
  letter-spacing:.06em;color:var(--clay);background:none;border:none;cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;padding:.4rem 0;}
a:focus-visible,button:focus-visible{outline:2px solid var(--clay);outline-offset:4px;}
[tabindex="-1"]:focus{outline:none;}

.view{display:block;}
html.js .view{display:none;}
html.js .view.active{display:block;}

/* ── quiet tab ────────────────────────────────────────── */
#tab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;display:none;
  align-items:center;gap:8px;min-height:48px;padding:0 16px;background-color:var(--bone);background-image:var(--paint-bone);border:1px solid var(--hair-strong);border-radius:0;cursor:pointer;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe);font-weight:500;}
html.js #tab.show{display:inline-flex;}
#tab i{display:block;width:14px;height:1px;background:var(--taupe);position:relative;}
#tab i::after{content:"";position:absolute;left:0;top:4px;width:14px;height:1px;background:var(--taupe);}
#menu{position:fixed;inset:0;z-index:70;background-color:var(--bone);background-image:var(--paint-bone);opacity:0;visibility:hidden;transition:opacity .52s cubic-bezier(.22,.61,.36,1),visibility .52s;}
#menu.open{opacity:1;visibility:visible;}
#menu .sh{position:absolute;inset:0;padding:var(--s4) var(--edge) 0 var(--flow);}
#menu .sh::before{content:"";position:absolute;left:var(--edge);top:0;bottom:0;width:1px;background:var(--hair);}
#menu a,#menu .mnav button{display:block;width:100%;text-align:left;
  background:none;border:none;border-radius:0;cursor:pointer;-webkit-appearance:none;appearance:none;font-family:var(--serif);font-weight:300;font-size:var(--d3);color:var(--ink);text-decoration:none;
  padding:1rem 0;cursor:pointer;min-height:48px;border-bottom:1px solid var(--hair);max-width:24rem;}
#menu a:hover,#menu .mnav button:hover{color:var(--clay);}
#menu .cl{margin-top:2.6rem;}

/* ═══ ENTRY ═══════════════════════════════════════════ */
#enter{min-height:100svh;position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--edge) var(--s4) var(--flow);}
html.js #enter{display:none;} html.js #enter.active{display:flex;}
#enter .rule{position:absolute;left:var(--edge);top:0;width:1px;background:var(--hair-strong);height:100%;}
html.js #enter .rule{height:0;animation:draw 2.6s cubic-bezier(.2,.7,.2,1) 1.3s forwards;}
@keyframes draw{to{height:100%;}}
#enter .vert{position:absolute;left:max(4px, calc(var(--edge) - 26px));bottom:32vh;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--sans);font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--cloth);opacity:.7;font-weight:500;}
#enter .addr{font-family:var(--serif);font-weight:300;font-size:clamp(1.32rem,5.1vw,1.9rem);line-height:1.42;
  letter-spacing:-.01em;max-width:20ch;margin-bottom:2.4rem;}
#enter .addr em{font-style:italic;color:var(--taupe);}
/* Gold cannot live on cream and stay legible, so the one word
   that matters is pressed into the paper in clay instead. */
#enter .addr .you{display:inline-block;font-style:normal;font-weight:400;color:var(--clay);
  font-size:1.18em;letter-spacing:-.005em;
  text-shadow:0 -1px 0 rgba(88,74,58,.14), 0 1px 0 rgba(255,252,246,.8);}
/* "You." presses into the paper once its letters have landed. */
html.js #enter .you{text-shadow:0 0 0 rgba(88,74,58,0), 0 0 0 rgba(255,252,246,0);}
@keyframes youclear{
  0%{opacity:0;text-shadow:0 0 0 rgba(88,74,58,0), 0 0 0 rgba(255,252,246,0);}
  33%{opacity:1;text-shadow:0 0 0 rgba(88,74,58,0), 0 0 0 rgba(255,252,246,0);}
  55%{opacity:1;text-shadow:0 0 0 rgba(88,74,58,0), 0 0 0 rgba(255,252,246,0);}
  100%{opacity:1;text-shadow:0 -1px 0 rgba(88,74,58,.14), 0 1px 0 rgba(255,252,246,.8);}
}
html.js #enter .you.pressed,html.js #enter.seen .you{
  text-shadow:0 -1px 0 rgba(88,74,58,.14), 0 1px 0 rgba(255,252,246,.8);}
#enter .line{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,6.85vw,3rem);line-height:1.22;
  letter-spacing:-.018em;max-width:none;margin-bottom:3rem;text-wrap:normal;}
/* Each sentence surfaces whole, the way a thought arrives —
   not typed, not wiped, not letter by letter. Opacity and a
   soft focus only, so nothing shifts and nothing performs.  */
html.js #enter .s1,html.js #enter .s2,html.js #enter .you,
html.js #enter .line,html.js #enter .go{
  opacity:0;will-change:opacity;
  animation:emerge var(--dur,2.4s) cubic-bezier(.22,.61,.36,1) var(--at,0s) forwards;}
/* The page is fully composed the moment the cover leaves. Nothing is
   withheld and nothing is staged: one arrival, 620ms, everything at once.
   The only motion afterwards is the press forming under "You.", which
   happens while she is already reading. */
html.js.fonts #enter .s1,html.js.fonts #enter .s2,
html.js.fonts #enter .line,html.js.fonts #enter .go{--dur:.62s;--at:1.35s;}
html.js.fonts #enter .you{animation:youclear 1.9s cubic-bezier(.22,.61,.36,1) 1.35s forwards;}
html.js #enter.seen .s1,html.js #enter.seen .s2,html.js #enter.seen .you,
html.js #enter.seen .line,html.js #enter.seen .go{
  animation:none!important;opacity:1!important;filter:none!important;}
@keyframes emerge{
  0%{opacity:0;}
  55%{opacity:.62;}
  100%{opacity:1;}
}
#enter .addr .t2{display:block;}
#enter .line{margin-top:2.6rem;}
@keyframes up{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
/* Screens should arrive, not blink into place. Opacity only, so
   nothing shifts and the first paint is never delayed. */
html.js .view.active{animation:viewin .52s cubic-bezier(.22,.61,.36,1);}
/* the threshold is already painted beneath the cover; it must not fade in
   while the cloth is fading out, or the two blend into a haze */
html.js #enter.beneath{animation:none!important;}
/* The cover composes itself element by element, so the whole-view fade on
   top of that reads as the page appearing twice. It opts out. */
html.js #cover.active{animation:none!important;}
/* once suppressed, it stays suppressed for this visit: re-enabling the rule
   restarts the animation and the page appears to blink a second time */
@keyframes viewin{
  from{opacity:.001;transform:translate3d(0,5px,0);}
  to{opacity:1;transform:none;}
}


/* ═══ WELCOME — same reading voice as the chapters ════ */
#welcome{min-height:100svh;padding-bottom:0;}
#welcome>.pl{padding-block:var(--s2) var(--s1);position:relative;}
/* ── the down cue ───────────────────────────────────────
   One arrow for the whole product. It lives in the margin
   track beside the spine, where the entry wordmark sits, so
   it never crosses into the text column on any screen. It
   appears only at the top of a view that scrolls, and goes
   the moment she moves.                                    */
#downcue{position:fixed;left:max(0px, calc(var(--flow) - 56px));bottom:9svh;z-index:55;width:56px;min-height:56px;
  display:none;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;padding:0;
  opacity:0;transition:opacity .8s ease;}
html.js #downcue.show{display:flex;opacity:1;}
#downcue .glyph{font-family:var(--sans);font-weight:400;font-size:1.6rem;line-height:1;
  color:var(--clay);opacity:.6;}
html.js #downcue .glyph{animation:breathdown 2.9s ease-in-out infinite;}
#downcue.night .glyph{color:var(--ember);}
html.js .cue.welcomecue .stem{animation:breathdown 2.9s ease-in-out infinite;}
@keyframes breathdown{
  0%{opacity:.4;transform:translateY(-2px);}
  45%{opacity:.85;transform:translateY(2px);}
  100%{opacity:.4;transform:translateY(-2px);}
}
#welcome .note{margin-top:1.9rem;max-width:31ch;}
/* a label that names a voice or a destination speaks in clay;
   functional micro-labels stay taupe */
#welcome > .pl > .lbl:first-child,#about .lbl:first-of-type,#home .lbl:first-of-type{
  color:var(--clay);}
#welcome .note p{margin-bottom:1.05em;}
#welcome .sign{font-style:italic;font-weight:300;color:var(--taupe);}
#welcome .note .beat{margin-block:1.5em;}
.how3{margin-top:1.4rem;}
.how3 dt{margin-top:1.5rem;}
.how3 dd{font-family:var(--serif);font-weight:400;font-size:var(--t-read);line-height:1.82;
  color:var(--ink);margin:.35rem 0 0;max-width:32ch;}
.howsub{font-family:var(--serif);font-style:italic;font-weight:300;font-size:var(--t-read);
  line-height:1.82;color:var(--taupe);max-width:33ch;margin-top:2.2rem;}
.howquiet{font-family:var(--serif);font-weight:400;font-size:var(--t-read);line-height:1.82;
  color:var(--taupe);max-width:33ch;margin-top:1.6rem;}
/* Melissa speaks on the paper. Everything that is not her voice —
   the practical lines and the notice — sits on an inserted sheet,
   the way front matter is bound into a book. */
.frontmatter{background-color:var(--mineral);background-image:var(--paint-mineral);
  padding-block:var(--s3) var(--s4);margin-top:var(--s3);position:relative;}
.frontmatter::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(96,88,76,.22) 0%,rgba(96,88,76,.07) 22%,rgba(96,88,76,.20) 47%,
  rgba(96,88,76,.09) 70%,rgba(96,88,76,.21) 100%);}
.notelbl{margin-top:var(--s3);padding-top:1.8rem;border-top:1px solid var(--hair);display:block;}
#welcome .howlbl{display:block;}
#welcome .how{margin-top:1rem;}
.disclaimer{font-family:var(--sans);font-weight:400;font-size:.94rem;line-height:1.72;
  letter-spacing:.005em;color:var(--taupe);opacity:.92;margin-top:1.5rem;max-width:38ch;}
#welcome .cta{margin-top:3rem;}

/* ═══ HOME ════════════════════════════════════════════ */
#home{min-height:100svh;padding-block:0;}
#home>.pl:not(.otherdoors):not(.chaplist){padding-block:var(--s2) var(--s2);}
#home h1{margin:1.7rem 0 1rem;}
#home .sub{margin-bottom:0;}
/* this is the opening of the book's contents, so it is set as an opening:
   clearly above the rows it introduces, with its sub-line clearly below it */
.chaphead{margin-top:0;font-size:clamp(1.72rem,7.2vw,2.4rem);line-height:1.22;
  letter-spacing:-.014em;max-width:15ch;}
#home .sub{font-size:1rem;line-height:1.68;margin-top:1.3rem;max-width:34ch;}
/* the index begins on its own sheet, so it is unmistakably a list */
.chaplist{background-color:var(--mineral);background-image:var(--paint-mineral);
  padding-block:var(--s2) var(--s3);margin-top:0;position:relative;}
.chaplbl{color:var(--taupe);margin-bottom:2.2rem;}
.chaplist::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(96,88,76,.22) 0%,rgba(96,88,76,.07) 22%,rgba(96,88,76,.20) 47%,
  rgba(96,88,76,.09) 70%,rgba(96,88,76,.21) 100%);}

.contents{list-style:none;}
.contents li{position:relative;}
.contents button{width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:2.1rem 0 2.3rem;min-height:56px;display:block;position:relative;}
.contents li + li button{border-top:1px solid var(--hair);}
/* the numeral inhabits the outer field, as on a chapter opener */
.contents .num{position:absolute;right:-.1em;top:50%;transform:translateY(-52%);
  font-family:var(--serif);font-weight:300;font-size:clamp(3.3rem,13vw,5.4rem);line-height:.8;
  color:#B9A78E;opacity:.55;pointer-events:none;user-select:none;z-index:0;
  text-shadow:0 -1px 0 rgba(88,74,58,.18), 0 1px 0 rgba(255,252,246,.7);}
.contents .t{position:relative;z-index:2;font-family:var(--serif);font-weight:300;
  font-size:var(--t-emph);line-height:1.3;color:var(--ink);display:block;max-width:18ch;
  transition:color .4s ease;}
.contents .rcue{position:relative;z-index:2;display:block;margin-top:.55rem;max-width:21ch;
  font-family:var(--serif);font-style:italic;font-weight:300;font-size:var(--t-read);
  line-height:1.6;color:var(--taupe);}
.contents button:hover .t{color:var(--clay);}
/* the arrow is the product's one mark for a destination, as on the cover */
.contents .arw,.doorlist .arw{color:var(--clay);font-size:.78em;white-space:nowrap;}
.contents button:hover .arw,.doorlist button:hover .arw{color:var(--ink);}

/* a second kind of doorway: no numerals, its own plane, its own rhythm */
.otherdoors{padding-block:var(--s3) var(--s4);position:relative;margin-top:0;}
.otherdoors::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(96,88,76,.22) 0%,rgba(96,88,76,.07) 22%,rgba(96,88,76,.20) 47%,
  rgba(96,88,76,.09) 70%,rgba(96,88,76,.21) 100%);}
.otherdoors .dlead{max-width:34ch;line-height:1.9;}
.doorlist{list-style:none;margin-top:var(--s1);}
.doorlist button{width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:1.5rem 0 1.6rem;min-height:56px;display:block;}
.doorlist li + li button{border-top:1px solid var(--hair);}
.doorlist .t{display:block;font-family:var(--serif);font-weight:300;font-size:var(--t-read);
  line-height:1.35;color:var(--clay);max-width:24ch;transition:color .4s ease;}
.doorlist .rcue{display:block;margin-top:.4rem;max-width:28ch;font-family:var(--serif);
  font-style:italic;font-weight:300;font-size:var(--t-read);line-height:1.6;color:var(--taupe);}
.contents .rlen{position:relative;z-index:2;display:block;margin-top:.5rem;
  font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--taupe);opacity:.72;}
.doorlist button:hover .t{color:var(--ink);}

/* ═══ CHAPTER OPENING ═════════════════════════════════ */
.opener{min-height:100svh;position:relative;display:flex;flex-direction:column;justify-content:center;
  padding-block:var(--s4) var(--s3);overflow:hidden;}
.opener .fig{position:absolute;right:var(--fr);top:50%;transform:translateY(var(--ft));
  font-family:var(--serif);font-weight:300;font-size:var(--fs);line-height:.72;
  color:var(--warmstone);opacity:var(--fo,.42);z-index:0;pointer-events:none;user-select:none;
  text-shadow:0 -1px 0 rgba(88,74,58,.20), 0 1px 0 rgba(255,252,246,.75);}
.opener .body{position:relative;z-index:3;}
.opener .ttl{margin:1.4rem 0 1.3rem;}
.opener .tick{margin:2.4rem 0 2.3rem;}
#ch1 .opener{--fs:clamp(16rem,66vw,32rem);--fr:-.096em;--ft:-46%;--fo:.44;}
#ch2 .opener{--fs:clamp(14.8rem,59vw,29rem);--fr:-.091em;--ft:-49%;--fo:.40;}
#ch3 .opener{--fs:clamp(15rem,60vw,29.5rem);--fr:-.073em;--ft:-47%;--fo:.41;}
#ch4 .opener{--fs:clamp(14rem,56vw,27.5rem);--fr:-.058em;--ft:-46%;--fo:.37;}
#ch5 .opener{--fs:clamp(14.8rem,59vw,29rem);--fr:-.072em;--ft:-48%;--fo:.41;}
#ch6 .opener{--fs:clamp(14.8rem,59vw,29rem);--fr:-.064em;--ft:-46%;--fo:.40;}
#ch7 .opener{--fs:clamp(16.5rem,68vw,33rem);--fr:-.062em;--ft:-40%;--fo:.46;}

/* ═══ READING ═════════════════════════════════════════ */
.movement{position:relative;padding-block:var(--s1);overflow:hidden;}
.movement .read{position:relative;z-index:2;}

/* Direction B — light moving in a room. One movement per chapter.
   ~2% luminance, no visible edge, no animation. */
.drift{background:linear-gradient(180deg,var(--bone) 0%,#F7F3ED 46%,var(--bone) 100%);}

/* Direction C — architectural words. Only where the essay
   introduces a term. Same logic as the chapter numeral:
   Melissa's own language, oversized, cropped by the edge. */
.termwrap{position:relative;}
.archword{position:absolute;left:0;top:var(--awt,-.16em);white-space:nowrap;
  font-family:var(--serif);font-weight:300;font-size:var(--aws);line-height:.92;
  letter-spacing:-.025em;color:var(--warmstone);opacity:var(--awo,.34);
  text-shadow:0 -1px 0 rgba(88,74,58,.16), 0 1px 0 rgba(255,252,246,.6);
  z-index:0;pointer-events:none;user-select:none;}

/* Direction C — axis breaks. Only where the writing turns.
   Position only; no rule, mark, italic or colour change. */
.read p.turn-hang{margin-left:calc(var(--track) * -1);max-width:var(--measure);}
.read p.turn-in{margin-left:2.4rem;max-width:calc(var(--measure) - 2.4rem);}

.marg{position:absolute;left:calc(var(--edge) + 9px);top:var(--s1);bottom:var(--s1);width:7px;
  border-left:1px solid rgba(156,91,65,.45);border-top:1px solid rgba(156,91,65,.45);border-bottom:1px solid rgba(156,91,65,.45);}

/* ═══ PHOTOGRAPHY — five distinct plate treatments ════
   Never a card. Never a shadow. Never the same crop twice
   in one chapter.                                        */
figure{margin:0;position:relative;}
figure img{display:block;width:100%;height:100%;object-fit:cover;}
.plate-bleed{margin-top:var(--s2);margin-bottom:0;}
.plate-bleed img{aspect-ratio:4/5;object-position:31% 42%;}
.plate-left{margin-top:var(--s2);margin-bottom:0;width:82%;}
.plate-left img{aspect-ratio:9/10;object-position:52% 40%;}
.plate-right{margin-top:var(--s2);margin-bottom:0;width:80%;margin-left:auto;}
.plate-right img{aspect-ratio:1/1;object-position:56% 38%;}
.plate-inset{margin-top:var(--s2);margin-bottom:0;width:64%;max-width:20rem;margin-left:var(--flow);}
.plate-inset img{aspect-ratio:7/9;object-position:50% 34%;}
.plate-band{margin-top:var(--s2);margin-bottom:0;}
.plate-wide{margin-top:var(--s2);margin-bottom:0;}
.plate-wide img{aspect-ratio:2/1;object-position:34% 46%;}
.plate-band img{aspect-ratio:16/11;object-position:52% 40%;}
@media (min-width:760px){
  .plate-bleed img{aspect-ratio:16/9;object-position:center 42%;}
  .plate-band img{aspect-ratio:21/9;object-position:center 38%;}
  .plate-wide img{aspect-ratio:24/9;object-position:32% 46%;}
  .plate-left{width:min(64%,44rem);} .plate-left img{aspect-ratio:5/4;}
  .plate-right{width:min(58%,38rem);} .plate-right img{aspect-ratio:4/3;}
  .plate-inset{width:min(34%,22rem);}
}

/* ═══ NIGHTFALL — locked: a flat dark printed page ════ */
.held{background-color:var(--night);background-image:var(--paint-night);padding-block:var(--s4);position:relative;}
.held .q{font-family:var(--serif);font-weight:300;font-size:var(--d2);line-height:1.36;letter-spacing:-.012em;
  color:var(--candle);max-width:19ch;text-wrap:pretty;}

.held .attr{font-family:var(--serif);font-style:italic;font-weight:300;font-size:var(--t-read);color:var(--ash);margin-top:2.2rem;}
html.js .held .in{opacity:0;transition:opacity 1.4s ease;}
html.js .held.seen .in{opacity:1;}
.before-held{padding-bottom:var(--s2)!important;}
.after-held{padding-top:var(--s2)!important;}

/* ═══ RECOGNITION — on an inserted sheet ══════════════ */
.sheet{background-color:var(--mineral);background-image:var(--paint-mineral);position:relative;}
/* the edge of a bound sheet: one hairline whose density varies, never a torn silhouette */
.sheet::before,.sheet::after{content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(96,88,76,.22) 0%,rgba(96,88,76,.07) 17%,rgba(96,88,76,.20) 39%,
  rgba(96,88,76,.09) 61%,rgba(96,88,76,.21) 83%,rgba(96,88,76,.10) 100%);}
.sheet::before{top:0;} .sheet::after{bottom:0;}
.recog{padding-block:var(--s3);}
.recog .lead{margin-bottom:2.6rem;}
.recog ul{list-style:none;}
.recog li{position:relative;font-family:var(--serif);font-weight:300;font-size:var(--t-emph);line-height:1.5;
  color:var(--ink);padding:.58rem 0;max-width:27ch;}
.recog li::before{content:"";position:absolute;left:calc(var(--flow) * -1 + var(--edge) + 11px);top:1.3rem;
  width:9px;height:1px;background:var(--mushroom);}
/* modest emphasis, in context — not a standalone screen.
   NB: must not be called .close — that is the chapter-close section. */
.recog .recogline{font-family:var(--serif);font-style:italic;font-weight:300;font-size:var(--t-read);
  color:var(--clay);margin-top:3.4rem;max-width:30ch;}
html.js .recog li{opacity:0;transform:translateY(8px);transition:opacity 1.05s ease,transform 1.05s ease;}
html.js .recog li.in{opacity:1;transform:none;}

/* ═══ SAFETY — the weighted plane ═════════════════════ */
.support{padding-block:var(--s3);background-color:var(--stone);background-image:var(--paint-stone);}
.support p{font-family:var(--serif);font-weight:400;font-size:var(--t-read);line-height:1.82;margin-bottom:1.3rem;max-width:34ch;}
.support a{display:block;font-family:var(--serif);font-weight:400;font-size:var(--t-read);color:var(--clay);
  text-decoration:underline;text-underline-offset:4px;padding:.6rem 0;min-height:46px;}

/* ═══ TOOL ════════════════════════════════════════════ */
.tool{padding-block:var(--s2);position:relative;overflow:hidden;}
.tool>*{position:relative;z-index:2;}
.tool .termwrap p{position:relative;z-index:2;}
.tool .archword{z-index:0;}
.tool .name{margin:1.3rem 0 1.4rem;}
.tool .bd{font-family:var(--serif);font-weight:400;font-size:var(--t-read);line-height:1.82;max-width:var(--measure);text-wrap:pretty;}

/* ═══ COMPANION HANDOFF — the inserted sheet ══════════ */
.handoff{padding-block:var(--s3) var(--s2);background-color:var(--mineral);background-image:var(--paint-mineral);position:relative;}
.handoff::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(96,88,76,.22) 0%,rgba(96,88,76,.08) 22%,rgba(96,88,76,.20) 47%,
  rgba(96,88,76,.09) 70%,rgba(96,88,76,.21) 100%);}
.handoff::after{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;
  background:linear-gradient(90deg, rgba(96,88,76,.11), rgba(96,88,76,0));}
.handoff .lead{font-family:var(--serif);font-style:italic;font-weight:300;font-size:var(--t-read);line-height:1.82;max-width:26ch;margin-bottom:1.1rem;}
.handoff .subl{margin-bottom:2.6rem;color:var(--taupe);max-width:34ch;}
.handoff ol{list-style:none;}
.handoff li{position:relative;font-family:var(--serif);font-weight:400;font-size:var(--t-read);line-height:1.6;
  padding:1.1rem 0;border-top:1px solid var(--hair);max-width:32ch;}
.handoff li .n{position:absolute;left:calc(var(--flow) * -1 + var(--edge) + 11px);top:1.22rem;
  font-family:var(--serif);font-style:italic;font-weight:300;font-size:.95rem;color:var(--clay);}
.handoff .folio{display:flex;justify-content:space-between;max-width:32ch;margin-top:2.6rem;padding-top:1rem;border-top:1px solid var(--hair);}
@media (min-width:900px){
  /* the sheet is inhabited rather than stranded */
  .handoff .grid{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,25rem);
    grid-template-rows:auto auto 1fr;gap:0 3.5rem;align-items:start;align-content:start;}
  .handoff .grid>.lead{grid-row:1;} .handoff .grid>.subl{grid-row:2;}
  .handoff .grid .col-b{grid-column:2;grid-row:1 / span 3;}
  .handoff .folio{grid-column:1 / -1;max-width:none;margin-top:3.4rem;}
}

/* ═══ WEEK ════════════════════════════════════════════ */
.week{padding-block:var(--s2);}
.week p{font-family:var(--serif);font-weight:300;font-size:var(--t-emph);line-height:1.6;max-width:27ch;margin-top:1.3rem;text-wrap:pretty;}

/* ═══ CLOSE — bottom-weighted, like the entry ═════════ */
/* two sections on the same paper need a seam, or they read as one */
.movement + .tool,.tool + .partner,.week + .close,.tool + .week{
  border-top:1px solid var(--hair);}
.close{padding-block:var(--s2) var(--s4);}
.close.endclose{padding-block:var(--s3) calc(var(--s4) * 1.6);}
/* the book closes on the dark page, with the last three lines given room */
/* the closing lines follow a held quote on the same dark plane, so the
   boundary between them is a paragraph break, not a plane change */
.held:has(+ .ending-plane){padding-bottom:var(--s1);}
.ending-plane{padding-block:var(--s1) calc(var(--s4) * 1.1);}
/* The last words of the book are not another held quote. They are set
   larger, paced further apart, and introduced by the gold rule so the
   closing reads as a close rather than as more of the same voice. */
.ending-plane .endline{font-size:clamp(1.72rem,7.6vw,2.6rem);line-height:1.36;
  letter-spacing:-.015em;margin-bottom:3rem;max-width:17ch;text-wrap:balance;}
.ending-plane .endline:last-of-type{margin-bottom:0;}
.endrule{width:44px;height:1px;min-height:1px;margin:0 0 var(--s1);opacity:1;
  background:linear-gradient(90deg,var(--ember),rgba(201,164,92,0));}
.close .lbl{margin-bottom:1.5rem;}
.close .line{font-family:var(--serif);font-weight:300;font-size:var(--d2);line-height:1.32;letter-spacing:-.014em;
  max-width:16ch;margin-bottom:2.6rem;}
.close .next{margin-top:2rem;max-width:28ch;}
.close .closeline{margin-top:1.1rem;max-width:30ch;}
/* the ending is given room to close like a book */
.close .ending{margin-bottom:1.5rem;max-width:19ch;}
.close .ending:last-of-type{margin-bottom:0;}
.close .endquiet{margin-top:var(--s3);}
.close .acts{margin-top:1.8rem;display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;}
@media (min-width:560px){ .close .acts{flex-direction:row;align-items:center;gap:1rem;} }

/* ═══ NIGHT PANEL ═════════════════════════════════════ */
#fornow{background-color:var(--night);background-image:var(--paint-night);color:var(--candle);min-height:100svh;padding-block:var(--s3) var(--s3);position:relative;}
#fornow .spine::before{background:rgba(180,168,150,.2);}
#fornow .lbl{color:var(--ash);}
#fornow .o{margin:1.5rem 0 .7rem;}
#fornow .s{font-family:var(--serif);font-style:italic;font-weight:300;font-size:var(--t-read);line-height:1.82;color:var(--ash);margin-bottom:2.8rem;}
#fornow .r{font-family:var(--serif);font-weight:400;font-size:var(--t-read);line-height:1.82;max-width:var(--measure);}
#fornow .r p{margin-bottom:1.2em;text-wrap:pretty;}
.breathwrap{margin-block:3.2rem;}
.breath{width:112px;height:112px;border-radius:50%;margin-bottom:1.3rem;
  background:radial-gradient(circle,rgba(206,144,112,.42),rgba(206,144,112,.04) 70%);border:1px solid rgba(206,144,112,.3);}
html.js .breath{animation:breathe 11s ease-in-out infinite;}
@keyframes breathe{0%{transform:scale(.72)}18%{transform:scale(1.05)}30%{transform:scale(1)}100%{transform:scale(.72)}}
.bnote{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--ash);font-size:var(--t-read);margin-top:.5rem;}
#fornow .num,#resources .num{display:block;font-family:var(--serif);font-weight:400;font-size:var(--t-read);
  text-decoration:underline;text-underline-offset:4px;padding:.6rem 0;min-height:46px;}
#fornow .num{color:var(--ember);} #resources .num{color:var(--clay);}
#fornow .tlink{color:var(--ash);} #fornow .leave{margin-top:3rem;}

/* ═══ PANELS ══════════════════════════════════════════ */
#thewords,#resources,#questions{min-height:100svh;padding-block:var(--s2) var(--s3);}
.ph{margin:1.5rem 0 .8rem;}
.pintro{margin-bottom:2.8rem;}
.wgroup{margin-bottom:2.8rem;}
.wgroup h3{margin-bottom:1.1rem;}
.wline{display:flex;gap:1rem;align-items:flex-start;padding:.85rem 0;border-top:1px solid var(--hair);}
.wline p{font-family:var(--serif);font-weight:400;font-size:var(--t-read);line-height:1.82;flex:1;max-width:28ch;}
.wline button{font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);
  background:none;border:1px solid var(--hair-strong);border-radius:0;padding:.5rem .7rem;cursor:pointer;min-height:40px;white-space:nowrap;}
.wline button:hover{border-color:var(--clay);}
.cq{padding:1.6rem 0;border-top:1px solid var(--hair);max-width:34ch;}

/* ═══ QUESTIONS YOU MIGHT BE ASKING ═══════════════════
   Editorial rows on hairlines. No cards, no chevrons,
   no help-centre furniture.                              */
#questions .qlist{margin-top:2.8rem;border-top:1px solid var(--hair);}
#questions .qitem{border-bottom:1px solid var(--hair);position:relative;}
/* the affordance: two hairlines. Closed reads as +, open as −.
   Same hairline vocabulary as the ticks and rules elsewhere. */
#questions .qmark{position:absolute;right:0;top:2.05rem;width:11px;height:11px;}
#questions .qmark::before,#questions .qmark::after{content:"";position:absolute;background:var(--clayline);opacity:.75;
  transition:opacity .35s ease,background-color .35s ease;}
#questions .qmark::before{left:0;top:5px;width:11px;height:1px;}
#questions .qmark::after{left:5px;top:0;width:1px;height:11px;}
#questions .qbtn[aria-expanded="true"] .qmark::after{opacity:0;}
#questions .qbtn[aria-expanded="true"] .qmark::before{background:var(--clayline);opacity:1;}
#questions .qbtn:hover .qmark::before,#questions .qbtn:hover .qmark::after{background:var(--clayline);opacity:1;}
#questions .qbtn{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:1.35rem 0;min-height:56px;font-family:var(--serif);font-weight:300;font-size:var(--t-emph);
  line-height:1.4;color:var(--ink);transition:color .35s ease;}
#questions .qtext{display:block;max-width:30ch;padding-right:26px;}
#questions .qbtn:hover{color:var(--clay);}
#questions .qbtn[aria-expanded="true"]{color:var(--clay);}
#questions .qans{padding:0 0 1.9rem;max-width:34ch;}
#questions .qans p{font-family:var(--serif);font-weight:400;font-size:var(--t-read);line-height:1.82;
  color:var(--ink);text-wrap:pretty;}
#questions .qans p + p{margin-top:1.1em;}
#questions .qlinks{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--hair);}
#questions .qlinks button{display:block;font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;
  color:var(--clay);background:none;border:none;cursor:pointer;text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;padding:.5rem 0;min-height:44px;text-align:left;}
html.js #questions .qans{display:none;}
html.js #questions .qans.open{display:block;}
#questions .qnote{margin-top:3rem;color:var(--taupe);}

/* ═══ RESOURCES — scan, then act ══════════════════════
   Not a table. The crisis numbers sit on the stone plane,
   because stone means safety everywhere else in the
   product. Everything below is on bone, grouped by space
   with one hairline opening each group, not boxing it.   */
#resources{padding-bottom:0!important;}
#resources .rhead{padding-block:0 var(--s2);}
#resources .now{background-color:var(--stone);background-image:var(--paint-stone);padding-block:var(--s3);}
#resources .rest{padding-block:var(--s3) var(--s2);}
#resources .rgroup{margin-bottom:2.6rem;}
#resources .rest .rgroup{padding-top:1.5rem;border-top:1px solid var(--hair);}
#resources .rgroup:last-of-type{margin-bottom:0;}
#resources .rgroup h3{margin-bottom:1.3rem;}
#resources .res{display:block;padding:.7rem 0 .9rem;text-decoration:none;min-height:56px;}
#resources .res + .res{margin-top:.4rem;}
#resources .res .rname{display:block;font-family:var(--serif);font-weight:400;font-size:var(--t-read);
  line-height:1.5;color:var(--ink);}
#resources .res .raction{display:block;font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;
  color:var(--clay);text-decoration:underline;text-underline-offset:4px;margin-top:.25rem;}
#resources .res:hover .rname{color:var(--clay);}
#resources .res.web{padding-top:0;margin-top:-.35rem;min-height:48px;}
#resources .res.web .raction{margin-top:0;}
.ext{font-size:.9em;}
.inlink{position:relative;color:var(--clay);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;}
.inlink::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;
  transform:translateY(-50%);}   /* the touch target, not the underline */
#resources .rline{font-family:var(--serif);font-weight:400;font-size:var(--t-read);line-height:1.82;
  color:var(--ink);max-width:34ch;}
/* the disclaimer is not a resource: its own plane, its own label */

.note-plane{background-color:var(--mineral);background-image:var(--paint-mineral);padding-block:var(--s3);position:relative;}
.note-plane::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(96,88,76,.22) 0%,rgba(96,88,76,.08) 22%,rgba(96,88,76,.20) 47%,
  rgba(96,88,76,.09) 70%,rgba(96,88,76,.21) 100%);}
.note-plane .disclaimer{margin-top:1.2rem;}
.frontmatter .disclaimer{margin-top:1.2rem;}
#resources .leave{margin-top:0;padding-block:var(--s2) var(--s3);}
/* Questions and The Words never got this override, because their .leave sat
   on the button itself where it read as a button margin. With it back on the
   wrapper, the section's own room does the work — as everywhere else. */
#questions .leave,#thewords .leave{margin-top:0;}
.cq .q{font-family:var(--serif);font-weight:500;font-size:var(--t-read);line-height:1.82;margin-bottom:.35rem;}
.cq .a{font-family:var(--serif);font-weight:400;font-size:var(--t-read);line-height:1.82;color:var(--ink);}
.leave{margin-top:3.2rem;}

/* ═══════════════════════════════════════════════════════
   v9 — THE EXPERIENCE LAYER
   Navigation, refuge, borrowed words, optional music.
   The v8 chapter system above is untouched.
   ═══════════════════════════════════════════════════════ */

/* ── one persistent utility control ──────────────────── */
#tab{transition:opacity .55s ease,transform .55s ease;}
#tab.dim{opacity:.32;}
#tab.night{background:var(--night);border-color:rgba(180,168,150,.3);color:var(--ash);}
#tab.night i,#tab.night i::after{background:var(--ash);}
#menu.night{background-color:var(--night);background-image:var(--paint-night);}
#menu.night .sh::before{background:rgba(180,168,150,.2);}
/* On the night plane the menu turns dark, and every item on it has to
   turn with it. These rules named only `a`, but the eight navigation
   items are buttons — so on the hard-nights plane they kept their daylight
   ink and went all but invisible against the dark. The one place a woman
   is most likely to be looking for a way out, at 3am, was the one place
   she could not read it. The base rule pairs `a` with `.mnav button`;
   so does this one now. */
#menu.night a,#menu.night .mnav button{
  color:var(--candle);border-bottom-color:rgba(180,168,150,.2);}
#menu.night a:hover,#menu.night .mnav button:hover{color:var(--ember);}
#menu.night .mnav button .msub{color:var(--ash);}
#menu.night .lbl{color:var(--ash);}
#menu.night .mfoot{border-top-color:rgba(180,168,150,.2);}
#menu.night .tlink{color:var(--ember);}
#menu.night .utilbtn{color:var(--ember);border-color:rgba(206,144,112,.35);}
#tab:hover,#tab:focus-visible{opacity:1;}
/* Centred while it fits; scrollable from the top when it doesn't.
   `justify-content:center` on a scrolling flex column overflows equally
   at both ends, and the overflow above the start is unreachable — which
   is why the menu opened part-way down with Beginning and Chapters cut
   off and no way to scroll back up. Auto margins centre the same way but
   resolve to zero when there is no free space, so nothing is ever
   stranded above the scroll origin. */
#menu .sh{display:flex;flex-direction:column;justify-content:flex-start;
  padding-block:var(--s3);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;}
#menu .sh > *{flex-shrink:0;}
#menu .sh > :first-child{margin-top:auto;}
#menu .sh > :last-child{margin-bottom:auto;}
#menu .mlbl{margin-bottom:1.6rem;}
#menu .mback{margin-top:2.2rem;}
/* the resume control, converted to a button in the accessibility pass */
#menu #mreturnlink{background:none;border:none;-webkit-appearance:none;appearance:none;
  cursor:pointer;font-family:var(--serif);font-weight:300;font-size:var(--t-read);
  color:var(--clay);text-align:left;width:auto;padding:0;min-height:44px;
  border-bottom:1px solid rgba(135,77,53,.4);}
#menu #mreturnlink:hover{color:var(--ink);}
#menu .mback a,#menu .mback button{border-bottom:none;background:none;border:none;
  -webkit-appearance:none;appearance:none;cursor:pointer;font-family:var(--serif);font-weight:300;
  text-align:left;width:auto;padding:0 0 1.1rem;color:var(--taupe);
  font-size:var(--t-read);}
#menu .mback a:hover,#menu .mback button:hover{color:var(--clay);}
/* The rest of the night menu. Everything below the navigation was still
   wearing daylight colours on the dark plane: the music label, the install
   note, "Forget my place", "Back", and the resume link all measured between
   2.5:1 and 2.6:1 against the board — legible in a lit room, not at 3am on
   the plane built for 3am. .music-row .lbl and the resume link carry their
   own selectors, so these have to match that weight to win. */
#menu.night .mback a,#menu.night .mback button{color:var(--ash);}
#menu.night .mnote,#menu.night .mnote.quiet,
#menu.night #installhelp,#menu.night #forgotnote{color:var(--ash);}
#menu.night .music-row .lbl,#menu.night .mfoot .lbl{color:var(--ash);}
#menu.night #forgetplace,#menu.night #installnow{color:var(--ember);}
#menu.night #mreturn #mreturnlink{color:var(--ember);}
#menu .mback a::before{content:"\2190";margin-right:.55em;font-family:var(--sans);font-size:.72em;
  color:var(--clay);}
#menu .mfoot{margin-top:2.2rem;max-width:24rem;}
.btn.longlabel{white-space:normal;text-align:center;line-height:1.45;max-width:17rem;}
.btn.stacked{flex-direction:column;gap:.5rem;padding:1.05rem 1.6rem;line-height:1.3;text-align:center;}
.btn.stacked .rsub{margin-top:0;}
.rsub{display:block;font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.22em;
  text-transform:uppercase;font-weight:500;color:var(--taupe);margin-top:.5rem;}
#menu.night .rsub{color:var(--ash);}
#fornow .rsub{color:var(--ash);}
#menu .mfoot + .mfoot{margin-top:1.6rem;}
#menu .music-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:24rem;}
#menu .music-row .lbl{color:var(--taupe);}
.utilbtn{font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--clay);background:none;border:1px solid var(--hair-strong);border-radius:0;
  padding:.6rem .85rem;cursor:pointer;min-height:44px;white-space:nowrap;}
.utilbtn:hover{border-color:var(--clay);}
#menu .cl{margin-top:2rem;}

/* ── music entry: a question, not a feature ──────────── */
html.js 
/* ═══ FOR THE HARD NIGHTS ═════════════════════════════
   Its own extended experience, in the Nightfall family.  */
#fornow{padding-block:0 0;}
.nsec{padding-block:var(--s2);position:relative;}
.nsec.arrive{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:var(--s4);}
.nsec.arrive .o{margin:1.7rem 0 .9rem;}
#fornow .r p:last-child{margin-bottom:0;}

/* breathing, given a room of its own */
.nsec.breathe{min-height:74svh;display:flex;flex-direction:column;justify-content:center;padding-block:var(--s3);}
.breathwrap{margin-block:0;}
.breath{width:132px;height:132px;margin-bottom:2rem;}
.bnote{max-width:28ch;}

/* permission: given, never assigned */
.permit{list-style:none;margin-top:2.6rem;}
.permit li{position:relative;font-family:var(--serif);font-weight:300;font-size:var(--t-emph);line-height:1.5;
  color:var(--candle);padding:.62rem 0;max-width:27ch;}
.permit li::before{content:"";position:absolute;left:calc(var(--flow) * -1 + var(--edge) + 11px);top:1.35rem;
  width:9px;height:1px;background:rgba(180,168,150,.55);}
.permit-close{font-family:var(--serif);font-style:italic;font-weight:300;font-size:var(--t-read);
  line-height:1.82;color:var(--ember);margin-top:3rem;max-width:30ch;}
html.js .permit li{opacity:0;transform:translateY(8px);transition:opacity 1.05s ease,transform 1.05s ease;}
html.js .permit li.in{opacity:1;transform:none;}

/* borrowed lines, on either plane */
.borrow{margin-top:2.4rem;}
.bline{display:flex;gap:1rem;align-items:flex-start;padding:1rem 0;border-top:1px solid var(--hair);}
.bline p{font-family:var(--serif);font-weight:400;font-size:var(--t-read);line-height:1.82;flex:1;max-width:28ch;}
.bline:last-of-type{border-bottom:1px solid var(--hair);}
#fornow .bline{border-color:rgba(180,168,150,.22);}
#fornow .bline p{color:var(--candle);}
.copybtn{font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);
  background:none;border:1px solid var(--hair-strong);border-radius:0;padding:.5rem .7rem;cursor:pointer;
  min-height:44px;white-space:nowrap;transition:color .3s ease,border-color .3s ease;}
.copybtn:hover{border-color:var(--clay);}
.copybtn.done{color:var(--taupe);border-color:var(--hair);}
#fornow .copybtn{color:var(--ember);border-color:rgba(206,144,112,.35);}
#fornow .copybtn:hover{border-color:var(--ember);}
#fornow .copybtn.done{color:var(--ash);border-color:rgba(180,168,150,.25);}

/* safety inside the night: stone still means safety */
#fornow .support{background-color:var(--stone);background-image:var(--paint-stone);color:var(--ink);}
#fornow .support p{color:var(--ink);}
#fornow .support a{color:var(--clay);}

/* exit */
.nexit{padding-block:var(--s3) var(--s4);}
.nexit .line{margin-bottom:2.6rem;}
.nexit .acts{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;}
.nexit .acts button{font-family:var(--serif);font-weight:300;font-size:var(--t-emph);color:var(--ember);
  background:none;border:none;cursor:pointer;padding:.85rem 0;min-height:48px;text-align:left;}
.nexit .acts button:hover{text-decoration:underline;text-underline-offset:4px;}
.nsec .lead-more{margin-top:2.8rem;}
#fornow .tlink{color:var(--ember);}

/* ═══ SCROLL CUE ══════════════════════════════════════
   Only on full-height screens that end in empty space with
   no other affordance. A micro label and a hairline that
   fills downward, on the axis. Tapping it moves on.        */
.cue{position:absolute;left:var(--flow);bottom:var(--s1);display:flex;flex-direction:column;align-items:flex-start;
  gap:.75rem;background:none;border:none;cursor:pointer;padding:.5rem 1.5rem .5rem 0;min-height:48px;
  font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.26em;text-transform:uppercase;
  font-weight:500;color:var(--taupe);opacity:var(--cue-op,.72);transition:opacity .7s ease;}
.cue .stem{display:block;width:1px;height:30px;
  background:linear-gradient(180deg,var(--hair-strong),rgba(96,88,76,0));}
.cue:hover{--cue-op:1;color:var(--ink);}
.cue.gone{opacity:0!important;pointer-events:none;}
#fornow .cue{color:var(--ash);--cue-op:.6;}
#fornow .cue:hover{--cue-op:1;color:var(--candle);}
#fornow .cue .stem{background:linear-gradient(180deg,rgba(180,168,150,.4),rgba(180,168,150,0));}

/* ═══ WHEN YOU CAN'T FIND THE WORDS ═══════════════════ */
#thewords .recipients{list-style:none;margin-top:2.6rem;}
#thewords .recipients li:first-child button{border-top:1px solid var(--hair);}
#thewords .recipients button{width:100%;text-align:left;background:none;border:none;
  border-bottom:1px solid var(--hair);cursor:pointer;padding:1.15rem 0;min-height:58px;display:block;
  font-family:var(--serif);font-weight:300;font-size:var(--t-emph);line-height:1.3;color:var(--ink);
  transition:color .35s ease;}
#thewords .recipients button:hover{color:var(--clay);}
#thewords .recipients .arw{color:var(--clay);font-size:.78em;white-space:nowrap;}
#thewords .recipients button:hover .arw{color:var(--ink);}
.wset{padding-block:0;}
html.js .wset{display:none;}
html.js .wset.on{display:block;}
html.js #wpick.off{display:none;}
html.js #thewords.picked .ph,html.js #thewords.picked .pintro{display:none;}
.wset .back{margin-bottom:2.2rem;}
.wset .setname{margin:1.3rem 0 2rem;}
.wroute{margin-top:3rem;padding-top:1.8rem;border-top:1px solid var(--hair-strong);}
.wroute p{font-family:var(--serif);font-weight:400;font-size:var(--t-read);line-height:1.82;max-width:32ch;margin-bottom:1rem;}
/* a route to another panel reads the same wherever it appears */
.wroute button{display:block;font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;
  color:var(--clay);background:none;border:none;cursor:pointer;text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;padding:.5rem 0;min-height:44px;text-align:left;}
.wnote{margin-top:2.6rem;color:var(--taupe);}

/* ═══════════════════════════════════════════════════════
   v10 — THE COVER, ABOUT MELISSA, AND THREE ENRICHED CHAPTERS
   ═══════════════════════════════════════════════════════ */

/* ── the clothbound cover: the screen is the object ────
   Charcoal book cloth, foil title, centred once and only
   here. The axis belongs to the interior.                */
:root{
  --cloth:#2A2623;
  --foil-dark:#CBA663; --foil:#C9A45C; --foil-light:#DCBE83;
  --cloth-sub:#B4A896; --cloth-by:#9C9184;
}
#cover{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:12svh var(--edge) 6svh;overflow:hidden;
  background-color:var(--cloth);
  background-image:
    /* the weave: warp and weft, well below conscious notice */
    repeating-linear-gradient(90deg, rgba(255,244,226,.045) 0 1px, rgba(0,0,0,.045) 1px 3px),
    repeating-linear-gradient(0deg,  rgba(255,244,226,.038) 0 1px, rgba(0,0,0,.06) 1px 3px),
    /* light from the upper left, and the shallow sheen of a bound board */
    radial-gradient(150% 110% at 30% 14%, rgba(255,242,220,.028), rgba(255,242,220,0) 78%),
    linear-gradient(158deg, rgba(255,246,230,.045), rgba(0,0,0,0) 40%, rgba(0,0,0,.16)),
    linear-gradient(var(--cloth),var(--cloth));
}
html.js #cover{display:none;} html.js #cover.active{display:flex;}
#cover .binding{position:absolute;left:0;top:0;bottom:0;width:clamp(16px,3.6vw,48px);z-index:1;
  background-image:linear-gradient(90deg, rgba(0,0,0,.24), rgba(0,0,0,.05) 55%, rgba(255,246,230,.045));}
#cover .body{position:relative;z-index:2;width:100%;max-width:34rem;}

/* the foil: a shallow band of tone, pressed. No glow, no spread. */
#cover .ttl{
  font-family:var(--serif);font-weight:300;text-transform:uppercase;
  font-size:clamp(2.9rem,min(17.4vw,8.2svh),6rem);line-height:1.13;letter-spacing:.17em;

  background-image:linear-gradient(var(--foil-angle,158deg),var(--foil-dark) 8%,var(--foil) 46%,var(--foil-light) 78%,var(--foil) 100%);
  background-size:135% 135%;background-position:var(--foil-x,50%) var(--foil-y,50%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 -1px 0 rgba(0,0,0,.55)) drop-shadow(0 1px 0 rgba(255,235,190,.10));}
#cover .ttl .l{display:block;text-indent:.17em;}   /* one line, one correction */
#cover .ttl .sm{font-size:.62em;letter-spacing:.19em;text-indent:.19em;}
#cover .rule{width:34px;height:1px;margin:6.2svh auto 6.2svh;background:var(--foil);opacity:.5;}
#cover .desc{font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.26em;text-transform:uppercase;
  font-weight:500;line-height:2.1;color:var(--cloth-sub);}
#cover .by{color:var(--foil);opacity:1;}
#cover .by em{color:var(--cloth-by);opacity:.85;font-family:var(--serif);font-style:italic;font-size:1.5em;letter-spacing:.02em;
  text-transform:none;margin-right:.75em;vertical-align:-.04em;opacity:.85;}
#cover .by{margin-top:var(--s1);font-family:var(--sans);font-size:.58rem;letter-spacing:.32em;
  text-transform:uppercase;font-weight:500;color:var(--cloth-by);}
/* OPEN is foiled type, not a button, with an invisible 44px target */
#cover .doors{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0;}
#cover .doors .sep{width:1px;height:14px;background:rgba(180,168,150,.45);flex:none;}
/* the doors speak in the same quiet tone as the descriptor and the byline;
   gold is left to the title and to her name */
#cover .open .arw{display:none;}
#cover .by{color:var(--foil);opacity:1;}
#cover .by em{color:var(--cloth-by);opacity:.85;}
#cover .doorrule{width:34px;height:1px;min-height:1px;margin:var(--s1) auto;flex:none;
  background:linear-gradient(90deg,rgba(201,164,92,0),rgba(201,164,92,.75),rgba(201,164,92,0));}
#cover .open{display:inline-flex;align-items:center;justify-content:center;gap:.85em;
  padding:14px 18px;min-height:48px;background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500;
  color:var(--cloth-by);font-size:.58rem;transition:color .5s ease;}
#cover .open:hover{color:var(--foil-light);}

#cover .state{margin-top:1.1rem;font-family:var(--sans);font-size:.55rem;letter-spacing:.3em;
  text-transform:uppercase;font-weight:500;color:var(--cloth-by);opacity:.75;}
#cover .open .arw{font-size:.9em;letter-spacing:0;}
/* The cover assembles itself once, the first time she opens the book.
   Coming back to it later, it is simply there — waiting three seconds for
   a page you have already seen is the opposite of premium. */
/* The cover no longer assembles itself piece by piece. Four separate
   attempts at the double-appearance all found real bugs and none of them
   ended it, so the choreography goes: the cover is held blank until the
   typefaces are in, then the whole thing arrives once, as one object.
   With nothing staged, there is nothing that can appear twice. */
html.js:not(.fonts) #cover{opacity:0;}
html.js.fonts #cover.active{animation:coverin .5s ease-out forwards!important;}
@keyframes coverin{from{opacity:0;}to{opacity:1;}}
/* the foil keeps following the light either way */
html.js #cover .ttl{transition:background-position .3s linear;}

/* opening: the lettering leaves first, then the cloth */
/* The cover lifts away rather than swinging: the cloth recedes
   a fraction and dissolves, with the page already beneath it.
   No rotation, no perspective, nothing that reads as a card. */
#lift{position:fixed;left:0;right:0;top:0;bottom:-20%;z-index:90;pointer-events:none;opacity:0;visibility:hidden;
  transform-origin:center;backface-visibility:hidden;
  background-color:var(--cloth);
  background-image:linear-gradient(var(--cloth),var(--cloth));}
#lift.on{opacity:1;visibility:visible;transform:none;}
/* an animation rather than a transition: it runs reliably the moment
   the class lands, with no dependence on a prior painted state */
#lift.on.turning{box-shadow:0 16px 34px rgba(0,0,0,.28);
  animation:clothlift 1.15s cubic-bezier(.5,0,.2,1) forwards;}
/* the cover is lifted off the page rather than dissolved in place:
   it rises a little as it goes, with a shadow beneath it, so it reads
   as a sheet being taken away */
@keyframes clothlift{
  0%{opacity:1;transform:translate3d(0,0,0);}
  100%{opacity:0;transform:translate3d(0,-9%,0);}
}
#liftstage{position:fixed;inset:0;z-index:90;pointer-events:none;visibility:hidden;}
#liftstage.on{visibility:visible;}
#lift.on{opacity:1;visibility:visible;}
#lift.off{opacity:0;visibility:visible;transition:opacity 1.1s ease;}
html.js #cover.leaving .body{opacity:0;transition:opacity .18s ease;}

/* ── About Melissa ───────────────────────────────────── */
#about{min-height:100svh;padding-block:var(--s2) var(--s3);}
#about .portrait{margin-block:var(--s2);width:100%;max-width:26rem;}
#about .portrait img{display:block;width:100%;height:auto;}
#about .cap{margin-top:.9rem;max-width:30ch;}
#about .lead{font-family:var(--serif);font-weight:300;font-size:var(--d3);line-height:1.28;
  letter-spacing:-.014em;max-width:18ch;margin:var(--s2) 0 1.6rem;}
#about .sign{font-family:var(--serif);font-style:italic;font-weight:300;font-size:var(--t-read);
  color:var(--taupe);margin-top:1.6rem;}
#about .leave{margin-top:var(--s2);}
@media (min-width:900px){
  #about .portrait{max-width:24rem;}
  #about .read{max-width:var(--measure);}
}

/* ── enrichment: a sequence, not a stack of tool blocks ── */
.seq{padding-block:var(--s3);}
.seq .lead{margin-bottom:var(--s2);}
.seq .move{position:relative;padding:1.6rem 0;border-top:1px solid var(--hair);max-width:34ch;}
.seq .move:last-of-type{border-bottom:1px solid var(--hair);}
.seq .move .mn{position:absolute;left:calc(var(--flow) * -1 + var(--edge) + 11px);top:1.85rem;
  font-family:var(--serif);font-style:italic;font-weight:300;font-size:.95rem;color:var(--clay);}
.seq .move h4{font-family:var(--serif);font-weight:400;font-size:var(--t-read);line-height:1.5;
  color:var(--ink);margin-bottom:.35rem;}
.seq .move p{font-family:var(--serif);font-weight:400;font-size:var(--t-read);line-height:1.82;color:var(--ink);}
.seq .route{display:inline-flex;align-items:center;min-height:44px;font-family:var(--sans);font-size:.78rem;
  letter-spacing:.06em;color:var(--clay);background:none;border:none;cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;padding:.5rem 0;margin-top:.5rem;}
.seq .after{margin-top:var(--s2);}
/* a short aside addressed to someone else, on the reading plane */
.partner{padding-block:var(--s3);}
.partner .pline{font-family:var(--serif);font-weight:400;font-size:var(--t-read);line-height:1.82;
  color:var(--ink);max-width:28ch;margin-top:1.5rem;}
.partner .route{display:inline-flex;align-items:center;min-height:44px;font-family:var(--sans);
  font-size:.78rem;letter-spacing:.06em;color:var(--clay);background:none;border:none;cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;padding:.5rem 0;margin-top:var(--s2);text-align:left;}
/* the permission list on the inserted sheet: given, not assigned */
.allow{padding-block:var(--s3);}
.allow ul{list-style:none;margin-top:var(--s2);}
.allow li{position:relative;font-family:var(--serif);font-weight:300;font-size:var(--t-emph);
  line-height:1.5;color:var(--ink);padding:.58rem 0;max-width:28ch;}
.allow li::before{content:"";position:absolute;left:calc(var(--flow) * -1 + var(--edge) + 11px);top:1.3rem;
  width:9px;height:1px;background:var(--mushroom);}
.allow .after{font-family:var(--serif);font-style:italic;font-weight:300;font-size:var(--t-read);
  line-height:1.82;color:var(--clay);margin-top:var(--s2);max-width:30ch;}

/* This experience has one palette. Nightfall is a designed plane, not a
   theme, so an inverted version would destroy the material system. */
@media (prefers-color-scheme:dark){
  html{color-scheme:light;}
  body{background-color:var(--bone);
       background-image:radial-gradient(125% 62% at 16% -8%, rgba(255,250,240,.7), rgba(255,250,240,0) 58%), var(--paint-bone);
       color:var(--ink);-webkit-text-fill-color:currentColor;}
  .sheet,.handoff,#resources .note-plane{background-color:var(--mineral);background-image:var(--paint-mineral);}
  .support,#resources .now{background-color:var(--stone);background-image:var(--paint-stone);}
  .held,#fornow{background-color:var(--night);background-image:var(--paint-night);}
  #menu{background-color:var(--bone);background-image:var(--paint-bone);} #menu.night{background-color:var(--night);background-image:var(--paint-night);}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}

  html.js #enter .s1,html.js #enter .s2,html.js #enter .you,
  html.js #enter .line,html.js #enter .go{
    filter:none!important;opacity:1!important;animation:none!important;
    text-shadow:none;}
  html.js #enter .you{text-shadow:0 -1px 0 rgba(88,74,58,.14), 0 1px 0 rgba(255,252,246,.8)!important;}
  html.js #enter .you{text-shadow:0 -1px 0 rgba(88,74,58,.14), 0 1px 0 rgba(255,252,246,.8)!important;}
  html.js #cover .ttl,html.js #cover .rule,html.js #cover .desc,html.js #cover .by,html.js #cover .doors{
    opacity:1!important;background-position:0% 0%!important;}
  html.js .held .in,html.js .recog li,html.js .permit li,html.js #enter .addr,html.js #enter .line,html.js #enter .go{opacity:1!important;transform:none!important;}
  #tab.dim{opacity:1!important;}
  html.js .view.active{animation:none!important;}
  #downcue .glyph{animation:none!important;transform:none!important;opacity:.7!important;}
  html.js #enter .rule{height:100%!important;}
}

/* ═══ SPACING MODEL ═══════════════════════════════════════
   One rule, applied everywhere: every section keeps its own
   room above and below its content. Nothing is ever flush
   against a hairline, a plane edge or a photograph, and no
   boundary is the sum of two full steps.

   flow section   50px above, 50px below   -> boundary 101px
   material plane 84px inside, top and bottom -> boundary 134px
                                                                */
.movement,.tool,.week,.seq,.partner,.rhead,.leave,.nexit,.allow,
#about > .pl,#thewords > .pl,#questions > .pl,#resources > .pl{
  padding-block:var(--s1);}
.sheet,.handoff,.support,.chaplist,.otherdoors,.frontmatter,
#resources .now,#resources .rest,.note-plane{
  padding-block:var(--s2);}
.held{padding-block:var(--s2);}
.held.ending-plane{padding-block:var(--s1) calc(var(--s4) * 1.1);}
.close{padding-block:var(--s1) var(--s4);}
.plate,figure.plate,.plate-bleed,.plate-left,.plate-right,
.plate-inset,.plate-band,.plate-wide{margin-block:var(--s1);}
.opener{padding-bottom:var(--s2);}
.view > *:last-child{padding-bottom:var(--s4);}
.nsec{padding-block:var(--s2);}
.plate,figure.plate{margin-bottom:0;margin-top:var(--s2);}

.chaplist,#welcome .frontmatter{padding-top:var(--s1);}
#resources .note-plane{padding-top:var(--s2);}
#welcome .tlink{margin-bottom:0;}
#welcome .frontmatter{margin-top:0;}
.plate,figure.plate{margin-top:var(--s2);margin-bottom:0;}


#about .leave{margin-top:0;}
.btn{text-indent:.24em;}
.btn.stacked .rsub,.btn.longlabel{text-indent:.22em;}
#cover .open{text-indent:0;}

/* On the first screen of the hardest night, one line that goes straight to
   the crisis numbers. Quiet enough not to alarm someone who is simply
   tired; immediate for someone who is not. */
#fornow .urgent{display:inline-flex;align-items:center;min-height:48px;
  margin-top:var(--s1);padding:14px 0;
  font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:var(--ember);background:none;border:none;cursor:pointer;
  border-bottom:1px solid rgba(201,164,92,.5);text-indent:.18em;}
#fornow .urgent:hover{color:var(--candle);}

/* ═══ PWA SHELL ═══════════════════════════════════════════
   The install panel and the update notice. Both belong to the
   same quiet system as everything else: no colour that is not
   already in the palette, no alarm, no urgency. */
#menu #installpanel{margin-top:var(--s1);}
#menu .mnote{font-family:var(--sans);font-size:.94rem;line-height:1.7;color:var(--taupe);
  max-width:34ch;margin-top:.7rem;}
#menu .mnote.quiet{opacity:.82;margin-top:1rem;}
#menu #installnow{margin-top:1rem;}

@media (prefers-reduced-motion: reduce){}

/* the verification date sits with the resources, quietly */
.verified{font-family:var(--sans);font-size:.82rem;letter-spacing:.02em;color:var(--taupe);
  opacity:.85;margin-top:var(--s1);}


/* ═══ COVER PHOTOGRAPH ════════════════════════════════════
   The photograph sits beneath the cloth's own colour and the
   type sits above both, so the title stays live text: sharp at
   every size, selectable, and read aloud correctly. The scrim
   keeps the foil legible wherever the crop lands. */
/* ═══ THE 3AM DOOR ════════════════════════════════════
   A way straight to For the Hard Nights from the first
   screen inside the cover. It arrives last, after the
   address and the invitation have landed, so a reader who
   is simply arriving never has to decline it. */
#enter .hardnight{margin:1.5rem 0 0;}
html.js #enter .hardnight{opacity:0;will-change:opacity;
  animation:emerge var(--dur,2.4s) cubic-bezier(.22,.61,.36,1) var(--at,0s) forwards;}
html.js.fonts #enter .hardnight{--dur:.62s;--at:1.7s;}
html.js #enter.seen .hardnight{opacity:1;animation:none;}
@media (prefers-reduced-motion: reduce){
  html.js #enter .hardnight{opacity:1!important;animation:none!important;}
}

#cover{position:relative;isolation:isolate;}
#cover > .body,#cover .ttl,#cover .rule,#cover .desc,#cover .by,
#cover .doorrule,#cover .doors,#cover .state{position:relative;z-index:2;}




/* ═══ COVER ═══════════════════════════════════════════════
   The cover is the artwork, whole and unmodified. It is scaled to
   fit the screen and never cropped, so the composition is exactly
   as drawn on every device; the cloth fills whatever is left.
   The two doors are real buttons laid over the painted pills, so
   they carry labels, focus and a proper target. */
#cover{padding:0!important;background-color:var(--cloth);
  display:grid;place-items:center;overflow:hidden;}
#cover > .body,#cover .binding{display:none;}
#cover .coverart{position:relative;
  width:min(100vw, calc(100svh * 1055 / 1491));
  height:min(100svh, calc(100vw * 1491 / 1055));}
#cover .coverphoto{width:100%;height:100%;object-fit:contain;display:block;}
#cover .artdoor{position:absolute;left:18.2%;width:64.5%;
  transform:translateY(-50%);height:max(44px, 7.2%);
  background:none;border:none;cursor:pointer;font-size:0;color:transparent;
  -webkit-tap-highlight-color:transparent;}
#cover .artdoor.music{top:80.0%;}    /* the painted pills' own centres */
#cover .artdoor.quiet{top:89.2%;}
/* the painted pills are part of the image, so the response is a soft glow
   inside the button's own shape rather than a change to the artwork */
#cover .artdoor{border-radius:999px;background:rgba(201,164,92,0);
  transition:background-color .35s ease, box-shadow .35s ease, transform .2s ease;}
#cover .artdoor:hover{background:rgba(201,164,92,.10);
  box-shadow:0 0 0 1px rgba(201,164,92,.35), 0 0 22px rgba(201,164,92,.16);}
#cover .artdoor:active{transform:scale(.985);
  background:rgba(201,164,92,.17);
  box-shadow:0 0 0 1px rgba(201,164,92,.5), 0 0 26px rgba(201,164,92,.22);
  transition-duration:.06s;}
#cover .artdoor:focus-visible{outline:2px solid var(--foil);outline-offset:3px;border-radius:999px;}
@media (prefers-reduced-motion: reduce){
  #cover .artdoor{transition:none;}
  #cover .artdoor:active{transform:none;}
}
/* ── the photograph settles ────────────────────────────────
   One slow pass, then it stops. 4% over 28 seconds is felt
   rather than seen, and because it ends the cover does not
   become a screensaver. Motion is off entirely for anyone who
   has asked for less of it. */
/* the drift is off: the artwork is a still image and should stay still */
@keyframes settle{
  from{transform:scale(1.045);}
  to{transform:scale(1);}
}
@media (prefers-reduced-motion: reduce){
  html.js #cover .coverphoto{animation:none;transform:none;}
}

/* the forget control sits with the other menu utilities, deliberately quiet */
#menu #forgetwrap{margin-top:1.6rem;}
#menu #forgetplace{font-size:.94rem;color:var(--taupe);}
#menu #forgetplace:hover{color:var(--clay);}
#menu #forgotnote{color:var(--clay);margin-top:.6rem;}


/* ── pressed ────────────────────────────────────────────────
   A hover state is invisible on a phone. Every control in the book
   now acknowledges the press itself, in its own material. */
.btn:active,.copybtn:active,.qbtn:active,.rec:active,
.tlink:active,.qlinks button:active,.wroute button:active,
#menu .mnav button:active,.contents button:active,.doorlist button:active{
  opacity:.72;transition-duration:.05s;}
.btn:active{background:rgba(135,77,53,.10);}
@media (prefers-reduced-motion: reduce){
  .btn:active,.copybtn:active,.qbtn:active,.rec:active{transition:none;}
}

/* ═══ THE PARTNER DOORWAY AND ITS SHEET ═══════════════════
   Two doorways, one sheet. Quiet enough that a mother who does
   not want to share anything can read straight past it. */
.sendp{padding-block:var(--s1);}
.sendp .lbl{margin-bottom:1.5rem;}
.sendp .sendlead{font-size:var(--t-emph);font-weight:300;color:var(--ink);
  max-width:24ch;margin-bottom:1.1rem;}
.sendp .sendbody{max-width:38ch;margin-bottom:1.2rem;}
.sendp .route{display:inline-flex;align-items:center;min-height:48px;
  font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;color:var(--clay);
  background:none;border:none;-webkit-appearance:none;appearance:none;cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;padding:.5rem 0;text-align:left;}
.sendp .route:hover{color:var(--ink);}
.sendp .route:active{opacity:.72;}

.sheetover{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;
  background:rgba(26,22,20,.42);}
/* The sheet is a panel, not the page. From 1200px up, --edge is derived
   from the viewport to centre the measure — at 1280 it computes to 312px,
   which as left+right padding inside a 34rem panel left the text column at
   zero width and broke every line to one word. The panel keeps the page's
   edge while that edge is small, and caps it. */
.sheetover .sheetin{--sheet-edge:min(var(--edge),40px);
  width:100%;max-height:88svh;overflow-y:auto;
  background-color:var(--bone);background-image:var(--paint-bone);
  border-top:1px solid var(--hair-strong);
  padding:var(--s2) var(--sheet-edge) calc(var(--s2) + env(safe-area-inset-bottom));}
.sheetover .lbl{margin-bottom:1.3rem;}
.sheetover .read{max-width:38ch;margin-block:0 1.4rem;}
.sheetover .sendmsg{font-size:1.02rem;line-height:1.7;color:var(--taupe);
  max-width:40ch;padding:1.1rem 1.2rem;background:rgba(96,88,76,.06);
  border-left:1px solid var(--hair-strong);white-space:pre-line;}
.sheetover .sendacts{display:flex;flex-direction:column;align-items:flex-start;
  gap:.9rem;margin-top:var(--s1);}
.sheetover .cl{margin-top:var(--s1);}
@media (min-width:640px){
  .sheetover{align-items:center;justify-content:center;}
  .sheetover .sheetin{max-width:34rem;border:1px solid var(--hair-strong);}
}

/* ═══ THE PARTNER, FROM THE MENU AND THE CHAPTERS SCREEN ═══
   Two more ways to reach the one sharing dialog. On the chapters
   screen it is a row like the others, because that screen is a list
   of choices and a paragraph would read as an interruption. */
#menu .mnav button .msub{display:block;font-family:var(--sans);font-size:.9rem;
  letter-spacing:normal;text-transform:none;color:var(--taupe);
  line-height:1.5;margin-top:.28rem;max-width:30ch;}