/* Almanack CSS - main stylesheet */

/* ==========================================================================
   View Transitions
   ========================================================================== */
@view-transition {
    navigation: auto;
}

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */
:root {
    /* Colors */
    --color-text: #1a1a1a;
    --color-bg: #fcfcfa;
    --color-bg-center: #fcfcfa;
    --color-bg-edge: #fcfcfa;
    --color-muted: #666;
    --color-subtle: #999;
    --color-dim: #444;
    --color-faint: #777;
    --color-dark: #333;
    --color-light: #ccc;
    --color-border: #aaa;
    --color-rule: #e0e0e0;
    --color-code-bg: #f5f5f5;

    /* Fonts */
    --font-display: "Fell English", "Big Caslon Adjusted", "Big Caslon", "Hoefler Text", Garamond, serif;
    --font-body: "EB Garamond", "Baskerville Adjusted", Baskerville, "Palatino Linotype", Palatino, serif;
    --font-mono: Iosevka, Menlo, Monaco, Consolas, 'Lucida Console', monospace;

    /* Illumination pigments */
    --illum-ultramarine: #2F4A7A;
    --illum-ultramarine-wash: rgba(47, 74, 122, 0.18);
    --link-underline: var(--illum-ultramarine-wash);
    --illum-ultramarine-fn: rgba(47, 74, 122, 0.60);
    --illum-vermilion: #A33A2B;
    --illum-verdigris: #2F6F62;
    --illum-saffron: #B8892E;
    --illum-saffron-rule: rgba(184, 137, 46, 0.45);
    --illum-saffron-text: #8c7025;

    /* Category washes */
    --wash-ultramarine: rgba(47, 74, 122, 0.12);
    --wash-ultramarine-strong: rgba(47, 74, 122, 0.18);
    --wash-vermilion: rgba(163, 58, 43, 0.12);
    --wash-verdigris: rgba(47, 111, 98, 0.12);
    --wash-saffron: rgba(184, 137, 46, 0.12);
    --wash-saffron-deep: rgba(184, 137, 46, 0.20);
    --wash-parchment: rgba(138, 109, 59, 0.10);

    /* Structural warm */
    --wash-warm-border: rgba(138, 109, 59, 0.28);

    /* Breakpoints (for reference - can't use in media queries) */
    --breakpoint-tablet: 768px;
    --breakpoint-mobile: 640px;

    /* Layout scaling (see doc/05-process/plans/2026-03-10-proportional-scaling-design.md) */
    --margin-font-ratio: 0.8;
    --body-font-max: 1.3rem;
    --body-font-preferred: 2.1vw;
    --body-font-floor: 1rem;
}

html {
    color: var(--color-text);
    background-color: var(--color-bg);
    scrollbar-gutter: stable both-edges;
    background-image: none;
}

/* Adjusted fallback fonts - match metrics to reduce layout shift during font load */
@font-face {
    font-family: "Baskerville Adjusted";
    src: local("Baskerville");
    size-adjust: 100%;         /* EB Garamond metrics close to Baskerville */
    ascent-override: 90%;
    descent-override: 25%;
}

@font-face {
    font-family: "Big Caslon Adjusted";
    src: local("Big Caslon Medium");
    size-adjust: 92.1%;        /* Match Fell English x-height: 44.0/47.8 */
    ascent-override: 90.5%;
    descent-override: 36.3%;
}

/* Font faces - paths relative to /static/css/, WOFF2 with TTF fallback */
@font-face {
    font-family: "Fell English";
    src: url("../fonts/IMFellEnglishSC-Regular.woff2") format("woff2"),
         url("../fonts/IMFellEnglishSC-Regular.ttf") format("truetype");
    font-display: block;  /* Hide title until font loads (up to 3s) */
}

@font-face {
    font-family: "EB Garamond";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/EBGaramond12-Regular.woff2") format("woff2"),
         url("../fonts/EBGaramond12-Regular.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "EB Garamond";
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/EBGaramond12-Italic.woff2") format("woff2"),
         url("../fonts/EBGaramond12-Italic.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: italic;
    font-weight: 500;
    src: url("../fonts/CormorantGaramond-MediumItalic.woff2") format("woff2"),
         url("../fonts/CormorantGaramond-MediumItalic.ttf") format("truetype");
    font-display: swap;
}

/* Masthead container — illuminated rule with saffron sunburst */
.masthead {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    padding: 0.5em 2.5% 0.45em;
    margin-bottom: 0.35em;
    position: relative;
    overflow: visible;
    transition: padding-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                padding-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: radial-gradient(
        ellipse 50% 90% at 50% 55%,
        rgba(184, 137, 46, 0.06) 0%,
        rgba(184, 137, 46, 0.03) 40%,
        transparent 100%
    );
}

.masthead.expanded {
    padding-top: 4em;
    padding-bottom: 3em;
}

/* Celestial canvas: 3D horizon sphere behind the masthead text.
   Extends above the masthead into body padding so celestial bodies
   aren't clipped when they orbit above the frontispiece. */
.horizon-canvas {
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: calc(100% + 50px);
    pointer-events: none;
    z-index: 1;
}

/* When interactive (armillary mode), canvas captures drags */
.horizon-canvas.interactive {
    pointer-events: auto;
    cursor: grab;
    z-index: 10;
}

.horizon-canvas.dragging {
    cursor: grabbing;
}

/* Armillary time slider: hidden by default, shown on touch devices when expanded */
.armillary-time-slider { display: none; }

@media (pointer: coarse) {
    .masthead.expanded .armillary-time-slider {
        display: block;
        position: absolute;
        bottom: 0.8em;
        left: 10%;
        width: 80%;
        z-index: 12;          /* above canvas (10) and meta-left (11) */
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        height: 2em;          /* generous touch target */
        opacity: 0.7;
        transition: opacity 0.2s ease;
    }
    .masthead.expanded .armillary-time-slider:active { opacity: 1; }

    /* Track: thin golden line, faded at edges */
    .armillary-time-slider::-webkit-slider-runnable-track {
        height: 2px;
        background: linear-gradient(to right,
            transparent,
            rgba(184,137,46,0.5) 10%,
            rgba(184,137,46,0.5) 90%,
            transparent);
    }
    /* Thumb: small golden circle */
    .armillary-time-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: rgba(184,137,46,0.8);
        border: 1px solid rgba(184,137,46,0.4);
        margin-top: -7px;
    }
    /* Firefox track */
    .armillary-time-slider::-moz-range-track {
        height: 2px;
        border: none;
        background: linear-gradient(to right,
            transparent,
            rgba(184,137,46,0.5) 10%,
            rgba(184,137,46,0.5) 90%,
            transparent);
    }
    /* Firefox thumb */
    .armillary-time-slider::-moz-range-thumb {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: rgba(184,137,46,0.8);
        border: 1px solid rgba(184,137,46,0.4);
    }
}

/* Ensure masthead children (text) sit above celestial bodies */
.meta-left, .meta-right, .frontispiece-wrapper {
    position: relative;
    z-index: 1;
}

/* Frontispiece period: clickable armillary activation point */
.fp-period {
    cursor: grab;
}

/* Meta-left time hint shown during armillary mode */
.meta-left small {
    font-family: var(--font-body);
    font-size: 0.65rem;
    opacity: 0.6;
    letter-spacing: 0.02em;
}

/* During armillary mode, meta-left must sit above the interactive canvas */
.masthead.expanded .meta-left {
    z-index: 11;
}

/* Almanack info block (rise/set, phase) in armillary mode */
.meta-left .almanack-info {
    display: block;
    font-size: 0.65rem;
    white-space: nowrap;
    line-height: 1.55;
    margin: 0.2em 0 0.3em;
    opacity: 1;
}

.meta-left .almanack-info .body-sym {
    display: inline-block;
    width: 1.1em;
    text-align: center;
}

/* UI controls (location, drag hint) — visually recessed */
.meta-left .almanack-ui {
    display: block;
    font-size: 0.6rem;
    line-height: 1.5;
    opacity: 0.5;
    margin-top: 0.1em;
    border-top: 1px solid rgba(184, 137, 46, 0.15);
    padding-top: 0.25em;
}

.meta-left .almanack-ui a {
    color: var(--illum-saffron-text);
    text-decoration: none;
    opacity: 0.8;
}

.meta-left .almanack-ui a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Illuminated rule: saffron top + vermilion dots + ultramarine bottom */
.masthead::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 2%;
    right: 2%;
    height: 5px;
    background:
        linear-gradient(to right, transparent, var(--illum-saffron-rule) 15%, var(--illum-saffron-rule) 85%, transparent) top center / 100% 1px no-repeat,
        radial-gradient(circle, var(--illum-vermilion) 1px, transparent 1.5px) center center / 8em 5px repeat-x,
        linear-gradient(to right, transparent, rgba(47, 74, 122, 0.25) 15%, rgba(47, 74, 122, 0.25) 85%, transparent) bottom center / 100% 1px no-repeat;
}

.frontispiece {
    display: block;
    font-size: 5em;
    font-family: var(--font-display);
    text-align: center;
    margin: 0;
    line-height: 1;
    text-decoration: none;
    color: inherit;
}

/* Frontispiece wrapper: centre column of masthead flex layout */
.frontispiece-wrapper {
    flex-grow: 2;
    text-align: center;
}

.frontispiece-wrapper .frontispiece {
    margin-bottom: 0;
}

