/* ---------- tokens ---------- */
:root {
  --base: 19px;                 /* set by type-size setting */
  --serif: "Literata", "Charter", "Iowan Old Style", "Georgia", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", "Segoe UI", Arial, sans-serif;

  --bg: #f6f3ee;
  --fg: #1a1a1a;
  --muted: rgba(26,26,26,.65);
  --rule: rgba(26,26,26,.14);
  --accent: #c8451f;
  --accent-ink: #ffffff;
  --header-h: 52px;
  --gutter: 5vw;
}
:root[data-theme="dark"] {
  --bg: #15161a; --fg: #ebe8e1; --muted: rgba(235,232,225,.62); --rule: rgba(235,232,225,.16);
  --accent: #ff7a4f; --accent-ink: #15161a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15161a; --fg: #ebe8e1; --muted: rgba(235,232,225,.62); --rule: rgba(235,232,225,.16);
    --accent: #ff7a4f; --accent-ink: #15161a;
  }
}
:root[data-size="xs"] { --base: 15px; }
:root[data-size="s"]  { --base: 17px; }
:root[data-size="m"]  { --base: 19px; }
:root[data-size="l"]  { --base: 22px; }
:root[data-size="xl"] { --base: 26px; --headline-mult: 1.5; }
:root { --headline-mult: 1.7; }

/* type scale as multiples of base */
:root {
  --t-display: calc(var(--base) * 2.8);
  --t-headline: calc(var(--base) * var(--headline-mult));
  --t-title: calc(var(--base) * 1.35);
  --t-body: var(--base);
  --t-quote: calc(var(--base) * 1.05);
  --t-caption: calc(var(--base) * 0.8);
  --t-aside: calc(var(--base) * 0.9);
  --t-kicker: calc(var(--base) * 0.7);
}

/* ---------- shell ---------- */
/* solid black band under the OS status bar in home-screen mode (inset is 0 in a browser tab) */
/* the whole reader is a card on a black ground, sitting below the status bar and above the home indicator */
:root { --card-radius: 14px; }
html, body { height: 100%; margin: 0; background: #000; }
body {
  color: var(--fg);
  font-family: var(--serif); font-size: var(--t-body); line-height: 1.5;
  overflow: hidden; -webkit-text-size-adjust: 100%;
}
.app {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden; background: var(--bg); border-radius: var(--card-radius);
  transform: translateZ(0);  /* makes the radius clip the scrolling pages on iOS */
}
.deck-wrap {
  position: absolute; inset: 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.deck-wrap::-webkit-scrollbar { display: none; }
.deck { height: 100%; display: flex; }

.page {
  flex: 0 0 100vw; width: 100vw; height: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; background: var(--bg);
}
.page--cover, .page--verdict { background: var(--accent); color: var(--accent-ink); }
.page--section { background: color-mix(in srgb, var(--accent) 9%, var(--bg)); }

/* persistent top bar: transparent overlay; each page paints its own background beneath it, so colour swipes with the page */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; pointer-events: none;
  padding: 12px var(--gutter) 10px;
  font-family: var(--sans); font-size: var(--t-kicker); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); background: transparent; transition: color .25s;
}
.topbar .gear { pointer-events: auto; }
/* bar text colours on accent pages */
.topbar[data-ptype="cover"], .topbar[data-ptype="verdict"] {
  color: color-mix(in srgb, var(--accent-ink) 75%, transparent);
  --rule: color-mix(in srgb, var(--accent-ink) 30%, transparent);
}
.topbar[data-ptype="cover"] .fill, .topbar[data-ptype="verdict"] .fill { background: var(--accent-ink); }
.topbar[data-ptype="cover"] .tick, .topbar[data-ptype="verdict"] .tick { background: var(--accent); }
.kicker-row { display: flex; align-items: baseline; gap: .6em; min-height: 1.6em; }
.kicker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kicker .label { text-transform: none; letter-spacing: .02em; }
.kicker .label::before { content: ". "; }
.counter { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; display: none; }
.kicker { flex: 1 1 auto; }
.gear { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; font-size: 1.3em; line-height: 1; min-width: 44px; min-height: 32px; margin: -8px -12px -8px 0; padding: 0 12px 0 8px; display: inline-flex; align-items: center; justify-content: flex-end; }
.progress { margin-top: 8px; height: 3px; }
.progress .track { position: relative; height: 100%; background: var(--rule); border-radius: 2px; overflow: hidden; }
.progress .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); transition: width .2s; }
.progress .tick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--bg); opacity: .9; }

