/* LitFever — the one stylesheet.
 *
 * DARK-FIRST by measurement, not by taste: the brand accent #E6A94E scores
 * 9.34:1 on ink #0C0E12 and 1.80:1 on paper #F3EFE6 (marketing/brand-kit/
 * BRAND-COLOURS.md §b). An amber link on a light page is unreadable, so the
 * page ground IS the ink. Palette values mirror channels/litbites/config.yaml.
 *
 * Fonts are SELF-HOSTED (SIL OFL 1.1, licences beside the files in
 * assets/fonts/). No Google Fonts request, no third-party IP transfer —
 * see site/templates/datenschutz.html §4.
 */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
}

:root {
  --ink: #0C0E12;
  --ink-2: #14171d;
  --ink-3: #1d222a;
  --paper: #F3EFE6;
  --paper-dim: rgba(243, 239, 230, .72);
  --paper-faint: rgba(243, 239, 230, .52);
  --amber: #E6A94E;
  --blue: #6C8CAF;
  --rose: #B45B6A;
  --rule: rgba(243, 239, 230, .14);
  /* card treatments: a hairline and a ground lifted ~5% toward paper.
     Both are alpha mixes of the palette above — no new hues. */
  --hairline: rgba(230, 169, 78, .20);
  --hairline-rose: rgba(180, 91, 106, .32);
  --lift: rgba(243, 239, 230, .05);
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --measure: 40rem;
  --pad: 1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--amber); text-underline-offset: .18em; }
a:hover { color: #f2be6e; }
a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--amber); color: var(--ink);
  padding: .6rem 1rem; font-weight: 700; z-index: 10;
}
.skip:focus { left: 0; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0 0 .5rem; }
h1 { font-size: clamp(1.9rem, 7vw, 2.75rem); }
h2 { font-size: clamp(1.35rem, 5vw, 1.7rem); margin-top: 2.25rem; }
h3 { font-size: 1.15rem; margin-top: 1.6rem; }
h4 { font-size: 1.02rem; margin-top: 1.5rem; color: var(--amber); }

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .86em; color: var(--paper-dim);
  background: var(--ink-3); padding: .05em .3em; border-radius: 3px;
  word-break: break-all;
}

p { margin: 0 0 1rem; }

.eyebrow {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); font-weight: 700; margin: 0 0 .35rem;
}

.lede { color: var(--paper-dim); font-size: 1.05rem; }
.note { color: var(--paper-faint); font-size: .9rem; }
.fineprint { color: var(--paper-faint); font-size: .8rem; margin: 0 0 .4rem; }
.fineprint--dim { color: rgba(243, 239, 230, .34); }
.draft-note {
  border: 1px solid var(--hairline-rose);
  border-radius: 8px; background: var(--lift);
  padding: .7rem .9rem; margin-top: 2rem;
}

/* ── shell ───────────────────────────────────────────────────────────────── */
.site-head {
  padding: var(--pad);
  border-bottom: 1px solid var(--rule);
}
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand__mark { width: 44px; height: auto; }
.brand__word {
  font-family: var(--serif); font-weight: 700; font-size: 1.35rem;
  color: var(--paper); letter-spacing: .01em;
}

main {
  display: block;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem var(--pad) 3rem;
}

.site-foot {
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.75rem var(--pad) 3rem;
}
.site-foot__nav {
  display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-bottom: 1rem;
}
.site-foot__nav a { font-size: .9rem; }

/* ── hero (link page) ────────────────────────────────────────────────────── */
.hero { text-align: center; padding-bottom: 1.5rem; }
.hero__mark { width: 150px; margin: 0 auto 1rem; }
.hero__word {
  font-size: clamp(2.2rem, 9vw, 3rem);
  margin-bottom: .25rem;
}
.hero__tagline { color: var(--amber); font-weight: 700; margin-bottom: .9rem; }
.hero__positioning {
  color: var(--paper-dim); font-size: .98rem;
  max-width: 32rem; margin: 0 auto;
}

