/* The app's look on the web, revision 4 "Wave" (21 October 2026, docs/REDESIGN-STYLE.md, the Web
   boards in docs/pemberley-v2-screens.pdf): Be Vietnam Pro for the interface, every page and
   section heading in Noto Serif 600 upright, the italic serif for big numbers, authors and quotes.
   Navy is the card and the voice, royal blue is "tap here", sky is goals, lilac encouragement,
   orange stars. **No geometric shapes anywhere on the web**: the logo's mark and a serif wordmark in the top bar, a navy hero card
   with fanned covers, navy promo cards with a small cover stack. Tokens are the app's light
   values (Pemberley/Views/Theme.swift). There is no dark theme: the pages are shared to people
   who aren't on the app, and the design is drawn in light. */

/* The type, served from this site rather than Google Fonts, which would hand every visitor's
   address to Google (13 October 2026; LaunchPrivacyTests holds it). The app's own files
   (Pemberley/Resources/Fonts), subset to Latin and Latin Extended and converted to woff2, each
   half loaded only when a page uses a letter in it. OFL; licences beside them in /assets/fonts/. */
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/be-vietnam-pro-regular-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2197, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/be-vietnam-pro-regular-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0300-036F, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/be-vietnam-pro-medium-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2197, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/be-vietnam-pro-medium-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0300-036F, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/be-vietnam-pro-semibold-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2197, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/be-vietnam-pro-semibold-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0300-036F, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/be-vietnam-pro-bold-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2197, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/be-vietnam-pro-bold-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0300-036F, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/noto-serif-semibold-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2197, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/noto-serif-semibold-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0300-036F, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Serif"; font-style: italic; font-weight: 500; font-display: swap; src: url("/assets/fonts/noto-serif-medium-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2197, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Serif"; font-style: italic; font-weight: 500; font-display: swap; src: url("/assets/fonts/noto-serif-medium-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0300-036F, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Fallbacks sized to the real faces, so the swap barely moves a line. Measured from the font
   files: Be Vietnam Pro sets a pangram 10% wider than Arial, with a 1000/265 ascent and descent
   on a 1000 em; Noto Serif Medium Italic 5.6% wider than Georgia Italic, 1069/293. */
@font-face {
  font-family: "Be Vietnam Pro Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 110%;
  ascent-override: 91%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Noto Serif Fallback";
  font-style: normal;
  font-weight: 600;
  src: local("Georgia Bold"), local("Georgia-Bold"), local("Times New Roman Bold");
  size-adjust: 100%;
  ascent-override: 101%;
  descent-override: 28%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Noto Serif Fallback";
  font-style: italic;
  src: local("Georgia Italic"), local("Georgia-Italic"), local("Times New Roman Italic");
  size-adjust: 105.6%;
  ascent-override: 101%;
  descent-override: 28%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;
  --page: #F9F4F1;          /* the page: warm cream */
  --raised: #F1EBE7;        /* a step off the page: placeholders, quiet circles */
  --soft-lilac: #F3DCFD;    /* soft feature cards: the first review, the wishlist card */
  --white: #FFFFFF;
  --navy: #001B65;          /* all text, hero cards, ink on a tint */
  --navy-700: #2E3D73;
  --blue: #0141FF;          /* royal blue, the app's brandPrimary: taps and links */
  --pale-blue: #CCE8FC;     /* tags and quiet tints */
  --blue-tint: #EEF6FE;
  --sky: #76C3FB;           /* goals: a progress bar on navy. Never words on white */
  --lilac: #E8A8FC;         /* encouragement: rank badges, the gift, an accent on navy. Never words on white */
  --orange: #FC6C00;        /* stars */
  --slate: #5F6777;         /* the disclosure, quiet icons */
  --muted: #5F6777;         /* the app's mutedText: secondary words */
  --slate-200: #D9DDE2;
  --slate-100: #ECEEF0;

  --text: var(--navy);
  --star: var(--orange);
  --star-empty: var(--slate-200);

  --sans: "Be Vietnam Pro", "Be Vietnam Pro Fallback", system-ui, -apple-system, sans-serif;
  --serif: "Noto Serif", "Noto Serif Fallback", Georgia, serif;

  /* A white card: no hard border, a hairline drawn by the shadow and a faint navy lift. */
  --card-edge: 0 1px 3px rgba(0, 27, 101, 0.06), 0 0 0 1px var(--slate-100);
  --radius-card: 24px;
  --gutter: 20px;
  --column: 1080px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main { flex: 1 0 auto; }

a { color: inherit; }

h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 700; letter-spacing: -0.01em; }

/* Every page and section heading: Noto Serif 600, upright, −0.02em, the whole of it (Wave). A
   word marked as the accent inside one takes the heading's own face rather than italics. */
h1, h2 { font-family: var(--serif); font-style: normal; font-weight: 600; letter-spacing: -0.02em; }
:is(h1, h2) .accent { font: inherit; letter-spacing: inherit; }

/* The headings that stay sans, as the boards draw them: a book's title (never serif), and the
   titles of cards — the app card, the Followers-only card, the home features — where one word
   may still take the italic accent. */
.book-top h1, .app-card h2, .notice-card h2, .feature h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.01em; }