/* Meta info on the wings */
.meta-left, .meta-right {
    flex-grow: 1;
    font-family: var(--font-display);
    font-size: 1rem;
    width: 15%;
    color: var(--illum-saffron-text);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.meta-right {
    text-align: right;
    overflow: visible;
    justify-content: flex-end;
    padding-bottom: 0.3em;
}

/* Pricing label inside meta-right — positioned at the top of the column
   so the stamp can overlap it upward without pushing the masthead down. */
.identity-pricing {
    font-size: 0.85em;
    opacity: 0.8;
    position: absolute;
    top: 0.3em;
    right: 0;
}

/* Subscriber's stamp — rubber-stamp impression, askew and bold.
   Uses Cormorant Garamond italic for a hand-inscribed calligraphic feel
   distinct from both the display (Fell English SC) and body (EB Garamond). */
.masthead-stamp {
    font-family: "Cormorant Garamond", var(--font-body) !important;
    font-style: italic;
    font-weight: 500;
    font-size: 0.58em;
    line-height: 1.1;
    text-align: center;
    margin-top: 0.1em;
    padding: 0.15em 0.35em 0.1em;
    border: 1.5px double rgba(140, 50, 30, 0.45);
    border-radius: 2px;
    transform: rotate(-3deg);
    transform-origin: center center;
    color: rgba(140, 50, 30, 0.65);    /* faded stamp ink */
    background: var(--color-bg, #fcfcfa);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.08);
    display: inline-block;
    max-width: 12em;
    align-self: flex-end;
    margin-right: 1.5em;
}

.masthead-stamp:empty { border: none; padding: 0; }

/* stamp-fit.js marks a stamp with no identity box in it (pages outside
   the identity box's `pages:`); without JS the noscript fallback shows. */
.masthead-stamp.stamp-empty { display: none; }

/* Desktop: size the stamp to its column. The limit is vertical: the stamp
   must stay below the price label. That room is fixed, but the longest
   generated name ("Fellow Worker Montgomery Bramblethwaite") wraps onto
   more lines as the column narrows. Measured, the four-line stamp fits
   at up to 5.4% of the column width; 5.3cqi leaves a little slack.
   Older browsers keep the 0.58em above. */
@media (pointer: fine) and (min-width: 701px) {
    .meta-right {
        container-type: inline-size;
    }
    .masthead-stamp {
        font-size: 5.3cqi;
        max-width: none;
        margin-right: 0.5em;
    }
}

/* With JS, stamp-fit.js moves the stamp beside the price, envelope-style,
   and sets its font-size, right, top and max-width to fill the room. */
.masthead-stamp.stamp-fitted {
    position: absolute;
    translate: 0 -50%;
    width: max-content;
    box-sizing: border-box;
    margin: 0;
}

.masthead-stamp.stamp-fitted .stamp-name {
    text-wrap: balance;
}

/* Reset margin-box positioning when placed inside the masthead */
.masthead-stamp .margin-box {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.masthead-stamp .stamp-directed {
    display: block;
    font-size: 0.82em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.masthead-stamp .stamp-name {
    display: block;
    font-family: "Cormorant Garamond", var(--font-body);
    font-style: italic;
    font-weight: 500;
    font-size: 1.05em;
    color: rgba(140, 50, 30, 0.75);
    text-decoration: none;
    margin: 0;
}

.masthead-stamp .stamp-name:hover {
    color: rgba(140, 50, 30, 0.95);
}

.masthead-stamp .stamp-balance {
    display: block;
    font-size: 0.85em;
    margin-top: 0.05em;
}

.masthead-stamp .stamp-balance.negative {
    color: rgba(180, 30, 20, 0.85);   /* urgent red for debts */
}

.masthead-stamp .stamp-balance.positive {
    color: rgba(30, 90, 50, 0.8);
}

.masthead-stamp .stamp-links {
    display: block;
    font-size: 0.72em;
    margin-top: 0.05em;
    opacity: 0.55;
}

.masthead-stamp .stamp-links a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.masthead-stamp .stamp-links a:hover {
    color: var(--illum-vermilion);
}

/* Centered navigation strip below masthead text, above the rule */
.masthead-nav {
    flex-basis: 100%;
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
    white-space: nowrap;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0;
    position: relative;
    z-index: 1;
    margin-top: 0.2em;
}

/* Page links: ultramarine (Chronology, Today, Subject Index) */
.masthead-nav a {
    color: var(--illum-ultramarine);
    text-decoration: none;
}

/* Relative navigation: verdigris (Previously, Latterly) */
.masthead-nav .nav-rel {
    color: var(--illum-verdigris);
}

.masthead-nav a:hover:not(.nav-disabled) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Washed-out nav items (no valid target) — keeps verdigris tint */
.masthead-nav .nav-disabled {
    cursor: default;
    opacity: 0.45;
}

/* Current page: rubricated */
.masthead-nav .nav-current {
    color: var(--illum-vermilion);
}

/* Middot separators between nav items */
.masthead-nav .nav-sep {
    color: var(--color-dim);
    margin: 0 0.4em;
}

/* Body layout */
body {
    margin: 0 auto;
    max-width: 43em;
    padding: 50px;
    hyphens: auto;
    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    font-size: clamp(1rem, 2.1vw, 1.3rem);
    font-family: var(--font-body);
    line-height: 1.5;
    /* OpenType features: standard + discretionary ligatures, contextual alternates */
    font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-feature-settings: "liga" 1, "clig" 1, "dlig" 1, "calt" 1, "onum" 1, "pnum" 1;
}

/* Main content narrower to align with masthead center */
main {
    padding-left: 15%;
    padding-right: 15%;
}

/* Three-column margins layout */
/* Override body and main constraints when using margins layout */
body:has(.margins-layout) {
    max-width: 72rem;
    padding-left: 3rem;
    padding-right: 3rem;
}

/* Tighter body padding when viewport is narrow but three columns still showing */
@media (max-width: 1000px) {
    body:has(.margins-layout) {
        padding-left: 0;
        padding-right: 0;
    }
}

main:has(.margins-layout) {
    padding-left: 0;
    padding-right: 0;
}

.margins-layout {
    display: grid;
    /* Proportional columns: margins are 0.33x the center width */
    /* All columns shrink together below ~1000px until breakpoint */
    grid-template-columns:
        minmax(10em, 0.33fr)
        minmax(22em, 1fr)
        minmax(10em, 0.33fr);
    gap: 1.2em;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

.margin {
    position: relative;
    font-size: 0.8em;
    line-height: 1.4;
    font-family: var(--font-body);
}

.margin-left {
    grid-column: 1;
}

.body-text {
    grid-column: 2;
}

.margin-right {
    grid-column: 3;
}

/* Full-width title — spans all columns on desktop (broadside style) */
.article-title {
    grid-column: 1 / -1;
    text-align: center;
}

/* ==========================================================================
   Mobile & Narrow Screen Modes

   Three distinct layout modes handle margins on constrained viewports:

   1. NO-JS TOUCH (pointer: coarse, no .swipe-margins-enabled)
      - Single column, margins hidden, inline footnotes at bottom
      - Fallback when JavaScript fails or is disabled on touch devices

   2. JS-ENABLED SWIPE (pointer: coarse + .swipe-margins-enabled)
      - Three 90vw columns with horizontal scroll-snap
      - Manicules peek in 5vw gutters as swipe affordances
      - Footnotes hidden (sidenotes visible in margins)

   3. NARROW NON-TOUCH (pointer: fine + max-width: 800px)
      - Single column, margins hidden, inline footnotes
      - For desktop browsers resized to narrow width
   ========================================================================== */

/* Mode 1: No-JS fallback for narrow touch devices - single column with inline footnotes */
/* Wide touch devices (e.g. iPad landscape) get the regular three-column grid */
@media (pointer: coarse) and (max-width: 700px) {
    /* Restore comfortable reading size — clamp() shrinks body font for
       three-column scaling, but fallback is single-column so we want
       a proper book-text size again */
    body {
        font-size: 1.2rem;
    }
    .margins-layout {
        display: block;
        max-width: 43em;
        padding: 0 1.5em;
    }
    .margin-left,
    .margin-right {
        display: none;
    }
    .footnote {
        display: block;
    }
    /* Footnote figures: constrain to ~1/3 width in single-column fallback */
    .footnote .figure {
        max-width: 33%;
    }
    /* Flatten stamp on narrow touch devices */
    .masthead-stamp {
        transform: none;
        border: none;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }
}

/* Mode 3: Narrow-screen fallback for non-touch devices */
@media (pointer: fine) and (max-width: 700px) {
    /* Restore comfortable reading size in fallback (see Mode 1 comment) */
    body {
        font-size: 1.2rem;
    }
    .margins-layout {
        display: block;
        max-width: 43em;
        padding: 0 1.5em;
    }
    .margin-left,
    .margin-right {
        display: none;
    }
    /* Flatten stamp in single-column degraded layout */
    .masthead-stamp {
        transform: none;
        border: none;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }
}

/* Mode 2: JS-enabled swipe layout for touch devices */
@media (pointer: coarse) {
    /* Remove body padding to allow full-width swipe */
    body.swipe-margins-enabled {
        padding: 0;
        overflow-x: hidden;
    }

    .swipe-margins-enabled .margins-layout {
        display: grid;
        /* 90vw columns with center snap = 5vw peek gutters on each side */
        grid-template-columns: 90vw 90vw 90vw;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        /* Hide scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;

        /* Reset constraints */
        max-width: none;
        width: 100%;
        padding: 0;
        gap: 0;
    }

    .swipe-margins-enabled .margins-layout::-webkit-scrollbar {
        display: none;
    }

    .swipe-margins-enabled aside.margin.margin-left,
    .swipe-margins-enabled .body-text,
    .swipe-margins-enabled aside.margin.margin-right {
        scroll-snap-align: center;
        scroll-snap-stop: always;
        min-height: 100vh;
        box-sizing: border-box;
    }

    /* Main column gets comfortable padding */
    .swipe-margins-enabled .body-text {
        padding: 1rem;
    }

    /* Margins get minimal padding so manicules peek into view */
    .swipe-margins-enabled aside.margin.margin-left,
    .swipe-margins-enabled aside.margin.margin-right {
        padding: 0.25rem;
        display: flex;
        flex-direction: column;
    }

    /* Re-enable margin boxes once they've been moved to margin columns */
    .swipe-margins-enabled .margin-box.margin-left,
    .swipe-margins-enabled .margin-box.margin-right {
        display: block;
    }

    /* Swipe mode: keep title in center pane, not spanning all columns */
    .swipe-margins-enabled .article-title {
        grid-column: 2;
    }

    /* Hide inline margin-boxes still inside body-text */
    .swipe-margins-enabled .body-text > .margin-box:not(.margin-left):not(.margin-right) {
        display: none;
    }

    /* Sidenotes get constrained width, similar to desktop proportions.
       Never wider than the column: a left note is pinned to the column's
       right edge, so any excess would go past the left edge of the page,
       out of reach of scrolling. */
    .swipe-margins-enabled .sidenote {
        max-width: min(25em, 100%);
        width: auto;
    }

    /* Left margin: sidenote hugs the right edge (toward main column) */
    /* Negative margin nudges manicule further into peek gutter */
    .swipe-margins-enabled .sidenote.margin-left {
        align-self: flex-end;
        margin-right: -0.5rem;
    }

    /* Right margin: sidenote hugs the left edge (toward main column) */
    .swipe-margins-enabled .sidenote.margin-right {
        align-self: flex-start;
        margin-left: -0.5rem;
    }

    /* Accessibility note: display:none is intentional here, not visually-hidden.
       In swipe mode, sidenotes are fully visible in the margin columns, so
       footnotes at the bottom would be duplicate content. Screen readers should
       encounter the content once (as sidenotes), not twice. */
    .swipe-margins-enabled .footnote,
    .swipe-margins-enabled .footnotes {
        display: none;
    }
}

/* Publication name in title font (use *Almnck.*{.pub} in markdown) */
em.pub {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 800;
    text-shadow: 0.25px 0 0 currentColor;
}

/* Sidenote elements */
.sidenote {
    position: absolute;
    width: 100%;
    padding: 0.5em 0;
    display: flex;
    gap: 0.4em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, top 200ms ease-out;
}

/* Sidenotes materialize: fade in and float upward */
.sidenotes-ready .sidenote {
    opacity: 1;
    transform: translateY(0);
}

/* Disable transitions during programmatic repositioning to prevent jumping */
.repositioning .sidenote,
.repositioning .margin-box {
    transition: none !important;
}

/* Hide number, show manicule instead */
.sidenote-number {
    font-size: 1.1em;
    line-height: 1.3;
}

/* Hide number, manicule alone suffices */
.sidenote-numtext {
    display: none;
}

/* Left margin: content first, manicule on right pointing toward body */
.sidenote.margin-left {
    flex-direction: row;
}

.sidenote.margin-left .sidenote-number {
    order: 2;
    margin-left: auto;
}

.sidenote.margin-left .sidenote-number::after {
    content: "☞";
    color: var(--illum-ultramarine);
}

.sidenote.margin-left .sidenote-content {
    order: 1;
}

/* Right margin: manicule on left pointing toward body, then content */
.sidenote.margin-right {
    flex-direction: row;
}

.sidenote.margin-right .sidenote-number {
    order: 1;
}

.sidenote.margin-right .sidenote-number::before {
    content: "☜";
    color: var(--illum-ultramarine);
}

.sidenote.margin-right .sidenote-content {
    order: 2;
}

.sidenote-content {
    flex: 1;
    /* A flex item won't shrink below its longest word by default, so a
       long DOI or URL would push the note out of its column. */
    min-width: 0;
}

.sidenote-content p {
    margin: 0 0 0.5em 0;
}

.sidenote-content p:last-child {
    margin-bottom: 0;
}

/* Offset sidenotes: anchor marker stays at correct line, content floats down */
.sidenote-anchor-marker {
    position: absolute;
    display: none; /* Shown by JS when needed */
}

.sidenote.margin-left .sidenote-anchor-marker {
    right: 0;
}

.sidenote.margin-right .sidenote-anchor-marker {
    left: 0;
}

/* Hide the regular manicule when offset - the marker shows it instead */
.sidenote.sidenote-offset > .sidenote-number {
    visibility: hidden;
}

/* Dotted connector line from marker to content - emerges from manicule's wrist */
.sidenote-connector {
    position: absolute;
    opacity: 0;
    border-left: 1px dotted var(--illum-ultramarine-wash);
    width: 0;
    transition: opacity 0.6s ease;
}

/* Position connector on body-text side (near manicule finger) */
.sidenote.margin-left .sidenote-connector {
    right: 1.2rem;
}

.sidenote.margin-right .sidenote-connector {
    left: 1.2rem;
}

/* Show connector only on hover */
.sidenote.sidenote-offset:hover .sidenote-connector,
.sidenote.sidenote-offset.highlighted .sidenote-connector {
    opacity: 1;
}

/* Hide original footnotes when sidenotes are active */
.sidenotes-enabled .footnote {
    display: none;
}

/* Sidenote content - invisible border to prevent layout shift */
.sidenote .sidenote-content {
    border: 1px solid transparent;
    padding: 3px;
    transition: border-color 0.6s ease;
}

/* Ultramarine gutter accent on the body-text edge of sidenote content */
.sidenote.margin-left .sidenote-content {
    border-right: 1.5px solid var(--illum-ultramarine-wash);
}

.sidenote.margin-right .sidenote-content {
    border-left: 1.5px solid var(--illum-ultramarine-wash);
}

/* Highlight: brighten gutter border to full ultramarine (same width — no reflow) */
.sidenote.margin-left:hover .sidenote-content,
.sidenote.margin-left.highlighted .sidenote-content {
    border-right-color: var(--illum-ultramarine);
}
.sidenote.margin-right:hover .sidenote-content,
.sidenote.margin-right.highlighted .sidenote-content {
    border-left-color: var(--illum-ultramarine);
}

/* Brighten connector to match — solid line when active */
.sidenote:hover .sidenote-connector,
.sidenote.highlighted .sidenote-connector {
    border-left: 1px solid var(--illum-ultramarine);
}

.footnote-ref.highlighted {
    outline: 1px dotted var(--illum-ultramarine-wash);
    outline-offset: 1px;
}

/* Fragment link highlight (fades out) - for all margin elements */
.fragment-highlighted {
    animation: fragment-highlight 2s ease-out forwards;
}

@keyframes fragment-highlight {
    0%, 50% {
        box-shadow: 0 0 6px 2px var(--color-subtle);
    }
    100% {
        box-shadow: 0 0 6px 2px transparent;
    }
}

/* Sidenotes: glow around the dotted-border content area */
.sidenote.fragment-highlighted {
    animation: none;
}

.sidenote.margin-left.fragment-highlighted .sidenote-content {
    border-right-color: var(--illum-ultramarine);
    animation: fragment-highlight 2s ease-out forwards;
}
.sidenote.margin-right.fragment-highlighted .sidenote-content {
    border-left-color: var(--illum-ultramarine);
    animation: fragment-highlight 2s ease-out forwards;
}

/* Permalink affordance - appears on hover after delay */
.permalink-affordance {
    position: absolute;
    bottom: -0.5em;
    right: -0.5em;
    /* Large padding for easy hover target */
    padding: 0.8em 1em;
    font-size: 0.75rem;
    font-weight: bold;
    color: rebeccapurple;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    cursor: pointer;
    /* Keep it inside parent's clickable area */
    z-index: 10;
}

/* Paragraph permalinks sit in the right gutter, level with the first
   line, so they take no space inside the justified text. */
.maintext p[id^="p-"],
.maintext li[id^="p-"] {
    position: relative;
}

.maintext p[id^="p-"] > .permalink-affordance,
.maintext li[id^="p-"] > .permalink-affordance {
    top: -0.55em;
    bottom: auto;
    right: auto;
    left: 100%;
    padding: 0.55em 0.8em;
}

.permalink-affordance:hover {
    color: rebeccapurple;
    text-decoration: underline;
}

.permalink-affordance.visible {
    opacity: 0.6;
}

.permalink-affordance.visible:hover {
    opacity: 1;
}

/* Source affordance - appears on figures to link to source code */
.source-affordance {
    position: absolute;
    bottom: -0.5em;
    right: 2em; /* Position to the left of permalink */
    /* Large padding for easy hover target */
    padding: 0.8em 1em;
    font-size: 0.75rem;
    font-weight: bold;
    color: rebeccapurple;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    cursor: pointer;
    z-index: 10;
}

.source-affordance:hover {
    color: rebeccapurple;
    text-decoration: underline;
}

.source-affordance.visible {
    opacity: 0.6;
}

.source-affordance.visible:hover {
    opacity: 1;
}

/* Download affordance — appears on video figures */
.download-affordance {
    position: absolute;
    bottom: -0.5em;
    right: 4.5em; /* Position to the left of src */
    /* Large padding for easy hover target */
    padding: 0.8em 0.8em;
    font-size: 0.75rem;
    color: rebeccapurple;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
}

.download-affordance:hover {
    color: rebeccapurple;
}

.download-affordance.visible {
    opacity: 0.6;
}

.download-affordance.visible:hover {
    opacity: 1;
}

/* Ensure parent elements can position the permalink.
   Note: .sidenote and .margin-box are NOT included here because they need
   position: absolute for margin positioning, and absolute also creates
   a containing block for absolutely positioned children. */
.figure,
figure {
    position: relative;
}

/* Clip overflow so permalink doesn't extend outside element bounds */
.sidenote,
.margin-box {
    overflow: visible;
}

/* Hide footnotes section when sidenotes enabled */
.sidenotes-enabled .footnotes {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Show footnotes on narrow non-touch screens (touch devices use swipe mode) */
@media (pointer: fine) and (max-width: 700px) {
    .sidenotes-enabled .footnotes {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
    }
    .sidenotes-enabled .footnote {
        display: revert;
    }
    /* Footnote figures were designed for side-columns; constrain to ~1/3 width
       so they don't dominate the center column in fallback mode */
    .footnote .figure {
        max-width: 33%;
    }
}

/* Margin boxes - inline fallback for no-JS/mobile */
.margin-box {
    margin: 1.5em auto;
    max-width: 70%;
    padding: 1em;
    border-top: 1px solid var(--color-text);
    border-bottom: 1px solid var(--color-text);
    font-size: 1em;
}

/* Hide margin-boxes in margins-layout until JS positions them */
.margins-layout .margin-box {
    display: none;
}

/* JS enabled: boxes get absolutely positioned in margins */
.sidenotes-enabled .margin-box {
    position: absolute;
    width: calc(100% - 8px);
    box-sizing: border-box;
    margin: 0;
    max-width: none;
    border: none;
    padding: 0.5em 4px;
    scroll-snap-align: none;
}

/* Re-enable margin boxes once they've been moved to margin columns */
/* (overrides .margins-layout .margin-box { display: none } above) */
.sidenotes-enabled .margin-box.margin-left,
.sidenotes-enabled .margin-box.margin-right {
    display: block;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, top 200ms ease-out;
}

/* Margin boxes materialize with sidenotes after layout settles */
.sidenotes-ready .margin-box.margin-left,
.sidenotes-ready .margin-box.margin-right {
    opacity: 1;
    transform: translateY(0);
}

/* Margin box type variants */
.margin-box[data-type="quote"] {
    font-style: italic;
    border-left: 2px solid var(--color-text);
    padding-left: 0.5em;
    border-top: none;
    border-bottom: none;
}

.margin-box[data-type="quote"] em:not(.pub) {
    font-style: normal;
}

.margin-box[data-type="quote"] cite {
    display: block;
    margin-top: 0.5em;
    font-style: normal;
    font-size: 0.9em;
}

.margin-box[data-type="ad"] {
    border: 1px solid var(--color-text);
    padding: 0.5em;
    text-align: center;
}

.margin-box[data-type="aphorism"] {
    font-family: var(--font-display);
    text-align: center;
    font-size: 1rem;
}

.margin-box[data-type="poem"] {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.4;
    border-top: none;
    border-bottom: none;
    padding: 0.25em 0;
}

.margin-box[data-type="poem"] em:first-child {
    display: block;
    font-style: italic;
    font-weight: 600;
    margin-bottom: 0.75em;
    text-align: left;
}

/* Match sidenote spacing from body text */
/* Left margin: content flush left like sidenotes */
.margin-box[data-type="poem"].margin-left {
    padding-left: 0;
    padding-right: 2em;
}

/* Right margin: indent to match manicule + gap */
.margin-box[data-type="poem"].margin-right {
    padding-left: 2em;
    padding-right: 0;
}

/* Top ornament */
.margin-box[data-type="poem"]::before {
    content: "❦";
    display: block;
    text-align: center;
    margin-bottom: 0.5em;
    font-size: 0.9em;
    color: var(--color-muted);
}

/* Bottom ornament */
.margin-box[data-type="poem"]::after {
    content: "❧";
    display: block;
    text-align: center;
    margin-top: 0.5em;
    font-size: 0.9em;
    color: var(--color-muted);
}

/* Margin box pinning UI */
.margin-box-unpin {
    position: absolute;
    top: 0.25em;
    right: 0.25em;
    opacity: 0.4;
    font-size: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25em;
    line-height: 1;
}

.margin-box-unpin:hover {
    opacity: 1;
}

/* Only pinned boxes have the unpin button visible */
.margin-box:not(.margin-box-pinned) .margin-box-unpin {
    display: none;
}

/* Pinned boxes get subtle highlight */
.margin-box-pinned {
    position: relative;
}

/* ======================================================================
   Watercolour Wash System — two-layer pseudo-elements for margin boxes
   ====================================================================== */

/* Wash colour classes — set the --wc-wash variable */
.wc-mb-ultramarine { --wc-wash: var(--wash-ultramarine); }
.wc-mb-ultramarine-strong { --wc-wash: var(--wash-ultramarine-strong); }
.wc-mb-vermilion { --wc-wash: var(--wash-vermilion); }
.wc-mb-verdigris { --wc-wash: var(--wash-verdigris); }
.wc-mb-saffron { --wc-wash: var(--wash-saffron); }
.wc-mb-saffron-deep { --wc-wash: var(--wash-saffron-deep); }
.wc-mb-parchment { --wc-wash: var(--wash-parchment); }

/* Border variants — composable with wash classes */
.wc-mb-border-left { border-left: 2px solid var(--wash-warm-border); }
.wc-mb-border-tb { border-top: 1px solid var(--wash-warm-border); border-bottom: 1px solid var(--wash-warm-border); }
.wc-mb-border-full { border: 1px solid var(--wash-warm-border); }

/* Pigment-matched accent borders — set by JS on body-text side */
.wc-mb-accent-ultramarine { --wc-accent: var(--illum-ultramarine); }
.wc-mb-accent-vermilion { --wc-accent: var(--illum-vermilion); }
.wc-mb-accent-verdigris { --wc-accent: var(--illum-verdigris); }
.wc-mb-accent-saffron { --wc-accent: var(--illum-saffron); }
.wc-mb-accent-parchment { --wc-accent: rgba(138, 109, 59, 0.5); }

/* Sundial accent borders — intensity per edge follows the sun angle.
   --sundial-shadow-{top,right,bottom,left} are 0–1, set by JS. */
[class*="wc-mb-accent-"]::before {
    border-top:    calc(var(--sundial-shadow-top, 0) * 2px) solid var(--wc-accent);
    border-right:  calc(var(--sundial-shadow-right, 0) * 2px) solid var(--wc-accent);
    border-bottom: calc(var(--sundial-shadow-bottom, 0) * 2px) solid var(--wc-accent);
    border-left:   calc(var(--sundial-shadow-left, 0) * 2px) solid var(--wc-accent);
}

/* Parent isolation to contain stacking */
[class*="wc-mb-"] {
    isolation: isolate;
    position: relative;
}

/* ::before — flat wash colour with sundial-directed edge softening.
   --sundial-deg is set by JS (setSundialProperties); fallback 168deg
   preserves the original hand-tuned angle when JS hasn't run yet. */
[class*="wc-mb-"]::before {
    content: "";
    position: absolute;
    inset: -4px 0;
    background-color: var(--wc-wash);
    border-radius: 1px 3px 2px 0;
    mask-image: linear-gradient(var(--sundial-deg, 168deg), transparent 0%, rgba(0,0,0,0.25) 5%, rgba(0,0,0,0.6) 15%, rgba(0,0,0,0.85) 30%, rgba(0,0,0,1) 45%, rgba(0,0,0,0.9) 60%, rgba(0,0,0,1) 75%, rgba(0,0,0,0.6) 90%, rgba(0,0,0,0.3) 100%);
    -webkit-mask-image: linear-gradient(var(--sundial-deg, 168deg), transparent 0%, rgba(0,0,0,0.25) 5%, rgba(0,0,0,0.6) 15%, rgba(0,0,0,0.85) 30%, rgba(0,0,0,1) 45%, rgba(0,0,0,0.9) 60%, rgba(0,0,0,1) 75%, rgba(0,0,0,0.6) 90%, rgba(0,0,0,0.3) 100%);
    z-index: -2;
    pointer-events: none;
}

/* ::after — paper grain texture via SVG filter */
[class*="wc-mb-"]::after {
    content: "";
    position: absolute;
    inset: -4px 0;
    background-color: rgb(120, 100, 65);
    filter: url(#wc-grain);
    opacity: 0.10;
    border-radius: 1px 3px 2px 0;
    z-index: -1;
    pointer-events: none;
}

/* Full-bleed elements span all columns */
.full-bleed {
    grid-column: 1 / -1;
    width: 100%;
    margin: 2rem 0;
}

@media (max-width: 640px) {
    body {
        /* font-size handled by clamp() — no override needed */
        padding: 20px;
    }
    /* Stack masthead vertically on mobile. No wrapping: in a wrapping
       column flexbox each line is as wide as its widest item, so the nav
       would set every row's width and push the page wider than a phone. */
    .masthead {
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 0.5em 0;
    }
    /* Hide celestial display on mobile — no room for the sphere */
    .horizon-canvas {
        display: none !important;
    }
    .frontispiece {
        font-size: 3rem;
        order: 1;
    }
    .meta-left, .meta-right {
        width: auto;
        text-align: center;
        font-size: 0.9rem;
    }
    .meta-left {
        order: 2;
    }
    .meta-right {
        order: 3;
        justify-content: center;
        padding-bottom: 0;
    }
    .identity-pricing {
        position: static;
    }
    /* The stamp keeps its border and tilt on phones, at a readable size.
       The width cap wraps long names onto balanced lines, so the stamp
       stays compact instead of stretching across the screen. */
    .masthead-stamp {
        transform: rotate(-2deg);
        border: 1.5px double rgba(140, 50, 30, 0.45);
        padding: 0.25em 0.7em 0.2em;
        background: var(--color-bg, #fcfcfa);
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.08);
        float: none;
        display: inline-block;
        font-size: 1.15em;
        max-width: min(13em, 85vw);
        margin: 0.3em auto 0.25em;
        align-self: center;
    }
    .masthead-stamp .stamp-name {
        text-wrap: balance;
    }
    .masthead-stamp .stamp-links {
        opacity: 0.7;
    }
    .masthead-nav {
        margin-top: 0.4em;
        order: 4;
        /* One line (about 350px) on phones 360px and up; wraps below */
        font-size: 0.64rem;
        letter-spacing: 0.02em;
        flex-wrap: wrap;
    }
    /* Remove side padding on mobile */
    main {
        padding-left: 0;
        padding-right: 0;
    }
    /* Smaller title on mobile */
    .article-title {
        font-size: 2rem;
    }
    /* Smaller drop cap on mobile */
    .initial {
        height: 4.5rem;
        margin-left: 0;
        margin-right: 0.3em;
    }
}

/* Narrowest phones: the nav wraps, so drop the separators rather than
   leave one dangling at a line end. */
@media (max-width: 359px) {
    .masthead-nav .nav-sep {
        display: none;
    }
    .masthead-nav {
        column-gap: 0.9em;
    }
}

@media print {
    html {
        background-color: white;
    }
    body {
        background-color: transparent;
        color: black;
        font-size: 12pt;
    }
    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }
    h2, h3, h4 {
        page-break-after: avoid;
    }
}

/* Typography */
p {
    margin: 1em 0;
}

a {
    color: var(--color-text);
    text-decoration-color: var(--link-underline);
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
}

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

a:hover {
    text-decoration-color: var(--illum-ultramarine);
}

/* Footnote superscripts: ultramarine */
.footnote-ref {
    color: var(--illum-ultramarine-fn);
    font-weight: 600;
}

/* Body text links: ensure ultramarine underlines in article column */
.body-text a {
    text-decoration-color: var(--link-underline);
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
}

.body-text a:hover {
    text-decoration-color: var(--illum-ultramarine);
}

/* Rubrication — vermilion for labels and connectives */
.rubricate {
    color: var(--illum-vermilion);
}

img {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 1.4em;
}

h5, h6 {
    font-size: 1em;
    font-style: italic;
}

h6 {
    font-weight: normal;
}

ol, ul {
    padding-left: 1.7em;
    margin-top: 1em;
}

li > ol, li > ul {
    margin-top: 0;
}

blockquote {
    margin: 1em 0;
    padding: 0.5em 1em;
    border-left: 1px solid var(--color-subtle);
    border-right: 1px solid var(--color-subtle);
    font-style: italic;
    color: inherit;
}

/* Reverse italic: emphasis within italic blockquotes becomes roman */
blockquote em,
blockquote i {
    font-style: normal;
}

/* Quoted figure: blockquote with attribution */
figure.quote {
    margin: 1.5em 0;
    padding: 0 10%;
}

figure.quote blockquote {
    margin-bottom: 0.5em;
    border-left: none;
    border-right: none;
    text-align: left;
}

/* Apply first-line styling to paragraph after opening epigraph quote */
.maintext > figure.quote:first-child + p::first-line {
    font-size: 2rem;
    font-variant: small-caps;
    text-transform: lowercase;
    color: var(--illum-vermilion);
}

.maintext > figure.quote:first-child + p {
    hyphens: none;
}

figure.quote figcaption {
    display: block;
    text-align: right;
    font-size: 0.9em;
    color: var(--color-subtle);
    font-style: normal;
}

figure.quote figcaption cite {
    font-style: italic;
}

/* Remove blockquote margins on narrow screens */
@media (max-width: 768px) {
    blockquote {
        padding: 0.5em 0;
        margin-left: 0;
        margin-right: 0;
    }
    figure.quote {
        padding: 0;
    }
}

code {
    font-family: var(--font-mono);
    font-size: 85%;
    margin: 0;
    hyphens: manual;
}

pre {
    margin: 1em 0;
    overflow: auto;
}

pre code {
    padding: 0;
    overflow: visible;
    overflow-wrap: normal;
}

hr {
    background-color: transparent;
    background-image: linear-gradient(
        to right,
        transparent 0%,
        var(--illum-saffron-rule) 15%,
        var(--illum-saffron-rule) 85%,
        transparent 100%
    );
    border: none;
    height: 1.5px;
    margin: 1.5em 0;
}

/* Article header - Gazette style */
header {
    margin-bottom: 0.5em;
    text-align: center;
}

/* Title lives outside <header> as a direct grid child of .margins-layout */
.article-title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-variant: small-caps;
    letter-spacing: 0.05em;
    margin-top: 0.1em;
    margin-bottom: -1rem; /* pull up against the grid gap to close space to byline */
}

.article-title a {
    text-decoration: none;
    color: inherit;
}

/* Ornament endcaps on headline */
.article-title::before,
.article-title::after {
    content: "✦";
    color: var(--illum-saffron);
    font-size: 0.4em;
    vertical-align: middle;
    margin: 0 0.4em;
}

/* Dinky-bar: micro-ornament between header and body */
.dinky-bar {
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.4em;
    color: var(--color-subtle);
    margin-bottom: 1.5em;
    margin-top: -0.3em;
}

header .date {
    display: none;
}

header .authorship {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-dim);
    margin-top: 0;
    margin-bottom: 0;
}

header .byline {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-dim);
    margin-top: 0;
    margin-bottom: 0.5em;
}

/* The almanac-day spelled out as a Common Era date, under the byline */
header .ce-date {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--color-dim);
    margin-top: -0.5em;
    margin-bottom: 0.5em;
}

header .byline a,
header .authorship a {
    text-decoration: none;
    color: inherit;
}


/* Drop cap initial - sized to 4 lines with symmetric overhang */
.initial {
    float: left;
    margin-top: 0.3em;
    margin-left: 0.2em;
    margin-right: 0.2em;
    height: calc(9rem + 0.2em);
    width: auto;
    filter: sepia(60%) hue-rotate(-5deg) saturate(0.7) brightness(0.85) contrast(1.05);
}

/* Illuminated initial frame */
.illuminated-initial {
    display: block;
    float: left;
    box-sizing: border-box;
    height: calc(9rem + 0.2em);
    margin-top: 0.3em;
    margin-left: 0.2em;
    margin-right: 0.5em;
    padding: 3px;
    border: 1.5px solid var(--illum-saffron);
    background-color: var(--wash-vermilion);
    position: relative;
}

.illuminated-initial .initial {
    float: none;
    margin: 0;
    height: 100%;
    width: auto;
    display: block;
    border: 1px solid var(--illum-ultramarine);
}

/* Main article text */
.maintext {
    text-align: justify;
}

/* First-line small-caps on the paragraph with the drop cap */
.maintext > p:has(.initial)::first-line {
    font-size: 2rem;
    font-variant: small-caps;
    text-transform: lowercase;
    text-justify: inter-character;
    color: var(--illum-vermilion);
}

.maintext > p:has(.initial) {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: justify;
    hyphens: none;
}

/* justif owns hyphenation on the paragraphs it manages; stop the browser
   from also inserting soft hyphens there (would double up). Paragraphs justif
   skips keep their normal CSS hyphenation. */
html.justif-active [data-justif] {
    hyphens: none;
}

/* Tailpiece - small centered ornament at end of article */
.tailpiece {
    display: block;
    margin: 2em auto;
    max-width: 3em;
    height: auto;
    filter: invert(1) sepia(60%) hue-rotate(-5deg) saturate(0.7) brightness(0.85) contrast(1.05);
}

/* Section break - centered divider between scenes */
.section-break {
    display: block;
    margin: 1em auto;
    max-width: 50%;
    height: auto;
    filter: invert(1) sepia(60%) hue-rotate(-5deg) saturate(0.7) brightness(0.85) contrast(1.05);
}

/* Screen-reader-only text, e.g. the letter a typographic initial replaces */
.visually-hidden {
    position: absolute;
    /* Without an offset it sits where it would have been in the line,
       which can be past the right edge and widen the page on phones. */
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Verse: wrap a poem in <section class="verse" markdown> and end each line
   with <br>. render_markdown() wraps every line in span.line, so a wrapped
   line hangs under its first word. Never justified (justif only takes
   text-align: justify). */
.verse p {
    text-align: left;
    hyphens: none;
}

.verse .line {
    display: block;
    padding-left: 1.5em;
    text-indent: -1.5em;
}

.verse .line + br {
    display: none;
}

/* Typographic drop cap, for when there is no initialism artwork yet.
   Markup: <div class="text-initial" aria-hidden="true">W</div> before the
   paragraph, which opens with <span class="visually-hidden">W</span>. */
.text-initial {
    float: left;
    font-family: var(--font-display);
    font-size: 3.6em;
    line-height: 1;
    color: var(--illum-vermilion);
    background-color: var(--wash-vermilion);
    border: 1.5px solid var(--illum-saffron);
    outline: 1px solid var(--illum-ultramarine);
    outline-offset: -5px;
    padding: 0.08em 0.14em 0;
    margin: 0.12em 0.25em 0 0;
}

/* An initialism image for verse: <div class="verse-initial" markdown="span">
   holding ![](assets/initialism.png){.initial}. The art is white-on-
   transparent, so by day it is inverted like a section break; the night
   rules for .initial outrank this one. */
.verse-initial .initial {
    filter: invert(1) sepia(60%) hue-rotate(-5deg) saturate(0.7) brightness(0.85) contrast(1.05);
}

/* The paragraph beside the initial is its own column, so hanging lines
   don't run under the float. */
.text-initial + p,
.verse-initial + p {
    display: flow-root;
}

/* On a phone that column is a few words wide; let the verse run on
   under the initial instead. */
@media (max-width: 640px) {
    .verse-initial + p {
        display: block;
    }

    /* Room for the hanging indent, which would otherwise pull each line
       back over the framed image (views.py wraps it in .illuminated-initial,
       which is the float). */
    .verse-initial .illuminated-initial {
        margin-right: 2em;
    }
}

.text-initial + p::first-line,
.verse-initial + p::first-line {
    font-variant: small-caps;
    color: var(--illum-vermilion);
    letter-spacing: 0.02em;
}

/* Disputations, after the Sumerian manner: two speakers, a scribe, a judge.
   The Left speaks in vermilion, the Right in ultramarine. */
.disputation-subtitle {
    text-align: center;
    color: var(--color-muted);
    margin-bottom: 2em;
}

.disputation-speech,
.disputation-judgment {
    padding-left: 1em;
    border-left: 2px solid transparent;
}

.disputation-speech h2,
.disputation-judgment h2 {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: 1.35em;
    letter-spacing: 0.06em;
    text-align: center;
    margin: 2.2em 0 1em -1em;
}

.disputation-left { border-left-color: var(--wash-vermilion); }
.disputation-left h2 { color: var(--illum-vermilion); }
.disputation-left h2::before {
    content: "☜ ";
    content: "☜ " / "";
}

.disputation-right { border-left-color: var(--wash-ultramarine); }
.disputation-right h2 { color: var(--illum-ultramarine); }
.disputation-right h2::after {
    content: " ☞";
    content: " ☞" / "";
}

.disputation-scribe {
    font-style: italic;
    margin: 2.5em 0;
    padding: 0 1em;
}

.disputation-scribe .section-break {
    max-width: 60%;
}

@media (max-width: 640px) {
    .disputation-scribe .section-break {
        max-width: 85%;
    }
}

.verse .disputation-rubric {
    font-family: var(--font-display);
    font-style: normal;
    text-align: center;
    color: var(--illum-saffron-text);
    letter-spacing: 0.06em;
}

.disputation-judgment h2 {
    font-size: 1.8em;
    margin-top: 2.5em;
}

.disputation-judgment h2::before,
.disputation-judgment h2::after {
    content: "✦";
    content: "✦" / "";
    color: var(--illum-saffron);
    font-size: 0.4em;
    vertical-align: middle;
    margin: 0 0.5em;
}

.disputation-judgment p:last-child::after {
    content: "❧";
    content: "❧" / "";
    display: block;
    text-align: center;
    text-indent: 0;
    margin-top: 1.5em;
    color: var(--color-muted);
}

/* Footnotes */

.footnote {
    font-size: 0.85em;
    margin-top: 3em;
    margin-right: 1.7em;  /* match left indent from ol numbering */
}

.footnote hr {
    margin-right: -1.7em;  /* extend hr to full width */
}

.footnote-ref {
    text-decoration: none;
    display: inline;
    padding: 0.15em 0;   /* vertical-only tap-target padding: horizontal padding
                            has no compensating negative margin (that combo
                            disqualifies the paragraph from justif) and would
                            leave the ref detached from its word */
}

.footnote-ref::before {
    content: "[";
}

.footnote-ref::after {
    content: "]";
}

/* justif's line-breaking only measures real DOM text/element nodes, not
   CSS-generated ::before/::after content -- so it systematically
   under-measures a footnote-ref's rendered width by the bracket glyphs,
   which can blow word-spacing out on some lines. justif-init.js replaces
   the generated brackets with real text nodes and marks the element
   data-bracketed; suppress the CSS-generated ones there to avoid doubling
   up. Elements without JS (or before it runs) keep the CSS brackets. */
.footnote-ref[data-bracketed]::before,
.footnote-ref[data-bracketed]::after {
    content: none;
}

/* Footnote backref: replace ugly iOS arrow with Almanack-style return */
.footnote-backref {
    font-size: 0;  /* Hide original character */
    display: inline-block;
    padding: 0.5em;
    margin: -0.5em;
    margin-left: 0.25em;
}
.footnote-backref::after {
    content: "§ back §";
    font-size: 0.85rem;
    font-family: var(--font-body);
    opacity: 0.7;
}
.footnote-backref:hover::after {
    opacity: 1;
}

sup {
    font-size: 0.8em;
}

/* Hide figure captions (used for decorative images) */
figcaption {
    display: none;
}

/* Margin figures - plate style presentation */
.figure {
    display: block;
    border: 1px solid var(--color-text);
    padding: 0.5em;
    margin: 0.5em 0.4em;
    background: var(--color-bg);
}

.figure img,
.figure video {
    display: block;
    width: 100%;
    height: auto;
}

/* Portrait figures - subtle wash background for biographical illustrations */
.figure.portrait {
    background: var(--wash-parchment);
    border-color: var(--wash-warm-border);
    padding: 0.8em;
}

.figure.portrait figcaption {
    text-align: center;
}

/* Constrain margin figures to natural size or container, whichever is smaller */
.margin .figure {
    max-width: max-content;
}

.margin .figure img {
    max-width: 100%;
    width: auto;
}

/* Show and style captions for .figure elements */
.figure figcaption {
    display: block;
    position: relative;
    font-size: 0.8em;
    font-weight: 600;
    text-align: center;
    margin-top: 0.5em;
    padding-top: 0.5em;
    color: var(--color-dark);
}

.figure figcaption::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    border-top: 1px solid var(--color-light);
}

@media (max-width: 768px) {
    .figure {
        margin: 1em auto;
        max-width: 80%;
    }
}

/* Interactive figures - ensure caption at bottom */
.figure[data-interactive] {
    display: flex;
    flex-direction: column;
}

.figure[data-interactive] figcaption {
    order: 999; /* Always last */
    margin-top: auto;
}

/* Video figure — saffron plate frame to match scene/annotation ensemble */
.figure[data-interactive="video-player"] {
    border-color: var(--illum-saffron-rule);
    background: var(--wash-saffron);
}

/* Lightbox dialog for enlarged figures */
#lightbox {
    border: none;
    background: transparent;
    max-width: 90vw;
    max-height: 90vh;
    padding: 1em;
}

#lightbox[open] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#lightbox::backdrop {
    background: rgba(0, 0, 0, 0.85);
}

