/* ==========================================================================
   Brass Tacks — stylesheet
   Tokens first; everything else references them.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Colors: dark blue on light blue, with brass/gold accents */
  --color-bg: #ebeef4;
  --color-bg-2: rgba(23, 80, 172, 0.06);
  --color-bg-3: rgba(23, 80, 172, 0.13);
  --color-text: #111318;
  --color-muted: #59627a;
  --color-rule: rgba(17, 19, 24, 0.14);
  --color-accent: #86cefa;
  --color-accent-2: #1750ac;
  --color-gold: #d09a14;
  --color-gold-dark: #b8860b;
  --color-selection: rgba(56, 150, 255, 0.45);

  /* Typography */
  --font-serif: "Iowan Old Style", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-body: 1.085rem;
  --leading-body: 1.6;

  /* Layout */
  --measure: 42rem;
  --gutter: 1.25rem;
  --col-gap: 2.5rem;
  --toc-w: 17.5rem;

  /* 4px scale */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-32: 128px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #13171f;
  --color-bg-2: rgba(143, 184, 255, 0.10);
  --color-bg-3: rgba(143, 184, 255, 0.20);
  --color-text: #e6e8ee;
  --color-muted: #9aa3b8;
  --color-rule: rgba(230, 232, 238, 0.16);
  --color-accent: #86cefa;
  --color-accent-2: #8fb8ff;
  --color-gold: #e2b350;
  --color-gold-dark: #d9a63a;
  --color-selection: rgba(56, 150, 255, 0.55);
}

/* ---- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
::selection { background: var(--color-accent-2); color: var(--color-bg); } /* dark blue, like link hover */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
a { color: var(--color-accent-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; transition: background-color 0.15s ease, color 0.15s ease; }
a:hover { background-color: var(--color-accent-2); color: var(--color-bg); }
img { max-width: 100%; height: auto; }
.skip-link { font-family: var(--font-sans); position: absolute; left: -999px; top: var(--space-2); background: var(--color-accent-2); color: var(--color-bg); padding: var(--space-2) var(--space-3); z-index: 200; }
.skip-link:focus { left: var(--space-2); }
.mark { color: var(--color-accent-2); }

/* ---- page grid ------------------------------------------------------------
   Geometry copied from esoteric-arcana: below 900px one column; from 900px the
   text column starts at 22.5vw + 96px and is 55% of a container capped at
   1400px (so it grows with the window), sidenotes sit at 115% of the text width
   and are half as wide (110% / 40% up to 1200px), and the outline hugs the left
   edge at 3.75vw.                                                             */
.page {
  display: grid;
  grid-template-columns: minmax(var(--gutter), 1fr) [content-start] minmax(0, var(--measure)) [content-end] minmax(var(--gutter), 1fr);
}
.article { grid-column: content; min-width: 0; }
.toc, .margin-probe { display: none; }
@media (min-width: 900px) {
  :root {
    --container-w: min(1400px, 77.5vw);
    --content-w: calc((var(--container-w) - 116px) * 0.55);
    --content-x: calc(22.5vw + 96px);
    --note-gap: 0.15;
    --note-w: 0.5;
  }
  /* Below 1440px the left margin gives way first (down to 9rem) while the text column
     holds at least 30rem and sidenotes at least 8rem; the 2.96:1 split of spare space
     between the left margin and the right gutter is what esoteric's formula gives at 1440px,
     so the two rules meet without a jump. */
  .page {
    grid-template-columns:
      3.75vw
      [toc-start] minmax(9rem, 2.96fr) [toc-end]
      2rem
      [content-start] minmax(30rem, var(--content-w)) [content-end]
      max(1.5rem, calc(var(--content-w) * var(--note-gap)))
      [margin-start] minmax(8rem, calc(var(--content-w) * var(--note-w))) [margin-end]
      minmax(var(--gutter), 1fr);
  }
  .toc { display: block; grid-column: toc; grid-row: 1; }
  .margin-probe { display: block; grid-column: margin; grid-row: 1; }
}
@media (min-width: 1440px) {
  /* Esoteric-arcana's exact geometry. */
  .page {
    grid-template-columns:
      3.75vw
      [toc-start] calc(var(--content-x) - 3.75vw - 2rem) [toc-end]
      2rem
      [content-start] var(--content-w) [content-end]
      calc(var(--content-w) * var(--note-gap))
      [margin-start] calc(var(--content-w) * var(--note-w)) [margin-end]
      minmax(0, 1fr);
  }
}
@media (min-width: 900px) and (max-width: 1200px) {
  :root { --note-gap: 0.10; --note-w: 0.40; }
}

/* ---- site bar / footer ---------------------------------------------------- */
.site-bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--gutter);
}
.wordmark { font-family: var(--font-serif); font-size: 1.2rem; color: var(--color-text); text-decoration: none; letter-spacing: 0.005em; }
.wordmark .mark { margin-right: 0.25em; }
/* From 900px the wordmark sits exactly where the outline's title appears once you scroll:
   48px down, ◈ in the outline's marker column at 3.75vw, the name 2rem further right,
   at the outline title's size. */
