/* ===========================================================================
   audiobook.co.uk — design system
   ---------------------------------------------------------------------------
   Dark-first, sans throughout. Reasoning, so nobody undoes it by accident:

   - DARK, because cover art reads far better on a dark surface and because
     every listening app (Audible's own player, Spotify, Pocket Casts) is dark.
     It also puts clear water between us and the beige-and-serif book-blog look.
   - TEAL accent, because the space is taken: Audible owns orange, Libro.fm
     violet (#7F7EDB, measured), Spotify green, Storytel red. Teal is
     distinctive here and holds contrast on a dark ground.
   - GOLD is reserved for exactly one job — marking "our pick" on the recording
     comparison pages. If it starts appearing elsewhere it stops meaning
     anything.
   - SANS for everything. Bricolage Grotesque has enough character to carry
     headings; Inter is the most legible UI face available for long body text.

   Contrast: body text #E8ECF2 on #0F1319 is ~15:1, muted #98A2B0 is ~7:1,
   teal on the dark ground ~9:1 — all comfortably past WCAG AA.
   =========================================================================== */

:root {
    --bg:        #0F1319;
    --surface:   #171C24;
    --raised:    #1E242E;
    --line:      #2B323D;
    --line-soft: #222834;

    --ink:       #E8ECF2;
    --muted:     #98A2B0;
    --dim:       #6E7887;

    --accent:      #34D3B6;
    --accent-ink:  #06231D;
    --accent-soft: rgba(52, 211, 182, .12);

    --gold:      #F2C063;
    --warn:      #FF8A7A;

    --radius:    10px;
    --radius-lg: 14px;
    --wrap:      1080px;

    --sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

/* --- header --------------------------------------------------------------- */

.site-header {
    background: rgba(15, 19, 25, .92);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--line-soft);
    position: sticky; top: 0; z-index: 50;
    padding: 12px 0;
}
.site-header .wrap { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; }

.brand {
    font-family: var(--display);
    font-weight: 700; font-size: 21px; letter-spacing: -.02em;
    color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand span { color: var(--accent); }

.site-header nav { display: flex; gap: 4px; flex-wrap: wrap; }
.site-header nav a {
    font-size: 14.5px; color: var(--muted); text-decoration: none;
    padding: 6px 10px; border-radius: 8px; white-space: nowrap;
}
.site-header nav a:hover { color: var(--ink); background: var(--raised); }

/* --- search --------------------------------------------------------------- */

.search-wrap { margin-left: auto; position: relative; min-width: 200px; flex: 1 1 200px; max-width: 320px; }
.search-input {
    width: 100%; padding: 9px 12px 9px 34px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: 9px;
    /* 16px, not 14.5. iOS Safari zooms the viewport whenever a focused control
       computes under 16px, and does not zoom back out on blur — so tapping
       search on an iPhone left you panning an oversized page. This is the only
       form control on the site. */
    font-family: var(--sans); font-size: 16px;
}
.search-input::placeholder { color: var(--dim); }
.search-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-wrap::before {
    content: ""; position: absolute; left: 12px; top: 50%;
    width: 13px; height: 13px; margin-top: -7px; pointer-events: none;
    border: 2px solid var(--dim); border-radius: 50%;
    box-shadow: 6px 6px 0 -5px var(--dim);
}
.search-results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--raised); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; display: none;
    box-shadow: 0 18px 40px rgba(0,0,0,.5); max-height: 62vh; overflow-y: auto;
}
.search-results.open { display: block; }
.search-results a {
    display: block; padding: 9px 13px; text-decoration: none; color: var(--ink);
    border-bottom: 1px solid var(--line-soft); font-size: 14.5px;
}
.search-results a:last-child { border-bottom: 0; }
.search-results a:hover, .search-results a.active { background: var(--accent-soft); }
.search-results .kind {
    display: block; font-size: 11.5px; text-transform: uppercase;
    letter-spacing: .07em; color: var(--accent); margin-top: 1px;
}
.search-empty { padding: 12px 13px; color: var(--muted); font-size: 14px; }