#lightbox img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    cursor: zoom-out;
}

.lightbox-caption {
    position: relative;
    color: #fff;
    text-align: center;
    margin: 1em 0 0;
    padding-top: 0.8em;
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 600;
    max-width: 60ch;
}

.lightbox-caption::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.figure img {
    cursor: zoom-in;
}

/* Chapter table-of-contents in margin */
.margin-box[data-type="chapter-toc"] {
    border-top: none;
    border-bottom: none;
    border-left: 2px solid var(--illum-saffron-rule);
    background: var(--wash-saffron);
}

.video-chapter-toc {
    font-size: 0.8em;
    line-height: 1.35;
}

.video-chapter-toc-heading {
    font-family: var(--font-display);
    font-weight: bold;
    font-size: 0.875em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--illum-vermilion);
    margin-bottom: 0.3em;
}

.video-chapter-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.video-chapter-toc-entry {
    padding: 0.15em 0;
    cursor: pointer;
    color: var(--color-text);
}

.video-chapter-toc-entry:hover {
    color: var(--color-muted);
}

.video-chapter-toc-active {
    font-weight: bold;
    border-left: 2px solid var(--illum-saffron);
    margin-left: -0.6em;
    padding-left: calc(0.6em - 2px);
}

.video-chapter-toc-time {
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--illum-saffron-text);
}

