/* ==========================================================================
   Caesura v0.3.0
   --------------------------------------------------------------------------
   Contents
   1. Fonts
   2. Tokens and schemes
   3. Base
   4. Shared: top bar, titles, captions, links
   5. Front page: masthead, index, lead, rows
   6. Look view
   7. Reading interior: head, hero, rail, prose, Ghost cards, sources, coda
   8. About: the page and the layer
   9. Other pages, archive, error
   10. Display settings
   11. Arrival and transitions
   12. Responsive
   13. Motion preferences, print
   ========================================================================== */


/* 1. Fonts ---------------------------------------------------------------
   Self-hosted. Literata (text and display, with optical sizes) and Libre
   Franklin (labels, metadata, controls). Both cover the transliteration
   marks the writing needs (ṛ ṣ ṇ ṭ ā ī ū), which the v0.1 fonts did not. */

@font-face {
    font-family: "Literata";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/literata-latin-opsz-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Literata";
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/literata-latin-opsz-italic.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Literata";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/literata-latin-ext-opsz-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Literata";
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/literata-latin-ext-opsz-italic.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Libre Franklin";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/libre-franklin-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Libre Franklin";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/libre-franklin-latin-wght-italic.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Libre Franklin";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/libre-franklin-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Libre Franklin";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/libre-franklin-latin-ext-wght-italic.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2. Tokens and schemes --------------------------------------------------- */

:root {
    --reader-scale: 1;

    /* Paper */
    --paper: #efede6;
    --paper-deep: #e4e0d6;
    --ink: #161512;
    --ink-soft: #3d3a34;
    --muted: #6f6a62;
    --oxide: #7f4a35;

    --bg: var(--paper);
    --bg-deep: var(--paper-deep);
    --fg: var(--ink);
    --fg-soft: var(--ink-soft);
    --fg-muted: var(--muted);
    --accent: var(--oxide);
    --selection-fg: #fff;
    --line: rgba(22, 21, 18, 0.16);
    --line-strong: rgba(22, 21, 18, 0.55);
    --panel: #f6f4ee;
    --shadow: 0 18px 60px rgba(20, 18, 14, 0.14);

    /* Ghost's font settings hook in here if the owner ever chooses fonts in
       Design & branding; otherwise the theme's own faces are used. */
    --serif: var(--gh-font-body, "Literata"), Georgia, "Times New Roman", serif;
    --display: var(--gh-font-heading, "Literata"), Georgia, "Times New Roman", serif;
    --sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

    --ease: cubic-bezier(0.22, 0.72, 0.24, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --pad: clamp(16px, 3.6vw, 56px);
    --measure: 36em;          /* reading column, in prose ems */
    --wide: 1120px;           /* wide image cards */
    --rail-w: 168px;          /* essay rail on wide screens */
    --mast-lede: clamp(1.5rem, 8.5vh, 5rem);  /* statement to masthead */

    --label-size: 0.6875rem;     /* 11px at the browser's default size; grows with it */
    --label-tracking: 0.12em;
}

html[data-scheme="ink"],
html[data-default-scheme="ink"]:not([data-scheme]) {
    --bg: #141311;
    --bg-deep: #1c1a17;
    --fg: #ece7dc;
    --fg-soft: #cfc9bd;
    --fg-muted: #9a948a;
    --accent: #c07f62;          /* the oxide, lifted to read on ink */
    --selection-fg: #141311;
    --line: rgba(236, 231, 220, 0.17);
    --line-strong: rgba(236, 231, 220, 0.55);
    --panel: #1e1c19;
    --shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    html[data-scheme="system"],
    html[data-default-scheme="system"]:not([data-scheme]) {
        --bg: #141311;
        --bg-deep: #1c1a17;
        --fg: #ece7dc;
        --fg-soft: #cfc9bd;
        --fg-muted: #9a948a;
        --accent: #c07f62;
        --selection-fg: #141311;
        --line: rgba(236, 231, 220, 0.17);
        --line-strong: rgba(236, 231, 220, 0.55);
        --panel: #1e1c19;
        --shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
        color-scheme: dark;
    }
}


/* 3. Base ------------------------------------------------------------------ */

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

html {
    background: var(--bg);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--serif);
    font-size: calc(16px * var(--reader-scale));
    line-height: 1.5;
    font-optical-sizing: auto;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.4s ease, color 0.4s ease;
}

::selection { background: var(--accent); color: var(--selection-fg); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; -webkit-tap-highlight-color: transparent; }
a:active, button:active { opacity: 0.7; }
button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 1.5px solid var(--fg); outline-offset: 3px; }

/* Small controls set in the label voice keep their size on the page but
   answer to a larger touch area around them. */
.ca-top__nav a, .ca-top__wordmark, .ca-modes__button, .ca-colophon__nav a, .ca-colophon__link,
.ca-pagination a, .ca-coda__back, .ca-coda__tags a, .ca-essay__kicker a, .ca-error__link,
.ca-rail__sources, .ca-rail__top, .ca-signup__button, .ca-display__close, .ca-display__reset,
.ca-page-simple__foot a, .ca-about-body__links a, .ca-display-button { position: relative; }
.ca-top__nav a::before, .ca-top__wordmark::before, .ca-modes__button::before, .ca-colophon__nav a::before, .ca-colophon__link::before,
.ca-pagination a::before, .ca-coda__back::before, .ca-coda__tags a::before, .ca-essay__kicker a::before, .ca-error__link::before,
.ca-rail__sources::before, .ca-rail__top::before, .ca-signup__button::before, .ca-display__close::before, .ca-display__reset::before,
.ca-page-simple__foot a::before, .ca-about-body__links a::before, .ca-display-button::before {
    content: ""; position: absolute; inset: -0.7rem -0.5rem;
}

.ca-visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.ca-skip {
    position: fixed; left: 1rem; top: 1rem; z-index: 5000;
    transform: translateY(-200%);
    background: var(--fg); color: var(--bg);
    padding: 0.7rem 1rem;
    font-family: var(--sans); font-size: 0.85rem;
}
.ca-skip:focus { transform: none; }

.ca-page { min-height: 100svh; }

/* Label voice: the small sans used for metadata and controls */
.ca-top__nav a,
.ca-top__wordmark,
.ca-modes__button,
.ca-lead__meta,
.ca-row__date,
.ca-row__aside,
.ca-plate__label,
.ca-essay__kicker,
.ca-essay__byline,
.ca-rail__date,
.ca-rail__sources,
.ca-rail__top,
.ca-caption,
.ca-prose figcaption,
.ca-sources__label,
.ca-coda__pub,
.ca-coda__tags,
.ca-coda__back,
.ca-support__button,
.ca-archive__eyebrow,
.ca-colophon,
.ca-signup__label,
.ca-signup__button,
.ca-signup__note,
.ca-pagination,
.ca-error__code,
.ca-error__link,
.ca-display-button,
.ca-display__title,
.ca-display__close,
.ca-display__label,
.ca-display__reset {
    font-family: var(--sans);
    font-size: var(--label-size);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    line-height: 1.4;
    font-weight: 500;
}