/* space under the overlaid bar, painted by the page itself */
.page-top { flex: 0 0 var(--bar-h, 64px); }
/* short smoothstep fade under the bar, only on plain pages */
.topfade {
  position: absolute; left: 0; right: 0; top: -1px; height: 17px; pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, var(--bg) 0, var(--bg) 2px, transparent 2px),
              linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 97.2%, transparent) 10%, color-mix(in srgb, var(--bg) 89.6%, transparent) 20%, color-mix(in srgb, var(--bg) 78.4%, transparent) 30%, color-mix(in srgb, var(--bg) 64.8%, transparent) 40%, color-mix(in srgb, var(--bg) 50.0%, transparent) 50%, color-mix(in srgb, var(--bg) 35.2%, transparent) 60%, color-mix(in srgb, var(--bg) 21.6%, transparent) 70%, color-mix(in srgb, var(--bg) 10.4%, transparent) 80%, color-mix(in srgb, var(--bg) 2.8%, transparent) 90%, transparent 100%);
  background-size: 100% 2px, 100% 100%; background-repeat: no-repeat;
}

/* scrolling main zone */
.page-main-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
.page-main {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior-y: contain;
  padding: 1.1em var(--gutter) 3.5em;
  -webkit-overflow-scrolling: touch;
}
.page-main > * + * { margin-top: 1em; }
.fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4.5em; pointer-events: none;
  --fade-bg: var(--bg);
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--fade-bg) 2.8%, transparent) 10%, color-mix(in srgb, var(--fade-bg) 10.4%, transparent) 20%, color-mix(in srgb, var(--fade-bg) 21.6%, transparent) 30%, color-mix(in srgb, var(--fade-bg) 35.2%, transparent) 40%, color-mix(in srgb, var(--fade-bg) 50.0%, transparent) 50%, color-mix(in srgb, var(--fade-bg) 64.8%, transparent) 60%, color-mix(in srgb, var(--fade-bg) 78.4%, transparent) 70%, color-mix(in srgb, var(--fade-bg) 89.6%, transparent) 80%, color-mix(in srgb, var(--fade-bg) 97.2%, transparent) 90%, var(--fade-bg) 100%);
  opacity: 1; transition: opacity .2s;
}
.page--section .fade { --fade-bg: color-mix(in srgb, var(--accent) 9%, var(--bg)); }
.page--cover .fade, .page--verdict .fade { --fade-bg: var(--accent); }
.fade.hidden { opacity: 0; }

/* ---------- hyphenation (running text only; headings and pulls stay unhyphenated) ---------- */
.b-paragraph, .b-quote .q-text, .b-list .li-text, .b-definition .d-text, .b-compare .c-text, .b-aside, .page--section .deck {
  -webkit-hyphens: auto; hyphens: auto;
  -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; -webkit-hyphenate-limit-lines: 2;
}

/* ---------- blocks ---------- */
.b-paragraph { font-size: var(--t-body); }
.b-paragraph + .b-paragraph { margin-top: 1em; }

.b-pull {
  font-family: var(--sans); font-weight: 700; font-size: var(--t-headline); line-height: 1.2; letter-spacing: -.01em;
  border-left: 5px solid var(--accent); padding-left: .55em; margin: 1.4em 0;
}
.b-question {
  font-family: var(--sans); font-weight: 700; font-size: var(--t-headline); line-height: 1.22; letter-spacing: -.01em;
  margin: 1.4em 0;
}
.b-quote { margin: 1.3em 0; }
.b-quote .q-caption { font-family: var(--sans); font-size: var(--t-caption); color: var(--muted); line-height: 1.4; margin-bottom: .6em; }
.b-quote .q-text {
  position: relative; margin: 0; font-style: italic; font-size: var(--t-quote); line-height: 1.5;
  padding-left: .8em;
}
/* side rule drawn as a pseudo-element so it can be inset from the first and last line's leading */
.b-quote .q-text::before {
  content: ""; position: absolute; left: 0; width: 3px; border-radius: 2px; background: var(--accent);
  top: var(--quote-rule-inset, .4em); bottom: var(--quote-rule-inset, .3em);
}
.b-quote .q-attr { font-family: var(--sans); font-size: var(--t-caption); color: var(--muted); margin-top: .5em; padding-left: calc(.8em + 3px); }
.b-quote .q-attr::before { content: "— "; }

