/* ==========================================================================
   works.css — the publications hub, the anthologies shelf, and the reading view.

   Loaded only on publications pages (via each template's `extra_head` block),
   so it never weighs on the rest of the site.

   Palette: one set of semantic `--wk-*` tokens, restated per theme in section
   0. No rule below section 0 hardcodes a brand colour, so retheming means
   editing tokens only. The *shapes* (parchment leaves, gold rules, book
   spines) are borrowed from library.css so the two collections feel like one
   institution.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TOKENS

   Two rules keep this readable on every theme:

   a) Text polarity comes from the theme itself. `--bs-body-color` and
      `--bs-text-muted` are defined by all four themes and already flip
      correctly (light text on the dark themes, dark text on the light
      default), so text tokens read from them. Do NOT reach for
      `--bs-secondary-color` — no theme sets it, so it falls through to
      Bootstrap's near-black default and the text disappears.

   b) Surfaces must flip with the text. The defaults below are for the dark
      themes; the `body[data-theme="default"]` block inverts them for the
      light theme.

   c) Declare only RAW values here — channels, alphas and literals — never one
      token derived from another. A `var()` inside a custom property is
      substituted at the element where the property is DECLARED, so
      `--wk-gold: var(--wk-accent)` written at :root permanently freezes
      :root's accent and ignores every per-theme override below it. That is
      exactly how the light theme ended up drawing pale gold on cream. Rules
      compose the channels inline instead —
      `rgba(var(--wk-accent-rgb), 0.26)` — which resolves on the element and
      therefore honours the active theme.
   -------------------------------------------------------------------------- */

:root {
    /* ── Accent ─────────────────────────────────────────────────────────── */
    --wk-accent:      #f5d76e;
    --wk-accent-rgb:  245, 215, 110;
    --wk-on-accent:   #2b1e05;          /* text sitting on an accent fill */
    /* Filled-button gradient stops */
    --wk-fill-a:      rgba(var(--wk-accent-rgb), 0.92);
    --wk-fill-b:      rgba(var(--wk-accent-rgb), 0.68);

    /* ── Text ───────────────────────────────────────────────────────────── */
    --wk-ink:         var(--bs-body-color, #f0ece4);
    --wk-muted:       var(--bs-text-muted, #bcc4cf);
    --wk-faint:       rgba(var(--wk-accent-rgb), 0.66);

    /* ── Surfaces ───────────────────────────────────────────────────────── */
    --wk-surface:     rgba(11, 26, 33, 0.82);
    --wk-surface-2:   rgba(11, 26, 33, 0.55);
    --wk-panel-rgb:   22, 91, 74;
    --wk-panel:       rgba(var(--wk-panel-rgb), 0.16);
    --wk-media-bg:    #0b1a21;          /* letterbox behind artwork */
    --wk-cover-a:     #23303a;          /* typeset stand-in cover gradient */
    --wk-cover-b:     #131c23;
    --wk-select-bg:   #17212b;          /* native <option> list */
    --wk-select-ink:  #f0ece4;

    /* ── Form accents ───────────────────────────────────────────────────── */
    --wk-poetry:      #7ab8f5;
    --wk-poetry-rgb:  74, 144, 217;
    --wk-prose:       #e58e6a;
    --wk-prose-rgb:   178, 34, 34;
    /* ── Parchment: the reading leaf and the text-only card previews ─────
       Always cream on every theme — it is paper. The ink colours here are
       intentionally fixed, since they only ever sit on parchment. */
    --wk-parchment:      #fdf6e3;
    --wk-parchment-mid:  #f2e7cd;
    --wk-parchment-edge: #e4d4ae;
    --wk-parchment-ink:  #2c1a0e;
    --wk-parchment-ink2: #56391f;
    --wk-leaf-shadow:    0 24px 70px rgba(0, 0, 0, 0.55);

    /* ── Type ───────────────────────────────────────────────────────────── */
    /* Headings and body follow the ACTIVE THEME so these pages match the
       rest of the site (MedievalSharp on Halloween, Playfair elsewhere).
       --wk-read is the one exception: it is only ever used on the parchment
       surfaces, where a display face would be punishing to read a whole
       poem or story in. */
    --wk-display: var(--bs-heading-font-family, 'Playfair Display', Georgia, serif);
    --wk-sans:    var(--bs-body-font-family, 'IBM Plex Sans', system-ui, sans-serif);
    --wk-read:    'EB Garamond', Georgia, 'Times New Roman', serif;

    /* ── Shape ──────────────────────────────────────────────────────────── */
    --wk-shadow-rgb: 0, 0, 0;
    --wk-radius:    14px;
    --wk-radius-sm: 8px;
    --wk-ease:      cubic-bezier(0.4, 0, 0.2, 1);
    --wk-shadow:    0 6px 24px rgba(0, 0, 0, 0.4);
    --wk-shadow-up: 0 18px 44px rgba(0, 0, 0, 0.5);
}


/* ── Default theme: LIGHT page, so everything inverts ───────────────────── */
body[data-theme="default"] {
    --wk-shadow-rgb:  74, 48, 20;       /* warm, softer shadow for a light page */
    --wk-accent:      #8a5a1a;          /* bronze reads on cream; gold does not */
    --wk-accent-rgb:  138, 90, 26;
    --wk-on-accent:   #fff8ea;

    /* Opaque: a translucent fill over a light page washes out and the
       light button text stops being readable. */
    --wk-fill-a:      #8f5d1a;
    --wk-fill-b:      #74490f;

    --wk-faint:       #86653d;

    --wk-surface:     rgba(255, 253, 247, 0.94);
    --wk-surface-2:   rgba(255, 253, 247, 0.72);
    --wk-panel-rgb:   108, 72, 47;
    --wk-panel:       rgba(var(--wk-panel-rgb), 0.07);
    --wk-media-bg:    #ece1cd;
    --wk-cover-a:     #f3e8d2;
    --wk-cover-b:     #e6d7ba;
    --wk-select-bg:   #fffdf7;
    --wk-select-ink:  #201b19;

    --wk-poetry:      #1d5b96;
    --wk-poetry-rgb:  29, 91, 150;
    --wk-prose:       #9c3d1c;
    --wk-prose-rgb:   156, 61, 28;

    /* Parchment on a cream page needs a firmer edge than on a dark one */
    --wk-parchment-edge: #d9c39a;
    --wk-leaf-shadow:    0 12px 38px rgba(74, 48, 20, 0.18);

    --wk-shadow:      0 5px 18px rgba(74, 48, 20, 0.12);
    --wk-shadow-up:   0 16px 38px rgba(74, 48, 20, 0.22);
}

/* ── Summer: mango + amber on dark bark ─────────────────────────────────── */
body[data-theme="summer"] {
    --wk-faint:       rgba(var(--wk-accent-rgb), 0.72);
    --wk-fill-a:      rgba(var(--wk-accent-rgb), 0.92);
    --wk-fill-b:      rgba(var(--wk-accent-rgb), 0.68);
    --wk-accent:      #f5c842;
    --wk-accent-rgb:  245, 200, 66;
    --wk-on-accent:   #241100;

    --wk-surface:     rgba(30, 15, 2, 0.86);
    --wk-surface-2:   rgba(30, 15, 2, 0.62);
    --wk-panel-rgb:   74, 124, 63;      /* leaf green */
    --wk-panel:       rgba(var(--wk-panel-rgb), 0.15);
    --wk-media-bg:    #1c0e00;
    --wk-cover-a:     #3a2207;
    --wk-cover-b:     #1c0e00;
    --wk-select-bg:   #24130a;

    --wk-poetry:      #8fd3ea;          /* sky */
    --wk-poetry-rgb:  143, 211, 234;
    --wk-prose:       #ef9350;          /* amber */
    --wk-prose-rgb:   212, 130, 10;
}

/* ── Christmas: gold + evergreen on midnight ────────────────────────────── */
body[data-theme="christmas"] {
    --wk-faint:       rgba(var(--wk-accent-rgb), 0.7);
    --wk-fill-a:      rgba(var(--wk-accent-rgb), 0.92);
    --wk-fill-b:      rgba(var(--wk-accent-rgb), 0.68);
    --wk-accent:      #f5d76e;
    --wk-accent-rgb:  245, 215, 110;
    --wk-on-accent:   #201603;

    --wk-surface:     rgba(8, 22, 30, 0.85);
    --wk-surface-2:   rgba(8, 22, 30, 0.6);
    --wk-panel-rgb:   22, 91, 74;
    --wk-panel:       rgba(var(--wk-panel-rgb), 0.18);
    --wk-media-bg:    #071820;
    --wk-cover-a:     #12333c;
    --wk-cover-b:     #08181f;
    --wk-select-bg:   #0e2028;

    --wk-poetry:      #9bcdf5;          /* icy blue */
    --wk-poetry-rgb:  155, 205, 245;
    --wk-prose:       #e58080;          /* holly red */
    --wk-prose-rgb:   178, 34, 34;
}

/* ── Halloween: pumpkin + purple on soot ────────────────────────────────── */
body[data-theme="halloween"] {
    --wk-faint:       rgba(var(--wk-accent-rgb), 0.78);
    --wk-fill-a:      rgba(var(--wk-accent-rgb), 0.94);
    --wk-fill-b:      rgba(var(--wk-accent-rgb), 0.74);
    --wk-accent:      #ff9d2e;
    --wk-accent-rgb:  255, 157, 46;
    --wk-on-accent:   #1a0f0a;

    --wk-surface:     rgba(24, 14, 9, 0.9);
    --wk-surface-2:   rgba(24, 14, 9, 0.66);
    --wk-panel-rgb:   102, 51, 153;     /* purple haze */
    --wk-panel:       rgba(var(--wk-panel-rgb), 0.14);
    --wk-media-bg:    #120b08;
    --wk-cover-a:     #2d1810;
    --wk-cover-b:     #150c08;
    --wk-select-bg:   #1a0f0a;

    --wk-poetry:      #bb9ae8;          /* purple haze */
    --wk-poetry-rgb:  155, 122, 200;
    --wk-prose:       #ff7a3c;          /* pumpkin */
    --wk-prose-rgb:   255, 107, 26;
}


/* ── Monsoon: rain blue + wet moss on storm slate ────────────────────────── */
body[data-theme="monsoon"] {
    --wk-accent:      #8ecfd6;
    --wk-accent-rgb:  142, 207, 214;
    --wk-on-accent:   #06222a;

    --wk-faint:       rgba(var(--wk-accent-rgb), 0.74);
    --wk-fill-a:      rgba(var(--wk-accent-rgb), 0.92);
    --wk-fill-b:      rgba(var(--wk-accent-rgb), 0.70);

    --wk-surface:     rgba(15, 40, 48, 0.86);
    --wk-surface-2:   rgba(15, 40, 48, 0.62);
    --wk-panel-rgb:   92, 155, 127;      /* wet moss */
    --wk-panel:       rgba(var(--wk-panel-rgb), 0.16);
    --wk-media-bg:    #0a1a21;
    --wk-cover-a:     #123039;
    --wk-cover-b:     #0a1a21;
    --wk-select-bg:   #0d2229;

    --wk-poetry:      #a8d8e8;           /* rain-lit blue */
    --wk-poetry-rgb:  168, 216, 232;
    --wk-prose:       #d99a5e;           /* petrichor */
    --wk-prose-rgb:   201, 138, 75;
}


/* Bootstrap underlines every <a>; these pages style their own affordances. */
.works-page a,
.works-page a:hover { text-decoration: none; }


/* --------------------------------------------------------------------------
   1. PAGE SHELL & MASTHEAD
   -------------------------------------------------------------------------- */
.works-page { padding-top: 2.5rem; }

.works-masthead {
    text-align: center;
    margin-bottom: 3rem;
}

.works-eyebrow {
    font-family: var(--wk-sans);
    font-style: italic;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    color: var(--wk-faint);
    margin-bottom: 0.35rem;
}

.works-masthead__title {
    font-family: var(--wk-display);
    font-size: clamp(2.1rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--wk-accent);
    margin: 0;
    text-shadow: 0 0 34px rgba(var(--wk-accent-rgb), 0.18);
}

.works-masthead__lede {
    font-family: var(--wk-sans);
    font-size: 1.08rem;
    color: var(--wk-muted);
    max-width: 46ch;
    margin: 0.75rem auto 0;
}

/* Gold rule with a centred glyph — the library's signature divider */
.works-ornament,
.work-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0.9rem auto 0;
    max-width: 320px;
}

.works-ornament__line,
.work-ornament__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(var(--wk-accent-rgb), 0.26), transparent);
}

