/* ============================================================
   ZICOPRESS — site stylesheet                      v5 · serif single

   Author    Ishtiaque Zico
   Purpose   A brutal, boring, readable website for long text, notes,
             tools, and archive. The page should feel like plain HTML
             (with book/academic legacy feel) with better rhythm (zola SSG 0.23.3)
   Reader    Built for current/future me: 43y, low-vision, presbyopia,
             AuDHD, RSD-sensitive, dual-language, typography-obsessive,
             easily overloaded, often tired.

   ------------------------------------------------------------
   DIRECTION                                  single / serif / brutal
   ------------------------------------------------------------
   single   - one font family (Georgia)
            - one base text size (clamp)
            - one column, narrow prose within a wide page
            - one spacing unit, × 0.5 / 1 / 1.5 / 2
   serif    - Georgia for permanence and academic reading pleasure
            - tabular numbers for dates, tables, scores
   brutal   - ink for structure, mute for metadata, accent for action
            - no decorative color, no card UI unless HTML asks for it
            - hairline rules over fills; large type over density
            - lists breathe, never become tables

   ------------------------------------------------------------
   INVENTORY                              every visible decision maps
                                          to one of these:
   ------------------------------------------------------------
   Tones         ink · mute · accent
   Surfaces      page                            (one surface, no wash)
   Sizes         quiet (× 0.875) · base · big (× 1.75)
   Spacings      half · one · one-half · two    (one unit × 0.5/1/1.5/2)
   Weights       inherited · Georgia Bold; bold reserved for h2, legend, strong/b
   Measures      size-title (20ch) · size-text (52ch) · size-wide / page (52rem)
   Rules         line (broad mute 2px) · line-strong (crisp ink 1px)
   Temperatures  cool · warm · hot               (semantic, via <mark>)

   ------------------------------------------------------------
   CUBE-ISH                                  most things stack by flow;
                                             exceptions are named
   ------------------------------------------------------------
   - interactive targets ≥ 44 px
   - dates, tables, scores use tabular numbers
   - long index titles wrap beside metadata
   - lab tool pages additionally load lab.css

   ------------------------------------------------------------
   RHYTHM MODEL                          why § PAGE RHYTHM looks
                                             the way it does
   ------------------------------------------------------------
   Zola renders Markdown FLAT: an article body is a run of sibling
   h2 / h3 / p / ul / pre / dl / blockquote directly under <article>,
   with no <section> wrappers. Hand-authored pages (about, log, lab)
   DO wrap prose in <section>. So every rhythm rule exists in two
   spellings — "article > * + h2" for Markdown flow and
   "article > section" for sectioned pages — and both resolve to the
   same distances:

       before h2     two + one      a chapter break, air to breathe
       before h3     two            a subsection break
       before h4     one-half       a labelled beat
       after h2      one-half       heading floats above its block
       after h3/h4   half           heading holds its block
       prose flow    one            paragraph gap
       heavy blocks  one-half       pre, table, figure, blockquote, dl

   Margins collapse in normal flow, so a heavy block meeting a
   heading yields the larger distance, never the sum.

   Edit § tokens first. Everything below it inherits.
   ============================================================ */