/* 4. Shared ----------------------------------------------------------------- */

/* Top bar */
.ca-top {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem;
    padding: calc(var(--pad) * 0.7) var(--pad) 0;
    min-height: 3.2rem;
}
.ca-top__statement {
    margin: 0;
    max-width: 27em;
    font-family: var(--serif);
    font-size: 1.02rem;
    line-height: 1.42;
    color: var(--fg-soft);
    text-wrap: pretty;
}
.ca-top__wordmark { text-decoration: none; font-weight: 600; letter-spacing: 0.14em; }
.ca-top__nav { display: flex; gap: 1.6rem; flex-shrink: 0; }
.ca-top__nav a { text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color 0.25s ease; }
@media (hover: hover) { .ca-top__nav a:hover, .ca-top__wordmark:hover { border-bottom-color: currentColor; } }

/* Titles with a subtitle after a colon get split by main.js */
.ca-title__main { display: block; }
.ca-title__sub {
    display: block;
    font-style: italic;
    font-weight: 400;
    font-size: 0.56em;
    line-height: 1.18;
    letter-spacing: -0.005em;
    margin-top: 0.45em;
    color: var(--fg-soft);
}

/* Captions */
.ca-meta__sep { display: inline-block; width: 1.1rem; height: 1px; background: var(--line-strong); vertical-align: middle; margin: 0 0.15rem; }

.ca-caption, .ca-prose figcaption {
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.78rem;
    line-height: 1.5;
    font-weight: 400;
    color: var(--fg-muted);
    margin-top: 0.75rem;
    max-width: 44em;
    text-wrap: pretty;
}
.ca-caption a, .ca-prose figcaption a { text-decoration-color: var(--line-strong); }
.ca-caption p, .ca-prose figcaption p { margin: 0; }


/* 5. Front page ------------------------------------------------------------- */

.ca-front {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding: 0 var(--pad);
}
.ca-front > .ca-top { padding-left: 0; padding-right: 0; }

/* The masthead takes its height from the word, not from a share of the
   viewport. The interval above it is the only deliberate space: enough for
   the statement to read as a preface, not so much that the word drifts to
   the middle of the field. */
.ca-masthead {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: var(--mast-lede) 0 clamp(0.5rem, 1.4vh, 1.1rem);
    border-bottom: 1px solid var(--line-strong);
}
.ca-masthead__word {
    margin: 0 0 0 -0.035em;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(3.8rem, 26.4vw, 34rem);
    line-height: 0.82;
    letter-spacing: -0.045em;
    white-space: nowrap;
    color: var(--fg);
}

/* Under the masthead: the Read / Look switch, shown only when more than one
   piece carries an image. It is an annotation hung from the right end of the
   masthead rule, not a navigation band, so it has no rule of its own and
   takes no more height than the words themselves. */
.ca-front__bar {
    display: flex; justify-content: flex-end; align-items: flex-start;
    padding: 0.42rem 0 0;
}
.ca-modes { display: inline-flex; align-items: center; gap: 0.7rem; }
.ca-modes__button {
    position: relative;
    color: var(--fg-muted);
    padding: 0.35rem 0 0.3rem;
    transition: color 0.25s ease;
}
.ca-modes__button::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 1px;
    background: var(--fg); transform: scaleX(0); transform-origin: left;
    transition: transform 0.35s var(--ease);
}
@media (hover: hover) { .ca-modes__button:hover { color: var(--fg); } }
.ca-modes__button.is-active { color: var(--fg); }
.ca-modes__button.is-active::after { transform: scaleX(1); }
.ca-modes__sep { width: 1px; height: 0.95em; background: var(--line-strong); transform: rotate(18deg); }

/* Index: the list of pieces */
.ca-index { flex: 1 0 auto; }
.ca-index__empty { margin: 3rem 0 0; color: var(--fg-muted); font-style: italic; }

/* Lead entry */
.ca-lead {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "meta meta" "text plate";
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: 1.2rem;
    padding: clamp(1.8rem, 4.5vh, 3.6rem) 0 clamp(2rem, 5vh, 4rem);
    border-bottom: 1px solid var(--line);
}
.ca-lead--text { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "text"; }
.ca-lead__hit { position: absolute; inset: 0; z-index: 2; }
.ca-lead__meta { grid-area: meta; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; color: var(--fg-muted); }
.ca-lead__text { grid-area: text; align-self: start; }
.ca-lead__title {
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2.35rem, 5.1vw, 5.2rem);
    line-height: 1.0;
    letter-spacing: -0.025em;
    text-wrap: balance;
    max-width: 14em;
    transition: color 0.3s ease;
}
.ca-lead--text .ca-lead__title { max-width: 16em; }
@media (hover: hover) { .ca-lead:hover .ca-lead__title { color: var(--accent); } }
.ca-lead:focus-within .ca-lead__title { color: var(--accent); }
.ca-lead__hit:focus-visible { outline-offset: -2px; }
.ca-lead__deck {
    margin: 1.4rem 0 0;
    max-width: 36em;
    font-size: clamp(1.02rem, 1.25vw, 1.2rem);
    line-height: 1.5;
    color: var(--fg-soft);
    text-wrap: pretty;
}
.ca-lead__plate { grid-area: plate; align-self: start; justify-self: end; width: 100%; }
.ca-lead__plate img {
    width: auto; max-width: 100%;
    max-height: min(62vh, 640px);
    margin-left: auto;
    object-fit: contain;
    transition: transform 0.6s var(--ease);
}
@media (hover: hover) { .ca-lead:hover .ca-lead__plate img { transform: translateY(-3px); } }

/* Row entries */
.ca-row {
    position: relative;
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 2rem;
    padding: 1.35rem 0 1.45rem;
    border-bottom: 1px solid var(--line);
}
.ca-row__hit { position: absolute; inset: 0; z-index: 2; }
.ca-row__date { color: var(--fg-muted); }
.ca-row__title {
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.45rem, 2.4vw, 2.2rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    transition: color 0.3s ease;
}
.ca-row__title .ca-title__sub { font-size: 0.68em; margin-top: 0.28em; line-height: 1.25; max-width: 32em; }
@media (hover: hover) { .ca-row:hover .ca-row__title { color: var(--accent); } }
.ca-row:focus-within .ca-row__title { color: var(--accent); }
.ca-row__hit:focus-visible { outline-offset: -2px; }
.ca-row__deck {
    margin: 0.45rem 0 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--fg-muted);
    max-width: 44em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ca-row__aside { color: var(--fg-muted); }

