/* =====================================================
   ZICOPRESS - site stylesheet // Version 6.4.1

   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.6)

   Reader:
   Built for current/future me: 43y, left-handed, low-vision, presbyopia,
   ASD level 1, ADHD, perfectionist, dual-language, typography-obsessive,
   easily overloaded, often tired.

   Direction:
   One font family. One text size. One column.
   One spacing unit, and it equals the text size.
   Ink for structure. Mute for metadata. Accent for action.
   Space before rules. Rules only where they carry data.
   A page of paper on a desk.

   Grid:
   Every type value is a count of sixteenths of an em.
   Sixteen ana make one taka; "ষোল আনা" means whole.
   Text sizes 14, 20, 28. Line heights 18, 20, 24.
   Underlines 1, 1.5, 4. Small gaps 2, 6, 8.
   Every space is a count of the text size: 0.5, 1, 2, 3.
   Pixels only for hands and screens: 1, 2, 3, 44.

   Naming:
   Tokens come in ones and threes.
   small, large, huge for size and space.
   thin, thick, mark for rules.

   Rhythm:
   The Markdown source is the archive. This sheet only
   renders its grammar.
   blank line   one space
   ## heading   huge above, small below
   ### heading  large above, small below
   #### heading one space above, small below
   code, table  large above and below
   quote        one space above and below
   ***          large above and below, three asterisks

   Zola renders Markdown flat (siblings under article).
   Hand-made pages wrap prose in section. Both spellings
   get the same distances. Margins collapse, so a block
   meeting a heading gives the larger gap, never the sum.

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


   /* =====================================================
      TOKENS
      ===================================================== */

   /* bangla inside english: letters and danda come from one
      installed Bengali font, in the same order as
      --font-bangla. Covers only Bengali characters, so
      English never touches it. Downloads nothing. */
   @font-face {
       font-family: "Bangla Local";
       src: local("Hind Siliguri"), local("HindSiliguri-Regular"),
            local("Noto Serif Bengali"), local("NotoSerifBengali-Regular"),
            local("Shonar Bangla"),
            local("SolaimanLipi");
       unicode-range: U+0964-0965, U+0980-09FF;
   }

   /* english inside bangla: the mirror rule. Latin letters,
      digits and basic punctuation come from Georgia, so
      English in a Bangla page reads as English. Quotes,
      dashes and ellipses follow the page's script, so they
      sit right beside Bangla letters. Downloads nothing. */
   @font-face {
       font-family: "Latin Local";
       src: local("Georgia"), local("Georgia-Regular");
       unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
                      U+20AC, U+2122;
   }
   @font-face {
       font-family: "Latin Local";
       src: local("Georgia Italic"), local("Georgia-Italic");
       font-style: italic;
       unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
                      U+20AC, U+2122;
   }
   @font-face {
       font-family: "Latin Local";
       src: local("Georgia Bold"), local("Georgia-Bold");
       font-weight: 700;
       unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
                      U+20AC, U+2122;
   }

   :root {
    /* ink: three tones */
    --color-ink:    #221111;   /* text and structure */
    --color-mute:   #554433;   /* metadata, rest states */
    --color-accent: #A03000;   /* action only; 6.6:1 on page */

    /* ground: three surfaces */
    --color-page: #FCFCFC;     /* the paper */
    --color-desk: #EBEBEB;     /* neutral grey around the paper, wide screens only */
    --color-tint: color-mix(in srgb, var(--color-ink) 8%, transparent);  /* inline code */

    /* fonts: three families */
    --font-latin:  Georgia, "Bangla Local", ui-serif, "Times New Roman", Times, serif;
    --font-bangla: "Latin Local", "Hind Siliguri", "Noto Serif Bengali", "Shonar Bangla", "SolaimanLipi", serif;
    --font-code:   ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* text size: one root, three steps (in sixteenths) */
    --text-normal: clamp(1.25rem, 1.05rem + 0.75vw, 1.5rem);
    --text-small:  0.875em;    /* 14 */
    --text-large:  1.25em;     /* 20, h2 */
    --text-huge:   1.75em;     /* 28, h1 */

    /* line height: three (in sixteenths) */
    --line-tight: 1.125;   /* 18, big headings */
    --line-snug:  1.25;    /* 20, labels and chrome */
    --line-open:  1.5;     /* 24, reading */

    /* weight: one */
    --weight-bold: 700;        /* strong and b only */

    /* underline: three (in sixteenths) */
    --underline-thin:  0.09375em;  /* 1.5, at rest */
    --underline-thick: 0.125em;    /* 2, on action */
    --underline-gap:   0.25em;     /* 4, distance from text */

    /* space: one root, three steps */
    --space:       var(--text-normal);          /* 1, paragraph gap */
    --space-small: calc(var(--space) * 0.5);    /* 0.5 */
    --space-large: calc(var(--space) * 2);      /* 2 */
    --space-huge:  calc(var(--space) * 3);      /* 3, chapter break */

    /* edge: one, the paper margin */
    --space-edge: clamp(var(--space), 3.5vw, var(--space-large));

    /* small gaps: three, scale with their own text (in sixteenths) */
    --gap-tiny:   0.125em;     /* 2 */
    --gap-tap:    0.375em;     /* 6, inflates inline tap targets */
    --gap-marker: 0.5em;       /* 8, list marker to text */

    /* widths: three */
    --width-title: 20ch;
    --width-text:  calc(var(--space) * 28);    /* 42rem at full size */
    --width-paper: calc(var(--space) * 36);    /* text plus 4 on each side */

    /* rules: three */
    --rule-thin:  1px solid var(--color-mute);
    --rule-thick: 2px solid var(--color-mute);
    --rule-mark:  2px solid var(--color-accent);

    /* hands: three */
    --touch-size: 44px;
    --focus-ring: 3px solid var(--color-accent);
    --focus-gap:  3px;

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

@media (prefers-color-scheme: dark) {
    :root {
        --color-ink:    #C8DCE8;
        --color-mute:   #84A2BC;
        --color-accent: #E09838;
        --color-page:   #0E203C;
        --color-desk:   #091628;
    }
}

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

@media (forced-colors: active) {
    :root {
        --color-ink:    CanvasText;
        --color-mute:   GrayText;
        --color-accent: LinkText;
        --color-page:   Canvas;
        --color-desk:   Canvas;
        --rule-thin:    1px solid GrayText;
        --rule-thick:   2px solid GrayText;
        --rule-mark:    2px solid LinkText;
        --focus-ring:   3px solid LinkText;
        accent-color:   LinkText;
    }
}


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

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

html {
    background: var(--color-desk);
    color: var(--color-ink);
    font-family: var(--font-latin);
    font-size: 100%;
    font-size-adjust: 0.48;   /* Georgia's x-height; fallbacks match it */
    line-height: var(--line-open);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: var(--space-large);
    scrollbar-gutter: stable;
}

/* the paper: on narrow screens it is the whole screen */
body {
    min-height: 100vh;
    min-height: 100dvh;
    max-width: calc(var(--width-paper) + var(--space-edge) * 2);
    margin: 0 auto;
    padding: var(--space-edge);
    background: var(--color-page);
    color: var(--color-ink);
    font-size: var(--text-normal);
    font-synthesis: weight style;
    font-kerning: normal;
    line-height: var(--line-open);
    overflow-wrap: break-word;
    hyphens: none;
}

/* one column: the only width rule in the sheet */
body > header,
main,
body > footer {
    max-width: var(--width-text);
    margin-inline: auto;
}

@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;
    }
}

