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

   Author: Ishtiaque Zico
   Built with Zola 0.23.6.

   Purpose
   A plain, readable website for long text, notes, tools
   and an archive. It should feel like plain HTML on a page
   of paper: the ink of a book without copying a book.

   Reader
   Built for me now and later: 40s and up, left-handed,
   low vision, presbyopia, ASD level 1, ADHD, multilingual,
   typography-obsessive, easily overloaded, often tired.

   Direction
   One font family. One text size, two steps. One column.
   One spacing unit, and it equals the text size.
   Three inks: ink to read, note to build, accent to act.
   Mute is ink at rest, for metadata.
   Space before rules. Rules only where they carry data.
   No sentence case in titles, no serial comma, no faux
   bold or faux italic. Bangla stays in its one weight.

   The ana grid
   Sizes are counted in ana: sixteen ana make one taka,
   and "sholo ana" means whole. One ana is a sixteenth of
   the text it sits in (--ana); at the 16 px default it is
   one pixel. The grid is the web's own halving, counted my
   way: a local layer on a Western base.
   Sixteen ana are a whole, never a size to exceed: each
   share names its whole first.
   Why: /lab/system/sixteen-ana/
   Text 14, 16, 22 (label, text, title).
   Lines 19, 20, 24 (title, chrome, reading). A Bangla
   line box: its ink (1.25 of the text) is 12 ana, and 4
   ana are clearance.
   Underlines 1.5, 2, 5. Small gaps 2, 6, 8.
   Spaces count the text size: 0.5, 1, 2, 3.
   Pixels only for hands and screens: 1, 2, 3, 44.
   These are counts chosen for each job, not a 4x grid.
   The named steps 4, 8 and 12 sit where they fit.

   Naming
   Tokens come in ones and threes: small, large for size;
   small, large, huge for space; thin, thick, mark for
   rules. The one exception is --space-row, a chrome gap.

   Rhythm
   The Markdown source is the archive; this sheet only
   renders its grammar. Zola writes Markdown flat under
   article, hand-made pages wrap text in section, and both
   get the same distances. Margins collapse, so a block
   meeting a heading takes the larger gap, never the sum.
   blank line   one space
   ## heading   three spaces above, one below
   ### heading  two spaces above, half below
   #### heading one space above, half below
   code, table  two spaces above and below
   quote        one space above and below
   ***          two spaces above and below

   Inventory
   Tones     ink #222, mute #555, note #000, accent #930
             dark: #C8DCE8, #9AB4CB, #FFF, #F5A33F (navy night)
   Surfaces  page #FAFAFA, desk #EEE, tint (ink at 8%)
             dark: page #0E203C, desk #091628
   Color     gray on near-white, pure black for the frame,
             one rust for the hand, in short hex:
             0, 2, 5, 9-3-0, FA, E.
             Every text tone 7:1 or more on its page.
             Dark mode stays navy: a night sky, never black.
   Fonts     Zicopress English Serif (Source Serif 4),
             Zicopress Bangla Serif (Varendra), system mono
   Faces     400, 400 italic, 600 (strong, b). No bold italic.
             Optical size fixed: regular 24, the others 22.
   Sizes     root 100%, text 21 to 24 px, x-height 0.48
   Widths    title 40ch, text 29 spaces; the text is 12
             ana of the paper, the margin 4
   Rules     thin 1 px, thick 2 px, mark 2 px accent
   Hands     targets 44 px, focus ring 3 px accent
   Icon      one rust circle, #A03000

   Changes (each version also in zico-private/backups/diffs)
   7.6   Fast loading before font finesse: English regular
         is fixed at the reading size (optical size 24),
         36 KB instead of 80, so every page is lighter.
   7.5   Ana as shares of a whole. The text is 12 ana of
         the paper. The Bangla line box holds 12 ana of
         ink and 4 of clearance (1.75 to 1.67).
   7.4   The page is one continuous sheet on the desk: a
         soft edge all round, a gap above and below. Not
         on phones, not in print.
   7.3.1 In-text endnote numbers are rust again.
   7.3   The frame is pure black (white at night), one
         step above the text. Lists no longer gray out
         what was read. A marked phrase gets a soft tint.
   7.2   A third ink. Indigo (note) marks the frame at rest:
         title, section heads, kicker, numbers, marks and
         Bangla emphasis. Rust is now only under the hand.
   7.1   The path line was shrunk twice (18 px); it now
         matches the rooms (21 px). Acronyms in a heading
         keep their capitals for any fallback font. The
         table row guide moved into its own section.
   7.0   Comments gathered under each section; tokens
         written as counts of ana. Bangla strong keeps no
         box (it looked like code). Acronyms in an italic
         heading stand upright, so their small caps draw.
   6.27  Larger reading text, line height 24, short hex
         palette, no hover box on lists, keyboard focus on
         heading marks, h4 at text size, lowercase h3, h4
         and contents.
   6.26  Name and path on one line; kicker runs into the
         lede.
   6.20  Headings at text size; space and voice set them
         apart.
   6.17  One drawn arrow, turned; numbered contents.
   6.16  Drawn fonts: Source Serif 4 and Varendra.

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