@media (min-width: 900px) {
  .wordmark {
    position: absolute; top: var(--space-12); left: 3.75vw; z-index: 5;
    display: grid; grid-template-columns: 2rem auto; align-items: center;
    font-size: 1.65rem; line-height: 1.2; letter-spacing: 0; white-space: nowrap;
  }
  .wordmark .mark { font-size: 1.15rem; line-height: 1; }   /* centred on the name; the outline's marker stays 0.8rem */
}
.wordmark:hover { background: none; color: var(--color-accent-2); }
.site-nav { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
.site-nav a { font-family: var(--font-sans); font-size: 0.95rem; color: var(--color-muted); text-decoration: none; padding: var(--space-2) 0; }
.site-nav a:hover { background: none; color: var(--color-accent-2); text-decoration: underline; }
.theme-toggle {
  width: 2.5rem; height: 2.5rem; border: 1px solid var(--color-rule); border-radius: 0;
  background: transparent; color: var(--color-text); font: inherit; font-size: 1.05rem; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { border-color: var(--color-accent-2); color: var(--color-accent-2); }
.theme-toggle svg { display: block; }
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: block; }
[data-theme="dark"] .theme-toggle .moon { display: none; }
.site-footer {
  margin-top: var(--space-24); padding: var(--space-10) 0 var(--space-12);
  text-align: center; /* centred on the text column: the footer sits in the same page grid */ font-family: var(--font-sans); font-size: 0.85rem; color: var(--color-muted);
}
.site-footer p { margin: 0; }
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--color-bg); }
/* The footer diamond snaps π/4 clockwise when hovered and another π/4 when the pointer leaves. */
.footer-mark { display: inline-block; color: var(--color-accent-2); font-size: 6rem; line-height: 1; margin-bottom: var(--space-24); transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1); will-change: transform; }

/* ---- home ---------------------------------------------------------------- */
/* Esoteric-arcana's home page puts its title ~244px from the top; here that is the 72px
   site bar plus 172px. ~84px on phones. */
.masthead { padding: calc(var(--space-32) + var(--space-10) + var(--space-1)) 0 70px; } /* 70px below the tagline (+14px row padding = 84px, 1.2× the previous 70px) */
@media (max-width: 899px) { .masthead { padding-top: var(--space-3); } }
.masthead--section .site-title { font-size: 3.25rem; }
.masthead--section .tagline { font-size: 1.35rem; }
/* Collapsible sections synced from Notion toggles */
.content details { margin: 0 0 var(--space-4); }
.content summary { cursor: pointer; }
.content summary > h1, .content summary > h2, .content summary > h3 { display: inline; margin: 0; }
.content details > :not(summary) { margin-left: 1.1em; }
.content details[open] > summary { margin-bottom: var(--space-3); }
.content video, .content audio { display: block; max-width: 100%; margin: var(--space-6) auto; }
.site-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: min(5rem, 15vw); line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; /* always one line */
  margin: 0 0 var(--space-5);
}
.tagline { font-family: var(--font-serif); font-style: italic; font-size: 1.75rem; line-height: 1.3; color: var(--color-muted); margin: 0; }
/* Post list: year | date | title | reading time. One grid for the whole index (each year is a
   subgrid). The title column is fluid; the times form their own left-aligned column 4rem past
   the right edge of the text column, never closer than 64px to the titles. The date column is
   wide enough that a date sits 64px from its title too. The year appears once, beside its
   first post. */