.works-ornament__glyph,
.work-ornament__glyph {
    color: var(--wk-accent);
    font-size: 0.85rem;
    opacity: 0.8;
}

/* ── Top-of-page section links ──────────────────────────────────────────── */
.works-jump {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
}

.works-jump__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 20px;
    font-family: var(--wk-display);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--wk-muted);
    text-decoration: none;
    background: var(--wk-surface-2);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: 999px;
    transition: all 0.25s var(--wk-ease);
}

.works-jump__link i { font-size: 0.85rem; opacity: 0.8; }

.works-jump__link:hover {
    color: var(--wk-accent);
    border-color: rgba(var(--wk-accent-rgb), 0.55);
    background: rgba(var(--wk-accent-rgb), 0.12);
    transform: translateY(-2px);
}

/* The anthologies chip leaves the page, so it carries more weight */
.works-jump__link--feature {
    color: var(--wk-accent);
    border-color: rgba(var(--wk-accent-rgb), 0.55);
    background: rgba(var(--wk-accent-rgb), 0.12);
}

.works-jump__link--feature:hover {
    color: var(--wk-on-accent);
    background: var(--wk-accent);
    border-color: var(--wk-accent);
    box-shadow: 0 6px 20px rgba(var(--wk-accent-rgb), 0.3);
}

.works-jump__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    font-family: var(--wk-sans);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    color: var(--wk-on-accent);
    background: var(--wk-accent);
    border-radius: 999px;
}

.works-jump__link--feature:hover .works-jump__count {
    color: var(--wk-accent);
    background: var(--wk-on-accent);
}

.works-jump__go { transition: transform 0.25s var(--wk-ease); }
.works-jump__link--feature:hover .works-jump__go { transform: translateX(3px); }


.works-crumb { margin-bottom: 1.25rem; }

.works-crumb__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--wk-sans);
    font-size: 0.95rem;
    color: var(--wk-muted);
    text-decoration: none;
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: 999px;
    padding: 5px 16px;
    transition: all 0.25s var(--wk-ease);
}

.works-crumb__link:hover {
    color: var(--wk-accent);
    border-color: rgba(var(--wk-accent-rgb), 0.55);
    background: rgba(var(--wk-accent-rgb), 0.12);
}


/* --------------------------------------------------------------------------
   2. SECTIONS
   -------------------------------------------------------------------------- */
.works-section { margin-bottom: 3.5rem; scroll-margin-top: 90px; }

.works-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 0.9rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid rgba(var(--wk-accent-rgb), 0.26);
}

.works-section__title {
    font-family: var(--wk-display);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--wk-accent);
    letter-spacing: 0.02em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.works-section__title i { font-size: 1.05rem; opacity: 0.75; }

.works-section__note {
    font-family: var(--wk-sans);
    font-size: 0.95rem;
    font-style: italic;
    color: var(--wk-muted);
    margin: 0.3rem 0 0;
}


/* --------------------------------------------------------------------------
   3. BUTTONS
   -------------------------------------------------------------------------- */
.works-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--wk-display);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 9px 20px;
    border-radius: var(--wk-radius-sm);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s var(--wk-ease);
}

.works-btn--sm { padding: 6px 14px; font-size: 0.85rem; }

.works-btn--primary {
    background: linear-gradient(160deg, var(--wk-fill-a) 0%, var(--wk-fill-b) 100%);
    border-color: rgba(var(--wk-accent-rgb), 0.55);
    color: var(--wk-on-accent);
    box-shadow: 0 3px 14px rgba(var(--wk-accent-rgb), 0.22);
}

.works-btn--primary:hover {
    filter: brightness(1.08);
    color: var(--wk-on-accent);
    box-shadow: 0 6px 22px rgba(var(--wk-accent-rgb), 0.34);
}

.works-btn--ghost {
    background: transparent;
    color: var(--wk-muted);
}

.works-btn--ghost:hover {
    color: var(--wk-accent);
    border-color: rgba(var(--wk-accent-rgb), 0.55);
    background: rgba(var(--wk-accent-rgb), 0.12);
}

.works-btn--review {
    background: rgba(var(--wk-prose-rgb), 0.16);
    border-color: rgba(var(--wk-prose-rgb), 0.34);
    color: var(--wk-prose);
}

.works-btn--review:hover { filter: brightness(1.15); color: var(--wk-prose); }

/* The roulette "spin" pill */
.works-spin {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--wk-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wk-accent);
    text-decoration: none;
    padding: 8px 20px;
    border: 1px dashed rgba(var(--wk-accent-rgb), 0.55);
    border-radius: 999px;
    background: rgba(var(--wk-accent-rgb), 0.12);
    transition: all 0.28s var(--wk-ease);
}