/* ============================================================
   § TOKENS                                      the entire system
   ============================================================ */
   :root {
       /* tones — three */
       --color-ink:    #221111; /* prev: #232020; */
       --color-mute:   #554433; /* prev: #565049; */
       --color-accent: #882200;

       /* surface — one */
       --color-page:  #F8F4F0; /* prev: #F7F5F2 */

       /* font stacks */
       --font-main: Georgia, ui-serif, "Times New Roman", Times, serif;
       --font-bn:   "Hind Siliguri", "Noto Serif Bengali", "Shonar Bangla", "SolaimanLipi", serif;
       --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

       /* sizes — three */
       --size-base:  clamp(1.25rem, 1.05rem + 0.75vw, 1.5rem);
       --size-small: 0.875em;
       --size-big:   1.75em;

       /* weight — one non-default */
       --weight-strong: 700;

       /* line heights */
       --line-tight: 1.15;
       --line-snug:  1.3;
       --line-read:  1.5;

       /* underline offsets */
       --underline-offset: 0.16em;

       /* spacings — one unit × 0.5 / 1 / 1.5 / 2 */
       --space-unit:     1.5rem;
       --space-half:     calc(var(--space-unit) * 0.5);
       --space-one:      var(--space-unit);
       --space-one-half: calc(var(--space-unit) * 1.5);
       --space-two:      calc(var(--space-unit) * 2);
       --space-page:     clamp(var(--space-unit), 3.5vw, var(--space-two));

       /* measures — three */
       --size-title: 20ch;
       --size-text:  52ch;
       --size-page:  52rem;
       --size-wide:  var(--size-page);

       /* affordances */
       --touch:       44px;
       --line:        2px solid var(--color-mute);
       --line-strong: 1px solid var(--color-ink);
       --focus-line:  3px solid var(--color-accent);

       color-scheme: light dark;
       accent-color: var(--color-accent);
   }

   @media (prefers-color-scheme: dark) {
       :root {
           --color-page:   #1F1A17;
           --color-ink:    #E8E0D8;
           --color-mute:   #B8AA9C;
           --color-accent: #DEA070;
       }
   }

   @media (prefers-color-scheme: dark) and (prefers-contrast: more) {
       :root {
           --color-ink:  #FFFFFF;
           --color-mute: #CCCCCC;
       }
   }

   @media (forced-colors: active) {
       :root {
           --color-page:   Canvas;
           --color-ink:    CanvasText;
           --color-mute:   GrayText;
           --color-accent: LinkText;
           --line:         2px solid GrayText;
           --line-strong:  1px solid CanvasText;
           --focus-line:   3px solid LinkText;
           accent-color: LinkText;
       }
   }

/* ============================================================
   § BASE
   ============================================================ */

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

html {
    background: var(--color-page);
    color: var(--color-ink);
    font-family: var(--font-main);
    font-size: 100%;
    line-height: var(--line-read);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: var(--space-two);
}

body {
    min-height: 100dvh;
    margin: 0;
    padding: var(--space-page);

    background: var(--color-page);
    color: var(--color-ink);

    font-family: inherit;
    font-size: var(--size-base);
    font-synthesis: none;
    font-kerning: normal;
    line-height: var(--line-read);
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
    hyphens: none;
}

:where(p, li, dd, blockquote, figcaption) {
    font-variant-numeric: oldstyle-nums proportional-nums;
}

@supports (text-wrap: pretty) {
    :where(p, li, blockquote, figcaption, dd, td, th) {
        text-wrap: pretty;
    }
}

@supports (text-wrap: balance) {
    :where(h1, h2, h3) {
        text-wrap: balance;
    }
}

body > header,
main,
body > footer {
    width: 100%;
    max-width: var(--size-page);
    margin-inline: auto;
}

/* function: bangla */

:lang(bn) {
    font-family: var(--font-bn);
    line-height: 1.75;
    letter-spacing: 0;
    font-variant-numeric: normal;
}


/* ============================================================
   § RESET
   Two passes: zero out margins on every block container;
   normalize font on every textual element; cap reading width
   on every flow element.
   ============================================================ */

:where(
    h1, h2, h3, h4,
    p, ul, ol, dl,
    blockquote, pre, table, figure, details,
    form, fieldset, hr
) {
    margin: 0;
}

:where(
    h1, h2, h3, h4,
    p, li, dt, dd,
    blockquote, figcaption, caption, small,
    code, pre, kbd, samp,
    button, input, textarea, select, output,
    summary, time, th
) {
    font: inherit;
}

:where(p, li, blockquote, dd, dt, td, th, figcaption, pre, label, output) {
    max-width: var(--size-text);
}

/* function: interface rhythm — every chrome element snug */
:where(
    nav, summary, button,
    input, textarea, select,
    legend, label,
    small, time, figcaption, caption,
    th, td, dt, dd,
    h3, h4
) {
    line-height: var(--line-snug);
}


/* ============================================================
   § PAGE RHYTHM                                  outer spacing

   Two markup dialects, one rhythm:
   - Markdown articles  →  flat siblings under <article>
   - hand-made pages    →  <section> wrappers under <article>
   Every distance below appears once per dialect.
   ============================================================ */

/* --- site chrome = one closed block ------------------------ */

body > header {
    margin-block-end: var(--space-two);
}