/* Time-range wrapper (needed because media-time-range shadow DOM
   has no default slot for light DOM children like marker dots) */
.vf-time-range-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 100%;
}

.vf-time-range-wrap media-time-range {
    flex: 1;
    width: 100%;
}

/* Annotation tick markers on scrub bar */
.annotation-markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.annotation-marker {
    position: absolute;
    bottom: 55%;
    width: 3px;
    height: 6px;
    background: var(--illum-saffron-rule);
    border-radius: 0.5px;
    transform: translateX(-50%);
}

/* Tables */
table {
    margin: 1em 0;
    border-collapse: collapse;
    width: 100%;
    overflow-x: auto;
    display: block;
    font-variant-numeric: lining-nums tabular-nums;
}

table caption {
    margin-bottom: 0.75em;
}

tbody {
    margin-top: 0.5em;
    border-top: 1px solid var(--color-text);
    border-bottom: 1px solid var(--color-text);
}

th {
    border-top: 1px solid var(--color-text);
    padding: 0.25em 0.5em;
}

td {
    padding: 0.125em 0.5em 0.25em 0.5em;
}

/* Index page */
.article-list {
    list-style: none;
    padding: 0;
}

.article-list li {
    margin: 1em 0;
    font-size: 1.2em;
}

.article-list .day {
    color: var(--color-muted);
    font-size: 0.9em;
}

