:root{
  --cream:#F3E7D2; --cream-deep:#E7D8BC; --paper:#F7EDD6; --paper-2:#EFE1C0;
  --paper-3:#DFCCA4; --wheat:#EFDFC0; --candle:#F4D9A6; --glow:#E9B873; --honey:#D8B36B;
  --ink:#1F3D38; --muted:#63705F; --teal:#2A9D8F; --teal-dark:#1F7568;
  --teal-deep:#14524A; --gold:#C9A84C; --gold-dark:#A88A3D; --sage:#7BA99A;
  --foil:#D9BE72; --foil-hi:#F3E0AC; --foil-lo:#7C6529;
  --leather:#0F3A33; --leather-hi:#1A5148; --leather-lo:#061C18;
  --serif:"Cormorant Garamond","Iowan Old Style",Palatino,Georgia,serif;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;font-family:var(--sans);color:var(--ink);
  background:
    radial-gradient(720px 500px at 50% 34%, rgba(246,214,148,.40) 0%, rgba(196,150,86,.12) 48%, rgba(196,150,86,0) 74%),
    radial-gradient(1500px 1050px at 50% 26%, #E9D6AE 0%, #C4A379 44%, #8C6C45 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100dvh;overflow:hidden;
}

/* ---------- the preview strip: gone, 1 November 2026 ----------
   Her go-live decision (owner refs 1793532387.967039 and mac-1793535029244) took the preview banner off, so the
   strip has no element left to paint and its rule goes with it. No other rule referred to it, and nothing of hers
   moves: the strip was fixed over the top of the screen and took no room in the page itself. */

/* ---------- stage ---------- */
#stage{
  /* The closed book reads about 7 per cent wider, from 1220. The height is
     unchanged, so the board keeps its vertical proportion, and the 95vw cap is
     untouched, so nothing changes on a narrow screen. 2026-09-13. */
  perspective:2600px;perspective-origin:50% 44%;
  width:min(1305px,95vw);height:min(690px,73dvh);
  display:flex;align-items:center;justify-content:center;position:relative;
}

/* ---------- book ---------- */
#book{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.3,.05,.2,1);
}
.closed #book{transform:translateX(-24.4%) rotateY(6deg)}
/* closed, only the front board, the block edge and the boards behind it show */
.spread,.stack.left{transition:opacity .3s ease .12s}
.closed .spread,.closed .stack.left{opacity:0;transition:opacity .3s ease}
.boards{transition:left .9s cubic-bezier(.4,.05,.2,1), border-radius .9s cubic-bezier(.4,.05,.2,1)}
.closed .boards{left:48.4%;border-radius:3px 22px 22px 3px}

/* the exhale as the book finds its place */
@keyframes bookrest{
  from{transform:translateY(-1.8px) scale(1.0026)}
  to{transform:none}
}
#book.rest{animation:bookrest 860ms cubic-bezier(.16,.74,.22,1) both}


/* ---------- limp leather boards, overhanging the page block ---------- */
.boards{
  position:absolute;top:-3.1%;bottom:-3.4%;left:-2.1%;right:-2.1%;
  border-radius:16px 22px 22px 16px;
  transform:translateZ(-16px);
  pointer-events:none;
  background:
    radial-gradient(70% 55% at 50% 22%, rgba(214,178,116,.09) 0%, rgba(214,178,116,0) 70%),
    radial-gradient(150% 120% at 50% 30%, var(--leather-hi) 0%, var(--leather) 40%, var(--leather-lo) 100%);
  box-shadow:
    0 40px 88px rgba(38,22,4,.52),
    0 12px 26px rgba(38,22,4,.34),
    inset 0 0 130px rgba(4,14,11,.5),
    inset 0 2px 0 rgba(255,238,198,.09),
    inset 0 -4px 9px rgba(0,0,0,.46);
}
/* hide grain and the soft roll of a limp binding */
.boards:before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.6;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' seed='17'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.085' numOctaves='3' seed='23'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  background-size:300px 300px, 560px 560px;
  mix-blend-mode:overlay;
}
.boards:after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(96% 78% at 50% 46%, rgba(0,0,0,0) 46%, rgba(0,0,0,.42) 100%),
    linear-gradient(to right, rgba(0,0,0,.34) 0 5px, rgba(0,0,0,0) 22px),
    linear-gradient(to left,  rgba(0,0,0,.34) 0 5px, rgba(0,0,0,0) 22px),
    linear-gradient(to bottom, rgba(255,240,204,.07) 0 3px, rgba(0,0,0,0) 14px),
    linear-gradient(to top,    rgba(0,0,0,.30) 0 5px, rgba(0,0,0,0) 20px);
}

/* ---------- gilt page block, thick enough to see ---------- */
.stack{
  position:absolute;top:-.7%;bottom:-2.4%;left:50%;width:51.4%;
  border-radius:2px 12px 12px 2px;
  background:
    linear-gradient(to bottom,
      rgba(255,246,214,.42) 0%, rgba(255,246,214,0) 9%,
      rgba(0,0,0,0) 66%, rgba(96,64,18,.22) 88%, rgba(60,38,8,.44) 100%),
    repeating-linear-gradient(to right,
      #B0913D 0 1px, #EBD79B 1px 2px, #8A6F24 2px 3px, #DCC377 3px 4px,
      #9C7F30 4px 5px, #F2E2B0 5px 6px, #A88A38 6px 7px);
  box-shadow:0 30px 64px rgba(56,34,10,.38), inset 0 0 26px rgba(70,46,12,.34);
  transform:translateZ(-7px);
}
.stack.left{
  left:-2.8%;border-radius:12px 2px 2px 12px;transform:translateZ(-7px);
  background:
    linear-gradient(to bottom,
      rgba(255,246,214,.42) 0%, rgba(255,246,214,0) 9%,
      rgba(0,0,0,0) 66%, rgba(96,64,18,.22) 88%, rgba(60,38,8,.44) 100%),
    repeating-linear-gradient(to left,
      #B0913D 0 1px, #EBD79B 1px 2px, #8A6F24 2px 3px, #DCC377 3px 4px,
      #9C7F30 4px 5px, #F2E2B0 5px 6px, #A88A38 6px 7px);
}

/* ---------- spread ---------- */
.spread{position:absolute;inset:0;display:flex;transform-style:preserve-3d}

/* the leaves settling as they arrive — a little residual movement, no bounce */
@keyframes leafrest{
  from{transform:translateZ(2.6px) rotateX(.55deg)}
  to{transform:none}
}
.spread.rest .leaf{animation:leafrest 700ms cubic-bezier(.16,.74,.22,1) both}

.leaf{
  position:relative;width:50%;height:100%;
  background:
    radial-gradient(120% 90% at 108% 46%, rgba(255,247,224,.72) 0%, rgba(246,235,206,0) 58%),
    linear-gradient(to left,#F1E3C2 0%,#E6D5AC 56%,#CFB68B 100%);
  box-shadow:inset -26px 0 44px -28px rgba(62,38,8,.7),
             inset 0 0 120px -28px rgba(96,62,20,.78),
             inset 0 -2px 0 rgba(120,84,34,.22);
  border-radius:11px 2px 2px 11px;
  overflow:hidden;
}
.leaf.recto{
  background:
    radial-gradient(120% 90% at -8% 46%, rgba(255,247,224,.72) 0%, rgba(246,235,206,0) 58%),
    linear-gradient(to right,#F1E3C2 0%,#E6D5AC 56%,#CFB68B 100%);
  box-shadow:inset 26px 0 44px -28px rgba(62,38,8,.7),
             inset 0 0 120px -28px rgba(96,62,20,.78),
             inset 0 -2px 0 rgba(120,84,34,.22);
  border-radius:2px 11px 11px 2px;
}

/* gilt on the outer edge of each open leaf */
.leaf:before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:9px;z-index:3;pointer-events:none;
  background:linear-gradient(to right,
    rgba(108,84,28,.6) 0%, #C9A84C 16%, #F0DDA6 36%, #A88A3D 58%, #E4CB88 78%,
    rgba(247,237,214,0) 100%);
  opacity:.82;
}
.leaf.recto:before{
  left:auto;right:0;
  background:linear-gradient(to left,
    rgba(108,84,28,.6) 0%, #C9A84C 16%, #F0DDA6 36%, #A88A3D 58%, #E4CB88 78%,
    rgba(247,237,214,0) 100%);
}

/* aged paper: fibre, a few foxing blooms, patina toward the edges */
.leaf:after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:1;
  background-image:
    radial-gradient(150% 130% at 50% 48%, rgba(96,62,20,0) 40%, rgba(96,62,20,.26) 100%),
    repeating-linear-gradient(to right, rgba(104,72,28,.05) 0 1px, rgba(104,72,28,0) 1px 4px),
    repeating-linear-gradient(to bottom, rgba(104,72,28,.035) 0 1px, rgba(104,72,28,0) 1px 27px),
    radial-gradient(circle 74px at 19% 24%, rgba(142,100,44,.09),  rgba(142,100,44,0) 72%),
    radial-gradient(circle 52px at 71% 66%, rgba(142,100,44,.075), rgba(142,100,44,0) 74%),
    radial-gradient(circle 96px at 46% 88%, rgba(142,100,44,.055), rgba(142,100,44,0) 76%),
    radial-gradient(circle 40px at 84% 17%, rgba(142,100,44,.065), rgba(142,100,44,0) 72%),
    radial-gradient(circle 62px at 8% 74%,  rgba(142,100,44,.06),  rgba(142,100,44,0) 74%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
  background-size:100% 100%,4px 100%,100% 27px,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,240px 240px;
  background-repeat:no-repeat,repeat,repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;
}

/* spine shadow */
.spine{
  position:absolute;left:50%;top:0;bottom:0;width:64px;margin-left:-32px;z-index:5;
  pointer-events:none;
  background:linear-gradient(to right,
    rgba(74,48,16,0) 0%, rgba(74,48,16,.14) 36%, rgba(74,48,16,.32) 50%,
    rgba(74,48,16,.14) 64%, rgba(74,48,16,0) 100%);
}

/* ---------- the bookmark ribbon ----------
   Silk in the cover's own gilt, built from the same gradient as the gilt rules
   and the page block. It is anchored at the head of the spine, lies in the
   gutter, and falls past the tail of the book. It is a child of #book, so it
   travels with the book and is still there, still marking the place, when the
   book is closed. Its exposed length grows as the reader moves through the
   book, the way a real ribbon is drawn further through the block. */
#ribbon{
  position:absolute;z-index:14;pointer-events:none;
  left:50%;width:clamp(13px,1.45%,20px);margin-left:-8px;
  top:-3.2%;height:calc(103.2% + var(--ribbon-drop,3.4%));
  transform:translateZ(-6px);
  border-radius:2px 2px 0 0;
  background:linear-gradient(to right,
    rgba(108,84,28,.60) 0%, #A88A3D 14%, #C9A84C 34%, #EEDAA0 52%,
    #C9A84C 72%, #8A6F24 100%);
  box-shadow:0 12px 26px rgba(38,22,4,.40), inset 0 0 10px rgba(70,46,12,.28);
  transition:height .9s cubic-bezier(.4,.05,.2,1);
}
/* THE BOOKMARK TASSEL. An ornate curtain-style tassel finishes the cord: a
   crown where the cord enters, a gathered head of wound thread, a binding at the
   neck, and a skirt of separate hanging threads with an uneven hem. Drawn in the
   book's own gilt, with no image file, and hanging below the boards as a real
   one does. */
#ribbon i{
  position:absolute; left:50%; top:100%; margin-top:1px;
  width:clamp(29px,3.1%,42px); height:clamp(54px,6.0%,66px);
  display:block; box-shadow:none; clip-path:none;
  transform:translateX(-50%) rotate(0deg);
  transform-origin:50% 0;
  animation:tasselsway 11s ease-in-out infinite;
  background-image:
    /* the crown, where the cord gathers into the head */
    radial-gradient(58% 120% at 50% 96%,
      #F3E3B4 0%, #EEDAA0 22%, #C9A84C 52%, #8A6F24 82%, rgba(94,72,22,0) 100%),
    /* the binding at the neck, wound tight and narrower than either side */
    linear-gradient(to bottom,
      #4E3C12 0 10%, #A88A3D 10% 26%, #F3E3B4 26% 40%, #C9A84C 40% 56%,
      #EEDAA0 56% 70%, #8A6F24 70% 88%, #4E3C12 88% 100%);
  background-repeat:no-repeat, no-repeat;
  background-size:40% 9%, 48% 8%;
  background-position:50% 0%, 50% 44%;
}
/* the gathered head */
#ribbon i:before{
  content:""; position:absolute; left:50%; top:7%;
  width:78%; height:39%;
  transform:translateX(-50%);
  border-radius:48% 48% 42% 42% / 46% 46% 54% 54%;
  background:
    repeating-linear-gradient(to right,
      rgba(64,44,10,.40) 0px, rgba(243,227,180,.24) 1.4px, rgba(64,44,10,0) 3.2px),
    linear-gradient(to bottom,
      rgba(255,246,214,.42) 0%, rgba(255,246,214,0) 34%,
      rgba(58,38,8,.20) 78%, rgba(58,38,8,.44) 100%),
    linear-gradient(to right,
      #5E4816 0%, #A88A3D 14%, #C9A84C 32%, #F3E3B4 50%,
      #C9A84C 68%, #8A6F24 86%, #4E3C12 100%);
  box-shadow:inset 0 -2px 5px rgba(58,38,8,.44), 0 6px 12px rgba(38,22,4,.32);
}
/* the skirt: separate threads, gaps between them, hem left uneven */
#ribbon i:after{
  content:""; position:absolute; left:50%; top:50%;
  width:100%; height:54%;
  transform:translateX(-50%);
  /* The skirt read as pixelated, and it is drawn rather than photographed, so
     nothing needed re-rendering: the threads were banded on a three-pixel
     pitch with hard stops, which lands on fractions of a device pixel and
     shimmers. They are now a wider pitch with soft stops, so each thread
     anti-aliases and stays clean on a Retina screen and when the book is
     enlarged. Same gold, same threads, same uneven hem. 2026-09-13. */
  background:repeating-linear-gradient(to right,
    rgba(94,72,22,0) 0px, #7A6220 1.3px, #F3E3B4 2.5px,
    #A88A3D 3.7px, rgba(94,72,22,0) 5px);
  clip-path:polygon(30% 0, 70% 0,
    100% 74%, 96% 92%, 88% 82%, 79% 100%, 70% 88%, 61% 97%,
    50% 86%, 40% 99%, 31% 87%, 21% 100%, 12% 83%, 4% 93%, 0 74%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0 66%, rgba(0,0,0,.9) 84%, rgba(0,0,0,.55) 100%);
          mask-image:linear-gradient(to bottom, #000 0 66%, rgba(0,0,0,.9) 84%, rgba(0,0,0,.55) 100%);
  filter:drop-shadow(0 7px 11px rgba(38,22,4,.38));
}
@keyframes tasselsway{
  0%,100%{transform:translateX(-50%) rotate(-1.05deg)}
  50%    {transform:translateX(-50%) rotate(1.05deg)}
}
/* closed, the ribbon still shows below the boards, lying a little flatter */
.closed #ribbon{transform:translateZ(-13px)}

/* ---------- page content ---------- */
.pg{position:absolute;inset:0;padding:clamp(26px,4.2vw,58px) clamp(26px,4.4vw,60px);
    display:flex;flex-direction:column;overflow:hidden;z-index:4}

/* SCROLLING BELONGS TO THE TWO PAGES BEING READ, AND ONLY TO THEM.
   A page whose type runs past the paper scrolls within itself, and its folio
   stays at the foot. A page that fits is unchanged.
   The scoping to .leaf matters and is not cosmetic. A scrolling box inside the
   travelling leaf gets its own compositing layer, which is not culled with its
   parent's backface-visibility, so the front face's type showed through the
   back of the turning sheet and read as mirrored foreign lettering. The flying
   leaf and the settling sheets therefore keep the original overflow:hidden. */
.leaf .pg{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:none}
.leaf .pg::-webkit-scrollbar{width:0;height:0;display:none}
/* The folio stays where the book has always put it. An earlier version pinned it
   to the foot of a scrolling page behind a paper-coloured band, and that band lay
   across the last lines of type. Removed 2026-09-08. */
.pg .folio{position:absolute;bottom:20px;left:0;right:0;text-align:center;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;color:rgba(90,111,107,.55)}
/* Owner, 9 October 2026: one press is one page, so on a two-page screen the page the reader is on carries a very
   quiet mark in its outer margin. It is a cue, not a frame: nothing is hidden, dimmed or moved by it, and a reader
   who never notices it loses nothing. The page also tells a screen reader that it is the current page. */
.pg.here .folio{color:rgba(90,111,107,.85)}
.pg.here .folio::before{content:"";position:absolute;top:50%;left:50%;width:34px;height:1px;
  transform:translate(-50%,9px);background:linear-gradient(to right,transparent,rgba(201,168,76,.75),transparent)}

/* ---------- a page of questions ----------
   Set in the book's own type. An earlier version emitted inline flex styles and
   native browser checkboxes, which read as a web form dropped into a letterpress
   page. The governing master is explicit that the book must not interrogate with
   a generic questionnaire, and that applies to how it looks as much as to what it
   asks. Rewritten 2026-09-08. */
.pg.ask .asknote{font-family:var(--sans);font-size:.62rem;letter-spacing:.06em;
  line-height:1.85;color:rgba(90,111,107,.78);margin:0 0 1.5em;max-width:34em}
.askset{border:0;padding:0;margin:0 0 1.55em;min-width:0}
.asklegend{padding:0;display:block;width:100%}
.askq{display:block;font-family:var(--serif);font-weight:500;
  font-size:clamp(1.02rem,1.45vw,1.3rem);line-height:1.32;color:var(--teal-dark);
  margin:0 0 .62em;letter-spacing:.004em}
.askopt{display:grid;grid-template-columns:auto 1fr;column-gap:.72em;
  align-items:start;margin:.3em 0;cursor:pointer;
  font-family:var(--serif);font-size:clamp(.94rem,1.2vw,1.08rem);
  line-height:1.55;color:var(--ink)}
.askopt input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.askmark{position:relative;width:.82em;height:.82em;margin-top:.4em;
  border:1px solid rgba(108,84,28,.62);border-radius:2px;
  background:linear-gradient(to bottom,rgba(255,253,246,.62),rgba(247,237,214,.42));
  box-shadow:inset 0 1px 2px rgba(70,46,12,.10)}
.askopt input:checked ~ .askmark{border-color:rgba(108,84,28,.85)}
.askopt input:checked ~ .askmark:after{
  content:"";position:absolute;left:.26em;top:.02em;width:.24em;height:.52em;
  border:solid #A88A3D;border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.askopt input:focus-visible ~ .askmark{outline:2px solid rgba(108,84,28,.55);outline-offset:2px}
.asklabel{display:block}
/* s140 correction pass, 24 October 2026. Owner note 1: "group headings on one line where possible". The 36ch cap is a
   prose measure, and on a heading set in small capitals on wide tracking it computed to a box narrower than the words,
   so "Patterns and words I already use" wrapped onto a second line on the continued page while the headings on the
   first page sat on one. The heading now takes the column it is in, like every other heading in the book, and still
   cannot run past it. */
.askgroup{font-family:var(--sans)!important;font-size:.72rem!important;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-dark)!important;margin:1.35em 0 .55em!important;
  padding-top:.7em;border-top:1px solid rgba(176,143,62,.28);max-width:100%!important}
.askset .askgroup:first-of-type{margin-top:.35em!important;padding-top:0;border-top:0}
/* what the reader has said, set as prose. the book does not use bullets. */
.asksaidq{font-family:var(--sans);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-dark);margin:1.1em 0 .28em;font-weight:600}
.asksaid{font-family:var(--serif);font-size:clamp(.94rem,1.2vw,1.08rem);
  line-height:1.55;margin:0 0 .5em;color:var(--ink)}
.askbranch{font-family:var(--serif);font-style:italic;
  font-size:clamp(.98rem,1.25vw,1.12rem);line-height:1.45;
  color:var(--teal-dark);margin:.7em 0 .12em}
.askbranchbody{font-family:var(--serif);font-size:clamp(.9rem,1.15vw,1.02rem);
  line-height:1.6;color:var(--ink);margin:0 0 .5em}
.pg.ask .asktext{display:block;box-sizing:border-box;width:calc(100% - 1.54em);
  margin:.12em 0 .7em 1.54em;padding:.2em .1em .26em;
  font-family:var(--serif);font-size:clamp(.92rem,1.15vw,1.04rem);line-height:1.5;
  color:var(--ink);background:transparent;border:0;
  border-bottom:1px solid rgba(108,84,28,.42);border-radius:0}
.pg.ask .asktext::placeholder{color:rgba(90,111,107,.5)}
.pg.ask .asktext:focus{outline:2px solid rgba(108,84,28,.45);outline-offset:2px;
  background:rgba(255,253,246,.68)}
/* The eyebrow is small capitals on wide tracking, which makes a long word much
   wider than it looks. In a narrow column that pushed words such as
   UNDERSTANDING and APPOINTMENT past the measure, and the break-word net then
   split them down the middle. The net stays, because it is what keeps anything
   from running off the page, but at phone widths the tracking and size come in
   just enough that ordinary words no longer reach it. Nothing hyphenates.
   13 September 2026. */
.eyebrow{font-family:var(--sans);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-dark);margin:0 0 16px;font-weight:600;
  max-width:100%;overflow-wrap:break-word;hyphens:none;-webkit-hyphens:none}

.pg h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.5vw,2.15rem);
  line-height:1.18;color:var(--teal-deep);margin:0 0 14px;letter-spacing:.005em}
.pg h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.1rem,1.7vw,1.42rem);
  line-height:1.3;color:var(--teal-dark);margin:0 0 10px}