/* =====================================================
   TOKENS
   Every visible choice starts here. Two drawn fonts, both
   my renamed subsets: Source Serif 4 for English (the
   regular keeps its optical sizes, italic and 600 are
   fixed at the reading size) and Varendra for Bangla,
   which also draws its own quotes, dashes and ellipsis.
   Dark mode swaps the five tones; forced colors hand them
   to the system.
   ===================================================== */

@font-face {
    font-family: "Zicopress English Serif";
    src: url("/fonts/english/zicopress-english-serif-400-regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    unicode-range: U+0000-017F, U+0192, U+0218-021B, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0300-030C, U+0323, U+0327, U+0331, U+1E0C-1E0F, U+1E24-1E25,
                   U+1E36-1E39, U+1E40-1E47, U+1E5A-1E5F, U+1E62-1E63, U+1E6C-1E6F,
                   U+1E92-1E93, U+2000-200B, U+2010-2027, U+202F-205E, U+2070-209F,
                   U+20AC, U+2116, U+2122, U+2190-2199, U+2212, U+2215, U+2248,
                   U+2260, U+2264-2265;
}
@font-face {
    font-family: "Zicopress English Serif";
    src: url("/fonts/english/zicopress-english-serif-400-italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
    font-display: fallback;
    unicode-range: U+0000-017F, U+0192, U+0218-021B, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0300-030C, U+0323, U+0327, U+0331, U+1E0C-1E0F, U+1E24-1E25,
                   U+1E36-1E39, U+1E40-1E47, U+1E5A-1E5F, U+1E62-1E63, U+1E6C-1E6F,
                   U+1E92-1E93, U+2000-200B, U+2010-2027, U+202F-205E, U+2070-209F,
                   U+20AC, U+2116, U+2122, U+2190-2199, U+2212, U+2215, U+2248,
                   U+2260, U+2264-2265;
}
@font-face {
    font-family: "Zicopress English Serif";
    src: url("/fonts/english/zicopress-english-serif-600-semibold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: fallback;
    unicode-range: U+0000-017F, U+0192, U+0218-021B, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0300-030C, U+0323, U+0327, U+0331, U+1E0C-1E0F, U+1E24-1E25,
                   U+1E36-1E39, U+1E40-1E47, U+1E5A-1E5F, U+1E62-1E63, U+1E6C-1E6F,
                   U+1E92-1E93, U+2000-200B, U+2010-2027, U+202F-205E, U+2070-209F,
                   U+20AC, U+2116, U+2122, U+2190-2199, U+2212, U+2215, U+2248,
                   U+2260, U+2264-2265;
}

@font-face {
    font-family: "Zicopress Bangla Serif";
    src: url("/fonts/bangla/zicopress-bangla-serif-400-regular.woff2") format("woff2");
    font-display: fallback;
    unicode-range: U+0964-0965, U+0980-09FF, U+200C-200D, U+25CC,
                   U+2013-2014, U+2018-201D, U+2026;
}

:root {
    --color-ink:    #222;
    --color-mute:   #555;
    --color-note:   #000;
    --color-accent: #930;

    --color-page: #FAFAFA;
    --color-desk: #EEE;
    --color-tint: color-mix(in srgb, var(--color-ink) 8%, transparent);

    --font-latin:  "Zicopress English Serif", "Zicopress Bangla Serif", Georgia, "Hind Siliguri", "Noto Serif Bengali", "Kohinoor Bangla", ui-serif, serif;
    --font-bangla: "Zicopress Bangla Serif", "Zicopress English Serif", Georgia, "Hind Siliguri", "Noto Serif Bengali", "Kohinoor Bangla", "Shonar Bangla", "SolaimanLipi", serif;
    --font-code:   ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --ana: 0.0625em;

    --text-normal: clamp(1.3125rem, 1.1rem + 0.75vw, 1.5rem);
    --text-small:  calc(var(--ana) * 14);
    --text-large:  calc(var(--ana) * 22);

    --line-tight: calc(19 / 16);
    --line-snug:  calc(20 / 16);
    --line-open:  calc(24 / 16);

    --weight-bold: 600;

    --underline-thin:  calc(var(--ana) * 1.5);
    --underline-thick: calc(var(--ana) * 2);
    --underline-gap:   calc(var(--ana) * 5);

    --space:       var(--text-normal);
    --space-small: calc(var(--space) * 0.5);
    --space-large: calc(var(--space) * 2);
    --space-huge:  calc(var(--space) * 3);
    --space-row:   calc(var(--space) * 1.625);

    --space-edge: clamp(var(--space), 3.5vw, var(--space-large));

    --gap-tiny:   calc(var(--ana) * 2);
    --gap-tap:    calc(var(--ana) * 6);
    --gap-marker: calc(var(--ana) * 8);

    --width-title: 40ch;
    --width-text:  calc(var(--space) * 29);
    --width-paper: calc(var(--width-text) * 16 / 12);

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

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

    --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");

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

@media (prefers-color-scheme: dark) {
    :root {
        --color-ink:    #C8DCE8;
        --color-mute:   #9AB4CB;
        --color-note:   #FFF;
        --color-accent: #F5A33F;
        --color-page:   #0E203C;
        --color-desk:   #091628;
    }
}

@media (forced-colors: active) {
    :root {
        --color-ink:    CanvasText;
        --color-mute:   GrayText;
        --color-note:   CanvasText;
        --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
   The paper sits on a desk on wide screens, one long
   sheet with a soft edge and a gap above and below, and
   fills a phone. The root stays at the reader's own default; the
   text token does the growing. Fonts are never faked:
   no synthetic bold, italic or small caps. Bangla gets
   its own family and a taller line, and its emphasis
   stays upright. A Bangla word inside an English line
   keeps the English line height, so the paragraph never
   wedges open.
   ===================================================== */

*,
*::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;
    line-height: var(--line-open);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: var(--space-large);
    scrollbar-gutter: stable;
}

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: none;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual;
    font-optical-sizing: auto;
    line-height: var(--line-open);
    overflow-wrap: break-word;
    hyphens: none;
}

@media screen and (min-width: 36.0625rem) {
    body {
        min-height: calc(100dvh - var(--space-large) * 2);
        margin-block: var(--space-large);
        border: 1px solid color-mix(in srgb, var(--color-mute) 40%, transparent);
    }
}

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

:where(em, i, cite, dfn, var, h3):lang(bn) {
    font-style: normal;
}

:where(em, i, strong, b, dfn):lang(bn) {
    color: var(--color-note);
    font-weight: 400;
}

:lang(bn) {
    font-family: var(--font-bangla);
    font-synthesis: none;
    line-height: calc(1.25 * 16 / 12);
    letter-spacing: 0;
    font-variant-numeric: normal;
}

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

:where(p, dt, dd, blockquote, figcaption, td, th, caption, h1, h2, h3, h4,
       main li:not(section[data-list] li, #chapters li, nav li)):not(:lang(bn))
    :where(span, a, em, i, strong, b, q, cite, dfn, abbr, mark, small,
           time, sup, sub, code, ins, del, s, u, bdi):lang(bn) {
    line-height: 1;
}


/* =====================================================
   RESET
   Zero every block margin and let text inherit one font,
   so spacing comes only from the rhythm below. Text uses
   old-style figures; labels and chrome sit on the snug
   line.
   ===================================================== */

: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(code, kbd, samp, pre, :lang(bn)) {
    font-size-adjust: none;
}

: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
   Block 1 is a running head: name and path on one line,
   a thin rule, the rooms, a dotted rule. Block 2 is the
   title, then one line where the kicker runs into the
   lede. Three spaces of paper sit above and below it.
   Then one space between everything, three above h2,
   two above h3, and less below a heading than above,
   so a heading belongs to its text.
   ===================================================== */

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

body > header > nav[aria-label="Primary"] {
    margin-block-start: var(--space-small);
    border-block-start: var(--rule-thin);
    border-block-end: var(--rule-thin);
    border-block-end-style: dotted;
}

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

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

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

article > header:has(+ details) {
    margin-block-end: var(--space);
}

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

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

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

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

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

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

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

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

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

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

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

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

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
   Hidden until a keyboard reaches it.
   ===================================================== */

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
   The rooms are full-height targets; the current one
   reads in ink with an underline, a cue beyond color.
   The path shows the name in ink, the steps in mute and
   the current step in ink without a line. Each link is
   24 px, and the row holds 44, so a wrapped path stays
   close. The contents list is numbered like a book's,
   with figures in a gutter; back matter has no number.
   ===================================================== */

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) var(--space-row);
}

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

nav[aria-label="Primary"] a[aria-current="page"] {
    color: var(--color-ink);
    text-decoration-line: underline;
    text-decoration-color: currentColor;
}

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

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

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

nav[aria-label="Breadcrumb"] [aria-current="page"] {
    color: var(--color-ink);
}

nav[aria-label="Breadcrumb"] a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: inherit;
}

body > header > nav[aria-label="Breadcrumb"] ol {
    min-block-size: var(--touch-size);
}

nav[aria-label="Breadcrumb"] :where(li:first-child) > a {
    color: var(--color-ink);
}

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

nav[aria-label="Table of contents"] {
    margin-block-start: 0;
    padding: 0;
    font-size: var(--text-small);
}

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

nav[aria-label="Table of contents"] > ol {
    counter-reset: toc;
}

nav[aria-label="Table of contents"] > ol > li:not([data-back]) {
    counter-increment: toc;
}

nav[aria-label="Table of contents"] a {
    position: relative;
    display: block;
    padding-inline-start: var(--space-row);
    color: inherit;
    text-decoration-line: none;
}

nav[aria-label="Table of contents"] > ol > li:not([data-back]) > a::before {
    content: counter(toc);
    position: absolute;
    inset-inline-start: 0;
    inline-size: var(--space);
    color: var(--color-note);
    font-variant-numeric: oldstyle-nums tabular-nums;
    text-align: right;
}

nav[aria-label="Table of contents"] li li > a {
    padding-inline-start: calc(var(--space-row) + var(--space));
}

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-path: inset(50%);
    white-space: nowrap;
}


/* =====================================================
   LINKS
   What turns accent under the hand can be clicked. A link
   in running text carries a line at rest; a link by
   place, like a menu or a list title, carries none.
   A visited link keeps its color; only its line goes
   mute, so a list read twice still looks like one list. The section mark after a
   heading waits for the hand or the keyboard; on touch
   screens it stays faint.
   ===================================================== */

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

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

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

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;
    font-variant-caps: normal;
    letter-spacing: 0;
    text-decoration: none;
    user-select: none;
}

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, :focus-within) > a.zola-anchor {
    color: var(--color-accent);
}