/* The one serif word in a sans title, a big number, an author's name, a quote. */
.accent, .serif,
:is(.app-card, .notice-card) h2 .accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* The top bar: the serif "Pemberley" wordmark home, "Get the app" on the right. 56px on cream with a
   slate-100 hairline on a phone; a white bar, 68px, on a desktop. */
.top-bar {
  background: var(--page);
  border-bottom: 1px solid var(--slate-100);
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  max-width: var(--column);
  margin: 0 auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-left));
}

/* The wordmark: "Pemberley" in Noto Serif 600, −0.02em. In the top bar it carries the logo pack's
   mark before it (28 October 2026), laid out by the pack's lockup rule: the mark 1.75× the cap
   height (Noto Serif's caps are 0.714em, so 1.25em) and a gap of one cap height, never under the
   pack's smallest 24px. The words stay live text; the mark is decoration (alt=""). The footer keeps
   the word alone. */
.wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.wordmark-mark {
  height: max(24px, 1.25em);
  width: auto;
  margin-right: 0.714em;
  flex: none;
}

.get-app-button {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--pale-blue);
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.page {
  width: 100%;
  max-width: var(--column);
  margin: 0 auto;
  padding: 28px max(var(--gutter), env(safe-area-inset-left)) 56px;
}

.muted, .status { color: var(--muted); }

/* The footer: the wordmark, then the links. Content as before, restyled only. */
.site-foot {
  border-top: 1px solid var(--slate-200);
  padding: 28px var(--gutter) 40px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.site-foot .wordmark { font-size: 19px; }
.site-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin-top: 10px; }
.site-foot nav a { color: var(--muted); text-decoration: none; }
.site-foot nav a:hover { text-decoration: underline; }

/* Pills (999px): primary royal blue, outline royal blue, soft pale blue, white with a hairline. A primary
   action is 52px tall; the small Amazon pills are 36px. */
.button {
  font-family: inherit;
  font-size: 16px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button.primary { background: var(--blue); color: var(--white); }
.button.secondary, .button.outline { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }
.button.tint { background: var(--pale-blue); color: var(--navy); }
.button.white { background: var(--white); color: var(--navy); box-shadow: inset 0 0 0 1px var(--slate-200); }
.button.block { display: flex; width: 100%; min-height: 52px; }
.button.round {
  width: 52px; min-height: 52px; height: 52px; padding: 0; flex: none;
  background: var(--white); color: var(--navy); box-shadow: inset 0 0 0 1px var(--slate-200);
}
.button svg { width: 20px; height: 20px; flex: none; }
.button.small { min-height: 36px; padding: 6px 14px; font-size: 14px; gap: 6px; }
.button.small svg { width: 15px; height: 15px; }

.open-app { margin-top: 12px; }

/* The app card (Wave): navy, white words, the accent word in lilac, a small fanned stack of
   three covers top-right in place of the shapes, a white App Store pill with navy words. */
.app-card {
  position: relative;
  margin-top: 48px;
  padding: 24px 20px 22px;
  border-radius: var(--radius-card);
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}

.app-card h2 { font-size: 22px; line-height: 1.25; max-width: calc(100% - 112px); min-height: 64px; position: relative; color: var(--white); }
.app-card h2 .accent { font-size: 1.08em; color: var(--lilac); }
.app-card > p { margin: 8px 0 18px; max-width: 34ch; color: rgba(255, 255, 255, 0.82); position: relative; }
.app-card .app-card-note { margin: 12px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.app-card .store-badge { background: var(--white); color: var(--navy); }

/* A fan of covers: drawn jackets (`.jacket`), each turned about its foot. */
.fan { position: relative; pointer-events: none; }
.fan .jacket { position: absolute; bottom: 0; transform-origin: 50% 100%; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); }
.app-card-fan { position: absolute; top: 14px; right: 14px; width: 100px; height: 72px; }
.app-card-fan .jacket { width: 44px; left: 28px; font-size: 9px; border-radius: 4px; }
.app-card-fan .jacket:nth-child(1) { transform: translateX(-22px) rotate(-10deg); }
.app-card-fan .jacket:nth-child(3) { transform: translateX(22px) rotate(10deg); }
.app-card-fan .jacket:nth-child(2) { z-index: 1; }

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 6px 22px 6px 18px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
  position: relative;
}

.store-badge-words { display: flex; flex-direction: column; line-height: 1.1; }
.store-badge-words small { font-size: 11px; font-weight: 500; }
.store-badge-words strong { font-size: 18px; font-weight: 700; }

/* The affiliate disclosure: 12px slate, the last thing on a page with Amazon links. */
.disclosure {
  margin: 32px 0 0;
  font-size: 12px;
  color: var(--slate);
  text-align: center;
}

/* Covers: 8px corners and a soft shadow. A missing jacket is a drawn one — the title and author
   on a ground picked from the title — so one book looks the same wherever it appears. */
.cover-frame {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--raised);
  box-shadow: 0 0 0 0.5px rgba(0, 27, 101, 0.12), 0 4px 12px rgba(0, 27, 101, 0.12);
  position: relative;
}

.cover-frame > .cover { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }

/* A drawn jacket, for a book with no cover and for the fans: a ground, the author in small
   capitals at the top, the title in the serif italic at the foot. Flat — no shapes. */