body > header > p {
    margin-block-end: var(--space-half);
    line-height: var(--line-snug);
}

body > header > p > a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    line-height: inherit;
}

/* --- article identity = kicker + title + lede, closed ------ */

article > header {
    margin-block-end: var(--space-two);
}

article > header > * + * {
    margin-block-start: var(--space-half);
}

/* --- base flow: everything one unit apart ------------------- */

article > * + *,
section > * + *,
footer[aria-label="Document metadata"] > * + * {
    margin-block-start: var(--space-one);
}

/* --- breathing before headings (flat Markdown flow) --------
   h2 = chapter break. h3 = subsection. h4 = labelled beat.
   The same distances the sectioned pages get below. */

article > * + h2,
section > * + h2 {
    margin-block-start: calc(var(--space-two) + var(--space-one));
}

article > * + h3,
section > * + h3 {
    margin-block-start: var(--space-two);
}

article > * + h4,
section > * + h4 {
    margin-block-start: var(--space-one-half);
}

/* --- tight after headings: heading + first block = one object */

article > h2 + *,
section > h2 + * {
    margin-block-start: var(--space-half);
}

article > h3 + *,
section > h3 + *,
article > h4 + *,
section > h4 + * {
    margin-block-start: var(--space-half);
}

/* --- sectioned pages: sections own the chapter break -------- */

article > section {
    margin-block-start: calc(var(--space-two) + var(--space-one));
}

/* nested sections breathe, but less dramatically */

section section {
    margin-block-start: var(--space-two);
}

/* --- article header precedence ------------------------------
   Whatever follows the header — first paragraph, first h2,
   TOC details, first section — the header's own gap (two)
   is the distance. Placed last so it wins the tie. */

article > header + * {
    margin-block-start: 0;
}

/* after a TOC details, a chapter break shrinks to two —
   the closed details already reads as a pause */

article > details + h2,
article > details + section {
    margin-block-start: var(--space-two);
}

/* --- ordinary prose rhythm ---------------------------------- */

p + p {
    margin-block-start: var(--space-one);
}

p + :where(ul, ol, dl),
:where(ul, ol, dl) + p {
    margin-block-start: var(--space-one);
}

/* --- heavy blocks breathe ------------------------------------
   one-half above and below; collapses against neighbours,
   so block-meets-heading never doubles up. */

blockquote,
pre,
table,
figure {
    margin-block: var(--space-one-half);
}

details {
    margin-block: var(--space-one);
}

/* prose definition lists (glossary) are heavy blocks too */

article > dl {
    margin-block: var(--space-one-half);
}

footer[aria-label="Document metadata"] {
    margin-block-start: var(--space-two);
}

/* --- trim container bottoms ---------------------------------- */

section > :last-child,
section > :first-child,
article > header > :first-child,
article > header > :last-child,
blockquote > :last-child,
figure > :last-child,
details > :last-child,
footer[aria-label="Document metadata"] > :last-child {
    margin-block-end: 0;
}

section > :first-child,
article > header > :first-child {
    margin-block-start: 0;
}

/* ============================================================
   § SKIP LINK
   ============================================================ */

body > a[href="#main"] {
    position: fixed;
    inset-block-start: -10rem;
    inset-inline-start: var(--space-page);
    z-index: 10;
    min-height: var(--touch);
    padding: 0.4em 0.7em;
    background: var(--color-ink);
    color: var(--color-page);
    text-decoration: none;
}

body > a[href="#main"]:focus-visible {
    inset-block-start: var(--space-page);
    outline: var(--focus-line);
    outline-offset: 3px;
}

/* ============================================================
   § NAVIGATION
   ============================================================ */

nav {
    padding-block: var(--space-half);
    border-block: var(--line-strong);
}

nav ul,
nav ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav[aria-label="Primary"] ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-half) var(--space-one);
}

nav[aria-label="Primary"] a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    text-decoration: none;
}

nav[aria-label="Primary"] a:hover,
nav[aria-label="Primary"] a:focus-visible,
nav[aria-label="Primary"] a[aria-current="page"] {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: var(--underline-offset);
}

/* function: table of contents */

nav[aria-label="Table of contents"] {
    max-width: var(--size-text);
    margin-block-start: var(--space-one);
    padding: 0;
    border: 0;
    color: var(--color-mute);
    font-size: var(--size-small);
    line-height: var(--line-snug);
}