.pg p{font-family:var(--serif);font-size:clamp(.98rem,1.24vw,1.14rem);line-height:1.78;
  color:var(--ink);margin:0 0 14px;max-width:38ch}
.pg p.sub{font-family:var(--sans);font-size:.82rem;line-height:1.8;color:var(--muted);max-width:42ch}
/* Owner, 9 October 2026: the small AI disclosure. It is quieter than the note above it and reads as a margin
   remark in the flow of the page, deliberately not a warning: no panel, no border, no background, no colour
   of its own beyond the book's own muted ink, and a hairline of space to set it apart. */
.pg p.sub.ainote{font-size:.74rem;line-height:1.74;letter-spacing:.012em;opacity:.84;
  margin-top:.55em;padding-top:.5em;border-top:1px solid rgba(168,138,61,.22);max-width:44ch}
/* s140 correction pass, 24 October 2026: the same line on a page that holds a single centred line (owner decision
   Mac ref mac-1792850115381 answer 3, the one at the back), set below it with room of its own. */
.pg.centered p.sub.ainote{max-width:36ch;margin-top:2.4em}
/* BOOK-CORR-02 item 1, 27 October 2026 (her one look: "this companion can be lowered and weighted with the aligned
   page more elegantly under pathway"; editorial review B-b0075d round 1 CORRECTED). Where a page asks for it, the
   disclosure keeps its place below the page's own note, in the reading flow, with room enough above it to settle as
   that page's closing disclosure. Nothing else about it changes: the same size, the same ink, the same hairline, the
   same quiet treatment, said once and never divided. It is not pinned to the foot of the leaf, because distance from
   the prose would make it read as a notice. */
.pg p.sub.ainote.ainotesettled{margin-top:1.8em}
/* Owner, 9 October 2026: where a page says that its second job begins part way down, the writing of that job is
   one block, so a continued page breaks between the two jobs and not inside one. It adds no space of its own. */
.pg .pagejob{margin:0;padding:0}
/* s140 correction pass, 24 October 2026 (owner note 5, four short lines set apart in her own text). The lines are the
   page's own prose, set closer together than paragraphs and indented a little, so they read as a short list of
   questions rather than as four paragraphs. They stay with the sentence that introduces them. */
.pg .apartblock{margin:0}
.pg .apartblock > p{margin:0 0 .5em}
.pg .apartlines{margin:0 0 14px;padding-left:1.1em}
.pg .apartlines p{margin:0 0 .22em;max-width:34ch}
.pg .apartlines p:last-child{margin-bottom:0}
.pg .rule{width:52px;height:1px;background:var(--gold);opacity:.75;margin:6px 0 20px}
.pg .quiet{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:1.02rem}
.centered{align-items:center;justify-content:center;text-align:center}
/* THE HEADING REGRESSION, 13 September 2026.
   The 32ch measure here is a prose measure, and it was being applied to the
   eyebrow as well. A ch is the width of a zero in the element's own font, so on
   a heading set at .6rem it computes to a box with no relation to the column:
   286px inside a 653px column on a desktop, and 364px inside a 185px column on
   a phone, where it ran past its own page. Prose keeps the measure but can no
   longer exceed its column, and the heading takes the column it is actually in. */
.centered p{max-width:min(32ch,100%)}
.centered p.eyebrow{max-width:100%}

/* index */
.toc{list-style:none;margin:2px 0 0;padding:0;width:100%;max-width:34ch}
.toc li{margin:0}
/* the six reader-facing groups the entrances are gathered under */
/* Owner, 9 October 2026: the category subheads carry a deep velvet purple with a little plush depth, in the
   violet family the heart on THE DOOR already uses. They stay subheads: small capitals in the Book's own eyebrow
   idiom, with a hairline above and a velvet bloom that fades to nothing at its edges. There is deliberately no
   panel, no enclosing border, no rounded edge and no fill of their own, so nothing here reads as a button. */
/* The size is deliberately left to the READER DIGNITY rule further down, which has governed it since
   14 September 2026, so the Contents does not repaginate: what is strengthened here is weight, tracking,
   colour, depth and the space and hairline above. */
/* OWNER REVIEW, 9 October 2026: the category subheads read flat and ordinary. The violet is warmed into the
   velvet-plum and orchid family and given a little more air and light, so it is cosy and faintly luminous on
   the linen rather than cool and printed. #4B2B52 is a deep warm plum; the bloom behind the words is two soft
   orchid lights, one from the left and one lifting under the line, each fading to nothing well before the
   edge, which is what reads as velvet rather than as a filled panel; the paper highlight above the letters
   and the faint orchid halo around them give the depth without gloss, and there is no second hard shadow to
   make it look stamped. Still a subhead, deliberately: no enclosing border, no rounded edge, no background
   colour, no hover, and a press on one moves nothing. Measured contrast on the paper 10.2 to 1. Its size is
   left exactly where the READER DIGNITY rule of 14 September 2026 has governed it, so nothing repaginates. */
.toc .grp{
  display:block;
  font-family:var(--sans);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#4B2B52;margin:17px 0 5px;padding-top:11px;
  border-top:1px solid rgba(75,43,82,.26);
  background:
    radial-gradient(120% 180% at 0% 50%, rgba(176,122,178,.13) 0%, rgba(176,122,178,0) 62%),
    radial-gradient(76% 150% at 22% 108%, rgba(201,152,170,.10) 0%, rgba(201,152,170,0) 72%);
  text-shadow:0 1px 0 rgba(255,250,236,.86), 0 0 9px rgba(176,122,178,.3);
}
/* 27 October 2026: group-first is the Contents' own first entry (book-engine.js), which is the only one that drops
   the hairline. It was :first-child, which also matched the first entry of a continued Contents leaf. */
.toc li.group-start.group-first .grp{margin-top:2px;border-top:none;padding-top:0}
.toc li.after-groups{margin-top:15px;padding-top:9px;border-top:1px solid rgba(176,143,62,.24)}
.toc button{
  width:100%;display:flex;align-items:baseline;gap:10px;background:none;border:0;
  padding:9px 0;cursor:pointer;text-align:left;
  border-bottom:1px solid rgba(123,169,154,.28);
  font-family:var(--serif);font-size:1.04rem;color:var(--ink);transition:color .18s;
  /* Owner, 9 October 2026: a press on a Contents entry is a press, not a gesture waiting to become a zoom. */
  touch-action:manipulation}
.toc button:hover,.toc button:focus-visible{color:var(--gold-dark)}
/* Every part of the entry belongs to the entry: a press resolves to the row itself rather than to whichever of
   its pieces it happened to land on. Owner, 9 October 2026. */
.toc button > span{pointer-events:none}
.toc li{cursor:pointer}
.toc li .grp{cursor:default}
.toc .n{font-family:var(--sans);font-size:.64rem;letter-spacing:.14em;color:var(--gold-dark);min-width:22px}
.toc .dots{flex:1;border-bottom:1px dotted rgba(90,111,107,.35);transform:translateY(-4px)}
.toc .f{font-family:var(--sans);font-size:.68rem;color:var(--muted)}

/* BOOK-CORR-01 item 9, 27 October 2026 (owner: "add a discreet, single link to an expert … Keep it small if the page
   needs room"). One quiet line under the page's own paragraph, above the choices and set apart from them: smaller
   than the choices, with no rule of its own, so it cannot be mistaken for one of the answers to the question. It
   takes one line and nothing repaginates around it. */
/* Owner, 29 October 2026 (Mac ref mac-1793278988655, answers B-de7a3a): "change it , make it distinct, do it on
   every page it shows up.  make it glow. make it darker, exact colors of the last pages image". It keeps its place,
   its size and its words; what changes is that it is no longer quiet. Its ink is now the exact plum of the heart on
   the last page, #4B2B52, the Book's only purple, instead of the quiet gold it shared with ordinary small type, and
   behind the letters is the gold that moves through that same heart, the Book's existing soft gold light rather
   than any new colour, with the underline taken to the Book's gold at full strength. This is a styles rule, so it
   reaches every page that prints the control. Nothing moves, resizes or repaginates: one short line of the same
   .72rem sans, in a darker ink. Measured contrast of #4B2B52 on the paper 10.2 to 1. */