.jacket {
  display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 2 / 3; padding: 0.5em 0.45em 0.6em; border-radius: 6px; overflow: hidden;
  background: var(--ground, var(--navy)); color: var(--ink, var(--white));
}
.jacket-author { font-size: 0.36em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jacket-title { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 0.66em; line-height: 1.12; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
/* The static fan on the home page (inline styles are refused by the CSP, so its colours are classes). */
.j-royal { --ground: var(--blue); --ink: var(--white); }
.j-cream { --ground: #F3EEE6; --ink: var(--navy); }
.j-orange { --ground: var(--orange); --ink: var(--navy); }
.j-lilac { --ground: var(--lilac); --ink: var(--navy); }
.j-sky { --ground: var(--sky); --ink: var(--navy); }
.cover-generated { width: 100%; height: 100%; border-radius: 0; font-size: 16px; container-type: inline-size; }
.cover-generated .jacket-author { font-size: max(6px, 7cqw); }
.cover-generated .jacket-title { font-size: max(9px, 14cqw); }

.cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
}

.empty { text-align: center; padding-top: 72px; }
.empty h1 { font-size: 24px; margin-bottom: 8px; }

/* Stars: orange, five glyphs filled to the rating. */
.stars {
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--star-empty);
  margin-top: 6px;
}

.stars::before { content: "★★★★★"; }

.stars-fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--star);
}

.stars-fill::before { content: "★★★★★"; }

/* Sections: a 22px heading, and "See all" as a navy underlined link. */
.section { margin-top: 40px; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-head h2, .section-header h2 { font-size: 22px; font-weight: 600; }
.section-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.see-all { color: var(--navy); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; white-space: nowrap; }
.count { color: var(--muted); font-size: 15px; }

.book-link { display: block; color: inherit; text-decoration: none; }

/* Tiles: a cover with its title, author and stars, three across on a phone. */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 14px; }
.tile { min-width: 0; }
.tile-title { margin: 10px 0 0; font-size: 15px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Authors are the serif's other home (web v2): under every cover, in reviews, on the wishlist
   and the list, as on the book page. */
.tile-author, .wish-item-author, .list-item-author {
  font-family: var(--serif); font-style: italic; font-weight: 500;
}
.list-item-year { font-family: var(--sans); font-style: normal; font-weight: 400; }
.tile-author { margin: 1px 0 0; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .stars { margin-top: 5px; font-size: 12px; }
.wide-only { display: none; }
.tiles + .button { margin-top: 24px; }

/* Review cards: white, the first one soft lilac (no edge). */
.review-list { display: grid; gap: 12px; }
.review-card { padding: 16px 20px 20px 16px; border-radius: var(--radius-card); background: var(--white); box-shadow: var(--card-edge); }
.review-list > .review-card:first-child { background: var(--soft-lilac); box-shadow: none; }
.review-head { display: flex; gap: 14px; align-items: flex-start; }
.review-head > a, .review-head > .cover-frame { flex: none; width: 52px; }
.review-cover { border-radius: 6px; }
.review-meta { min-width: 0; }
.review-meta h3 { font-size: 16px; font-weight: 600; line-height: 1.3; }
.review-meta h3 a { color: inherit; }
.review-meta .muted { margin: 2px 0 0; font-size: 14px; }
.review-meta .stars { margin-top: 5px; font-size: 13px; }
.review-text { margin: 8px 0 0; white-space: pre-line; font-size: 15px; color: var(--navy-700); }

/* List rows: white rows with two fanned covers, the name and the count. */
.list-rows { display: grid; gap: 10px; }
.list-row {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px;
  border-radius: var(--radius-card); background: var(--white); box-shadow: var(--card-edge);
  color: var(--text); text-decoration: none;
}
.mini-fan { position: relative; flex: none; width: 64px; height: 50px; }
.mini-fan .cover-frame.mini { position: absolute; top: 4px; width: 32px; border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 27, 101, 0.2); }
.mini-fan .cover-frame.mini:first-child { left: 2px; transform: rotate(-8deg); }
.mini-fan .cover-frame.mini + .cover-frame.mini { left: 26px; top: 1px; transform: rotate(6deg); }
.list-words { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 14px; }
.list-words strong { font-size: 16px; font-weight: 600; line-height: 1.3; }
.list-words .muted { font-size: 14px; }
.chevron { flex: none; display: grid; place-items: center; color: var(--slate); }
.chevron svg { width: 18px; height: 18px; }

/* The public profile. Phone first: a centred header, then sections down the page. Below 1024px
   the phone column sits in the middle at up to 560px; from 1024px it splits into two columns. */
.profile { max-width: 560px; margin: 0 auto; }

.profile-head { text-align: center; }
.avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 16px;
  background: var(--pale-blue);
}
.avatar.initials { display: grid; place-items: center; background: var(--blue); color: var(--white); font-size: 38px; font-weight: 600; line-height: 1; }
.profile-head h1 { font-size: 28px; }
.profile-head .handle { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.profile-head .bio { margin: 12px auto 0; max-width: 36ch; white-space: pre-line; color: var(--navy-700); }
.taste { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 14px; }
.taste > .muted { font-size: 15px; margin-right: 2px; }
.chip { display: inline-flex; align-items: center; min-height: 29px; padding: 2px 12px; border-radius: 999px; background: var(--pale-blue); color: var(--navy); font-size: 14px; font-weight: 600; }

.stat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.stat-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0;
  min-height: 69px; padding: 8px; border-radius: 20px; background: var(--white); box-shadow: var(--card-edge);
}
.stat-number { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 26px; line-height: 1.1; }
.stat-tile > span { font-size: 13px; color: var(--muted); }

