/* ==========================================================================
   bocere.app: the playhouse.
   The house is dark ink; the playbill is ivory paper; the arras is claret.
   Claret is law: the logo's ō, the commit buttons, nav Join and its underline,
   the tracked-change marks, and the curtain and valance. Everything else stays neutral.
   Every colour, size and font lives in :root.
   ========================================================================== */

@font-face {
  font-family: "IM Fell English";
  src: url("../fonts/im-fell-english-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IM Fell English";
  src: url("../fonts/im-fell-english-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IM Fell English SC";
  src: url("../fonts/im-fell-english-sc-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* EB Garamond: the reading face, and the fallback for letters the Fell types lack (the ō) */
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-latin-ext-wght-italic.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* the house */
  --ink: #1c1a17;
  --ink-raised: #26231f;
  --ivory: #f4efe6;
  --paper: #fbf8f2;
  --claret: #7b2d26;
  --claret-deep: #5a1e19;
  --claret-button: #b23a4d;  /* commit action on dark: 5.8:1 with white */
  --claret-lift: #c9465a;    /* the logo's ō on dark; large marks only */
  --claret-glow: #e07a86;    /* claret for small text on dark: 6:1 */
  --claret-hover: #c4475b;
  --disabled: #4a453e;
  --quill: #ddd8cf;

  /* text on each ground */
  --on-ink: #f4efe6;
  --on-ink-2: #b9b1a4;
  --on-paper: #1c1a17;
  --on-paper-2: #5b5248;
  --on-claret: #f4efe6;
  --on-claret-2: #e9d6cf;
  --rule-ink: rgb(221 216 207 / 0.22);
  --rule-paper: #cfc6b8;

  /* type */
  --font-display: "IM Fell English", "EB Garamond", Georgia, serif;
  --font-sc: "IM Fell English SC", "IM Fell English", "EB Garamond", Georgia, serif;
  --font-body: "EB Garamond", Georgia, serif;

  --step--1: 0.95rem;
  --step-0: 1.1875rem;
  --step-1: 1.375rem;
  --step-2: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem);
  --step-4: clamp(2.6rem, 1.5rem + 4.4vw, 5.4rem);

  --gutter: clamp(20px, 5vw, 88px);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: clamp(4rem, 9vw, 8rem);
  --header-h: 3.6rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-stage: cubic-bezier(0.65, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ink);
  color: var(--on-ink);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  scrollbar-color: var(--claret) var(--ink);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { background: var(--claret); color: var(--ivory); }
:focus-visible { outline: 3px solid var(--claret-glow); outline-offset: 3px; }
.paper :focus-visible { outline-color: var(--claret); }
.act--claret :focus-visible { outline-color: var(--ivory); }

[hidden] { display: none !important; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 var(--space-2); text-wrap: pretty; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; text-wrap: balance; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 20; background: var(--ivory); color: var(--ink); padding: 0.75rem 1rem; }
.skip:focus { top: 1rem; }

/* Stage directions: bracketed italic, the play's own voice */
.direction { font-style: italic; color: var(--on-ink-2); }
.direction::before { content: "["; }
.direction::after { content: "]"; }
.paper .direction { color: var(--on-paper-2); }
.act--claret .direction { color: var(--on-claret-2); }

/* --------------------------------------------------------------------------
   The house header
   -------------------------------------------------------------------------- */
.house {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem 2rem;
  min-height: var(--header-h);
  padding: 0.4rem var(--gutter);
  background: var(--ink);
  border-bottom: 1px solid var(--rule-ink);
}
.house__brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; flex: none; }
.house__brand img { width: 124px; height: auto; }
.house nav { flex: 1; display: flex; justify-content: flex-end; }
.house ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.house a.navlink { font-family: var(--font-sc); font-size: 1.05rem; letter-spacing: 0.04em; text-decoration: none; color: var(--on-ink-2); padding: 0.3rem 0; border-bottom: 1px solid transparent; transition: color 250ms var(--ease), border-color 250ms var(--ease); }
.house a.navlink:hover, .house a.navlink[aria-current="page"] { color: var(--on-ink); border-bottom-color: var(--claret-lift); }
.house a.navlink--join { color: var(--claret-glow); }
@media (max-width: 760px) {
  .house { flex-wrap: wrap; padding-block: 0.5rem; gap: 0.3rem 1rem; }
  .house nav { flex: 1 0 100%; justify-content: flex-start; }
  .house ul { justify-content: flex-start; gap: 0.1rem 1.1rem; }
  .house a.navlink { font-size: 0.98rem; }
  :root { --header-h: 6rem; }
}

/* --------------------------------------------------------------------------
   The stage: valance, two curtain panels, footlights
   -------------------------------------------------------------------------- */
.stage {
  --rest: clamp(34px, 13vw, 230px);
  --valance: clamp(48px, 9vh, 104px);
  --spot-x: 50%;
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--header-h));
  display: grid;
  align-content: center;
  justify-items: center;
  padding: calc(var(--valance) + clamp(1.5rem, 4vh, 3rem)) calc(var(--rest) + var(--gutter) * 0.5) clamp(1.5rem, 4vh, 2.6rem);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 34% 28% at var(--spot-x) 100%, rgb(240 196 140 / 0.2), transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 42%, #2d2822 0%, var(--ink) 72%);
  transition: --spot-x 600ms var(--ease);
}
@property --spot-x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