.ca-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 1rem; padding: 2rem 0 0.5rem; color: var(--fg-muted); }
.ca-pagination a { text-decoration: none; color: var(--fg); padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color 0.25s ease; }
@media (hover: hover) { .ca-pagination a:hover { border-bottom-color: currentColor; } }
.ca-pagination__earlier { justify-self: end; }

/* Colophon */
.ca-colophon {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem;
    padding: 2rem 0 calc(3.6rem + env(safe-area-inset-bottom, 0px)); /* clears the fixed Display control */
    margin-top: 3rem;
    color: var(--fg-muted);
}
.ca-colophon__left, .ca-colophon__right { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; align-items: baseline; }
.ca-colophon__name { color: var(--fg); }
.ca-colophon__nav .nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; }
.ca-colophon__nav a, .ca-colophon__link { text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color 0.25s ease, border-color 0.25s ease; }
@media (hover: hover) { .ca-colophon__nav a:hover, .ca-colophon__link:hover { border-bottom-color: currentColor; color: var(--fg); } }

/* Email signup, only when switched on in theme settings and members are enabled */
.ca-signup { flex-basis: 100%; margin-top: 0.4rem; max-width: 26rem; }
.ca-signup__label { display: block; color: var(--fg-muted); margin-bottom: 0.55rem; }
.ca-signup__row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line-strong); }
.ca-signup__input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font-family: var(--serif); font-size: 1rem; padding: 0.45rem 0; letter-spacing: 0; text-transform: none; }
.ca-signup__input::placeholder { color: var(--fg-muted); }
.ca-signup__input:focus { outline: none; }
.ca-signup__row:focus-within { border-bottom-color: var(--fg); }
.ca-signup__button { color: var(--fg); padding: 0.45rem 0 0.45rem 1rem; }
@media (hover: hover) { .ca-signup__button:hover { color: var(--accent); } }
.ca-signup__note { display: none; margin: 0.6rem 0 0; color: var(--fg-muted); text-transform: none; letter-spacing: 0.01em; }
.ca-signup.success .ca-signup__note:not(.ca-signup__note--error) { display: block; }
.ca-signup.error .ca-signup__note--error { display: block; color: var(--accent); }
.ca-signup.loading .ca-signup__button { opacity: 0.5; }


/* 6. Look view ---------------------------------------------------------------
   The same pieces, seen through their images: one plate after another at
   its own proportion, hung from the left margin like the rest of the page,
   with the title and date set beneath its left edge the way the essay's
   captions are. Wide plates reach the essay's wide-image measure; tall
   plates stop at the height of the field. No shadows, no cropping. */

.ca-look { flex: 1 0 auto; padding: clamp(2.6rem, 6vh, 4.5rem) 0 clamp(2rem, 4vh, 3rem); }
.ca-plate {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 0 0 clamp(4rem, 12vh, 9rem);
}
.ca-plate:last-child { padding-bottom: clamp(2rem, 6vh, 5rem); }
.ca-plate__link { display: block; max-width: 100%; }
.ca-plate img {
    width: auto; height: auto;
    max-width: min(100%, var(--wide));
    max-height: 72svh;
    object-fit: contain;
    outline: 1px solid var(--line); outline-offset: -1px;
    transition: transform 0.7s var(--ease);
}
@media (hover: hover) { .ca-plate__link:hover img { transform: translateY(-3px); } }
.ca-plate__label {
    margin-top: 1.1rem;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
    color: var(--fg-muted);
}
.ca-plate__title { color: var(--fg); font-family: var(--serif); font-style: italic; font-size: 1.05rem; letter-spacing: 0; text-transform: none; font-weight: 400; text-wrap: pretty; max-width: 40em; }
.ca-plate__title .ca-title__main { display: inline; }
.ca-plate__link:focus-visible { outline-offset: 4px; }

/* Look state on the front page: the masthead steps back, the images take the field */
.ca-front.is-look .ca-masthead { min-height: 0; padding: 1.6rem 0 1rem; }
.ca-front.is-look .ca-masthead__word { font-size: clamp(2.2rem, 5.6vw, 4.2rem); letter-spacing: -0.03em; line-height: 1; }
.ca-front.is-look .ca-front__bar { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 0.55rem 0 0.5rem; border-bottom: 1px solid var(--line); }

.ca-masthead, .ca-front__bar, .ca-index, .ca-look { transition: opacity 0.26s ease; }
.ca-front.is-switching .ca-masthead, .ca-front.is-switching .ca-front__bar, .ca-front.is-switching .ca-index, .ca-front.is-switching .ca-look { opacity: 0; }

html.js .ca-plate { opacity: 0; transform: translateY(16px); transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out); }
html.js .ca-plate.is-seen { opacity: 1; transform: none; }


/* 7. Reading interior -------------------------------------------------------- */

.ca-essay { padding: 0 var(--pad) 0; }
.ca-essay__article { max-width: 1400px; margin: 0 auto; }

/* Opening */
.ca-essay__head {
    max-width: var(--measure);
    margin: clamp(2.5rem, 9vh, 7rem) auto 0;
    font-size: calc(clamp(1.0625rem, 0.98rem + 0.32vw, 1.1875rem) * var(--reader-scale));
}
.ca-essay__kicker {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
    margin: 0 0 1.6rem;
    color: var(--fg-muted);
}
.ca-essay__kicker a { text-decoration: none; }
.ca-essay__title {
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2.3rem, 4.6vw, 3.9rem);
    line-height: 1.02;
    letter-spacing: -0.022em;
    text-wrap: balance;
}
.ca-essay__deck {
    margin: 1.5rem 0 0;
    font-size: 1.22em;
    line-height: 1.42;
    color: var(--fg-soft);
    text-wrap: pretty;
}
.ca-essay__byline { margin: 1.8rem 0 0; color: var(--fg-muted); }

/* Feature image: its own proportion, never a cropped banner */
.ca-essay__hero {
    width: fit-content;
    max-width: min(100%, var(--wide));
    margin: clamp(2.5rem, 7vh, 5rem) auto 0;
}
.ca-essay__hero img {
    width: auto; height: auto;
    max-width: 100%;
    max-height: 82svh;
    margin: 0 auto;
}

/* Body: rail + prose */
.ca-essay__body {
    position: relative;
    margin-top: clamp(2.5rem, 7vh, 5rem);
    container-type: inline-size;
}

.ca-rail { display: none; }

