/* ═══════════════════════════════════════════════════════
   THE WAY BACK TO YOU — the public doorway
   
   Deliberately self-contained. The book's stylesheet carries
   the whole reading system: view states, plane switching, a
   body that starts as cloth and becomes paper when the cover
   opens. Borrowing it for one static page would mean fighting
   half of it. The tokens below are copied verbatim from
   styles/twbty.css so the two pages are the same brand, not
   an approximation of it. If a colour or a typeface changes
   there, change it here too — there are only these few.
   ═══════════════════════════════════════════════════════ */

@font-face{font-family:'Newsreader';font-style:normal;font-weight:300;font-display:block;src:url(../fonts/newsreader-300.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300;font-display:block;src:url(../fonts/newsreader-300-italic.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/newsreader-400.woff2) format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/hanken-400.woff2) format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:block;src:url(../fonts/hanken-500.woff2) format('woff2');}

html{color-scheme:light;background-color:#F1EAE0;background-image:linear-gradient(#F1EAE0,#F1EAE0);}
:root{
  color-scheme:light;
  --bone:#EDE5D8; --mineral:#FAF6EE; --night:#1C1917;
  --paint-bone:linear-gradient(var(--bone),var(--bone));
  --mushroom:#C3B9A9; --taupe:#60584C; --ink:#262220;
  --clay:#874D35; --clayline:#9C5B41; --ash:#B4A896;
  --hair:rgba(96,88,76,.26);

  --s1:6svh; --s2:10svh; --s3:13svh;
  --edge:22px; --track:34px;
  --flow:calc(var(--edge) + var(--track));
  --measure:33rem;

  --t-micro:.645rem;
  --t-lbl:.82rem;
  --t-read:1.15rem;
  --d1:clamp(2.1rem,8.8vw,3.5rem);

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
}
@media (min-width:760px){ :root{ --edge:min(9vw,120px); --track:56px; --t-read:1.18rem; } }
@media (min-width:1000px){
  :root{ --track:64px; --edge:calc((100vw - var(--measure))/2 - var(--track)); }
}
@media (max-width:360px){ :root{ --edge:18px; --track:30px; --t-read:1.1rem; } }

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background-color:var(--bone);background-image:var(--paint-bone);
  color:var(--ink);font-family:var(--serif);font-weight:300;
  font-size:var(--t-read);line-height:1.62;
  -webkit-font-smoothing:antialiased;
  min-height:100svh;
  padding:var(--s3) var(--edge) var(--s3) var(--flow);
  display:flex;flex-direction:column;
}

/* Vertically centred by auto margins rather than justify-content.
   Centred flex content that outgrows its box overflows at both ends
   and the top becomes unreachable — on a phone held in landscape,
   that would put the title out of reach. Auto margins centre the
   same way and resolve to zero when there is no room to spare. */
.wrap{max-width:var(--measure);width:100%;margin-block:auto;}

/* ── the title ────────────────────────────────────── */
.mark{
  font-family:var(--sans);font-weight:500;
  font-size:var(--t-lbl);letter-spacing:.3em;text-transform:uppercase;
  color:var(--taupe);line-height:1.5;text-indent:.3em;
}
h1{
  font-family:var(--serif);font-weight:300;font-size:var(--d1);
  line-height:1.08;letter-spacing:-.012em;margin-top:.7rem;
  text-wrap:balance;
}
.sub{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:var(--t-read);color:var(--taupe);
  margin-top:1.15rem;line-height:1.5;
}
.by{
  font-family:var(--sans);font-weight:400;
  font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;
  color:var(--mushroom);margin-top:1.5rem;text-indent:.24em;
}

/* ── the line that does the work ──────────────────── */
.said{
  margin-top:var(--s2);
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.32rem,5vw,1.62rem);line-height:1.42;
  letter-spacing:-.004em;
}
.said span{display:block;}
.said span + span{color:var(--clay);}

/* ── the two doors ────────────────────────────────── */
.doors{margin-top:var(--s2);}
.door + .door{margin-top:var(--s1);padding-top:var(--s1);border-top:1px solid var(--hair);}
.lbl{
  font-family:var(--sans);font-weight:500;
  font-size:var(--t-lbl);letter-spacing:.22em;text-transform:uppercase;
  color:var(--taupe);text-indent:.22em;text-wrap:balance;
}
.door p{margin-top:.85rem;color:var(--taupe);line-height:1.6;}

/* the one control on the page, matching the book's ghost button */
.btn{
  display:inline-block;margin-top:1.5rem;
  font-family:var(--sans);font-weight:500;
  font-size:var(--t-lbl);letter-spacing:.22em;text-transform:uppercase;
  text-indent:.22em;text-decoration:none;
  color:var(--clay);background:none;
  border:1px solid var(--clayline);
  padding:1.05rem 1.6rem;
  min-height:48px;                       /* a tired thumb, one-handed */
  transition:background-color .3s ease,color .3s ease;
}
.btn:hover,.btn:focus-visible{background-color:rgba(135,77,53,.06);}
.btn:focus-visible{outline:2px solid var(--clayline);outline-offset:3px;}
/* before the listing exists, the door is simply not yet open */
.btn[aria-disabled="true"]{
  color:var(--mushroom);border-color:var(--hair);cursor:default;
  background:none;pointer-events:none;
}

.foot{
  margin-top:var(--s3);
  font-family:var(--sans);font-size:var(--t-micro);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--mushroom);text-indent:.18em;
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;}
}