/* bangla: its own family, a taller line (28 sixteenths) */
:lang(bn) {
    font-family: var(--font-bangla);
    font-synthesis: weight;   /* Bengali has no italic: never fake one */
    line-height: calc(var(--line-open) + 0.25);
    letter-spacing: 0;
    font-variant-numeric: normal;
}

:where(h1, h2, h3, h4):lang(bn) {
    line-height: var(--line-snug);
}


/* =====================================================
   RESET

   Zero the margins on every block. Normalize the font
   on every text element. Chrome elements sit snug.
   ===================================================== */

: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;
}

/* after the reset, which would otherwise cancel it: code and
   Bangla keep their own proportions */
:where(code, kbd, samp, pre, :lang(bn)) {
    font-size-adjust: none;
}

/* figures come after the reset: font: inherit would erase them */
:where(p, li, dd, blockquote, figcaption) {
    font-variant-numeric: oldstyle-nums proportional-nums;
}

:where(
    nav, summary, button,
    input, textarea, select,
    legend, label,
    small, time, figcaption, caption,
    th, td, dt,
    h3, h4
) {
    line-height: var(--line-snug);
}


/* =====================================================
   RHYTHM

   Two markup dialects, one rhythm. Each distance below
   appears once for flat Markdown (article) and once for
   hand-made pages (section).
   ===================================================== */