.profile-actions { display: flex; gap: 10px; margin-top: 14px; }
.profile-actions .primary { flex: 1; min-height: 52px; font-size: 16px; }

/* The wishlist card: soft lilac, a lilac gift circle, navy words. */
.wishlist-card {
  display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 13px 18px 13px 16px;
  border-radius: 22px; background: var(--soft-lilac); color: var(--text); text-decoration: none;
}
.gift-circle { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--lilac); color: var(--navy); }
.gift-circle svg { width: 20px; height: 20px; }
.wishlist-words { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 14px; color: var(--navy); line-height: 1.35; }
.wishlist-words strong { font-size: 16px; font-weight: 600; color: var(--navy); }
.wishlist-card .chevron { color: var(--navy); }

/* Top 5: five covers in one row with lilac rank badges (titles under them on a desktop). */
.top-five { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.top-five li { min-width: 0; }
.rank {
  position: absolute; top: 5px; left: 5px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--lilac); color: var(--navy);
  font-size: 13px; font-weight: 700; line-height: 1; display: grid; place-items: center;
}
.top-five-title { display: none; }

/* Followers-only: a white card with a pale-blue lock circle, the headline and Get Pemberley. */
.notice-card { margin-top: 24px; padding: 24px 20px 20px; border-radius: var(--radius-card); background: var(--white); box-shadow: var(--card-edge); text-align: center; }
.notice-icon, .state-icon { display: grid; place-items: center; margin: 0 auto 14px; border-radius: 50%; }
.notice-icon { width: 48px; height: 48px; background: var(--pale-blue); color: var(--navy); }
.notice-icon svg { width: 20px; height: 20px; }
.notice-card h2 { font-size: 19px; line-height: 1.3; max-width: 22ch; margin: 0 auto; }
.notice-card h2 .accent { font-size: 1.08em; }
.notice-card p { margin: 8px auto 18px; max-width: 34ch; color: var(--navy-700); font-size: 15px; }

/* Just me, Not found and the other states: art, a headline, one line, a way on. */
.state { max-width: 460px; margin: 0 auto; padding-top: 40px; text-align: center; }
/* The state's picture is an icon on a 76px circle: a navy search on pale blue (not found, didn't
   load), a slate lock on soft lilac (private). No shapes. */
.state-icon { width: 76px; height: 76px; margin-bottom: 24px; background: var(--pale-blue); color: var(--navy); }
.state-icon.lock { background: var(--soft-lilac); color: var(--slate); }
.state-icon svg { width: 28px; height: 28px; }
.state h1 { font-size: 28px; line-height: 1.2; }
.state > .state-line { margin: 10px auto 28px; max-width: 36ch; color: var(--navy-700); }
.state .app-card { text-align: left; }

.wide-only-inline { display: none; }

/* The wishlist. Phone: a header (photo with a gift badge, "From", the serif headline, the lead,
   Share, the count and sort), then one white card per book. Desktop: six across. */