.pg .expertline{margin:.2em 0 1.1em}
.pg .expertline button{background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.055em;line-height:1.5;font-weight:600;
  color:#4B2B52;text-shadow:0 0 .55em rgba(236,200,120,.55),0 0 .12em rgba(255,240,205,.6);
  border-bottom:1px solid rgba(201,168,76,.9)}
.pg .expertline button:hover,.pg .expertline button:focus-visible{color:var(--teal-deep);
  border-bottom-color:rgba(31,117,104,.6)}
.pg .expertline button:focus-visible{outline:2px solid rgba(108,84,28,.45);outline-offset:3px}

/* Her launch plan item 3 and B-bead85, 29 October 2026: the quiet line to the privacy page on THE DOOR is this
   page's own small print, so the button inside it inherits the surrounding p.sub's font, size, line-height and
   color rather than the browser's own button chrome; this is the one reset rule that inheritance needs. */
.pg .door .doorfootlink button{background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;
  color:inherit;text-decoration:underline}
.pg .door .doorfootlink button:hover,.pg .door .doorfootlink button:focus-visible{color:var(--teal-deep)}
.pg .door .doorfootlink button:focus-visible{outline:2px solid rgba(108,84,28,.45);outline-offset:3px}

/* choices */
.choices{display:flex;flex-direction:column;gap:0;width:100%;max-width:34ch;margin-top:4px}
.choices button{
  background:none;border:0;border-bottom:1px solid rgba(123,169,154,.3);
  padding:11px 2px;text-align:left;cursor:pointer;
  font-family:var(--serif);font-size:1.03rem;line-height:1.35;color:var(--ink);
  transition:color .18s,padding-left .22s}
.choices button:hover,.choices button:focus-visible{color:var(--gold-dark);padding-left:7px}
/* The concern list is a list in a book, not a row of controls, so it keeps its
   hairline rules rather than becoming a column of capsules. What it does take
   from the ruling is the shape of its focus ring, so nothing anywhere in the
   reading pages draws a rectangle around itself. 13 September 2026. */
.choices button:focus-visible{outline:2px solid rgba(108,84,28,.45);outline-offset:3px;
  border-radius:999px}
.choices button.apart{margin-top:14px;border-top:1px solid rgba(201,168,76,.5)}
.choices .hint{font-family:var(--sans);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);display:block;margin-top:3px}

/* ---------- leather cover, blind and gold embossed ---------- */
#cover{
  position:absolute;top:0;bottom:0;left:50%;width:50%;
  transform-origin:left center;transform-style:preserve-3d;
  /* Owner, 5 October 2026: the book opens in under half a second. */
  transition:transform .45s cubic-bezier(.3,.05,.2,1);
  z-index:20;cursor:pointer;border:0;padding:0;font:inherit;color:inherit;
}
#cover .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:3px 18px 18px 3px;overflow:hidden}
#cover .front{
  transform:translateZ(3px);
  background:
    radial-gradient(56% 40% at 50% 33%, rgba(233,200,140,.13) 0%, rgba(233,184,115,.045) 46%, rgba(233,184,115,0) 72%),
    radial-gradient(140% 112% at 50% 26%, var(--leather-hi) 0%, var(--leather) 42%, var(--leather-lo) 100%);
  box-shadow:
    0 34px 78px rgba(40,24,6,.56),
    inset 0 0 130px rgba(6,16,13,.5),
    inset 0 3px 0 rgba(255,240,205,.12),
    inset 0 -5px 10px rgba(0,0,0,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6% 8%;
}
/* pebbled leather grain */
#cover .front:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.085' numOctaves='3' seed='5'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  background-size:300px 300px, 560px 560px;
  mix-blend-mode:overlay;
}
/* worn patina at the corners and along the fore edge */
#cover .front:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(92% 72% at 50% 44%, rgba(0,0,0,0) 40%, rgba(0,0,0,.40) 100%),
    radial-gradient(22% 16% at 8% 6%,   rgba(214,186,132,.13) 0%, rgba(214,186,132,0) 100%),
    radial-gradient(20% 14% at 94% 95%, rgba(214,186,132,.11) 0%, rgba(214,186,132,0) 100%),
    linear-gradient(to left, rgba(255,238,200,.06) 0 2px, rgba(0,0,0,.22) 2px 8px, rgba(0,0,0,0) 20px);
}
/* blind embossed double rule */
#cover .rule-gold{
  position:absolute;inset:20px;border:2px solid rgba(201,168,76,.62);border-radius:12px;pointer-events:none;
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,.62), inset 0 -2px 1px rgba(243,224,172,.26),
    0 2px 2px rgba(243,224,172,.2), 0 -2px 2px rgba(0,0,0,.55);
}
#cover .rule-gold:after{
  content:"";position:absolute;inset:9px;border:1px solid rgba(201,168,76,.34);border-radius:9px;
  box-shadow:inset 0 2px 2px rgba(0,0,0,.5), 0 1px 0 rgba(243,224,172,.16);
}
/* ---------- the mark, pressed into the leather ----------
   It used to be run through a sepia filter and screened over the board, which
   turned a teal globe into pale gold and flattened it against the cover. It is
   now its own colour, deepened toward the brand teal, with the light its
   filaments give off drawn as a separate soft layer and a rim that presses it
   into the leather in the same direction as the blind embossed rules above.
   Reworked 2026-09-09. */
#cover .mark{
  /* Enlarged about 20 per cent on 13 September 2026, from 58%/290px. It stays
     well inside the blind rules and below the title, so the board still reads
     as the dominant object. */
  position:relative;display:block;width:min(70%,348px);aspect-ratio:1/1;
  pointer-events:none;
  /* the contact shadow that seats the medallion in the leather */
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
#cover img{
  position:relative;z-index:1;width:100%;height:auto;display:block;
  /* The lettering inside the mark was being lost, and the cause was here
     rather than in the artwork: a .4px blur laid over type that is only a few
     pixels tall, and a brightness of .84 pulling it under the leather. The
     source is 760 square and is displayed at about 348, so there is ample
     resolution; nothing needed re-rendering or sharpening. The blur is gone and
     the exposure is lifted, with contrast raised a little to hold the edges.
     2026-09-13. */
  filter:
    saturate(1.22) contrast(1.2) brightness(1.0) hue-rotate(-5deg)
    drop-shadow(0 -2px 2px rgba(0,0,0,.66))
    drop-shadow(0 2px 3px rgba(243,224,172,.24));
  pointer-events:none;
}
/* the deepening, and the pressed rim. The rim is dark above and light below,
   which is the direction the cover's existing blind rules are pressed. */
#cover .mark:before{
  content:"";position:absolute;inset:4.5%;border-radius:50%;z-index:2;pointer-events:none;
  /* The deepening is held back off the lower third, which is where the
     lettering sits, so the mark still seats into the leather without veiling
     its own words. 2026-09-13. */
  background:radial-gradient(74% 68% at 50% 30%,
    rgba(20,82,74,0) 0%, rgba(20,82,74,.16) 62%, rgba(10,48,43,.34) 100%);
  box-shadow:
    inset 0 5px 9px rgba(0,0,0,.62),
    inset 0 -5px 8px rgba(243,224,172,.26),
    inset 0 0 0 1px rgba(201,168,76,.28),
    0 -1px 2px rgba(0,0,0,.55),
    0 3px 5px rgba(243,224,172,.17);
}
/* the light the filaments give off: the same artwork, blurred, with only the
   brightest parts surviving, laid back over the top. This is what makes the
   synapses read as glowing rather than as drawn lines. */
#cover .mark:after{
  content:"";position:absolute;inset:7%;z-index:3;pointer-events:none;
  border-radius:50%;
  background:var(--mark) center/116% 116% no-repeat;
  filter:blur(5px) brightness(1.02) contrast(1.7) saturate(1.12);
  opacity:.26;mix-blend-mode:screen;
  /* The bloom is what makes the filaments glow, and it was also what washed
     out the words underneath them. It is now masked away over the lower band
     where the lettering sits, so the figure still gives off light and the type
     stays readable. 2026-09-13. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0 52%,rgba(0,0,0,.34) 64%,rgba(0,0,0,0) 74% 100%);
          mask-image:linear-gradient(to bottom,#000 0 52%,rgba(0,0,0,.34) 64%,rgba(0,0,0,0) 74% 100%);
}
/* ---------- the words on the cover ----------
   Still foil, still raised, but cut harder into the leather so they read at a
   glance: a brighter foil, a touch more weight, a tight dark contact edge
   under each letter and a clean light edge above it, with the old soft
   grey halo taken off because it was what blurred them. Reworked 2026-09-09. */
/* The open hint is pinned to the foot of the board, so the centred column
   needs a floor of its own or it walks into the hint when the reader has
   text at 200 percent. The floor is in em, so it grows with the type the
   same way the column does. 2026-09-13. */
#cover .ctitle{font-family:var(--serif);text-align:center;margin-top:5%;margin-bottom:1.5em;max-width:100%}
/* The title block is a flex item, and a flex item is free to grow past its
   container across the cross axis. On a narrow screen the widest line set the
   block's width, the block ran out past the boards, and the face clipped both
   ends of it. It is now held to the face, and at phone widths the tracking and
   size come in so both lines sit inside the gold rule instead of being cut.
   2026-09-13. */
#cover .ctitle .da,#cover .ctitle .nsn{max-width:100%}
/* The title was foil printed flat on to the board. It is now struck into it:
   a metallic gradient across each letter so the gold varies the way real foil
   does, a fine light edge along the top, a controlled dark edge and contact
   shadow below, and nothing soft anywhere. No glow, no drop shadow, no plastic
   bevel. The gradient is clipped to the glyphs, so the edges stay crisp at any
   size. 2026-09-13. */
#cover .ctitle .da{
  font-size:clamp(1.36rem,2.6vw,2.16rem);letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;display:block;
  /* The line box is pulled in tight to the capitals. A gradient clipped to text
     is laid across the whole box, so a loose line box spent most of the gradient
     on empty leading and left the letters looking flat. Tight, the foil turns
     over the full height of each letter, which is what makes it read as raised
     rather than printed. 2026-09-13. */
  line-height:1.08;
  color:#F0D999;
  /* A background clipped to text is painted underneath the text's own shadows.
     The old light edge was an almost solid cream shadow offset barely a pixel,
     so it sat over the foil and flattened every letter to one pale colour. The
     light edge is now the top of the foil itself, and only the dark edges are
     shadows, because those fall below the letter where they belong. This is
     what makes the lettering read as struck rather than printed. 2026-09-13. */
  background-image:linear-gradient(to bottom,
    #FFFDF4 0%, #FDF2D2 30%, #F3DDA6 45%, #E4C47B 58%, #D0A95A 68%,
    #B98F3F 78%, #EBD08C 88%, #D2AD5B 100%);
  /* One full run of foil per line, so a title that wraps on a phone is struck
     the same way on both lines instead of the first line taking the highlight
     and the second taking the shadow. 2026-09-13. */
  background-size:100% 1.08em;background-repeat:repeat-y;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  /* A text shadow is painted after the background, so on clipped-to-text foil it
     lands on the letter instead of beside it, and was darkening the very metal
     it was meant to lift. A filter shadow is composited behind the finished
     element, so the foil stays and only the board under it darkens. The offsets
     are in em, so the letters are struck the same depth at every size and on a
     Retina screen. 2026-09-13. */
  text-shadow:none;
  filter:
    drop-shadow(0 0.030em 0 rgba(40,24,3,.98))
    drop-shadow(0 0.075em 0.030em rgba(0,0,0,.55));
}
/* The ampersand joins the two names the way the artwork inside the globe joins
   them, and is set apart from both so it reads as a join and not as part of a
   name. 2026-09-13. */
#cover .ctitle .amp{
  display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(.9rem,1.5vw,1.24rem);line-height:1;
  margin:.42em 0 .30em;
  color:#E3C273;
  background-image:linear-gradient(to bottom,
    #FFFBEA 0%, #FFFBEA 22%, #F0D695 38%, #C69B44 58%, #9E7629 72%, #E7C87F 88%, #C29A44 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
  filter:
    drop-shadow(0 0.038em 0 rgba(46,28,4,.96))
    drop-shadow(0 0.090em 0.035em rgba(0,0,0,.5));
}
/* A browser that cannot clip a gradient to text keeps the solid foil and the
   same struck edges rather than losing the letters. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  #cover .ctitle .da{-webkit-text-fill-color:#F0D999;background-image:none}
  #cover .ctitle .amp{-webkit-text-fill-color:#E3C273;background-image:none}
}
#cover .ctitle .nsn{
  font-size:clamp(.76rem,1.2vw,.99rem);letter-spacing:.12em;color:#E0BE6A;
  display:block;margin-top:0;font-family:var(--sans);font-weight:600;
  text-shadow:
    0 -1px 0 rgba(255,244,208,.40),
    0 1px 0 rgba(58,38,6,.92),
    0 2px 2px rgba(0,0,0,.6);
}
#cover .open-hint{position:absolute;bottom:7%;left:0;right:0;text-align:center;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  font-weight:600;color:rgba(243,224,172,.92);text-shadow:0 1px 2px rgba(0,0,0,.78);
  animation:breathe 4.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.72}50%{opacity:1}}
@media (max-width:600px){
  #cover .ctitle .da{font-size:clamp(.82rem,4.2vw,1.06rem);letter-spacing:.13em}
  #cover .ctitle .amp{font-size:clamp(.62rem,3vw,.84rem);margin:.34em 0 .24em}
  #cover .ctitle .nsn{font-size:clamp(.46rem,2.2vw,.58rem);letter-spacing:.02em;margin-top:0}
}
#cover .back{
  transform:rotateY(180deg);
  background:linear-gradient(to right,#D8C29A 0%,#EDE0C2 14%,#F7EDD6 100%);
  box-shadow:inset 0 0 70px -26px rgba(122,86,36,.5);
}
.opened #cover{transform:translateZ(-16px) rotateY(-176deg);cursor:default;pointer-events:none}
.coverdone #cover{visibility:hidden}
.opened #cover .open-hint{opacity:0}

/* ---------- the leaf in motion ---------- */
#flip{
  position:absolute;top:0;bottom:0;left:50%;width:50%;
  transform-origin:left center;transform-style:preserve-3d;
  z-index:15;pointer-events:none;opacity:0;
  will-change:transform;
}
#flip.on{opacity:1}
/* The band of light that travels across the leaf while it turns. Its position
   is driven from the engine through --sheen, and it is what makes the bow in
   the sheet readable rather than a flat board pivoting. Added 2026-09-09. */