/* site header: name and menu, one closed block */

body > header {
    font-size: var(--text-small);
}

/* block 1: the rooms sit between two thin lines; the same
   frame closes the page around the colophon */
body > header > nav[aria-label="Primary"] {
    margin-block-start: var(--space-small);
    border-block: var(--rule-thin);
}

body > header > p {
    line-height: var(--line-snug);
}

body > header > p > a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-size);
    text-decoration-line: none;   /* the name is obvious; it underlines on action */
}

/* block 1 stays quiet: every link mute and unlined at rest.
   The current room reads in ink. Accent and underline wait
   for the hand. */
body > header {
    color: var(--color-mute);
}

body > header a {
    color: inherit;
    text-decoration-line: none;
}

body > header a:hover,
body > header a:focus-visible {
    color: var(--color-accent);
    text-decoration-line: underline;
}

/* article header: kicker, title, lede. A little sinkage
   above, like a chapter opening. */

article > header {
    padding-block-start: calc(var(--space) * 3.25);   /* 52 ana: twice the golden gap, block 1 to block 2 */
    margin-block-end: var(--space-large);
}

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

/* base flow: one space between everything */

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

/* paragraphs inside a quote, list item or definition */

:where(blockquote, li, dd, figure) > p + p {
    margin-block-start: var(--space);
}

/* before headings */

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

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

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

/* after headings: every heading holds its text close,
   half a space. Space above, closeness below. */

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

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

/* a subheading straight after a heading keeps one space:
   it belongs to its own text, not to the heading above */
article > h2 + :is(h3, h4),
section > h2 + :is(h3, h4) {
    margin-block-start: var(--space);
}

/* the header's own gap wins over whatever follows it */

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

/* an index page opens like a chapter: three spaces from
   the lede to the first shelf */

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

/* a closed table of contents already reads as a pause */

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

/* data blocks: large above and below */

pre,
table,
figure {
    margin-block: var(--space-large);
}

/* prose blocks: one space above and below */

blockquote,
details,
article > dl {
    margin-block: var(--space);
}

/* trim the edges of every container */

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

section > :last-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;
}


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

body > a[href="#main"] {
    position: fixed;
    inset-block-start: -10rem;
    inset-inline-start: var(--space-edge);
    z-index: 10;
    min-height: var(--touch-size);
    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-edge);
    outline: var(--focus-ring);
    outline-offset: var(--focus-gap);
}


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

   Space frames the menu. No rules.
   ===================================================== */

nav {
    padding-block: var(--space-small);
}

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

nav li {
    padding-inline-start: 0;
}

nav[aria-label="Primary"] ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-small) calc(var(--space) * 1.625);   /* 26 ana between rooms */
}

/* menu links look like every other link: underlined at rest */
nav[aria-label="Primary"] a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-size);
}

/* you are here: accent text, accent underline */
/* you are here: ink and an ink underline, the one line in
   block 1. A second cue beyond colour; accent stays the verb. */
nav[aria-label="Primary"] a[aria-current="page"] {
    color: var(--color-ink);
    text-decoration-line: underline;
    text-decoration-color: currentColor;
}

/* breadcrumb: the room, then each folder down to the
   parent, above the title. Mute, small, a slash between.
   The slash is drawn, not read aloud. */

nav[aria-label="Breadcrumb"] {
    padding: 0;
    color: var(--color-mute);
    font-size: var(--text-small);
}