/* --- typography ----------------------------------------------------------- */

main { padding: 40px 0 72px; }

h1 {
    font-family: var(--display);
    font-size: clamp(30px, 4.4vw, 42px); line-height: 1.12;
    letter-spacing: -.025em; margin: 0 0 14px; font-weight: 700;
}
h2 {
    font-family: var(--display);
    font-size: 23px; line-height: 1.25; letter-spacing: -.015em;
    margin: 42px 0 12px; font-weight: 600;
}
h3 { font-size: 17px; margin: 26px 0 8px; font-weight: 600; }

a { color: var(--accent); text-decoration-color: rgba(52,211,182,.35); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--accent); }

.lede { font-size: 19px; line-height: 1.55; color: var(--muted); margin: 0 0 28px; max-width: 68ch; }
p { max-width: 72ch; }
.meta { font-size: 13.5px; color: var(--muted); }

/* --- cover tiles ---------------------------------------------------------- */

.cover {
    position: relative; flex: 0 0 auto;
    width: 52px; height: 78px; border-radius: 5px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.07);
}
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-generated { padding: 5px; }
.cover-generated span {
    font-family: var(--display); font-size: 8.5px; line-height: 1.15;
    font-weight: 600; text-align: center; color: rgba(255,255,255,.94);
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
/* spine */
.cover-generated::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
    background: linear-gradient(90deg, rgba(0,0,0,.4), rgba(255,255,255,.08));
}
.cover-lg { width: 84px; height: 126px; border-radius: 6px; }
.cover-sm { width: 34px; height: 51px; border-radius: 4px; }
.cover-sm .cover-generated span, .cover-sm span { font-size: 6.5px; -webkit-line-clamp: 3; }
.cover-lg .cover-generated span, .cover-lg span { font-size: 11px; -webkit-line-clamp: 5; }

/* --- author portraits ----------------------------------------------------- */

.portrait {
    position: relative; flex: 0 0 auto; overflow: hidden;
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--raised);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-generated span {
    font-family: var(--display); font-weight: 700; font-size: 18px;
    color: rgba(255,255,255,.82); letter-spacing: .02em;
}
.portrait-lg { width: 104px; height: 104px; }
.portrait-lg .portrait-generated span, .portrait-lg span { font-size: 34px; }