.stage__valance {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--valance);
  background: url("../img/valance.svg") center top / 100% 100% no-repeat;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.45));
}
.stage__curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52%;
  background: url("../img/curtain.svg") center / 100% 100% no-repeat;
  z-index: 2;
  pointer-events: none;
  transition: transform 2200ms var(--ease-stage);
  filter: drop-shadow(0 0 24px rgb(0 0 0 / 0.55));
}
.stage__curtain--l { left: 0; transform: translateX(calc(-100% + var(--rest))); }
.stage__curtain--r { right: 0; transform: translateX(calc(100% - var(--rest))) scaleX(-1); }
/* Curtain-up: closed for one frame on load, then it parts. Never under reduced motion. */
.js .stage.is-closed .stage__curtain--l { transform: translateX(0); transition: none; }
.js .stage.is-closed .stage__curtain--r { transform: translateX(0) scaleX(-1); transition: none; }
.js .stage.is-closed .stage__content { opacity: 0; transform: translateY(10px); }
.stage__content { position: relative; z-index: 1; max-width: 62rem; transition: opacity 1400ms var(--ease) 700ms, transform 1400ms var(--ease) 700ms; }

.stage__logo { width: clamp(220px, 30vw, 440px); height: auto; margin: 0 auto clamp(1.2rem, 3vh, 2rem); }
.stage h1 { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.6rem); line-height: 1.04; letter-spacing: -0.01em; margin-bottom: var(--space-3); }
.stage__lede { font-size: var(--step-1); line-height: 1.5; color: var(--quill); max-width: 76ch; margin: 0 auto var(--space-4); text-wrap: balance; }
.stage .actions { justify-content: center; }

