/* ==========================================================================
   Hardcopy — landing page
   One stylesheet, no build step, no framework.

     1. tokens          6. how it works (pinned scroll)
     2. reset/base      7. before it prints
     3. primitives      8. why paper
     4. the volume      9. after a year
     5. hero           10. pricing, FAQ, footer, motion, responsive

   Section padding is set in ONE place (.section) and nowhere else. If a section
   needs different spacing it takes a modifier — never its own padding rule.
   ========================================================================== */

/* ------------------------------------------------------------------ 1. tokens */

:root {
  --stock:        #E4E2DA;  /* uncoated paper — primary background */
  --paper:        #F6F5F1;  /* brighter sheet — a page sitting on --stock */
  --ink:          #14181C;  /* blue-black press ink — all body text */
  --proof:        #2E5EAA;  /* blueline proof blue — THE accent */
  --proof-deep:   #234A85;  /* button hover only */
  --registration: #B23A2F;  /* marks and technical annotation ONLY */

  /* --pencil as briefed (#8A8778) is 2.78:1 on --stock, under the 4.5:1 this
     page requires. Darkened to 5.03:1. The original tone survives as
     --pencil-line, which only draws hairlines and carries no contrast rule. */
  --pencil:       #5F5E54;
  --pencil-line:  #8A8778;

  /* The footer band, shared with the account app so the two ends match. */
  --forest:       #22402F;
  --forest-rule:  #3D5A4A;
  --forest-dim:   #9FB0A6;
  --forest-line:  rgba(238, 240, 232, .05);

  /* Redaction is not served by Google Fonts; Instrument Serif is the brief's
     designated fallback and is what loads. Self-host Redaction and it takes
     over here with no other change. */
  --font-display: "Redaction 10", "Redaction", "Instrument Serif", Georgia, serif;
  --font-body:    "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono:    "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 34em;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --page: 72rem;
  --hair: 1px solid var(--pencil-line);
}

/* -------------------------------------------------------------- 2. reset/base */

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

/* Scroll past the bottom and the canvas shows through beneath the footer, so
   the band appears to peel away from the end of the page. Painting the document
   element in the footer's colour makes the overscroll reveal more footer. body
   keeps --stock, so only the rubber-band area changes. */
html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--forest);
  /* The same lattice the footer wears, so the overscroll is the band
     continuing rather than a flat panel behind it. */
  background-image:
    repeating-linear-gradient(45deg,
      var(--forest-line) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(-45deg,
      var(--forest-line) 0 1px, transparent 1px 15px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--stock);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; }
h1, h2 { letter-spacing: -0.02em; line-height: 0.98; margin: 0; }
h3, h4 { line-height: 1.15; margin: 0; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
img, svg { max-width: 100%; height: auto; }

::selection { background: var(--proof); color: var(--paper); }

:focus-visible { outline: 2px solid var(--proof); outline-offset: 3px; border-radius: 1px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--proof); color: var(--paper);
  padding: .6rem 1rem; font-family: var(--font-mono); font-size: 13px;
}
.skip:focus { left: .5rem; top: .5rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* --------------------------------------------------------- section texture */
/* The cover patterns again, very faint, as paper texture behind each section.
   Kept to a handful of percent: it should read as stock, not as stripes. */

.section, .hiw, .site-footer { position: relative; }

.tex {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .06;
  pointer-events: none;
  z-index: 0;
}
.tex--dark { opacity: .10; }
/* Lower than --dark: the lattice crosses itself, so the same opacity reads
   twice as strong wherever two lines meet. */
.tex--forest { opacity: .055; }

/* Absolutely-positioned siblings paint above unpositioned ones, so the content
   has to be lifted deliberately rather than by source order. */
.section > .container,
.hiw > .container,
.site-footer > .container { position: relative; z-index: 1; }

/* ------------------------------------------------------------ 3. primitives */

.container {
  width: 100%; max-width: var(--page);
  margin-inline: auto; padding-inline: var(--gutter);
}

/* THE ONLY SOURCE OF SECTION PADDING. */
.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section--hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem); }
.section--band { padding-block: clamp(4.5rem, 9vw, 7rem); }