/* Manual layout - override body/main constraints */
body:has(.manual-layout) {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

main:has(.manual-layout) {
    padding-left: 0;
    padding-right: 0;
}

.manual-layout {
    display: grid;
    grid-template-columns: minmax(12rem, 14rem) minmax(20rem, 50rem) 1fr;
    gap: 2rem;
    width: 100%;
    padding: 2rem 3rem;
    box-sizing: border-box;
}

.manual-nav {
    grid-column: 1;
    position: sticky;
    top: 2rem;
    align-self: start;
    font-family: var(--font-body);
    padding-right: 1rem;
    border-right: 1px solid var(--color-rule);
}

.manual-nav h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-bottom: 0.5em;
    border-bottom: 1px solid var(--color-text);
    padding-bottom: 0.3em;
}

.manual-nav h3 a {
    text-decoration: none;
    color: inherit;
}

.manual-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.manual-nav li {
    margin: 0.3em 0;
}

.manual-nav a {
    text-decoration: none;
    color: var(--color-text);
}

.manual-nav a:hover {
    text-decoration: underline;
}

.manual-nav li.active > a {
    font-weight: 600;
}

.manual-nav ul ul {
    padding-left: 1em;
    font-size: 0.9em;
}

.manual-content {
    grid-column: 2;
    min-width: 0;
}