.works-spin:hover {
    color: var(--wk-ink);
    border-style: solid;
    background: rgba(var(--wk-accent-rgb), 0.2);
    transform: translateY(-2px);
}

.works-spin:hover i { transform: rotate(180deg); }
.works-spin i { transition: transform 0.45s var(--wk-ease); }


/* --------------------------------------------------------------------------
   4. FILTER BAR  (dropdown + search)
   -------------------------------------------------------------------------- */
.works-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.25rem;
    padding: 1.15rem 1.4rem;
    margin-bottom: 2rem;
    background: var(--wk-panel);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius);
    box-shadow: 0 6px 22px rgba(var(--wk-shadow-rgb), 0.26);
    backdrop-filter: blur(6px);
}

.works-filterbar__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.works-filterbar__field--grow { flex: 1; min-width: 220px; }

.works-filterbar__label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--wk-sans);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wk-faint);
    margin: 0;
}

.works-select,
.works-input {
    font-family: var(--wk-sans);
    font-size: 0.95rem;
    color: var(--wk-ink);
    background-color: var(--wk-surface-2);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius-sm);
    padding: 9px 13px;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.works-select {
    /* Native arrow is unreliable across themes — draw our own. */
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--wk-accent) 50%),
        linear-gradient(135deg, var(--wk-accent) 50%, transparent 50%);
    background-position:
        calc(100% - 19px) calc(50% + 2px),
        calc(100% - 14px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.works-select option { background: var(--wk-select-bg); color: var(--wk-select-ink); }

.works-select:focus,
.works-input:focus {
    outline: none;
    border-color: rgba(var(--wk-accent-rgb), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--wk-accent-rgb), 0.12);
}

.works-input::placeholder { color: var(--wk-muted); opacity: 0.7; }

.works-filterbar__actions { display: flex; gap: 0.6rem; }


/* --------------------------------------------------------------------------
   5. WORK CARDS
   -------------------------------------------------------------------------- */
.work-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--wk-surface);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius);
    box-shadow: var(--wk-shadow);
    backdrop-filter: blur(8px);
    transition: transform 0.3s var(--wk-ease),
                box-shadow 0.3s var(--wk-ease),
                border-color 0.3s var(--wk-ease);
}

.work-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--wk-accent-rgb), 0.55);
    box-shadow: var(--wk-shadow-up);
}

/* Gold spine down the left edge, echoing the library's book cards */
.work-card__spine {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    z-index: 3;
    background: linear-gradient(to bottom,
        rgba(var(--wk-accent-rgb), 0.55), rgba(var(--wk-accent-rgb), 0.15));
}

.work-card--poetry .work-card__spine {
    background: linear-gradient(to bottom, var(--wk-poetry), rgba(var(--wk-poetry-rgb), 0.15));
}

.work-card--prose .work-card__spine {
    background: linear-gradient(to bottom, var(--wk-prose), rgba(var(--wk-prose-rgb), 0.15));
}

.work-card--featured { border-color: rgba(var(--wk-accent-rgb), 0.55); }

.work-card__head-link {
    display: block;
    position: relative;
    text-decoration: none;
}

/* ── Artwork ── */
.work-card__cover {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: var(--wk-media-bg);
}

.work-card__cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.5s var(--wk-ease);
}

.work-card:hover .work-card__cover-img { transform: scale(1.05); }

.work-card__cover-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 45%, rgba(6, 12, 16, 0.78) 100%);
}

/* ── No artwork: the work's own opening lines become the cover ── */
.work-card__page {
    position: relative;
    height: 190px;
    padding: 1.5rem 1.5rem 1rem;
    overflow: hidden;
    background:
        linear-gradient(160deg, var(--wk-parchment) 0%, var(--wk-parchment-mid) 100%);
    border-bottom: 1px solid var(--wk-parchment-edge);
}

/* Faint ruled lines, like a manuscript page */
.work-card__page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0 27px,
        rgba(44, 26, 14, 0.07) 27px 28px
    );
    pointer-events: none;
}

.work-card__verse,
.work-card__opening {
    position: relative;
    margin: 0;
    color: var(--wk-parchment-ink);
    font-family: var(--wk-read);
}

.work-card__verse {
    white-space: pre-wrap;
    text-align: center;
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.75;
}

.work-card__opening {
    font-size: 0.98rem;
    line-height: 1.7;
    text-align: left;
    color: var(--wk-parchment-ink2);
}

.work-card__opening::first-letter {
    float: left;
    font-family: var(--wk-display);
    font-size: 2.5rem;
    line-height: 0.82;
    padding: 4px 7px 0 0;
    color: #8a5a1a;
}

.work-card__page-fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 74px;
    background: linear-gradient(to top, var(--wk-parchment-mid) 12%, transparent 100%);
    pointer-events: none;
}

/* ── Badges & ribbons ── */
.work-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--wk-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

.work-card__head-link .work-badge {
    position: absolute;
    top: 12px;
    left: 14px;
    z-index: 2;
}

.work-badge--poetry {
    background: rgba(var(--wk-poetry-rgb), 0.16);
    border: 1px solid rgba(var(--wk-poetry-rgb), 0.34);
    color: var(--wk-poetry);
}

.work-badge--prose {
    background: rgba(var(--wk-prose-rgb), 0.16);
    border: 1px solid rgba(var(--wk-prose-rgb), 0.34);
    color: var(--wk-prose);
}

/* Badges sitting on media (artwork or the parchment preview) get a solid dark
   pill. That backing is fixed on every theme, so the text colour has to be
   fixed too — the themed accents include dark variants for the light theme,
   which would vanish here. */
.work-card__head-link .work-badge {
    background: rgba(20, 12, 4, 0.85);
    backdrop-filter: none;
    color: #f6ecd8;
    border: 1px solid rgba(246, 236, 216, 0.26);
}

.work-card__head-link .work-badge--poetry {
    color: #9bcdf5;
    border-color: rgba(155, 205, 245, 0.4);
}

.work-card__head-link .work-badge--prose {
    color: #f2a878;
    border-color: rgba(242, 168, 120, 0.4);
}

.work-card__ribbon {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--wk-sans);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 999px;
    color: var(--wk-on-accent);
    background: var(--wk-accent);
    box-shadow: 0 2px 10px rgba(var(--wk-shadow-rgb), 0.35);
}

/* ── Body ── */
.work-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.4rem 1.35rem;
}

.work-card__title {
    font-family: var(--wk-display);
    font-size: 1.16rem;
    font-weight: 700;
    line-height: 1.32;
    margin: 0 0 0.3rem;
}

.work-card__title-link {
    color: var(--wk-accent);
    text-decoration: none;
    transition: color 0.2s;
}

.work-card__title-link:hover { color: var(--wk-ink); }

.work-card__byline {
    font-family: var(--wk-sans);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--wk-faint);
    margin: 0 0 0.7rem;
}

.work-card__excerpt {
    font-family: var(--wk-sans);
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--wk-muted);
    margin: 0 0 0.9rem;
}

.work-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(var(--wk-accent-rgb), 0.26);
}

.work-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--wk-sans);
    font-size: 0.78rem;
    color: var(--wk-muted);
}

.work-card__meta i { opacity: 0.7; font-size: 0.75rem; }

.work-card__read {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
    padding: 8px 18px;
    font-family: var(--wk-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wk-accent);
    text-decoration: none;
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius-sm);
    transition: all 0.25s var(--wk-ease);
}

.work-card__read:hover {
    background: rgba(var(--wk-accent-rgb), 0.12);
    border-color: rgba(var(--wk-accent-rgb), 0.55);
    color: var(--wk-accent);
}


/* --------------------------------------------------------------------------
   6. ANTHOLOGY CARDS
   -------------------------------------------------------------------------- */
.anth-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--wk-surface);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius);
    box-shadow: var(--wk-shadow);
    transition: transform 0.3s var(--wk-ease),
                box-shadow 0.3s var(--wk-ease),
                border-color 0.3s var(--wk-ease);
}

.anth-card:hover {
    transform: translateY(-7px);
    border-color: rgba(var(--wk-accent-rgb), 0.55);
    box-shadow: var(--wk-shadow-up);
}

/* Thicker spine than a single work — it's a bound volume */
.anth-card__spine {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 7px;
    z-index: 3;
    background: linear-gradient(to right,
        var(--wk-accent) 0%,
        rgba(var(--wk-accent-rgb), 0.45) 55%,
        transparent 100%);
}

.anth-card__cover {
    position: relative;
    height: 260px;
    overflow: hidden;
    background: var(--wk-media-bg);
}

.anth-card__cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--wk-ease);
}

.anth-card:hover .anth-card__cover-img { transform: scale(1.04); }

.anth-card__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(6, 12, 16, 0.7) 100%);
    pointer-events: none;
}