@media (hover: hover) {
    a.zola-anchor {
        opacity: 0;
    }

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


/* =====================================================
   HEADINGS
   Only the title grows. Each level has one voice: h2 in
   small caps, h3 in italic, h4 in mute, all at text size.
   Titles and headings are lowercase on screen; the source
   keeps its capitals. Bangla has neither case nor italic,
   so space alone sets its headings apart.
   ===================================================== */

h1 {
    max-width: var(--width-title);
    color: var(--color-note);
    font-size: var(--text-large);
    font-variant-numeric: oldstyle-nums proportional-nums;
    line-height: var(--line-tight);
}

h1,
h3,
h4,
nav[aria-label="Table of contents"] a,
body > header > nav[aria-label="Breadcrumb"],
section[data-list] > ul > li > :where(a, span),
#chapters ol > li > a,
nav[aria-label="Book"] > a > span {
    text-transform: lowercase;
}

h2 {
    color: var(--color-note);
    font-variant-caps: all-small-caps;
    font-variant-numeric: oldstyle-nums;
    letter-spacing: calc(var(--ana) * 0.75);
    line-height: var(--line-snug);
}

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

h3 {
    font-style: italic;
}

h3 :where(em, i, cite, dfn, var) {
    font-style: normal;
}

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

h2:lang(bn) {
    letter-spacing: 0;
}


/* =====================================================
   QUIET TEXT
   The mute voice: the line under the title, dates and
   labels. The kicker is small caps at text size. Bold or
   italic, never both. Acronyms are small caps at the
   height of the text, upright and in capitals even inside
   an italic or lowercase heading. Bangla emphasis
   speaks in the note ink, never in weight: one drawn
   weight, no fake bold, no box. Struck text is announced to screen readers and
   hidden from the eye.
   ===================================================== */

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

[data-role="kicker"] {
    color: var(--color-note);
    font-variant-caps: all-small-caps;
    letter-spacing: calc(var(--ana) * 0.75);
}

[data-role="kicker"]:lang(bn) {
    font-variant-caps: normal;
    letter-spacing: 0;
}

mark {
    background: var(--color-tint);
    color: inherit;
}

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

:where(strong, b) :where(em, i, cite, dfn, var),
:where(em, i, cite, dfn, var) :where(strong, b) {
    font-weight: normal;
}

abbr {
    font-variant-caps: all-small-caps;
    font-variant-numeric: oldstyle-nums;
    letter-spacing: calc(var(--ana) * 0.5);
}

:where(h3, h4, em, i, cite) abbr {
    font-style: normal;
    text-transform: none;
}

abbr:lang(bn) {
    font-variant-caps: normal;
    letter-spacing: 0;
}

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

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

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

del::before,
del::after {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    user-select: none;
}

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

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);
    font-variant-numeric: lining-nums tabular-nums;
}