.eyebrow {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pencil); margin: 0 0 1.1rem; max-width: none;
}

.section-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }

.h-lg { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.h-md { font-size: clamp(1.35rem, 2.4vw, 1.9rem); }

.lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--pencil); max-width: 46em; }
.note { color: var(--pencil); font-size: 1rem; }
.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; }

.link {
  color: var(--ink); text-decoration: none;
  background-image: linear-gradient(var(--proof), var(--proof));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size 150ms ease, color 150ms ease;
  padding-bottom: 1px;
}
.link:hover, .link:focus-visible { background-size: 100% 1px; color: var(--proof); }

.btn {
  display: inline-block;
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  padding: .85rem 1.25rem;
  background: var(--proof); color: var(--paper);
  border: 1px solid var(--proof); border-radius: 2px; cursor: pointer;
  transition: background-color 150ms ease;
}
.btn:hover, .btn:focus-visible { background: var(--proof-deep); }
.btn--ghost { background: transparent; color: var(--proof); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: rgba(46, 94, 170, .10); }
.btn--quiet { background: transparent; color: var(--pencil); border-color: var(--pencil-line); }
.btn--quiet:hover, .btn--quiet:focus-visible { background: rgba(138, 135, 120, .14); }

.sheet {
  background: var(--paper); border: var(--hair);
  border-radius: 2px; padding: clamp(1.25rem, 2.5vw, 2rem);
}

.split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- 4. header */

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--stock);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.site-header.is-scrolled { border-bottom-color: var(--pencil-line); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .9rem;
}
.wordmark {
  font-family: var(--font-display); font-size: 1.5rem;
  letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
}
.site-header__nav { display: flex; align-items: center; gap: 1.25rem; }
.site-header__nav .link { font-size: 15px; }

/* ------------------------------------------------------------ 5. the volume */
/* One book, drawn as an object rather than a rectangle: front cover, spine and
   page block. --depth is the real spine width for that page count, so a thick
   volume genuinely looks thick. Used at three sizes: the hero, the shelf, and
   the closed book in the scroll sequence. */

.vol {
  --w: 170px; --h: 275px; --depth: 22px;
  perspective: 1100px;
  width: var(--w);
}
.vol__block {
  position: relative;
  width: var(--w); height: var(--h);
  transform-style: preserve-3d;
  transform: rotateY(24deg) rotateX(7deg);
  transition: transform 260ms ease;
}
/* Faces pointing away from the viewer must not show through the cover. */
.vol__face { position: absolute; inset: 0; overflow: hidden;
             backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* The block occupies z from 0 (back board) to --depth (front board). */
.vol__face--front {
  transform: translateZ(var(--depth));
  background: var(--ink);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .35),
    9px 12px 18px rgba(20, 24, 28, .20);
}
.vol__face--spine {
  width: var(--depth); left: 0; inset-inline-end: auto;
  transform-origin: left center;
  transform: rotateY(-90deg);
  /* Deeper than either cover colour, so the fold reads on both. */
  background: #0F1216;
  border-right: 1px solid #2B3138;
  display: grid; place-items: center;
}
.vol__face--edge {
  width: var(--depth); left: auto; right: 0;
  transform-origin: right center;
  transform: rotateY(90deg);
  background: var(--paper);
  border-left: 1px solid var(--pencil-line);
  overflow: hidden;
}
/* The leaves, as flat 1px rules. */
.vol__leaves { position: absolute; inset: 0; }
.vol__leaves i { position: absolute; top: 0; bottom: 0; width: 1px; background: #CBC7BA; }

.vol__art { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Two stacked covers, cross-faded, so the hero can turn over the whole year.
   Both are children of the one front face — stacking them as separate 3D faces
   at the same depth z-fights. */
.vol__cover {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 700ms ease;
}
.vol__cover.is-on { opacity: 1; }

.vol__plate {
  position: absolute; inset: auto 0 0 0;
  display: flex; flex-direction: column; gap: .18rem;
  padding: 0 9% 11%;
  color: var(--paper);
}
.vol__imprint { font-family: var(--font-display); font-size: 1.05rem; line-height: 1; }
.vol__no {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase;
}
.vol__date {
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: .16em; text-transform: uppercase; opacity: .72;
}
.vol__spinetext {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .14em;
  color: var(--paper); white-space: nowrap;
}

/* -------------------------------------------------------------------- hero */

.hero { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.05fr .95fr; } }

.hero__title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.95; margin: 0 0 1.3rem; }
.hero__title .set-line { display: block; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; max-width: none; }