nav[aria-label="Breadcrumb"] ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

nav[aria-label="Breadcrumb"] li {
    display: flex;
    align-items: center;
    padding-inline-start: 0;
}

nav[aria-label="Breadcrumb"] li + li {
    margin-block-start: 0;   /* one line, not a list */
}

nav[aria-label="Breadcrumb"] li + li::before {
    content: "/";
    content: "/" / "";
    padding-inline: var(--gap-marker);
}

nav[aria-label="Breadcrumb"] a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;   /* the minimum target; keeps the line close to the rule */
    color: inherit;
}

body > header > nav[aria-label="Breadcrumb"] {
    min-block-size: calc(var(--space) * 1.625);   /* 26 ana: one breadcrumb line */
    padding-block: var(--gap-tap) 0;
}

/* home and the three rooms have no breadcrumb: an invisible
   line of the same height keeps block 2 from jumping */
body > header:not(:has(nav[aria-label="Breadcrumb"])) {
    padding-block-end: calc(var(--space) * 1.625);
}

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

/* table of contents */

nav[aria-label="Table of contents"] {
    margin-block-start: 0;
    padding: 0;
    padding-inline-start: calc(var(--space) * 1.125);   /* 18 ana: marker slot plus gap, under the C */
    color: var(--color-mute);
    font-size: var(--text-small);
}

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

nav[aria-label="Table of contents"] a {
    color: inherit;
    text-decoration-line: none;   /* a list of titles: links by place */
}

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

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

   At rest: ink text, thin ink underline.
   Visited: mute underline.
   On action: accent underline, thicker.
   Order matters: link, visited, hover, focus.
   ===================================================== */

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

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

section[data-list] a:visited,
#chapters a:visited {
    color: var(--color-mute);
}

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

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-gap);
}

/* heading permalinks

   Zola insert_anchor_links = "right" puts "§" after the
   heading text. Hidden until hover or target; mute on
   touch screens, where nothing can hover. */

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

a.zola-anchor {
    position: relative;
    margin-inline-start: var(--gap-marker);
    color: var(--color-mute);
    font-size: var(--text-small);
    font-style: normal;
    text-decoration: none;
    user-select: none;
}

/* a 44px hit area that reaches right, never over the words */
a.zola-anchor::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    width: var(--touch-size);
    height: var(--touch-size);
    translate: 0 -50%;
}

article :where(h2, h3, h4):is(:hover, :target) > a.zola-anchor {
    color: var(--color-accent);
}

/* where a hand can hover, the mark waits; the eye starts
   on the words. Touch screens keep it, faint. */
@media (hover: hover) {
    a.zola-anchor {
        opacity: 0;
    }

    article :where(h2, h3, h4):is(:hover, :target) > a.zola-anchor {
        opacity: 1;
    }
}


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

   h1 and h2 grow. h3 and h4 keep the text size and slope.
   Size, slope, and space carry the order. Never weight.
   ===================================================== */

h1,
h2 {
    line-height: var(--line-tight);
}

h3,
h4 {
    line-height: var(--line-snug);
    font-style: italic;
}

h1 {
    max-width: var(--width-title);
    font-size: var(--text-huge);
}

h2 {
    font-size: var(--text-large);
    color: var(--color-mute);   /* size carries the order; the ink stays with the text */
}

h4 {
    font-size: var(--text-small);
}


/* =====================================================
   QUIET TEXT

   The mute voice: kicker, lede, and every label.
   The kicker keeps its own case. Georgia has no real
   small caps, and faked capitals shout.
   ===================================================== */

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

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

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

strong,
b {
    font-weight: var(--weight-bold);
}

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

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

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

/* struck text is announced as struck: the default stays
   audible, then the repair follows. Hidden from the eye. */