.wishlist { max-width: 560px; margin: 0 auto; }
.wish-top {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px;
  grid-template-areas: "photo from" "title title" "lead lead" "shelf shelf" "share share" "bar bar";
}
.wish-photo { grid-area: photo; position: relative; width: 56px; height: 56px; }
.avatar.small { width: 56px; height: 56px; margin: 0; }
.avatar.small.initials { font-size: 22px; }
.wish-badge {
  position: absolute; right: -8px; bottom: -6px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--lilac); color: var(--navy); box-shadow: 0 0 0 3px var(--page);
}
.wish-badge svg { width: 14px; height: 14px; }
.wish-from { grid-area: from; margin: 0 0 0 4px; color: var(--navy-700); font-size: 15px; }
.wish-from a, .wish-from strong { color: var(--blue); font-weight: 600; text-decoration: none; }
.wish-top h1 { grid-area: title; margin-top: 18px; font-size: 30px; }
.wish-lead { grid-area: lead; margin: 8px 0 0; font-size: 16px; color: var(--navy-700); }
.wish-shelf-top { grid-area: shelf; display: none; }
.wish-tools { display: contents; }
.wish-share { grid-area: share; margin-top: 22px; width: 100%; min-height: 48px; }
.wish-share svg { width: 18px; height: 18px; }
.wish-bar { grid-area: bar; display: flex; align-items: center; justify-content: space-between; margin-top: 28px; }
.wish-count { font-weight: 700; font-size: 16px; }
.wish-sort {
  appearance: none; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--muted);
  padding: 8px 24px 8px 6px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6777' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 2px center / 16px no-repeat;
}
.wish-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.wish-item {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px;
  border-radius: var(--radius-card); background: var(--white); box-shadow: var(--card-edge);
}
.wish-item > a, .wish-item > .cover-frame { flex: none; width: 72px; }
.wish-item-words { min-width: 0; flex: 1; }
.wish-item-title { margin: 2px 0 0; font-size: 17px; font-weight: 600; line-height: 1.25; }
.wish-item-author { margin: 2px 0 0; font-size: 15px; color: var(--muted); }
.wish-item-added { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.button.buy { white-space: nowrap; margin-top: 12px; min-height: 36px; padding: 6px 14px; font-size: 15px; gap: 8px; max-width: 100%; }
.button.buy svg { width: 15px; height: 15px; }
.wish-more { margin-top: 14px; }
.wish-more[hidden] { display: none; }
.wishlist .disclosure { margin-top: 28px; }
.wish-shelf-foot { display: block; margin-top: 18px; text-align: center; color: var(--blue); font-weight: 600; text-decoration: none; }

/* The site home (Wave): a navy card with five fanned covers — the middle one upright, two each
   side turned 6° and 12° — over "Your 2026 · 9 of 24 books" and a sky bar; then the line, the
   intro, the badge and three white feature cards with pale-blue icon circles. Desktop: words
   left, the card right, cards across. */
.home-hero { display: grid; gap: 28px; }
.home-card { overflow: hidden; padding: 32px 24px 26px; border-radius: 28px; background: var(--navy); color: var(--white); }
.home-fan { height: 160px; margin: 0 auto; max-width: 300px; }
.home-fan .jacket { width: 92px; left: calc(50% - 46px); font-size: 19px; }
.home-fan .jacket:nth-child(1) { transform: translateX(-86px) translateY(8px) rotate(-12deg); }
.home-fan .jacket:nth-child(2) { transform: translateX(-44px) translateY(2px) rotate(-6deg); }
.home-fan .jacket:nth-child(3) { z-index: 2; }
.home-fan .jacket:nth-child(4) { transform: translateX(44px) translateY(2px) rotate(6deg); z-index: 1; }
.home-fan .jacket:nth-child(5) { transform: translateX(86px) translateY(8px) rotate(12deg); }
.home-card-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 34px; color: rgba(255, 255, 255, 0.82); font-size: 17px; }
.home-card-line strong { font-weight: 400; }
.home-card-line .serif { font-size: 26px; color: var(--white); }
.home-bar { height: 8px; margin-top: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.17); overflow: hidden; }
.home-bar > span { display: block; height: 100%; width: 37.5%; border-radius: 999px; background: var(--sky); }
.home-words h1 { font-size: 36px; line-height: 1.12; letter-spacing: -0.02em; }
.home-words .lede { margin: 14px 0 24px; font-size: 17px; color: var(--navy-700); max-width: 46ch; }
.home-note { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.home-features { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 10px; }
.feature { display: flex; gap: 14px; align-items: flex-start; padding: 20px 16px; border-radius: var(--radius-card); background: var(--white); box-shadow: var(--card-edge); }
.feature-tile { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--pale-blue); color: var(--navy); margin-top: 2px; }
.feature-tile svg { width: 20px; height: 20px; }
.feature h2 { font-size: 17px; font-weight: 700; }
.feature p { margin: 2px 0 0; color: var(--muted); font-size: 15px; }

/* All books and reviews: a back link to the profile, the serif headline and a count, then the
   search pill and the sort pills (All books), then the books in year groups or the review cards. */