.b-number { margin: 1.3em 0; }
.b-number .n-figure { font-family: var(--sans); font-weight: 800; font-size: var(--t-display); line-height: 1; letter-spacing: -.03em; color: var(--accent); }
.b-number .n-caption { font-family: var(--sans); font-size: var(--t-caption); color: var(--muted); line-height: 1.4; margin-top: .4em; max-width: 34ch; }

.b-list { margin: 1.2em 0; padding: 0; list-style: none; }
.b-list li { display: grid; grid-template-columns: auto 1fr; gap: .6em; align-items: baseline; margin: .55em 0; }
.b-list .ordinal { font-family: var(--sans); font-weight: 700; font-size: var(--t-headline); line-height: 1; color: var(--accent); min-width: 1.2em; }
.b-list .li-text { font-size: var(--t-body); }

.b-definition { margin: 1.3em 0; }
.b-definition .d-term { font-family: var(--sans); font-weight: 700; font-size: var(--t-headline); line-height: 1.2; padding-bottom: .3em; border-bottom: 1px solid var(--rule); margin-bottom: .6em; }

.b-compare { margin: 1.3em 0; }
.b-compare .half + .half { border-top: 1px solid var(--rule); margin-top: 1em; padding-top: 1em; }
.b-compare .c-label { font-family: var(--serif); font-weight: 600; font-size: var(--t-title); margin-bottom: .3em; }

.b-aside { font-family: var(--sans); font-size: var(--t-aside); color: var(--muted); margin: 1.3em 0 1.3em 8%; line-height: 1.45; }
.b-aside::before { content: "aside"; display: block; font-size: var(--t-kicker); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .3em; }

/* page types */
.page--section .numeral { font-family: var(--sans); font-weight: 800; font-size: var(--t-display); line-height: 1; letter-spacing: -.03em; color: var(--accent); }
.page--section .heading { font-family: var(--sans); font-weight: 700; font-size: var(--t-headline); line-height: 1.15; letter-spacing: -.01em; margin-top: .3em; }
.page--section .deck { font-size: var(--t-body); border-top: 1px solid var(--rule); padding-top: .9em; margin-top: 1.2em; }

.page--cover .book-title { font-family: var(--serif); font-weight: 600; font-size: var(--t-title); line-height: 1.2; }
.page--cover .book-author { font-family: var(--sans); font-size: var(--t-caption); letter-spacing: .06em; text-transform: uppercase; margin-top: .4em; opacity: .85; }
.page--cover .rule { height: 1px; background: rgba(255,255,255,.4); margin: 1.4em 0; }
.page--cover .hook { font-family: var(--sans); font-weight: 700; font-size: var(--t-headline); line-height: 1.2; letter-spacing: -.01em; }
.page--cover .review-title { font-family: var(--sans); font-size: var(--t-kicker); letter-spacing: .1em; text-transform: uppercase; opacity: .8; margin-top: 2em; }

.page--verdict .verdict-text { font-family: var(--sans); font-weight: 800; font-size: var(--t-headline); line-height: 1.18; letter-spacing: -.015em; }
.page--verdict .verdict-kicker { font-family: var(--sans); font-size: var(--t-kicker); letter-spacing: .12em; text-transform: uppercase; opacity: .8; margin-bottom: 1em; }

.page--interlude .page-main { display: flex; flex-direction: column; justify-content: flex-start; padding-top: 14vh; }

/* ---------- settings sheet ---------- */
.settings { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: flex-end; justify-content: center; z-index: 10; }
.settings[hidden] { display: none; }
.settings-sheet { width: 100%; max-width: 520px; background: var(--bg); color: var(--fg); border-radius: 16px 16px 0 0; padding: 18px var(--gutter) calc(env(safe-area-inset-bottom) + 18px); font-family: var(--sans); font-size: 15px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.settings-label { color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.seg button { background: transparent; color: var(--fg); border: 0; padding: 8px 12px; font: inherit; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.settings select { font: inherit; background: transparent; color: var(--fg); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 8px; max-width: 60%; }
.settings-close { margin-top: 14px; width: 100%; padding: 12px; border: 0; border-radius: 10px; background: var(--fg); color: var(--bg); font: inherit; font-weight: 600; cursor: pointer; }

/* desktop: keep a phone-sized column so the design reads the same */
@media (min-width: 700px) {
  .app { width: 430px; left: 50%; transform: translateX(-50%); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
  .page { flex-basis: 430px; width: 430px; }
  :root { --gutter: 30px; }
}