.ca-prose {
    max-width: var(--measure);
    margin: 0 auto;
    hanging-punctuation: first last;
    font-size: calc(clamp(1.0625rem, 0.98rem + 0.32vw, 1.1875rem) * var(--reader-scale));
    line-height: 1.62;
    letter-spacing: -0.003em;
    text-wrap: pretty;
    hyphens: manual;
}
.ca-prose > * { margin-top: 0; margin-bottom: 1em; }
.ca-prose > *:last-child { margin-bottom: 0; }
.ca-prose p { margin-bottom: 1.05em; }
.ca-prose em { font-style: italic; }
.ca-prose strong { font-weight: 600; }
.ca-prose a {
    text-decoration-color: var(--line-strong);
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover) { .ca-prose a:hover { text-decoration-color: var(--accent); color: var(--accent); } }
.ca-prose a { overflow-wrap: anywhere; }

.ca-prose h2, .ca-prose h3, .ca-prose h4 {
    font-family: var(--display);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.012em;
    margin-top: 2.4em;
    margin-bottom: 0.7em;
    text-wrap: balance;
}
.ca-prose h2 { font-size: 1.5em; }
.ca-prose h3 { font-size: 1.2em; font-style: italic; font-weight: 400; }
.ca-prose h4 { font-family: var(--sans); font-size: 0.72em; letter-spacing: 0.1em; text-transform: uppercase; }

.ca-prose blockquote {
    margin: 2em 0;
    padding: 0 0 0 1.4em;
    border-left: 1px solid var(--line-strong);
    font-style: italic;
    color: var(--fg-soft);
}
.ca-prose blockquote em { font-style: normal; }
.ca-prose blockquote p { margin-bottom: 0.6em; }
.ca-prose blockquote p:last-child { margin-bottom: 0; }
.ca-prose blockquote.kg-blockquote-alt {
    border: 0; padding: 0;
    margin: 2.6em auto;
    text-align: center;
    font-size: 1.32em;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--fg);
}

/* Section break: a short hairline and air, nothing decorative */
.ca-prose hr {
    border: 0;
    width: 2.6rem;
    height: 1px;
    background: var(--line-strong);
    margin: 3.4em auto;
}

.ca-prose ul, .ca-prose ol { padding-left: 1.4em; }
.ca-prose li { margin: 0.4em 0; }
.ca-prose li::marker { color: var(--fg-muted); }
.ca-prose code { font-size: 0.86em; background: var(--bg-deep); padding: 0.1em 0.3em; border-radius: 2px; }
.ca-prose pre { overflow: auto; padding: 1.1rem 1.2rem; background: var(--bg-deep); font-size: 0.82em; line-height: 1.5; }
.ca-prose sup { font-size: 0.7em; line-height: 0; vertical-align: super; }
.ca-prose small { font-size: 0.85em; }