#flip .face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;
  background-image:
    linear-gradient(101deg, rgba(255,250,232,0) 0%, rgba(255,249,228,.34) 50%, rgba(255,250,232,0) 100%),
    linear-gradient(to right,#F1E3C2 0%,#E6D5AC 78%,#CFB68B 100%);
  background-size:46% 100%, 100% 100%;
  background-position:var(--sheen,-70%) 0, 0 0;
  background-repeat:no-repeat, no-repeat;
  border-radius:2px 11px 11px 2px;
  box-shadow:0 6px 18px rgba(62,38,8,.2)}
#flip .b{transform:rotateY(180deg);
  background-image:
    linear-gradient(101deg, rgba(255,250,232,0) 0%, rgba(255,249,228,.30) 50%, rgba(255,250,232,0) 100%),
    linear-gradient(to left,#F1E3C2 0%,#E6D5AC 78%,#CFB68B 100%);
  border-radius:11px 2px 2px 11px}
/* gilt on the travelling leaf too */
#flip .face:before{
  content:"";position:absolute;top:0;bottom:0;right:0;width:8px;z-index:3;pointer-events:none;
  background:linear-gradient(to left,
    rgba(108,84,28,.55) 0%, #C9A84C 20%, #EEDAA0 44%, #A88A3D 68%, rgba(247,237,214,0) 100%);
  opacity:.7;
}
#flip .b:before{right:auto;left:0;
  background:linear-gradient(to right,
    rgba(108,84,28,.55) 0%, #C9A84C 20%, #EEDAA0 44%, #A88A3D 68%, rgba(247,237,214,0) 100%);
}

/* ---------- settling sheets: weightless, layered, no curl ---------- */
/* Opaque. These carried alpha between .92 and .98 and were additionally drawn
   at between 14 and 45 per cent opacity, so the page they were falling onto
   could be read straight through them. Paper is opaque; they are now solid and
   they are removed as they land. Fixed 2026-09-09. */
