/* Press design, approved by Garrett 11 Oct 2026 (Marketing/reader-design/compare-serif.png, bottom row): paper tones, hairlines
   instead of shadows, gentle corners, italic serif labels, a fleuron before section heads, the books' own font for the app.
   An overlay loaded after every other stylesheet; the source is Marketing/reader-design/approved-design.css. */
:root { --bg:#fdfcf8; --bg-2:#f4f1ea; --line:#e0dacd;
  --shadow: none; }
/* 1. gentle corners in place of full pills */
.btn, a.btn, button.btn, .seg, .seg button, .seg a, .chip, .pill, .wk, .toast, .pl-opt, .opt, .sheet .acts button, .wtools button { border-radius: 7px !important; }
/* 3. small spaced capitals become italic serif lead-ins */
.kicker, .pbanner .kicker, .pl-kick, .sheet .sh h3, .next .k, .ctx .k, .paywall .k, .pgnext .k, .pgchips .k, .tier .k, .acct .box h2, .xgroup h3, .dc-step, .gx .k, .cxbox .k, .rd .src { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--text) !important; font-style: italic; font-size: 1.05em !important; color: var(--gold-ink) !important; }
/* 4. a fleuron from the books before section headings */
.h-sec h2::before { content: "❧"; color: var(--gold); font-size: .72em; margin-right: .38em; position: relative; top: -.08em; }
/* 5. navy rule and gold hairline under the header */
header.top { border-bottom: 1px solid #192648 !important; box-shadow: 0 1px 0 #d8c7a1; }
/* 6. hairline borders instead of floating shadows */
.card, .pcard, .box, .placement, .lbox, .dlink { box-shadow: none !important; border: 1px solid var(--line) !important; }
/* the app's buttons and labels in the books' own font instead of the phone's sans-serif */
:root { --ui: "EBG", "EB Garamond", Garamond, Georgia, serif; }
body { font-size: 16.5px; }
.btn, a.btn, button.btn, .seg button, .seg a, nav.tabs a, .wk, .wq-t { font-weight: 600; letter-spacing: .01em; }
nav.tabs a { font-size: 12.5px !important; }
.muted, small { font-size: 1.02em; }

/* sepia and night keep their own colors (their :root[data-theme] rules win); the header rules follow the theme there */
:root[data-theme="sepia"] header.top { border-bottom-color: #7a6a55 !important; box-shadow: 0 1px 0 #c9b48a; }
:root[data-theme="night"] header.top { border-bottom-color: var(--line) !important; box-shadow: 0 1px 0 rgba(205, 176, 127, .35); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] header.top { border-bottom-color: var(--line) !important; box-shadow: 0 1px 0 rgba(205, 176, 127, .35); }
}
/* the label on a dark picture banner stays light in every theme */
.pbanner .kicker { color: #d9bd8c !important; }

/* Second pass, approved by Garrett 11 Oct 2026 (Marketing/reader-design/compare-further.png, bottom row): a medallion ring, a words-only tab bar,
   Roman numerals on the reading path, flat cards, a quiet daily-goal line. Source: Marketing/reader-design/further.css. */

/* 1. the "you can read" ring becomes a medallion: hairline outer ring, fine ticks, thinner gold arc, Didot figure */
.meter { width: 156px; height: 156px; }
.meter::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid var(--gold); opacity: .7; }
.meter::after { content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: repeating-conic-gradient(var(--gold) 0 .6deg, transparent .6deg 7.5deg);
  -webkit-mask: radial-gradient(circle, transparent 0 74px, #000 74.5px 78px, transparent 78.5px); mask: radial-gradient(circle, transparent 0 74px, #000 74.5px 78px, transparent 78.5px); opacity: .55; }
.meter circle { stroke-width: 5 !important; }
.meter .fg { stroke-linecap: butt !important; }
.meter b { font-family: var(--brand) !important; font-size: 38px !important; }
.meter span { font-style: italic; font-family: var(--text); font-size: 13px !important; }

/* 2. the tab bar: words only, in the books' font, gold rule over the active one */
.tabs a svg, .tabs .mono { display: none !important; }
.tabs a { padding: 15px 0 14px !important; }
.tabs a .tl { font: 600 14px/1 var(--text) !important; letter-spacing: .02em !important; }
.tabs a.on::before { width: 44px !important; margin-left: -22px !important; height: 2px !important; border-radius: 0 !important; }

/* 3. the reading path: Roman numerals instead of numbered circles */
.pcards.path { counter-reset: lv; }
.pcards.path > a { counter-increment: lv; }
.pcards.path b i { font-size: 0 !important; border: 0 !important; background: none !important; width: auto !important; height: auto !important; margin-right: 6px !important; }
.pcards.path b i::before { content: counter(lv, upper-roman) "."; font: italic 600 16px/1 var(--text); color: var(--gold-ink); }

/* 4. home cards: flat and page-like */
.resume, .pcard, .dlink, .card, .nxprompt { border-radius: 3px !important; box-shadow: none !important; }
.resume { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; padding: 16px 2px !important; }

/* 5. "0 / 50 today": a quiet italic line, no second ring */
.goal .ring { display: none !important; }
.goal span { font-family: var(--text); font-style: italic; font-size: 14px; }

/* Beta, 11 Oct 2026: the regular price struck through beside the beta price, the beta note, the banner line */
.tier .p s.was { color: var(--muted); font-size: .62em; font-weight: 400; margin-right: .2em; text-decoration-thickness: 1px; }
.tier .betanote { font-style: italic; color: var(--gold-ink); font-size: 14px; line-height: 1.35; margin: 4px 0 10px; }
.welcome p.beta { font-style: italic; font-size: 14px; color: #d9cfb6; margin-top: 8px; }
.welcome p.beta a { color: #e7d3a6; }

/* The way back to contubernalesbooks.com, in the header on every page (11 Oct 2026) */
.toshop { text-decoration: none; color: var(--muted); font: 600 14.5px/1 var(--text); white-space: nowrap; margin-left: 8px; padding: 8px 0 8px 14px; border-left: 1px solid var(--line); }
.toshop:hover { color: var(--ink); }
.toshop .sm { display: none; }
@media (max-width: 720px) {
  .toshop { margin-left: auto; border-left: 0; padding: 8px 2px; font-size: 14px; }
  .toshop .lg { display: none; } .toshop .sm { display: inline; }
}

/* Verse on phones: shrink just enough that a hexameter keeps to one line (11 Oct 2026) */
@media (max-width: 480px) { #reader .verse .ln .lt { font-size: min(1em, calc((100vw - 52px) / 23)); } }