.hero__figure { justify-self: center; text-align: center; }
.vol--hero { --w: 250px; --h: 404px; margin-inline: auto; }
.vol--hero .vol__face--front {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .35),
    13px 17px 24px rgba(20, 24, 28, .24);
}
/* The hero volume tracks the pointer. --mx/--my/--tx/--ty are written by
   main.js; the base angles live here so the two cannot drift apart. The
   transition is what smooths a stream of mousemove events into a glide. */
.vol--hero .vol__block {
  transform:
    translate3d(var(--tx, 0px), var(--ty, 0px), 0)
    rotateY(calc(-26deg + var(--mx, 0deg)))
    rotateX(calc(4deg + var(--my, 0deg)));
  transition: transform 420ms cubic-bezier(.22, .68, .3, 1);
}
.vol--hero .vol__imprint { font-size: 1.5rem; }
.vol--hero .vol__no { font-size: 11px; }
.vol--hero .vol__date { font-size: 9.5px; }
.vol--hero .vol__spinetext { font-size: 9px; }
.hero__caption {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pencil);
  margin: 1.6rem 0 0; max-width: none;
}

/* --------------------------------------------------- 6. how it works */
/* Text scrolls; the stage is pinned beside it. One progress value drives the
   whole sequence: the saved things gather, the book they became opens, and its
   pages turn. Only transform and opacity animate. */

.hiw { padding-block: clamp(3rem, 6vw, 5rem) 0; }
.hiw__grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) {
  .hiw__grid { grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); }
}

.hiw__steps { display: flex; flex-direction: column; }
.hiw__step {
  min-height: 78vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 2rem;
  opacity: .28;
  transition: opacity 300ms ease;
}
.hiw__step.is-live { opacity: 1; }
.hiw__step h3 { margin: .5rem 0 .7rem; }
.hiw__n {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em;
  color: var(--registration); margin: 0; max-width: none;
}

.hiw__stage { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }

/* On a phone the stage moves above the text instead of beside it, and pins
   there while the steps scroll underneath. Same sequence, same scroll — the
   only thing that changes is where the stage sits. */
@media (max-width: 899px) {
  .hiw__grid { grid-template-columns: 1fr; gap: 0; }
  .hiw__stage {
    order: -1;
    top: 3.25rem;
    height: 48vh;
    margin-bottom: 1.25rem;
    /* Opaque, or the steps scroll through the book. */
    background: var(--stock);
    z-index: 2;
  }
  .hiw__step { min-height: 62vh; padding-block: 1.5rem; }
  /* The caption sits under the pile rather than behind it. */
  .stage__caption { bottom: 0; }
}

.stage {
  --page-h: min(52vh, 25rem);
  --page-w: calc(var(--page-h) * 0.6182);
  position: relative;
  width: 100%; height: 100%;
  display: grid; place-items: center;
}
@media (max-width: 899px) {
  .stage { --page-h: min(31vh, 13rem); --spread: .5; }
  .src__card { width: min(11rem, 58%); }
  .src__card--doc { width: min(7.5rem, 38%); }
  .src__body { padding: .45rem .5rem; }
  .src__card b { font-size: 11px; }
}

.stage__caption {
  position: absolute; left: 0; right: 0; bottom: max(6vh, 2rem);
  text-align: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pencil);
  margin: 0; max-width: none;
}

/* --- what you saved ------------------------------------------------------ */

.src { position: absolute; inset: 0; display: grid; place-items: center; }