/* The veil exists to keep the format pill legible over photography. A typeset
   stand-in cover needs no veil, and on the light theme it would darken the
   edition line. */
.anth-card__cover-fallback ~ .anth-card__veil { display: none; }

/* Typeset stand-in cover when no artwork has been uploaded yet */
.anth-card__cover-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    padding: 1.75rem 1.5rem;
    text-align: center;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(var(--wk-accent-rgb), 0.1), transparent 70%),
        linear-gradient(165deg, var(--wk-cover-a) 0%, var(--wk-cover-b) 100%);
}

.anth-card__fallback-rule {
    width: 54px;
    height: 1px;
    background: rgba(var(--wk-accent-rgb), 0.55);
}

.anth-card__fallback-title {
    font-family: var(--wk-display);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--wk-accent);
    letter-spacing: 0.03em;
}

.anth-card__fallback-edition {
    font-family: var(--wk-sans);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--wk-muted);
}

.anth-card__fallback-glyph {
    color: var(--wk-accent);
    opacity: 0.4;
    font-size: 1.1rem;
}

.anth-card__ribbon,
.anth-card__format {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--wk-sans);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 999px;
}

.anth-card__ribbon {
    top: 14px;
    left: 16px;
    color: var(--wk-on-accent);
    background: var(--wk-accent);
    box-shadow: 0 2px 10px rgba(var(--wk-shadow-rgb), 0.35);
}

/* Sits on the cover art, so like the card badges it keeps fixed colours
   rather than the themed accent (which is dark on the light theme). */
.anth-card__format {
    bottom: 14px;
    right: 16px;
    color: #f3dc9a;
    background: rgba(11, 16, 20, 0.86);
    border: 1px solid rgba(243, 220, 154, 0.3);
    backdrop-filter: blur(6px);
}

.anth-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.35rem 1.5rem 1.5rem;
}

.anth-card__edition {
    font-family: var(--wk-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wk-faint);
    margin: 0 0 0.4rem;
}

.anth-card__title {
    font-family: var(--wk-display);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.28;
    color: var(--wk-accent);
    margin: 0 0 0.25rem;
}

.anth-card__subtitle {
    font-family: var(--wk-sans);
    font-style: italic;
    font-size: 1rem;
    color: var(--wk-ink);
    opacity: 0.85;
    margin: 0 0 0.5rem;
}

.anth-card__byline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--wk-sans);
    font-size: 0.92rem;
    color: var(--wk-faint);
    margin: 0 0 0.75rem;
}

.anth-card__desc {
    font-family: var(--wk-sans);
    font-size: 0.97rem;
    line-height: 1.68;
    color: var(--wk-muted);
    margin: 0 0 1rem;
}

.anth-card__facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.1rem;
    margin: 0 0 1.1rem;
    padding: 0.85rem 0 0;
    border-top: 1px solid rgba(var(--wk-accent-rgb), 0.26);
}

.anth-card__facts li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--wk-sans);
    font-size: 0.78rem;
    color: var(--wk-muted);
}

.anth-card__facts i { opacity: 0.7; font-size: 0.74rem; }

.anth-card__actions { margin-top: auto; }

.anth-card__read {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 10px 20px;
    font-family: var(--wk-display);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--wk-radius-sm);
    color: var(--wk-on-accent);
    background: linear-gradient(160deg, var(--wk-fill-a) 0%, var(--wk-fill-b) 100%);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.55);
    transition: all 0.25s var(--wk-ease);
}

.anth-card__read:hover { filter: brightness(1.08); color: var(--wk-on-accent); }

.anth-card__read--locked {
    background: transparent;
    color: var(--wk-muted);
    border-color: rgba(var(--wk-accent-rgb), 0.26);
}

.anth-card__read--locked:hover {
    color: var(--wk-accent);
    background: rgba(var(--wk-accent-rgb), 0.12);
    filter: none;
}

.anth-card__soon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--wk-sans);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--wk-muted);
}


/* --------------------------------------------------------------------------
   7. EMPTY STATE
   -------------------------------------------------------------------------- */
.works-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--wk-surface-2);
    border: 1px dashed rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius);
}

.works-empty__icon {
    display: block;
    font-size: 2.6rem;
    color: var(--wk-accent);
    opacity: 0.35;
    margin-bottom: 1rem;
}

.works-empty__title {
    font-family: var(--wk-display);
    font-size: 1.3rem;
    color: var(--wk-accent);
    margin-bottom: 0.5rem;
}

.works-empty__text {
    font-family: var(--wk-sans);
    color: var(--wk-muted);
    margin-bottom: 1.5rem;
}


/* --------------------------------------------------------------------------
   8. PAGINATION
   -------------------------------------------------------------------------- */
.works-pagination {
    display: flex;
    justify-content: center;
    margin-top: 2.75rem;
}

.works-pagination .pagination { gap: 5px; flex-wrap: wrap; margin: 0; }

.works-pagination .page-link {
    background: transparent;
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius-sm) !important;
    color: var(--wk-muted);
    font-family: var(--wk-display);
    font-size: 0.9rem;
    min-width: 40px;
    text-align: center;
    padding: 7px 13px;
    transition: all 0.22s var(--wk-ease);
}

.works-pagination .page-link:hover {
    background: rgba(var(--wk-accent-rgb), 0.12);
    border-color: rgba(var(--wk-accent-rgb), 0.55);
    color: var(--wk-accent);
}

.works-pagination .page-item.active .page-link {
    background: var(--wk-accent);
    border-color: var(--wk-accent);
    color: var(--wk-on-accent);
    font-weight: 700;
    box-shadow: 0 2px 12px rgba(var(--wk-accent-rgb), 0.3);
}

.works-pagination .page-item.disabled .page-link {
    opacity: 0.3;
    background: transparent;
}


/* --------------------------------------------------------------------------
   9. WRITER'S DESK
   -------------------------------------------------------------------------- */
.works-desk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg,
        rgba(var(--wk-panel-rgb), 0.24) 0%,
        var(--wk-surface-2) 100%);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius);
    box-shadow: 0 8px 28px rgba(var(--wk-shadow-rgb), 0.32);
}

.works-desk__title {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--wk-display);
    font-size: 1.3rem;
    color: var(--wk-accent);
    margin: 0 0 0.25rem;
}

.works-desk__note {
    font-family: var(--wk-sans);
    font-size: 0.95rem;
    color: var(--wk-muted);
    margin: 0;
}

.works-desk__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }


/* ==========================================================================
   READING VIEW
   ========================================================================== */

/* --------------------------------------------------------------------------
   10. PROGRESS RULE & TOP BAR
   -------------------------------------------------------------------------- */
.work-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 1040;
    background: transparent;
    pointer-events: none;
}

.work-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(to right,
        rgba(var(--wk-accent-rgb), 0.4),
        var(--wk-accent));
    box-shadow: 0 0 12px rgba(var(--wk-accent-rgb), 0.5);
    transition: width 0.1s linear;
}

.work-reader__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.work-reader__tools { display: flex; align-items: center; gap: 0.75rem; }

/* Text size stepper — same glyph, three sizes */
.work-textsize {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius-sm);
    background: var(--wk-surface-2);
}

.work-textsize__btn {
    background: transparent;
    border: none;
    border-radius: 5px;
    color: var(--wk-muted);
    font-family: var(--wk-display);
    line-height: 1;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.2s var(--wk-ease);
}

.work-textsize__btn[data-size="sm"] { font-size: 0.82rem; }
.work-textsize__btn[data-size="md"] { font-size: 1rem; }
.work-textsize__btn[data-size="lg"] { font-size: 1.2rem; }

.work-textsize__btn:hover { color: var(--wk-accent); background: rgba(var(--wk-accent-rgb), 0.12); }

.work-textsize__btn.is-active {
    color: var(--wk-on-accent);
    background: var(--wk-accent);
    font-weight: 700;
}

.work-draft-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.9rem 1.25rem;
    margin-bottom: 1.75rem;
    font-family: var(--wk-sans);
    font-size: 0.95rem;
    color: var(--wk-accent);
    background: rgba(var(--wk-accent-rgb), 0.12);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-left: 3px solid var(--wk-accent);
    border-radius: var(--wk-radius-sm);
}


/* --------------------------------------------------------------------------
   11. THE LEAF  (the page the work is printed on)
   -------------------------------------------------------------------------- */
