/* The website's pages beside the home: /kindle/, /newsletters/, /library/ (templates/website/page.html; PR #452).
   The home page's own tokens, type and pill (templates/website/home.html, #116), so the pages read as one site:
   light serif headings with one mint phrase, one ink pill, mono proof lines, numbered steps, white cards. The one
   addition is the handwritten total ("118 of 120 min."), the only place the hand face is used. */
:root {
  --bg: #f7f5ef; --desk: #efece3; --surface: #fff; --paper: #fffdf8;
  --ink: #161a18; --muted: #6a706c; --line: #dedad0;
  --accent: #005d4c; --signal: #4b9b6f; --mark: #b8f0dc; --accent-soft: #e1efea;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Work Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hand: "Nanum Pen Script", "Bradley Hand", cursive;
  --gut: 64px; --max: 1312px;
  --shadow: 0 1px 1px rgba(22,26,24,.06), 0 2px 6px rgba(22,26,24,.06), 0 18px 40px -18px rgba(22,26,24,.28);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

/* the header (website/_nav.html; also on the home page) */
.desk { background: var(--desk); overflow: hidden; }
header { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
header img { height: 22px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a { font: 500 15px/1 var(--sans); color: var(--ink); text-decoration: none; padding: 8px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }

/* the first screen */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; padding: 32px 0 80px; }
h1 { font: 300 clamp(50px, 6vw, 86px)/1.04 var(--serif); letter-spacing: -.025em; margin: 0 0 28px; text-wrap: balance; }
h2 { font: 300 clamp(32px, 3.6vw, 48px)/1.12 var(--serif); letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.lede { font-size: 20px; line-height: 1.5; max-width: 32ch; margin: 0 0 36px; }
mark { background: linear-gradient(transparent 24%, var(--mark) 24%, var(--mark) 86%, transparent 86%); color: inherit; padding: 0 .06em 0 0; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pill { display: inline-flex; align-items: center; height: 56px; padding: 0 30px; border-radius: 999px; background: var(--ink); color: #fff; font: 500 17px/1 var(--sans); text-decoration: none; transition: transform .15s ease, background .15s ease; }
.pill:hover { background: #2a302d; transform: translateY(-1px); }
.pill:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pill[aria-disabled] { cursor: default; }
.pill[aria-disabled]:hover { background: var(--ink); transform: none; }
.pill.line { background: transparent; color: var(--ink); border: 1px solid var(--ink); height: 44px; padding: 0 20px; font-size: 15px; }
.note { font-size: 14.5px; color: var(--muted); margin: 0; }
.count { font: 400 13.5px/1.5 var(--mono); color: var(--muted); margin: 32px 0 0; }
.count b { font-weight: 500; color: var(--ink); }
.desk .note, .desk .count { color: #5f6561; }      /* muted on the desk: 5.05:1 (--muted is 4.29:1 there) */

/* sections */
.sec { padding: 104px 0 0; }
.sec + .sec { padding-top: 96px; }
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.sec .intro { font-size: 18px; max-width: 46ch; margin: 18px 0 0; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.steps li { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.num { display: block; font: 400 12px/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.step-t { font: 400 24px/1.25 var(--serif); letter-spacing: -.01em; margin: 10px 0 0; }
.step-d { font: 400 16px/1.5 var(--sans); color: var(--muted); margin: 4px 0 0; max-width: 52ch; }
.cards { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cards li { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.lbl { font: 400 11.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0; }
.cards h3 { font: 400 22px/1.25 var(--serif); margin: 0; }
.cards p { margin: 0; font-size: 16px; color: #3d4441; }
.fine { font-size: 14.5px; color: var(--muted); margin: 24px 0 0; max-width: 72ch; }
.again { margin-top: 104px; padding: 56px 0 96px; border-top: 1px solid var(--line); }
.again p.big { font: 300 clamp(28px, 3vw, 40px)/1.15 var(--serif); margin: 0 0 28px; text-wrap: balance; }

/* the handwritten total: the app answering, once per card */
.hand { font: 400 30px/1 var(--hand); color: var(--accent); }
.tick { width: 18px; height: 16px; color: var(--accent); flex: none; }

/* the Kindle (drawn: a reader with the article as an e-book) */
.reader { width: min(100%, 420px); aspect-ratio: 3 / 4.1; margin: 0 auto; padding: 26px 22px 44px; background: #2a2a2c; border-radius: 22px; box-shadow: 0 30px 60px rgba(0,0,0,.22), inset 0 0 0 2px #3a3a3d; transform: rotate(2deg); }
.reader .scr { height: 100%; background: #e7e6e0; border-radius: 4px; padding: 22px 22px 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; color: #1e1e1e; font-family: var(--serif); box-shadow: inset 0 0 0 1px #cfcec7; }
.reader .src { font: 400 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #555; }
.reader .t { font: 600 20px/1.2 var(--serif); margin: 0; }
.reader .dek { font-style: italic; font-size: 14px; color: #333; margin: 0; }
.reader .by { font: 400 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #555; }
.reader p { font-size: 15px; line-height: 1.55; margin: 0; }
.reader .loc { margin-top: auto; display: flex; justify-content: space-between; font: 400 10px/1 var(--sans); color: #666; border-top: 1px solid #cfcec7; padding-top: 7px; }

/* the library's search and its answer */
.ask { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 14px 22px; box-shadow: var(--shadow); font: 400 20px/1.3 var(--serif); }
.ask svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.answer { margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.answer .tot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.picks { list-style: none; margin: 0; padding: 0; }
.picks li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--desk); font: 400 16.5px/1.3 var(--serif); }
.picks small { display: block; font: 400 11.5px/1.3 var(--mono); color: var(--muted); margin-top: 2px; }
.picks .min { font: 400 12.5px/1 var(--mono); }
.acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.acts .pill { height: 44px; padding: 0 20px; font-size: 15px; pointer-events: none; }   /* shown, not buttons (aria-hidden) */
.tag { display: inline-block; font: 400 10px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid currentColor; padding: 0 5px; margin-right: 8px; color: var(--muted); vertical-align: 2px; }

/* the newsletter address and the library's newsletter strip (as in the app) */
.addr { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.addr code { font: 500 18px/1.3 var(--mono); background: var(--accent-soft); border-radius: 8px; padding: 10px 12px; overflow-wrap: anywhere; }
.strip { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; font: 400 13px/1.3 var(--mono); }
.strip b { font-weight: 500; }
.stack { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.stack li { background: var(--surface); border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 11px 15px; font: 600 16.5px/1.25 var(--serif); }
.stack li:nth-child(2) { margin-left: 10px; transform: rotate(.4deg); }
.stack li:nth-child(3) { margin-left: 4px; transform: rotate(-.4deg); }
.stack small { display: block; font: 400 11.5px/1.3 var(--mono); color: var(--muted); margin-top: 3px; }

/* the booklet: three real printed articles in one design, stapled */
.booklet { position: relative; height: 470px; }
.booklet + div .steps { margin-top: 32px; }
.booklet img { position: absolute; width: 50%; background: #fff; box-shadow: var(--shadow); }
.booklet img:nth-child(1) { left: 0; top: 34px; transform: rotate(-4deg); }
.booklet img:nth-child(2) { left: 24%; top: 10px; transform: rotate(1deg); }
.booklet img:nth-child(3) { left: 48%; top: 38px; transform: rotate(5deg); }
.staple.s1 { top: 22%; }
.staple.s2 { top: 64%; }
.staple { position: absolute; left: 3%; width: 4px; height: 30px; border-radius: 2px; background: linear-gradient(90deg, #6f757d, #c4c9cf 45%, #7c828a); z-index: 2; }

footer { border-top: 1px solid var(--line); }
footer .wrap { padding-top: 28px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
footer p { margin: 0; }
footer a { color: inherit; }

@media (max-width: 900px) {
  :root { --gut: 16px; }
  header { height: 64px; }
  header img { height: 20px; }
  .site-nav { gap: 16px; }
  .site-nav .topic { display: none; }          /* phones: Sign in only; the three pages are in the footer */
  .hero, .duo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero { padding: 16px 0 56px; }
  h1 { font-size: 50px; margin-bottom: 20px; }
  .lede { font-size: 18px; margin-bottom: 28px; }
  .sec { padding-top: 72px; }
  .sec + .sec { padding-top: 64px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .step-t { font-size: 22px; margin-top: 8px; }
  .booklet { height: 0; padding-bottom: 100%; }
  .again { margin-top: 72px; padding: 40px 0 64px; }
  .pill { height: 54px; padding: 0 28px; }
}
@media (prefers-reduced-motion: reduce) { .pill { transition: none; } }