.post-index { display: grid; grid-template-columns: 4.5rem 5.7rem minmax(0, 1fr) max-content; column-gap: var(--space-4); }
.post-list { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-rows: repeat(var(--rows, 1), auto); grid-auto-flow: dense; align-items: baseline; list-style: none; margin: 0; padding: 0; }
.post-list + .post-list { margin-top: 56px; } /* + the two 14px row paddings = 84px between years */
.post-list > li, .post-list > li > .row { display: contents; }
.post-list .row { color: inherit; text-decoration: none; }
.post-list .yr, .post-list .date, .post-list .title, .post-list .rt { padding: 14px 0; }
/* The year spans its whole group and sticks near the top of the window while the group scrolls by. */
.post-list .yr { grid-column: 1; grid-row: 1 / -1; align-self: start; justify-self: start; position: sticky; top: var(--space-6); padding-top: 22px; /* lines its text up with the baseline-aligned date */ font-family: var(--font-sans); font-size: 0.85rem; color: var(--color-muted); }
/* Highlights sit on inline spans (.hl, .t) so they hug the text, not the cell padding. */
.post-list .yr:hover .hl { background: var(--color-accent-2); color: var(--color-bg); }
.post-list .date { grid-column: 2; justify-self: start; font-family: var(--font-sans); font-size: 0.85rem; color: var(--color-muted); }
.post-list .title { grid-column: 3; font-family: var(--font-sans); font-size: 1.44rem; line-height: 1.35; color: var(--color-text); }
.post-list .t { box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* Controls under the tagline: "View all / favorites. Turn on / off previews." */
.view-controls { margin: var(--space-5) 0 0; font-family: var(--font-sans); font-size: 0.95rem; color: var(--color-muted); }
.view-controls .opt { background: none; border: 0; padding: 0 0.15em; margin: 0; font: inherit; color: var(--color-accent-2); text-decoration: underline; text-underline-offset: 0.14em; cursor: pointer; }
.view-controls .opt:hover { background: var(--color-accent-2); color: var(--color-bg); }
.view-controls .opt.is-on { background: var(--color-accent-2); color: var(--color-bg); text-decoration: none; cursor: default; }
.post-index[data-view="favorites"] .post-list > li:not(.is-favorite) { display: none; }
.post-list.is-empty { display: none; }
.post-list.first-visible { margin-top: 0; }
/* Previews are the post's own rendered opening (they carry the .content class, so they look
   like the body text), clipped to ten lines with a fade. */
.post-list .preview { --pl: calc(0.8 * var(--leading-body) * var(--text-body)); display: none; margin-top: var(--space-3); font-family: var(--font-serif); font-size: calc(0.8 * var(--text-body)); line-height: var(--leading-body); color: var(--color-text); max-height: var(--reveal, var(--trim, calc(10 * var(--pl)))); transition: max-height 0.08s linear, margin-bottom 0.08s linear; overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 1.1 * var(--pl)), transparent); mask-image: linear-gradient(#000 calc(100% - 1.1 * var(--pl)), transparent); /* fade spans the last 1.1 lines */ }
.post-index[data-previews="on"] .preview { display: block; }
/* Three lines of space are reserved below every preview, so the start of an unroll doesn't move
   anything else. Dwell (site.js): after a second of hovering, the preview unrolls up to thirty
   lines, one line at a time: each line loads in as the fade lifts off it, then a pause.
   The reserved space is used first; leaving freezes it. */
.post-index[data-previews="on"] .preview { margin-bottom: calc(3 * var(--pl)); }
/* Title highlight blink when an unroll reaches the limit (site.js toggles the class). */
.post-list .row:hover .t.flash-off { background: transparent; color: var(--color-text); }
@media (hover: none), (max-width: 899px) {
  /* Phones and touch screens: no unrolling at all, and none of the space reserved for it. */
  .post-index[data-previews="on"] .preview { margin-bottom: 0 !important; }
  /* Belt and braces: whatever the desktop unroll script sets inline, a phone preview stays at
     its ten lines (or the heading trim), with no transition or per-line reveal. */
  .post-list .preview { max-height: var(--trim, calc(10 * var(--pl))) !important; height: auto !important; transition: none !important; }
  .post-list .preview.is-dwelling { transition: none !important; }
  .post-list .preview-inner { transition: none !important; animation: none !important; transform: none !important; }
  /* The fade at the bottom of a preview spans its last two and a half lines. */
  .post-list .preview { -webkit-mask-image: linear-gradient(#000 calc(100% - 2.5 * var(--pl)), transparent); mask-image: linear-gradient(#000 calc(100% - 2.5 * var(--pl)), transparent); }
}
.post-index[data-previews="on"] .title { padding-bottom: 20px; } /* 34px preview-to-next-title, 1.2× the usual 28px row gap */
.post-list .preview-inner > :last-child { margin-bottom: 0; }
.post-list .preview-inner { overflow: hidden; }
/* Headings inside a preview: 0.9x the index title size, with preview-scale spacing. */
.post-list .preview h1, .post-list .preview h2, .post-list .preview h3, .post-list .preview h4 { font-size: calc(0.85 * 1.44rem); margin: 1em 0 0.35em; }
/* Quotes inside a preview shrink with the preview (0.8x), padding and spacing included. */
.post-list .preview blockquote { font-size: calc(0.8 * 0.99rem); margin: calc(0.8 * var(--space-6)) 0; padding: calc(0.8 * var(--space-3)) calc(0.8 * var(--space-5)); }
.post-list .preview blockquote p { margin-bottom: calc(0.8 * var(--space-3)); }
.post-list .rt { grid-column: 4; justify-self: start; padding-left: 3rem; /* with the 16px column gap: ≥64px from the titles */ font-family: var(--font-sans); font-size: 0.85rem; color: var(--color-muted); white-space: nowrap; }
.post-list .row:hover .date .hl, .post-list .row:hover .rt .hl, .post-list .row:hover .t { background: var(--color-accent-2); color: var(--color-bg); }
/* The year label lives in the first row of its group but lights up for any row of that year. */
.post-list:has(.row:hover) .yr .hl { background: var(--color-accent-2); color: var(--color-bg); }
/* Hovering the year itself: year in dark blue, every post of that year in ice blue. */
.post-list:has(.yr:hover) .row .date .hl, .post-list:has(.yr:hover) .row .rt .hl, .post-list:has(.yr:hover) .row .t { background: var(--color-accent); color: #111318; }
@media (max-width: 899px) {
  /* Phones: one line of year · date · minutes, then the title on the next line, starting
     under the date and running to the right edge. */
  .post-index { grid-template-columns: 3.5rem auto 1fr; }
  .post-list { grid-template-rows: repeat(calc(2 * var(--rows, 1)), auto); }
  .post-list .date, .post-list .rt { padding-bottom: 2px; }
  .post-list .rt { grid-column: 3; padding-left: 0; padding-right: var(--space-3); justify-self: end; text-align: right; } /* mirrors the date, a little in from the right edge */
  .post-list .title { grid-column: 2 / -1; padding-top: 2px; }
}
@media (min-width: 900px) {
  /* Year and date hang in the margin; titles align with the site title and tagline. */
  .post-index { margin-left: calc(-10.2rem - 2 * var(--space-4)); margin-right: -4rem; } /* year + date hang left; minutes sit 4rem beyond the text column's right edge */
}

/* ---- post header / footer ------------------------------------------------- */
/* Esoteric-arcana spacing: title ~212px from the top of the page on desktop (here: the
   72px site bar + 140px), ~84px on phones; 56px between the badges and the text. */
.post-header { margin: calc(var(--space-32) + var(--space-3)) 0 var(--space-14); }
.page--simple .post-header { margin-bottom: var(--space-8); }
@media (max-width: 899px) { .post-header { margin-top: var(--space-3); } }
/* Sizes copied from esoteric-arcana (h0 / sub1). There the title box is 77% and the
   subtitle 69.3% of a container 1.4× wider than the text column, so on desktop they
   overhang the text column: 140% and 126% of it. */
.post-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 5rem; line-height: 1.1; letter-spacing: -0.02em;
  margin: 0 0 23px; /* 12px of visible space to the subtitle, as on esoteric-arcana */
}
.post-subtitle { font-family: var(--font-serif); font-style: italic; font-size: 1.75rem; line-height: 1.3; color: var(--color-muted); margin: 0 0 26px; /* 25px of visible space to the badges, as on esoteric-arcana */ }
@media (min-width: 900px) {
  .post-title { width: 140%; }
  .post-subtitle { width: 126%; }
}
@media (max-width: 600px) {
  .post-title { font-size: 3.25rem; }
}
.post-meta { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; font-family: var(--font-sans); font-size: 0.83rem; line-height: 1; }
.badge { display: inline-block; padding: 0 var(--space-2); height: var(--space-6); line-height: calc(var(--space-6) - 2px); background: var(--color-bg-2); color: var(--color-accent-2); border-radius: 0; white-space: nowrap; }
.badge a { color: inherit; }
.badge a:hover { color: var(--color-bg); }
.badge time { font: inherit; }
.post-footer { margin-top: 0; }
/* The ∎ ends a post like the tombstone at the end of a proof: left-aligned, one paragraph below the last line. */
.post-end { text-align: left; color: var(--color-accent-2); font-size: 1.1rem; line-height: var(--leading-body); margin: 0 0 var(--space-8); }
.sendoff { font-style: italic; margin: 0 0 var(--space-4); } /* body text, just italic */
/* Older · Random · Newer, styled like the home page list: sans titles whose hover highlight
   hugs the text. No rule above; 128px below the sign-off (with its 16px paragraph margin). */
.post-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-6); align-items: start; margin-top: 112px; }
.post-nav .random { text-align: center; }
/* "Previous" / "Next" sit flush with the body text, "Random" between them in the same style. Hovering one reveals a preview
   (title, date, reading time) out in the margin: on the left in line with the outline text,
   on the right mirrored at the same distance. site.js measures --peek-offset / --peek-w. */
.post-nav { --peek-offset: 20rem; --peek-w: 15rem; }
.post-nav .prev a, .post-nav .next a, .post-nav .random a { position: relative; display: inline-block; font-family: var(--font-sans); font-size: 1.2rem; line-height: 1.35; color: var(--color-text); text-decoration: none; }
.post-nav .prev a:hover, .post-nav .next a:hover, .post-nav .random a:hover { background: none; color: var(--color-text); }
.post-nav .hl { box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.post-nav a:hover .hl { background: var(--color-accent-2); color: var(--color-bg); }
.post-nav .next { text-align: right; }
.post-nav .peek { position: absolute; top: 0; width: var(--peek-w); text-align: left; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.post-nav .prev .peek { left: calc(-1 * var(--peek-offset)); }
.post-nav .next .peek { left: calc(100% + var(--peek-offset) - var(--peek-w)); }
.post-nav a:hover .peek { opacity: 1; }
.post-nav .peek-title { display: block; font-size: 1.2rem; line-height: 1.35; color: var(--color-text); }
.post-nav .peek-meta { display: block; margin-top: var(--space-1); font-size: 0.85rem; line-height: 1.3; color: var(--color-muted); }
.post-nav .peek-meta + .peek-meta { margin-top: 0; }
@media (max-width: 899px) {
  /* No margins on phones: the preview just sits under the label, always visible. */
  .post-nav .peek { position: static; display: block; width: auto; opacity: 1; margin-top: var(--space-1); }
  .post-nav .next .peek { text-align: right; }
  .post-nav .peek-title { font-size: 1rem; }
}
@media (max-width: 600px) { .post-nav { grid-template-columns: 1fr; } .post-nav .next { text-align: left; } .post-nav .random { text-align: left; } }

/* ---- content typography --------------------------------------------------- */
.content { position: relative; overflow: visible; counter-reset: sidenote-counter; }
.content > :first-child { margin-top: 0; }
.content p { margin: 0 0 var(--space-4); }
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { font-family: var(--font-serif); line-height: 1.15; margin: var(--space-6) 0 var(--space-3); }
.content h1 { font-size: 2.5rem; font-weight: 700; margin: var(--space-16) 0 var(--space-5); }
.content h2 { font-size: 1.8rem; font-weight: 400; }
.content h3 { font-size: 1.5rem; font-weight: 400; font-style: italic; }
.content h4 { font-size: 1rem; font-weight: 700; }
.content h1 a, .content h2 a, .content h3 a { color: inherit; text-decoration: none; }
.content ul, .content ol { margin: 0 0 var(--space-4); padding-left: 1.6em; }
.content li { margin-bottom: var(--space-2); }
.content li > p { margin-bottom: var(--space-2); }
.content li > ul, .content li > ol { margin-top: var(--space-2); }
.content ul { list-style: none; }
.content ul > li { position: relative; }
.content ul > li::before { content: "⬘"; position: absolute; left: -1.35em; top: 0; color: var(--color-muted); }
.content ul ul > li::before { content: "⬗"; }
.content ul ul ul > li::before { content: "⬙"; }
.content ul ul ul ul > li::before { content: "⬖"; }
.content ul ul ul ul ul > li::before { content: "⬘"; }
.content ol { list-style: decimal; }
.content ol ol { list-style: lower-alpha; }
.content blockquote {
  font-family: var(--font-sans); font-size: 0.99rem; line-height: 1.55;
  margin: var(--space-6) 0; padding: var(--space-3) var(--space-5);
  background: var(--color-bg-2); border: 1px solid var(--color-accent-2);
}
.content blockquote > :last-child { margin-bottom: 0; }
.content blockquote p { margin-bottom: var(--space-3); }
.content blockquote ul, .content blockquote ol { margin-bottom: var(--space-3); }
.content hr { border: 0; height: auto; margin: var(--space-10) 0; text-align: center; }
.content hr::before { content: "◈"; color: var(--color-accent-2); font-size: 1.2rem; }
/* Iowan's bold face with a very fine extra stroke (about 0.9× the earlier thickening). */
.content strong, .content b { font-weight: 700; -webkit-text-stroke: 0.01em currentColor; }
.content ins { text-decoration: underline; }
.content s { text-decoration: line-through; text-decoration-thickness: 1px; }
.content mark { background: var(--color-selection); color: inherit; }
.content code, .content pre { font-family: var(--font-mono); font-size: 0.92em; }
.content code { background: var(--color-bg-2); padding: 0.1em 0.35em; }
.content pre { background: var(--color-bg-2); padding: var(--space-4); overflow-x: auto; margin: 0 0 var(--space-4); }
.content pre code { background: none; padding: 0; }
.content table { border-collapse: collapse; width: 100%; margin: 0 0 var(--space-4); font-size: 1rem; }
.content th, .content td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-rule); vertical-align: top; }
.content th { font-weight: 600; }
.content img { display: block; margin: var(--space-6) auto; }
.content figure { margin: var(--space-8) 0; }
.content figure img { margin: 0 auto; }
.content figcaption { margin-top: var(--space-2); font-family: var(--font-sans); font-size: 0.92rem; line-height: 1.45; font-style: italic; color: var(--color-muted); }
.content figcaption strong { font-style: normal; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; margin: 0; border: 1px solid var(--color-rule); }
.callout { font-family: var(--font-sans); display: flex; gap: var(--space-3); align-items: flex-start; margin: var(--space-6) 0; padding: var(--space-3) var(--space-4); background: var(--color-bg-2); border-left: 3px solid var(--color-accent-2); }
.callout-emoji { flex: 0 0 auto; font-size: 1.2rem; line-height: 1.4; }
.callout-text { font-size: 1rem; }
.file-card { margin: var(--space-6) 0; }
.file-card a { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-accent-2); background: var(--color-bg-2); text-decoration: none; color: var(--color-text); }
.file-card a:hover { background: var(--color-accent-2); color: var(--color-bg); }
.file-card a:hover .file-card-meta { color: inherit; }
.file-card-title { font-family: var(--font-serif); font-size: 1.15rem; }
.file-card-caption { font-size: 0.98rem; }
.file-card-meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-muted); }

