/*
Theme Name:  Tamil Books PDF
Theme URI:   https://tamilbookspdf.com/
Author:      tamilbookspdf
Description: A reading library for Tamil books. Written for this site rather than adapted from a movie theme: Tamil first typography, covers that keep their whole title, reading placed ahead of downloading, and a shelf the reader actually owns. The books post type, the genres taxonomy and the download flow live in the tamilbookspdf-core plugin, deliberately, so this theme can be replaced again one day without taking the library down with it.
Version:     2.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License:     GPL-2.0-or-later
Text Domain: tamilbookspdf
Tags:        library, books, custom-menu, translation-ready, accessibility-ready
*/

/* ==========================================================================
   Tokens

   From the 2026-08-26 design handoff, matched exactly. Warm paper, one accent,
   one dark. The design is committed to light: there is no dark variant of the
   page, only dark panels used deliberately as punctuation.
   ========================================================================== */

:root {
    --paper:          #F2EBDC;
    --card:           #FFFCF6;

    --ink:            #191510;
    --ink-body:       #4E4537;
    --ink-2:          #6B6153;
    --ink-3:          #7B7161;
    --ink-4:          #857A69;
    --ink-placeholder:#8A7F6E;

    --line:           rgba(25, 21, 16, .12);
    --line-strong:    rgba(25, 21, 16, .18);

    --accent:         #C0442A;
    --accent-hover:   #9C3320;
    --link:           #B03D24;
    --link-hover:     #862914;

    --dark:           #1C1811;
    --dark-deep:      #14110C;
    --dark-bar:       #1A1610;
    --dark-rail:      #171309;

    --on-dark:        #F3EADA;
    --on-dark-2:      #B8AC98;
    --on-dark-3:      #9C8E78;
    --on-dark-4:      #7E735F;
    --accent-on-dark: #E4643F;

    --gold:           #E4A05F;
    --cover-bg:       #2A2119;
    --page:           #FBF6EC;
    --selection:      #F2C9A6;

    --chip-warm-bg:   #EFE1CE;
    --chip-warm-ink:  #8E4227;
    --chip-cool-bg:   #E3E7DC;
    --chip-cool-ink:  #4A5C46;

    --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
    --sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --tamil: "Noto Serif Tamil", Georgia, serif;

    --wrap:   1240px;
    --gutter: 16px;

    --shadow-cover:  0 14px 26px -16px rgba(25, 21, 16, .75);
    --shadow-cover-lg: 0 34px 60px -26px rgba(25, 21, 16, .8);
    --shadow-float:  0 18px 36px -20px rgba(25, 21, 16, .6);
    --shadow-search: 0 12px 30px -18px rgba(25, 21, 16, .5);
    --shadow-page:   0 40px 80px -30px rgba(0, 0, 0, .85);

    /* A hit target never smaller than this. The old theme had 74 of 83 links
       on a book page under 24px. */
    --tap: 44px;
}

@media (min-width: 1040px) {
    :root { --gutter: 32px; }
}

/* ==========================================================================
   Reset and base
   ========================================================================== */

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

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink-body);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}

