@font-face { font-family: "Geist Mono"; src: url(/eink/assets/fonts/geist-mono-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/eink/assets/fonts/geist-mono-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/eink/assets/fonts/geist-mono-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url(/eink/assets/fonts/literata-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url(/eink/assets/fonts/literata-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url(/eink/assets/fonts/literata-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Doto Prop"; src: url(/eink/assets/fonts/doto-prop-900.woff2) format("woff2"); font-weight: 900; font-style: normal; font-display: block; }

:root {
  --paper: #DCD9D1; --tap: #F4F2EC; --ink: #111110; --grey: #4A4843; --soft: #B8B4AC;
  --hair: rgba(17, 17, 16, 0.32);
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: Literata, Georgia, "Times New Roman", serif;
  --doto: "Doto Prop", "Geist Mono", ui-monospace, monospace;
  --bar: 64px; --strip: 52px;
  color-scheme: light;
}
html { scroll-behavior: auto; background: var(--paper); }
body { margin: 0; background: var(--paper) url(/eink/assets/img/paper.png) repeat; background-size: 320px 320px; color: var(--ink); font-family: var(--serif); -webkit-font-smoothing: antialiased; padding-bottom: calc(var(--strip) + env(safe-area-inset-bottom, 0px)); }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: var(--ink); }
button { font: inherit; color: inherit; }
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--tap); }

/* ---------- reader chrome ---------- */
.status { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; height: var(--bar); background: var(--paper) url(/eink/assets/img/paper.png) repeat; background-size: 320px 320px; border-bottom: 1px solid var(--hair); font-family: var(--mono); font-size: 12px; }
.status .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 14px; flex-shrink: 0; }
/* A centred 1120px column with 24px sides; the links sit centred on the screen from 768px. */
.status-in { height: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 24px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; }
.toplinks { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 32px; }
.toplinks a { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--grey); padding: 5px 8px; white-space: nowrap; }
.toplinks a:hover { color: var(--ink); }
.toplinks a.here { background: var(--ink); color: var(--tap); }
.status .join { margin-left: auto; }
.status .join .short { display: none; }
@media (max-width: 899px) { .status .join .long { display: none; } .status .join .short { display: inline; } }
@media (max-width: 767px) { .toplinks { display: none; } }
.status .brand img { width: 22px; height: 22px; }
.tbtn { border: 1.5px solid var(--ink); background: var(--tap); padding: 6px 10px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; border-radius: 0; }
.tbtn:hover, .tbtn[aria-expanded="true"] { background: var(--ink); color: var(--tap); }

.strip { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--paper) url(/eink/assets/img/paper.png) repeat; background-size: 320px 320px; border-top: 1px solid var(--hair); }
.strip-in { height: var(--strip); display: flex; align-items: center; gap: 16px; padding-inline: 16px; }
.turn { width: 36px; height: 36px; flex-shrink: 0; border: 1.5px solid var(--ink); background: var(--tap); display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 0; padding: 0; }
.turn:hover { background: var(--ink); }
.turn:hover svg { stroke: var(--tap); }
.where { flex-grow: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.where-text { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; }
.where-text .left-min { color: var(--grey); }
.track { height: 3px; background: rgba(17, 17, 16, 0.18); position: relative; }
.track .done { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); width: 0; }
.track { cursor: pointer; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }   /* a thicker hit area than the 3px line */
.track .tick { position: absolute; top: -10px; width: 20px; height: 23px; margin-left: -10px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 0; }
.track .tick::before { content: ""; position: absolute; left: 9px; top: 7px; width: 1.5px; height: 9px; background: var(--ink); }
.track .tick:hover::before, .track .tick:focus-visible::before { left: 8px; top: 4px; width: 3.5px; height: 15px; }
.track .tick::after { content: attr(data-name); position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: none; background: var(--ink); color: var(--tap); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 8px; white-space: nowrap; pointer-events: none; }
.track .tick:hover::after, .track .tick:focus-visible::after { display: block; }
.track .tick.start::after { left: 0; transform: none; }
.track .tick.end::after { left: auto; right: 0; transform: none; }
.track .tick:focus-visible { outline: none; }

#flash { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: none; }
#flash.black { display: block; background: var(--ink); }
#flash.white { display: block; background: var(--tap); }

/* contents */

.kbd { border: 1px solid var(--ink); padding: 0 4px; font-weight: 700; }
.xbtn { border: 0; background: none; padding: 2px; cursor: pointer; display: flex; }