/* ---- sidenotes (markdown-it-sidenote) ------------------------------------ */
.sidelink { cursor: pointer; font-size: 0; counter-increment: sidenote-counter; padding: 20px 6px 6px; margin: -20px -6px -6px; }
.sidelink a { text-decoration: none; }
.sidelink a:hover { background: transparent; color: var(--color-accent-2); }
.sidelink a, .sidelink output { font-size: 1rem; }
.fnref { font-size: 0.75rem !important; vertical-align: super; line-height: 1; color: var(--color-accent-2); display: inline-flex; padding: 0 0.1em; transition: background-color 0.15s ease; }
.fnref.fnref-highlight { background-color: var(--color-bg-3); }
.fnref.fnref-flash { outline: 1px solid var(--color-accent-2); background-color: var(--color-accent-2); color: var(--color-bg); }
aside.sidenote {
  position: relative; font-family: var(--font-sans); font-size: 0.86rem; line-height: 1.45; color: var(--color-text);
  padding: var(--space-2); margin: var(--space-4) 0; opacity: 0.78;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
aside.sidenote.sidenote-highlight, aside.sidenote.sidenote-highlight-strong { background-color: var(--color-bg-2); opacity: 1; }
aside.sidenote.sidenote-highlight-strong .sidenote-num,
aside.sidenote.sidenote-highlight-strong > output > label > p::before { color: var(--color-bg); background-color: var(--color-accent-2); outline: 1px solid var(--color-accent-2); }
aside.sidenote p { margin: 0 0 var(--space-2); font-size: 0.86rem; }
aside.sidenote p:last-child { margin-bottom: 0; }
aside.sidenote > output > label > p::before { content: "[" counter(sidenote-counter) "]"; color: var(--color-accent-2); margin-right: 0.35em; transition: background-color 0.15s ease, color 0.15s ease; }
aside.sidenote[data-truncated] > output > label > p::before, aside.sidenote[data-numbered] > output > label > p::before { content: none; }
.sidenote-num { color: var(--color-accent-2); transition: background-color 0.15s ease, color 0.15s ease; }
aside.sidenote output { display: block; }
aside.sidenote label { cursor: default; }
.sidenote-backref { display: none; }
.sidenote-full { display: none; }
.sidenote-truncated { display: inline; }
aside.sidenote.sidenote-expanded .sidenote-full { display: inline; }
aside.sidenote.sidenote-expanded .sidenote-truncated { display: none; }
.sidenote-toggle { display: inline; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: 0.82rem; color: var(--color-accent-2); cursor: pointer; text-decoration: underline; }
/* Mobile: sidenotes collapse inline under their paragraph; tap the number to open */
@media (max-width: 899px) {
  aside.sidenote { display: none; margin: var(--space-2) 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-bg-2); opacity: 1; }
  aside.sidenote.sidenote-open { display: block; }
  .sidelink { padding: 12px 8px; margin: -12px -8px; }
}