/* The wash sits on a fixed pseudo element so it does not scroll away or repeat
   down a 6,000px archive. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(120% 70% at 50% -10%, rgba(255, 252, 244, .85), transparent 60%),
        radial-gradient(90% 60% at 100% 100%, rgba(192, 68, 42, .05), transparent 65%);
}

::selection { background: var(--selection); color: var(--ink); }

h1, h2, h3, h4 {
    margin: 0;
    color: var(--ink);
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.015em;
    line-height: 1.02;
    font-feature-settings: "liga" 1, "clig" 1;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

[hidden] { display: none !important; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
    border-radius: 3px;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--ink);
    color: var(--paper);
    padding: 12px 18px;
    border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.site-main { display: block; }

/* Small text roles used all over the design. */
.eyebrow {
    font: 600 11.5px/1 var(--sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin: 0;
}
.meta { font: 500 11px/1.4 var(--sans); color: var(--ink-4); }

.tamil { font-family: var(--tamil); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: var(--tap);
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--card);
    color: var(--ink);
    font: 600 14px/1 var(--sans);
    text-align: center;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover, .btn:focus-visible { text-decoration: none; }

.btn--accent { background: var(--accent); border-color: var(--accent); color: #FFF7EA; }
.btn--accent:hover, .btn--accent:focus-visible { background: var(--accent-hover); border-color: var(--accent-hover); color: #FFF7EA; }

.btn--outline { background: var(--card); border-color: var(--line-strong); color: var(--ink); }
.btn--outline:hover, .btn--outline:focus-visible { border-color: var(--accent); color: var(--accent); }

.btn--ink { background: var(--ink); border-color: var(--ink); color: #F7F2E8; }
.btn--ink:hover, .btn--ink:focus-visible { background: var(--accent); border-color: var(--accent); color: #FFF7EA; }

.btn--tall { min-height: 52px; font-size: 15px; }
.btn--block { width: 100%; }

.btn__icon { flex: none; }

/* A pill, used for chips and small controls. */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: rgba(255, 252, 246, .6);
    color: #4A4238;
    font: 500 13px/1 var(--sans);
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease;
}
a.pill:hover, button.pill:hover, .pill:focus-visible { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pill[aria-pressed="true"], .pill.is-on { background: var(--ink); border-color: var(--ink); color: #F7F2E8; }

/* Genre and format labels on a book. Warm for subject, cool for format. */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--chip-warm-bg);
    color: var(--chip-warm-ink);
    font: 600 10.5px/1 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.tag:hover { text-decoration: none; filter: brightness(.97); }
.tag--cool { background: var(--chip-cool-bg); color: var(--chip-cool-ink); }

/* ==========================================================================
   The cover

   The single most repeated element on the site, and the one thing that has to
   look right whether or not there is an image. Four layers:

     1. a dark base, so a slow image never flashes white;
     2. a typographic fallback underneath, which becomes the cover for the two
        books in the library that have no image at all;
     3. the image;
     4. a spine gradient down the left edge, which is what makes a rectangle
        read as a book.
   ========================================================================== */

.cover {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    border-radius: 4px;
    overflow: hidden;
    background: var(--cover-bg);
    box-shadow: var(--shadow-cover);
}

.cover__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 11px;
    color: #E8DFCF;
    text-align: left;
}
.cover__brand {
    font: 600 8px/1 var(--sans);
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .72;
}
.cover__name {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.14;
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cover__by {
    font: 600 8.5px/1.2 var(--sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .8;
}

.cover__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover::after {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 7px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .4), transparent);
    pointer-events: none;
}

.cover--lg { border-radius: 6px; box-shadow: var(--shadow-cover-lg); }
.cover--lg .cover__name { font-size: 30px; -webkit-line-clamp: 6; }
.cover--lg .cover__fallback { padding: 22px 20px; }
.cover--lg .cover__brand { font-size: 10px; }
.cover--lg .cover__by { font-size: 10px; }

/* ==========================================================================
   Book cards, rails and grids
   ========================================================================== */

.book-card { position: relative; display: block; min-width: 0; }
.book-card .cover { transition: transform .18s ease; }
.book-card:hover .cover { transform: translateY(-4px); }

.book-card__title {
    display: block;
    margin: 10px 0 0;
    color: var(--ink);
    font: 600 13px/1.3 var(--sans);
    letter-spacing: 0;
    font-family: var(--sans);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.book-card:hover .book-card__title { color: var(--accent); }
.book-card__author { display: block; margin-top: 3px; color: var(--ink-3); font: 400 11.5px/1.35 var(--sans); }
.book-card__meta { display: block; margin-top: 4px; color: var(--ink-4); font: 500 10.5px/1.35 var(--sans); }

/* The whole card is one link, so a screen reader hears one properly named link
   per book rather than two unnamed ones. */
.book-card > a { color: inherit; }
.book-card > a:hover { text-decoration: none; }

/* A box the size of the cover, so anything laid on the cover lands on it. */
.book-card__tools {
    position: absolute;
    inset-inline: 0;
    top: 0;
    aspect-ratio: 2 / 3;
    pointer-events: none;
}

.book-card__save {
    position: absolute;
    right: 7px;
    bottom: 7px;
    z-index: 3;
    pointer-events: auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 252, 246, .92);
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(25, 21, 16, .35);
}
.book-card__save:hover { background: var(--card); }
.book-card__save[aria-pressed="true"] { background: var(--accent); color: #FFF7EA; }

.book-card__progress {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    height: 3px;
    background: rgba(255, 255, 255, .22);
}
.book-card__progress i { display: block; height: 100%; background: var(--accent-on-dark); }

/*
   A rail scrolls sideways; a grid wraps. Rails are for "here is a taste of this
   shelf", grids are for "here is the shelf".
*/
.rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 124px;
    gap: 14px;
    margin: 0;
    padding: 0 0 8px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
.rail > li { scroll-snap-align: start; }

.book-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 1040px) {
    .rail { grid-auto-columns: 164px; gap: 22px; }
    .book-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; }
    .book-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .book-card__title { font-size: 14.5px; }
    .book-card__author { font-size: 12.5px; }
    .book-card__meta { font-size: 11px; }
}

/* ==========================================================================
   Section headings

   Every row on the site uses this: heading and optional subtitle on the left,
   a link on the right, then a hairline under the whole block.
   ========================================================================== */

.section { padding-top: 34px; }

.section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
}
.section__title { font-size: 25px; line-height: 1; }
.section__sub { margin: 6px 0 0; color: var(--ink-3); font: 400 13px/1.4 var(--sans); }
.section__link {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--link);
    font: 500 13px/1 var(--sans);
    white-space: nowrap;
}
.section__link svg { transition: transform .16s ease; }
.section__link:hover { text-decoration: none; }
.section__link:hover svg { transform: translateX(3px); }

@media (min-width: 1040px) {
    .section { padding-top: 38px; }
    .section__title { font-size: 30px; }
    .section__sub { font-size: 14px; }
    .section__head { margin-bottom: 20px; }
}

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(242, 235, 220, .92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(25, 21, 16, .1);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.site-header__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-block: 12px;
}

.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { text-decoration: none; color: var(--ink); }
.brand__tile {
    width: 34px; height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--accent);
    color: #FFF7EA;
    font-family: var(--tamil);
    font-size: 19px;
    line-height: 1;
    padding-bottom: 2px;
}
.brand__name { display: block; font: 600 15px/1 var(--sans); letter-spacing: -.01em; }
.brand__tag {
    display: block;
    margin-top: 2px;
    font: 400 10px/1 var(--sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.site-nav { display: none; }
.site-nav ul { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.site-nav a { color: var(--ink); font: 500 14px/1 var(--sans); }
.site-nav a:hover { color: var(--accent); text-decoration: none; }

.site-search { flex: 1; min-width: 0; margin-left: auto; }
.site-search__field {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 6px 0 14px;
    background: var(--card);
    border: 1px solid rgba(25, 21, 16, .14);
    border-radius: 20px;
}
.site-search__field:focus-within { border-color: var(--accent); }
.site-search__field svg { flex: none; color: #8A8073; }
.site-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font: 400 13.5px/1 var(--sans);
    color: var(--ink);
}
.site-search input::placeholder { color: var(--ink-placeholder); }
.site-search input:focus { outline: none; }
/* The header's own submit is a bare glyph. `:not(.btn)` matters: the hero uses
   the same field markup with a real accent button inside it, and without this
   the more specific element selector stripped that button's fill. */
.site-search button:not(.btn) {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ink-2);
    cursor: pointer;
}
.site-search button:not(.btn):hover { color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.header-actions .sign-in { display: none; color: #4A4238; font: 500 13.5px/1 var(--sans); }
.header-actions .sign-in:hover { color: var(--accent); text-decoration: none; }
.header-actions .btn { min-height: 38px; padding-inline: 16px; border-radius: 19px; font-size: 13.5px; }

.icon-btn {
    display: grid;
    place-items: center;
    width: var(--tap); height: var(--tap);
    flex: none;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
}
.icon-btn:hover { color: var(--accent); }

@media (max-width: 1039px) {
    /* Phones get the search on its own row rather than a magnifier that hides
       the one thing most visits are here to do. */
    .site-header__bar { flex-wrap: wrap; gap: 10px; }
    .site-search { order: 3; flex-basis: 100%; margin-left: 0; }
    .header-actions .btn span { display: none; }
}

@media (min-width: 1040px) {
    .site-header__bar { gap: 28px; padding-block: 14px; }
    .site-nav { display: block; }
    .site-search { max-width: 340px; }
    .header-actions .sign-in { display: inline; }
    .nav-toggle { display: none; }
}

/* The menu the toggle opens on a phone. `.is-open` is what theme.js sets. */
@media (max-width: 1039px) {
    .site-nav.is-open {
        display: block;
        flex-basis: 100%;
        order: 4;
        padding-block: 4px 8px;
        border-top: 1px solid var(--line);
    }
    .site-nav.is-open ul { flex-direction: column; align-items: stretch; gap: 0; }
    .site-nav.is-open a { display: flex; align-items: center; min-height: var(--tap); }
}

/* ==========================================================================
   The mobile tab bar

   Fixed to the bottom on every screen except the reader. The page carries
   padding-bottom so nothing is ever trapped underneath it.
   ========================================================================== */

.tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(20, 17, 12, .97);
    backdrop-filter: blur(10px);
    padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    color: var(--on-dark-3);
    font: 500 10px/1 var(--sans);
    letter-spacing: .04em;
}
.tabbar a:hover, .tabbar a[aria-current="page"] { color: var(--on-dark); text-decoration: none; }
.tabbar a[aria-current="page"] svg { color: var(--accent-on-dark); }

body.has-tabbar { padding-bottom: 104px; }

@media (min-width: 1040px) {
    .tabbar { display: none; }
    body.has-tabbar { padding-bottom: 0; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    margin-top: 56px;
    background: var(--dark-deep);
    color: var(--on-dark-2);
    padding-block: 40px 20px;
}
.site-footer__cols { display: grid; gap: 30px; }
.site-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.site-footer__brand .brand__tile { background: var(--accent); }
.site-footer__brand span { color: var(--on-dark); font: 600 15px/1 var(--sans); }
.site-footer__blurb { color: var(--on-dark-2); font: 400 13.5px/1.6 var(--sans); max-width: 42ch; }
.site-footer__dmca { display: block; margin-top: 14px; color: var(--on-dark-4); font: 500 11px/1.5 var(--sans); }

.site-footer h2 {
    margin: 0 0 12px;
    color: var(--on-dark-3);
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { display: inline-flex; align-items: center; min-height: 32px; color: var(--on-dark-2); font: 400 13.5px/1 var(--sans); }
.site-footer a:hover { color: var(--on-dark); text-decoration: none; }

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    justify-content: space-between;
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: var(--on-dark-4);
    font: 400 12px/1.5 var(--sans);
}

@media (min-width: 1040px) {
    .site-footer__cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
}

/* ==========================================================================
   Home: the hero
   ========================================================================== */

.hero { padding-block: 34px 26px; }
.hero__grid { display: grid; gap: 34px; align-items: center; }

.hero__eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.hero__eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.hero__eyebrow span {
    font: 600 11.5px/1 var(--sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.hero__overline { font-family: var(--tamil); font-size: 17px; color: #B0552F; margin-bottom: 10px; }

.hero__title {
    margin: 0 0 16px;
    font-size: 42px;
    line-height: 1.02;
    text-wrap: balance;
}
.hero__lede { margin: 0 0 24px; max-width: 470px; color: var(--ink-body); font: 400 15px/1.62 var(--sans); }

.hero__search { max-width: 520px; }
.hero__search .site-search__field {
    height: 54px;
    padding: 0 8px 0 18px;
    border-radius: 27px;
    border-color: rgba(25, 21, 16, .16);
    box-shadow: var(--shadow-search);
}
.hero__search input { font-size: 15px; }
.hero__search .btn { min-height: 42px; padding-inline: 20px; border-radius: 21px; }

.hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }

/*
   The three covers.

   Real books, the most read ones, fanned. Kept out of the accessibility tree:
   the same books appear as proper links further down the page, so announcing
   them here would only repeat.
*/
.hero__fan { display: none; }

@media (min-width: 1040px) {
    .hero { padding-block: 56px 40px; }
    .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 40px; }
    .hero__title { font-size: 70px; line-height: .98; margin-bottom: 18px; }
    .hero__lede { font-size: 17px; line-height: 1.55; margin-bottom: 28px; }
    .hero__overline { font-size: 19px; }

    .hero__fan {
        display: block;
        position: relative;
        height: 430px;
    }
    .hero__fan::before {
        content: "";
        position: absolute;
        inset: -10% -6%;
        background: radial-gradient(58% 52% at 50% 46%, rgba(255, 252, 244, .9), transparent 70%);
        pointer-events: none;
    }
    .hero__fan figure {
        position: absolute;
        top: 50%;
        margin: 0;
        border-radius: 5px;
    }
    .hero__fan figure:nth-child(1) { left: 4%;  width: 172px; transform: translateY(-50%) rotate(-7deg); }
    .hero__fan figure:nth-child(2) { left: 31%; width: 196px; transform: translateY(-54%); z-index: 2; }
    .hero__fan figure:nth-child(3) { left: 60%; width: 168px; transform: translateY(-50%) rotate(7deg); }
    .hero__fan .cover { box-shadow: var(--shadow-cover-lg); }

    .hero__note {
        position: absolute;
        left: 8%;
        bottom: -14px;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: var(--shadow-float);
    }
    .hero__note svg { color: var(--accent); flex: none; }
    .hero__note b { display: block; color: var(--ink); font: 600 13px/1.2 var(--sans); }
    .hero__note span { display: block; margin-top: 3px; color: var(--ink-3); font: 400 11.5px/1.3 var(--sans); }
}

/* ==========================================================================
   Home: continue reading
   ========================================================================== */

.continue {
    margin-top: 26px;
    padding: 20px;
    background: var(--dark);
    border-radius: 16px;
    color: var(--on-dark);
}
.continue__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.continue__head h2 { color: var(--on-dark); font-size: 22px; }
.continue__head a { color: var(--on-dark-3); font: 500 12.5px/1 var(--sans); }
.continue__head a:hover { color: var(--on-dark); text-decoration: none; }

.continue__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.continue__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    color: var(--on-dark);
    transition: background .16s ease;
}
.continue__item:hover { background: rgba(255, 255, 255, .1); text-decoration: none; color: var(--on-dark); }
.continue__item .cover { width: 40px; flex: none; box-shadow: none; }
.continue__body { flex: 1; min-width: 0; }
.continue__title {
    display: block;
    font: 600 14px/1.3 var(--sans);
    color: var(--on-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.continue__where { display: block; margin-top: 4px; color: var(--on-dark-3); font: 400 11.5px/1 var(--sans); }
.continue__bar { margin-top: 8px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.continue__bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent-on-dark); }
.continue__chev { flex: none; color: var(--on-dark-4); }

@media (min-width: 1040px) {
    .continue { padding: 26px 28px; }
    .continue__head h2 { font-size: 26px; }
    .continue__list { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .continue__chev { display: none; }
}

/* ==========================================================================
   Home: genre tiles, writers, journal
   ========================================================================== */

.tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }

.tile {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 16px 16px 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    min-height: 104px;
}
.tile:hover { border-color: var(--accent); text-decoration: none; color: var(--ink); }
.tile__tamil { display: block; font-family: var(--tamil); font-size: 13px; color: #B0552F; }
.tile__name { display: block; margin-top: 4px; font: 600 16px/1.2 var(--sans); }
.tile__count { display: block; margin-top: 6px; color: var(--ink-3); font: 400 12px/1 var(--sans); }
.tile__ghost {
    position: absolute;
    right: -6px;
    bottom: -26px;
    font-family: var(--serif);
    font-size: 76px;
    line-height: 1;
    color: rgba(25, 21, 16, .05);
    pointer-events: none;
}

.writer-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 14px; margin: 0; padding: 0 0 8px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.writer-card { display: block; text-align: center; color: var(--ink); }
.writer-card:hover { text-decoration: none; color: var(--accent); }
.writer-card__mono {
    width: 64px; height: 64px;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #EDE3D0;
    color: var(--chip-warm-ink);
    font-family: var(--serif);
    font-size: 24px;
}
.writer-card__name { display: block; font: 600 13px/1.3 var(--sans); }
.writer-card__count { display: block; margin-top: 3px; color: var(--ink-4); font: 400 11px/1 var(--sans); }

.journal-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.journal-card {
    display: block;
    padding: 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
}
.journal-card:hover { border-color: var(--accent); text-decoration: none; color: var(--ink); }
.journal-card__date { display: block; font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.journal-card__title { margin: 10px 0 0; font-size: 22px; line-height: 1.14; }
.journal-card__excerpt {
    margin: 10px 0 0;
    color: var(--ink-body);
    font: 400 13.5px/1.6 var(--sans);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.journal-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--link); font: 500 13px/1 var(--sans); }

@media (min-width: 1040px) {
    .tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tile { min-height: 128px; padding: 20px 20px 22px; }
    .writer-rail { grid-auto-columns: 148px; gap: 18px; }
    .journal-list { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-block: 16px 4px;
    color: var(--ink-3);
    font: 400 12.5px/1 var(--sans);
}
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span[aria-hidden] { color: var(--ink-4); }

/* ==========================================================================
   Single book
   ========================================================================== */

.book { display: grid; gap: 26px; padding-top: 8px; }

.book__aside { display: grid; gap: 12px; justify-items: center; }
.book__cover { width: 186px; }
.book__actions { display: grid; gap: 10px; width: 100%; max-width: 320px; }
.book__split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.book__dmca { color: var(--ink-4); font: 400 11px/1.5 var(--sans); text-align: center; max-width: 320px; }

.book__tags { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 14px; }
.book__title { font-size: 38px; line-height: 1; }
.book__tamil { margin-top: 8px; font-family: var(--tamil); font-size: 17px; color: var(--ink-2); }
.book__byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; color: var(--ink-2); font: 400 14px/1 var(--sans); }
.book__byline a { font-weight: 500; }
.book__byline .dot { color: var(--ink-4); }
/* The first paragraph of the description is the lead. */
.book__main .entry-content { margin-top: 18px; }
.book__main .entry-content > p:first-of-type { color: var(--ink-body); font-size: 15px; line-height: 1.62; }

/* The header block is centred on a phone; the body copy is not. Eight lines of
   centred prose is hard to read and the design does not ask for it. */
.book__main { text-align: center; }
.book__main .entry-content,
.book__main .facts,
.book__main .author-panel { text-align: left; }

/*
   The facts grid.

   A 1px gap over the hairline colour, so the gaps themselves read as rules and
   there is no border to fight with on the outside.
*/
.facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 24px 0 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    text-align: left;
}

/*
   The rules are drawn by each cell, not by a gap over a coloured background.
   A gap only works when the last row is full, and this grid is built from
   whatever facts a book actually has: six on most books, four on some. With a
   background behind it, the missing cells showed as a solid block of hairline
   colour.
*/
.facts > div {
    padding: 12px 14px;
    box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}
.facts dt {
    margin: 0 0 5px;
    color: var(--ink-4);
    font: 600 10px/1 var(--sans);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.facts dd { margin: 0; color: var(--ink); font: 500 13.5px/1.35 var(--sans); }
.facts dd a { font-weight: 500; }

.author-panel {
    display: flex;
    gap: 16px;
    margin-top: 26px;
    padding: 20px;
    background: var(--dark);
    border-radius: 14px;
    color: var(--on-dark-2);
    text-align: left;
}
.author-panel__mono {
    flex: none;
    width: 56px; height: 56px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: var(--gold);
    font-family: var(--serif);
    font-size: 24px;
}
.author-panel h2 { color: var(--on-dark); font-size: 21px; }
.author-panel p {
    margin: 8px 0 0;
    color: var(--on-dark-2);
    font: 400 13.5px/1.6 var(--sans);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.author-panel a { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--accent-on-dark); font: 500 13px/1 var(--sans); }

/* The bar that follows the reader up the page on a phone. */
.action-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 56px;
    z-index: 65;
    display: flex;
    gap: 10px;
    padding: 10px var(--gutter);
    background: rgba(242, 235, 220, .96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
}
.action-bar .btn { flex: 1; }
.action-bar .btn--icon { flex: none; width: var(--tap); padding: 0; }
body.has-action-bar { padding-bottom: 170px; }

@media (min-width: 1040px) {
    .book { grid-template-columns: 320px minmax(0, 1fr); gap: 48px; padding-top: 12px; }
    .book__aside { position: sticky; top: 112px; align-self: start; justify-items: stretch; }
    .book__cover { width: 320px; }
    .book__actions { max-width: none; }
    .book__dmca { text-align: left; max-width: none; }
    .book__main { text-align: left; }
    .book__tags { justify-content: flex-start; }
    .book__byline { justify-content: flex-start; }
    .book__title { font-size: 56px; line-height: 1; }
    .book__tamil { font-size: 20px; }
    .book__main .entry-content > p:first-of-type { font-size: 18px; line-height: 1.55; }
    .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .author-panel { padding: 24px 26px; gap: 20px; }
    .action-bar { display: none; }
    body.has-action-bar { padding-bottom: 0; }
}

/* The book's own description, from the database. */
.entry-content { color: var(--ink-body); font: 400 15px/1.7 var(--sans); }
.entry-content h2, .entry-content h3 { margin: 1.6em 0 .5em; }
.entry-content h2 { font-size: 24px; }
.entry-content h3 { font-size: 20px; }
.entry-content :is(ul, ol) { padding-inline-start: 1.3em; }
.entry-content img { border-radius: 8px; }

/* ==========================================================================
   Dark hero, shared by the genre and author archives
   ========================================================================== */

.term-hero {
    position: relative;
    overflow: hidden;
    background: var(--dark);
    color: var(--on-dark);
}
.term-hero .breadcrumb { color: var(--on-dark-3); }
.term-hero .breadcrumb a { color: var(--on-dark-3); }
.term-hero .breadcrumb a:hover { color: var(--on-dark); }

.term-hero__inner { position: relative; z-index: 1; display: grid; gap: 22px; padding-block: 8px 30px; }
.term-hero__tamil { font-family: var(--tamil); font-size: 16px; color: var(--gold); }
.term-hero__title { margin: 8px 0 0; color: var(--on-dark); font-size: 38px; line-height: 1; }
.term-hero__desc { margin: 14px 0 0; max-width: 62ch; color: var(--on-dark-2); font: 400 14.5px/1.62 var(--sans); }

.term-stats { display: flex; flex-wrap: wrap; gap: 26px; margin: 0; padding: 0; list-style: none; }
.term-stats b { display: block; font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--on-dark); }
.term-stats span { display: block; margin-top: 6px; color: var(--on-dark-3); font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }

/* The giant initial that bleeds off an author hero. */
.term-hero__ghost {
    position: absolute;
    right: -2%;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--serif);
    font-size: 200px;
    line-height: .8;
    color: rgba(228, 160, 95, .07);
    pointer-events: none;
    user-select: none;
}

.term-hero__id { display: flex; align-items: center; gap: 16px; }
.term-hero__mono {
    flex: none;
    width: 76px; height: 76px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: var(--gold);
    font-family: var(--serif);
    font-size: 32px;
}
.term-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.term-hero .btn--accent { background: var(--accent-on-dark); border-color: var(--accent-on-dark); color: var(--dark); }
.term-hero .btn--accent:hover { background: #F07A55; border-color: #F07A55; color: var(--dark); }
.term-hero .btn--outline { background: transparent; border-color: rgba(255, 255, 255, .22); color: var(--on-dark); }
.term-hero .btn--outline:hover { border-color: var(--on-dark); color: var(--on-dark); }

@media (min-width: 1040px) {
    .term-hero__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; padding-block: 10px 40px; }
    .term-hero__title { font-size: 60px; }
    .term-hero__desc { font-size: 15.5px; }
    .term-hero__ghost { font-size: 260px; right: 2%; }
    .term-hero__mono { width: 120px; height: 120px; font-size: 52px; }
    .term-stats { gap: 40px; }
}

/* ==========================================================================
   Genre archive: filters and results
   ========================================================================== */

.archive-layout { display: grid; gap: 22px; padding-top: 22px; }

.filters { display: grid; gap: 18px; }
.filters__group { display: grid; gap: 10px; }
.filters__label { font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.filters__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filters__rule { height: 1px; background: var(--line); }
.filters__card {
    padding: 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.filters__card p { margin: 6px 0 10px; color: var(--ink-3); font: 400 12.5px/1.5 var(--sans); }

.result-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.result-bar__count { color: var(--ink-2); font: 400 13px/1 var(--sans); }
.result-bar__count strong { color: var(--ink); font-weight: 600; }
.result-bar__sorts { display: flex; flex-wrap: wrap; gap: 8px; }
.result-bar__sorts .pill { font-size: 12.5px; padding: 6px 12px; }

.load-more { display: flex; justify-content: center; padding-block: 30px; }
.load-more .btn { min-width: 220px; }

/*
   On a phone the filters are a sticky scrolling row rather than a panel.

   The first attempt used a <details> that was open on desktop and collapsed on
   a phone. It cannot be done that way: a browser hides everything inside a
   closed <details> itself, so hiding the summary on desktop left a column with
   nothing in it. There are only five chips here, so they simply show.
*/
@media (max-width: 1039px) {
    .filters {
        position: sticky;
        top: 62px;
        z-index: 50;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-inline: calc(var(--gutter) * -1);
        padding: 10px var(--gutter);
        background: rgba(242, 235, 220, .95);
        backdrop-filter: blur(10px);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .filters::-webkit-scrollbar { display: none; }
    .filters__group,
    .filters__card { display: flex; align-items: center; gap: 8px; flex: none; padding: 0; border: 0; background: none; }
    .filters__chips { flex-wrap: nowrap; }
    .filters__label { white-space: nowrap; }
    .filters__card p { display: none; }
    .filters__rule { width: 1px; height: 22px; flex: none; }
    .filters .pill { white-space: nowrap; }
}

@media (min-width: 1040px) {
    .archive-layout { grid-template-columns: 236px minmax(0, 1fr); gap: 40px; padding-top: 30px; }
    .filters { position: sticky; top: 112px; align-self: start; }
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-block: 30px; }
.pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--tap); min-height: var(--tap); padding-inline: 12px;
    border: 1px solid var(--line-strong); border-radius: 10px;
    background: var(--card); color: var(--ink-body); font: 500 14px/1 var(--sans);
}
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #F7F2E8; }
.pagination .dots { border-color: transparent; background: none; }

/* ==========================================================================
   The download gate
   ========================================================================== */

.gate-page { max-width: 560px; margin-inline: auto; padding-block: 40px 16px; text-align: center; }

.tbp-gate__label { display: block; font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.tbp-gate__title { display: block; margin-top: 10px; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); }

.tbp-gate__count { margin: 28px 0 6px; }
.tbp-gate__dial { position: relative; display: inline-grid; place-items: center; width: 112px; height: 112px; }
.tbp-gate__ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.tbp-gate__ringTrack { stroke: var(--line-strong); }
.tbp-gate__ringFill { stroke: var(--accent); transition: stroke-dashoffset .95s linear; }
.tbp-gate__num { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.tbp-gate__hint { margin: 14px auto 0; max-width: 34ch; color: var(--ink-3); font: 400 13.5px/1.5 var(--sans); }

.tbp-gate__action { min-width: 250px; animation: tbp-gate-in .35s ease-out both; }
@keyframes tbp-gate-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .tbp-gate__action { animation: none; }
    .tbp-gate__ringFill { transition: none; }
}

.tbp-gate__none, .tbp-gate__noscript { color: var(--ink-3); font: 400 13.5px/1.6 var(--sans); }
.tbp-gate__noscript { margin-top: 22px; }
.tbp-gate__back { margin-top: 20px; font-size: 13px; }

/* ==========================================================================
   The reader
   ========================================================================== */

.reader { background: var(--dark-deep); color: var(--on-dark); min-height: 100vh; display: flex; flex-direction: column; }
.reader__bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--dark-bar);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.reader__back { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; color: var(--on-dark-2); }
.reader__back:hover { background: rgba(255, 255, 255, .07); color: var(--on-dark); text-decoration: none; }
.reader__id { flex: 1; min-width: 0; }
.reader__title { display: block; color: var(--on-dark); font: 600 14px/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader__sub { display: block; margin-top: 2px; color: var(--on-dark-4); font: 400 11.5px/1 var(--sans); }
.reader__tools { display: flex; align-items: center; gap: 8px; }
.reader__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 9px;
    background: transparent;
    color: var(--on-dark-2);
    font: 500 12.5px/1 var(--sans);
    cursor: pointer;
}
.reader__btn:hover { border-color: rgba(255, 255, 255, .3); color: var(--on-dark); text-decoration: none; }
.reader__btn--accent { background: var(--accent); border-color: var(--accent); color: #FFF7EA; }
.reader__btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #FFF7EA; }

.reader__stage {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: auto;
    background: radial-gradient(60% 60% at 50% 40%, rgba(255, 255, 255, .04), transparent 70%);
}

/* The page PDF.js draws. */
.reader__canvas {
    display: block;
    margin: 12px auto;
    background: var(--page);
    border-radius: 3px;
    box-shadow: var(--shadow-page);
    max-width: 100%;
}

/* The bottom bar: turn a page, see where you are. */
.reader__nav {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--dark-bar);
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.reader__nav .reader__btn { width: 40px; padding: 0; justify-content: center; }

.reader__progress {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}
.reader__progress i { display: block; height: 100%; background: var(--accent-on-dark); }

.reader__counter { display: flex; align-items: center; gap: 2px; color: var(--on-dark-2); font: 500 12.5px/1 var(--sans); }
.reader__pageInput {
    width: 52px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: transparent;
    color: var(--on-dark);
    font: 500 12.5px/1 var(--sans);
    text-align: center;
}
.reader__pageInput:focus { border-color: var(--accent-on-dark); outline: none; }
.reader__total { white-space: nowrap; color: var(--on-dark-4); }

.reader__zoom { display: flex; align-items: center; gap: 4px; }
.reader__zoom .reader__btn { width: 32px; padding: 0; justify-content: center; font-size: 15px; }
.reader__zoomLevel { min-width: 42px; text-align: center; color: var(--on-dark-3); font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
    /* The zoom stepper and the Download label both go; the page controls and
       the file itself matter more than either on a 390px screen. */
    .reader__zoom { display: none !important; }
    .reader__btnLabel { display: none; }
}
.reader__frame {
    width: 100%;
    height: 100%;
    min-height: 70vh;
    border: 0;
    background: var(--page);
}
.reader__status { display: grid; place-items: center; gap: 12px; padding: 60px 20px; color: var(--on-dark-2); font: 400 14px/1.5 var(--sans); text-align: center; }
.reader__spinner {
    width: 26px; height: 26px;
    border: 2px solid rgba(255, 255, 255, .18);
    border-top-color: var(--accent-on-dark);
    border-radius: 999px;
    animation: reader-spin .8s linear infinite;
}
@keyframes reader-spin { to { transform: rotate(360deg); } }

@media (min-width: 1040px) {
    .reader__bar { padding: 12px 20px; gap: 18px; }
    .reader__stage { padding: 20px; }
    .reader__frame { border-radius: 6px; box-shadow: var(--shadow-page); }
}

/* ==========================================================================
   The guest save prompt
   ========================================================================== */

.tbp-nudge {
    position: fixed; inset-inline: 12px; bottom: 12px; z-index: 200;
    display: flex; align-items: center; gap: 12px;
    max-width: 460px; margin-inline: auto;
    padding: 13px 15px;
    background: var(--dark); color: var(--on-dark);
    border-radius: 12px; box-shadow: var(--shadow-float);
    opacity: 0; transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
}
body.has-tabbar .tbp-nudge { bottom: 68px; }
.tbp-nudge.is-in { opacity: 1; transform: none; }
.tbp-nudge__text { flex: 1 1 auto; margin: 0; font: 400 13px/1.5 var(--sans); }
.tbp-nudge__cta { flex: none; color: var(--accent-on-dark); font-weight: 600; }
.tbp-nudge__close { flex: none; border: 0; background: none; color: var(--on-dark-3); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 2px; }

/* ==========================================================================
   Search, 404 and plain pages
   ========================================================================== */

.page-head { padding-block: 30px 6px; }
.page-head h1 { font-size: 38px; line-height: 1.02; }
.page-head p { margin: 12px 0 0; color: var(--ink-3); font: 400 14.5px/1.6 var(--sans); }

.prose { max-width: 68ch; padding-block: 8px 30px; }

@media (min-width: 1040px) {
    .page-head h1 { font-size: 56px; }
}

/* ==========================================================================
   Comments

   326 approved comments sit on book pages. They are readers' own writing and
   they are part of what the page says, so they get real typography rather than
   the default markup from 2010.
   ========================================================================== */

.comments { padding-bottom: 10px; }

.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list ol.children { list-style: none; margin: 14px 0 0; padding-left: 20px; border-left: 1px solid var(--line); }

.comment-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.comment-item:last-child { border-bottom: 0; }

.comment-item__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.comment-item__mono {
    flex: none;
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #EDE3D0;
    color: var(--chip-warm-ink);
    font-family: var(--serif);
    font-size: 16px;
}
.comment-item__author { display: block; color: var(--ink); font: 600 14px/1.3 var(--sans); }
.comment-item__date { display: block; margin-top: 2px; color: var(--ink-4); font: 400 11.5px/1 var(--sans); }

.comment-item__body { color: var(--ink-body); font: 400 14.5px/1.65 var(--sans); }
.comment-item__body p:last-child { margin-bottom: 0; }
.comment-item__pending { margin: 10px 0 0; color: var(--ink-4); font: 500 12px/1 var(--sans); }
.comment-item__reply { margin: 10px 0 0; }
.comment-item__reply a { font: 500 13px/1 var(--sans); }

.comment-form { margin-top: 26px; }
.comment-form__title { font-size: 22px; margin-bottom: 6px; }
.comment-form__note { color: var(--ink-3); font: 400 13px/1.5 var(--sans); }
.comment-form label { display: block; margin-bottom: 6px; color: var(--ink-2); font: 500 13px/1 var(--sans); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    font: 400 15px/1.5 var(--sans);
}
.comment-form textarea { min-height: 130px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--accent); outline: none; }
.comment-form p { margin-bottom: 14px; }
.comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 9px; }
.comment-form .comment-form-cookies-consent input { width: auto; }
.comment-form .comment-form-cookies-consent label { margin: 0; font-weight: 400; }
.comment-form .submit { border: 0; cursor: pointer; }

@media (min-width: 1040px) {
    .comments { max-width: 760px; }
    .comment-form__title { font-size: 26px; }
}