/* Ghost editor cards */
.ca-prose .kg-card { margin: 2.2em 0; }
.ca-prose figure.kg-card { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.ca-prose .kg-image { width: auto; height: auto; max-width: 100%; max-height: 85svh; }
.ca-prose figure.kg-width-wide, .ca-prose .kg-width-wide {
    --w: min(var(--wide), 100cqw);
    width: var(--w);
    max-width: none;
    margin-left: calc((100% - var(--w)) / 2);
    margin-right: 0;
}
.ca-prose .kg-width-wide .kg-image { max-height: none; margin: 0 auto; }
.ca-prose figure.kg-width-full, .ca-prose .kg-width-full {
    --w: 100cqw;
    width: var(--w);
    max-width: none;
    margin-left: calc((100% - var(--w)) / 2);
    margin-right: 0;
}
.ca-prose .kg-width-full .kg-image { width: 100%; max-height: none; }
.ca-prose .kg-width-wide figcaption { margin-left: 0; }
.ca-prose .kg-width-full figcaption { padding: 0 var(--pad); margin-left: 0; }
.ca-prose figure.kg-card figcaption { text-align: left; }
.ca-prose figure.kg-image-card:not(.kg-width-wide):not(.kg-width-full) figcaption { width: 100%; }

.ca-prose figure.kg-gallery-card { width: 100%; }
.ca-prose .kg-gallery-image img { height: 100%; width: 100%; object-fit: cover; }

.ca-prose .kg-embed-card { width: 100%; }
.ca-prose .kg-embed-card iframe { max-width: 100%; }

/* The editor's other cards, brought into the page's own materials: the
   paper, a hairline, the theme's faces. Ghost's card styles set white boxes,
   rounded corners and a system sans; these rules outrank them. */
.ca-prose figure.kg-bookmark-card { width: 100%; }
.ca-prose .kg-bookmark-card a.kg-bookmark-container { display: flex; background: transparent; color: inherit; border: 1px solid var(--line); border-radius: 0; text-decoration: none; overflow: hidden; }
.ca-prose .kg-bookmark-card .kg-bookmark-content { padding: 1.1rem 1.3rem; font-family: var(--serif); }
.ca-prose .kg-bookmark-card .kg-bookmark-title { font-family: var(--display); font-size: 1.05em; line-height: 1.3; font-weight: 500; }
.ca-prose .kg-bookmark-card .kg-bookmark-description { font-size: 0.88em; line-height: 1.5; max-height: 3em; color: var(--fg-muted); opacity: 1; margin-top: 0.4em; }
.ca-prose .kg-bookmark-card .kg-bookmark-metadata { font-family: var(--sans); font-size: 0.72em; letter-spacing: 0.04em; font-weight: 500; margin-top: 1em; color: var(--fg-muted); }
.ca-prose .kg-bookmark-card .kg-bookmark-metadata > *:not(img) { opacity: 1; }
.ca-prose .kg-bookmark-card .kg-bookmark-icon { width: 16px; height: 16px; }
.ca-prose .kg-bookmark-card .kg-bookmark-thumbnail { min-width: 30%; max-width: 260px; }
.ca-prose .kg-bookmark-card .kg-bookmark-thumbnail img { border-radius: 0; }

.ca-prose .kg-callout-card, .ca-prose .kg-callout-card[class*="kg-callout-card-"] { background: var(--bg-deep); color: inherit; border-radius: 2px; box-shadow: none; padding: 1.1rem 1.3rem; }
.ca-prose .kg-callout-card.kg-callout-card-white { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.ca-prose .kg-callout-card a { color: inherit; }
.ca-prose .kg-callout-card div.kg-callout-text { font-size: 0.95em; line-height: 1.55; }

.ca-prose .kg-toggle-card { background: transparent; box-shadow: none; border: 1px solid var(--line); border-radius: 0; padding: 1rem 1.2rem; }
.ca-prose .kg-toggle-card h4.kg-toggle-heading-text { font-family: var(--display); font-size: 1.05em; font-weight: 500; letter-spacing: -0.005em; text-transform: none; line-height: 1.3; }
.ca-prose .kg-toggle-heading svg { color: var(--fg-muted); }
.ca-prose .kg-toggle-card .kg-toggle-content p { font-size: 0.95em; }

.ca-prose .kg-button-card a.kg-btn, .ca-prose .kg-button-card a.kg-btn-accent {
    display: inline-flex; align-items: center; height: auto;
    padding: 0.8rem 1.3rem 0.75rem;
    background: transparent; color: inherit;
    border: 1px solid var(--line-strong); border-radius: 0;
    font-family: var(--sans); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; font-weight: 500; line-height: 1.4;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
@media (hover: hover) { .ca-prose .kg-button-card a.kg-btn:hover { opacity: 1; background: var(--fg); color: var(--bg); border-color: var(--fg); } }

.ca-prose .kg-file-card a.kg-file-card-container { background: transparent; color: inherit; border: 1px solid var(--line); border-radius: 0; text-decoration: none; padding: 1rem 1.2rem; font-family: var(--serif); }
.ca-prose .kg-audio-card { background: transparent; color: inherit; border-radius: 0; box-shadow: inset 0 0 0 1px var(--line); font-family: var(--serif); }
.ca-prose .kg-product-card-container { border-radius: 0; box-shadow: inset 0 0 0 1px var(--line); }

.ca-prose .kg-header-card { border-radius: 0; }
.ca-prose .kg-header-card.kg-style-light, .ca-prose .kg-header-card.kg-style-image { background-color: var(--bg-deep); }
.ca-prose .kg-header-card.kg-style-accent { background-color: var(--fg); }
.ca-prose .kg-header-card h2.kg-header-card-header, .ca-prose .kg-header-card h2.kg-header-card-heading { font-family: var(--display); font-weight: 400; letter-spacing: -0.02em; }
.ca-prose .kg-header-card h3.kg-header-card-subheader, .ca-prose .kg-header-card .kg-header-card-subheading { font-family: var(--serif); font-weight: 400; }

/* Tables, set like a list of entries: hairlines between rows, the label voice for the heading row */
.ca-prose table { width: 100%; border-collapse: collapse; font-size: 0.92em; line-height: 1.45; margin: 1.6em 0; }
.ca-prose th, .ca-prose td { text-align: left; vertical-align: top; padding: 0.55em 1.2em 0.55em 0; border-bottom: 1px solid var(--line); }
.ca-prose th:last-child, .ca-prose td:last-child { padding-right: 0; }
.ca-prose thead th { font-family: var(--sans); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; font-weight: 500; color: var(--fg-muted); border-bottom-color: var(--line-strong); }
.ca-prose tbody tr:last-child td { border-bottom-color: var(--line-strong); }
.ca-prose .kg-table-card, .ca-prose .kg-html-card { overflow-x: auto; }

/* Source notes. main.js wraps the note (see README for the convention) in
   this section so it can be set as part of the piece: labelled, slightly
   smaller, on its own measure, fully readable. */
.ca-sources {
    max-width: var(--measure);
    margin: 3.4em auto 0;
    padding-top: 2.2em;
    border-top: 1px solid var(--line-strong);
    scroll-margin-top: 2rem;
}
.ca-prose .ca-sources__label {
    margin: 0 0 1.4em;
    font-family: var(--sans);
    font-size: var(--label-size);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    line-height: 1.4;
    font-weight: 500;
    color: var(--fg-muted);
}
.ca-sources__body {
    font-size: 0.9em;
    line-height: 1.6;
    color: var(--fg);
}
.ca-sources__body p { margin: 0 0 0.9em; }
.ca-sources__body p:last-child { margin-bottom: 0; }
.ca-sources__body a { text-decoration-color: var(--line-strong); }
@media (hover: hover) { .ca-sources__body a:hover { text-decoration-color: var(--accent); color: var(--accent); } }

/* Coda: the ending. Air, a hairline, a sign-off, the ways out. */
.ca-coda {
    min-height: 72svh;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(5rem, 14vh, 10rem) 0 clamp(3rem, 8vh, 6rem);
}
.ca-coda__inner {
    width: 100%;
    max-width: var(--measure);
    margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    font-size: calc(clamp(1.0625rem, 0.98rem + 0.32vw, 1.1875rem) * var(--reader-scale));
}
.ca-coda__rule { display: block; width: 2.6rem; height: 1px; background: var(--line-strong); margin-bottom: 2.8rem; }
.ca-coda__signoff { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.ca-coda__essay { font-style: italic; font-size: 1.05em; color: var(--fg-soft); text-wrap: balance; }
.ca-coda__pub { color: var(--fg-muted); }
.ca-coda__tags { color: var(--fg-muted); }
.ca-coda__tags a { text-decoration: none; }
.ca-coda__line { margin: 2.4rem 0 0; max-width: 30em; color: var(--fg-soft); font-size: 0.95em; text-wrap: pretty; }
.ca-coda__back { margin-top: 3.4rem; text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid var(--fg); transition: color 0.25s ease, border-color 0.25s ease; }
@media (hover: hover) { .ca-coda__back:hover { color: var(--accent); border-bottom-color: var(--accent); } }
.ca-coda__mark {
    margin-top: clamp(4rem, 12vh, 8rem);
    font-family: var(--display);
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: var(--fg-muted);
}

/* Support: shown only once a contribution link is set in theme settings */
.ca-support { margin: 3.2rem auto 0; max-width: 28em; text-align: center; }
.ca-support__heading { margin: 0 0 0.7rem; font-family: var(--display); font-weight: 400; font-style: italic; font-size: 1.12em; letter-spacing: -0.005em; }
.ca-support__text { margin: 0 0 1.3rem; font-size: 0.94em; line-height: 1.55; color: var(--fg-soft); text-wrap: pretty; }
/* The button is a ruled box, like a button card in the prose: the same
   language as the rest of the page rather than a product control. */
.ca-support__button { display: inline-block; text-decoration: none; padding: 0.8rem 1.3rem 0.75rem; border: 1px solid var(--line-strong); color: var(--fg); transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
@media (hover: hover) { .ca-support__button:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); } }
.ca-support__thanks { margin: 1.2rem 0 0; font-style: italic; color: var(--fg-soft); }


/* 8. About ------------------------------------------------------------------
   One composition, used on the /about/ page and inside the About layer.
   Wide: the photograph holds the left of the field at its own proportion,
   flush with the edge; the prose plane meets it on the right. Narrow: the
   photograph runs edge to edge above the prose. No photograph: the title
   and the prose share the width between them. */

.ca-about { min-height: 100svh; display: flex; flex-direction: column; padding: 0 var(--pad); }
.ca-about > .ca-top { padding-left: 0; padding-right: 0; }
.ca-about__article { flex: 1 0 auto; width: 100%; padding-top: clamp(1.2rem, 3vh, 2.2rem); }

.ca-about-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.8rem, 4vh, 2.8rem);
    align-items: start;
}
.ca-about-body__figure { margin: 0 calc(-1 * var(--pad)); }
.ca-about-body__image { width: 100%; height: auto; display: block; }
.ca-about-body__caption { padding: 0 var(--pad); }
.ca-about-body__plane { min-width: 0; }
.ca-about-body__title {
    margin: 0 0 clamp(1.4rem, 3vh, 2.2rem) -0.03em;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2.8rem, 7.2vw, 7rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
}
.ca-prose--about {
    margin: 0;
    max-width: 30em;
    font-size: calc(clamp(1.08rem, 1rem + 0.42vw, 1.28rem) * var(--reader-scale));
    line-height: 1.55;
}
.ca-prose--about p { margin-bottom: 1.15em; }
.ca-about-body__links { margin-top: 2.2rem; }
.ca-about-body__links .nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; }
.ca-about-body__links a { font-family: var(--sans); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; font-weight: 500; text-decoration: none; padding: 0.4rem 0 2px; border-bottom: 1px solid transparent; transition: border-color 0.25s ease; }
@media (hover: hover) { .ca-about-body__links a:hover { border-bottom-color: currentColor; } }