del::before,
del::after {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

del::before {
    content: " struck: ";
}

del::after {
    content: ", ";
}


/* =====================================================
   LISTS

   Indent two spaces. Half an em between marker and text.
   ===================================================== */

main :where(ul, ol) {
    padding-inline-start: var(--space-large);
}

/* zero weight: nav, index, and endnote lists override it */
main :where(li) {
    padding-inline-start: var(--gap-marker);
}

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

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


/* =====================================================
   DATA LISTS

   Log and lab indexes.
   index: title and date on one baseline
   cards: a block with a note under it
   ===================================================== */

section[data-list] > ul {
    padding: 0;
    list-style: none;
}

section[data-list] li {
    padding-inline-start: 0;
}

/* the whole row is the target: a hand that shakes, or a
   tired one, lands anywhere on the line */
section[data-list] > ul > li,
#chapters ol > li,
nav[aria-label="Table of contents"] li {
    position: relative;
}

section[data-list] > ul > li > a::before,
#chapters ol > li > a::before,
nav[aria-label="Table of contents"] li > a::before {
    content: "";
    position: absolute;
    inset: 0;
}

section[data-list] > h2 > a {
    text-decoration-line: none;   /* a shelf title is a link by place */
}

section[data-list] > h2 > a:hover,
section[data-list] > h2 > a:focus-visible,
section[data-list] > ul > li:hover > a,
#chapters ol > li:hover > a,
nav[aria-label="Table of contents"] li:hover > a {
    color: var(--color-accent);
    text-decoration-line: underline;
}

/* the line under a shelf title belongs to it: half a
   space, mute, like a caption */

section[data-list] > h2 + p {
    margin-block-start: var(--space-small);
    color: var(--color-mute);
}

/* index */

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

/* the leader: a dotted line from title to label, like a
   book's contents page. It carries the eye across the gap,
   and it is the row's only line. */
section[data-list="index"] > ul > li:has(> :is(time, small))::after {
    content: "";
    grid-row: 1;
    grid-column: 2;
    align-self: end;
    margin-block-end: 0.4em;
    border-block-end: var(--rule-thin);
    border-block-end-style: dotted;
}

section[data-list="index"] > ul > li > :is(time, small) {
    grid-column: 3;
}

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

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

/* an unlinked title is 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);
}

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

/* series chapter index: a book contents page */

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

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

/* a title in a list is a link by its place: no underline
   at rest, so the leader stays the only line. On action:
   accent and underline, the verb. */

section[data-list] > ul > li > a {
    text-decoration-line: none;
}

/* list links answer the hand: accent, full height */

section[data-list] > ul > li > a:hover,
section[data-list] > ul > li > a:focus-visible,
#chapters ol > li > a:hover,
#chapters ol > li > a:focus-visible {
    color: var(--color-accent);
    text-decoration-line: underline;
    text-decoration-color: currentColor;
}

section[data-list="cards"] > ul > li > a,
#chapters ol > li > a {
    display: flex;
    align-items: center;
    min-height: var(--touch-size);
}


/* =====================================================
   STREAM

   Seeds: dated fragments, newest first. The h2 is a
   dateline, not a chapter: small and mute, § kept.
   A thin rule above each date carries data, so it stays.
   ===================================================== */

section[data-stream] > h2 {
    color: var(--color-mute);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
    line-height: var(--line-snug);
}

section[data-stream] > * + h2 {
    margin-block-start: var(--space-large);
    padding-block-start: var(--space);
    border-block-start: var(--rule-thin);
}

section[data-stream] > h2 + * {
    margin-block-start: var(--space-small);
}


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

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

@supports (hanging-punctuation: first) {
    :where(blockquote, p) {
        hanging-punctuation: first last;
    }
}


/* =====================================================
   CODE
   ===================================================== */

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

:where(p, li, dd, td, th) code {
    padding-inline: var(--gap-tiny);
    background: var(--color-tint);
    overflow-wrap: anywhere;
}

/* keys stay visible objects */
kbd {
    padding: var(--gap-tiny) var(--gap-tap);
    border: var(--rule-thin);
}

pre {
    width: 100%;
    overflow-x: auto;
    padding: var(--space-small) var(--space);
    border-block: var(--rule-thick);
    font-family: var(--font-code);
    font-size: var(--text-small);
    font-variant-ligatures: none;
    font-variant-numeric: tabular-nums slashed-zero;
    line-height: var(--line-snug);
    white-space: pre;
    overflow-wrap: normal;
    tab-size: 4;
}

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