.work-leaf {
    --wk-read-size: 1.15rem;

    position: relative;
    max-width: 780px;
    margin: 0 auto;
    padding: 3rem 3.25rem 3.5rem;
    overflow: hidden;
    color: var(--wk-parchment-ink);
    background:
        radial-gradient(ellipse 90% 40% at 50% 0%, rgba(255, 250, 235, 0.9) 0%, transparent 70%),
        linear-gradient(170deg, var(--wk-parchment) 0%, var(--wk-parchment-mid) 100%);
    border: 1px solid var(--wk-parchment-edge);
    border-radius: 6px;
    box-shadow:
        0 0 0 1px rgba(var(--wk-accent-rgb), 0.14),
        var(--wk-leaf-shadow);
}

.work-leaf[data-size="sm"] { --wk-read-size: 1.02rem; }
.work-leaf[data-size="md"] { --wk-read-size: 1.15rem; }
.work-leaf[data-size="lg"] { --wk-read-size: 1.34rem; }

/* Paper grain */
.work-leaf::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.035;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

.work-leaf > * { position: relative; z-index: 1; }

/* ── Hero artwork ── */
.work-leaf__figure {
    margin: -3rem -3.25rem 2.5rem;
    background: #16100a;
    overflow: hidden;
}

.work-leaf__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: contain;
    margin: 0 auto;
}

.work-leaf__caption {
    font-family: var(--wk-read);
    font-style: italic;
    font-size: 0.85rem;
    text-align: center;
    color: #d8c9ad;
    background: rgba(var(--wk-shadow-rgb), 0.6);
    padding: 0.6rem 1.5rem 0.7rem;
    margin: 0;
}

/* ── Title block ── */
.work-leaf__head {
    text-align: center;
    margin-bottom: 2.5rem;
}

.work-leaf__head .work-badge {
    margin-bottom: 1rem;
    /* Badges are designed for dark surfaces — invert onto parchment. */
    background: rgba(44, 26, 14, 0.08);
    backdrop-filter: none;
}

.work-leaf--poetry .work-badge--poetry {
    color: #1d5b96;
    border-color: rgba(29, 91, 150, 0.35);
}

.work-leaf--prose .work-badge--prose {
    color: #9c3d1c;
    border-color: rgba(156, 61, 28, 0.35);
}

.work-leaf__title {
    font-family: var(--wk-display);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--wk-parchment-ink);
    margin: 0 0 0.4rem;
}

.work-leaf__byline {
    font-family: var(--wk-read);
    font-style: italic;
    font-size: 1.08rem;
    color: #7a5525;
    margin: 0;
}

.work-leaf .work-ornament { margin: 1.25rem auto; max-width: 220px; }

.work-leaf .work-ornament__line {
    background: linear-gradient(to right, transparent, rgba(138, 90, 26, 0.45), transparent);
}

.work-leaf .work-ornament__glyph { color: #a8781f; opacity: 0.85; }

.work-leaf__meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 1.4rem;
    margin: 0;
    padding: 0;
}

.work-leaf__meta li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--wk-sans);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: #7d6244;
}

.work-leaf__meta i { opacity: 0.7; font-size: 0.76rem; }

.work-leaf__collected {
    font-family: var(--wk-read);
    font-size: 0.92rem;
    color: #7a5525;
    margin: 1rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.work-leaf__collected a {
    color: #8a5a1a;
    text-decoration: underline;
    text-decoration-color: rgba(138, 90, 26, 0.4);
    text-underline-offset: 3px;
}

.work-leaf__collected a:hover { color: #5e3a08; }

/* ── The work itself ── */
.work-leaf__body { margin: 0 auto; }

/* Verse: the poet's line breaks are the form — preserve them exactly. */
.work-verse {
    white-space: pre-wrap;
    text-align: center;
    font-family: var(--wk-read);
    font-size: var(--wk-read-size);
    font-style: italic;
    line-height: 2.05;
    letter-spacing: 0.012em;
    color: var(--wk-parchment-ink);
    max-width: 34rem;
    margin: 0 auto;
    /* Long lines wrap without destroying the shape */
    overflow-wrap: break-word;
    hanging-punctuation: first;
}

/* Prose: a comfortable measure, paragraph rhythm, opening drop cap. */
.work-prose {
    font-family: var(--wk-read);
    font-size: var(--wk-read-size);
    line-height: 1.85;
    color: var(--wk-parchment-ink2);
    max-width: 36rem;
    margin: 0 auto;
    text-align: left;
    hyphens: auto;
}

.work-prose p { color: inherit; margin: 0 0 1.35rem; }
.work-prose p:last-child { margin-bottom: 0; }

.work-prose > p:first-of-type::first-letter {
    float: left;
    font-family: var(--wk-display);
    font-size: 3.6em;
    line-height: 0.82;
    padding: 6px 10px 0 0;
    color: #8a5a1a;
}

/* Second line of the opening paragraph shouldn't hug the drop cap */
.work-prose > p:first-of-type { min-height: 3.2em; }

.work-leaf__end {
    text-align: center;
    margin-top: 2.75rem;
    color: #a8781f;
    opacity: 0.6;
    font-size: 1.1rem;
}


/* --------------------------------------------------------------------------
   12. PREV / NEXT
   -------------------------------------------------------------------------- */
.work-neighbours {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 1rem;
    max-width: 780px;
    margin: 2.5rem auto 0;
}

.work-neighbour {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 1.1rem 1.3rem;
    text-decoration: none;
    background: var(--wk-surface-2);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius-sm);
    transition: all 0.25s var(--wk-ease);
}

.work-neighbour:hover {
    border-color: rgba(var(--wk-accent-rgb), 0.55);
    background: rgba(var(--wk-accent-rgb), 0.12);
    transform: translateY(-3px);
}

.work-neighbour--empty {
    background: transparent;
    border: 1px dashed rgba(var(--wk-accent-rgb), 0.1);
}

.work-neighbour--empty:hover { transform: none; background: transparent; }

.work-neighbour--next { text-align: right; align-items: flex-end; }

.work-neighbour__dir {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--wk-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wk-faint);
}

.work-neighbour__title {
    font-family: var(--wk-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--wk-accent);
    line-height: 1.35;
}

.work-neighbour__by {
    font-family: var(--wk-sans);
    font-style: italic;
    font-size: 0.87rem;
    color: var(--wk-muted);
}

.work-neighbour--spin {
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 116px;
    color: var(--wk-accent);
    border-style: dashed;
}

.work-neighbour--spin i { font-size: 1.15rem; transition: transform 0.45s var(--wk-ease); }
.work-neighbour--spin:hover i { transform: rotate(180deg); }

.work-neighbour--spin span {
    font-family: var(--wk-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   13. COMMENTS
   -------------------------------------------------------------------------- */
.work-comments {
    max-width: 780px;
    margin: 3.5rem auto 0;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    scroll-margin-top: 90px;
}

.work-comments__heading {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--wk-display);
    font-size: 1.3rem;
    color: var(--wk-accent);
    margin-bottom: 1.5rem;
}

.work-comments__heading i { font-size: 1rem; opacity: 0.75; }

.work-comments__count {
    font-family: var(--wk-sans);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--wk-accent);
    background: rgba(var(--wk-accent-rgb), 0.12);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: 999px;
    padding: 2px 10px;
}

.work-comments__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.work-comment {
    display: flex;
    gap: 14px;
    padding: 1.1rem 1.3rem;
    background: var(--wk-surface-2);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius-sm);
    transition: border-color 0.2s;
}

.work-comment:hover { border-color: rgba(var(--wk-accent-rgb), 0.55); }

.work-comment__avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--wk-accent);
    background: rgba(var(--wk-accent-rgb), 0.12);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    font-size: 0.85rem;
}

.work-comment__body { flex: 1; min-width: 0; }

.work-comment__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin-bottom: 0.4rem;
}

.work-comment__author {
    font-family: var(--wk-display);
    font-size: 0.95rem;
    color: var(--wk-accent);
}

.work-comment__time {
    font-family: var(--wk-sans);
    font-size: 0.75rem;
    color: var(--wk-muted);
}

.work-comment__delete { margin-left: auto; }

.work-comment__delete-btn {
    background: none;
    border: none;
    color: rgba(220, 53, 69, 0.55);
    font-size: 0.78rem;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.work-comment__delete-btn:hover { color: #dc3545; background: rgba(220, 53, 69, 0.1); }

.work-comment__text {
    font-family: var(--wk-sans);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--wk-ink);
    margin: 0;
    overflow-wrap: break-word;
}

.work-comments__empty,
.work-comments__locked {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 1.5rem;
    font-family: var(--wk-sans);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--wk-muted);
    border: 1px dashed rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius-sm);
}

.work-comments__empty { margin-bottom: 2rem; }
.work-comments__locked a { color: var(--wk-accent); }

.work-comment-form {
    padding: 1.4rem 1.5rem;
    background: var(--wk-surface-2);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius);
}

.work-comment-form__label {
    display: block;
    font-family: var(--wk-display);
    font-size: 1rem;
    color: var(--wk-accent);
    margin-bottom: 0.8rem;
}