@media (min-width: 1000px) {
    .ca-about-body {
        grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
        column-gap: clamp(2.5rem, 5vw, 6rem);
    }
    /* The photograph fills the left of the field. Its box is at most a
       fifth narrower than the photograph itself (main.js measures it), so
       a little of each side may go on wide screens, never the top or
       bottom; on very short screens the box is capped to the field. */
    .ca-about-body__figure {
        margin: 0 0 0 calc(-1 * var(--pad));
        display: flex; flex-direction: column;
    }
    .ca-about-body__image {
        width: 100%;
        aspect-ratio: var(--about-box, 4 / 3);
        max-height: calc(100svh - 8.5rem);
        object-fit: cover;
        object-position: 50% 42%;
    }
    .ca-about-body__caption { padding: 0 0 0 var(--pad); }
    .ca-about-body__title { margin-top: -0.09em; }
    .ca-prose--about { font-size: calc(clamp(1.02rem, min(1rem + 0.42vw, 0.66rem + 0.95vh), 1.28rem) * var(--reader-scale)); }
    /* No photograph: the title takes the left of the field, the prose the right */
    .ca-about-body--text { grid-template-columns: minmax(0, 1fr); }
    .ca-about-body--text .ca-about-body__plane {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: clamp(2.5rem, 5.5vw, 6.5rem);
        align-items: start;
    }
    .ca-about-body--text .ca-about-body__title { grid-column: 1; margin-bottom: 0; }
    .ca-about-body--text .ca-prose--about, .ca-about-body--text .ca-about-body__links { grid-column: 2; }
    .ca-about-body--text .ca-prose--about { padding-top: 0.35em; }
}
/* Where the composition is shorter than the field, it sits in the middle of it */
.ca-about__article { display: flex; flex-direction: column; justify-content: center; padding-bottom: clamp(1.2rem, 3vh, 2.2rem); }
.ca-about-layer__scroll { display: flex; flex-direction: column; }
.ca-about-layer__bar { flex: none; }
.ca-about-layer .ca-about-body { margin-top: auto; margin-bottom: auto; }

/* The layer: a native dialog covering the viewport, scrolling on its own,
   with a paper band holding the close control. */
.ca-about-layer {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: var(--bg); color: var(--fg);
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.28s ease;
}
.ca-about-layer:not([open]) { display: none; }
.ca-about-layer.is-open { opacity: 1; }
.ca-about-layer::backdrop { background: transparent; }
.ca-about-layer__scroll {
    position: absolute; inset: 0;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 0 var(--pad) max(3rem, env(safe-area-inset-bottom));
}
.ca-about-layer__bar {
    position: sticky; top: 0; z-index: 2;
    display: flex; justify-content: flex-end; align-items: center;
    min-height: 3.4rem;
    margin: 0 calc(-1 * var(--pad)) clamp(0.2rem, 1.2vh, 0.8rem);
    padding: max(0.35rem, env(safe-area-inset-top)) calc(var(--pad) - 0.55rem) 0 var(--pad);
    background: var(--bg);
}
.ca-about-layer__close {
    display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem;
    color: var(--fg-soft);
    transition: color 0.2s ease, transform 0.35s var(--ease);
}
@media (hover: hover) { .ca-about-layer__close:hover { color: var(--fg); } }
.ca-about-layer__close:focus-visible { outline-offset: -2px; }
.ca-about-layer .ca-about-body {
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.5s var(--ease-out) 0.06s, transform 0.6s var(--ease-out) 0.06s;
}
.ca-about-layer.is-open:not(.is-loading) .ca-about-body { opacity: 1; transform: none; }
html.about-open body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; padding-right: var(--scrollbar-gap, 0px); }


/* 9. Other pages, archive, error ------------------------------------------- */