.manual-content h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    margin-top: 0;
}

.manual-content h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    margin-top: 1.5em;
}

.manual-content pre {
    background: var(--color-code-bg);
    padding: 1em;
    overflow-x: auto;
    font-size: 0.9em;
}

.manual-content code {
    font-family: var(--font-mono);
}

.manual-content p code {
    background: var(--color-code-bg);
    padding: 0.1em 0.3em;
}

.nav-children {
    list-style: none;
    padding: 0;
    margin: 1em 0;
}

.nav-children li {
    margin: 0.5em 0;
}

@media (max-width: 768px) {
    .manual-layout {
        display: block;
        padding: 1rem;
    }

    .manual-nav {
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--color-text);
        padding-right: 0;
        padding-bottom: 1em;
        margin-bottom: 1.5em;
    }
}

/* Back-of-book index styling */
.idx {
    margin: 0.5em 0;
    /* A ragged-right list, not prose: also keeps justif away. */
    text-align: left;
    hyphens: manual;
}

/* All lists in index: no bullets */
.idx ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

/* Runover lines hang at 3em, past where sub-entries start (1.5em), so a
   wrapped line never looks like a new entry. */
.idx li {
    margin: 0.15em 0;
    line-height: 1.4;
    padding-left: 3em;
    text-indent: -3em;
}

/* Nested lists (sub-entries): start 1.5em in, runovers at 3em too */
.idx li > ul {
    margin-left: -1.5em;
    padding-left: 0;
}

.idx li > ul > li {
    padding-left: 1.5em;
    text-indent: -1.5em;
}

/* Tighten spacing for sub-entries */
.idx li > ul > li {
    margin: 0.1em 0;
}

/* Index links: no underline, dotted on hover */
.idx a {
    text-decoration: none;
    color: inherit;
}

.idx a:hover {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

/* Arriving at an entry from a cross-reference */
.idx li:target {
    animation: fragment-highlight 2s ease-out forwards;
}


/* Index search plinth - ornate memorial tablet style */
#idx-search {
    display: none;
    margin: 0 auto 1em;
    max-width: 22em;
    text-align: center;
}

#idx-search.js-enabled {
    display: block;
}

/* The motto */
#idx-search .motto {
    font-variant: small-caps;
    letter-spacing: 0.15em;
    font-size: 0.85em;
    margin-bottom: 0.5em;
    color: var(--color-dim);
}

/* Outer ornamental frame */
#idx-search .plinth {
    border: 2px solid var(--color-muted);
    padding: 0.6em;
    position: relative;
    background: linear-gradient(to bottom, #fafafa 0%, #f5f5f0 100%);
    box-shadow:
        inset 0 0 0 1px #fff,
        inset 0 0 0 4px #e8e8e0,
        inset 0 0 0 5px #999,
        0 2px 4px rgba(0,0,0,0.1);
}

/* Corner flourishes using pseudo-elements */
#idx-search .plinth::before,
#idx-search .plinth::after {
    content: "❧";
    position: absolute;
    font-size: 1.2em;
    color: var(--color-faint);
    line-height: 1;
}

#idx-search .plinth::before {
    top: -0.6em;
    left: 0.5em;
}

#idx-search .plinth::after {
    top: -0.6em;
    right: 0.5em;
    transform: scaleX(-1);
}

/* Bottom flourishes */
#idx-search .plinth-bottom {
    position: absolute;
    bottom: -0.6em;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 0.5em;
}

#idx-search .plinth-bottom span {
    font-size: 1.2em;
    color: var(--color-faint);
    line-height: 1;
}

#idx-search .plinth-bottom span:first-child {
    transform: scaleY(-1);
}

#idx-search .plinth-bottom span:last-child {
    transform: scale(-1, -1);
}

/* Inner input container */
#idx-search .input-frame {
    border: 1px solid var(--color-border);
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0.3em 0.5em;
}

#idx-search input {
    font-family: inherit;
    font-size: 1em;
    padding: 0.2em;
    flex: 1;
    border: none;
    background: transparent;
    text-align: center;
}

#idx-search input:focus {
    outline: none;
}

#idx-search input::placeholder {
    font-style: italic;
    color: var(--color-subtle);
}

/* Clear button */
#idx-search .clear-btn {
    background: none;
    border: none;
    font-size: 1.1em;
    color: var(--color-subtle);
    cursor: pointer;
    padding: 0 0.2em;
    line-height: 1;
    visibility: hidden;
}

#idx-search .clear-btn:hover {
    color: var(--color-dark);
}

#idx-search.has-text .clear-btn {
    visibility: visible;
}

/* Results count */
#idx-search .results-count {
    font-size: 0.75em;
    color: var(--color-muted);
    margin-top: 0.4em;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    min-height: 1.2em;
}

/* Index letter navigation - justified across full width, auto-scaled by JS */
.idx-nav {
    margin: 0.5em 0 1em;
    overflow: hidden;
}

.idx-nav p {
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    margin: 0;
    font-size: 1.1em;
}

.idx-nav a {
    text-decoration: underline;
}

.idx-nav a:hover {
    text-decoration: underline dotted;
}

/* Hide search box when printing */
@media print {
    #idx-search {
        display: none !important;
    }
}