.billing {
  position: relative;
  z-index: 1;
  margin-top: clamp(2.5rem, 8vh, 5rem);
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.4rem clamp(1.2rem, 4vw, 3.5rem);
  flex-wrap: wrap;
}
.billing a { font-family: var(--font-sc); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.7rem); text-decoration: none; color: var(--on-ink); letter-spacing: 0.03em; padding: 0.2rem 0.3rem; }
.billing a:hover, .billing a:focus-visible { color: var(--ivory); text-decoration: underline; text-decoration-color: var(--claret-lift); text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.billing a span { display: block; font-family: var(--font-body); font-style: italic; font-size: 0.95rem; color: var(--on-ink-2); letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: center; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.2rem;
  padding: 0 1.6rem;
  font: 400 1.2rem/1 var(--font-sc);
  letter-spacing: 0.05em;
  text-decoration: none;
  background: var(--claret-button);
  color: #fff;
  border: 1px solid var(--claret-button);
  cursor: pointer;
  transition: background 250ms var(--ease), color 250ms var(--ease), border-color 250ms var(--ease), transform 250ms var(--ease);
}
.btn:hover { background: var(--claret-hover); border-color: var(--claret-hover); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--quiet { background: transparent; color: var(--on-ink); border-color: var(--rule-ink); }
.btn--quiet:hover { background: transparent; border-color: var(--quill); color: var(--ivory); }
.paper .btn { background: var(--claret); border-color: var(--claret); color: var(--ivory); }
.paper .btn:hover { background: var(--claret-deep); border-color: var(--claret-deep); }
.paper .btn--quiet { background: transparent; color: var(--on-paper); border-color: var(--rule-paper); }
.paper .btn--quiet:hover { border-color: var(--on-paper); background: transparent; color: var(--on-paper); }
.act--claret .btn { background: var(--ivory); border-color: var(--ivory); color: var(--claret); }
.act--claret .btn:hover { background: #fff; border-color: #fff; }
.act--claret .btn--quiet { background: transparent; color: var(--ivory); border-color: rgb(244 239 230 / 0.45); }
.act--claret .btn--quiet:hover { border-color: var(--ivory); background: transparent; color: var(--ivory); }
.btn[disabled] { cursor: not-allowed; background: var(--disabled); border-color: var(--disabled); color: #cfc8bc; transform: none; }

/* --------------------------------------------------------------------------
   Grounds
   -------------------------------------------------------------------------- */
.paper { background: var(--ivory); color: var(--on-paper); }
.act--claret { background: var(--claret); color: var(--on-claret); }
.dark { background: var(--ink); color: var(--on-ink); }

/* --------------------------------------------------------------------------
   The acts: one app per act, each on its own ground
   -------------------------------------------------------------------------- */
.act {
  position: relative;
  display: grid;
  grid-template-columns: minmax(4rem, 0.22fr) minmax(0, 1fr);
  gap: var(--space-3) clamp(1.5rem, 4vw, 4rem);
  padding: var(--space-5) var(--gutter);
}
.act__numeral {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 11vw, 10rem);
  line-height: 0.8;
  color: var(--on-paper-2);
  text-align: right;
  user-select: none;
}
.act--claret .act__numeral { color: rgb(244 239 230 / 0.62); }
.dark .act__numeral { color: var(--on-ink-2); }
.act__body { max-width: 72rem; }
.act h2 { font-size: var(--step-3); line-height: 1.02; letter-spacing: -0.005em; margin-bottom: 0.4rem; }
.act__who { font-style: italic; font-size: var(--step-1); margin-bottom: var(--space-4); color: var(--on-paper-2); }
.act--claret .act__who { color: var(--on-claret-2); }
.dark .act__who { color: var(--on-ink-2); }
.act__lede { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; max-width: 30ch; margin-bottom: var(--space-4); }
.act__split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-4) clamp(2rem, 5vw, 5rem); align-items: start; }

.lines { list-style: none; margin: 0 0 var(--space-4); padding: 0; columns: 2 19rem; column-gap: 3rem; border-top: 1px solid var(--on-paper); }
.act--claret .lines { border-top-color: var(--on-claret); }
.dark .lines { border-top-color: var(--on-ink); }
.lines li { break-inside: avoid; padding: 0.85rem 0; border-bottom: 1px solid var(--rule-paper); max-width: 42ch; }
.act--claret .lines li { border-bottom-color: rgb(244 239 230 / 0.28); }
.dark .lines li { border-bottom-color: var(--rule-ink); }
.lines b { font-weight: 600; }
.act__split .lines { columns: 1; }
.act__foot { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.admission { margin: 0; font-style: italic; font-size: var(--step-1); }
.admission strong { font-family: var(--font-display); font-style: normal; font-weight: 400; font-size: 2.3rem; margin-right: 0.4rem; }

@media (max-width: 860px) {
  .act { grid-template-columns: minmax(0, 1fr); }
  .act__numeral { text-align: left; font-size: clamp(4rem, 22vw, 6rem); }
  .act__split { grid-template-columns: minmax(0, 1fr); }
}

/* The prop: a real book page with a live KDP trim switcher */
.prop { width: 100%; max-width: 440px; justify-self: center; text-align: center; }
.trim { display: inline-flex; border: 1px solid rgb(244 239 230 / 0.5); margin-bottom: 1.6rem; }
.trim button {
  appearance: none; border: 0; border-right: 1px solid rgb(244 239 230 / 0.5);
  background: transparent; color: var(--ivory);
  padding: 0.5rem 0.85rem; font: 1rem var(--font-body); font-variant-numeric: lining-nums tabular-nums; cursor: pointer;
}
.trim button:last-child { border-right: 0; }
.trim button:hover { background: rgb(244 239 230 / 0.1); }
.trim button[aria-pressed="true"] { background: var(--ivory); color: var(--claret); }
.page-stage { --stage-h: min(60vh, 560px, 120vw); display: grid; place-items: center; height: var(--stage-h); }
.bookpage {
  --w: 6; --h: 9;
  position: relative;
  height: var(--stage-h);
  width: calc(var(--stage-h) * var(--w) / var(--h));
  background: var(--paper);
  color: #1b1916;
  box-shadow: 0 2px 2px rgb(0 0 0 / 0.12), 0 26px 40px -18px rgb(0 0 0 / 0.55);
  transition: width 800ms var(--ease);
  container-type: inline-size;
  text-align: left;
}
.bookpage::before { /* the bleed line, 0.125 in outside the trim, to scale */
  content: "";
  position: absolute;
  inset: calc(-100cqw * 0.125 / var(--w));
  border: 1px dashed rgb(244 239 230 / 0.55);
  pointer-events: none;
}
.bookpage__text { position: absolute; inset: 11cqw 10cqw 9cqw 12cqw; overflow: hidden; font-family: var(--font-body); font-size: 3.7cqw; line-height: 1.42; hyphens: auto; text-align: justify; }
.bookpage__text .chap { display: block; text-align: center; font-family: var(--font-sc); font-size: 3.2cqw; letter-spacing: 0.12em; margin: 6cqw 0 1cqw; }
.bookpage__text .title { display: block; text-align: center; font-family: var(--font-display); font-size: 6.6cqw; font-style: italic; line-height: 1.15; margin-bottom: 8cqw; }
.bookpage__text p { margin: 0; text-indent: 1.4em; }
.bookpage__text p.first { text-indent: 0; }
.bookpage__text p.first::first-letter { float: left; font-family: var(--font-display); font-size: 3.2em; line-height: 0.85; padding: 0.06em 0.08em 0 0; }
.bookpage__folio { position: absolute; bottom: 4.5cqw; left: 0; right: 0; text-align: center; font-size: 3cqw; color: #4a443c; }
.prop figcaption { margin-top: 1.6rem; font-style: italic; color: var(--on-claret-2); }
@media (max-width: 860px) { .page-stage { --stage-h: min(64vh, 500px, 112vw); } }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding: var(--space-5) var(--gutter); }
.section__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3) clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: var(--space-4); }
.section h2 { font-size: var(--step-3); line-height: 1.04; }
.section__head p { margin: 0; max-width: 52ch; color: var(--on-ink-2); }
.paper .section__head p { color: var(--on-paper-2); }
@media (max-width: 860px) { .section__head { grid-template-columns: minmax(0, 1fr); } }