/* =====================================================
   DATA LISTS
   Index rows: title, a dotted leader, label, on one
   baseline even when a title wraps. Cards: a title with
   a note under it. The whole row is the target, for a
   tired or shaking hand, and it answers with color
   alone: no box. Visited rows go mute. A shelf line
   opens with its label in ink italic.
   ===================================================== */

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

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

section[data-list] > ul > li,
#chapters ol > li {
    position: relative;
}

section[data-list] > ul > li > a::before,
#chapters ol > li > a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
}

section[data-list] > ul > li,
#chapters ol > li {
    isolation: isolate;
}

section[data-list] a,
nav[aria-label="Table of contents"] a,
nav[aria-label="Book"] a {
    -webkit-user-drag: none;
}

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

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 {
    color: var(--color-accent);
}

section[data-list="index"] > ul > li:is(:hover, :focus-within)::after {
    border-block-end-color: var(--color-accent);
}

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

section[data-list] > h2 + p > em:first-child {
    color: var(--color-ink);
}

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;
    align-content: center;
    min-height: var(--touch-size);
}

section[data-list="index"] > ul > li:has(> :is(time, small))::after {
    content: "";
    grid-row: 1;
    grid-column: 2;
    align-self: baseline;
    margin-block-end: calc(var(--ana) * 4);
    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;
}

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

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(--gap-tap);
    font-size: inherit;
    line-height: var(--line-snug);
}

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

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

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