/* Frontpage Navigation */
.frontpage-nav {
    display: flex;
    justify-content: space-between;
    margin: 1rem 0;
    padding: 0.5rem 0;
    border-top: 1px solid var(--rule-color, #ccc);
    border-bottom: 1px solid var(--rule-color, #ccc);
}

.frontpage-nav a {
    text-decoration: none;
}

.frontpage-nav a:hover {
    text-decoration: underline;
}

.frontpage-nav-fallback {
    margin: 1rem 0;
    font-style: italic;
}

/* Chronology archive */
.chronology-list {
    margin: 0;
    padding: 0;
}

.chronology-entry {
    margin: 1.25rem 0;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-rule);
}

.chronology-entry:last-child {
    border-bottom: none;
}

.chronology-entry dt {
    font-weight: normal;
    margin-bottom: 0.3rem;
}

.chronology-entry dt time {
    color: var(--color-muted);
}

.chronology-entry dt time::after {
    content: " — ";
}

.chronology-entry dd {
    margin: 0;
    margin-top: 0.2rem;
    font-size: 0.95em;
    line-height: 1.5;
    color: var(--color-dim);
}

.chronology-entry dd p {
    margin: 0;
}

.chronology-entry:target {
    background-color: var(--highlight-color, #ffffcc);
}

@media (max-width: 640px) {
    .chronology-entry dt time::after {
        content: "";
    }

    .chronology-entry dt time {
        display: block;
        margin-bottom: 0.15rem;
    }

    .chronology-entry dd {
        padding-left: 0;
    }
}

/* ==========================================================================
   NTK Style
   72-character monospace plain-text newsletter, circa 1997-2006
   ========================================================================== */

/* Expand body/main to allow NTK width on desktop */
body:has(.ntk) {
    max-width: none;
}

main:has(.ntk) {
    padding-left: 0;
    padding-right: 0;
}

.ntk {
    /* Container for horizontal scrolling on narrow screens */
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ntk pre {
    /* Fixed 72-character width in monospace */
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.35;

    /* Exact width for 72 characters + small padding */
    width: 74ch;
    max-width: none;

    /* Center the content */
    margin: 0 auto;
    padding: 1em 1ch;

    /* Preserve whitespace exactly */
    white-space: pre;
    overflow-wrap: normal;
    word-wrap: normal;

    /* Subtle styling */
    background: transparent;
    color: var(--color-text);
}

/* Override .maintext first-line styling that leaks into pre */
.ntk pre::first-line {
    font-size: inherit;
    font-variant: normal;
    text-transform: none;
}

/* Links within NTK should be subtle */
.ntk a {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-style: dotted;
}

.ntk a:hover {
    text-decoration-style: solid;
}

/* Mobile: shrink font to fit, with horizontal scroll as fallback */
@media (max-width: 768px) {
    body:has(.ntk) {
        max-width: none;
        padding: 10px;
    }

    .ntk pre {
        /* Scale font to fit 72ch in viewport */
        font-size: calc((100vw - 40px) / 74);
        padding: 0.5em 0;
    }
}

/* Media-chrome theme */
media-controller {
    --media-icon-color: #fff;
    --media-text-color: #fff;
    --media-control-background: transparent;
    --media-range-track-background: rgba(255, 255, 255, 0.3);
    --media-range-bar-color: #fff;
    --media-range-thumb-background: #fff;
    --media-range-thumb-border-radius: 0;
    --media-range-track-border-radius: 0;
    --media-font: var(--font-body);
    --media-font-size: 0.85em;
    display: block;
    position: relative;
    width: 100%;
}

media-controller video {
    display: block;
    width: 100%;
    height: auto;
}

media-control-bar {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

/* Two-row control layout */
.vf-time-bar {
    --media-control-height: 0.6em;
    --media-control-padding: 0.5em;
    --media-range-padding-left: 0.4em;
    --media-range-padding-right: 0.4em;
    padding: 0;
}

.vf-time-bar .vf-time-range-wrap {
    flex: 1;
}

.vf-controls-bar {
    display: flex;
    align-items: center;
}

.vf-spacer {
    flex: 1;
}

/* Inline scene selector */
.vf-scene-selector {
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.75em;
    padding: 0.2em 0.5em;
    cursor: pointer;
    white-space: nowrap;
    max-width: 14em;
    opacity: 0.85;
    position: relative;
}

.vf-scene-selector:hover {
    opacity: 1;
}

.vf-scene-selector::after {
    content: ' \25BE';
    margin-left: 0.3em;
    font-size: 0.9em;
}

/* Scene dropdown */
.vf-scene-dropdown {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 16em;
    max-height: 18em;
    overflow-y: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-text);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-shadow: none;
    filter: none;
    z-index: 10;
    margin-bottom: 0.25em;
}

.vf-scene-entry {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    padding: 0.35em 0.8em;
    cursor: pointer;
    line-height: 1.25;
}

.vf-scene-entry:hover {
    background: var(--color-light);
}

.vf-scene-time {
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--color-muted);
    min-width: 3em;
    flex-shrink: 0;
}

.vf-scene-name {
    flex: 1;
}

media-play-button:hover,
media-mute-button:hover,
media-fullscreen-button:hover,
media-settings-menu-button:hover {
    --media-icon-color: rgba(255, 255, 255, 0.7);
}

/* Settings menu (native media-chrome) */
media-settings-menu {
    --media-text-color: var(--color-text);
    --media-icon-color: var(--color-text);
    --media-menu-background: var(--color-bg);
    --media-menu-item-hover-background: var(--color-light);
    --media-menu-item-checked-background: var(--color-light);
    --media-menu-item-indicator-fill: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.85rem;
    border: 1px solid var(--color-text);
    text-shadow: none;
    filter: none;
    z-index: 20;
}

media-time-display {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.7em;
    letter-spacing: -0.03em;
}

/* Narrow video: simplify controls to play, time, fullscreen */
@media (max-width: 500px) {
    .vf-controls-bar media-mute-button,
    .vf-controls-bar .vf-scene-selector,
    .vf-controls-bar .vf-spacer,
    .vf-controls-bar media-settings-menu-button {
        display: none;
    }

    .vf-controls-bar media-time-display {
        margin-left: auto;
    }

    .vf-controls-bar media-fullscreen-button {
        margin-left: 0;
    }
}

/* SVG overlay for annotation shapes */
.video-figure-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.video-figure-shape {
    fill: transparent;
    stroke: var(--illum-saffron-rule);
    stroke-width: 0.005;
    pointer-events: auto;
    cursor: pointer;
}

.video-figure-shape:hover {
    stroke: var(--illum-saffron);
    fill: rgba(184, 137, 46, 0.1);
}

/* Connector lines from shapes/video edge to margin annotations */
.video-figure-connector {
    stroke: rgba(255, 200, 50, 0.5);
    stroke-width: 0.003;
    stroke-dasharray: 0.01 0.008;
}

/* Video annotation mobile overlay fallback */
.video-annotation-overlay {
    position: absolute;
    bottom: 3em;
    left: 5%;
    right: 5%;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 0.4em 0.8em;
    font-size: 0.85em;
    font-family: var(--font-body);
    pointer-events: none;
    border-radius: 2px;
}

.video-annotation-overlay p {
    margin: 0.2em 0;
}


/* Injected video annotation margin boxes — strip default margin-box chrome */
/* FQA — Frequently Questioned Answers */
.margin-box[data-type="fqa"] {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.45;
    padding: 1em 1.2em;
    border: 1px solid var(--wash-warm-border);
    background: var(--wash-parchment);
    box-sizing: border-box;
}

.margin-box[data-type="fqa"] .fqa-title {
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    display: block;
    margin-bottom: 0.6em;
    border-bottom: 1px solid var(--wash-warm-border);
    padding-bottom: 0.4em;
}

.margin-box[data-type="fqa"] .fqa-q,
.margin-box[data-type="fqa"] .fqa-a {
    display: inline;
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 0.8;
    vertical-align: baseline;
    padding: 0 0.08em;
    font-weight: normal;
}

.margin-box[data-type="fqa"] .fqa-q {
    color: var(--illum-vermilion);
}

.margin-box[data-type="fqa"] .fqa-a {
    color: var(--illum-ultramarine);
}

.margin-box[data-type="fqa"] em:not(.pub) {
    font-style: normal;
    font-variant: small-caps;
    text-transform: lowercase;
}

/* End ornament — use last-of-type so permalink element doesn't break it */
.margin-box[data-type="fqa"] > p:last-of-type::after {
    content: " ❧";
    color: var(--color-subtle);
}

.margin-box[data-type="annotation"] {
    border: none;
    padding: 0;
    background: none;
    visibility: hidden;
}

/* Video annotations in margin boxes */
.video-annotation {
    font-size: 0.85em;
    margin: 0.3em 0;
    cursor: pointer;
    padding: 0.3em 0.5em;
    color: var(--color-dark);
}

/* Right-margin annotations: yellow bar on left, pointing toward center */
.margin-right .video-annotation {
    border-left: 2px solid var(--illum-saffron-rule);
}

/* Left-margin annotations: yellow bar on right, pointing toward center */
.margin-left .video-annotation {
    border-right: 2px solid var(--illum-saffron-rule);
    text-align: right;
}

.video-annotation:hover {
    color: var(--color-text);
    text-decoration: underline;
}

/* ================================================================
   Subscribe form (margin box + /subscribe/ page)
   ================================================================ */

.subscribe-form {
    font-family: var(--font-body);
    font-size: 1em;
}

.subscribe-form label {
    display: block;
    margin-bottom: 0.25em;
    font-family: var(--font-display);
    font-size: 0.9em;
}

.subscribe-form label small {
    font-family: var(--font-body);
    color: var(--color-muted);
}

.subscribe-input,
.subscribe-form input[type="text"],
.subscribe-form input[type="email"] {
    display: block;
    width: 100%;
    padding: 0.4em 0.5em;
    border: 1px solid var(--color-text);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.9em;
    box-sizing: border-box;
}

.subscribe-form input:focus {
    outline: 2px solid var(--color-text);
    outline-offset: 1px;
}

.subscribe-button,
.subscribe-form button[type="submit"] {
    display: inline-block;
    padding: 0.4em 1.2em;
    border: 1px solid var(--color-text);
    background: var(--color-text);
    color: var(--color-bg);
    font-family: var(--font-display);
    font-size: 0.9em;
    cursor: pointer;
    transition: opacity 0.2s;
}

.subscribe-form button:hover {
    opacity: 0.85;
}

.subscribe-form button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Noscript fallback link */
.noscript-subscribe {
    text-align: center;
    margin: 2em 0;
    padding: 1em;
    border-top: 1px solid var(--color-text);
    border-bottom: 1px solid var(--color-text);
    font-family: var(--font-display);
}

/* "Previously on Almanack" margin box */
.previously-heading {
    font-family: var(--font-display);
    font-size: 0.85em;
    margin: 0 0 0.4em 0;
}

.previously-list {
    margin: 0;
    padding: 0;
}

.previously-list dt {
    font-family: var(--font-display);
    font-size: 0.8em;
    line-height: 1.3;
    margin: 0;
}

.previously-list dt a {
    color: var(--illum-ultramarine);
    text-decoration: none;
}

.previously-list dt a:hover {
    text-decoration: underline;
}

.previously-list dd {
    font-size: 0.72em;
    line-height: 1.35;
    color: var(--color-text);
    margin: 0.1em 0 0.6em 0;
}

.previously-list dd p {
    margin: 0;
}

.previously-list dd:last-child {
    margin-bottom: 0;
}

.previously-more {
    font-size: 0.72em;
    margin: 0.5em 0 0 0;
    text-align: right;
}

.previously-more a {
    color: var(--color-subtle);
    text-decoration: none;
}

.previously-more a:hover {
    color: var(--illum-ultramarine);
}


/* ==========================================================================
   Night Mode — Observatory Dark Theme
   Driven by celestial engine (sun altitude) or OS preference fallback.
   See docs/plans/2026-02-22-night-mode-design.md
   ========================================================================== */

/* Transition: gentle 1s crossfade when theme changes.
   Suppressed on first load by .no-theme-transition (set by JS). */
html {
    transition: background-color 1s ease, color 0.8s ease;
}
html.no-theme-transition,
html.no-theme-transition * {
    transition: none !important;
}

/* --- Pen marginalia --- */
.pen-marginalia-layer { mix-blend-mode: multiply; }
html.pen-active { touch-action: none; }
html.pen-active body { touch-action: none; -webkit-user-select: none; user-select: none; }

/* --- Night palette: Path 1 — OS / browser preference fallback ---
   Active when user's OS is set to dark mode AND celestial.js has not
   determined it's daytime. The :not(.day-mode) guard lets the celestial
   engine override when it has solar data and the sun is up. */
@media (prefers-color-scheme: dark) {
  :root:not(.day-mode) {
    color-scheme: dark;

    /* Core */
    --color-bg: #0f1318;
    --color-bg-center: #0f1318;
    --color-bg-edge: #0b0e12;
    --color-text: #c8cdd3;
    --color-muted: #7a8290;
    --color-subtle: #555d6a;
    --color-dim: #8a919c;
    --color-faint: #606878;
    --color-dark: #a0a8b4;
    --color-light: #252b34;
    --color-border: #2e3640;
    --color-rule: #1e2530;
    --color-code-bg: #151a22;

    /* Illumination pigments */
    --illum-ultramarine: #5B7FB8;
    --illum-ultramarine-wash: rgba(91, 127, 184, 0.22);
    /* The 22% wash is ~1.3:1 on this background; 80% clears 3:1 so
       underlines stay visible, sidenotes included. */
    --link-underline: rgba(91, 127, 184, 0.8);
    --illum-ultramarine-fn: rgba(91, 127, 184, 0.70);
    --illum-vermilion: #C45A4A;
    --illum-verdigris: #4A9B8A;
    --illum-saffron: #9A8A5E;
    --illum-saffron-rule: rgba(154, 138, 94, 0.45);
    --illum-saffron-text: #8A8460;

    /* Category washes */
    --wash-ultramarine: rgba(91, 127, 184, 0.12);
    --wash-ultramarine-strong: rgba(91, 127, 184, 0.18);
    --wash-vermilion: rgba(196, 90, 74, 0.12);
    --wash-verdigris: rgba(74, 155, 138, 0.12);
    --wash-saffron: rgba(154, 138, 94, 0.12);
    --wash-saffron-deep: rgba(154, 138, 94, 0.20);
    --wash-parchment: rgba(100, 90, 70, 0.12);

    /* Structural */
    --wash-warm-border: rgba(100, 100, 120, 0.28);
  }

  /* Element overrides for OS preference path */

  /* Masthead: moonlight glow instead of saffron sunburst */
  :root:not(.day-mode) .masthead {
    background: radial-gradient(
        ellipse 50% 90% at 50% 55%,
        rgba(91, 127, 184, 0.05) 0%,
        rgba(91, 127, 184, 0.02) 40%,
        transparent 100%
    );
  }

  /* Ornaments: white-on-black source, screen blend hides black bg */
  :root:not(.day-mode) .initial,
  :root:not(.day-mode) .tailpiece,
  :root:not(.day-mode) .section-break {
    filter: brightness(0.85);
    mix-blend-mode: screen;
  }

  /* Illuminated initial frame */
  :root:not(.day-mode) .illuminated-initial {
    background-color: rgba(196, 90, 74, 0.15);
    border-color: var(--illum-saffron);
  }

  /* Pen marginalia: screen blend for dark backgrounds */
  :root:not(.day-mode) .pen-marginalia-layer { mix-blend-mode: screen; }

  /* Figures: dim images, restore on hover */
  :root:not(.day-mode) .figure img,
  :root:not(.day-mode) .figure video {
    filter: brightness(0.85);
    transition: filter 0.3s ease;
  }
  :root:not(.day-mode) .figure img:hover,
  :root:not(.day-mode) .figure video:hover {
    filter: brightness(1);
  }

  /* Figure frame */
  :root:not(.day-mode) .figure {
    border-color: var(--color-border);
    background: var(--color-bg);
  }

  /* Index search plinth: dark stone */
  :root:not(.day-mode) #idx-search .plinth {
    background: linear-gradient(to bottom, #151a22 0%, #111720 100%);
    box-shadow:
        inset 0 0 0 1px #1a2030,
        inset 0 0 0 4px #0f1318,
        inset 0 0 0 5px #3a4050,
        0 2px 4px rgba(0, 0, 0, 0.3);
  }
  :root:not(.day-mode) #idx-search .input-frame {
    background: var(--color-code-bg);
    border-color: var(--color-border);
  }
  :root:not(.day-mode) #idx-search input {
    color: var(--color-text);
  }

  /* Watercolour grain: lighter, lower opacity on dark */
  :root:not(.day-mode) [class*="wc-mb-"]::after {
    background-color: rgb(140, 150, 170);
    opacity: 0.06;
  }

  /* Subscribe form inputs */
  :root:not(.day-mode) .subscribe-input,
  :root:not(.day-mode) .subscribe-form input[type="text"],
  :root:not(.day-mode) .subscribe-form input[type="email"] {
    background: var(--color-code-bg);
    border-color: var(--color-border);
    color: var(--color-text);
  }

  /* Masthead stamp */
  :root:not(.day-mode) .masthead-stamp {
    color: rgba(180, 100, 80, 0.65);
    background: var(--color-bg);
    border-color: rgba(180, 100, 80, 0.35);
  }
  :root:not(.day-mode) .masthead-stamp .stamp-name {
    color: rgba(180, 100, 80, 0.75);
  }

  /* Video scene dropdown */
  :root:not(.day-mode) .vf-scene-dropdown {
    background: var(--color-bg);
    border-color: var(--color-border);
  }
  :root:not(.day-mode) .vf-scene-entry:hover {
    background: var(--color-light);
  }

  /* Settings menu */
  :root:not(.day-mode) media-settings-menu {
    --media-menu-background: var(--color-bg);
    --media-menu-item-hover-background: var(--color-light);
    border-color: var(--color-border);
  }
}