.books-page, .reviews-page { max-width: 560px; margin: 0 auto; }
.reader-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); font-weight: 600; text-decoration: none; }
.reader-back > svg { width: 20px; height: 20px; margin-right: 2px; }
.avatar.tiny { width: 28px; height: 28px; margin: 0; }
.avatar.tiny.initials { font-size: 13px; }
.books-page h1, .reviews-page h1 { margin-top: 12px; font-size: 30px; }
.page-count { margin: 2px 0 0; color: var(--muted); font-size: 16px; }
.search-field { display: block; position: relative; margin-top: 20px; }
.search-field::before {
  content: ""; position: absolute; left: 20px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%);
  background: currentColor; color: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search-field input {
  width: 100%; min-height: 52px; padding: 0 20px 0 50px; border-radius: 999px; border: 0; box-shadow: var(--card-edge);
  background: var(--white); color: var(--text); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
}
.search-field input::placeholder { color: var(--muted); }
.search-field input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.sort-chips { display: flex; gap: 8px; margin: 12px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
.sort-chips::-webkit-scrollbar { display: none; }
.sort-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0;
  box-shadow: inset 0 0 0 1px var(--slate-200); background: var(--white); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.sort-chip svg { width: 16px; height: 16px; stroke-width: 2.6; }
.sort-chip.selected { background: var(--navy); box-shadow: none; color: var(--white); }
.books-results { margin-top: 8px; }
.year-head { display: flex; align-items: baseline; gap: 10px; margin: 32px 0 14px; font-weight: 400; }
.year-number { font-family: var(--serif); font-style: normal; font-weight: 600; letter-spacing: -0.02em; font-size: 30px; line-height: 1.1; color: var(--navy); }
.year-name { font-size: 22px; font-weight: 600; }
.year-count { font-size: 15px; font-weight: 400; color: var(--muted); }
.books-results > .tiles:first-child { margin-top: 24px; }
.no-match { text-align: center; color: var(--muted); }
.no-match:not(:empty) { margin-top: 40px; }
.no-match p { margin: 0; }
.link-button { margin-top: 8px; border: 0; background: none; padding: 8px 0; font: inherit; font-weight: 600; color: var(--blue); cursor: pointer; }
.books-more { margin-top: 28px; }
.books-more[hidden] { display: none; }
.reviews-page .review-list { margin-top: 24px; }

/* The book page: a centred cover, the title, the author in the serif, the facts and two pills;
   the shared-from card on navy like the app's quote card; About with its kinds; More by the
   author. Desktop: cover left, details right. */
.book-page { max-width: 560px; margin: 0 auto; }
.book-top { display: flex; flex-direction: column; align-items: center; text-align: center; }
.book-top .cover-frame.book-top-cover { width: 168px; box-shadow: 0 0 0 0.5px rgba(0, 27, 101, 0.12), 0 12px 32px rgba(0, 27, 101, 0.2); }
.book-top-words { width: 100%; margin-top: 24px; }
.book-top h1 { font-size: 28px; }
.book-subtitle { margin: 6px 0 0; color: var(--muted); }
.book-byline { margin: 6px 0 0; color: var(--blue); font-size: 19px; line-height: 1.3; }
.book-facts { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.book-actions { display: grid; gap: 10px; margin-top: 22px; }
.book-actions .button { font-size: 16px; }
.book-actions .button svg { width: 18px; height: 18px; stroke-width: 2.4; }
.shared-card {
  position: relative; margin-top: 24px; padding: 20px 20px 22px; border-radius: 26px;
  background: var(--navy); color: var(--white);
}
.shared-who { display: flex; align-items: center; gap: 12px; margin: 0 48px 16px 0; }
.shared-who:last-child { margin-bottom: 0; }
.shared-person { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.shared-person .avatar.tiny { width: 36px; height: 36px; }
.shared-person .avatar.tiny.initials { font-size: 15px; }
.shared-words { display: flex; flex-direction: column; min-width: 0; font-size: 14px; color: rgba(255, 255, 255, 0.72); line-height: 1.3; }
.shared-words strong { font-size: 16px; font-weight: 600; color: var(--white); }
.shared-mark {
  position: absolute; top: 10px; right: 20px; color: var(--lilac);
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 60px; line-height: 1;
}
.shared-quote {
  margin: 0; padding-right: 8px; font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 19px; line-height: 1.45; white-space: pre-line; color: var(--white);
}
.shared-card.quote > .shared-quote:first-of-type:nth-child(2) { margin-top: 30px; }
.shared-review { margin: 0; white-space: pre-line; color: var(--white); font-size: 16px; }
.shared-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 14px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.shared-foot .stars { font-size: 13px; margin-top: 0; color: rgba(255, 255, 255, 0.28); }
.book-about h2 { margin-bottom: 10px; }
.about-text { margin: 0; white-space: pre-line; color: var(--navy-700); }
.about-text.clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.read-more { padding: 6px 0; }
.read-more[hidden] { display: none; }
.book-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.book-chips .chip { min-height: 32px; padding: 4px 14px; }
.book-page .tiles { margin-top: 0; }
.book-page .section h2 { font-size: 22px; font-weight: 600; margin-bottom: 14px; }
.book-page .app-card { margin-top: 40px; }

/* The list page: a blue "A reading list", the name in the serif heading face, the
   by-line, the description, Share, then one white card of numbered rows (a serif number, the
   cover, title, author, stars, a small Amazon pill). */
.list-page { max-width: 560px; margin: 0 auto; }
.eyebrow { margin: 0 0 4px; color: var(--blue); font-size: 15px; font-weight: 600; }
.list-top h1 { font-size: 30px; }
.list-by { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; color: var(--navy-700); font-size: 15px; }
.list-by a, .list-by strong { color: var(--blue); font-weight: 600; text-decoration: none; }
.list-by .avatar.tiny { flex: none; width: 24px; height: 24px; }
.list-by .avatar.tiny.initials { font-size: 11px; }
.list-description { margin: 12px 0 0; white-space: pre-line; color: var(--navy-700); }
.list-share { margin-top: 18px; width: 100%; min-height: 46px; }
.list-share svg { width: 18px; height: 18px; }
.list-rows-numbered {
  list-style: none; margin: 18px 0 0; padding: 0; border-radius: var(--radius-card);
  background: var(--white); box-shadow: var(--card-edge); overflow: hidden;
}
.list-item {
  display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) auto; grid-template-areas: "num cover words buy";
  align-items: center; column-gap: 12px; padding: 12px 16px 12px 14px;
}
.list-item + .list-item { border-top: 1px solid var(--slate-100); }
.list-number { grid-area: num; text-align: center; color: var(--muted); font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 20px; }
.list-item > a.book-link, .list-item > .cover-frame { grid-area: cover; width: 44px; }
.list-item .cover-frame { border-radius: 6px; }
.list-item-words { grid-area: words; min-width: 0; }
.list-item-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.25; }
.list-item-author { margin: 1px 0 0; font-size: 14px; color: var(--muted); }
.list-item-year { display: none; }
.list-item-words .stars { margin-top: 4px; font-size: 12px; }
.button.list-amazon { grid-area: buy; }
.list-more { margin-top: 14px; }
.list-more[hidden] { display: none; }
.list-page .disclosure { margin-top: 28px; }
.list-empty { margin: 28px 0 0; color: var(--muted); }

/* The narrowest phones: a list row's Amazon pill moves under the title rather than squeezing it. */
@media (max-width: 359px) {
  .list-item { grid-template-columns: 20px 44px minmax(0, 1fr); grid-template-areas: "num cover words" "num cover buy"; row-gap: 8px; }
  .button.list-amazon { justify-self: start; }
}

/* Privacy, Terms and Disclaimer: the policy text from Termageddon in a reading column. */
.legal { max-width: 720px; }
.legal h1 { font-size: 30px; margin-bottom: 20px; }
.legal-fallback { color: var(--muted); }
/* The /app/ pages (13 October 2026): where a screen of the app is, for a phone without it. */
.app-page { max-width: 640px; }
.app-page h1 { font-size: 30px; margin-bottom: 16px; }
.app-page p { line-height: 1.6; margin: 0 0 14px; }
.app-page .app-page-where { font-weight: 600; }
.app-page .app-page-email a { color: var(--blue); }
.app-page .button { margin-top: 12px; }
/* /app/join/<CODE> (5 November 2026): a shared code, for a phone without the app. */
.join-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 20px 0; padding: 20px 24px; border-radius: 20px; background: var(--white); box-shadow: var(--card-edge); }
.join-code-label { flex-basis: 100%; color: var(--muted); font-size: 14px; font-weight: 600; }
.join-code-value { font-size: 34px; letter-spacing: 0.12em; color: var(--navy); font-variant-numeric: tabular-nums; }
.app-page .join-code .button { margin: 0 0 0 auto; }
.join-steps { margin: 0 0 20px; padding-left: 22px; line-height: 1.7; }
.join-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.app-page .join-actions .button { margin-top: 0; }
/* The Termageddon text (13 October 2026). It brings a reset scoped to its own div's id
   (`font: revert` on every element), so every rule here starts from `#legal`, which outranks
   it. Its own h1 repeats ours and goes; its "Introduction" heading is meant to be read only by
   screen readers. Light tokens only, and nothing here reaches the top bar or the footer. */