.src__card {
  position: absolute;
  width: min(14rem, 40%);
  background: var(--paper);
  border: var(--hair);
  border-radius: 2px;
  box-shadow: 4px 6px 10px rgba(20, 24, 28, .13);
  overflow: hidden;
  /* --g is how far through the gather we are: 0 scattered, 1 collected. */
  transform:
    translate(
      calc(var(--x) * var(--spread, 1) * (1 - var(--g, 0))),
      calc(var(--y) * var(--spread, 1) * (1 - var(--g, 0))))
    rotate(calc(var(--r) * (1 - var(--g, 0))))
    scale(calc(1 - .55 * var(--g, 0)));
  opacity: calc(1 - var(--g, 0));
  will-change: transform, opacity;
}

.src__body { padding: .6rem .7rem; }
.src__card b {
  display: block; font-family: var(--font-body); font-weight: 600;
  font-size: 12.5px; line-height: 1.25; margin-bottom: .4rem;
}
.src__body i { display: block; height: 4px; background: #DCD9CF; margin-bottom: 3px; border-radius: 1px; }
.src__body i:last-of-type { width: 58%; }
.src__meta {
  display: block; margin-top: .35rem;
  font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--pencil);
}

/* --- a web page: browser chrome and a masthead -------------------------- */
.src__chrome {
  display: flex; align-items: center; gap: 3px;
  padding: .3rem .5rem;
  background: var(--stock);
  border-bottom: 1px solid var(--pencil-line);
}
.src__chrome i { width: 5px; height: 5px; border-radius: 50%; background: #C6C3B8; }
.src__chrome span {
  margin-left: .35rem;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em;
  color: var(--pencil);
}

/* Mail gets a header of its own rather than browser chrome: an envelope and the
   address you forward to, which is the feature the card is demonstrating. */
.src__chrome--mail { gap: .35rem; }
.src__chrome--mail svg {
  width: 13px; height: 10px; flex: 0 0 auto;
  fill: none; stroke: var(--proof); stroke-width: 1.1;
}
.src__chrome--mail span { margin-left: 0; color: var(--proof); }
/* The publication set in our own faces — a name, not a reproduction of a mark.
   See site/README.md before swapping in real brand assets. */
.src__masthead {
  font-family: var(--font-display); font-size: 13px; line-height: 1;
  margin: 0 0 .35rem; max-width: none;
}
.src__masthead--medium { font-size: 15px; letter-spacing: -0.02em; }

/* --- a post: an avatar and a handle ------------------------------------- */
.src__who { display: flex; align-items: center; gap: .4rem; margin: 0 0 .45rem; max-width: none; }
.src__avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); flex: 0 0 auto; }
.src__name { display: block; font-size: 10.5px; font-weight: 600; line-height: 1.1; }
.src__handle {
  display: block; font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: .04em; color: var(--pencil);
}

/* --- mail: header rows -------------------------------------------------- */
.src__row {
  display: flex; gap: .45rem; margin: 0 0 .3rem; max-width: none;
  font-size: 10.5px; line-height: 1.3;
}
.src__row span {
  flex: 0 0 2.6rem;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pencil); padding-top: .12rem;
}

/* --- a PDF: portrait, with a turned corner ------------------------------ */
/* The shape is the tell. A document does not look like a web page, so the card
   should not either. */
.src__card--doc {
  width: min(9.5rem, 26%);
  background: #FFFDF8;
}
.src__card--doc .src__body { padding: .75rem .7rem .7rem; }
.src__card--doc b { font-size: 12px; }
.src__filetype {
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--registration);
  margin: 0 0 .5rem; max-width: none;
}
.src__fold {
  position: absolute; top: 0; right: 0;
  width: 16px; height: 16px;
  background: var(--stock);
  border-left: 1px solid var(--pencil-line);
  border-bottom: 1px solid var(--pencil-line);
}

.src__card--web  { border-left: 2px solid var(--ink); }
.src__card--post { border-left: 2px solid var(--ink); }
.src__card--mail { border-left: 2px solid var(--proof); }
.src__card--doc  { border-left: 2px solid var(--registration); }

/* --- the book it becomes -------------------------------------------------- */

.book3d {
  position: relative;
  width: calc(var(--page-w) * 2);
  height: var(--page-h);
  perspective: 2400px;
  /* Closed, only the right-hand page shows, and its centre sits half a page to
     the right of the container's. Shift left by that much while closed, then
     slide to true centre as the cover opens. */
  transform: translateX(calc(var(--page-w) / -2 * (1 - var(--open, 0))));
  opacity: var(--g, 0);
  transition: opacity 200ms linear;
}