section[data-list="cards"] > ul > li > a {
    text-decoration-line: underline;
}

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

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

section[data-list="cards"] > ul > li > a,
#chapters ol > li > a {
    align-self: flex-start;
}


/* =====================================================
   STREAM
   Seeds, newest first. Each date is a small mute dateline
   with a thin rule above.
   ===================================================== */

section[data-stream] > h2 {
    color: var(--color-mute);
    font-size: var(--text-small);
    font-variant-caps: normal;
    letter-spacing: 0;
    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
   A thick rule on the left, text in mute.
   ===================================================== */

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
   Inline code sits on a faint tint; a code block sits
   between two thick rules, without the tint.
   ===================================================== */

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

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;
    background: none;
    font-size: inherit;
}


/* =====================================================
   ARROWS
   One drawn arrow, turned: out of the site, on, back and
   up. The path keeps its slash: a path, not a motion.
   ===================================================== */

main a[href^="http"]:not([href^="https://ishtiaquezico.com"], [href^="http://ishtiaquezico.com"], [href^="http://127.0.0.1"], [href^="http://localhost"]):not(:has(img, svg, picture))::after,
[data-arrow] {
    content: "";
    display: inline-block;
    inline-size: 0.55em;
    block-size: 0.55em;
    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;
}

main a[href^="http"]:not([href^="https://ishtiaquezico.com"], [href^="http://ishtiaquezico.com"], [href^="http://127.0.0.1"], [href^="http://localhost"]):not(:has(img, svg, picture))::after {
    margin-inline-start: 0.2em;
}