/* ---------- book ---------- */
main { display: block; }
.page { padding: 96px 64px 40px; max-width: 1180px; margin: 0 auto; box-sizing: content-box; scroll-margin-top: var(--bar); }
.folio { margin-top: 96px; display: flex; align-items: center; justify-content: center; gap: 14px; font-family: var(--mono); font-size: 12px; color: var(--grey); }
.folio::before, .folio::after { content: ""; width: 28px; height: 1px; background: var(--grey); }
.eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); }
.opener { max-width: 700px; display: flex; flex-direction: column; gap: 18px; margin-bottom: 56px; }
.opener .chap { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; display: flex; align-items: center; gap: 14px; }
.opener .chap::after { content: ""; width: 48px; height: 1.5px; background: var(--ink); }
.opener h2 { margin: 0; font-size: 52px; line-height: 1.08; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.lede { margin: 0; font-size: 20px; line-height: 1.6; color: var(--ink); text-align: left; hyphens: auto; max-width: 62ch; }
.opener.center { margin-inline: auto; align-items: center; text-align: center; }
.opener.center .chap::before { content: ""; width: 48px; height: 1.5px; background: var(--ink); }
.opener.center .lede { text-align: center; max-width: 34em; hyphens: manual; text-wrap: balance; }
.opener.center .lede::first-letter { float: none; font-size: inherit; font-weight: inherit; line-height: inherit; padding: 0; }
.plans.center { margin-inline: auto; }
.lede::first-letter { float: left; font-weight: 600; font-size: 3.35em; line-height: 0.82; padding: 6px 10px 0 0; }
.body { font-size: 17px; line-height: 1.6; color: var(--grey); margin: 0; hyphens: auto; }

.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 12px 20px; border: 1.5px solid var(--ink); background: var(--tap); color: var(--ink); cursor: pointer; border-radius: 0; }
.btn:hover { background: var(--ink); color: var(--tap); }
.btn.primary { background: var(--ink); color: var(--tap); padding: 16px 28px; }
.btn.primary:hover { background: var(--tap); color: var(--ink); }
.btn svg { stroke: currentColor; }