/* The scene: Enter the editor, with a suggestion */
.scene { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--space-4) clamp(2rem, 5vw, 5rem); align-items: start; }
.galley {
  position: relative;
  background: var(--paper);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem);
  line-height: 1.6;
  box-shadow: 0 2px 2px rgb(28 26 23 / 0.06), 0 22px 40px -22px rgb(28 26 23 / 0.45);
  max-width: 62ch;
}
.galley .direction { display: block; font-size: 1.05rem; margin-bottom: 1rem; }
.galley p { margin: 0; text-indent: 1.4em; }
.galley p.direction { text-indent: 0; }
.galley p.direction + p { text-indent: 0; }
.galley del { color: var(--on-paper-2); text-decoration-color: var(--claret); text-decoration-thickness: 2px; }
.galley ins { text-decoration: none; font-weight: 600; background: linear-gradient(transparent 60%, rgb(123 45 38 / 0.18) 60%); }
.galley .done ins { background: none; font-weight: inherit; }
.galley .gone { display: none; }
.galley__meta { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--rule-paper); display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; font-size: 1rem; }
.galley__meta .who { font-family: var(--font-sc); letter-spacing: 0.04em; color: var(--on-paper-2); }
.galley__btns { display: flex; gap: 0.5rem; }
.galley__btns .btn { min-height: 2.6rem; padding: 0 1.1rem; font-size: 1.05rem; }
.galley__status { font-style: italic; font-size: 1.05rem; color: var(--on-paper-2); min-height: 1.6em; margin-top: 0.6rem; }
.creed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--on-paper); }
.creed li { padding: 1rem 0; border-bottom: 1px solid var(--rule-paper); }
.creed h3 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.creed p { margin: 0; color: var(--on-paper-2); }
@media (max-width: 860px) { .scene { grid-template-columns: minmax(0, 1fr); } }