/* --- Night palette: Path 2 — Celestial-driven ---
   JS sets .night-mode on <html> when sun altitude ≤ -3°.
   Identical values to the media query path. */
:root.night-mode {
    color-scheme: dark;

    /* Core */
    --color-bg: #0f1318;
    --color-bg-center: #0f1318;
    --color-bg-edge: #0b0e12;
    --color-text: #c8cdd3;
    --color-muted: #7a8290;
    --color-subtle: #555d6a;
    --color-dim: #8a919c;
    --color-faint: #606878;
    --color-dark: #a0a8b4;
    --color-light: #252b34;
    --color-border: #2e3640;
    --color-rule: #1e2530;
    --color-code-bg: #151a22;

    /* Illumination pigments */
    --illum-ultramarine: #5B7FB8;
    --illum-ultramarine-wash: rgba(91, 127, 184, 0.22);
    --link-underline: rgba(91, 127, 184, 0.8);
    --illum-ultramarine-fn: rgba(91, 127, 184, 0.70);
    --illum-vermilion: #C45A4A;
    --illum-verdigris: #4A9B8A;
    --illum-saffron: #9A8A5E;
    --illum-saffron-rule: rgba(154, 138, 94, 0.45);
    --illum-saffron-text: #8A8460;

    /* Category washes */
    --wash-ultramarine: rgba(91, 127, 184, 0.12);
    --wash-ultramarine-strong: rgba(91, 127, 184, 0.18);
    --wash-vermilion: rgba(196, 90, 74, 0.12);
    --wash-verdigris: rgba(74, 155, 138, 0.12);
    --wash-saffron: rgba(154, 138, 94, 0.12);
    --wash-saffron-deep: rgba(154, 138, 94, 0.20);
    --wash-parchment: rgba(100, 90, 70, 0.12);

    /* Structural */
    --wash-warm-border: rgba(100, 100, 120, 0.28);
}

/* Element overrides for celestial-driven path */

:root.night-mode .masthead {
    background: radial-gradient(
        ellipse 50% 90% at 50% 55%,
        rgba(91, 127, 184, 0.05) 0%,
        rgba(91, 127, 184, 0.02) 40%,
        transparent 100%
    );
}

/* Ornaments: white-on-black source, screen blend hides black bg */
:root.night-mode .initial,
:root.night-mode .tailpiece,
:root.night-mode .section-break {
    filter: brightness(0.85);
    mix-blend-mode: screen;
}

:root.night-mode .illuminated-initial {
    background-color: rgba(196, 90, 74, 0.15);
    border-color: var(--illum-saffron);
}

/* Pen marginalia: screen blend for dark backgrounds */
:root.night-mode .pen-marginalia-layer { mix-blend-mode: screen; }

:root.night-mode .figure img,
:root.night-mode .figure video {
    filter: brightness(0.85);
    transition: filter 0.3s ease;
}
:root.night-mode .figure img:hover,
:root.night-mode .figure video:hover {
    filter: brightness(1);
}

:root.night-mode .figure {
    border-color: var(--color-border);
    background: var(--color-bg);
}

:root.night-mode #idx-search .plinth {
    background: linear-gradient(to bottom, #151a22 0%, #111720 100%);
    box-shadow:
        inset 0 0 0 1px #1a2030,
        inset 0 0 0 4px #0f1318,
        inset 0 0 0 5px #3a4050,
        0 2px 4px rgba(0, 0, 0, 0.3);
}
:root.night-mode #idx-search .input-frame {
    background: var(--color-code-bg);
    border-color: var(--color-border);
}
:root.night-mode #idx-search input {
    color: var(--color-text);
}

:root.night-mode [class*="wc-mb-"]::after {
    background-color: rgb(140, 150, 170);
    opacity: 0.06;
}

:root.night-mode .subscribe-input,
:root.night-mode .subscribe-form input[type="text"],
:root.night-mode .subscribe-form input[type="email"] {
    background: var(--color-code-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

:root.night-mode .masthead-stamp {
    color: rgba(180, 100, 80, 0.65);
    background: var(--color-bg);
    border-color: rgba(180, 100, 80, 0.35);
}
:root.night-mode .masthead-stamp .stamp-name {
    color: rgba(180, 100, 80, 0.75);
}

:root.night-mode .vf-scene-dropdown {
    background: var(--color-bg);
    border-color: var(--color-border);
}
:root.night-mode .vf-scene-entry:hover {
    background: var(--color-light);
}

:root.night-mode media-settings-menu {
    --media-menu-background: var(--color-bg);
    --media-menu-item-hover-background: var(--color-light);
    border-color: var(--color-border);
}