.work-comment-form__textarea {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    font-family: var(--wk-sans);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--wk-ink);
    background: rgba(var(--wk-shadow-rgb), 0.3);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius-sm);
    padding: 12px 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.work-comment-form__textarea:focus {
    outline: none;
    border-color: rgba(var(--wk-accent-rgb), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--wk-accent-rgb), 0.12);
}

.work-comment-form__textarea::placeholder { color: var(--wk-muted); opacity: 0.65; }

.work-comment-form__error {
    font-family: var(--wk-sans);
    font-size: 0.82rem;
    color: #e07070;
    margin: 0.5rem 0 0;
}

.work-comment-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.work-comment-form__hint {
    font-family: var(--wk-sans);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--wk-muted);
}


/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .work-neighbours { grid-template-columns: 1fr; }
    .work-neighbour--next { text-align: left; align-items: flex-start; }
    .work-neighbour--empty { display: none; }
    .work-neighbour--spin { order: 3; }
}

@media (max-width: 767.98px) {
    .works-page { padding-top: 1.5rem; }

    .works-section { margin-bottom: 2.75rem; }

    .works-section__head { align-items: flex-start; }

    .works-filterbar { padding: 1rem; }
    .works-filterbar__field,
    .works-filterbar__actions { width: 100%; }
    .works-filterbar__actions .works-btn { flex: 1; }

    .work-leaf { padding: 2rem 1.4rem 2.5rem; }
    .work-leaf__figure { margin: -2rem -1.4rem 1.75rem; }

    .work-verse { font-size: calc(var(--wk-read-size) - 0.06rem); line-height: 1.95; }
    .work-prose > p:first-of-type::first-letter { font-size: 3em; }

    .works-desk { padding: 1.4rem 1.5rem; }
    .works-desk__actions { width: 100%; }
    .works-desk__actions .works-btn { flex: 1; }

    .work-reader__bar { gap: 0.75rem; }
}

@media (max-width: 480px) {
    .anth-card__cover { height: 220px; }
    .work-card__cover,
    .work-card__page { height: 170px; }
}


/* --------------------------------------------------------------------------
   15. MOTION & PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .work-card,
    .anth-card,
    .work-neighbour,
    .works-spin,
    .works-jump__link,
    .work-card__cover-img,
    .anth-card__cover-img,
    .work-progress span {
        transition: none !important;
    }

    .work-card:hover,
    .anth-card:hover,
    .work-neighbour:hover,
    .works-jump__link:hover,
    .works-spin:hover { transform: none; }

    .works-jump__link--feature:hover .works-jump__go { transform: none; }

    .works-spin:hover i,
    .work-neighbour--spin:hover i { transform: none; }
}

@media print {
    .work-progress,
    .work-reader__bar,
    .work-neighbours,
    .work-comments,
    #navbar,
    footer { display: none !important; }

    .work-leaf {
        box-shadow: none;
        border: none;
        max-width: none;
        padding: 0;
        background: #fff;
    }
}


/* ==========================================================================
   READING SESSIONS

   Shares the tokens and card shapes above. Reading works reuse `.anth-card`
   outright — a collected issue and a book we read together are the same visual
   object, so they are not styled twice.
   ========================================================================== */

/* --------------------------------------------------------------------------
   16. METRIC TILES
   -------------------------------------------------------------------------- */
.sr-only-heading {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.metric {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 1.35rem 1.4rem;
    text-align: center;
    background: var(--wk-panel);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius);
    box-shadow: 0 6px 22px rgba(var(--wk-shadow-rgb), 0.22);
    backdrop-filter: blur(6px);
    transition: border-color 0.25s var(--wk-ease), transform 0.25s var(--wk-ease);
}

.metric:hover {
    border-color: rgba(var(--wk-accent-rgb), 0.55);
    transform: translateY(-3px);
}

.metric__value {
    font-family: var(--wk-display);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--wk-accent);
    letter-spacing: 0.01em;
}

.metric__value--date { font-size: 1.5rem; }

.metric__value--pending {
    color: var(--wk-muted);
    opacity: 0.55;
}

.metric__unit {
    font-size: 0.9rem;
    font-weight: 600;
    margin-left: 3px;
    opacity: 0.75;
}

.metric__label {
    font-family: var(--wk-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wk-muted);
}

.metric__note {
    font-family: var(--wk-read);
    font-style: italic;
    font-size: 0.82rem;
    color: var(--wk-faint);
    margin-top: 2px;
}


/* --------------------------------------------------------------------------
   17. READING NOW PANEL
   -------------------------------------------------------------------------- */
.now-reading {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.75rem;
    padding: 1.75rem;
    background: var(--wk-surface);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius);
    box-shadow: var(--wk-shadow);
}

.now-reading--detail { margin-bottom: 2.5rem; }

.now-reading__cover {
    position: relative;
    overflow: hidden;
    border-radius: var(--wk-radius-sm);
    background: var(--wk-media-bg);
    box-shadow: 0 8px 24px rgba(var(--wk-shadow-rgb), 0.4);
    aspect-ratio: 2 / 3;
}

.now-reading__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.now-reading__cover-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 2.2rem;
    color: var(--wk-accent);
    opacity: 0.4;
    background: linear-gradient(165deg, var(--wk-cover-a) 0%, var(--wk-cover-b) 100%);
}

.now-reading__body { display: flex; flex-direction: column; }

.now-reading__status { margin: 0 0 0.6rem; }

.now-reading__title {
    font-family: var(--wk-display);
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    font-weight: 700;
    line-height: 1.22;
    color: var(--wk-accent);
    margin: 0 0 0.3rem;
}

.now-reading__author {
    font-family: var(--wk-read);
    font-style: italic;
    font-size: 1.08rem;
    color: var(--wk-faint);
    margin: 0 0 0.9rem;
}

.now-reading__desc {
    font-family: var(--wk-sans);
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--wk-muted);
    margin: 0 0 1rem;
}

.now-reading__facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.3rem;
    margin: 0 0 1.1rem;
    padding: 0;
}

.now-reading__facts li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--wk-sans);
    font-size: 0.85rem;
    color: var(--wk-muted);
}

.now-reading__facts i { opacity: 0.7; font-size: 0.8rem; }

.now-reading__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: auto;
}

.now-reading__nocopy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--wk-read);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--wk-muted);
}

/* ── The handover callout ── */
.resume-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 0.9rem 1.2rem;
    margin: 0 0 1.1rem;
    font-family: var(--wk-read);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--wk-ink);
    background: rgba(var(--wk-accent-rgb), 0.12);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-left: 3px solid var(--wk-accent);
    border-radius: var(--wk-radius-sm);
}

.resume-note i { color: var(--wk-accent); margin-top: 3px; }
.resume-note strong { color: var(--wk-accent); margin-right: 5px; }

.resume-note--empty {
    background: transparent;
    border-style: dashed;
    border-left-style: dashed;
    color: var(--wk-muted);
    font-style: italic;
}

.resume-note--empty i { opacity: 0.7; }

/* ── Status pills ── */
.read-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 13px;
    font-family: var(--wk-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid transparent;
}

.read-status--reading {
    color: var(--wk-on-accent);
    background: var(--wk-accent);
}

.read-status--next {
    color: var(--wk-poetry);
    background: rgba(var(--wk-poetry-rgb), 0.16);
    border-color: rgba(var(--wk-poetry-rgb), 0.34);
}

.read-status--paused,
.read-status--done {
    color: var(--wk-muted);
    background: var(--wk-surface-2);
    border-color: rgba(var(--wk-accent-rgb), 0.26);
}

.works-subhead {
    font-family: var(--wk-display);
    font-size: 1.1rem;
    color: var(--wk-accent);
    margin: 2rem 0 1rem;
}

/* Reading-work cards differ from anthologies only in these details */
.read-card__title-link {
    color: inherit;
    text-decoration: none;
}

.read-card__title-link:hover { color: var(--wk-ink); }

.read-card__ribbon--next {
    color: var(--wk-on-accent);
    background: var(--wk-poetry);
}

.read-card__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.read-card__actions .anth-card__read { width: auto; flex: 1; }


/* --------------------------------------------------------------------------
   18. SESSION LOG  (the handover trail)
   -------------------------------------------------------------------------- */
.log-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.6rem;
    position: relative;
}

/* The spine the markers sit on */
.log-list::before {
    content: '';
    position: absolute;
    left: 5px; top: 6px; bottom: 6px;
    width: 1px;
    background: linear-gradient(to bottom,
        rgba(var(--wk-accent-rgb), 0.5),
        rgba(var(--wk-accent-rgb), 0.08));
}