#legal .policy_embed_div { font-family: inherit; color: var(--text); line-height: 1.65; font-size: 16px; overflow-wrap: anywhere; }
#legal .policy_embed_div :is(p, li, td, th, dd, dt, summary, a, strong, em, b) { font-family: inherit; font-size: inherit; line-height: inherit; }
#legal .policy_embed_div h1 { display: none; }
#legal .policy_embed_div .tg-intro-heading { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#legal .policy_embed_div :is(h2, h3, h4) { font-family: inherit; color: var(--text); line-height: 1.3; font-weight: 600; margin: 32px 0 10px; }
#legal .policy_embed_div h2 { font-size: 22px; }
#legal .policy_embed_div h3 { font-size: 18px; }
#legal .policy_embed_div h4 { font-size: 16px; }
#legal .policy_embed_div p { margin: 0 0 14px; }
#legal .policy_embed_div :is(ul, ol) { margin: 0 0 14px; padding-left: 22px; }
#legal .policy_embed_div li { margin: 4px 0; }
#legal .policy_embed_div a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
#legal .policy_embed_div hr { border: 0; border-top: 1px solid var(--slate-100); margin: 28px 0; }
#legal .policy_embed_div .tg-last-updated-date { color: var(--muted); font-size: 14px; }
#legal .policy_embed_div .tg-toc { background: var(--white); box-shadow: var(--card-edge); border-radius: var(--radius-card); padding: 20px 24px; margin: 20px 0 28px; }
#legal .policy_embed_div .tg-toc-heading { font-size: 16px; margin: 0 0 8px; }
#legal .policy_embed_div .tg-toc-list { list-style: none; padding: 0; margin: 0; }
#legal .policy_embed_div .tg-toc-link { text-decoration: none; }
#legal .policy_embed_div .tg-toc-item { margin: 6px 0; }
#legal .policy_embed_div .accordion { border-bottom: 1px solid var(--slate-100); }
#legal .policy_embed_div .accordion-summary { cursor: pointer; padding: 12px 0; font-weight: 500; }
#legal .policy_embed_div .accordion-heading { display: inline; margin: 0; font-size: 16px; }
#legal .policy_embed_div .accordion-content { margin: 0; padding: 4px 0 16px 16px; }
#legal .policy_embed_div .table-responsive { display: block; width: 100%; overflow-x: auto; margin-bottom: 16px; }
#legal .policy_embed_div table { border-collapse: collapse; font-size: 14px; }
#legal .policy_embed_div :is(th, td) { padding: 10px 12px; border: 1px solid var(--slate-100); text-align: left; vertical-align: top; min-width: 12em; }

/* The narrowest phones (320px): the stat tiles stay side by side, the pills shrink their
   padding rather than overflow. */
@media (max-width: 359px) {
  :root { --gutter: 16px; }
  .profile-head h1, .wish-top h1, .state h1 { font-size: 26px; }
  .home-words h1 { font-size: 32px; }
  .stat-tiles { gap: 8px; }
  .stat-tile > span { font-size: 12px; }
  .button { padding-left: 16px; padding-right: 16px; }
  .get-app-button { padding: 0 12px; font-size: 14px; }
  .wordmark { font-size: 17px; }
  .tiles { gap: 18px 10px; }
}