nav[aria-label="Table of contents"] ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav[aria-label="Table of contents"] li + li {
    margin-block-start: var(--space-half);
}

nav[aria-label="Table of contents"] a {
    color: inherit;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: var(--underline-offset);
}

nav[aria-label="Table of contents"] a:hover,
nav[aria-label="Table of contents"] a:focus-visible {
    color: var(--color-accent);
}

nav[aria-label="Table of contents"] h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ============================================================
   § LINKS
   Inherit ink; mute underline at rest; accent on interaction.
   ============================================================ */

a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: var(--color-mute);
    text-decoration-thickness: 1.5px;
    text-underline-offset: var(--underline-offset);
    text-decoration-skip-ink: auto;
    overflow-wrap: break-word;
}

a:hover,
a:focus-visible {
    color: inherit;
    text-decoration-color: var(--color-accent);
}

:focus-visible {
    outline: var(--focus-line);
    outline-offset: 3px;
}

:target {
    scroll-margin-top: var(--space-two);
}

article :where(h2, h3):target {
    position: relative;
}

article :where(h2, h3):target::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--space-half) * -1);
    border-inline-start: 2px solid var(--color-accent);
}


/* ============================================================
   § HEADINGS

   h1 scales; h2 / h3 / h4 inherit body size, separated by weight,
   tone, and rhythm.
   ============================================================ */

h1,
h2 {
    line-height: var(--line-tight);
    letter-spacing: 0;
}
h3,
h4 {
    line-height: var(--line-snug);
    letter-spacing: 0;
}

h1 {
    max-width: var(--size-title);
    color: var(--color-ink);
    font-size: var(--size-big);
}

h2 {
    color: var(--color-ink);
    font-weight: var(--weight-strong);
}

h3 {
    color: var(--color-mute);
    font-weight: inherit;
}

h4 {
    color: var(--color-mute);
    font-size: var(--size-small);
    font-style: normal;
}

/* ============================================================
   § QUIET TEXT                                   the mute voice
   kicker line above h1 + every supporting label
   ============================================================ */

article > header > p:first-child,
article > header > h1 + p,
small,
time,
figcaption,
caption,
article > footer,
body > footer {
    color: var(--color-mute);
}

article > header > p:first-child {
    font-size: var(--size-small);
}


mark {
    background: transparent;
    color: var(--color-accent);
    font-weight: inherit;
}

strong,
b {
    background: transparent;
    color: inherit;
    font-weight: var(--weight-strong);
}

em,
i,
cite {
    font-style: italic;
}

abbr[title] {
    text-decoration: underline dotted currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: var(--underline-offset);
}

ins {
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: var(--underline-offset);
}

del {
    color: var(--color-mute);
    text-decoration-color: var(--color-mute);
}


/* ============================================================
   § LISTS                                        ordinary prose
   ============================================================ */

main :where(ul, ol) {
    padding-inline-start: 1.2em;
}

main ul {
    list-style-type: circle;
}

main li + li {
    margin-block-start: var(--space-half);
}

main ul li::marker {
    color: var(--color-mute);
}

/* nested lists attach to their parent item */

main li > :where(ul, ol) {
    margin-block-start: var(--space-half);
}


/* ============================================================
   § DATA-LIST                                    log + lab index
   index → title + meta in a baseline grid
   cards → block with hover affordance
   ============================================================ */

   section[data-list] > ul {
       width: 100%;
       max-width: var(--size-wide);
       padding: 0;
       list-style: none;
   }

/* index */

section[data-list="index"] > ul > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-one);
    align-items: baseline;
    max-width: none;
}

section[data-list="index"] > ul > li > :where(a, span) {
    display: block;
    min-width: 0;
    text-decoration: none;
}

section[data-list="index"] > ul > li > a:hover,
section[data-list="index"] > ul > li > a:focus-visible {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-color: currentColor;
}

section[data-list="index"] > ul > li > :where(time, small) {
    display: block;
    color: var(--color-mute);
    font-size: var(--size-small);
    text-align: right;
    white-space: nowrap;
}

/* unlinked = pending text */
section[data-list="index"] > ul > li > span {
    color: var(--color-mute);
}

/* cards */