/* =====================================================
   OUTBOUND LINKS

   A small arrow after any link that leaves the site, so a
   tired reader knows before the click. Drawn in currentColor:
   ink at rest, accent on hover, LinkText in forced colors.
   ===================================================== */

main a[href^="http"]:not([href*="ishtiaquezico.com"], [href^="http://127.0.0.1"], [href^="http://localhost"])::after {
    content: "";
    display: inline-block;
    inline-size: 0.55em;
    block-size: 0.55em;
    margin-inline-start: 0.2em;
    vertical-align: 0.1em;
    background: currentColor;
    forced-color-adjust: none;
    -webkit-mask: var(--mark-outbound) center / contain no-repeat;
    mask: var(--mark-outbound) center / contain no-repeat;
}

:root {
    --mark-outbound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 1.5h5.5V7M8.5 1.5 1.5 8.5'/%3E%3C/svg%3E");
}


/* =====================================================
   TIME AND TABLE

   Tables are booktabs: thick rules outside, a thin rule
   under the head, no lines between rows.
   ===================================================== */

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

time {
    white-space: nowrap;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-block: var(--rule-thick);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
    line-height: var(--line-snug);
}

/* optional scroll region around a wide table */
[role="region"]:has(> table) {
    overflow-x: auto;
    margin-block: var(--space-large);
}

[role="region"]:has(> table) > table {
    margin: 0;
}

caption {
    caption-side: bottom;
    margin-block-start: var(--space-small);
    color: var(--color-mute);
    text-align: left;
}

th,
td {
    padding: var(--space-small) var(--space) var(--space-small) 0;
    text-align: left;
    vertical-align: baseline;
    font-weight: normal;
}

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

thead th {
    border-bottom: var(--rule-thin);
}


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

   Charts are inline SVG line art drawn in currentColor.
   They follow the ink in light, dark, print, and forced
   colors, and cost no extra request.
   ===================================================== */

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

figure {
    margin-inline: 0;
}

figure > svg {
    width: 100%;
    color: var(--color-ink);
}

/* labels: muted by default; a label with fill="currentColor" reads in ink */

figure > svg text {
    font-size: 16px;   /* user units: labels scale with the drawing */
}

figure > svg text:not([fill]) {
    fill: var(--color-mute);
}

figure > figcaption {
    margin-block-start: var(--space-small);
    font-size: var(--text-small);
}


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

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

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

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

summary::before {
    content: "+";
    inline-size: 0.75em;   /* 12 ana: a fixed slot for + and − */
    color: var(--color-accent);
    line-height: 1;
}

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

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

/* =====================================================
   HORIZONTAL RULE

   Markdown *** shows as it is typed: three asterisks,
   centered, mute. Plain text, the oldest section break.
   ===================================================== */

hr {
    margin-block: var(--space-large);
    border: 0;
    color: var(--color-mute);
    text-align: center;
}

hr::before {
    content: "* * *";
}


/* =====================================================
   DEFINITION LISTS

   Prose glossary: term in ink, meaning in mute.
   Document metadata: a quiet keyed list.
   ===================================================== */

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

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

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

/* document metadata */

footer[aria-label="Document metadata"] {
    margin-block-start: var(--space-huge);
    padding-block-start: var(--space);
    border-block-start: var(--rule-thin);
    border-block-start-style: dotted;   /* reading ends; the record begins */
    color: var(--color-mute);
    font-size: var(--text-small);
}

footer[aria-label="Document metadata"] dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: baseline;   /* label and value share a line */
    gap: var(--space-small) var(--space);
}

footer[aria-label="Document metadata"] :where(dt, dd) {
    margin: 0;
}

/* label, a dotted leader, then the value: the index-list
   grammar, read across */
footer[aria-label="Document metadata"] dt {
    text-align: left;
}

/* the citation gets its own block: label above, full width
   below, easy to read and copy */
footer[aria-label="Document metadata"] dt:has(+ dd cite),
footer[aria-label="Document metadata"] dd:has(cite) {
    grid-column: 1 / -1;
}