.page {
  width: var(--page-w); height: var(--page-h);
  background: var(--paper);
  border: 1px solid var(--pencil-line);
  box-shadow: 6px 8px 14px rgba(20, 24, 28, .16);
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: calc(var(--page-h) * 0.062) calc(var(--page-h) * 0.055);
  font-size: calc(var(--page-h) * 0.0235);
  line-height: 1.5;
  color: var(--ink);
}
.page--static { position: absolute; top: 0; z-index: 1; }
.page--left  { left: 0; opacity: var(--open, 0); }
.page--right { left: var(--page-w); }

.page__head {
  font-family: var(--font-mono); font-size: .82em; letter-spacing: .2em;
  text-transform: uppercase; margin: 0 0 1.6em; max-width: none;
}
.page__runhead {
  font-family: var(--font-mono); font-size: .62em; letter-spacing: .22em;
  text-transform: uppercase; color: #5a5a52; text-align: center;
  margin: 0 0 1.8em; max-width: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page__folio {
  font-family: var(--font-mono); font-size: .7em; color: #5a5a52;
  text-align: center; margin: auto 0 0; padding-top: 1.2em; max-width: none;
}
.page__body { max-width: none; }
.page__body p { margin: 0 0 .75em; max-width: none; }
.page__body--justified p { text-align: justify; text-align-last: left; hyphens: auto; }
.page__body--justified p + p { text-indent: 1.2em; }

.page__n {
  font-family: var(--font-mono); font-size: .7em; letter-spacing: .2em;
  text-transform: uppercase; color: #5a5a52; margin: 0 0 2.4em; max-width: none;
}
.page__title { font-family: var(--font-body); font-weight: 600; font-size: 1.7em; line-height: 1.2; margin: 0 0 .4em; }
.page__byline { font-size: .85em; color: #5a5a52; margin: 0 0 1.6em; max-width: none; }

.page__toc { list-style: none; margin: 0; padding: 0; }
.page__toc li { display: flex; align-items: baseline; gap: .35em; padding: .42em 0; }
.page__dots { flex: 1 1 auto; min-width: .8em; border-bottom: 1px dotted var(--pencil-line); transform: translateY(-.3em); }
.page__no { font-family: var(--font-mono); font-size: .82em; }
.page__stat {
  font-family: var(--font-mono); font-size: .68em; letter-spacing: .1em;
  text-transform: uppercase; color: #5a5a52;
  margin: 1.4em 0 0; padding-top: .9em; border-top: 1px solid var(--pencil-line); max-width: none;
}

/* the cover: the one page where ink and paper swap */
.page--cover { background: var(--ink); color: var(--paper); border-color: var(--ink); padding: 0; position: relative; }
.page__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.page__plate {
  position: absolute; inset: auto 0 0 0;
  display: flex; flex-direction: column; gap: .2em;
  padding: 0 9% 11%;
}
.page__imprint { font-family: var(--font-display); font-size: 1.9em; line-height: 1; }
.page__vol { font-family: var(--font-mono); font-size: .78em; letter-spacing: .16em; text-transform: uppercase; margin: 0; }
.page__month { font-family: var(--font-mono); font-size: .68em; letter-spacing: .16em; text-transform: uppercase; margin: 0; opacity: .75; }
.page__vol--dark { color: var(--ink); font-family: var(--font-display); font-size: 1.5em; letter-spacing: 0; text-transform: none; }
.page__month--dark { color: #5a5a52; opacity: 1; }
.page__mid { margin: auto 0; }
.page__mid--center { text-align: center; }
.page__foot { font-family: var(--font-mono); font-size: .7em; letter-spacing: .16em; text-transform: uppercase; margin: auto 0 0; max-width: none; }
.page__foot--dark { color: #5a5a52; text-align: center; }

.leaf {
  position: absolute; top: 0; left: var(--page-w);
  width: var(--page-w); height: var(--page-h);
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: rotateY(calc(var(--turn, 0) * -180deg));
}
.leaf__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf__face--back { transform: rotateY(180deg); }
/* A page darkens as it stands on edge. Flat wash, not a gradient. */
.leaf__face::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ink); opacity: var(--shade, 0); pointer-events: none;
}

/* ------------------------------------------------ 7. before it prints */

.facts { margin: 1.75rem 0 0; }
.facts div { padding: .85rem 0; border-top: var(--hair); }
.facts dt {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pencil); margin-bottom: .3rem;
}
.facts dd { margin: 0; max-width: var(--measure); }

.email__subject { font-family: var(--font-body); font-size: 1.25rem; font-weight: 600; margin: 0 0 .25rem; max-width: none; }
.email__from {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pencil); margin: 0 0 1.25rem; max-width: none;
}
.toc { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.toc li { display: flex; align-items: baseline; gap: .5rem; padding: .35rem 0; font-size: 15px; line-height: 1.35; }
.toc__dots { flex: 1 1 auto; border-bottom: 1px dotted var(--pencil-line); transform: translateY(-.28em); min-width: 1.5rem; }
.toc__page { font-family: var(--font-mono); font-size: 13px; color: var(--pencil); }
.email__foot {
  border-top: var(--hair); padding-top: .9rem; max-width: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pencil);
}
.email__actions { display: flex; gap: .6rem; margin-top: 1.1rem; flex-wrap: wrap; max-width: none; }
.email__actions .btn { padding: .6rem .9rem; font-size: 11px; }