section[data-list="cards"] > ul > li + li {
    margin-block-start: var(--space-one);
}

section[data-list="cards"] > ul > li > a {
    display: block;
    text-decoration: none;
}

section[data-list="cards"] > ul > li > a:hover,
section[data-list="cards"] > ul > li > a:focus-visible {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-color: currentColor;
}

section[data-list="cards"] > ul > li > small {
    display: block;
    margin-block-start: var(--space-half);
    color: var(--color-mute);
    font-size: var(--size-small);
    line-height: var(--line-snug);
}

/* function: series chapter index — a book table of contents */

#chapters ol li::marker {
    color: var(--color-mute);
}

#chapters ol > li > a {
    text-decoration: none;
}

#chapters ol > li > a:hover,
#chapters ol > li > a:focus-visible {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-color: currentColor;
}

#chapters ol > li > small {
    display: block;
    color: var(--color-mute);
    font-size: var(--size-small);
    line-height: var(--line-snug);
}

/* ============================================================
   § BLOCKQUOTE
   ============================================================ */

blockquote {
    margin-inline: 0;
    padding-inline-start: var(--space-one);
    border-inline-start: var(--line);
    color: var(--color-mute);
}

@supports (hanging-punctuation: first) {
    blockquote { hanging-punctuation: first; }
}


/* ============================================================
   § CODE
   Mono text, preserved alignment, horizontal rules.
   ============================================================ */

   code,
   kbd,
   samp {
       font-family: var(--font-mono);
       font-size: var(--size-small);
   }

/* mono alone distinguishes inline code */
p code,
li code,
dd code,
td code,
th code {
    padding-inline: 0.15em;
    border: 0;
}

/* keys remain visibly actionable objects */
kbd {
    padding: 0.1em 0.3em;
    border: var(--line);
}

pre {
    width: 100%;
    max-width: var(--size-wide);
    overflow-x: auto;
    margin-block: var(--space-one-half);
    padding-block: var(--space-half);
    padding-inline: 0;
    border: 0;
    border-block: var(--line);
    font-family: var(--font-mono);
    font-variant-ligatures: none;
    font-variant-numeric: tabular-nums slashed-zero;
    font-size: var(--size-small);
    line-height: var(--line-snug);
    white-space: pre;
    overflow-wrap: normal;
    tab-size: 4;
    -webkit-overflow-scrolling: touch;
}

pre code {
    display: block;
    padding: 0;
    border: 0;
    font-size: inherit;
}

/* ============================================================
   § TIME AND TABLE
   Native Markdown tables break to page measure and scroll directly;
   an optional labelled region restores native table layout.
   ============================================================ */

time,
output {
    font-variant-numeric: tabular-nums;
}

time {
    white-space: nowrap;
}

table {
    display: table;
    width: 100%;
    max-width: var(--size-wide);
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0;
    border-top: var(--line-strong);
    border-bottom: var(--line-strong);
    font-variant-numeric: tabular-nums;
    font-size: var(--size-small);
    line-height: var(--line-snug);
}

[role="region"]:has(> table) {
    width: 100%;
    max-width: var(--size-wide);
    overflow-x: auto;
    margin-block: var(--space-one-half);
    -webkit-overflow-scrolling: touch;
}

[role="region"]:has(> table) > table {
    display: table;
    width: 100%;
    min-width: 0;
    max-width: none;
    overflow: visible;
    margin: 0;
    table-layout: auto;
}

caption {
    caption-side: bottom;
    max-width: var(--size-text);
    margin-block-start: var(--space-half);
    color: var(--color-mute);
    font-size: var(--size-small);
    font-style: normal;
    text-align: left;
}