footer[aria-label="Document metadata"] dt:has(+ dd cite) {
    margin-block-start: var(--space-small);
}

footer[aria-label="Document metadata"] a,
body > footer a {
    color: inherit;
    text-decoration-color: currentColor;
}

/* the colophon is chrome: unlined at rest, like block 1 */
body > footer a {
    text-decoration-line: none;
}

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


/* =====================================================
   ENDNOTES

   Two dialects, one look.
   Hand-made: section aria-label="Endnotes" with ol > li#fn-
   Zola bottom_footnotes: hr, then ol > li#fn- flat under
   article. References are sup > a[href*="#fn-"], backlinks
   are a[href*="#fr-"].
   ===================================================== */

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

sup {
    top: -0.4em;
    margin-inline-start: var(--gap-tiny);
}

sub {
    bottom: -0.25em;
}

sup a {
    padding: var(--gap-tap);
    margin: calc(var(--gap-tap) * -1);
    color: var(--color-accent);
    text-decoration: none;
}

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

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

/* the asterisks already mark the break */
article > hr + ol:has(> li[id^="fn-"]) {
    margin-block-start: 0;
}

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

article li[id^="fn-"] {
    position: relative;
    counter-increment: endnote;
    padding: var(--space-small) var(--space-small) var(--space-small) var(--space-large);
    border-inline-start: var(--rule-mark);
    border-inline-start-color: transparent;
}

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-small);
    inset-inline-start: var(--space-small);
    color: var(--color-accent);
}

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

article li[id^="fn-"] a[href*="#fr-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-size);
    min-height: var(--touch-size);
    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);
}


/* =====================================================
   SITE FOOTER

   Set apart by space alone.
   ===================================================== */

body > footer {
    margin-block-start: calc(var(--space) * 3.25);   /* 52 ana: the closing mirrors the opening */
    padding-block: var(--space-small);
    border-block: var(--rule-thin);
    font-size: var(--text-small);
    line-height: var(--line-snug);
}

/* the footer: the place on the left, the years on the
   right edge, where meta lives */
body > footer > p {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-small) var(--space);
}


/* =====================================================
   SMALL SCREENS (36rem, 576px and below)

   Space already shrinks with the text. Here only the
   edge, the § position, and three layouts change.
   ===================================================== */

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

    /* about 32 characters a line here: hyphens close the
       holes at the ragged edge. English only; browsers have
       no Bangla dictionary, so Bangla never breaks. */
    :where(p, li, dd, blockquote, figcaption):lang(en) {
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    section[data-list="index"] > ul > li {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--gap-tiny);
    }

    /* stacked rows need no leader */
    section[data-list="index"] > ul > li::after {
        display: none;
    }

    section[data-list="index"] > ul > li > :is(time, small) {
        grid-column: auto;
    }

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

    section[data-list="index"] > ul > li > :where(time, small) {
        text-align: left;
    }

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

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

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


/* =====================================================
   HIGH CONTRAST
   ===================================================== */

@media (prefers-contrast: more) {
    :root {
        --underline-thin: var(--underline-thick);
    }

    :focus-visible {
        outline-width: 4px;
    }
}

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

@media print {
    @page {
        margin: 2cm;
    }

    :root {
        --color-ink:    #000;
        --color-mute:   #444;
        --color-accent: #000;
        --color-page:   #fff;
        --color-desk:   #fff;
        --text-normal:  12pt;
        --line-open:    1.45;
        --space-edge:   0;
        --width-text:   65ch;
    }

    body {
        max-width: none;
    }

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

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

    article > header {
        padding-block-start: 0;
    }

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

    /* paper cannot click: external links print their address */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        display: inline;
        background: none;
        -webkit-mask: none;
        mask: none;
        color: var(--color-mute);
        font-size: var(--text-small);
        overflow-wrap: anywhere;
    }

    h2,
    h3 {
        break-after: avoid;
    }

    blockquote,
    figure,
    tr {
        break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    [role="region"]:has(> table) {
        overflow: visible;
    }

    footer[aria-label="Document metadata"] a::after {
        content: none;   /* the Cite line already prints its address */
    }

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