.iphone { --w: 290px; position: relative; flex-shrink: 0; width: var(--w); height: calc(var(--w) * 2.083); box-sizing: border-box; padding: calc(var(--w) * 0.036); border-radius: calc(var(--w) * 0.168); background: var(--ink); box-shadow: inset 0 0 0 1.5px #5E5B55, inset 0 0 0 3.5px var(--ink), inset 0 0 0 4.5px #2C2B28; }
.iphone .screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--w) * 0.132); background: var(--paper); }
.iphone .screen img, .iphone .screen video { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.iphone .island { position: absolute; top: calc(var(--w) * 0.03); left: 50%; transform: translateX(-50%); width: calc(var(--w) * 0.3); height: calc(var(--w) * 0.088); border-radius: 999px; background: var(--ink); }
.iphone .key { position: absolute; width: calc(var(--w) * 0.012); background: var(--ink); }
.iphone .key.l { left: calc(var(--w) * -0.011); border-radius: 2px 0 0 2px; }
.iphone .key.r { right: calc(var(--w) * -0.011); border-radius: 0 2px 2px 0; }
.iphone .k1 { top: 17%; height: 4.5%; } .iphone .k2 { top: 25%; height: 8%; } .iphone .k3 { top: 35%; height: 8%; } .iphone .k4 { top: 28%; height: 12%; }

/* title page */
.title-page { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 80px; }
.title-page .mark { width: 104px; height: 104px; }
.title-page h1 { margin: 0; font-family: var(--doto); font-weight: 900; font-size: clamp(50px, 9.2vw, 132px); line-height: 0.98; letter-spacing: 0; }
.title-page .sub { margin: 0; max-width: 560px; font-size: 21px; line-height: 1.5; color: var(--grey); text-wrap: pretty; }
.stage { position: relative; width: 100%; height: 713px; margin-top: 40px; }
.held { position: absolute; top: 0; left: calc(50% - 472px); width: 659px; height: 713px; }
.held .hand { position: absolute; inset: 0; width: 659px; height: 713px; max-width: none; image-rendering: pixelated; }
.held .iphone { position: absolute; left: 327px; top: 0; --w: 290px; }
.title-page h1 { position: relative; }
.title-page h1 canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.flip-pending .title-page h1 { color: transparent; }
.intro-pending .held { clip-path: inset(0 0 100% 0); }
.intro-pending .stage .chip, .intro-pending .stage .stack, .intro-pending .stage .fan { visibility: hidden; }
.printhead { position: absolute; left: -6px; right: -6px; height: 10px; pointer-events: none; z-index: 6; }
.cardflip { position: absolute; pointer-events: none; z-index: 5; }
#tracker, #trackerW { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 34; pointer-events: none; opacity: 0.4; }
#tracker { mix-blend-mode: difference; }
.held.lensing { cursor: none; }
.held.lensing .lens { display: block; }
.held .hand { z-index: 1; }
.held .iphone { z-index: 4; }
.chip { position: absolute; background: var(--tap); border: 1.5px solid var(--ink); text-align: left; box-sizing: border-box; }
.chip-note { left: calc(50% - 560px); top: 40px; width: 330px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.chip-row { display: flex; align-items: center; gap: 8px; }
.chip-row img { width: 22px; height: 22px; }
.stack { position: absolute; left: calc(50% - 530px); top: 230px; width: 280px; height: 96px; }
.stack > span { position: absolute; border: 1px solid var(--ink); background: var(--tap); }
.stack .front { inset: 0; border-width: 1.5px; padding: 14px 16px; display: flex; justify-content: space-between; }
.due { align-self: flex-start; margin-top: auto; background: var(--ink); color: var(--tap); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; padding: 3px 7px; }
.fan { position: absolute; left: calc(50% + 205px); top: 90px; width: 330px; height: 150px; }
.fan img { position: absolute; width: 64px; }
.fan .bar { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ink); color: var(--tap); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 16px; text-align: center; white-space: nowrap; }
.chip-voice { left: calc(50% + 225px); top: 330px; width: 270px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.sq { width: 40px; height: 40px; background: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wave { display: inline-flex; align-items: center; gap: 3px; }
.wave i { display: block; width: 4px; background: var(--ink); }

/* hero: a highlighter pass over one phrase, once, then it stays. The band is a
   gradient on the inline <mark>; with the default box-decoration-break (slice)
   a wrapped phrase is one continuous strip, so the pen runs line by line. */
.title-page .sub mark.hl { color: inherit; background: linear-gradient(to bottom, transparent 46%, #DCCB96 46%, #DCCB96 90%, transparent 90%) no-repeat 0 0 / 0% 100%; padding: 0 2px; margin: 0 -2px; animation: hl-pass 0.7s steps(14, end) 1.4s forwards; }
@keyframes hl-pass { to { background-size: 100% 100%; } }

/* three steps, under the hero: plain columns on the paper, no box */
.steps { max-width: 1180px; margin: 0 auto; padding: 40px 64px 16px; box-sizing: content-box; text-align: center; }
.steps h2 { margin: 0 0 36px; font-size: 30px; line-height: 1.2; font-weight: 600; text-wrap: balance; }
.steps-row { list-style: none; margin: 0 auto; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.steps-row li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.step-n { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: var(--grey); }
.steps-row h3 { margin: 0; font-size: 21px; line-height: 1.3; font-weight: 600; }
.steps-row p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--grey); max-width: 26ch; }

/* shelf */
.shelf { padding: 56px 0 24px; overflow: hidden; display: flex; flex-direction: column; gap: 22px; }
.row { overflow: hidden; }
.shelf-track { display: flex; width: max-content; will-change: transform; }
/* drift starts only once the second copy is in place (JS adds .ready), already mid-loop so there is no cold start */
.shelf.ready .r1 .shelf-track { animation: drift 90s linear -23s infinite; }
.shelf.ready .r2 .shelf-track { animation: drift 104s linear -61s infinite reverse; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cover { position: relative; width: 104px; height: 156px; margin-right: 18px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(17, 17, 16, 0.55); background: var(--tap); }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover img.b { visibility: hidden; -webkit-mask-size: 12px 12px; mask-size: 12px 12px; -webkit-mask-repeat: repeat; mask-repeat: repeat; }
@media (prefers-reduced-motion: reduce) { .shelf.ready .shelf-track { animation: none; } }

/* chapter I */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.card { border: 1.5px solid var(--ink); background: var(--tap); display: flex; flex-direction: column; overflow: hidden; }
.card-text { padding: 36px; display: flex; flex-direction: column; gap: 10px; }
.card h3 { margin: 0; font-family: var(--mono); font-size: 24px; font-weight: 700; }
.card-art { border-top: 1px solid var(--hair); height: 440px; position: relative; display: flex; justify-content: center; padding-top: 32px; box-sizing: border-box; overflow: hidden; }
.card-art .iphone { --w: 270px; }
/* Chapter I: the whole phone, with the same 32px of paper below it as above (phone height is --w * 2.083) */
.card-art.tall { height: 628px; }
.rec { position: absolute; left: 40px; top: 34px; transform: rotate(-3deg); background: var(--ink); color: var(--tap); padding: 10px 14px; display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; }
.rec .wave i { background: var(--tap); width: 3px; }
.voice { position: absolute; left: 60px; right: 60px; top: 110px; background: var(--paper); border: 1.5px solid var(--ink); padding: 18px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.voice blockquote { margin: 0; font-size: 20px; line-height: 1.45; font-style: italic; }
.voice .meta { display: flex; align-items: center; gap: 10px; color: var(--grey); font-family: var(--mono); font-size: 12px; }
.voice .meta .wave i { background: var(--grey); width: 3px; }
.mic-btn { position: absolute; right: 48px; bottom: 28px; width: 60px; height: 60px; background: var(--ink); display: flex; align-items: center; justify-content: center; }

/* chapter II */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.feature { border-top: 1.5px solid var(--ink); padding: 24px 0 36px; display: flex; flex-direction: column; gap: 12px; }
.feature h3 { margin: 0; font-family: var(--mono); font-size: 17px; font-weight: 700; }
.feature p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--grey); }

/* chapter III */
.detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: center; }
.detail + .detail { margin-top: 88px; }
.detail-text { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 460px; }
.detail-text h3 { margin: 0; font-size: 38px; line-height: 1.15; font-weight: 600; text-wrap: balance; }
.detail-text p { margin: 0; font-size: 19px; line-height: 1.55; color: var(--grey); hyphens: auto; }
.detail-art { position: relative; height: 540px; display: flex; justify-content: center; overflow: hidden; }
.detail-art .iphone { --w: 250px; align-self: center; }
.detail-art .tilt { position: absolute; width: 110px; }
.detail-art .wall { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); width: 600px; max-width: none; opacity: 0.28; }

/* chapter III: scan a page (drawn after ScanPassageView: pick the first line, then the last) */
.scan-art { flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.viewfinder { position: relative; padding: 18px; }
.viewfinder::before, .viewfinder::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(var(--ink), var(--ink)) 0 0 / 22px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 0 / 2px 22px no-repeat,
              linear-gradient(var(--ink), var(--ink)) 100% 100% / 22px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) 100% 100% / 2px 22px no-repeat; }
.viewfinder::after { transform: scaleX(-1); }
.sheet { width: 340px; max-width: 100%; box-sizing: border-box; background: var(--tap); border: 1px solid var(--hair); padding: 26px 28px 30px; transform: rotate(-1.5deg); display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--grey); text-align: left; }
.sheet p { margin: 0; hyphens: auto; }
.sheet-head { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; color: var(--grey); margin-bottom: 4px; }
.sheet .picked { color: var(--tap); }
.sheet .picked span { background: var(--ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 2px 3px; }
.scan-bar { width: 340px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; }
.scan-hint { font-family: var(--mono); font-size: 12px; color: var(--grey); text-align: center; }
.scan-keep { background: var(--ink); color: var(--tap); font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px; text-align: center; }

/* chapter IV: your reading year (same cards as chapter I; the punched card is drawn in build.py to InkPunchCard's geometry) */
.streak-art { flex-direction: column; align-items: center; justify-content: flex-start; padding: 52px 32px 0; }
.shelf-ghost { position: absolute; left: 0; right: 0; bottom: -46px; display: flex; justify-content: center; align-items: flex-end; gap: 14px; opacity: 0.2; pointer-events: none; }
.shelf-ghost img { width: 84px; height: 126px; object-fit: cover; box-shadow: 0 0 0 1px var(--ink); flex-shrink: 0; }
.slip { position: relative; z-index: 1; width: 326px; max-width: 100%; box-sizing: border-box; background: var(--tap); border: 1.5px solid var(--ink); padding: 26px 20px 0; display: flex; flex-direction: column; gap: 14px; }
.slip-hole { position: absolute; top: 9px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); }
.slip-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); }
.week-row { display: flex; justify-content: space-between; }
.wk { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--grey); }
.wk .box { width: 34px; height: 34px; box-sizing: border-box; border: 1.5px solid var(--ink); background: var(--tap); display: flex; align-items: center; justify-content: center; }
.wk.on .box { background: var(--ink); }
.stamp-pending .wk.on:not(.landed) .box { background: var(--tap); }
.stamp-pending .wk.on:not(.landed) .box svg { visibility: hidden; }
.runs { display: grid; grid-template-columns: 1fr 1fr; margin: 4px -20px 0; border-top: 1px solid var(--hair); }
.runs > span { display: flex; flex-direction: column; gap: 4px; padding: 14px 20px 16px; }
.runs > span + span { border-left: 1px solid var(--hair); }
.runs b { font-family: var(--mono); font-size: 20px; }
.card-art.year-art { align-items: center; padding: 24px 28px; }
.year-card { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 12px; }
.year-head { display: flex; justify-content: space-between; align-items: flex-end; }
.year-head .yr { font-family: var(--doto); font-weight: 900; font-size: 40px; line-height: 1; }
.year-head .mono { font-size: 12px; }
.punch-wrap { position: relative; }
.punch-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.punch-wrap.flipping .holes { visibility: hidden; }
.punch { width: 100%; height: auto; display: block; }
.year-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--grey); }
.holes-key { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.holes-key i { display: block; border-radius: 50%; background: var(--ink); }

/* chapter V */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 820px; }
.plan { border: 1.5px solid var(--ink); background: var(--tap); padding: 32px; display: flex; flex-direction: column; gap: 20px; position: relative; }
/* Pro is ledger green, as in the app's membership card */
.plan.pro { --ledger: #1E3C2D; border-color: var(--ledger); background: var(--ledger); color: #E4E9E2; }
.plan.pro .plan-name, .plan.pro .price b, .plan.pro li { color: #E4E9E2; }
.plan.pro span[style*="var(--grey)"] { color: #B7C8BC !important; }
.plan.pro .tag { background: #E4E9E2; color: var(--ledger); }
.plan .tag { position: absolute; top: -1px; right: -1px; background: var(--ink); color: var(--tap); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 10px; }
.plan-name { font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.price { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); }
.price b { font-size: 44px; }
.price span { font-size: 14px; color: var(--grey); }
.plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.plan li { display: flex; gap: 10px; align-items: center; font-size: 16px; }
.plan .btn { justify-content: center; }
.plan.pro .btn { background: var(--tap); color: #1E3C2D; border-color: var(--tap); }
.plan.pro .btn:hover { background: #1E3C2D; color: var(--tap); }

/* chapter VI */
.early { background: var(--ink); color: var(--tap); padding: 56px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; max-width: 680px; margin: 0 auto; box-sizing: border-box; }
.early h2 { margin: 0; font-size: 46px; line-height: 1.12; font-weight: 600; text-wrap: balance; }
.early .chap { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--soft); }
.early p { margin: 0; max-width: 480px; font-size: 18px; line-height: 1.55; color: var(--soft); }
.early form { display: flex; width: 100%; max-width: 460px; margin-top: 8px; }
.early input { flex-grow: 1; min-width: 0; border: 1.5px solid var(--tap); border-right: 0; background: var(--ink); color: var(--tap); padding: 14px 16px; font-family: var(--mono); font-size: 14px; border-radius: 0; outline: none; }
.early input:focus-visible { outline: 2px solid var(--tap); outline-offset: 3px; }
.early input::placeholder { color: var(--soft); }
.early button { width: 54px; flex-shrink: 0; background: var(--tap); border: 1.5px solid var(--tap); display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 0; }
.early button:hover { background: var(--ink); }
.early button:hover svg { stroke: var(--tap); }
.early .fine { font-family: var(--mono); font-size: 12px; }
.early .fine a { color: var(--tap); }
.early .sent { font-family: var(--mono); font-size: 13px; border: 1px solid var(--tap); padding: 8px 12px; color: var(--tap); }

/* colophon */
.colophon { display: flex; flex-direction: column; gap: 64px; padding-top: 120px; }
.colo-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; border-top: 1.5px solid var(--ink); padding-top: 40px; }
.colo-blurb { display: flex; flex-direction: column; gap: 16px; }
.colo-blurb p { margin: 0; max-width: 26ch; font-size: 26px; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.colo-col { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.colo-col a { font-family: var(--mono); font-size: 17px; text-decoration: none; padding: 2px 4px; margin-left: -4px; }
.colo-col a:hover { background: var(--ink); color: var(--tap); }
.colo-mark { font-family: var(--mono); font-weight: 700; font-size: min(218px, calc((100vw - 40px) / 5.45)); line-height: 0.8; letter-spacing: -0.045em; white-space: nowrap; margin-left: -0.04em; }
.colo-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--hair); padding-top: 18px; font-family: var(--mono); font-size: 13px; color: var(--grey); }
.colo-meta .folio { margin-top: 0; }


/* launch */

@media (max-width: 1100px) {
  .chip, .stack, .fan { display: none; }
}
@media (max-width: 860px) {
  .page { padding: 64px 20px 32px; }
  .opener h2 { font-size: 34px; }
  .lede { font-size: 18px; }
  .pair, .features, .detail, .plans { grid-template-columns: minmax(0, 1fr); }
  .steps { padding: 32px 20px 8px; }
  .steps h2 { font-size: 24px; margin-bottom: 28px; }
  .steps-row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .detail { gap: 28px; }
  .detail.flip .detail-art { order: -1; }
  .detail-art { height: 440px; }
  .detail-art.scan-art { height: auto; }
  .sheet { font-size: 14px; padding: 20px; }
  .detail-art .iphone { --w: 210px; }
  .detail-art .tilt { width: 80px; }
  .card-text { padding: 24px; }
  .card h3 { font-size: 20px; }
  .card-art { height: 500px; }
  .card-art .iphone { --w: 230px; }
  .card-art.tall { height: 544px; }
  .card-art.streak-art { height: 400px; padding: 40px 20px 0; }
  .shelf-ghost img { width: 64px; height: 96px; }
  .shelf-ghost { gap: 10px; bottom: -30px; }
  .card-art.year-art { height: auto; padding: 24px 16px; }
  .voice { left: 20px; right: 20px; }
  .rec { left: 20px; }
  .mic-btn { right: 24px; }
  .stage { height: 600px; margin-inline: -20px; width: calc(100% + 40px); overflow: hidden; margin-top: 28px; }
  .held { transform: scale(0.84); transform-origin: 472px 0; }
  .title-page { padding-top: 48px; }
  .title-page .mark { width: 80px; height: 80px; }
  .title-page .sub { font-size: 18px; }
  .early { padding: 36px 24px; }
  .early h2 { font-size: 32px; }
  .cover { width: 80px; height: 120px; margin-right: 14px; }
  .where-text .left-min { display: none; }
  .folio { margin-top: 64px; }
  .colophon { gap: 44px; padding-top: 80px; }
  .colo-top { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .colo-blurb { grid-column: 1 / -1; }
  .colo-blurb p { font-size: 21px; }
  .colo-col a { font-size: 15px; }
  .colo-meta { font-size: 11px; }
}
@media (max-width: 480px) {
  .tools .hl-count { display: none; }
}
/* ---------- blog ---------- */
.status .crumbs { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--grey); margin-left: 6px; }
.status .crumbs a { color: var(--grey); text-decoration: none; padding: 2px 4px; }
.status .crumbs a:hover { background: var(--ink); color: var(--tap); }
.status .left { display: flex; align-items: center; gap: 4px; min-width: 0; }
a.tbtn { text-decoration: none; display: inline-flex; align-items: center; }
.status a.tbtn.about { margin-left: auto; }
.bpage { max-width: 1180px; margin: 0 auto; padding: 72px 64px 0; box-sizing: content-box; scroll-margin-top: var(--bar); }
.doto-h1 { margin: 0; font-family: var(--doto); font-weight: 900; line-height: 1.02; letter-spacing: 0; text-wrap: balance; position: relative; }
.doto-h1 canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.flip-pending .doto-h1 { color: transparent; }
.rule { height: 0; border-top: 1.5px solid var(--ink); }
.hair { height: 0; border-top: 1px solid var(--hair); }
.mono-meta { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }

/* index */
.bi-head { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: end; padding-bottom: 48px; }
.bi-head h1 { font-size: clamp(44px, 6.4vw, 88px); margin-top: 18px; }
.bi-head p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--grey); text-align: right; }
.featured { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; padding: 44px 0; text-decoration: none; color: var(--ink); }
.featured img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: left center; border: 1.5px solid var(--ink); box-sizing: border-box; background: var(--tap); }
.featured .body-col { display: flex; flex-direction: column; }
.featured h2 { margin: 18px 0 0; font-size: 50px; line-height: 1.08; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.featured:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.featured .dek { margin: 20px 0 0; max-width: 36em; font-size: 19px; line-height: 1.6; color: var(--grey); }
.featured .foot { margin-top: auto; padding-top: 32px; display: flex; align-items: center; gap: 20px; }
.featured .foot .btn { pointer-events: none; }
.featured:hover .foot .btn { background: var(--ink); color: var(--tap); }
.sep { color: var(--soft); }

.more-head { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; }
.more-head a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); text-decoration: none; padding: 2px 4px; }
.more-head a:hover { background: var(--ink); color: var(--tap); }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.more-cell { padding: 30px 32px 32px; display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--hair); }
.more-cell:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
.more-cell:nth-child(3n) { padding-right: 0; }
.more-cell:nth-child(n + 4) { border-top: 1px solid var(--hair); }
.more-cell h3 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 600; color: var(--grey); text-wrap: balance; }
.more-cell .soon { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #8A877F; display: inline-flex; align-items: center; gap: 8px; }
.more-cell .soon::before { content: ""; width: 7px; height: 7px; border: 1px solid #8A877F; }

/* the black panel: one per page */
.cta { background: var(--ink); color: var(--tap); padding: 56px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; max-width: 680px; margin: 96px auto 0; box-sizing: border-box; }
.cta h2 { margin: 0; font-size: 40px; line-height: 1.12; font-weight: 600; text-wrap: balance; max-width: 16em; }
.cta p { margin: 0; max-width: 470px; font-size: 18px; line-height: 1.6; color: var(--soft); }
.cta form, .card-form { display: flex; width: 100%; max-width: 460px; margin-top: 8px; }
.cta input { flex-grow: 1; min-width: 0; border: 1.5px solid var(--tap); border-right: 0; background: var(--ink); color: var(--tap); padding: 14px 16px; font-family: var(--mono); font-size: 14px; border-radius: 0; outline: none; }
.cta input::placeholder { color: var(--soft); }
.cta input:focus-visible { outline: 2px solid var(--tap); outline-offset: 3px; }
.cta button { width: 54px; flex-shrink: 0; background: var(--tap); border: 1.5px solid var(--tap); display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 0; }
.cta button:hover { background: var(--ink); }
.cta button:hover svg { stroke: var(--tap); }
.cta .fine { font-family: var(--mono); font-size: 12px; }
.cta .fine a { color: var(--tap); }

/* resources hub */
.hub-head { max-width: 760px; display: flex; flex-direction: column; gap: 20px; }
.hub-head h1 { font-size: clamp(44px, 6.4vw, 88px); }
.hub-head p { margin: 0; max-width: 36em; font-size: 19px; line-height: 1.6; color: var(--grey); }
.hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.hub-card { display: flex; flex-direction: column; gap: 14px; border: 1.5px solid var(--ink); background: var(--tap); padding: 32px; text-decoration: none; color: var(--ink); }
.hub-card:hover { background: var(--ink); color: var(--tap); }
.hub-card:hover p { color: var(--soft); }
.hub-card h2 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 600; text-wrap: balance; }
.hub-card p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--grey); }
.hub-card .go { margin-top: 10px; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* post */
.post-head h1 { font-size: clamp(42px, 6vw, 84px); max-width: 13em; margin-top: 20px; }
.post-head .dek { margin: 26px 0 0; max-width: 34em; font-size: 22px; line-height: 1.55; color: var(--ink); text-wrap: balance; }
.meta-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 22px 0; margin: 0; }
.meta-row div { display: flex; flex-direction: column; gap: 6px; }
.meta-row dt { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); }
.meta-row dd { margin: 0; font-size: 19px; }
.post-body { display: grid; grid-template-columns: 8fr 4fr; gap: 64px; margin-top: 56px; align-items: start; }
.post-lede { margin: 0; font-size: 21px; line-height: 1.65; hyphens: auto; }
.post-lede::first-letter { float: left; font-weight: 600; font-size: 3.4em; line-height: 0.82; padding: 6px 10px 0 0; }
.group { padding-top: 72px; scroll-margin-top: calc(var(--bar) + 16px); }
.group-head { display: flex; align-items: baseline; gap: 16px; padding-top: 22px; }
.group-head .n { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--grey); }
.group-head h2 { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 600; }
.group-blurb { margin: 12px 0 0; max-width: 36em; font-size: 17px; line-height: 1.6; color: var(--grey); }
.books { margin-top: 20px; }
.book { display: flex; gap: 28px; padding: 30px 0; }
.book + .book { border-top: 1px solid var(--hair); }
.book-cover { flex-shrink: 0; display: block; }
.book-cover:hover img { box-shadow: 0 0 0 2px var(--ink); }
.book h3 a { color: var(--ink); text-decoration: none; }
.book h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.book img { width: 112px; height: 168px; flex-shrink: 0; object-fit: cover; box-shadow: 0 0 0 1px rgba(17, 17, 16, 0.55); background: var(--tap); }
.book .n { font-family: var(--mono); font-size: 13px; font-weight: 700; }
.book h3 { margin: 4px 0 0; font-size: 25px; line-height: 1.25; font-weight: 600; text-wrap: balance; }
.book .by { margin: 8px 0 0; font-size: 15px; color: var(--grey); }
.book .by .yr { font-family: var(--mono); font-size: 13px; }
.book .why { margin: 14px 0 0; font-size: 17px; line-height: 1.62; hyphens: auto; }
.side { position: sticky; top: calc(var(--bar) + 24px); display: flex; flex-direction: column; gap: 36px; }
.side nav a { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--hair); text-decoration: none; color: var(--ink); }
.side nav a:hover, .side nav a.here { background: var(--ink); color: var(--tap); }
.side nav a:hover .dots, .side nav a.here .dots { border-color: var(--tap); }
.side nav a:hover .cnt, .side nav a.here .cnt, .side nav a:hover .from, .side nav a.here .from { color: var(--tap); }
.side .from { font-family: var(--mono); font-size: 12px; font-weight: 700; width: 26px; flex-shrink: 0; color: var(--grey); padding-left: 4px; }
.side .t { font-size: 16px; line-height: 1.35; }
.side .dots { flex-grow: 1; border-bottom: 2px dotted var(--ink); transform: translateY(-4px); min-width: 12px; }
.side .cnt { font-family: var(--mono); font-size: 12px; color: var(--grey); padding-right: 4px; }
.side-card { border: 1.5px solid var(--ink); background: var(--tap); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.side-card img { width: 44px; height: 44px; }
.side-card .h { font-size: 20px; line-height: 1.3; font-weight: 600; margin: 6px 0 0; }
.side-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--grey); }
.card-form input { flex-grow: 1; min-width: 0; border: 1.5px solid var(--ink); border-right: 0; background: var(--paper); color: var(--ink); padding: 12px 12px; font-family: var(--mono); font-size: 13px; border-radius: 0; outline: none; }
.card-form input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.card-form button { width: 46px; flex-shrink: 0; background: var(--tap); border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 0; }
.card-form button:hover { background: var(--ink); }
.card-form button:hover svg { stroke: var(--tap); }