/* ---- header viewer: table of contents (≥900px) ---------------------------
   Shows the full outline once the title has scrolled away; a ◈ slides to sit
   beside the section being read. Clicking an entry scrolls to it.                             */
.header-viewer { position: sticky; top: var(--space-12); }
.header-content { position: relative; max-width: var(--toc-w); }
.header-toc { position: relative; padding-left: 2rem; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; max-height: calc(100vh - var(--space-24)); overflow-y: auto; }
.header-box {
  font-family: var(--font-serif); font-size: 0.97rem; line-height: 1.35; color: var(--color-accent-2);
  padding: 0.35rem var(--space-1); margin: 0; cursor: pointer; max-width: 100%;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.header-box:hover { background-color: var(--color-accent-2); color: var(--color-bg); }
.header-box--h1 { margin-left: 0; font-size: 1.08rem; }
.header-box--h2 { margin-left: calc(var(--space-3) * 1.2); font-size: 0.97rem; }
.header-box--h3 { margin-left: calc(var(--space-6) * 1.2); font-size: 0.92rem; font-style: italic; }
.toc-marker {
  position: absolute; left: 0; top: 0; color: var(--color-accent-2); font-size: 0.8rem; line-height: 1;
  opacity: 0; pointer-events: none;
  transition: transform 0.3s ease, opacity 0.25s ease;
}
.toc-marker--on { opacity: 1; }
.header-box--title { font-size: 1.65rem; line-height: 1.2; margin: 0 0 var(--space-6); color: var(--color-text); padding: 0; }
.header-box--title:hover { background: transparent; color: var(--color-text); }

/* ---- misc ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print {
  .site-bar, .site-footer, .toc, .post-nav, .theme-toggle { display: none !important; }
  .page { display: block; }
  aside.sidenote { display: block !important; position: static !important; width: auto !important; }
}