/* Desktop. 1024px is the switch: below it the right column would be under ~600px, six covers
   across would be under 90px each and every title would cut to a word, so a tablet in portrait
   keeps the phone column, centred. One breakpoint for the whole site. */
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
  .top-bar { background: var(--white); }
  .top-bar-inner { height: 68px; }
  .page { padding-top: 44px; }

  /* The footer's wordmark and links line up with the column's edges, the hairline runs full width. */
  .site-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 28px max(var(--gutter), calc((100% - var(--column)) / 2 + var(--gutter))) 36px;
  }
  .site-foot nav { margin-top: 0; }

  .profile.split {
    max-width: none;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    column-gap: 52px;
    align-items: start;
  }
  .profile-card { padding: 28px 24px 24px; border-radius: 26px; background: var(--white); box-shadow: var(--card-edge); }
  .profile-card .avatar { width: 104px; height: 104px; }
  .profile-card .avatar.initials { font-size: 42px; }
  .profile-card .profile-head .bio { font-size: 15px; }
  .profile-card .stat-tile { min-height: 72px; }
  .profile-card .profile-actions { margin-top: 14px; }
  .profile-card .profile-actions .primary { padding: 0 12px; white-space: nowrap; }
  .profile-main > .section:first-child { margin-top: 0; }
  .profile.split > .app-card { grid-column: 1 / -1; }
  .app-card { margin-top: 56px; padding: 40px 40px 34px; }
  .app-card h2 { max-width: calc(100% - 140px); font-size: 30px; }
  .app-card-fan { top: 24px; right: 28px; transform: scale(1.25); transform-origin: top right; }
  .app-card > p { max-width: 52ch; font-size: 16px; }
  .state .app-card { padding: 24px 20px 22px; }
  .state .app-card h2 { max-width: calc(100% - 112px); font-size: 22px; }

  .profile-main .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 16px; }
  .profile-main .tiles .wide-only { display: block; }
  .profile-main .tiles + .button { display: none; }
  .narrow-only { display: none; }
  .wide-only-inline { display: inline; }

  .top-five { gap: 16px; }
  .top-five .rank { top: 8px; left: 8px; }
  .top-five-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: 10px 0 0; font-size: 15px; font-weight: 600; line-height: 1.3;
  }

  .review-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .list-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

  .wishlist { max-width: none; }
  .wish-top {
    grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0;
    grid-template-areas: "photo from share" "title title share" "lead lead share" "shelf shelf share" "bar bar bar";
  }
  .wish-photo, .avatar.small { width: 60px; height: 60px; }
  .wish-from { font-size: 16px; }
  .wish-top h1 { margin-top: 16px; font-size: 44px; }
  .wish-lead { margin-top: 6px; font-size: 17px; }
  .wish-shelf-top { display: none; }
  .wish-share { align-self: end; margin: 0 0 4px; width: auto; padding: 0 30px; min-height: 52px; }
  .wish-bar { margin-top: 32px; }
  .wishlist .wish-list { margin-top: 32px; }
  .wish-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 36px 20px; }
  .wish-item { display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .wish-item > a, .wish-item > .cover-frame { width: auto; }
  .wish-item-words { display: flex; flex-direction: column; flex: 1; }
  .wish-item-title { margin-top: 12px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wish-item-meta { margin: 2px 0 0; font-size: 13px; line-height: 1.35; }
  .wish-item-meta > p { display: inline; font-size: inherit; margin: 0; }
  .wish-item-meta > p + p::before { content: " · "; }
  .wish-item .button.buy {
    margin-bottom: 0;
    /* Pinned to the foot of every cell, so the buttons line up whatever the titles wrap to. */
    margin-top: auto; align-self: flex-start; min-height: 34px; padding: 4px 14px; font-size: 14px;
  }
  .wish-more { max-width: 260px; margin: 32px auto 0; }
  .wish-shelf-foot { display: block; }

  .books-page, .reviews-page { max-width: none; }
  .books-page h1, .reviews-page h1 { font-size: 40px; }
  .search-field { max-width: 560px; }
  .sort-chips { margin-left: 0; margin-right: 0; padding: 0; }
  .tiles.six { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 16px; }
  .books-more, .list-more { max-width: 260px; margin-left: auto; margin-right: auto; }

  .book-page { max-width: none; }
  .book-top { flex-direction: row; align-items: flex-start; text-align: left; gap: 48px; }
  .book-top .cover-frame.book-top-cover { width: 240px; flex: none; }
  .book-top-words { margin-top: 8px; }
  .book-top h1 { font-size: 40px; }
  .book-byline { font-size: 22px; }
  .book-actions { grid-template-columns: repeat(2, max-content); margin-top: 28px; }
  .book-actions .button { padding: 0 28px; }
  .shared-card { max-width: 720px; margin-top: 40px; padding: 28px 32px 30px; }
  .shared-quote { font-size: 22px; }
  .shared-mark { right: 28px; top: 14px; font-size: 72px; }
  .book-about { max-width: 720px; }
  .book-page .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 16px; }

  .list-page { max-width: 720px; }
  .list-top h1 { font-size: 44px; }
  .list-share { width: auto; padding: 0 28px; }
  .list-item { grid-template-columns: 28px 56px minmax(0, 1fr) auto; column-gap: 18px; padding: 14px 22px 14px 18px; }
  .list-item > a.book-link, .list-item > .cover-frame { width: 56px; }
  .list-item-year { display: inline; }

  .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; padding: 24px 0; }
  .home-card { order: 2; }
  .home-words h1 { font-size: 52px; }
  .home-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 64px; }
  .feature { flex-direction: column; padding: 24px; }
}