/* Any other page: a plainer relative of the reading interior */
.ca-page-simple { min-height: 100svh; padding: 0 var(--pad); }
.ca-page-simple__article { max-width: var(--measure); margin: 0 auto; font-size: calc(clamp(1.0625rem, 0.98rem + 0.32vw, 1.1875rem) * var(--reader-scale)); }
.ca-page-simple__head { margin: clamp(2.5rem, 9vh, 6rem) 0 2.5rem; }
.ca-page-simple__title { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.ca-page-simple__deck { margin: 1.2rem 0 0; font-size: 1.15em; line-height: 1.42; color: var(--fg-soft); }
.ca-page-simple .ca-prose { margin-top: 2rem; }
.ca-page-simple__foot { margin: 5rem 0 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.ca-page-simple__foot a { font-family: var(--sans); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--fg); padding-bottom: 3px; }

.ca-archive { min-height: 100svh; display: flex; flex-direction: column; padding: 0 var(--pad); }
.ca-archive > .ca-top { padding-left: 0; padding-right: 0; }
.ca-archive__head { padding: clamp(2.5rem, 8vh, 6rem) 0 1.4rem; border-bottom: 1px solid var(--line-strong); }
.ca-archive__eyebrow { margin: 0 0 1rem; color: var(--fg-muted); }
.ca-archive__title { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -0.025em; }
.ca-archive__description { margin: 1.2rem 0 0; max-width: 36em; color: var(--fg-soft); line-height: 1.5; }
.ca-index--archive { flex: 1 0 auto; }

.ca-error { min-height: 100svh; display: flex; flex-direction: column; padding: 0 var(--pad); }
.ca-error > .ca-top { padding-left: 0; padding-right: 0; }
.ca-error__inner { flex: 1; max-width: 36em; padding: clamp(4rem, 22vh, 14rem) 0 6rem; }
.ca-error__code { margin: 0 0 1.6rem; color: var(--fg-muted); }
.ca-error__title { margin: 0 0 0.8rem -0.02em; font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1; letter-spacing: -0.025em; }
.ca-error__text { margin: 0 0 2.4rem; font-size: 1.1rem; color: var(--fg-soft); }
.ca-error__link { display: inline-block; text-decoration: none; border-bottom: 1px solid var(--fg); padding: 0.4rem 0 3px; transition: color 0.25s ease, border-color 0.25s ease; }
@media (hover: hover) { .ca-error__link:hover { color: var(--accent); border-bottom-color: var(--accent); } }


/* 10. Display settings ------------------------------------------------------- */

.ca-display-button {
    position: fixed; z-index: 1800;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    padding: 0.55rem 0.8rem 0.5rem;
    color: var(--fg-soft);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-radius: 2px;
    transition: color 0.25s ease, opacity 0.4s ease;
}
.ca-display-button::after {
    content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.38rem; height: 1px;
    background: currentColor; opacity: 0.5; transition: opacity 0.25s ease;
}
@media (hover: hover) { .ca-display-button:hover { color: var(--fg); } }
@media (hover: hover) { .ca-display-button:hover::after { opacity: 1; } }
.ca-display-button[aria-expanded="true"] { opacity: 0; pointer-events: none; }

.ca-display-backdrop { position: fixed; inset: 0; z-index: 2500; background: rgba(12, 11, 9, 0.22); opacity: 0; transition: opacity 0.3s ease; }
.ca-display-backdrop.is-open { opacity: 1; }

.ca-display {
    position: fixed; z-index: 2600;
    right: 0; left: 0; bottom: 0;
    padding: 1rem var(--pad) max(1.4rem, env(safe-area-inset-bottom));
    background: var(--panel);
    color: var(--fg);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow);
    transform: translateY(105%);
    visibility: hidden;
    transition: transform 0.5s var(--ease), visibility 0s linear 0.5s;
}
.ca-display.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.ca-display__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line-strong); }
.ca-display__title { margin: 0; }
.ca-display__close { color: var(--fg-muted); transition: color 0.2s ease; }
@media (hover: hover) { .ca-display__close:hover { color: var(--fg); } }

.ca-display__row {
    display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: baseline; gap: 1rem;
    padding: 1rem 0 0.9rem;
    border-bottom: 1px solid var(--line);
}
.ca-display__label { color: var(--fg-muted); }
.ca-display__choices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.5rem; }
.ca-display__choices button {
    position: relative;
    font-family: var(--serif);
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--fg-muted);
    padding: 0.35rem 0 0.4rem;
    min-height: 2.4rem;
    transition: color 0.2s ease;
}
.ca-display__choices button::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 1px;
    background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
@media (hover: hover) { .ca-display__choices button:hover { color: var(--fg); } }
.ca-display__choices button.is-active { color: var(--fg); }
.ca-display__choices button.is-active::after { transform: scaleX(1); }
.ca-display__choices--size { gap: 0 0.8rem; }
.ca-display__choices--size button:nth-child(1) { font-size: 0.9rem; }
.ca-display__choices--size button:nth-child(2) { font-size: 1.15rem; }
.ca-display__choices--size button:nth-child(3) { font-size: 1.45rem; }
.ca-display__choices--size button { min-width: 2.2rem; padding-left: 0.4rem; padding-right: 0.4rem; text-align: center; }
.ca-display__choices--size button::after { left: 0.4rem; right: 0.4rem; }
.ca-display__reset { margin-top: 1.1rem; color: var(--fg-muted); transition: color 0.2s ease; }
@media (hover: hover) { .ca-display__reset:hover { color: var(--fg); } }
body.display-open { overflow: hidden; }


/* 11. Arrival and transitions ------------------------------------------------ */

/* Cross-document transitions where the browser offers them */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 0.22s; }
::view-transition-new(root) { animation-duration: 0.3s; }

/* Leaving via an internal link (browsers without view transitions) */
.ca-page { transition: opacity 0.22s ease; }
body.is-leaving .ca-page { opacity: 0; }

/* The arrival: first page of a visit only.
   Front page: the field is paper alone for a beat; the masthead appears at
   the centre of the field, holds, then glides to its resting place while
   the rule draws beneath it; the statement, the toggle and the pieces
   settle in around it. Every element animates from where it will rest and
   ends there, so nothing shifts afterwards. The glide distance comes from
   main.js (--arrive-dy); without it the word simply rises into place.
   All keyframes end in the resting state, so nothing depends on script
   to become visible. */
@keyframes ca-rise { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } }
@keyframes ca-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ca-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ca-word-arrive {
    0%   { opacity: 0; transform: translateY(var(--arrive-dy, 0.3em)) scale(0.985); }
    22%  { opacity: 1; transform: translateY(var(--arrive-dy, 0.3em)) scale(1); }
    /* The resting place is higher than it was, so the glide is a longer
       journey; it is paced across the whole of the last movement instead of
       arriving in a snap. */
    55%  { opacity: 1; transform: translateY(var(--arrive-dy, 0.3em)) scale(1); animation-timing-function: cubic-bezier(0.62, 0.02, 0.2, 1); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

html.is-arriving .ca-front .ca-masthead__word { animation: ca-word-arrive 2.5s cubic-bezier(0.5, 0, 0.12, 1) 0.25s both; will-change: transform, opacity; }
html.is-arriving .ca-front .ca-masthead { border-bottom-color: transparent; }
html.is-arriving .ca-front .ca-masthead::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--line-strong); transform-origin: left;
    animation: ca-draw 1.1s var(--ease-out) 1.95s both;
}
html.is-arriving .ca-front .ca-top { animation: ca-fade 0.9s ease 2.35s both; }
html.is-arriving .ca-front .ca-front__bar { animation: ca-fade 0.8s ease 2.5s both; }
html.is-arriving .ca-front .ca-lead, html.is-arriving .ca-front .ca-look { animation: ca-rise 1s var(--ease-out) 2.55s both; }
html.is-arriving .ca-front .ca-row { animation: ca-fade 0.9s ease 2.8s both; }
html.is-arriving .ca-front .ca-colophon { animation: ca-fade 1s ease 3s both; }

/* Any other first page: a quieter version */
html.is-arriving .ca-essay .ca-top, html.is-arriving .ca-about .ca-top, html.is-arriving .ca-archive .ca-top, html.is-arriving .ca-error .ca-top { animation: ca-fade 0.8s ease 0.5s both; }
html.is-arriving .ca-essay__head, html.is-arriving .ca-about-body, html.is-arriving .ca-archive__head, html.is-arriving .ca-error__inner { animation: ca-rise 1s var(--ease-out) 0.2s both; }
html.is-arriving .ca-essay__hero, html.is-arriving .ca-essay__body, html.is-arriving .ca-index--archive { animation: ca-fade 1s ease 0.7s both; }
html.is-arriving .ca-display-button { animation: ca-fade 0.8s ease 2.6s both; }