th,
td {
    padding: var(--space-half) var(--space-one) var(--space-half) 0;
    border: 0;
    text-align: left;
    vertical-align: baseline;
    font-weight: 400;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

tbody :is(th, td):first-child {
    padding-inline-end: var(--space-one-half);
}

th:last-child,
td:last-child {
    padding-inline-end: 0;
}

thead th {
    color: var(--color-ink);
    font-weight: 400;
    border-bottom: var(--line);
}

tbody tr + tr > * {
    border-top: 0;
}

/* ============================================================
   § MEDIA
   ============================================================ */

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

figure {
    margin-inline: 0;
}

figure > figcaption {
    margin-block-start: var(--space-half);
    color: var(--color-mute);
}


/* ============================================================
   § DETAILS
   ============================================================ */

   summary {
       display: inline-flex;
       align-items: baseline;
       gap: 0.35em;
       min-height: var(--touch);
       cursor: pointer;
       list-style: none;
       color: var(--color-mute);
       line-height: var(--line-snug);
   }

summary:hover,
summary:focus-visible {
    color: var(--color-accent);
}

summary::-webkit-details-marker {
    display: none;
}

summary::before {
    content: "+";
    color: var(--color-accent);
    line-height: 1;
}

details[open] summary::before {
    content: "−";
}

details > summary + * {
    margin-block-start: var(--space-half);
}

/* ============================================================
   § HORIZONTAL RULE                             narrow ink line
   ============================================================ */

hr {
    max-width: 8rem;
    margin-block: var(--space-two);
    border: 0;
    border-top: var(--line);
}


/* ============================================================
   § DEFINITION LISTS                            prose + metadata
   ============================================================ */

/* prose definition lists */

main dl:not(footer[aria-label="Document metadata"] dl) {
    max-width: var(--size-text);
}

main dl:not(footer[aria-label="Document metadata"] dl) dt {
    margin-block-start: var(--space-one-half);
    color: var(--color-ink);
    font-style: normal;
}

main dl:not(footer[aria-label="Document metadata"] dl) dt:first-child {
    margin-block-start: 0;
}

main dl:not(footer[aria-label="Document metadata"] dl) dd {
    margin-block-start: var(--space-half);
    margin-inline-start: 0;
    color: var(--color-mute);
}

main dl:not(footer[aria-label="Document metadata"] dl) dd + dt {
    margin-block-start: var(--space-one-half);
}

/* document metadata — quiet keyed list */

footer[aria-label="Document metadata"] {
    max-width: var(--size-text);
    margin-block-start: var(--space-two);
    padding-block-start: var(--space-one);
    border-top: var(--line);
    color: var(--color-mute);
    font-size: var(--size-small);
    line-height: var(--line-snug);
}

footer[aria-label="Document metadata"] dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-half) var(--space-one);
}

footer[aria-label="Document metadata"] dt,
footer[aria-label="Document metadata"] dd {
    margin: 0;
    padding: 0;
    border: 0;
}

footer[aria-label="Document metadata"] dt {
    color: var(--color-mute);
    font-style: normal;
    text-align: right;
}

footer[aria-label="Document metadata"] dd {
    color: var(--color-mute);
}

footer[aria-label="Document metadata"] a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;
    text-underline-offset: var(--underline-offset);
}

footer[aria-label="Document metadata"] a:hover,
footer[aria-label="Document metadata"] a:focus-visible {
    color: var(--color-accent);
}

/* ============================================================
   § ENDNOTES
   Two dialects, one look:
   - hand-authored:  <section aria-label="Endnotes"><ol><li id="fn-…
   - Zola bottom_footnotes:  <hr> + <ol> with li[id^="fn-"] flat
     under <article>, refs as sup > a[href^="#fn-"], backlinks
     a[href^="#fr-"].
   All li-level rules key on li[id^="fn-"] so both match.
   ============================================================ */

   sup,
   sub {
       position: relative;
       font-size: var(--size-small);
       line-height: 0;
       vertical-align: baseline;
   }

sup {
    top: -0.4em;
    margin-inline-start: 0.1em;
}

sub {
    bottom: -0.25em;
}

sup a {
    color: var(--color-accent);
    text-decoration: none;
    padding: 0.35em;
    margin: -0.35em;
}

sup a:hover,
sup a:focus-visible {
    background: var(--color-accent);
    color: var(--color-page);
    border-radius: 2px;
}

/* the endnote block — sectioned or flat */

article > section:has(ol > li[id^="fn-"]),
article > ol:has(> li[id^="fn-"]) {
    margin-block-start: var(--space-two);
    padding-block-start: var(--space-one);
}

/* Zola emits <hr> before the flat footnote list; the hr already
   marks the break, so the list itself stays quiet */

article > hr + ol:has(> li[id^="fn-"]) {
    margin-block-start: 0;
    padding-block-start: 0;
}