.log-entry {
    position: relative;
    padding: 1rem 1.2rem;
    margin-bottom: 0.85rem;
    background: var(--wk-surface-2);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius-sm);
    transition: border-color 0.2s var(--wk-ease);
}

.log-entry:hover { border-color: rgba(var(--wk-accent-rgb), 0.55); }

.log-entry__marker {
    position: absolute;
    left: -1.6rem;
    top: 1.3rem;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--wk-accent);
    box-shadow: 0 0 0 3px rgba(var(--wk-accent-rgb), 0.18);
}

.log-entry__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.8rem;
    margin-bottom: 0.4rem;
}

.log-entry__date {
    font-family: var(--wk-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--wk-accent);
}

.log-entry__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    font-family: var(--wk-sans);
    font-size: 0.72rem;
    color: var(--wk-muted);
    background: rgba(var(--wk-accent-rgb), 0.12);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: 999px;
    text-decoration: none;
}

.log-entry__chip--link:hover { color: var(--wk-accent); }

.log-entry__work {
    font-family: var(--wk-display);
    font-size: 1rem;
    margin: 0 0 0.3rem;
}

.log-entry__work a { color: var(--wk-ink); text-decoration: none; }
.log-entry__work a:hover { color: var(--wk-accent); }

.log-entry__reader {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--wk-sans);
    font-size: 0.88rem;
    color: var(--wk-muted);
    margin: 0 0 0.35rem;
}

.log-entry__reader i { opacity: 0.7; font-size: 0.8rem; }

.log-entry__segment {
    padding: 1px 9px;
    font-size: 0.75rem;
    color: var(--wk-faint);
    border: 1px dashed rgba(var(--wk-accent-rgb), 0.35);
    border-radius: 999px;
}

.log-entry__stopped {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--wk-read);
    font-size: 0.95rem;
    color: var(--wk-ink);
    margin: 0.5rem 0 0;
}

.log-entry__stopped i { color: var(--wk-accent); font-size: 0.82rem; }

.log-entry__notes {
    font-family: var(--wk-read);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--wk-muted);
    margin: 0.5rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(var(--wk-accent-rgb), 0.2);
}

.log-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 1.75rem;
    font-family: var(--wk-read);
    font-style: italic;
    color: var(--wk-muted);
    border: 1px dashed rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius-sm);
}


/* --------------------------------------------------------------------------
   19. NARRATOR DESK
   -------------------------------------------------------------------------- */
.narrator-desk {
    padding: 1.6rem 1.75rem;
    margin-bottom: 3.5rem;
    background: linear-gradient(135deg,
        rgba(var(--wk-panel-rgb), 0.28) 0%,
        var(--wk-surface-2) 100%);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.4);
    border-radius: var(--wk-radius);
    box-shadow: 0 8px 28px rgba(var(--wk-shadow-rgb), 0.28);
}

.narrator-desk__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-bottom: 0.9rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(var(--wk-accent-rgb), 0.26);
}

.narrator-desk__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--wk-display);
    font-size: 1.25rem;
    color: var(--wk-accent);
    margin: 0;
}

.narrator-desk__note {
    font-family: var(--wk-read);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--wk-muted);
    margin: 0;
}

.narrator-form { margin: 0; }

.narrator-form--inline {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.9rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px dashed rgba(var(--wk-accent-rgb), 0.26);
}

.narrator-form--inline .narrator-form__field { flex: 1; min-width: 240px; }

.narrator-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem 1.15rem;
}

.narrator-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.narrator-form__field--wide { grid-column: 1 / -1; }

.narrator-form__label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--wk-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wk-faint);
    margin: 0;
}

.narrator-form__req { color: var(--wk-prose); }

/* The form widgets carry .works-input / .works-select from the form class */
.narrator-form select.works-select,
.narrator-form input.works-input,
.narrator-form textarea.works-input {
    width: 100%;
}

.narrator-form textarea.works-input {
    font-family: var(--wk-read);
    line-height: 1.6;
    resize: vertical;
}

.narrator-form__help,
.narrator-form__hint {
    font-family: var(--wk-read);
    font-style: italic;
    font-size: 0.82rem;
    color: var(--wk-muted);
}

.narrator-form__error {
    font-family: var(--wk-sans);
    font-size: 0.8rem;
    color: var(--wk-prose);
}

.narrator-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.narrator-log { margin-top: 0.25rem; }

.narrator-log__summary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    font-family: var(--wk-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--wk-accent);
    cursor: pointer;
    list-style: none;
    background: rgba(var(--wk-accent-rgb), 0.12);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.4);
    border-radius: 999px;
    transition: all 0.25s var(--wk-ease);
}

.narrator-log__summary::-webkit-details-marker { display: none; }

.narrator-log__summary:hover {
    background: rgba(var(--wk-accent-rgb), 0.2);
    border-color: rgba(var(--wk-accent-rgb), 0.6);
}

.narrator-log[open] .narrator-log__summary { margin-bottom: 1.25rem; }


/* --------------------------------------------------------------------------
   20. READING RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .now-reading {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.25rem;
    }

    .now-reading__cover {
        max-width: 190px;
        margin: 0 auto;
    }

    .metric { padding: 1.1rem 1rem; }
    .metric__value { font-size: 1.8rem; }

    .narrator-desk { padding: 1.25rem; }
    .narrator-form--inline .narrator-form__field { min-width: 100%; }
    .narrator-form__actions .works-btn { width: 100%; }

    .log-list { padding-left: 1.35rem; }
    .log-entry__marker { left: -1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
    .metric,
    .log-entry,
    .narrator-log__summary { transition: none !important; }
    .metric:hover { transform: none; }
}


/* ==========================================================================
   EVENTS

   Poster-first cards. Everything resolves through the same tokens, so the
   events pages follow the active theme like the rest.
   ========================================================================== */

/* --------------------------------------------------------------------------
   21. EVENT CARDS
   -------------------------------------------------------------------------- */
.event-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--wk-surface);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius);
    box-shadow: var(--wk-shadow);
    transition: transform 0.3s var(--wk-ease),
                box-shadow 0.3s var(--wk-ease),
                border-color 0.3s var(--wk-ease);
}

.event-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--wk-accent-rgb), 0.55);
    box-shadow: var(--wk-shadow-up);
}

.event-card--live {
    border-color: rgba(var(--wk-accent-rgb), 0.6);
    box-shadow: var(--wk-shadow), 0 0 0 1px rgba(var(--wk-accent-rgb), 0.25);
}

.event-card__poster-link { display: block; text-decoration: none; }

.event-card__poster {
    position: relative;
    /* A 4:5 poster made each card roughly 450px of artwork before any text.
       This is a teaser — the detail page shows the poster in full. */
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--wk-media-bg);
}

.event-card__poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Posters put the title at the top, so crop from the bottom */
    object-position: top center;
    display: block;
    transition: transform 0.5s var(--wk-ease);
}

.event-card:hover .event-card__poster-img { transform: scale(1.04); }

.event-card__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, rgba(6, 12, 16, 0.72) 100%);
    pointer-events: none;
}

/* No poster: set the date as the artwork instead of showing an empty box */
.event-card__poster-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    padding: 1.5rem;
    text-align: center;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(var(--wk-accent-rgb), 0.12), transparent 70%),
        linear-gradient(165deg, var(--wk-cover-a) 0%, var(--wk-cover-b) 100%);
}

.event-card__fallback-day {
    font-family: var(--wk-display);
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 0.95;
    color: var(--wk-accent);
}

.event-card__fallback-month {
    font-family: var(--wk-sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wk-muted);
}

.event-card__fallback-rule {
    width: 46px;
    height: 1px;
    background: rgba(var(--wk-accent-rgb), 0.55);
    margin: 4px 0;
}

.event-card__fallback-title {
    font-family: var(--wk-read);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--wk-ink);
    opacity: 0.85;
}

/* Torn-off calendar chip over a real poster */
.event-card__datechip {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    padding: 6px 8px 5px;
    border-radius: 8px;
    background: rgba(10, 14, 18, 0.86);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.4);
    backdrop-filter: blur(6px);
    box-shadow: 0 3px 12px rgba(var(--wk-shadow-rgb), 0.4);
}

.event-card__datechip-day {
    font-family: var(--wk-display);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    color: #f3dc9a;
}

.event-card__datechip-month {
    font-family: var(--wk-sans);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #d9cbb0;
}

/* ── Badges ── */
.event-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    font-family: var(--wk-sans);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
}

.event-badge--live {
    color: #0d1f13;
    background: #7bd39a;
    box-shadow: 0 2px 12px rgba(123, 211, 154, 0.35);
}

.event-badge--past {
    color: #e8e2d6;
    background: rgba(10, 14, 18, 0.82);
    border: 1px solid rgba(232, 226, 214, 0.28);
}