/* The dumb show: silent recordings of the real app */
.reel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.reel figure { margin: 0; }
.reel .lead { grid-column: 1 / -1; }
.reel .lead .vid { max-width: calc(74vh * 1600 / 1084); margin-inline: auto; }
.reel .lead figcaption { max-width: calc(74vh * 1600 / 1084); margin-inline: auto; }
.reel video { width: 100%; height: auto; background: var(--ink); aspect-ratio: 1600 / 1084; }
.reel figcaption { padding-top: 0.6rem; font-style: italic; color: var(--on-ink-2); }
.paper .reel figcaption { color: var(--on-paper-2); }
.vid { position: relative; }
.vid__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 1.1rem;
  font: 1.1rem/1 var(--font-sc); letter-spacing: 0.04em;
  background: var(--ivory); color: var(--ink);
  border: 0; cursor: pointer;
  box-shadow: 0 8px 22px -8px rgb(0 0 0 / 0.6);
  transition: transform 250ms var(--ease);
}
.vid__play svg { width: 15px; height: 15px; color: var(--ink); }
.vid__play:hover { transform: scale(1.04); }
@media (max-width: 860px) { .reel { grid-template-columns: minmax(0, 1fr); } }

/* The bill: every price, set like a playbill with leaders */
.bill { max-width: 56rem; margin: 0 auto; border: 1px solid var(--on-paper); outline: 1px solid var(--on-paper); outline-offset: 5px; background: var(--paper); padding: clamp(1.5rem, 4vw, 3.5rem); text-align: center; }
.bill__title { font-size: var(--step-3); line-height: 1; margin-bottom: 0.4rem; }
.bill__sub { font-style: italic; color: var(--on-paper-2); margin-bottom: var(--space-4); }
.bill__group { margin: 0 0 var(--space-3); }
.bill__group h3 { font-family: var(--font-sc); font-size: 1.35rem; letter-spacing: 0.06em; color: var(--on-paper); margin-bottom: 0.6rem; }
.bill__rows { list-style: none; margin: 0; padding: 0; text-align: left; }
.bill__row { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.35rem 0; }
.bill__row .plan { font-family: var(--font-display); font-size: 1.4rem; white-space: nowrap; }
.bill__row .leader { flex: 1; border-bottom: 2px dotted var(--rule-paper); transform: translateY(-0.3rem); min-width: 1.5rem; }
.bill__row .amt { font-family: var(--font-display); font-size: 1.4rem; white-space: nowrap; font-variant-numeric: lining-nums; }
.bill__row .amt small { font-family: var(--font-body); font-style: italic; font-size: 1rem; color: var(--on-paper-2); }
.bill__what { margin: 0 0 0.6rem; color: var(--on-paper-2); font-size: 1.05rem; max-width: 60ch; }
.bill__notes { border-top: 1px solid var(--rule-paper); padding-top: 1rem; margin-top: var(--space-3); font-style: italic; color: var(--on-paper-2); }
.bill__notes p { margin: 0 0 0.3rem; }
.fleuron { display: block; width: 46px; height: 18px; margin: 0 auto var(--space-3); color: var(--on-paper-2); }
@media (max-width: 560px) {
  .bill__row { flex-wrap: wrap; }
  .bill__row .leader { display: none; }
  .bill__row .amt { margin-left: auto; }
}

