/* 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; }
}
/* very narrow (#454): a 375 px phone at 200% zoom is 187 CSS px. Nothing here applies at 320 px and wider, so the
   ordinary phone, tablet and desktop pages are unchanged. The header may wrap (Sign in under the logo, same left
   edge), headings get smaller with the width and break a word only when it cannot fit, pills grow with their
   wrapped words, the example cards use less padding, and a list of picks puts the minutes under each title. */
@media (max-width: 319.98px) {
  header { height: auto; min-height: 64px; flex-wrap: wrap; row-gap: 4px; padding: 12px 0; }
  .site-nav a { white-space: nowrap; }
  h1 { font-size: min(50px, 16vw); }
  h2 { font-size: min(32px, 14vw); }
  .again p.big { font-size: min(28px, 13vw); }
  h1, h2, h3, .again p.big, .step-t, .lede { overflow-wrap: break-word; }
  .pill { height: auto; min-height: 54px; padding: 12px 24px; line-height: 1.25; }
  .acts .pill, .pill.line { height: auto; min-height: 44px; padding: 8px 20px; }
  .ask { padding: 12px 16px; font-size: 18px; }
  .answer { padding: 14px 14px 16px; }
  .picks li { grid-template-columns: 22px minmax(0, 1fr); }
  .picks .min { grid-column: 2; }
  .addr { padding: 16px 14px; }
  .addr code { font-size: 15px; }
  .cards li { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) { .pill { transition: none; } }

/* The comparison pages (#545, website/compare.html): one table, the topic in the first column. */
.hero:has(> div:only-child) { grid-template-columns: minmax(0, 1fr); }
.compare { width: 100%; margin: 36px 0 0; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 18px 20px 18px 0; border-top: 1px solid var(--line); }
.compare thead th { font: 500 13px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-top: 0; }
.compare tbody th { font: 400 19px/1.3 var(--serif); width: 22%; }
.compare td { width: 39%; color: #3d4441; }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 700px) {
  .compare thead { display: none; }
  .compare tr { display: block; border-top: 1px solid var(--line); padding: 14px 0; }
  .compare th, .compare tbody th, .compare td { display: block; width: auto; border: 0; padding: 4px 0; }
  .compare td::before { display: block; font: 500 12px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .compare td:nth-of-type(1)::before { content: "Screenbreak"; }
  .compare td:nth-of-type(2)::before { content: attr(data-rival); }
  .cards.two { grid-template-columns: minmax(0, 1fr); }
}