/* Sits in the flow on the detail page rather than over a poster */
.event-badge--static { position: static; }

.event-badge__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0d1f13;
    animation: eventPulse 1.8s ease-in-out infinite;
}

@keyframes eventPulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.72); }
}

/* ── Body ── */
.event-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1rem 1.15rem 1.15rem;
}

.event-card__when {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--wk-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--wk-muted);
    margin: 0 0 0.4rem;
}

.event-card__when i { opacity: 0.7; }

.event-card__countdown {
    padding: 1px 9px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--wk-accent);
    background: rgba(var(--wk-accent-rgb), 0.12);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: 999px;
}

.event-card__title {
    font-family: var(--wk-display);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.28;
    margin: 0 0 0.3rem;
}

.event-card__title a { color: var(--wk-accent); text-decoration: none; }
.event-card__title a:hover { color: var(--wk-ink); }

.event-card__where {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--wk-read);
    font-style: italic;
    font-size: 0.87rem;
    color: var(--wk-faint);
    margin: 0 0 0.5rem;
}

.event-card__desc {
    font-family: var(--wk-sans);
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--wk-muted);
    margin: 0 0 0.85rem;
}

.event-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
}


/* --------------------------------------------------------------------------
   21b. FEATURED (LIVE) EVENT — sideways, so it does not swamp the page
   -------------------------------------------------------------------------- */
.event-featured-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.event-featured {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 1.5rem;
    padding: 1.25rem;
    background: var(--wk-surface);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.55);
    border-radius: var(--wk-radius);
    box-shadow: var(--wk-shadow);
}

/* No poster: let the text use the full width. Set from the template rather
   than with :has(), so it works regardless of browser support. */
.event-featured--noposter { grid-template-columns: 1fr; }

.event-featured__poster {
    display: block;
    align-self: start;
    overflow: hidden;
    border-radius: var(--wk-radius-sm);
    background: var(--wk-media-bg);
    box-shadow: 0 6px 20px rgba(var(--wk-shadow-rgb), 0.38);
}

.event-featured__poster img {
    display: block;
    width: 100%;
    height: auto;
    /* Keeps a tall poster from setting the height of the whole panel */
    max-height: 260px;
    object-fit: cover;
    object-position: top center;
}

.event-featured__body { display: flex; flex-direction: column; }

.event-featured__status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 0 0 0.6rem;
}

.event-featured__until {
    font-family: var(--wk-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--wk-muted);
}

.event-featured__title {
    font-family: var(--wk-display);
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.6rem;
}

.event-featured__title a { color: var(--wk-accent); text-decoration: none; }
.event-featured__title a:hover { color: var(--wk-ink); }

.event-featured__facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin: 0 0 0.75rem;
    padding: 0;
}

.event-featured__facts li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--wk-sans);
    font-size: 0.85rem;
    color: var(--wk-muted);
}

.event-featured__facts i { color: var(--wk-accent); opacity: 0.8; font-size: 0.8rem; }

.event-featured__desc {
    font-family: var(--wk-sans);
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--wk-muted);
    margin: 0 0 1rem;
}

.event-featured__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: auto;
}


/* --------------------------------------------------------------------------
   21c. PAST EVENT ROWS — compact, so a short list stays a short list
   -------------------------------------------------------------------------- */
.event-row-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.event-row {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    background: var(--wk-surface-2);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.22);
    border-radius: var(--wk-radius-sm);
    transition: border-color 0.22s var(--wk-ease),
                background 0.22s var(--wk-ease),
                transform 0.22s var(--wk-ease);
}

.event-row:hover {
    border-color: rgba(var(--wk-accent-rgb), 0.5);
    background: rgba(var(--wk-accent-rgb), 0.08);
    transform: translateX(3px);
}

.event-row__thumb {
    display: block;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--wk-media-bg);
}

.event-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.event-row__thumb-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: linear-gradient(165deg, var(--wk-cover-a) 0%, var(--wk-cover-b) 100%);
}

.event-row__thumb-day {
    font-family: var(--wk-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--wk-accent);
}

.event-row__thumb-month {
    font-family: var(--wk-sans);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wk-muted);
}

.event-row__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.event-row__when {
    font-family: var(--wk-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wk-faint);
}

.event-row__title {
    font-family: var(--wk-display);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--wk-accent);
    /* Long titles must not push the chevron off the row */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-row:hover .event-row__title { color: var(--wk-ink); }

.event-row__where {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--wk-read);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--wk-muted);
}

.event-row__where i { font-size: 0.72rem; opacity: 0.7; }

.event-row__go {
    color: var(--wk-faint);
    font-size: 0.85rem;
    transition: transform 0.22s var(--wk-ease), color 0.22s var(--wk-ease);
}

.event-row:hover .event-row__go {
    color: var(--wk-accent);
    transform: translateX(3px);
}


/* --------------------------------------------------------------------------
   22. EVENT DETAIL
   -------------------------------------------------------------------------- */
.event-detail {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    padding: 1.75rem;
    margin-bottom: 2.5rem;
    background: var(--wk-surface);
    border: 1px solid rgba(var(--wk-accent-rgb), 0.26);
    border-radius: var(--wk-radius);
    box-shadow: var(--wk-shadow);
}

.event-detail--noposter { grid-template-columns: 1fr; }

.event-detail__poster {
    overflow: hidden;
    border-radius: var(--wk-radius-sm);
    background: var(--wk-media-bg);
    box-shadow: 0 8px 26px rgba(var(--wk-shadow-rgb), 0.42);
}

.event-detail__poster img {
    display: block;
    width: 100%;
    height: auto;
}

.event-detail__body { display: flex; flex-direction: column; }

.event-detail__status { margin: 0 0 0.75rem; }

.event-detail__title {
    font-family: var(--wk-display);
    font-size: clamp(1.6rem, 3.6vw, 2.3rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--wk-accent);
    margin: 0 0 1rem;
}

.event-detail__facts {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0 0 1.25rem;
    padding: 0;
}

.event-detail__facts li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--wk-sans);
    font-size: 0.92rem;
    color: var(--wk-ink);
}

.event-detail__facts i {
    width: 16px;
    text-align: center;
    color: var(--wk-accent);
    opacity: 0.85;
    font-size: 0.85rem;
}

.event-detail__closed {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0.7rem 1rem;
    margin: 0 0 1rem;
    font-family: var(--wk-read);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--wk-muted);
    border: 1px dashed rgba(var(--wk-accent-rgb), 0.3);
    border-radius: var(--wk-radius-sm);
}

.event-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: auto;
}

/* "by 12 Mar" under a Register button */
.works-btn__sub {
    font-family: var(--wk-sans);
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.75;
    margin-left: 2px;
}

.event-about {
    max-width: 780px;
    margin-inline: auto;
}

.event-about__text {
    font-family: var(--wk-read);
    font-size: 1.08rem;
    line-height: 1.85;
    color: var(--wk-ink);
}

.event-about__text p { color: inherit; margin-bottom: 1.2rem; }
.event-about__text p:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   23. EVENTS RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Keep the live event sideways on tablets, just narrower */
    .event-featured { grid-template-columns: 150px 1fr; gap: 1.1rem; }
    .event-featured__poster img { max-height: 210px; }
}

@media (max-width: 575.98px) {
    /* On a phone the poster goes on top, but capped — a portrait poster at full
       width would otherwise fill the screen before the details are reached. */
    .event-featured {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }

    .event-featured__poster {
        max-width: 180px;
        margin: 0 auto;
    }

    .event-featured__poster img { max-height: 220px; }

    .event-featured__actions .works-btn { flex: 1; justify-content: center; }

    /* Tighter rows, and the location drops out to keep them to two lines */
    .event-row {
        grid-template-columns: 46px 1fr auto;
        gap: 0.8rem;
        padding: 0.65rem 0.8rem;
    }

    .event-row__thumb { width: 46px; height: 46px; }
    .event-row__where { display: none; }
}

@media (max-width: 767.98px) {
    .event-detail {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.25rem;
    }

    .event-detail__poster { max-width: 260px; margin: 0 auto; }

    .event-card__actions .works-btn { flex: 1; justify-content: center; }

    /* Full width on a phone, so go wider still than the 3:2 used on desktop —
       a few cards should be scrollable, not a screen each. */
    .event-card__poster { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
    .event-card,
    .event-card__poster-img,
    .event-row,
    .event-row__go { transition: none !important; }
    .event-card:hover { transform: none; }
    .event-card:hover .event-card__poster-img { transform: none; }
    .event-row:hover { transform: none; }
    .event-row:hover .event-row__go { transform: none; }
    .event-badge__pulse { animation: none; }
}