/* Questions */
.faq { max-width: 70ch; border-top: 1px solid var(--on-paper); }
.faq details { border-bottom: 1px solid var(--rule-paper); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; font-family: var(--font-display); font-size: 1.45rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 0.4rem; top: 50%; width: 11px; height: 11px; border-right: 1.5px solid var(--on-paper); border-bottom: 1.5px solid var(--on-paper); transform: translateY(-70%) rotate(45deg); transition: transform 300ms var(--ease); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { color: var(--on-paper-2); padding-bottom: 1.1rem; margin: 0; }
.dark .faq { border-top-color: var(--quill); }
.dark .faq details { border-bottom-color: var(--rule-ink); }
.dark .faq details p { color: var(--on-ink-2); }
.dark .faq summary::after { border-color: var(--quill); }

/* The epilogue: the curtain call and the waitlist */
.epilogue { position: relative; padding: calc(var(--space-5) + clamp(40px, 8vh, 90px)) var(--gutter) var(--space-5); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4) clamp(2rem, 6vw, 6rem); align-items: end; }
.epilogue .stage__valance { height: clamp(40px, 8vh, 90px); }
.epilogue h2 { font-size: var(--step-4); line-height: 1; }
.epilogue p { color: var(--on-ink-2); max-width: 46ch; }
.join { display: grid; gap: 0.7rem; }
.join label { font-family: var(--font-sc); font-size: 1.05rem; letter-spacing: 0.04em; color: var(--quill); }
.join .row { display: flex; }
.join input {
  flex: 1; min-width: 0; min-height: 3.2rem; padding: 0 1rem;
  font: 1.15rem var(--font-body);
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--paper); border-radius: 0;
}
.join input:disabled { background: var(--ink-raised); border-color: var(--disabled); color: #a59d90; }
.join input::placeholder { color: #8c8478; }
.join .note { font-size: 1rem; font-style: italic; margin: 0; }
@media (max-width: 860px) { .epilogue { grid-template-columns: minmax(0, 1fr); } .join .row { flex-direction: column; gap: 0.5rem; } }

/* Footer: the house */
.foot { padding: var(--space-4) var(--gutter) 2.5rem; border-top: 1px solid var(--rule-ink); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3) var(--space-4); align-items: center; }
.foot img { width: 120px; height: 120px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; margin-bottom: 0.8rem; }
.foot nav a { font-family: var(--font-sc); font-size: 1.1rem; letter-spacing: 0.03em; color: var(--quill); }
.foot small { display: block; color: var(--on-ink-2); font-size: 0.95rem; max-width: 72ch; }
@media (max-width: 640px) { .foot { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   App pages: a smaller stage on the app's own ground
   -------------------------------------------------------------------------- */
.mast {
  --rest: clamp(18px, 6vw, 90px);
  position: relative;
  overflow: hidden;
  padding: calc(clamp(44px, 7vh, 80px) + var(--space-4)) calc(var(--rest) + var(--gutter)) var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--space-4) clamp(2rem, 6vw, 6rem);
  align-items: end;
}
.mast .stage__valance { height: clamp(44px, 7vh, 80px); }
.mast .stage__curtain { width: var(--rest); transform: none; transition: none; background-image: url("../img/curtain-narrow.svg"); }
.mast .stage__curtain--r { transform: scaleX(-1); }
.mast h1 { font-size: var(--step-4); line-height: 1; margin-bottom: 0.4rem; }
.mast .act__who { margin-bottom: var(--space-3); }
.mast .act__lede { margin-bottom: var(--space-4); }
.mast .act__numeral { text-align: right; font-size: clamp(6rem, 16vw, 14rem); }
@media (max-width: 860px) {
  .mast { grid-template-columns: minmax(0, 1fr); }
  .mast .act__numeral { order: -1; text-align: left; font-size: clamp(4rem, 22vw, 6rem); }
}
@media (max-width: 760px) {
  /* phones: one broad fold per side, never pinstripes */
  .mast { --rest: 26px; }
  .mast .stage__curtain { background-size: 300% 100%; background-position: right center; }
}

.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 4vw, 4rem); }
.spec section { border-top: 1px solid var(--on-paper); padding: 1.1rem 0 1.5rem; }
.spec h3 { font-size: 1.7rem; margin-bottom: 0.5rem; }
.spec ul { margin: 0; padding: 0; list-style: none; }
.spec li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule-paper); color: var(--on-paper-2); }

.tree { min-width: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 2rem; font-size: 1.05rem; line-height: 1.8; background: var(--ink-raised); border: 1px solid var(--rule-ink); padding: 1.3rem 1.6rem; color: var(--on-ink-2); font-variant-numeric: lining-nums; }
.tree__row { display: contents; }
.tree code { font: inherit; white-space: pre; color: var(--on-ink); }
.tree span { font-style: italic; }
.tree b { font-weight: 600; }
@media (max-width: 760px) {
  .tree { grid-template-columns: minmax(0, 1fr); padding: 1rem 1.1rem; }
  .tree__row span { padding-left: 1.5rem; font-size: 0.95rem; line-height: 1.4; margin-bottom: 0.35rem; }
  .tree__row span:empty { display: none; }
}
@media (max-width: 760px) { .spec { grid-template-columns: minmax(0, 1fr); } }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4) clamp(2rem, 6vw, 6rem); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.prose { max-width: 66ch; }
.prose h2 { font-size: var(--step-2); margin: var(--space-4) 0 var(--space-1); }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.4rem; }
.dark .prose p { color: var(--on-ink-2); }

/* Motion off for anyone who asked for less */
@media (prefers-reduced-motion: reduce) {
  .stage, .stage__curtain, .stage__content, .bookpage { transition: none !important; }
  .js .stage.is-closed .stage__curtain--l { transform: translateX(calc(-100% + var(--rest))); }
  .js .stage.is-closed .stage__curtain--r { transform: translateX(calc(100% - var(--rest))) scaleX(-1); }
  .js .stage.is-closed .stage__content { opacity: 1; transform: none; }
}