[data-arrow] {
    margin-inline: 0.1em;
}

[data-arrow="right"] { rotate: 45deg; }
[data-arrow="left"]  { rotate: -135deg; }
[data-arrow="up"]    { rotate: -45deg; }


/* =====================================================
   TIME AND TABLE
   Booktabs: thick rules outside, a thin rule under the
   head, none between rows. Column labels are mute. A row
   under the hand takes a faint wash, the one guide a
   table needs across its width.
   ===================================================== */

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

[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);
    color: var(--color-mute);
}

@media (hover: hover) {
    tbody tr:hover {
        background: color-mix(in srgb, var(--color-tint) 50%, transparent);
    }
}


/* =====================================================
   MEDIA
   Charts are inline SVG line art in the current color,
   so they follow the ink in every mode.
   ===================================================== */

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

figure {
    margin-inline: 0;
}

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

figure > svg text {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

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

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


/* =====================================================
   DETAILS
   A plus that turns to a minus, in a fixed slot.
   ===================================================== */

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: calc(var(--ana) * 12);
    color: inherit;
    line-height: 1;
}

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

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


/* =====================================================
   BOOK
   A series reads as a book: contents by part, previous on
   the left, next on the right.
   ===================================================== */

nav[aria-label="Book"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space);
    margin-block-start: var(--space-huge);
}

nav[aria-label="Book"] > a {
    display: block;
    min-height: var(--touch-size);
    line-height: var(--line-snug);
    text-decoration-line: none;
}

nav[aria-label="Book"] > a + a {
    text-align: end;
}