.featured {
  margin-top: 2rem; padding: 1.5rem var(--pad);
  background: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 12px;
  text-align: center;
}
.featured__title { font-size: clamp(1.5rem, 6vw, 2rem); margin-bottom: .1rem; }
.featured__author { color: var(--paper-dim); margin-bottom: 1.1rem; }

.linkrow { margin: .9rem 0 0; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.links { margin-top: 1.25rem; }
.links__label {
  display: inline-block;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--ink); background: var(--amber);
  padding: .18rem .5rem; border-radius: 3px; margin-bottom: .55rem;
}
.links__disclosure { font-size: .82rem; color: var(--paper-dim); margin-bottom: 1rem; }

.btn {
  display: block; width: 100%;
  padding: .85rem 1rem; margin: 0 0 .6rem;
  border-radius: 10px; border: 1px solid var(--amber);
  background: var(--amber); color: var(--ink);
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
  text-align: center; text-decoration: none;
}
.btn:hover { background: #f2be6e; color: var(--ink); }
.btn--ghost {
  background: transparent; color: var(--amber);
  border-color: rgba(230, 169, 78, .55);
}
.btn--ghost:hover { background: rgba(230, 169, 78, .1); color: var(--amber); }

/* The not-live state. This is a SPAN, never an <a>: with
   channels/litbites/config.yaml `affiliate.live: false` there is nothing to
   click, and a dead affiliate link must not be clickable at all. */
.btn--pending {
  background: transparent;
  border: 1px dashed rgba(243, 239, 230, .28);
  color: var(--paper-faint);
  cursor: default; font-weight: 500;
}
.btn__note {
  display: block; font-weight: 500; font-size: .8rem; opacity: .82; margin-top: .1rem;
}

/* ── socials ─────────────────────────────────────────────────────────────── */
.socials { margin-top: 2rem; text-align: center; }
.socials__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ── books ───────────────────────────────────────────────────────────────── */
.booklist { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.bookcard {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem; margin-bottom: .9rem;
  background: var(--ink-2); border: 1px solid var(--rule); border-radius: 12px;
}
.bookcard img { width: 76px; border-radius: 4px; }
.bookcard h2 { font-size: 1.2rem; margin: 0 0 .15rem; }
.bookcard p { margin: 0 0 .35rem; color: var(--paper-dim); font-size: .92rem; }

.book__head { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.book__cover img { width: 116px; border-radius: 5px; border: 1px solid var(--rule); }
.book__title { font-size: clamp(1.7rem, 7vw, 2.4rem); margin-bottom: .1rem; }
.book__author { color: var(--paper-dim); margin-bottom: .3rem; }
.book__edition { color: var(--paper-faint); font-size: .84rem; margin: 0; }

/* the typographic fallback cover, used only when no real cover file exists */
.cover-card {
  width: 116px; aspect-ratio: 2 / 3;
  display: flex; flex-direction: column; justify-content: center;
  padding: .6rem; border-radius: 5px;
  background: linear-gradient(160deg, var(--ink-3), var(--ink));
  border: 1px solid rgba(230, 169, 78, .45);
}
.cover-card__title { font-family: var(--serif); font-weight: 700; font-size: .84rem; line-height: 1.2; }
.cover-card__author { font-size: .66rem; color: var(--paper-dim); margin-top: .3rem; }
.cover-card__mark { font-family: var(--serif); font-size: .6rem; color: var(--amber); margin-top: auto; }

/* ── excerpts ────────────────────────────────────────────────────────────── */
.excerpt {
  margin: 1.5rem 0 2rem;
  padding: 1.05rem 1.15rem .95rem;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--lift);
}
.excerpt blockquote {
  margin: 0 0 .6rem;
  font-family: var(--serif); font-size: 1.22rem; line-height: 1.45;
}
.excerpt__source { font-size: .82rem; color: var(--paper-faint); margin: 0 0 .2rem; }
.excerpt__id {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .7rem; color: rgba(243, 239, 230, .38);
  word-break: break-all; margin: 0 0 .7rem;
}
.excerpt__review { color: var(--amber); font-weight: 700; font-size: .95rem; margin: 0 0 .7rem; }

.media { margin: .8rem 0 0; }
.media video { width: 100%; max-width: 340px; border-radius: 10px; background: #000; }
.media__poster { max-width: 240px; border-radius: 10px; border: 1px solid var(--rule); }
.media__pending { font-size: .82rem; color: var(--paper-faint); margin-top: .4rem; }
/* [codex] Keep an accessible page control alongside native media controls. */
.media__toggle { font:inherit; color:var(--paper); background:var(--ink-2); border:1px solid var(--rule); border-radius:4px; min-height:44px; padding:.55rem 1rem; margin-top:.7rem; cursor:pointer; }
.media__toggle[hidden] { display:none; }
.media__status { font-size:.85rem; }
.media__status:empty { display:none; }

.review p { color: var(--paper-dim); }
.review blockquote {
  margin: 0 0 1rem; padding: .75rem .9rem;
  border-radius: 8px; background: var(--lift);
  color: var(--paper-faint); font-size: .88rem;
}

/* ── legal ───────────────────────────────────────────────────────────────── */
.legal h2 { margin-top: 2rem; }
.legal .address { color: var(--paper-dim); }
.legal ul { padding-left: 1.15rem; color: var(--paper-dim); }

@media (min-width: 40rem) {
  body { font-size: 1.1rem; }
  .btn { display: inline-block; width: auto; min-width: 15rem; }
  .bookcard img { width: 92px; }
}

/* [codex gpt-6-astra] Responsive discovery grid, preserving the existing homepage palette. */
.booklist { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:1rem; }
.bookcard { margin:0; flex-direction:column; height:100%; }
.bookcard__cover { display:flex; justify-content:center; width:100%; padding:1rem; background:var(--ink); border-radius:8px; }
.bookcard__cover img, .bookcard__cover .cover-card { width:110px; height:165px; object-fit:contain; }
.bookcard__intro { line-height:1.55; }
.bookcard h2 { margin:.35rem 0; }
.bookcard[hidden], .book-filters[hidden] { display:none; }
.book-filters { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.5rem 0 .75rem; }
.book-filters button { font:inherit; color:var(--paper); background:var(--ink-2); border:1px solid var(--rule); border-radius:999px; padding:.55rem 1rem; cursor:pointer; }
.book-filters button[aria-pressed="true"] { background:var(--amber); color:var(--ink); }
.book-filters button:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }
.latest { margin:2.5rem 0; }

/* [codex] Legal hub, readable policy pages and permanent mobile navigation. */
.site-head__nav { display:flex; justify-content:center; gap:1.5rem; margin-top:1rem; }
.site-head__nav a { padding:.35rem .5rem; }
.site-foot__legal { border-top:1px solid var(--rule); margin:1.5rem 0; padding-top:1.2rem; text-align:left; }
.site-foot__legal h2 { margin:0 0 1rem; font-size:1.35rem; }
.policy-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem 1rem; }
.policy-links a { padding:.35rem 0; font-size:.9rem; overflow-wrap:anywhere; }
.policy-links strong { font-weight:500; }
.legal-kicker { text-transform:uppercase; letter-spacing:.14em; color:var(--amber); font-size:.76rem; }
.legal-date, .legal-back { font-size:.85rem; color:var(--paper-dim); }
.legal p, .legal li { overflow-wrap:anywhere; }
.policy-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:2rem 0; }
.policy-cards a { display:block; border:1px solid var(--hairline); border-radius:12px; padding:1.2rem; background:var(--ink-2); text-decoration:none; }
.policy-cards a:hover { border-color:var(--amber); }
.policy-cards strong { display:block; font-family:var(--serif); font-size:1.2rem; }
.policy-cards span { display:block; color:var(--paper-dim); font-size:.9rem; line-height:1.55; margin-top:.5rem; }
.policy-contact { border-left:3px solid var(--amber); padding:.3rem 1rem; margin:2rem 0; background:var(--lift); }
@media (max-width:28rem) { .policy-cards { grid-template-columns:1fr; } }