/* 12. Responsive ------------------------------------------------------------- */

/* Wide screens: the essay rail appears in the left margin */
@media (min-width: 1200px) {
    .ca-rail {
        display: block;
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: var(--rail-w);
    }
    .ca-rail__inner {
        position: sticky;
        top: clamp(2rem, 8vh, 5rem);
        display: flex; flex-direction: column; gap: 0.7rem;
        padding-top: 0.9rem;
        transition: opacity 0.4s ease;
    }
    .ca-rail.is-veiled .ca-rail__inner { opacity: 0; }
    .ca-rail__progress {
        position: absolute; left: 0; top: 0;
        width: 100%; height: 1px;
        background: var(--line);
    }
    .ca-rail__progress::after {
        content: ""; position: absolute; inset: 0;
        background: var(--fg);
        transform-origin: left;
        transform: scaleX(var(--progress, 0));
    }
    .ca-rail__title {
        font-family: var(--display);
        font-size: 0.92rem;
        line-height: 1.3;
        color: var(--fg-soft);
    }
    .ca-rail__title .ca-title__sub { display: none; }
    .ca-rail__date { color: var(--fg-muted); }
    .ca-rail__sources, .ca-rail__top { text-decoration: none; color: var(--fg-muted); align-self: flex-start; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
    @media (hover: hover) { .ca-rail__sources:hover, .ca-rail__top:hover { color: var(--fg); border-bottom-color: currentColor; } }
    .ca-rail__top { margin-top: 0.6rem; }
    /* Keep wide cards clear of the rail */
    .ca-prose figure.kg-width-wide, .ca-prose .kg-width-wide { --w: min(var(--wide), 100cqw - 2 * (var(--rail-w) + 1.5rem)); }
    .ca-prose figure.kg-width-full, .ca-prose .kg-width-full { --w: calc(100cqw - 2 * (var(--rail-w) + 1.5rem)); }
}

/* Tablet portrait and below */
@media (max-width: 900px) {
    .ca-lead { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "text" "plate"; row-gap: 1.6rem; }
    .ca-lead__plate { justify-self: start; }
    .ca-lead__plate img { margin-left: 0; max-height: min(52vh, 560px); }
    .ca-lead__title { max-width: none; }
    .ca-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date aside" "text text"; row-gap: 0.5rem; }
    .ca-row__date { grid-area: date; }
    .ca-row__aside { grid-area: aside; }
    .ca-row__text { grid-area: text; }
    .ca-colophon { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* Phones */
@media (max-width: 600px) {
    :root { --label-size: 0.656rem; --mast-lede: clamp(1.2rem, 7vh, 3.4rem); }
    .ca-top { min-height: 2.6rem; padding-top: 16px; }
    .ca-top__statement { font-size: 0.9rem; max-width: 22em; }
    .ca-masthead { padding-bottom: 0.9rem; }
    .ca-masthead__word { font-size: 26.2vw; letter-spacing: -0.05em; }
    .ca-front__bar { flex-wrap: wrap; }
    .ca-lead { padding: 1.6rem 0 2rem; }
    .ca-lead__title { font-size: clamp(2rem, 9.6vw, 2.6rem); }
    .ca-lead__deck { margin-top: 1rem; font-size: 1rem; }
    .ca-row__title { font-size: 1.4rem; }
    .ca-row__deck { display: none; }
    .ca-essay__head { margin-top: 2.2rem; }
    .ca-essay__title { font-size: clamp(2rem, 9vw, 2.6rem); }
    .ca-essay__deck { font-size: 1.1em; margin-top: 1.1rem; }
    .ca-essay__hero { margin-top: 2.2rem; }
    .ca-essay__body { margin-top: 2.4rem; }
    .ca-prose { font-size: calc(1.0625rem * var(--reader-scale)); line-height: 1.6; }
    .ca-prose figure.kg-width-full, .ca-prose .kg-width-full, .ca-prose figure.kg-width-wide, .ca-prose .kg-width-wide { --w: calc(100cqw + 2 * var(--pad)); }
    .ca-prose .kg-bookmark-container { flex-direction: column; }
    .ca-prose .kg-bookmark-thumbnail { width: 100%; max-width: none; height: 160px; }
    .ca-coda { min-height: 60svh; padding-top: 4.5rem; }
    .ca-coda__mark { margin-top: 4rem; }
    .ca-about-body__title { font-size: clamp(2.6rem, 12vw, 4rem); }
    .ca-plate img { max-height: 62svh; }
    .ca-front.is-look .ca-front__bar { position: static; }
}

/* Short landscape viewports (tablet landscape, small laptops) */
@media (max-height: 760px) and (min-width: 900px) {
    :root { --mast-lede: clamp(1rem, 3vh, 1.9rem); }
    .ca-essay__head { margin-top: clamp(2rem, 6vh, 4rem); }
    .ca-plate img { max-height: 66svh; }
    .ca-coda { min-height: 80svh; }
}

/* Display settings become a small card above the control where there is room */
@media (min-width: 700px) {
    .ca-display {
        left: auto; top: auto;
        right: max(16px, env(safe-area-inset-right));
        bottom: max(16px, env(safe-area-inset-bottom));
        width: 380px;
        padding: 1rem 1.3rem 1.2rem;
        border: 1px solid var(--line);
        border-radius: 2px;
        transform: translateY(12px);
        opacity: 0;
        transition: transform 0.4s var(--ease), opacity 0.3s ease, visibility 0s linear 0.4s;
    }
    .ca-display.is-open { opacity: 1; }
    .ca-display-backdrop { background: transparent; }
    body.display-open { overflow: auto; }
}


/* 13. Motion preferences, print --------------------------------------------- */

html[data-motion="quiet"] *, html[data-motion="quiet"] *::before, html[data-motion="quiet"] *::after,
html[data-default-motion="quiet"]:not([data-motion]) *, html[data-default-motion="quiet"]:not([data-motion]) *::before, html[data-default-motion="quiet"]:not([data-motion]) *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.12s !important;
    scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
    html.js .ca-plate { opacity: 1; transform: none; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@media print {
    .ca-top, .ca-display-button, .ca-display, .ca-display-backdrop, .ca-rail, .ca-coda__back, .ca-support, .ca-signup, .ca-about-layer, .ca-modes { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .ca-prose, .ca-essay__head, .ca-sources { max-width: none; }
    .ca-prose a { text-decoration: none; }
    .ca-coda { min-height: 0; padding: 2rem 0; }
}