nav[aria-label="Book"] small {
    display: block;
    margin-block-end: var(--gap-tap);
    color: var(--color-mute);
    font-size: var(--text-small);
}

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

nav[aria-label="Contents"] > section + section {
    margin-block-start: var(--space-large);
}

nav[aria-label="Contents"] > section > p + ul {
    margin-block-start: var(--space);
}


/* =====================================================
   HORIZONTAL RULE
   Three asterisks, centered, as typed in Markdown.
   ===================================================== */

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

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


/* =====================================================
   DEFINITION LISTS
   In text: the term in ink, the meaning in mute. In the
   record at the foot of a page: label left, value right,
   and the citation on its own line, easy to copy.
   ===================================================== */

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

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;
    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;
    gap: var(--space-small) var(--space);
}

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

footer[aria-label="Document metadata"] dt {
    text-align: left;
}

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

body > footer a {
    text-decoration-line: none;
}

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


/* =====================================================
   ENDNOTES
   Endnotes, never footnotes. The reference is a raised
   figure in accent with a wide tap area. Note numbers are
   mute; the note I came to turns accent, with its rule.
   The way back is an up arrow at the end of the note.
   ===================================================== */

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

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

sub {
    bottom: -0.25em;
}

sup a {
    position: relative;
    padding-inline: var(--gap-tiny);
    color: var(--color-accent);
    text-decoration: none;
}

sup a::before {
    content: "";
    position: absolute;
    inset: calc(var(--gap-tap) * -1);
}

sup a:hover,
sup a:focus-visible,
sup:target > a,
sup a:target {
    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);
}

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);
    font-variant-numeric: lining-nums tabular-nums;
    position: absolute;
    inset-block-start: var(--space-small);
    inset-inline-start: var(--space-small);
    color: var(--color-note);
}

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

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

article li[id^="fn-"] a[href*="#fr-"] {
    position: relative;
    margin-inline-start: var(--gap-marker);
    color: var(--color-mute);
    text-decoration: none;
}

article li[id^="fn-"] a[href*="#fr-"]::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    width: var(--touch-size);
    height: var(--touch-size);
    translate: 0 -50%;
}

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


/* =====================================================
   SITE FOOTER
   The running head, mirrored: dotted rule above, thin
   rule below; the place on the left, the years on the
   right.
   ===================================================== */

body > footer {
    margin-block-start: var(--space-huge);
    padding-block: var(--space-small);
    border-block-start: var(--rule-thin);
    border-block-start-style: dotted;
    border-block-end: var(--rule-thin);
    font-size: var(--text-small);
    line-height: var(--line-snug);
}

body > footer > p {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-small) var(--space);
}


/* =====================================================
   SMALL SCREENS (36rem and below)
   The edge narrows, English may hyphenate (Bangla never
   breaks), index rows stack without a leader, and the
   record goes to one column.
   ===================================================== */

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

    :where(p, li, dd, blockquote, figcaption):lang(en) {
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 6 3 3;
    }

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

    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
   Thicker underlines and focus rings; in dark mode, white
   ink.
   ===================================================== */

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

    @media (prefers-color-scheme: dark) {
        :root {
            --color-ink:  #FFFFFF;
            --color-mute: #CCCCCC;
            --color-note: #FFF;
        }
    }

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


/* =====================================================
   PRINT
   Black on white, no chrome. External links print their
   address, since paper cannot click.
   ===================================================== */

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

    :root {
        --color-ink:    #000;
        --color-mute:   #444;
        --color-note:   #000;
        --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;
    }

    main a[href^="http"]:not([href^="https://ishtiaquezico.com"], [href^="http://ishtiaquezico.com"], [href^="http://127.0.0.1"], [href^="http://localhost"]):not(:has(img, svg, picture))::after {
        content: " (" attr(href) ")";
        display: inline;
        margin: 0;
        vertical-align: baseline;
        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;
    }

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