/* [codex] LitFever editorial system: ink, paper, amber; no external fonts or effects. */
:root { --measure:72rem; --pad:clamp(1.25rem,4vw,3rem); }
body { font-size:1rem; }
.site-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem max(var(--pad),calc((100vw - 66rem)/2)); }
.brand__word { font-size:1.6rem; }
.site-head__nav { margin:0; gap:1.25rem; }
.site-head__nav a { color:var(--paper-dim); text-decoration:none; min-height:44px; display:flex; align-items:center; }
.site-head__nav a:hover { color:var(--amber); }
main { padding-top:3.5rem; padding-bottom:4rem; }
.editorial-opening { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; padding:1rem 0 4rem; border-bottom:1px solid var(--rule); }
.hero { text-align:left; padding:0; }
.hero .eyebrow { margin-bottom:1.75rem; }
.hero__word { font-size:clamp(2.65rem,5.2vw,4.5rem); line-height:1.1; letter-spacing:-.045em; margin:0 0 1.5rem; }
.hero__word em { color:var(--amber); font-style:normal; }
.hero__positioning { font-size:1.06rem; line-height:1.8; margin:0; max-width:28rem; }
.hero__actions { margin:1.75rem 0 1rem; }
.hero__footnote { font-size:.8rem; color:var(--paper-dim); }
.btn { border-radius:4px; padding:.8rem 1.25rem; min-height:44px; min-width:0; font-size:.93rem; }
.btn--ghost { background:none; border-color:var(--rule); }
.featured { padding:0; margin:0; border:0; border-radius:0; background:none; text-align:left; }
.featured__cover { display:flex; justify-content:center; align-items:center; min-height:290px; padding:1.8rem; background:var(--ink-3); border-bottom:2px solid var(--amber); text-decoration:none; }
.featured__cover img { width:150px; max-height:240px; object-fit:contain; box-shadow:9px 12px 18px rgba(0,0,0,.3); }
.featured__copy { padding:1.2rem 0 0; }
.featured__copy .eyebrow { font-size:.7rem; margin:0 0 .5rem; }
.featured__title { font-size:1.8rem; }
.featured__title a { color:var(--paper); text-decoration:none; }
.featured__author { font-size:.9rem; margin:.4rem 0 .8rem; }
.featured__copy > p:not(.eyebrow) { color:var(--paper-dim); font-size:.9rem; }
.text-link, .bookcard__action { display:inline-block; padding:.45rem 0; font-size:.9rem; font-weight:700; }
.latest { margin:3.5rem 0; }
.latest > h2, .page-head h1 { font-size:clamp(2rem,4vw,3rem); letter-spacing:-.03em; }
.latest > .note { font-size:1rem; }
.booklist { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.5rem; margin-top:2rem; }
.bookcard { display:grid; grid-template-columns:125px minmax(0,1fr); gap:1.3rem; padding:1.5rem 0; background:none; border:0; border-top:1px solid var(--rule); border-radius:0; align-items:start; }
.bookcard__cover { padding:0; background:none; justify-content:flex-start; border-radius:0; }
.bookcard__cover img { width:112px; height:168px; object-fit:contain; object-position:top; border-radius:0; }
.bookcard .eyebrow { margin:0 0 .7rem; font-size:.65rem; }
.bookcard h2 { margin:0 0 .4rem; font-size:1.3rem; line-height:1.3; }
.bookcard h2 a { color:var(--paper); text-decoration:none; }
.bookcard__author { font-size:.85rem; }
.bookcard .bookcard__intro { margin-top:.8rem; font-size:.88rem; }
.featured-offer { border-top:1px solid var(--rule); padding:1rem 0 2.5rem; }
.featured-offer .links { max-width:42rem; }
.editorial-note { max-width:44rem; border-left:2px solid var(--amber); padding:0 0 0 1.8rem; margin:3rem 0; }
.editorial-note h2 { font-size:1.7rem; }
.socials { display:grid; grid-template-columns:1fr 1fr; text-align:left; border-top:1px solid var(--rule); margin-top:3.5rem; padding-top:2rem; }
.socials h2 { margin:0; font-size:1.65rem; }
.socials > p { grid-column:1; margin:.5rem 0 0; color:var(--paper-dim); font-size:.9rem; }
.socials__list { grid-column:2; grid-row:1 / 3; justify-content:flex-end; align-content:center; gap:.7rem 1.2rem; }
.social-icon { width:20px; height:20px; flex:none; filter:invert(1); opacity:.88; }
.socials__list a, .site-foot__nav a { display:inline-flex; align-items:center; gap:.55rem; min-height:44px; color:var(--paper-dim); text-decoration:none; }
.socials__list a:hover, .site-foot__nav a:hover { color:var(--amber); }
.site-foot { max-width:72rem; padding-top:2rem; }
.site-foot__legal { margin:1.5rem 0; padding:1.5rem 0 .5rem; }
.policy-links { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem 2rem; }
.policy-links a { color:var(--paper-dim); min-height:44px; display:flex; align-items:center; text-decoration:none; }
.policy-links a:hover { color:var(--amber); text-decoration:underline; }
.fineprint, .fineprint--dim { color:var(--paper-dim); max-width:52rem; }
.legal { max-width:44rem; margin:auto; }
.legal .lede { font-size:1.13rem; }
.policy-cards a { border-radius:3px; }
.book__head { gap:2.5rem; padding:1rem 0 2.5rem; border-bottom:1px solid var(--rule); }
.book__cover { flex:none; }
.book__cover img { width:180px; }
.book__meta { max-width:43rem; }
.book__title { font-size:clamp(2rem,4.5vw,3.5rem); letter-spacing:-.035em; }
.book > .review { max-width:46rem; }
.excerpts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem 2.5rem; margin:3rem 0; }
.excerpts > h2, .excerpts > p { grid-column:1 / -1; margin:0; }
.excerpts > article, .excerpts > .excerpt { min-width:0; border-top:1px solid var(--rule); padding-top:1rem; }
.excerpt { border:0; background:none; padding:0; margin:1rem 0; }
.excerpt blockquote { font-size:1.15rem; }
.media video { display:block; width:100%; max-width:300px; border-radius:4px; }
.book > .links { border-top:1px solid var(--rule); padding-top:1.5rem; }
.book-filters button { border-radius:3px; min-height:44px; }
@media (max-width:52rem) {
  .editorial-opening { gap:2rem; }
  .booklist { grid-template-columns:1fr; gap:.5rem; }
  .socials { display:block; }
  .socials__list { justify-content:flex-start; margin-top:1rem; }
  .policy-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:38rem) {
  main { padding-top:2rem; }
  .site-head { padding:.7rem var(--pad); }
  .site-head__nav { gap:.65rem; font-size:.9rem; }
  .brand__word { font-size:1.35rem; }
  .brand__mark { width:34px; }
  .editorial-opening { grid-template-columns:1fr; padding-bottom:2rem; }
  .hero__word { font-size:2.85rem; }
  .featured { display:grid; grid-template-columns:110px minmax(0,1fr); gap:1rem; border-top:1px solid var(--rule); padding-top:1.5rem; }
  .featured__cover { min-height:0; padding:.8rem; }
  .featured__cover img { width:95px; }
  .featured__copy { padding:0; }
  .featured__title { font-size:1.4rem; }
  .featured__copy > p:not(.eyebrow) { font-size:.85rem; }
  .bookcard { grid-template-columns:94px minmax(0,1fr); gap:1rem; }
  .bookcard__cover img { width:90px; height:135px; }
  .book__head { gap:1.2rem; }
  .book__cover img { width:90px; }
  .book__title { font-size:1.9rem; }
  .book__head .btn { display:block; margin-top:.5rem; padding:.65rem; font-size:.8rem; }
  .excerpts { grid-template-columns:1fr; }
  .editorial-note { padding-left:1.1rem; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