/* ----------------------------------------------------- 9. after a year */
/* A shelf, seen the way a shelf is seen: spines. Width is the real spine for
   that page count, so the busy months are visibly fatter. Hovering or focusing
   one pulls it out and shows what was in it. */

.shelf-band { background: var(--ink); }
.shelf-band h2 { color: var(--paper); }
.shelf-band .eyebrow, .shelf-band .lede { color: #A6A499; }

/* The board hugs the books rather than spanning the column, so twelve spines
   read as a shelf rather than as a few marks on a long rule. */
.shelf {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: inline-block;
  max-width: 100%;
  overflow-x: auto; scrollbar-width: thin;
  padding-top: 1rem;
}

.shelfrow { display: flex; align-items: flex-end; gap: 6px; padding-left: 2px; }

.spine {
  flex: 0 0 auto;
  width: var(--w, 20px);
  height: clamp(12rem, 24vw, 18rem);
  background: var(--cover, #14181C);
  border: 0; border-radius: 1px 1px 0 0;
  padding: 0; margin: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow:
    inset -1px 0 0 rgba(0, 0, 0, .35),
    inset 1px 0 0 rgba(255, 255, 255, .07),
    0 6px 10px rgba(0, 0, 0, .5);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
/* Pulled out, a book sits above the shelf and throws further. */
.spine:hover, .spine[aria-selected="true"] {
  box-shadow:
    inset -1px 0 0 rgba(0, 0, 0, .35),
    inset 1px 0 0 rgba(255, 255, 255, .07),
    0 13px 16px rgba(0, 0, 0, .6);
}
.spine:hover, .spine[aria-selected="true"] { transform: translateY(-14px); }
.spine:focus-visible { outline-offset: 4px; }

.spine__text {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--paper);
  white-space: nowrap; pointer-events: none;
  display: flex; gap: .9em; align-items: center;
}
.spine__text b { font-family: var(--font-display); font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 400; }

/* Three spine treatments, so a shelf of twelve reads as a series rather than
   a set of identical bars. Flat bands and rules — no gradients. */
.spine--t1::before, .spine--t2::before, .spine--t2::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: rgba(246, 245, 241, .45);
}
.spine--t1::before { top: 14%; box-shadow: 0 4px 0 rgba(246, 245, 241, .45); }
.spine--t2::before { top: 9%; }
.spine--t2::after { bottom: 9%; }

.shelf__board { height: 6px; background: #2B3138; border-radius: 1px; }

/* --- what was in it ------------------------------------------------------ */

.volpanels { margin-top: clamp(2rem, 4vw, 3rem); }
.volpanel { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.volpanel[hidden] { display: none; }
@media (min-width: 760px) { .volpanel { grid-template-columns: 10rem 1fr; } }

.volpanel .vol { --w: 10rem; }
.volpanel .vol__block { width: 100%; height: auto; aspect-ratio: 170 / 275; transform: rotateY(20deg) rotateX(3deg); }
.volpanel .vol__face--front {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .5),
    8px 11px 16px rgba(0, 0, 0, .5);
}
.volpanel .vol__imprint { font-size: .95rem; }
.volpanel .vol__no { font-size: 8px; }

.volpanel__title { font-family: var(--font-display); font-size: 1.5rem; color: var(--paper); margin: 0 0 .3rem; }
.volpanel__meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: #A6A499; margin: 0 0 1.2rem; max-width: none;
}
.volpanel__toc { max-width: 34em; }
.volpanel__toc li { color: var(--stock); font-size: 14.5px; }
.volpanel__toc .toc__dots { border-bottom-color: #3A4046; }
.volpanel__toc .toc__page { color: #A6A499; }
.volpanel__more {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #7E7C73; margin: .6rem 0 0; max-width: none;
}
/* Without JS nothing can be switched, so show the first volume only. */
.no-js .volpanel + .volpanel { display: none; }

/* --- ways in (how it works, step 01) ------------------------------------- */
/* Step 03: what "cleanly formatted" actually means, as things you can check. */
.ticks { list-style: none; margin: .4rem 0 0; padding: 0; max-width: var(--measure); }
.ticks li {
  position: relative;
  padding: .38rem 0 .38rem 1.7rem;
  font-size: .97rem;
}
.ticks li::before {
  content: "";
  position: absolute; left: .15rem; top: .78rem;
  width: .52rem; height: .28rem;
  border-left: 2px solid var(--proof);
  border-bottom: 2px solid var(--proof);
  transform: rotate(-45deg);
}

.ways { list-style: none; margin: .3rem 0 0; padding: 0; max-width: var(--measure); }
.ways li { padding: .45rem 0; border-top: var(--hair); font-size: .97rem; }
.ways b { font-weight: 600; }

/* --- the month ----------------------------------------------------------- */
.month { list-style: none; margin: 2.25rem 0 3rem; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 820px) { .month { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.month li { border-top: 2px solid var(--ink); padding-top: .9rem; }
.month__when {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--registration); margin: 0 0 .5rem; max-width: none;
}
.month__what { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.15; margin: 0 0 .5rem; max-width: none; }
.month li p:last-child { margin-bottom: 0; font-size: .97rem; color: var(--pencil); }

.split--wide { align-items: start; }
@media (min-width: 900px) { .split--wide { grid-template-columns: 1.05fr .95fr; } }

.facts { margin: 1.25rem 0 0; }

/* --- benefits (why paper) ------------------------------------------------ */
.bens { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 780px) { .bens { grid-template-columns: 1fr 1fr; } }
.ben { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.ben p { max-width: none; }
.ben__head { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.05; margin: 0 0 .6rem; }
.ben__fig {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--registration); margin: 0 0 .9rem;
}
.ben__note { font-size: .97rem; margin: 0 0 .8rem; color: var(--pencil); }
.ben__cite { font-size: 12.5px; line-height: 1.5; color: var(--pencil); font-style: italic; margin: 0; }

/* -------------------------------------------------- 10. pricing / FAQ */

.plans { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 820px) { .plans { grid-template-columns: 1fr 1.15fr; } }

.plan { border: var(--hair); border-radius: 2px; padding: clamp(1.5rem, 3vw, 2rem); }
.plan--primary { background: var(--paper); border-color: var(--ink); }
.plan__name { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--pencil); margin: 0 0 .6rem; }
.plan__price { font-family: var(--font-mono); font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 1.1rem; }
.plan p { font-size: 16.5px; }
.plan .btn { margin-top: .6rem; }

.faq { max-width: 46em; }
.faq details { border-bottom: var(--hair); }
.faq details:first-of-type { border-top: var(--hair); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.1rem 2rem 1.1rem 0; position: relative;
  font-size: 1.05rem; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .25rem; top: 1rem;
  font-family: var(--font-mono); color: var(--proof); font-size: 1.1rem;
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--proof); }
.faq__answer { padding: 0 2rem 1.3rem 0; color: var(--pencil); }
.faq__answer p { margin: 0; max-width: none; }

/* ------------------------------------------------------------- footer */

.site-footer { background: var(--forest); color: var(--paper); padding-block: clamp(3.5rem, 7vw, 5rem) 0; }
.site-footer h2 { color: var(--paper); }
.site-footer__cta { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.site-footer__cta p { color: var(--stock); }
.site-footer__cta p:last-of-type { margin-bottom: 0; }
.site-footer__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem;
  padding-block: 1.4rem; border-top: 1px solid var(--forest-rule);
  font-family: var(--font-mono); font-size: 12px; color: var(--forest-dim);
}
.site-footer__row .link { color: var(--forest-dim); font-size: 12px; }
.site-footer__row .link:hover { color: var(--paper); }
.site-footer__colophon { margin-left: auto; margin-bottom: 0; max-width: none; }

/* ------------------------------------------------------------- motion */

.set-line { opacity: 0; transform: translateY(8px); animation: set-in 400ms ease forwards; }
.set-line:nth-child(1) { animation-delay: 0ms; }
.set-line:nth-child(2) { animation-delay: 60ms; }
.set-line:nth-child(3) { animation-delay: 120ms; }
@keyframes set-in { to { opacity: 1; transform: none; } }

.reveal { opacity: 0; transition: opacity 300ms ease; }
.reveal.is-visible { opacity: 1; }
.no-js .reveal { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .set-line { opacity: 1; transform: none; }
  .reveal { opacity: 1; }
  .hiw__step { opacity: 1; }
}

/* --------------------------------------------------------- responsive */

@media (max-width: 560px) {
  body { font-size: 17px; }
  .site-header__nav { gap: .9rem; }
  .site-header__nav .btn { padding: .7rem .8rem; font-size: 11px; }
  .vol--hero { --w: 190px; --h: 307px; }
  .year { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
}

@media print {
  .site-header, .site-footer { display: none; }
  body { background: #fff; }
}

/* ---- the mark -------------------------------------------------------------
   A book seen face-on with an H knocked out of its cover; its box is the trim
   of the pocket paperback we print. Sizing is width-driven — an inline <svg>
   with a viewBox takes its containing block's width under `width:auto` rather
   than deriving it from the aspect ratio, which throws the wordmark across the
   header. */
.mark { width: 1.0044em; height: auto; aspect-ratio: 62 / 100; display: block;
        flex: 0 0 auto; }
.wordmark { display: inline-flex; align-items: center; gap: .72em; }
.foot-mark { display: inline-flex; align-items: center; gap: .6em; }
.foot-mark .mark { width: .95em; }

/* The header at phone widths.
   Measured at 320px: the wordmark, "Sign in" and the Get started button could
   not share a line, so "Sign in" broke across two lines and sat on top of the
   wordmark. The wordmark must not shrink or wrap, so the slack is taken out of
   the gaps and the sign-in link instead. Measured after: nothing overlaps down
   to 300px and the header stays a single 73px row. */
@media (max-width: 400px) {
  .site-header__inner { gap: .6rem }
  .wordmark { font-size: 1.28rem; white-space: nowrap }
  .site-header__nav { gap: .6rem; flex: 0 0 auto }
  .site-header__nav .link { white-space: nowrap; font-size: 14px }
  .site-header__nav .btn { padding: .62rem .7rem }
}
/* Touch targets.
   The sign-in link was 46x25. The spines are deliberately narrow — their width
   is the book's real thickness, which is the whole point of the shelf — so
   rather than fattening them, each gets an invisible hit area that fills the
   6px gap either side. Visually identical, about a third easier to hit. */
@media (hover: none), (max-width: 48rem) {
  .site-header__nav .link { min-height: 44px; display: inline-flex;
        align-items: center }
  .spine { position: relative }
  .spine::before { content: ""; position: absolute; inset: 0 -3px;
        /* behind the spine's own decoration, so it cannot cover the artwork */
        z-index: 0 }
}