/* Byline block: portrait beside the author line on a series page. */
.byline { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
.byline .who { font-size: 14.5px; color: var(--muted); min-width: 0; }
.byline .who strong { color: var(--ink); font-size: 16px; display: block; }
.note-inline { font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.credit {
    display: block; font-size: 10.5px; line-height: 1.4;
    color: var(--dim); margin-top: 3px;
}
.credit a { color: var(--dim); text-decoration-color: rgba(110,120,135,.5); }
.credit a:hover { color: var(--muted); }

/* --- cards ---------------------------------------------------------------- */

.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
@media (min-width: 640px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.cards a {
    display: flex; gap: 13px; align-items: center;
    padding: 13px; background: var(--surface);
    border: 1px solid var(--line-soft); border-radius: var(--radius);
    text-decoration: none; color: var(--ink);
    transition: border-color .12s ease, transform .12s ease, background .12s ease;
}
.cards a:hover {
    border-color: var(--accent); background: var(--raised);
    transform: translateY(-1px);
}
.cards strong { display: block; font-size: 15.5px; line-height: 1.3; font-weight: 600; }
/* Scoped to .cards until 2026-09-06, but span.sub is emitted inside .cmp table
   cells on seven pages too — where it lost its block display and ran on inline
   against the primary text. Style it wherever it appears. */
span.sub { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }

/* --- book list ------------------------------------------------------------ */

.booklist { list-style: none; padding: 0; margin: 18px 0 0; }
.booklist li {
    display: flex; gap: 13px; align-items: center;
    padding: 9px 2px; border-bottom: 1px solid var(--line-soft);
}
.booklist .bl-text { flex: 1 1 auto; min-width: 0; }
.booklist li:last-child { border-bottom: 0; }
.booklist .num {
    font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--dim);
    min-width: 2.4em; text-align: right; flex: 0 0 auto;
}
.booklist .year { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.booklist.plain li { display: block; }

/* --- callout / cta -------------------------------------------------------- */

.callout {
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius); padding: 4px 22px 18px; margin: 28px 0;
}
.callout h2 { margin-top: 18px; font-size: 19px; }

.cta {
    background: linear-gradient(180deg, var(--raised), var(--surface));
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 4px 24px 24px; margin: 48px 0 0;
}
.btn {
    display: inline-block; padding: 12px 22px; border-radius: 9px;
    font-weight: 600; font-size: 15.5px; text-decoration: none;
}
.btn-primary {
    background: var(--accent); color: var(--accent-ink);
    box-shadow: 0 6px 18px rgba(52,211,182,.16);
}
.btn-primary:hover { filter: brightness(1.08); }
.warn { color: var(--warn); font-size: 14px; }

/* --- tables --------------------------------------------------------------- */

.cmp-scroll { overflow-x: auto; margin: 20px 0; }
.cmp { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 620px; }
.cmp th, .cmp td {
    text-align: left; padding: 12px 14px;
    border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
.cmp thead th {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--muted); font-weight: 600; border-bottom-color: var(--line);
}
.cmp tr.is-pick { background: rgba(242,192,99,.06); }
.pick-badge {
    display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 20px;
    background: var(--gold); color: #2A1F06;
    font-size: 11px; font-weight: 700; letter-spacing: .03em; white-space: nowrap;
}

/* --- footer --------------------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--line-soft); background: var(--surface);
    padding: 30px 0 46px; margin-top: 64px;
    font-size: 14px; color: var(--muted);
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }
/* Full width and quieter. The generic `p { max-width: 72ch }` measure is right
   for prose but wrong here — this is boilerplate, not something anyone reads
   line by line, so a narrow column just makes it look like body copy. */
.disclosure {
    font-size: 12px; line-height: 1.55; color: var(--dim);
    max-width: none; margin: 0 0 18px;
}
.small { font-size: 12.5px; color: var(--dim); }

/* --- misc ----------------------------------------------------------------- */

section { margin-bottom: 8px; }
code {
    background: var(--raised); padding: 1px 6px; border-radius: 5px;
    font-size: .9em; color: var(--accent);
}
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* --- Apple Books price line -------------------------------------------- */
/* Deliberately quiet. A price is useful but it is not why anyone opened the
   page, and 40+ of them down a series listing must not shout. */
.price {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    margin-left: 10px;
    font-size: 13px;
    vertical-align: baseline;
}
.price a {
    color: var(--dim);
    text-decoration: none;
    border-bottom: 1px dotted var(--line);
    white-space: nowrap;
}
.price a:hover { color: var(--ink); border-bottom-color: currentColor; }
.price .price-sub {
    font-size: 12px;
    color: var(--dim);
    opacity: .8;
    font-variant-numeric: tabular-nums;
}
.cmp .price { margin-left: 0; margin-top: 4px; display: flex; }
@media (max-width: 620px) {
    .price { margin-left: 0; margin-top: 3px; display: flex; }
}

/* --- consent banner ------------------------------------------------------ */
/* Fixed to the bottom rather than a full-screen overlay: analytics consent is
   not important enough to block the page, and a modal that traps focus for a
   cookie is its own accessibility problem. */
.consent {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--panel); border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(0,0,0,.28);
}
.consent-inner {
    max-width: 1100px; margin: 0 auto; padding: 14px 20px;
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.consent-inner p { margin: 0; flex: 1 1 340px; font-size: 14px; color: var(--dim); }
.consent-inner a { color: var(--ink); }
/* Both buttons the same size and weight — declining must be exactly as easy as
   accepting, which is the part regulators actually look at. */
.consent-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.consent-actions .btn { white-space: nowrap; }
@media (max-width: 620px) {
    .consent-inner { padding: 12px 16px; }
    .consent-actions { width: 100%; }
    .consent-actions .btn { flex: 1 1 0; text-align: center; }
}