.sheet{
  position:absolute;top:0;bottom:0;width:50%;
  transform-origin:left center;pointer-events:none;
  border-radius:2px 7px 7px 2px;
  background:linear-gradient(to right,#F1E3C2 0%,#E6D5AC 80%,#CFB68B 100%);
  box-shadow:-3px 0 18px rgba(62,38,8,.16);
  backface-visibility:hidden;
  will-change:transform;
  z-index:12;
}
.sheet:before{
  content:"";position:absolute;top:0;bottom:0;right:0;width:7px;pointer-events:none;
  background:linear-gradient(to left, rgba(108,84,28,.5) 0%, #C9A84C 22%, #EEDAA0 48%, rgba(247,237,214,0) 100%);
  opacity:.6;
}
.sheet.l{left:0;transform-origin:right center;border-radius:7px 2px 2px 7px;
  background:linear-gradient(to left,#F1E3C2 0%,#E6D5AC 80%,#CFB68B 100%);
  box-shadow:3px 0 18px rgba(62,38,8,.16)}
.sheet.l:before{right:auto;left:0;
  background:linear-gradient(to right, rgba(108,84,28,.5) 0%, #C9A84C 22%, #EEDAA0 48%, rgba(247,237,214,0) 100%)}
.sheet.r{left:50%}


/* the travelling leaf and the settling sheets carry the same stock */
#flip .face:after,.sheet:after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:
    radial-gradient(150% 130% at 50% 48%, rgba(96,62,20,0) 40%, rgba(96,62,20,.22) 100%),
    repeating-linear-gradient(to right, rgba(104,72,28,.05) 0 1px, rgba(104,72,28,0) 1px 4px),
    repeating-linear-gradient(to bottom, rgba(104,72,28,.035) 0 1px, rgba(104,72,28,0) 1px 27px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
  background-size:100% 100%,4px 100%,100% 27px,240px 240px;
  background-repeat:no-repeat,repeat,repeat,repeat;
}

/* ---------- controls ---------- */
#controls{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(196,166,124,.94),rgba(196,166,124,0));
}
#controls button{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--teal-deep);background:rgba(247,237,214,.94);
  border:1px solid rgba(168,138,61,.62);border-radius:999px;padding:9px 15px;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
#controls button:hover:not(:disabled),#controls button:focus-visible{
  background:var(--teal-deep);color:#F4ECDC;border-color:var(--teal-deep)}
#controls button:disabled{opacity:.32;cursor:default}
/* Owner, 9 October 2026: Previous and Next are the two quiet one-page steps, so they are the lightest controls in
   the strip. Return is the larger movement and is filled rather than outlined, so the eye separates the three. */
#bBack,#bFwd{letter-spacing:.1em;border-color:rgba(168,138,61,.4);background:rgba(247,237,214,.78)}
#bReturn{background:var(--teal-deep);color:#F4ECDC;border-color:var(--teal-deep);letter-spacing:.1em}
#bReturn:hover:not(:disabled),#bReturn:focus-visible{background:#F4ECDC;color:var(--teal-deep);border-color:var(--teal-deep)}
#controls .status{font-family:var(--sans);font-size:.62rem;letter-spacing:.12em;
  color:#5C4A2C;margin-left:8px;min-width:11ch;text-align:left}
.closed #controls{background:transparent}
.closed #controls button:not(#bClose),.closed #controls .status{display:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- travelling indicator ---------- */
#travel{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:55;
  font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--teal-deep);
  background:rgba(247,237,214,.95);border:1px solid rgba(168,138,61,.66);
  padding:12px 22px;border-radius:2px;opacity:0;pointer-events:none;
  transition:opacity .5s ease-in-out;
  box-shadow:0 6px 22px rgba(74,48,16,.18)}
#travel.on{opacity:1}

/* ---------- skeleton key ---------- */
.keywrap{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
.keyglow{animation:keyshine 4s ease-in-out infinite}
@keyframes keyshine{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- door reveal ---------- */
.door{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}
/* HER ANSWER B-1e2646, 30 October 2026: her send button now stands inside THE DOOR's popup, so .expertcard is
   named beside .door here and the button wears exactly the pill it already wore, with nothing new added. */
.door .cta,.lyricspage .cta,.expertcard .cta{display:inline-block;margin:7px 0;font-family:var(--sans);font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  border:1px solid var(--gold-dark);color:var(--teal-deep);padding:12px 22px;border-radius:999px;
  text-decoration:none;background:rgba(201,168,76,.11);cursor:pointer;transition:background .2s,color .2s}
.door .cta:hover,.door .cta:focus-visible,.lyricspage .cta:hover,.lyricspage .cta:focus-visible,.expertcard .cta:hover,.expertcard .cta:focus-visible{background:var(--teal-deep);color:#F4ECDC;border-color:var(--teal-deep)}

/* ---------- the contact form, where the two dead routes stood ----------
   HER LAUNCH PLAN ITEM 1, 29 October 2026 (owner ref 1793283013.670919, batch 2 of her build order). Not one new
   color, font, size or glow enters the Book here, and nothing is shrunk to fit. The fields are set in exactly the
   treatment a page of questions already uses for the reader's own writing (.pg.ask .asktext: the book's serif at
   its own size, no box, one hairline rule underneath), the option is the book's own letterpress checkbox
   (.askopt, .askmark, .asklabel, so native browser checkboxes stay out of the page), the button is the pill the
   two routes already wore (.door .cta), and the two quiet lines are the page's own small print (.sub.narrow).
   The only measures given here are prose measures the book already uses, so the form reads as one column at the
   width of the writing above it rather than as a web form dropped onto the page. */
.doorform{display:flex;flex-direction:column;align-items:center;width:100%;margin:2px 0 0}
/* a prose measure the book already uses (.pg.ask .asknote), set above the 26ch of .pg .sub.narrow, which is a
   measure for one short line and would set her two sentences as a very tall narrow column */
.pg .door .doorform .formnote,.pg .door .formsent{max-width:34ch}
.doorform .formfield{display:block;width:min(34ch,100%);text-align:left;margin:0}
.doorform .formlabel{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.06em;
  line-height:1.85;color:rgba(90,111,107,.78)}
.doorform .asktext{display:block;box-sizing:border-box;width:100%;margin:.12em 0 .7em;padding:.2em .1em .26em;
  font-family:var(--serif);font-size:clamp(.92rem,1.15vw,1.04rem);line-height:1.5;
  color:var(--ink);background:transparent;border:0;
  border-bottom:1px solid rgba(108,84,28,.42);border-radius:0}
.doorform .asktext:focus{outline:2px solid rgba(108,84,28,.45);outline-offset:2px;
  background:rgba(255,253,246,.68)}
.doorform .formopt{width:min(34ch,100%);text-align:left;margin:.2em 0 .9em}

@media (max-width:820px){
  #stage{height:min(640px,68dvh)}
  .pg{padding:22px 20px}
  .pg p{font-size:.92rem;line-height:1.68;max-width:none}
  .pg h2{font-size:1.22rem}
  .toc button,.choices button{font-size:.92rem}
  #controls button{padding:8px 11px;font-size:.6rem;letter-spacing:.1em}
  #controls .status{display:none}
  .leaf:before,.leaf.recto:before{width:6px}
}
/* ---------- THE HEADING REGRESSION, 13 September 2026 ----------
   The eyebrow is a p, and `.pg p` is more specific than `.eyebrow`, so the
   heading has always taken the prose size and the prose measure rather than its
   own. At a phone width that left small capitals on .24em tracking set at very
   nearly body size inside a 145px column, so a thirteen letter word measured
   186px, and the break-word net then split it down the middle.

   The desktop size is left exactly as it is, because that is the setting that
   has been reviewed and approved. Only the phone brings the heading back to a
   true small capital, at the specificity that actually wins, which is enough for
   every heading in the book to fit its column with room to spare. The break-word
   net stays as the last resort, and nothing hyphenates. */
@media (max-width:600px){
  .pg p.eyebrow{font-size:.72rem;letter-spacing:.2em;line-height:1.5}
}

@media (prefers-reduced-motion:reduce){
  #cover,#book{transition-duration:.01ms}
  .keybtn svg{transition:none}
  .keyglow,#cover .open-hint{animation:none}
  #book.rest,.spread.rest .leaf{animation:none}
  #ribbon i{animation:none}
}

/* --- added for the split build --- */
.pg .smalllabel{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dark);font-style:italic}
.pg h2.big{font-size:clamp(1.6rem,2.8vw,2.4rem);margin-bottom:18px}
.pg .rule.c{margin-left:auto;margin-right:auto}
.pg .quote{font-family:var(--serif);font-style:italic;color:var(--muted);
  font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.6;max-width:32ch}
.pg .eyebrow.c{text-align:center;width:100%}
.pg .sub.c{text-align:center}
.pg .sub.narrow{max-width:26ch;margin-left:auto;margin-right:auto}
.keybtn{background:none;border:0;cursor:pointer;padding:10px;display:block}
.keybtn svg{width:min(210px,42vw);height:auto;display:block;
  filter:drop-shadow(0 6px 14px rgba(168,138,61,.42));
  transition:transform .6s cubic-bezier(.16,.74,.22,1),filter .6s}
.keybtn:hover svg,.keybtn:focus-visible svg{transform:rotate(-6deg) scale(1.04);
  filter:drop-shadow(0 10px 22px rgba(201,168,76,.6))}
.door .cta,.lyricspage .cta,.expertcard .cta{border:1px solid var(--gold-dark);background:rgba(201,168,76,.11);font:inherit}

/* ---------- the key, offered inline ----------
   A page that tells the reader the key is here has to show them the key. This is
   the same artwork the back of the book uses, at reading size, with its label
   struck under it in the cover's own foil. It is one control, not two, and it
   sits apart from the row of directions so it cannot be mistaken for one of
   them. No new visual language: the key, the gold, and the book's own type.
   13 September 2026. */
.keycall{margin:1.5em auto 1.3em;display:flex;flex-direction:column;align-items:center;
  text-align:center;max-width:34ch;width:100%}
.keycall .keybtn{padding:10px 22px 12px;display:flex;flex-direction:column;align-items:center;gap:.55em;
  border-radius:999px;background:rgba(201,168,76,.07);border:1px solid rgba(201,168,76,.36);
  transition:background .2s,border-color .2s}
.keycall .keybtn:hover,.keycall .keybtn:focus-visible{background:rgba(201,168,76,.14);
  border-color:rgba(201,168,76,.62)}
.keycall .keybtn svg{width:min(132px,30vw)}
.keycall .keylabel{font-family:var(--sans);font-size:.8rem;letter-spacing:.07em;
  text-transform:uppercase;font-weight:600;color:var(--gold-dark);
  text-shadow:0 1px 0 rgba(255,250,232,.55)}
.keycall .keybtn:hover .keylabel,
.keycall .keybtn:focus-visible .keylabel{color:var(--ink)}
.keycall .keybtn:focus-visible{outline:2px solid rgba(108,84,28,.55);outline-offset:3px;border-radius:999px}
.keycall .keynote{font-family:var(--sans);font-size:.72rem;color:var(--muted);margin:.5em 0 0}
@media (max-width:600px){
  .keycall{margin:1.1em auto 1em}
  .keycall .keybtn svg{width:min(104px,26vw)}
  .keycall .keylabel{font-size:.68rem;letter-spacing:.07em}
}
@media (prefers-reduced-motion:reduce){
  .keycall .keybtn svg{transition:none}
  .keycall .keybtn:hover svg,.keycall .keybtn:focus-visible svg{transform:none}
}

/* ---------- standing support ----------
   Declared per entrance in book-content.js under standingSafety, printed at the
   foot of every page of that entrance and of its questions, including after an
   answer has stopped the asking. It was declared from the beginning and never
   rendered; the engine now measures it with the content and prints it.

   It is quiet, not faint. Safety outranks engagement, so this is set to be read
   at a glance rather than to recede: sans, wide-spaced label, full-strength ink
   on the number itself. margin-top:auto carries it to the foot of a short page
   and lets it follow the type on a full one. It clears the folio, which sits in
   the page padding below it. Added 2026-09-09. */
/* s140 correction pass, 24 October 2026. OWNER DECISION Mac ref mac-1792850115381 answer 1: "make it more condensed,
   and have it sit on the last available line of the page". The label and the route are now one line (standingline in
   book-engine.js) instead of a label line with a line of its own for every route, the rule above it is hairline-thin,
   and the space under it is cut back to the line the folio needs. margin-top:auto still carries it to the foot of the
   page, so it sits on the last available line. Not one word, number or hour of the support wording is shortened, and
   the type stays at full-strength ink: safety is never condensed by saying less of it. */
.pg .standing{margin-top:auto;padding-top:.55em;margin-bottom:.75em;
  border-top:1px solid rgba(201,168,76,.55);max-width:100%}
.pg .standing .standingline{font-family:var(--sans);font-size:.72rem;line-height:1.5;
  color:var(--ink);margin:0;max-width:none}
/* OWNER DECISION Mac ref mac-1792965339491, confirmed by Mac ref mac-1792965780991, 25 October 2026: the line opens
   with the owner's own sentence and is "all one color one font". The opening sentence was set apart as a small gold,
   letter-spaced, uppercase label; it is now set in exactly the type and the ink of the routes beside it, so the box
   reads as one line rather than a label with content after it. It is still the first thing on the line, and the ink
   is the page's own full-strength ink, so nothing about it is quieter than it was. */
.pg .standing .standinglead{font-family:var(--sans);font-size:.72rem;line-height:1.5;
  color:var(--ink);margin:0 .5em 0 0}
/* Set in the page's own ink, not in the muted tone used for asides. The muted
   tone measured 4.04:1 against the paper, under the 4.5:1 needed for small
   type, and a phone number a reader has to squint at is not support. Ink on
   this paper measures about 11:1. Checked 2026-09-09. */
.pg .standing .standingitem{font-family:var(--sans);font-size:.72rem;
  line-height:1.5;color:var(--ink);margin:0 .55em 0 0;max-width:none}
.pg .standing .standingname{font-weight:600}
/* HER ONE LOOK, 27 October 2026, OWNER DECISION Mac ref mac-1793119633030: "only put the words I initially wrote. I
   do not want all that clutter at the bottom. Make it simple and if someone touches that spot open it with the rest
   of the information accessible."
   The line is her one sentence, set exactly as it already was, and where the page has more support to give the same
   words are the control that opens it. The control carries no button chrome: same font, same size, same ink, same
   place, so the foot still reads as one quiet line and not as something to press. The rest opens upward over the
   page, positioned rather than inserted, so it cannot reflow the type, cannot move the box off the last available
   line and cannot change how a page is filled. It is set on the page's own paper with the same hairline the box
   uses, at the same size and in the same full-strength ink as the line, because safety is never set quieter than
   the rest of the page. */
.pg .standing{position:relative}
/* font and ink are inherited, never restated, so the line keeps the size the three width rules below give it and
   this control can never drift into a type of its own. */
.pg .standing button[data-standingopen]{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;
  text-align:left;cursor:pointer}
.pg .standing button[data-standingopen]:hover,.pg .standing button[data-standingopen]:focus-visible{text-decoration:underline}
.pg .standing .standingrest{position:absolute;left:0;right:0;bottom:calc(100% + .4em);
  background:var(--paper);border:1px solid rgba(201,168,76,.55);padding:.5em .6em;
  max-height:11em;overflow:auto;z-index:6}
.pg .standing .standingrest .standingitem{display:block;margin:0 0 .45em}
.pg .standing .standingrest .standingitem:last-child{margin-bottom:0}

/* ---------- the closing reflection ----------
   Every branch body ends on a question. Those questions are held apart from the
   body so they read as something to sit with rather than as one more item to
   answer, and the field beside one is optional, never appears in "What you have
   said so far", and is gone when the page closes like everything else here.
   Added 2026-09-09. */
.pg.ask .reflect{margin:.9em 0 1.5em;padding:.85em 0 0;
  border-top:1px solid rgba(201,168,76,.4)}
.pg.ask .reflectq{font-family:var(--serif);font-style:italic;
  font-size:clamp(.95rem,1.2vw,1.08rem);line-height:1.7;color:var(--ink);
  margin:0 0 .7em;max-width:42ch}
.pg.ask .asktext.reflecttext{margin:0}

/* ---------- where you could go from here ----------
   Built only from the entrance's own approved crossRefs and the key at the back.
   Set quieter than the choice pages, because this is an offer at the end of a
   reading rather than the question the page is asking. Added 2026-09-09. */
/* ---------- THE SHAPE OF A CONTROL ----------
   Owner ruling, 13 September 2026: reader-facing controls are softly oval, not
   rectangular. This is the one place that decides it, so nothing is styled
   button by button.

   Until now the direction rows on text pages had no styling at all and fell back
   to the browser's own grey rectangle, which is what read as an app rather than
   as a book. They are pills now, in the book's own teal on its own paper, at the
   same quiet weight the reading pages already use. They are not capsules: the
   padding is small, the type is the book's, and the row wraps like a line of
   text rather than sitting up as a toolbar.

   A long label wraps inside the pill and the ends stay round, because the radius
   is larger than any height the control can reach. Nothing clips, because the
   text is allowed to wrap and to break a long word if it has to. The hit area is
   held at a comfortable minimum rather than being set by the font size alone,
   and the focus ring follows the same oval. */
.pg .onward,
.pg .altlist{display:flex;flex-wrap:wrap;gap:.5em;margin:.35em 0 .5em;
  align-items:stretch}
.pg.ask .onward,
.pg.ask .altlist{gap:.45em}
.pg .onward button,
.pg .altlist button{
  display:inline-flex;align-items:center;box-sizing:border-box;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.045em;line-height:1.45;
  text-align:left;color:var(--teal-deep);
  background:rgba(255,253,246,.5);
  border:1px solid rgba(42,157,143,.34);
  border-radius:999px;
  padding:.52em 1.05em;min-height:2.45em;max-width:100%;
  white-space:normal;overflow-wrap:break-word;hyphens:none;
  cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.pg.ask .onward button,
.pg.ask .altlist button{font-size:.78rem}
.pg .onward button:hover,
.pg .altlist button:hover{border-color:rgba(42,157,143,.72);
  background:rgba(42,157,143,.07);color:var(--ink)}
.pg .onward button:focus-visible,
.pg .altlist button:focus-visible{outline:2px solid rgba(108,84,28,.5);
  outline-offset:2px;border-radius:999px}
.pg .onward button[disabled]{opacity:.45;cursor:default}
/* Owner, 9 October 2026: one of a row's onward choices may be the primary way on. It keeps the same pill, the
   same measure and the same wrapping, and takes the Book's filled teal so the eye knows which one it is without
   anything else in the row being made quieter than it was. */
.pg .onward button.primaryway{
  background:var(--teal-deep);border-color:var(--teal-deep);color:#F4ECDC;font-weight:500}
.pg .onward button.primaryway:hover{background:#0F3F38;border-color:#0F3F38;color:#FBF4E4}

/* ---------- provisional marker ----------
   Anything carrying provisional: true is a change made for clinical review and
   says so on the page, so nothing provisional can be read as settled while this
   build is being reviewed. Added 2026-09-09; these markers come out when the
   changes are accepted or refused. */
.prov{display:inline-block;font-family:var(--sans);font-size:.55rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark);
  border:1px solid rgba(201,168,76,.6);border-radius:2px;
  padding:.15em .45em;margin-left:.55em;vertical-align:.12em;white-space:nowrap}
.pg.ask .asknote.onechoice{display:block;margin:.15em 0 0;font-size:.58rem}

/* A map made from the reader's own choices. It is deliberately quiet: enough
   orientation to prevent the conversation from feeling scattered, without
   turning the book into a clinical flowchart. */
.pg.ask .pathmap{margin:.1em 0 1.55em;padding:.78em .9em .82em;
  border-left:2px solid rgba(42,157,143,.42);background:rgba(42,157,143,.035)}
.pg.ask .pathmap .eyebrow{margin-bottom:.55em}
.pg.ask .pathentry,.pg.ask .pathquiet,.pg.ask .pathnow{
  font-family:var(--sans);font-size:.64rem;line-height:1.65;color:var(--muted);
  margin:0 0 .55em;max-width:44ch}
.pg.ask .pathentry span{color:var(--teal-deep)}
.pg.ask .pathchips{display:flex;flex-wrap:wrap;gap:.35em;margin:.1em 0 .62em}
.pg.ask .pathchips span{font-family:var(--sans);font-size:.59rem;line-height:1.35;
  color:var(--teal-deep);border:1px solid rgba(42,157,143,.3);border-radius:999px;
  padding:.26em .58em;background:rgba(255,253,246,.55)}
.pg.ask .pathnow strong{color:var(--gold-dark);font-weight:600}
/* BOOK-CORR-01 item 13, 27 October 2026, the same owner note: the Book's reply to a chosen answer takes the same
   warm golden amber as the reader's reflected words, so a reply reads as a response rather than as more page. */
.pg.ask .answerreply{font-family:var(--serif);font-size:clamp(.94rem,1.18vw,1.06rem);
  line-height:1.68;color:#8A5A1E;margin:-.35em 0 1.15em;
  padding-left:.85em;border-left:1px solid rgba(201,168,76,.58);max-width:42ch}
.pg.ask .finishline{padding:.95em 0 1em;margin:.5em 0 1.1em;
  border-top:1px solid rgba(201,168,76,.55);border-bottom:1px solid rgba(201,168,76,.28)}
.pg.ask .finishline .eyebrow{margin-bottom:.6em}
.pg.ask .finishline p:not(.eyebrow){font-size:clamp(.94rem,1.18vw,1.06rem);line-height:1.65}
.pg.ask .finishline button{display:inline-flex;align-items:center;
  font-family:var(--sans);font-size:.7rem;letter-spacing:.06em;
  color:var(--teal-deep);background:rgba(255,253,246,.5);border:1px solid rgba(42,157,143,.35);
  border-radius:999px;padding:.52em 1.05em;min-height:2.45em;
  white-space:normal;overflow-wrap:break-word;cursor:pointer}
.pg.ask .finishline button:hover{border-color:rgba(42,157,143,.7);background:rgba(42,157,143,.06)}
.pg.ask .finishline button:focus-visible{outline:2px solid rgba(108,84,28,.45);outline-offset:2px}

/* The rules above these two blocks are borders rather than separate elements, so
   pagination can never leave a gold line hanging at the foot of a page with the
   block it introduced carried over. Both blocks are marked data-keep, so they
   move whole rather than breaking a heading away from what it introduces. */
.pg.ask .onwardblock,
.pg.ask .undoblock{padding-top:.95em;margin-top:.3em;
  border-top:1px solid rgba(201,168,76,.55)}

/* ---------- the reading rhythm ----------
   The page used to present all of its questions at once and collect every
   passage at the foot. It now moves: one question, what you said, the passage
   that belongs to that answer, the other shapes it could have been, and then
   the next question. These are the small pieces of that rhythm.
   Added 2026-09-09. */
.pg.ask .noticed{font-family:var(--serif);font-size:clamp(.92rem,1.16vw,1.04rem);
  line-height:1.7;color:var(--muted);margin:.15em 0 1em;max-width:44ch}
/* BOOK-CORR-01 item 13, 27 October 2026 (owner: the reader's own words, reflected back, "sit in the same dark ink as
   the page and are easy to miss"). The reader's words after "You said", and the Book's reply to a chosen answer, are
   set in a warm golden amber, #8A5A1E, measured at 5.1 to 1 on the paper, which passes the Book's readability rule
   for body text at all three paper tones. Nothing moves and nothing resizes. */
.pg.ask .noticed .saidwhat{color:#8A5A1E;font-style:italic}
.pg.ask .unknown{font-family:var(--sans);font-size:.66rem;letter-spacing:.1em;
  color:var(--gold-dark);margin:1.5em 0 1.1em;max-width:40ch}
.pg.ask .alsoblock{padding-top:.85em;margin:.4em 0 1.4em;
  border-top:1px solid rgba(123,169,154,.42)}
.pg.ask .recognition{padding:.4em 0 0;margin:.5em 0 .5em;
  border-top:1px solid rgba(201,168,76,.55);border-bottom:1px solid rgba(201,168,76,.28)}
/* Owner's live review, 9 October 2026: what has been said is set a little tighter, so the block is more likely to
   stay on the page it belongs to instead of being carried whole to the next one and leaving the page before it
   half empty. The words and their order are unchanged. */
/* s140 bounded correction, 24 October 2026, on the owner's "yes" in her B-2490cb answers: this block was being
   divided, and the page the reader was on kept the heading by itself while the answers, the "Next:" line, "Review or
   change my answers" and "Go on to that question" were carried to the facing page. Her requirement of 9 October is
   that the block answers all three of the reader's questions in ONE place. The running header added in the s140
   structural round is what pushed it over: measured in headless Chrome against these bytes, the whole block is 552px
   where a page at 1280x900 has 720px and the header takes it to 736px, and 544px where a page at 390x844 has 641px
   and the header takes it to 677px. So the block is set tighter again, here and only here, by the same means and for
   the same reason as the 9 October tightening above: the leading of the small-capital prompts and the space around
   them. Not one word, list, control, order or colour changes, nothing is shrunk below reading size, and nothing
   outside this one block is touched. */
.pg.ask .recognition .asksaidq{margin:.42em 0 .14em;line-height:1.45}
.pg.ask .recognition .asksaid{margin:0 0 .26em}
.pg.ask .recognition p{margin-top:.15em;margin-bottom:.3em}
/* And the way on from it: what can be changed, and the question that comes next. */
.pg.ask .recognitionnext{margin:.3em 0 .1em;padding-top:.38em;border-top:1px solid rgba(201,168,76,.28)}
.pg.ask .recognitionnext .nextasked{margin:.32em 0 .08em;color:var(--teal-deep)}
.pg.ask .recognitionnext .onward{margin:.2em 0 .1em}
/* the way back from the last page of the book */
.pg .onward.closing{display:flex;flex-direction:column;flex-wrap:nowrap;gap:.45em;
  margin:1.1em auto 0;max-width:26ch;align-items:stretch}
.pg .onward.closing button{justify-content:center;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;
  text-align:center;color:var(--teal-deep);background:rgba(255,253,246,.5);
  border:1px solid rgba(42,157,143,.3);border-radius:999px;
  padding:.52em 1.05em;min-height:2.45em;cursor:pointer}
.pg .onward.closing button:hover{border-color:rgba(42,157,143,.65);background:rgba(42,157,143,.06)}

/* ---------- READER DIGNITY PASS, 14 September 2026 ----------
   The inquiry remains interactive, but its hierarchy now belongs to a book:
   ordinary reading size, an unboxed orientation, quiet selection marks and no
   duplicate contents/exit row inside every page. */
.pg.ask .asknote{font-size:.76rem;letter-spacing:.035em;line-height:1.7}
.eyebrow{font-size:.7rem;letter-spacing:.2em}
.asksaidq{font-size:.72rem;letter-spacing:.12em}
.choices .hint,.toc .grp{font-size:.72rem}
.toc .n,.toc .f{font-size:.74rem}
/* s140 correction pass, 24 October 2026: the condensed box keeps a little of this pass's extra size, enough for the
   number to stay easy to read, but not enough to take a second line back (owner decision Mac ref mac-1792850115381). */
/* 25 October 2026, the same owner decision: the opening sentence takes the same size as the rest of the line here too,
   so "one color one font" holds at every width. */
.pg .standing .standingline,.pg .standing .standingitem,.pg .standing .standinglead{font-size:.76rem}
.prov{font-size:.7rem}
.pg.ask .unknown{font-size:.76rem;letter-spacing:.065em}
.pg.ask .pathentry,.pg.ask .pathquiet,.pg.ask .pathnow{font-size:.76rem;line-height:1.65}
#controls button{font-size:.76rem;letter-spacing:.1em}
#controls .status{font-size:.72rem}

/* The answer mark is a small reading mark, not a form box. */
.askmark{width:.72em;height:.72em;margin-top:.46em;border-radius:50%;
  background:transparent;box-shadow:none}
/* BOOK-CORR-01 item 12, 27 October 2026 (owner: a selected choice "shows only a faint gold dot, which is hard to
   see"). A chosen answer now takes the Book's purple, #4B2B52, on the dot and on its own words, so a reader can see
   their picks at a glance. It is the velvet plum of the Contents category subheads and of the heart on the back
   page, the Book's only purple, measured at 10.2 to 1 on the paper. Nothing moves, nothing resizes and nothing
   repaginates: only the colour of a mark and of the words beside it changes. */
.askopt input:checked ~ .askmark{border-color:#4B2B52;background:#4B2B52}
.askopt input:checked ~ .askmark:after{content:none}
.askopt input:checked ~ .asklabel{color:#4B2B52}

/* “Where you are” reads like a margin note. The reader's paths are words,
   separated typographically, rather than dashboard chips in a shaded panel. */
.pg.ask .pathmap{margin:.15em 0 1.5em;padding:.8em 0 .7em;
  border-left:0;border-top:1px solid rgba(42,157,143,.34);
  border-bottom:1px solid rgba(42,157,143,.22);background:transparent}
.pg.ask .pathchips{display:block;margin:.1em 0 .62em}
.pg.ask .pathchips span{display:inline;font-family:var(--serif);font-style:italic;
  font-size:1rem;line-height:1.55;color:var(--teal-deep);border:0;border-radius:0;
  padding:0;background:transparent}
.pg.ask .pathchips span + span:before{content:"  ·  ";color:var(--gold-dark);font-style:normal}
.pg.ask .onward button,.pg.ask .altlist button{background:transparent;border-color:rgba(42,157,143,.28)}
.pg.ask .quiet-action{border-top:0;padding-top:.25em}

/* ---------- ONE READABLE PAGE ON A PHONE ---------- */
@media (max-width:600px){
  #stage{width:min(92vw,520px);height:min(720px,76dvh)}
  #book{width:100%}
  .closed #book{transform:none}
  .spread{display:block}
  .leaf{position:absolute;inset:0;width:100%;border-radius:11px}
  .leaf.recto{border-radius:11px}
  .mobile-left .leaf.recto,.mobile-right .leaf.verso{display:none}
  .mobile-left .leaf.verso,.mobile-right .leaf.recto{display:block}
  .spine,#flip,.sheet{display:none!important}
  /* THE RIBBON ON A PHONE, 31 October 2026. A phone shows one page at a time, so
     the gutter is no longer at the middle of the screen: it is the page's own
     inner edge. The ribbon kept its two-page place at left:50% and so fell
     straight down the middle of the words, 13px of silk across every line it
     met. It now lies along that inner edge, clear of the page's 27px margin, so
     it still marks the reader's place, still lengthens as they read, and still
     carries its tassel. Nothing else about the ribbon changes, and the two-page
     widths are untouched. */
  #ribbon{left:6px;margin-left:0}
  .boards{left:-2.1%;right:-2.1%;border-radius:16px 22px 22px 16px}
  .closed .boards{left:-2.1%;border-radius:16px 22px 22px 16px}
  .stack{left:-.8%;width:101.6%;border-radius:10px}
  .stack.left{display:none}
  #cover{left:0;width:100%;transform-origin:left center}
  .pg{padding:30px 27px 46px}
  .pg p{font-size:1rem;line-height:1.7}
  .pg h2{font-size:1.5rem}
  .pg h3{font-size:1.24rem}
  .pg p.eyebrow{font-size:.74rem;letter-spacing:.16em;line-height:1.5}
  .askq{font-size:1.16rem}
  .askopt{font-size:1rem;line-height:1.55}
  .toc button,.choices button{font-size:1rem}
  #controls{flex-wrap:wrap;gap:4px;padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
  #controls button{font-size:.75rem;letter-spacing:.02em;padding:8px 8px;white-space:nowrap}
  #controls .status{display:none}
}

/* ---------- COMFORTABLE DESKTOP READING, 14 September 2026 ----------
   The open book is larger on a laptop or desktop, and the type grows with it.
   The phone keeps its separate one-page setting above. */
@media (min-width:601px){
  #stage{width:min(1435px,98vw);height:min(750px,80dvh)}
  .pg p{font-size:clamp(1.12rem,1.35vw,1.28rem);line-height:1.72}
  .pg p.sub{font-size:.92rem;line-height:1.72}
  .pg h2{font-size:clamp(1.7rem,2.65vw,2.32rem)}
  .pg h3{font-size:clamp(1.25rem,1.85vw,1.58rem)}
  .askq{font-size:clamp(1.14rem,1.55vw,1.42rem)}
  .askopt,.asksaid,.pg.ask .noticed{font-size:clamp(1.04rem,1.28vw,1.16rem)}
  .choices button,.toc button{font-size:1.1rem}
  .pg.ask .asknote{font-size:.82rem}
  .eyebrow{font-size:.75rem}
  .pg.ask .pathentry,.pg.ask .pathquiet,.pg.ask .pathnow{font-size:.82rem}
  /* s140 correction pass, 24 October 2026: condensed, and still comfortably readable on a desktop. */
  .pg .standing .standingline,.pg .standing .standingitem,.pg .standing .standinglead{font-size:.8rem}
  #controls button{font-size:.8rem}
}

/* OPEN remains a whisper, but it can now be found without searching. Its warm
   glow rises and recedes on a slow 6.5-second breath rather than pulsing. */
#cover .open-hint{
  font-size:.72rem;letter-spacing:.28em;color:#F4D99A;
  text-shadow:0 1px 2px rgba(0,0,0,.82),0 0 6px rgba(233,184,115,.62),0 0 14px rgba(233,184,115,.28);
  animation:breathe 6.5s ease-in-out infinite
}
@keyframes breathe{
  0%,100%{opacity:.68;text-shadow:0 1px 2px rgba(0,0,0,.82),0 0 4px rgba(233,184,115,.46),0 0 10px rgba(233,184,115,.18)}
  50%{opacity:1;text-shadow:0 1px 2px rgba(0,0,0,.82),0 0 9px rgba(244,217,154,.88),0 0 22px rgba(233,184,115,.5)}
}

/* ---------- EMERGENCY ----------
   The persistent Emergency control (owner ruling 18 September 2026: one quiet
   word, top right of every open page) was removed by the owner on 28 October
   2026, Mac ref mac-1793224332977, so its rules are gone from here. The panel
   itself is unchanged, further down this file, and every page still carries
   the standing support line with its own routes behind the press. */

/* ---------- THE ENDING, owner approval 18 September 2026 ----------
   After Opt out the book is shut on its own cover and the whole strip is gone,
   Close book included. The two sentences are lettered on the cover where it
   usually says Open the book, and arrive once the board has closed. The one
   control stands where Open book stands on the closed cover, in the strip's own
   shape. The cover cannot be pressed, so Open the book again is the one way
   in. It is now the one control on the closed cover: the Emergency control
   that used to stay here was removed with every other printing of it
   (owner, 28 October 2026, Mac ref mac-1793224332977). */
.ended #controls{display:none}
.ended #cover{cursor:default}
.ended #cover .open-hint{visibility:hidden}
#endingLines{
  position:absolute;left:50%;width:50%;bottom:6.5%;z-index:21;
  transform:translateZ(6px);padding:0 12%;text-align:center;pointer-events:none;
  opacity:0;visibility:hidden;
}
.ended #endingLines{opacity:1;visibility:visible;transition:opacity .9s ease 1.5s,visibility 0s 1.5s}
#endingLines p{
  margin:0;font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1rem,1.45vw,1.24rem);line-height:1.5;letter-spacing:.02em;color:#F4D99A;
  text-shadow:0 1px 2px rgba(0,0,0,.82),0 0 9px rgba(233,184,115,.4);
}
#ending{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;justify-content:center;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
}
#ending[hidden]{display:none}
#bAgain{
  min-height:44px;
  font-family:var(--sans);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;color:var(--teal-deep);background:rgba(247,237,214,.94);
  border:1px solid rgba(168,138,61,.62);border-radius:999px;padding:9px 18px;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
#bAgain:hover,#bAgain:focus-visible{background:var(--teal-deep);color:#F4ECDC;border-color:var(--teal-deep)}
@media (max-width:600px){
  #endingLines{left:0;width:100%;bottom:7%;padding:0 14%}
  #ending{padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
  #bAgain{font-size:.75rem;letter-spacing:.06em}
}
/* Reduced motion: the book is simply shut. The board, the block and the words
   arrive together, with nothing sliding or fading in. */
@media (prefers-reduced-motion:reduce){
  .ended .boards,.ended .spread,.ended .stack.left,.ended #ribbon,.ended #endingLines,#bAgain{transition:none}
}

#emergencyPanel{
  position:fixed;inset:0;z-index:70;
  display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(31,61,56,.34);
}
#emergencyPanel[hidden]{display:none}
.emergencycard{
  width:min(460px,100%);max-height:calc(100dvh - 32px);overflow:auto;
  background:var(--paper);color:var(--ink);
  border:1px solid rgba(168,138,61,.62);border-radius:10px;
  padding:22px 24px 20px;box-shadow:0 10px 34px rgba(74,48,16,.28);
  font-family:var(--serif);
}
.emergencycard:focus{outline:none}
.emergencycard h2{font-size:1.45rem;font-weight:500;line-height:1.2;margin:0 0 .35em;color:var(--teal-deep)}
.emergencynote{font-family:var(--sans);font-size:.78rem;line-height:1.55;color:var(--muted);margin:0 0 .9em}
.emergencyline{border-top:1px solid rgba(168,138,61,.34);padding:.7em 0}
.emergencylabel{font-size:1.08rem;line-height:1.35;margin:0 0 .25em}
.emergencyaction{font-family:var(--sans);font-size:.86rem;font-weight:600;line-height:1.5;color:var(--teal-deep);margin:0}
.emergencyline.quiet .emergencylabel{font-size:.98rem;color:var(--muted)}
.emergencyline.quiet .emergencyaction{font-weight:400;color:var(--ink)}
#bEmergencyClose{
  display:block;margin:.9em 0 0 auto;min-height:44px;padding:0 18px;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  color:var(--teal-deep);background:rgba(247,237,214,.94);
  border:1px solid rgba(168,138,61,.62);border-radius:999px;cursor:pointer;
}
#bEmergencyClose:hover,#bEmergencyClose:focus-visible{background:var(--teal-deep);color:#F4ECDC;border-color:var(--teal-deep)}

/* HER ANSWER B-1e2646, 30 October 2026 (Mac ref mac-1793360655424): THE DOOR's "Speak to an expert" popup. It
   stands in the panel treatment above, with its card, its close control and its spacing taken from exactly those
   rules, so no new color, font or size enters the Book. The form inside it keeps the .doorform treatment it had
   on the page, and the line after a press keeps the .previewnote treatment it has always had. */
#expertPanel{
  position:fixed;inset:0;z-index:70;
  display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(31,61,56,.34);
}
#expertPanel[hidden]{display:none}
.expertcard .doorform{margin:.2em 0 0}
.expertcard .previewnote{margin-top:.6em;font-style:italic;text-align:center}
/* HER DECISION OF 31 OCTOBER 2026 (answers B-9d5077): her "Request an appointment" link, beside her form in this
   popup. It wears exactly the pill the Book's other routes wear (.expertcard .cta above), so no new color, font or
   size enters the Book; only where it stands is set here, centered under her send button as that button is
   centered, and never wider than the card. */
.expertcard .doorappointment{display:block;width:max-content;max-width:100%;margin:.9em auto 0}
#bExpertClose{
  display:block;margin:.9em 0 0 auto;min-height:44px;padding:0 18px;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  color:var(--teal-deep);background:rgba(247,237,214,.94);
  border:1px solid rgba(168,138,61,.62);border-radius:999px;cursor:pointer;
}
#bExpertClose:hover,#bExpertClose:focus-visible{background:var(--teal-deep);color:#F4ECDC;border-color:var(--teal-deep)}