article section:has(ol > li[id^="fn-"]) ol,
article > ol:has(> li[id^="fn-"]) {
    padding-inline-start: 0;
    list-style: none;
    counter-reset: endnote;
}

article li[id^="fn-"] {
    position: relative;
    counter-increment: endnote;
    max-width: var(--size-text);
    padding-block: var(--space-half);
    padding-inline-start: var(--space-two);
    padding-inline-end: var(--space-half);
    border-inline-start: 2px solid transparent;
    scroll-margin-top: var(--space-two);
}

article li[id^="fn-"] + li[id^="fn-"] {
    margin-block-start: var(--space-half);
}

article li[id^="fn-"]:target {
    border-inline-start-color: var(--color-accent);
}

article li[id^="fn-"]::before {
    content: counter(endnote);
    position: absolute;
    inset-block-start: var(--space-half);
    inset-inline-start: var(--space-half);
    color: var(--color-accent);
}

article li[id^="fn-"] p {
    margin: 0;
    color: var(--color-mute);
}

article li[id^="fn-"] p + p {
    margin-block-start: var(--space-one);
}

article li[id^="fn-"] a[href^="#fr-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch);
    min-height: var(--touch);
    margin-inline-start: 0.2em;
    color: var(--color-mute);
    text-decoration: none;
}

article li[id^="fn-"] a[href^="#fr-"]:hover,
article li[id^="fn-"] a[href^="#fr-"]:focus-visible {
    color: var(--color-accent);
}

/* ============================================================
   § FOOTERS
   ============================================================ */
body > footer {
    margin-block-start: var(--space-two);
    padding-block-start: var(--space-one);
    border-top: var(--line);
    color: var(--color-mute);
    font-size: var(--size-small);
    line-height: var(--line-snug);
}

body > footer a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;
    text-underline-offset: var(--underline-offset);
}

body > footer a:hover,
body > footer a:focus-visible {
    color: var(--color-accent);
}


/* ============================================================
   § SMALL SCREENS                               ≤ 36rem · 576 px
   Smaller spacing unit. Index rows breathe. Doc-metadata stacks.
   ============================================================ */

@media (max-width: 36rem) {
    :root {
        --space-unit: 1.4rem;
        --space-page: var(--space-unit);
    }

    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    section[data-list="index"] > ul > li + li {
        margin-block-start: var(--space-one);
    }


    footer[aria-label="Document metadata"] dl {
        display: block;
    }

    footer[aria-label="Document metadata"] dt {
        margin-block-start: var(--space-half);
        text-align: left;
    }

    footer[aria-label="Document metadata"] dt:first-child {
        margin-block-start: 0;
    }

    footer[aria-label="Document metadata"] dd {
        margin-block-start: 0.1em;
    }

    section[data-list="cards"] > ul > li + li {
        margin-block-start: var(--space-one-half);
    }
}


/* ============================================================
   § HIGH CONTRAST + REDUCED MOTION
   ============================================================ */

@media (prefers-contrast: more) {
    a              { text-decoration-thickness: 0.11em; }
    :focus-visible { outline-width: 4px; }
}

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


/* ============================================================
   § PRINT
   ============================================================ */

@media print {

    @page {
        margin: 2cm;
    }
    :root {
        --color-page:   #fff;
        --color-ink:    #000;
        --color-mute:   #444;
        --color-accent: #000;

        --size-base: 12pt;
        --size-text: 65ch;
        --size-wide: 100%;

        --line-tight: 1.1;
        --line-snug:  1.25;
        --line-read:  1.45;

        --space-unit: 1rem;
        --space-page: 0;
    }

    body {
        background: var(--color-page);
        color: var(--color-ink);
    }

    :where(p, li, dd, blockquote) {
        orphans: 3;
        widows: 3;
    }


    body > header,
    body > footer,
    body > a[href="#main"],
    article > header + details,
    nav,
    button {
        display: none;
    }

    body > header,
    main,
    body > footer {
        max-width: none;
    }

    a {
        color: var(--color-ink);
        text-decoration: none;
    }

    a[href^="#"]::after { content: ""; }

    h2, h3 {
        break-after: avoid;
        page-break-after: avoid;
    }
    pre, blockquote, table, figure {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    table {
        display: table;
        overflow: visible;
    }
}