.card-fine { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.55; color: var(--grey); }
.card-fine a { color: var(--ink); }
.side-card .form-msg, .optin .form-msg { font-size: 12px; }

/* privacy: the policy text, set like a list post */
.legal { padding-top: 64px; }
.legal-body { margin-top: 14px; max-width: 40em; }
.legal-body h3 { margin: 30px 0 0; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.legal-body p { margin: 12px 0 0; font-size: 17px; line-height: 1.62; hyphens: auto; }
.legal-body ul { margin: 12px 0 0; padding: 0; list-style: none; }
.legal-body li { position: relative; padding: 0 0 0 22px; font-size: 17px; line-height: 1.62; hyphens: auto; }
.legal-body li + li { margin-top: 10px; }
.legal-body li::before { content: ""; position: absolute; left: 2px; top: 0.66em; width: 7px; height: 7px; background: var(--ink); }
.legal-body strong { font-weight: 600; }
.legal-body a, .post-lede a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-body a:hover { background: var(--ink); color: var(--tap); text-decoration: none; }
.ledger { margin: 18px 0 0; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.ledger div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; padding: 13px 0; }
.ledger div + div { border-top: 1px solid var(--hair); }
.ledger dt { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 3px; }
.ledger dd { margin: 0; font-size: 17px; line-height: 1.55; }
.side-card .btn { align-self: flex-start; margin-top: 6px; }
.side-card .btn:hover { background: var(--ink); color: var(--tap); }
@media (max-width: 600px) {
  .ledger div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* opt-in */
.optin { position: fixed; z-index: 44; left: 16px; bottom: calc(var(--strip) + env(safe-area-inset-bottom, 0px) + 16px); width: 384px; max-width: calc(100vw - 32px); background: var(--tap); border: 1.5px solid var(--ink); padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; }
.optin .h { margin: 0; padding-right: 32px; font-size: 21px; line-height: 1.3; font-weight: 600; }
.optin p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--grey); }
.optin .note { font-family: var(--mono); font-size: 11px; color: var(--grey); }
.optin .x { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.optin .x:hover { background: var(--ink); }
.optin .x:hover svg { stroke: var(--tap); }
.optin.inv { filter: invert(1); }

@media (max-width: 1000px) {
  .post-body { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
}
@media (max-width: 860px) {
  .bpage { padding: 48px 20px 0; }
  .bi-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bi-head p { text-align: left; }
  .featured { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .featured h2 { font-size: 32px; }
  .more-grid, .hub-grid { grid-template-columns: minmax(0, 1fr); }
  .more-cell { border-left: 0 !important; padding: 26px 0 !important; }
  .more-cell + .more-cell { border-top: 1px solid var(--hair); }
    .cta { padding: 36px 24px; margin-top: 64px; }
  .cta h2 { font-size: 30px; }
  .post-head .dek { font-size: 19px; }
  .meta-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .group-head h2 { font-size: 26px; }
  .book { gap: 18px; }
  .book img { width: 84px; height: 126px; }
  .book h3 { font-size: 21px; }
  .optin { left: 8px; right: 8px; width: auto; max-width: none; }
}
@media (max-width: 600px) {
  .status .battery { display: none; }
  .status a.tbtn { padding: 6px 8px; font-size: 11px; }
}

/* ---------- shared: real forms ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-msg { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.55; max-width: 460px; }
.form-msg.is-error { text-decoration: underline; text-underline-offset: 3px; }
button[aria-busy="true"] { opacity: 0.55; cursor: progress; }
@media (max-width: 639px) {
  .status a.tbtn.about, .status .crumbs { display: none; }
}
@media (max-width: 600px) {
  .status .tbtn { padding: 6px 8px; font-size: 11px; }
}