/* ---------- one book, with a consented AI conversation inside it ----------
   Restored 18 September 2026 from the 15 September companion, by owner ruling. */
#companionPanel[hidden]{display:none}
#companionPanel{position:absolute;inset:0;z-index:20;transform:translateZ(2px)}
.companion-spread{position:absolute;inset:0;display:flex}
.companion-leaf{
  position:relative;width:50%;height:100%;overflow-y:auto;overflow-x:hidden;
  padding:clamp(26px,4.2vw,58px) clamp(26px,4.4vw,60px);
  background:radial-gradient(120% 90% at 108% 46%,rgba(255,247,224,.72),rgba(246,235,206,0) 58%),linear-gradient(to left,#F1E3C2,#E6D5AC 56%,#CFB68B);
  box-shadow:inset -26px 0 44px -28px rgba(62,38,8,.7),inset 0 0 120px -28px rgba(96,62,20,.78);
  border-radius:11px 2px 2px 11px;scrollbar-width:none
}
.companion-leaf::-webkit-scrollbar{width:0;height:0;display:none}
.companion-recto{
  background:radial-gradient(120% 90% at -8% 46%,rgba(255,247,224,.72),rgba(246,235,206,0) 58%),linear-gradient(to right,#F1E3C2,#E6D5AC 56%,#CFB68B);
  box-shadow:inset 26px 0 44px -28px rgba(62,38,8,.7),inset 0 0 120px -28px rgba(96,62,20,.78);
  border-radius:2px 11px 11px 2px
}
.companion-page{position:relative;z-index:2;min-height:100%;font-family:var(--serif);color:var(--ink)}
.companion-page h1,.companion-page h2{font-family:var(--serif);font-weight:500;line-height:1.18;color:var(--teal-deep);margin:0 0 14px}
.companion-page h1{font-size:clamp(1.5rem,2.5vw,2.15rem)}
.companion-page h2{font-size:clamp(1.22rem,1.75vw,1.55rem)}
.companion-page p{font-family:var(--serif);font-size:clamp(.98rem,1.24vw,1.14rem);line-height:1.7;margin:0 0 14px;max-width:62ch}
.companion-page .companion-eyebrow{font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dark);font-weight:600;line-height:1.5}
.companion-quiet,.companion-ai-label,.companion-status{display:block;font-family:var(--sans)!important;font-size:.76rem!important;line-height:1.55!important;color:var(--muted)!important}
.companion-ai-label{border-left:2px solid var(--gold);padding-left:.7em;margin-bottom:1em!important}
.companion-consent{display:flex;gap:.7em;align-items:flex-start;margin:1.3em 0;font:500 .82rem/1.55 var(--sans)}
.companion-consent input{margin-top:.25em;accent-color:var(--teal-deep)}
.companion-words{display:block;width:100%;min-height:135px;margin:.65em 0;padding:.8em;border:1px solid rgba(108,84,28,.5);border-radius:8px;background:rgba(255,253,246,.58);color:var(--ink);font:1rem/1.5 var(--serif);resize:vertical}
.companion-words:focus{outline:2px solid rgba(42,157,143,.45);outline-offset:2px}
.companion-page button,.companion-button{display:inline-block;border:1px solid rgba(42,157,143,.5);border-radius:999px;padding:.65em 1em;background:rgba(247,237,214,.7);color:var(--teal-deep);font:600 .76rem/1.25 var(--sans);text-decoration:none;cursor:pointer}
.companion-page button:disabled{opacity:.45;cursor:default}
.companion-page .companion-primary{background:var(--teal-deep);color:#F4ECDC}
.companion-clear{float:right;margin:0 0 1em 1em}
.companion-actions{display:flex;flex-wrap:wrap;gap:.5em;margin-top:1em}
.companion-history{display:grid;gap:.75em;margin-top:1em}
.companion-turn{padding:.8em;border-left:2px solid var(--gold);background:rgba(255,255,255,.25);font:1rem/1.55 var(--serif)}
.companion-turn.assistant{border-left-color:var(--teal)}
.companion-turn b{display:block;margin-bottom:.35em;font:600 .62rem/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.companion-question{font-size:1.18rem!important;color:var(--teal-deep)!important}
.companion-recognition,.companion-closing{padding:1em;margin:1em 0;border:1px solid rgba(42,157,143,.3);background:rgba(42,157,143,.06);border-radius:8px}
.companion-discovery{font-size:1.2rem!important}
/* Section 58: a possible recognition is part of the response, not a card of its
   own, and the one continuation area follows it: prompt, answer, Continue, done. */
.companion-possibility{font-style:italic}
.companion-possibility .companion-possibility-note{display:block;margin-top:.3em;font:.76rem/1.55 var(--sans);font-style:normal;color:var(--muted)}
.companion-continuing{margin-top:1.2em;padding-top:1em;border-top:1px solid rgba(108,84,28,.25)}
.companion-page .companion-continue-prompt{margin-bottom:.5em;color:var(--teal-deep)}
.companion-continuing+#doneRow{margin-top:.5em}
.companion-page .companion-answer-label{font-weight:600!important;color:var(--ink)!important}
.companion-support{padding:1em;border:1px solid rgba(155,61,77,.55);background:rgba(255,245,242,.72);border-radius:8px}
.companion-hidden{display:none!important}
.companion-open #book>.spread,.companion-open #ribbon,.companion-open #flip,.companion-open .spine{visibility:hidden}
/* While the companion is open, page navigation and sound step aside. Opt out
   and Close stay, as on every page. */
.companion-open #controls button:not(#bCompanion):not(#bOptOut):not(#bClose){display:none}
/* The page number belongs to the pages, so it steps aside with them. */
.companion-open #status{display:none}
.companion-support h2{font-size:clamp(1.15rem,1.6vw,1.45rem)}

@media (max-width:600px){
  #companionPanel{overflow-y:auto}
  .companion-spread{position:relative;display:block;min-height:100%}
  .companion-leaf{width:100%;height:auto;min-height:100%;border-radius:11px;padding:30px 27px 46px}
  .companion-recto{border-radius:11px}
}

/* PROPOSED 2026-10-04: the own-words notice and carry controls, a reviewed
   suggestion on a path, and the Conversation's optional next-step idea. */
.pg.ask .asknote.carrynote{display:block;margin:.35em 0 .3em 1.54em;font-size:.66rem;letter-spacing:.03em;line-height:1.6}
.pg.ask .carrybtn{display:inline-block;margin:.1em 0 .6em 1.54em;padding:.38em .9em;border-radius:999px;
  border:1px solid rgba(31,117,104,.45);background:transparent;color:var(--teal-deep,#14524A);
  font-family:var(--sans);font-size:.7rem;letter-spacing:.03em;cursor:pointer}
.pg.ask .carrybtn:focus{outline:2px solid rgba(108,84,28,.45);outline-offset:2px}
.pg.ask textarea.asktext.carrytext{min-height:5.5em;resize:vertical;line-height:1.5}
.pg.ask .trythis .trylead{font-weight:600}
.companion-step{margin:.6em 0;padding-left:.8em;border-left:2px solid rgba(201,168,76,.6)}
.companion-step .companion-step-lead{font-weight:600}

/* Owner, 5 October 2026: the reply label on its own two lines, and answers to a
   safety question that can be tapped. Calm, readable, never crowded. */
.companion-ai-label .companion-ai-label-1{display:block;font:600 .7rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep)}
.companion-ai-label .companion-ai-label-2{display:block;margin-top:.3em;font:400 .8rem/1.5 var(--sans);color:var(--muted)}
.companion-ai-label{padding-top:.35em;padding-bottom:.35em}
.companion-safety{display:flex;flex-direction:column;gap:.6em;margin:.4em 0 1.1em;max-width:24rem}
.companion-safety button{display:block;width:100%;text-align:left;border-radius:999px;padding:.72em 1.15em;
  font:600 .86rem/1.25 var(--sans);cursor:pointer;border:1.5px solid transparent}
.companion-safety .companion-safe{background:var(--teal,#2A9D8F);color:#fff}
.companion-safety .companion-unsafe{background:var(--ink,#1F3D38);color:#fff}
.companion-safety .companion-unsure{background:transparent;color:var(--teal-deep,#14524A);border-color:rgba(31,117,104,.5)}
.companion-safety button:focus-visible{outline:3px solid var(--gold,#C9A84C);outline-offset:2px}
.companion-safety-note{margin:.2em 0 1.1em;padding:.85em 1em;border-left:3px solid var(--ink,#1F3D38);background:rgba(255,248,238,.8);
  border-radius:0 8px 8px 0;font:400 .86rem/1.6 var(--sans);color:var(--ink,#1F3D38)}
.companion-safety-note b{display:block;margin-bottom:.25em;font:500 1.05rem/1.35 var(--serif,"Cormorant Garamond",serif)}
.companion-safety-note a{color:inherit}
.companion-safety-note button{margin-top:.7em;border-radius:999px;padding:.45em 1em;border:1px solid rgba(31,117,104,.45);
  background:transparent;color:var(--teal-deep,#14524A);font:600 .78rem/1.2 var(--sans);cursor:pointer}
.companion-turn .companion-turn-sub{display:block;margin:-.15em 0 .45em;font:400 .72rem/1.45 var(--sans);color:var(--muted)}
/* The label uses the page's full width, and on wider screens breaks only at
   the dot, never mid-phrase. */
.companion-ai-label{max-width:none!important}
@media (min-width:601px){.companion-ai-label .companion-keep{white-space:nowrap}}
@media (max-width:600px){.companion-ai-label .companion-keep{display:block;text-wrap:balance}.companion-ai-label .companion-dot{display:none}
  .companion-ai-label .companion-second::first-letter{text-transform:uppercase}}
/* 7 October 2026: the key turns before the door page opens; the optional song sits on the door page, below the two
   ways to connect. */
.keybtn.turning svg{transform:rotate(90deg) scale(1.06);transition:transform .65s cubic-bezier(.45,.05,.3,1)}
.door-song{margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:2px}
.door-song .eyebrow{margin:0}
.heartbtn{--beat:0;background:none;border:0;cursor:pointer;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--teal-deep);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.heartbtn .heart{width:176px;max-width:100%;height:auto;display:block;overflow:visible}
.heartbtn .disc,.heartbtn .ring{transform-origin:160px 90px;transition:transform .5s cubic-bezier(.3,.6,.3,1)}
.heartbtn .heartcore{transform-origin:160px 90px;transform:scale(calc(1 + var(--beat) * .08));transition:transform .5s cubic-bezier(.3,.6,.3,1)}
.heartbtn .heartglow{opacity:calc(.35 + var(--beat) * .5);transition:opacity .6s ease}
.heartbtn .halo{opacity:.35;transform-origin:160px 90px;animation:heartrest 4.8s ease-in-out infinite}
.heartbtn .ring{filter:drop-shadow(0 0 4px rgba(242,210,122,.45))}
.heartbtn .waves{transform-origin:160px 90px;transform:scaleY(calc(.85 + var(--beat) * .5));transition:transform .5s cubic-bezier(.3,.6,.3,1)}
.heartbtn .w{fill:none;stroke-width:1.8;stroke-linecap:round;opacity:.6;stroke-dasharray:3 7;transition:opacity 1.2s ease}
.heartbtn .w.gold{stroke:#C9A84C}.heartbtn .w.violet{stroke:#7E63AE}.heartbtn .w.soft{opacity:.38}
.heartbtn .dots circle{fill:#C9A84C;opacity:.7}
.heartbtn:active .heartcore,.heartbtn:active .disc,.heartbtn:active .ring{transform:scale(.94);transition:transform .15s ease-out}
.heartbtn.playing .halo{animation:none;opacity:calc(.3 + var(--beat) * .55)}
.heartbtn.playing .w{opacity:calc(.5 + var(--beat) * .45);animation:heartcurrent 3.2s linear infinite}
.heartbtn.playing .dots circle{opacity:calc(.5 + var(--beat) * .5)}
.heartbtn.playing .heartcore{transition:transform .18s ease-out}
.heartbtn .heartlabel{font-family:var(--serif, Georgia, serif);font-size:.86rem;font-style:italic;color:var(--teal-deep);letter-spacing:.01em}
.heartbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:14px}
@keyframes heartcurrent{to{stroke-dashoffset:-30}}
@keyframes heartrest{0%,100%{opacity:.18}50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){
  .heartbtn .heartcore,.heartbtn .waves,.heartbtn .disc,.heartbtn .ring{transform:none!important;transition:none}
  .heartbtn .halo,.heartbtn.playing .halo{animation:none;opacity:.4}
  .heartbtn.playing .w{animation:none;opacity:.7}}
/* The song's lyrics open below the heart, in the owner's own lines. */
.door-lyrics{margin-top:6px;max-width:30ch;text-align:center}
.door-lyrics summary{cursor:pointer;font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dark);list-style:none}
.door-lyrics summary::-webkit-details-marker{display:none}
.door-lyrics p{white-space:pre-line;font-family:var(--serif);font-size:.86rem;line-height:1.5;color:var(--ink);margin:8px 0 0;max-height:9.5em;overflow-y:auto;padding:0 6px;overscroll-behavior:contain}
/* 7 October 2026: with the song on THE DOOR, its two ways back sit side by side so the page stays one page. */
.door .onward.closing{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px}
.door .onward.closing button{margin:0}
.door .rule.c{margin:8px auto 10px}
.door-song .sub{margin:2px auto 0}
.door-song{align-self:stretch;margin-bottom:18px}
.door-song .heartbtn{align-self:center;width:220px;max-width:100%}
/* Owner, 7 October 2026: the lyrics in an old romantic script on the page facing THE DOOR, written out line by line as
   the song goes; once the page fills, the earliest lines drift up and fade away. They stay within the page. */
.lyricspage{overflow:hidden}
.songlyrics{position:absolute;inset:6% 6% 9% 6%;overflow:hidden;opacity:0;transition:opacity 1.4s ease}
.songlyrics.singing{opacity:1}
.songlyrics-roll{text-align:center;transition:transform 1.6s cubic-bezier(.3,.6,.3,1)}
.songlyrics-roll p{--write:0;--fade:1;font-family:"Pinyon Script","Snell Roundhand","Apple Chancery",cursive;font-size:1.85rem;
  line-height:1.55;color:#3B2414;margin:0 0 .25em;opacity:0;
  -webkit-clip-path:inset(-20% calc((1 - var(--write)) * 108% - 4%) -20% -4%);clip-path:inset(-20% calc((1 - var(--write)) * 108% - 4%) -20% -4%)}
.songlyrics-roll p.written{opacity:calc(.92 * var(--fade))}
.songlyrics-roll p.gap{height:.9em}
@media (prefers-reduced-motion: reduce){
  .songlyrics,.songlyrics-roll{transition:none}
  .songlyrics-roll p{font-size:1.1rem;line-height:1.35;-webkit-clip-path:none;clip-path:none}}
/* Owner, 8 October 2026: the heart is her picture. Its square edges fade into the page; at rest it glows faintly, and
   while the song plays it breathes very gently with the music. */
.heartbtn .heartimg{width:150px;height:150px;max-width:100%;display:block;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,rgba(0,0,0,.7) 80%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 62%,rgba(0,0,0,.7) 80%,transparent 100%);
  transform:scale(calc(1 + var(--beat) * .035));transition:transform .45s cubic-bezier(.3,.6,.3,1),filter .8s ease;
  filter:brightness(1) drop-shadow(0 0 6px rgba(201,168,76,.25));animation:heartimgrest 5s ease-in-out infinite}
.heartbtn.playing .heartimg{animation:none;filter:brightness(calc(1 + var(--beat) * .18)) drop-shadow(0 0 calc(6px + var(--beat) * 10px) rgba(232,196,96,.45))}
.heartbtn:active .heartimg{transform:scale(.96);transition:transform .15s ease-out}
@keyframes heartimgrest{0%,100%{filter:brightness(1) drop-shadow(0 0 5px rgba(201,168,76,.2))}50%{filter:brightness(1.06) drop-shadow(0 0 11px rgba(201,168,76,.4))}}
@media (prefers-reduced-motion: reduce){.heartbtn .heartimg,.heartbtn.playing .heartimg{transform:none;animation:none;transition:none}}
/* Owner, 8 October 2026: with the song, THE DOOR stays one page at every screen size. Its spacing tightens and the heart
   scales with the page height, so nothing is carried onto another page and nothing crowds the page number. */
.door.withsong{justify-content:flex-start;height:auto;min-height:100%;padding-top:clamp(0px,2vh,18px);padding-bottom:clamp(26px,5vh,44px)}
.door.withsong h3{margin-bottom:.35em}
.door.withsong .rule.c{margin:4px auto 8px}
.door.withsong .cta{margin:4px 0}
.door.withsong .sub.narrow{margin:6px auto 0;line-height:1.45}
.door.withsong .door-song{margin:clamp(4px,1.4vh,14px) 0 0}
.door.withsong .door-song .eyebrow{margin:0 0 2px}
.door.withsong .heartbtn{padding:2px 4px;gap:2px}
.door.withsong .heartbtn .heartimg{width:clamp(140px,24vh,200px);height:clamp(140px,24vh,200px)}
/* Owner, 8 October 2026: lyrics on a phone. Two-page screens keep the facing page; on a phone the handwriting is written
   above the heart while the song plays, in the same script, and the line it replaces returns when the song stops. */
.songstage{position:relative}
.songlyrics.phone{display:none}
@media (max-width:600px){
  .songstage{height:7.4em;width:100%}
  .songstage .songline{position:absolute;inset:0;margin:auto;height:max-content;transition:opacity .9s ease}
  .songlyrics.phone{display:block;position:absolute;inset:0;transition:opacity 1.2s ease}
  .songlyrics.phone .songlyrics-roll p{font-size:1.12rem;line-height:1.45;margin:0 0 .15em}
  .songstage:has(.songlyrics.phone.singing) .songline{opacity:0}
}

/* Owner, 8 October 2026: looking back over the answers, and the look back before the book closes. */
.pg .reviewtoggle,.pg .changeinline,.pg .reviewbtns button{font-family:var(--sans);font-size:.74rem;letter-spacing:.04em;
  color:var(--teal-deep);background:rgba(247,237,214,.9);border:1px solid rgba(168,138,61,.55);border-radius:999px;
  padding:.45em 1em;min-height:36px;cursor:pointer}
.pg .reviewtoggle{display:block;margin:.55em 0 .1em}
.pg .changeinline{min-height:30px;padding:.2em .85em;margin-left:.3em;font-size:.68rem;vertical-align:baseline}
.pg .reviewtoggle:hover,.pg .changeinline:hover,.pg .reviewbtns button:hover{border-color:rgba(42,157,143,.72)}
.pg .reviewtoggle:focus-visible,.pg .changeinline:focus-visible,.pg .reviewbtns button:focus-visible{outline:2px solid rgba(108,84,28,.5);outline-offset:2px}
.pg .reviewhead{margin:.9em 0 .2em}
.pg .reviewrow{border-top:1px solid rgba(168,138,61,.3);padding:.5em 0 .45em}
.pg .reviewq{font-size:.92rem;line-height:1.35;margin:0 0 .15em;color:var(--muted)}
.pg .reviewa{font-size:1rem;line-height:1.4;margin:0 0 .35em}
/* Owner, 9 October 2026: several choices inside one answer are read as a list, not as a run of commas. The
   book still does not use bullets: the mark is its own fine gold rule, the type stays the type of whatever
   block the list belongs to, each choice keeps its own line at any width, and a long choice wraps under
   itself rather than under the mark. One treatment, used in all three places the book says an answer back. */
ul.reviewlist{list-style:none;margin:0 0 .4em;padding:0;max-width:38ch}
ul.reviewlist li{position:relative;font-family:inherit;font-size:inherit;line-height:1.46;
  padding-left:1.05em;margin:0 0 .14em}
ul.reviewlist li:before{content:"";position:absolute;left:0;top:.72em;
  width:.46em;height:1px;background:var(--gold);opacity:.8}
.pg .reviewbtns{display:flex;flex-wrap:wrap;gap:.45em}
.pg .reviewchoice{border-top:1px solid rgba(168,138,61,.3);padding-top:.5em;margin-bottom:.6em}
/* The review travels as one unit for each answer: the opening line with the first, the one way on with the
   last. The wrappers add no space and no rule of their own; their children keep theirs. */
.pg .reviewpart{margin:0;padding:0}
.pg .reviewtail .reviewrow{padding-bottom:.3em}
.pg fieldset.revising{outline:2px solid rgba(201,168,76,.75);outline-offset:4px;border-radius:6px;transition:outline-color .6s ease}
#closePanel{position:fixed;inset:0;z-index:69;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(31,61,56,.34)}
#closePanel[hidden]{display:none}
.closecard .closeanswer{font-size:.98rem;line-height:1.45;margin:.25em 0}
.closecard .closeq{display:block;font-size:.86rem;color:var(--muted)}
/* Owner, 9 October 2026: one answer still reads inline, as it always did; several read as the same list the
   pages now use. The card's wording, its Change control and its spacing are unchanged. */
.closecard p.closesaid{display:inline;margin:0;font-size:inherit;line-height:inherit}
.closecard ul.closesaid{font-family:var(--serif);font-size:.98rem;line-height:1.45;margin:.1em 0 .25em}
.closecard .changeinline{font-family:var(--sans);font-size:.68rem;color:var(--teal-deep);background:rgba(247,237,214,.94);
  border:1px solid rgba(168,138,61,.55);border-radius:999px;padding:.2em .85em;min-height:30px;cursor:pointer}
.closechoices{display:flex;flex-wrap:wrap;gap:.5em;justify-content:flex-end;margin-top:.9em}
.closechoices button{min-height:44px;padding:0 16px;font-family:var(--sans);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;color:var(--teal-deep);background:rgba(247,237,214,.94);border:1px solid rgba(168,138,61,.62);border-radius:999px;cursor:pointer}
#bCloseFinish{color:var(--muted)}
@media (max-width:600px){.closechoices{justify-content:stretch}.closechoices button{flex:1 1 100%}}

/* Owner, 8 October 2026: the page facing the door names the song before it plays and offers the ways on after it ends.
   Owner's live review, 9 October 2026: the heart now sits on this page with the words that ask for it, and the ways
   on are here before the song as well as after it, so the closing page is never a dead end. They step aside only
   while the handwriting is being written, which is the one time this page belongs to the song. */
.lyricspage .songintro{position:absolute;inset:0 0 30% 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 10%;transition:opacity 1.2s ease}
.lyricspage .songtitle{font-family:"Pinyon Script","Snell Roundhand","Apple Chancery",cursive;font-size:2.4rem;line-height:1.3;color:#3B2414;margin:0 0 .15em}
.lyricspage .songintro .heartbtn{padding:2px 4px;gap:2px}
.lyricspage .songintro .heartbtn .heartimg{width:clamp(110px,17vh,150px);height:clamp(110px,17vh,150px)}
.lyricspage:has(.songlyrics.singing) .songintro{opacity:0;pointer-events:none}
.lyricspage .songafter{position:absolute;left:0;right:0;bottom:7%;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:0 6%;opacity:1;pointer-events:auto;transition:opacity 1.2s ease}
.lyricspage:has(.songlyrics.singing) .songafter{opacity:0;pointer-events:none}
.lyricspage .songafter .onward{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;gap:6px 10px;margin:0;max-width:none}
.lyricspage .songafter .onward button{margin:0}
/* THE DOOR, facing this page, carries the two routes as its own large controls. Here they are the same governed
   destinations in the quiet form the rest of the book uses for a way on, so one opening does not print the same
   pair of large buttons twice. Owner, 9 October 2026. */
.lyricspage .songroutes .cta{margin:0;text-transform:none;letter-spacing:.045em;font-size:.72rem;font-weight:400;
  padding:.52em 1.05em;min-height:2.45em;display:inline-flex;align-items:center;
  background:rgba(255,253,246,.5);border:1px solid rgba(42,157,143,.34);color:var(--teal-deep)}
.lyricspage .songroutes .cta:hover,.lyricspage .songroutes .cta:focus-visible{
  background:rgba(42,157,143,.07);color:var(--ink);border-color:rgba(42,157,143,.72)}

/* Owner, 8 October 2026: the conversation reads as question and answer together, and a wait shows quiet movement. */
.companion-turn .companion-asked{margin:0 0 .5em;color:var(--teal-deep);font-style:italic;max-width:none}
.companion-status.companion-waiting::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.5em;border-radius:50%;
  background:var(--gold);vertical-align:middle;animation:companionwait 1.4s ease-in-out infinite}
@keyframes companionwait{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
@media (prefers-reduced-motion: reduce){.companion-status.companion-waiting::after{animation:none;opacity:.7}}
#editLast{background:transparent}

/* Owner, 10 October 2026: subheads carry a warm, luminous deep plum against the linen and gold, for clearer hierarchy.
   Plum on linen is well above 7 to 1; the glow is a soft gold light behind the letters, not a colour change. */
.pg p.eyebrow,.pg .eyebrow{color:#4A2862;text-shadow:0 0 .55em rgba(236,200,120,.55),0 0 .12em rgba(255,240,205,.6)}
.pg .spreadtwin[hidden],.pg .choices[hidden],.pg .onwardblock[hidden],.pg .rule[hidden]{display:none!important}

/* Owner, 10 October 2026 (Batch B): the group labels inside a question page take the same warm luminous plum and the
   same small capitals as every other subhead, instead of a small gold sans, so the hierarchy reads as one system. */
.pg .askgroup{font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#4A2862;text-shadow:0 0 .55em rgba(236,200,120,.55),0 0 .12em rgba(255,240,205,.6)}

/* Owner deep review, 10 October 2026. */
/* The cover is the invitation: its printed hint is kept for screen readers only. */
#coverHint{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* Ways on feel inlaid in the page: a recessed, tooled panel in the paper with a fine gold edge, not a pasted pill. */
.pg .onward button,.pg .altlist button{
  background:linear-gradient(180deg,rgba(214,196,158,.42),rgba(239,228,203,.55));
  border:1px solid rgba(168,138,61,.55);border-radius:6px;
  box-shadow:inset 0 1px 2px rgba(74,48,16,.28),inset 0 -1px 0 rgba(255,250,236,.7),0 1px 0 rgba(255,250,236,.55);
  color:#16443D}
.pg .onward button:hover,.pg .altlist button:hover{background:linear-gradient(180deg,rgba(205,186,146,.5),rgba(233,220,192,.6));border-color:rgba(122,96,36,.75);color:#0F332D}
.pg .onward button:focus-visible,.pg .altlist button:focus-visible{border-radius:6px}
.pg .onward button.primaryway{background:linear-gradient(180deg,#1F5A52,#174A43);color:#F4ECDC;border-color:rgba(201,168,76,.75);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35),0 1px 0 rgba(255,250,236,.55)}
/* Choice text a little larger on the opening choice pages, without crowding. */
.pg .choices button{font-size:1.12rem;line-height:1.38}
@media (max-width:600px){.pg .choices button{font-size:1.06rem}}
/* Helper and privacy lines: an opaque, darker ink for low-vision and colour-blind reading (about 7 to 1 on the linen). */
.pg p.sub,.pg.ask .asknote,.pg .asknote,.pg .asknote.askmany,.pg.ask p.asknote.askmany{color:#36403A;opacity:1}
/* Subheads: the plum eyebrows, with the question pages' group labels in a deep luminous teal-green beside them. */
.pg .askgroup,.pg.ask .askgroup,.pg.ask p.askgroup{color:#1C5A50!important;text-shadow:0 0 .55em rgba(160,215,196,.45),0 0 .12em rgba(255,250,236,.6)}
.pg .previewnote{margin-top:.6em;color:#36403A;font-style:italic}

/* A group heading travels with its first choice (owner deep review, 10 October 2026); its own spacing is kept. */
.askset .askgroupwrap .askgroup{margin-top:1.35em!important;padding-top:.7em;border-top:1px solid rgba(176,143,62,.28)}
.askset .askgroupwrap:first-of-type .askgroup{margin-top:.35em!important;padding-top:0;border-top:0}
/* Owner deep review, 10 October 2026: a question block's bottom space moves to whatever follows it, so a block that
   ends a page carries no trailing margin the page measurement does not count. The spacing between blocks is unchanged. */
.pg.ask .askset{margin-bottom:0}
.pg.ask .askset + *:not(.folio){margin-top:24.8px}

/* VERSION B (owner-approved, 13 October 2026): the four choices after a reflection, the owner's connection words,
   the folded perspective, the invitation, and a quiet, always-present Talk with an expert. Brand Deep Teal and Warm Gold. */
.companion-reflect-choices{display:flex;flex-wrap:wrap;gap:.45em;margin:.7em 0 .3em}
.companion-reflect-choices button{font-size:.72rem!important;padding:.45em .9em!important}
.companion-reflect-choices button.chosen{background:#1A6B6E!important;color:#F4ECDC!important;border-color:#1A6B6E!important;opacity:1}
.companion-reflect-choices button:disabled:not(.chosen){opacity:.4}
.companion-connection{white-space:pre-line;margin:.8em 0;padding:.7em .9em;border-left:3px solid #1A6B6E;background:rgba(26,107,110,.07);
  border-radius:0 8px 8px 0;font:1.02rem/1.6 var(--serif);color:var(--ink)}
.companion-perspective{margin:.7em 0;padding:.5em .8em;border:1px dashed rgba(168,138,61,.55);border-radius:8px;background:rgba(255,253,246,.45)}
.companion-perspective summary{cursor:pointer;color:#1A6B6E;font:600 .78rem/1.4 var(--sans);letter-spacing:.04em}
.companion-perspective p{margin:.5em 0 0;font:.95rem/1.6 var(--serif)}
.companion-page .companion-expert{float:none;display:inline-block;margin:0 .6em .9em 0;border-color:rgba(201,168,76,.8)!important;background:rgba(255,250,236,.85)!important;color:#1A6B6E!important}
.companion-page .companion-expert span{font-weight:400;opacity:.8}
.companion-closing .companion-restoration,.companion-restoration{font:italic 1.12rem/1.6 var(--serif)!important;color:#1A6B6E!important;opacity:1!important;margin:.9em 0!important}
#ordinary > .companion-eyebrow{clear:both}
.companion-expert-card{padding:.7em .9em;border:1px solid rgba(201,168,76,.8);border-radius:8px;background:rgba(255,253,246,.6);font:.95rem/1.6 var(--serif)}
#withinReach{font:1rem/1.6 var(--serif);margin:.6em 0}
@media (max-width:600px){.companion-page .companion-expert{display:block;margin:0 0 .8em}}

/* Owner review, 14 October 2026: the open book at rest is drawn flat (see restFlat in book-engine.js); every turn, jump and
   cover movement keeps full 3D. This stops Safari leaving the open pages undrawn. */
.opened #book.flat3d{transform-style:flat}

/* s140, owner review 23 October 2026: the running header on a continued page, quieter than a page's own eyebrow. */
.pg .runhead{opacity:.62;margin:0 0 .9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;flex-shrink:0;min-height:1.4em;}
/* s140 correction pass, 24 October 2026. Owner note 1: a question list continued on the next page is set with the
   same spacing as its first page. The first page carries its helper sentence above the choices; the continuation
   carries only the running header, so its first choice sat about 56px below the top of the page where the first
   page's sat about 94px below (measured at 1440x900 in headless Chrome, 23 October bytes). The header now reserves
   that same space, so both pages of the spread begin their choices on the same line. Only on a two-page screen: on a
   phone there is no facing page to line up with, and the space would be given away for nothing. It applies only where
   the running header is directly followed by the continued question list itself: a part that carries something else,
   such as what the reader has said so far, keeps every line of its paper, because taking a line from that block
   divided it in two. */
@media (min-width:601px){ .pg.ask .runhead:has(+ .askset){min-height:3.78em} }
/* s140, owner review 23 October 2026: the licensing line under the heart, in smaller print. */
.pg .door .door-song p.sub.doorfine{font-size:.72rem;line-height:1.45;opacity:.82;margin-top:8px}
/* s140, owner review 23 October 2026: the closing quote on a rest page. Owner: the script was too extreme; it is set in
   the Book's own italic serif, in the upper part of the page, with room around it. */
.restpage{justify-content:flex-start}
.restpage .restquote{font-family:var(--serif);font-style:italic;font-size:1.55rem;line-height:1.5;color:var(--ink);opacity:.9;
  text-align:center;max-width:78%;margin:22% auto 0}

.restpage .restby{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dark);text-align:center;margin:14px auto 0}