/* =============================================================
   subjectsphinx.xyz
   One stylesheet. No dependencies. No build step.

   The contract: write plain semantic HTML and it comes out set
   properly. Classes are the escape hatch, not the requirement.

   Reach for a class only to break the column:
     class="wide"    — wider than the text measure
     class="bleed"   — edge to edge
     class="grid"    — gallery of images
     span.note       — margin note (sidenote)

   Or change the whole page from <body>:
     data-layout="text"   — reading column (default)
     data-layout="wide"   — roomier, for photo essays
     data-layout="bleed"  — no chrome, you own the viewport
     data-ground="dark"   — force dark surround, any theme
   ============================================================= */

/* --- 1. tokens ---------------------------------------------- */

:root {
  /* light: the flower of life. Vegetative, not white. */
  --paper:  #dce9ca;   /* new leaf */
  --raised: #cfe0b8;
  --ink:    #141f0e;   /* deep green-black, never pure black */
  --muted:  #47573c;
  --faint:  #75895f;
  --rule:   #bcd1a0;
  --accent: #2f6b23;   /* living green */
  --mat:    #cfe0b8;   /* the surround behind artwork */

  --measure: 58rem;    /* the reading column — the main knob. Roughly 95
                          characters: wide, but still a column. 46rem is
                          roomy, 40rem conventional, 34rem classic and
                          narrow. 200rem fills the window entirely. */
  --wide:    74rem;    /* outer bound: .wide elements and the site chrome */
  --gutter:  clamp(1rem, 5vw, 2.5rem);

  --serif: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino,
           "Noto Serif", Georgia, Cambria, serif;
  --sans:  system-ui, -apple-system, "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas,
           "DejaVu Sans Mono", monospace;

  color-scheme: light;
}

/* dark, from the OS — unless the reader has explicitly asked for light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:  #131312;
    --raised: #1b1b19;
    --ink:    #dbd7ce;
    --muted:  #908a80;
    --faint:  #6a655d;
    --rule:   #2b2a26;
    --accent: #d08b6a;
    --edge: url("media/edge-skull.png");   /* the ornament follows the theme */
    --mat:    #0d0d0c;
    color-scheme: dark;
  }
}

/* dark, because the reader pressed the button */
:root[data-theme="dark"] {
  --paper:  #131312;
  --raised: #1b1b19;
  --ink:    #dbd7ce;
  --muted:  #908a80;
  --faint:  #6a655d;
  --rule:   #2b2a26;
  --accent: #d08b6a;
  --edge: url("media/edge-skull.png");   /* the ornament follows the theme */
  --mat:    #0d0d0c;
  color-scheme: dark;
}

/* aether — a third ground, drawn from the colours of energeticfields */
:root[data-theme="aether"] {
  --paper:  #150c22;   /* deep violet-black */
  --raised: #1f1434;
  --ink:    #ece0f4;   /* pale lilac white */
  --muted:  #a692bd;
  --faint:  #7d6896;
  --rule:   #31214a;
  --accent: #ff9f62;   /* the warm flare at the centre of the plasma */
  --mat:    #0e0718;
  --edge: url("media/edge-energetic.png");
  --edge-opacity: 0.75;
  color-scheme: dark;
}

/* ember — the red hexagram mandala */
:root[data-theme="ember"] {
  --paper:  #170a0a;
  --raised: #231010;
  --ink:    #f3ded8;
  --muted:  #bd908a;
  --faint:  #8d6460;
  --rule:   #3a1a1a;
  --accent: #e5553f;
  --mat:    #100707;
  --edge: url("media/edge-red.png");
  --edge-opacity: 0.7;
  color-scheme: dark;
}

/* a single post can insist on a dark ground in either theme */
body[data-ground="dark"] {
  --paper:  #131312;
  --raised: #1b1b19;
  --ink:    #dbd7ce;
  --muted:  #908a80;
  --faint:  #6a655d;
  --rule:   #2b2a26;
  --accent: #d08b6a;
  --edge: url("media/edge-skull.png");   /* the ornament follows the theme */
  --mat:    #0d0d0c;
  color-scheme: dark;
}

/* --- 2. groundwork ------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.78;
  font-kerning: normal;
  font-variant-numeric: oldstyle-num;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 40rem) { body { font-size: 1.1875rem; } }

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- 3. the layout grid ------------------------------------- */
/* Children sit in the text column by default. .wide and .bleed
   opt out. This is the whole layout system.                   */

.prose {
  display: grid;
  /* The text column takes what it needs FIRST, and only shrinks to fit
     the screen. The side tracks get whatever is left over, down to
     nothing.

     Writing the text track as minmax(0, var(--measure)) instead lets the
     two side tracks claim up to 8rem each before the text is allowed to
     narrow -- which on a phone left about three words per line. */
  grid-template-columns:
    [full-start] var(--gutter)
    [wide-start] minmax(0, calc((var(--wide) - var(--measure)) / 2))
    [text-start] min(var(--measure), 100% - 2 * var(--gutter)) [text-end]
    minmax(0, calc((var(--wide) - var(--measure)) / 2)) [wide-end]
    var(--gutter) [full-end];
  justify-content: center;
  padding-block: clamp(2rem, 7vh, 5rem) clamp(3rem, 12vh, 7rem);
}
.prose > *            { grid-column: text; min-width: 0; }
.prose > .wide        { grid-column: wide; }
.prose > .bleed       { grid-column: full; }
.prose > .bleed-full  { grid-column: 1 / -1; }   /* ignores the gutter too */

body[data-layout="wide"] { --measure: 68rem; --wide: 84rem; }

/* --- 4. prose ----------------------------------------------- */

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(1.9rem, 5.5vw, 2.6rem); letter-spacing: -0.022em; }
h2 { font-size: 1.45rem; margin-block: 2.6em 0.6em; }
h3 { font-size: 1.15rem; margin-block: 2em 0.4em; font-weight: 650; }
h4 { font-size: 1rem; margin-block: 1.8em 0.3em; text-transform: uppercase;
     letter-spacing: .06em; font-size: .8125rem; color: var(--muted);
     font-family: var(--sans); }

p { margin: 0 0 1.15em; text-wrap: pretty; hyphens: auto; }
p:last-child { margin-bottom: 0; }

/* the opening paragraph, if you want it to carry */
.lede {
  font-size: 1.2em;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 1.6em;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.17em;
  text-decoration-color: color-mix(in oklab, var(--accent) 45%, transparent);
  transition: text-decoration-color .15s, color .15s;
}
a:hover { color: var(--accent); text-decoration-color: var(--accent); }

strong { font-weight: 650; }
em { font-style: italic; }
small { font-size: .8125rem; color: var(--muted); }
abbr[title] { text-decoration: underline dotted; cursor: help; }
mark { background: color-mix(in oklab, var(--accent) 20%, transparent); color: inherit;
       padding: .05em .2em; border-radius: 2px; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.4em; }
li { margin-bottom: .35em; }
li::marker { color: var(--faint); }
ul ul, ol ol, ul ol, ol ul { margin-top: .35em; margin-bottom: .35em; }

dl { margin: 0 0 1.15em; }
dt { font-weight: 650; margin-top: .8em; }
dd { margin: 0 0 0 1.4em; color: var(--muted); }

blockquote {
  margin: 1.8em 0;
  padding-left: 1.2em;
  border-left: 2px solid var(--rule);
  color: var(--muted);
  font-style: italic;
}
blockquote p:last-of-type { margin-bottom: 0; }
blockquote cite, blockquote footer {
  display: block;
  margin-top: .7em;
  font-style: normal;
  font-size: .8125rem;
  font-family: var(--sans);
  color: var(--faint);
}
blockquote cite::before, blockquote footer::before { content: "— "; }

/* a pull quote: large, unattributed, breaks the rhythm */
.pull {
  margin: 2.2em 0;
  font-size: 1.45em;
  line-height: 1.34;
  letter-spacing: -0.015em;
  color: var(--ink);
  border: 0;
  padding: 0;
  font-style: normal;
  text-wrap: balance;
}

/* a section break that isn't a line */
hr {
  border: 0;
  margin: 2.8em auto;
  width: 100%;
  text-align: center;
}
hr::after {
  content: "❊";
  color: var(--faint);
  font-size: .875rem;
  letter-spacing: .5em;
}
hr.rule::after { content: none; }
hr.rule { border-top: 1px solid var(--rule); margin-block: 2.4em; }

/* --- 5. margin notes ---------------------------------------- */
/* <span class="note">…</span> inside a paragraph. Floats into the
   margin when there's room, folds inline when there isn't.     */

.note {
  float: right;
  clear: right;
  width: 12rem;
  margin-right: -14rem;
  margin-bottom: .8em;
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
  font-style: normal;
  text-align: left;
  font-variant-numeric: normal;
}
.note.left { float: left; clear: left; margin-left: -14rem; margin-right: 0; }

@media (max-width: 68rem) {
  .note, .note.left {
    float: none; width: auto; margin: 1.1em 0;
    display: block;
    padding-left: .9em;
    border-left: 2px solid var(--rule);
  }
}

/* numbered footnotes, if you prefer them */
sup a { text-decoration: none; font-size: .7em; padding: 0 .1em; }
.footnotes {
  margin-top: 3.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: .875rem;
  color: var(--muted);
}
.footnotes ol { padding-left: 1.2em; }
.footnotes li { margin-bottom: .6em; }
.footnotes li:target { background: var(--raised); }

/* --- 6. pictures -------------------------------------------- */

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

figure { margin: 2.2em 0; }
figure img, figure video, figure canvas {
  width: 100%;
  border-radius: 2px;
  background: var(--mat);
}
figcaption {
  margin-top: .7em;
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
figcaption b, figcaption strong { color: var(--ink); font-weight: 550; }

/* bleed and wide figures sit on the mat, which reads as a frame */
.prose > figure.bleed, .prose > figure.bleed-full { margin-block: 3em; }
.prose > figure.bleed > img, .prose > figure.bleed-full > img { border-radius: 0; }
.prose > figure.bleed > figcaption,
.prose > figure.wide > figcaption {
  max-width: var(--measure);
  margin-inline: auto;
}

/* galleries. <div class="grid"> with figures or bare images inside. */
.grid {
  display: grid;
  gap: clamp(.5rem, 2vw, 1.1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin: 2.2em 0;
}
.grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.grid[data-cols="3"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.grid > figure { margin: 0; }
.grid img { width: 100%; }

/* mosaic: images keep their own aspect ratio, rows stay even */
.grid.mosaic { grid-auto-flow: dense; }
.grid.mosaic .tall { grid-row: span 2; }
.grid.mosaic .tall img { height: 100%; object-fit: cover; }


/* cards: a gallery where each picture is mounted and labelled, like work
   hung on a wall. <div class="cards"> with a <figure> per picture.
   Use .grid instead when you want the pictures to touch.               */
.cards {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin: 2.6em 0;
}
.cards > figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: clamp(.6rem, 2vw, 1rem);
  transition: border-color .18s ease, transform .18s ease;
}
.cards > figure:hover { border-color: var(--faint); transform: translateY(-2px); }
.cards > figure > img {
  width: 100%;
  border-radius: 1px;
  /* every card the same height, whatever the picture's shape */
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.cards > figure.tall  > img { aspect-ratio: 3 / 4; }
.cards > figure.wideimg > img { aspect-ratio: 4 / 3; }
/* .whole = show the entire picture, letterboxed, nothing cropped away */
.cards > figure.whole > img { aspect-ratio: auto; object-fit: contain; }
.cards figcaption {
  margin-top: .65em;
  padding-top: .55em;
  border-top: 1px solid var(--rule);
}
/* one card per row below the fold on a phone is too slow -- allow two */
@media (max-width: 34rem) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .cards > figure { padding: .4rem; }
  .cards figcaption { font-size: .68rem; }
}
/* images are clickable to zoom (see shell.js) */
.zoomable { cursor: zoom-in; }

/* --- 7. code ------------------------------------------------ */

code, kbd, samp {
  font-family: var(--mono);
  font-size: .86em;
  font-variant-numeric: normal;
}
:not(pre) > code {
  background: var(--raised);
  padding: .12em .35em;
  border-radius: 3px;
  border: 1px solid var(--rule);
}
pre {
  margin: 1.8em 0;
  padding: 1rem 1.1rem;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow-x: auto;
  font-size: .8125rem;
  line-height: 1.6;
  tab-size: 2;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }
kbd {
  background: var(--raised); border: 1px solid var(--rule);
  border-bottom-width: 2px; border-radius: 3px;
  padding: .1em .35em; font-size: .8em;
}

/* --- 8. tables ---------------------------------------------- */

table {
  width: 100%;
  margin: 2em 0;
  border-collapse: collapse;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}
th, td { padding: .5em .7em; text-align: left; border-bottom: 1px solid var(--rule); }
th {
  font-family: var(--sans); font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  border-bottom-color: var(--ink);
}
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }

/* --- 9. media ----------------------------------------------- */

audio { width: 100%; margin: 1.6em 0; }
video { border-radius: 2px; background: #000; }

/* a responsive embed: <div class="embed"><iframe …></div> */
.embed {
  position: relative;
  margin: 2.2em 0;
  aspect-ratio: 16 / 9;
  background: var(--mat);
  border-radius: 2px;
  overflow: hidden;
}
.embed > iframe, .embed > video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.embed[data-ratio="1"]   { aspect-ratio: 1; }
.embed[data-ratio="4:3"] { aspect-ratio: 4 / 3; }

/* a sandboxed toy. Give it room; let it be strange. */
.toy {
  margin: 2.4em 0;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: var(--raised);
}
.toy > iframe { width: 100%; border: 0; display: block; min-height: 24rem; }

details {
  margin: 1.4em 0;
  padding: .7em 1rem;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
details > summary {
  cursor: pointer; font-family: var(--sans); font-size: .875rem;
  font-weight: 550; color: var(--muted);
}
details[open] > summary { margin-bottom: .7em; color: var(--ink); }

/* --- 10. site chrome ---------------------------------------- */

.site {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  max-width: var(--wide);
  margin-inline: auto;
  padding: 1.6rem var(--gutter) 0;
  font-family: var(--sans);
  font-size: .8125rem;
}
.sigil {
  font-family: var(--serif);
  font-size: .9375rem;
  letter-spacing: .01em;
  text-decoration: none;
  font-weight: 550;
}
.sigil:hover { color: var(--accent); }
.site nav { display: flex; gap: 1rem; margin-left: auto; }
.site nav a { color: var(--muted); text-decoration: none; }
.site nav a:hover, .site nav a[aria-current] { color: var(--ink); }

.theme {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--muted); font: inherit; padding: 0 .1rem; line-height: 1;
}
.theme:hover { color: var(--ink); }

.site-foot {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 2rem var(--gutter) 3rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
}
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--accent); }

/* post masthead */
.prose > .meta, .postmeta {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .02em;
  margin-bottom: 2.4em;
  display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline;
}
.prose > h1 + .meta, .prose > h1 + .postmeta { margin-top: .7em; }
.kind {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--faint);
}

/* prev / next, injected by shell.js */
.seam {
  grid-column: text;
  margin-top: 4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr 1fr;
  font-family: var(--sans);
  font-size: .8125rem;
}
.seam a { text-decoration: none; color: var(--muted); display: block; }
.seam a:hover { color: var(--ink); }
.seam a span { display: block; font-size: .68rem; text-transform: uppercase;
                letter-spacing: .1em; color: var(--faint); margin-bottom: .3em; }
.seam a b { font-family: var(--serif); font-weight: 550; font-size: 1rem;
            color: var(--ink); text-wrap: pretty; }
.seam .next { text-align: right; }
@media (max-width: 36rem) { .seam { grid-template-columns: 1fr; } .seam .next { text-align: left; } }

/* --- 11. the feed (home) ------------------------------------ */

.feed { max-width: var(--wide); margin-inline: auto; padding: 0 var(--gutter); }

.intro {
  max-width: var(--measure);
  padding: clamp(2.5rem, 9vh, 5rem) 0 clamp(2rem, 6vh, 3.5rem);
}
.intro h1 {
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  margin-bottom: .6em;
}
.intro p { color: var(--muted); margin-bottom: 0; }

.entry {
  padding: 2.2rem 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0 2rem;
  align-items: baseline;
}
@media (max-width: 40rem) {
  .entry { grid-template-columns: 1fr; gap: .5rem; }
}
.entry > time {
  font-family: var(--sans);
  font-size: .75rem;
  color: var(--faint);
  letter-spacing: .03em;
  white-space: nowrap;
  padding-top: .45em;
}
.entry h2 {
  margin: 0 0 .25em;
  font-size: 1.3rem;
  letter-spacing: -0.015em;
}
.entry h2 a { text-decoration: none; }
.entry h2 a:hover { color: var(--accent); }
.entry p { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.entry .kind { display: block; margin-bottom: .45em; }

/* a note renders its whole self in the feed — no title, no click-through */
.entry.note-entry h2 { display: none; }
.entry.note-entry p { color: var(--ink); font-size: 1.0625rem; line-height: 1.6; }
.entry.note-entry .permalink {
  font-family: var(--sans); font-size: .72rem; color: var(--faint);
  text-decoration: none; margin-top: .6em; display: inline-block;
}
.entry.note-entry .permalink:hover { color: var(--accent); }

/* an art entry brings a thumbnail strip into the feed */
.entry .strip {
  display: flex; gap: .4rem; margin-top: .9em; overflow: hidden;
}
.entry .strip img {
  height: 5.5rem; width: auto; border-radius: 2px;
  background: var(--mat); object-fit: cover; flex: 0 0 auto;
}

.more {
  display: block;
  padding: 2rem 0 4rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--muted);
  text-decoration: none;
}
.more:hover { color: var(--accent); }

/* --- 12. archive -------------------------------------------- */

.archive { max-width: var(--wide); margin-inline: auto; padding: 0 var(--gutter) 5rem; }
.filters {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-bottom: 2.5rem;
  font-family: var(--sans); font-size: .75rem;
}
.filters button {
  appearance: none; cursor: pointer; font: inherit;
  background: none; color: var(--muted);
  border: 1px solid var(--rule); border-radius: 100px;
  padding: .28em .8em;
  text-transform: lowercase; letter-spacing: .03em;
  transition: all .15s;
}
.filters button:hover { color: var(--ink); border-color: var(--muted); }
.filters button[aria-pressed="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.year {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--faint);
  margin: 2.8rem 0 .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rule);
}
.year:first-of-type { margin-top: 0; }
.row {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 0 1.2rem;
  align-items: baseline;
  padding: .55rem 0;
  border-bottom: 1px solid color-mix(in oklab, var(--rule) 50%, transparent);
  font-size: .9375rem;
}
.row:hover { background: color-mix(in oklab, var(--raised) 70%, transparent); }
.row > time { font-family: var(--sans); font-size: .72rem; color: var(--faint); }
.row > a { text-decoration: none; text-wrap: pretty; }
.row > a:hover { color: var(--accent); }
.row > .kind { font-size: .66rem; }
.row[hidden] { display: none; }
@media (max-width: 36rem) {
  .row { grid-template-columns: 3.5rem 1fr; }
  .row > .kind { display: none; }
}

/* --- 13. bleed layout: no chrome, you own the viewport ------ */

body[data-layout="bleed"] { background: var(--mat); }
body[data-layout="bleed"] .site {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  max-width: none; padding: 1rem var(--gutter);
  mix-blend-mode: difference;
  pointer-events: none;
}
body[data-layout="bleed"] .site a,
body[data-layout="bleed"] .site button { pointer-events: auto; color: #888; }
body[data-layout="bleed"] .stage {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
}
body[data-layout="bleed"] .site-foot { display: none; }

/* a caption that floats over a bleed stage */
.overlay {
  position: fixed; bottom: 0; left: 0; right: 0;
  padding: 1rem var(--gutter);
  font-family: var(--sans); font-size: .78rem; color: var(--muted);
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  background: linear-gradient(transparent, color-mix(in oklab, var(--mat) 92%, transparent));
  pointer-events: none;
}

/* --- 14. zoom (lightbox) ------------------------------------ */

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: color-mix(in oklab, #0a0a09 94%, transparent);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  cursor: zoom-out;
  animation: fade .18s ease-out;
}
@keyframes fade { from { opacity: 0 } }
.lightbox img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 2px;
}
.lightbox figcaption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  color: #b9b4ab; text-align: center; margin: 0;
}
.lightbox button {
  position: absolute; top: 50%; transform: translateY(-50%);
  appearance: none; background: none; border: 0;
  color: #b9b4ab; font-size: 2rem; line-height: 1;
  padding: 1rem; cursor: pointer;
}
.lightbox button:hover { color: #fff; }
.lightbox .prev { left: 0; }
.lightbox .nxt  { right: 0; }
.lightbox[data-single] button { display: none; }

/* --- 15. odds and ends -------------------------------------- */

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: .6em 1em; z-index: 200; text-decoration: none;
}
.skip:focus { left: var(--gutter); top: .5rem; }

/* math, if you load KaTeX */
.katex-display { overflow-x: auto; overflow-y: hidden; padding: .4em 0; }

@media print {
  :root { --paper: #fff; --ink: #000; --muted: #444; --rule: #ccc; }
  body { font-size: 11pt; }
  .site, .site-foot, .seam, .theme, .filters { display: none; }
  .prose { display: block; max-width: none; padding: 0; }
  a { text-decoration: none; }
  .note { float: none; width: auto; margin: 1em 0; display: block; }
  figure, pre, blockquote { break-inside: avoid; }
}

/* --- 16. math (only on pages that include math.js) ---------- */

.katex { font-size: 1.04em; }
.katex-display {
  margin: 1.6em 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .35em .1em;
}
.katex-display > .katex { text-align: center; }
/* numbered equations shouldn't collide with the margin */
.katex-display .tag { color: var(--muted); }

/* --- 17. feed without an intro block ------------------------ */

/* on the front page the wordmark is the <h1>; it must not look like one */
.site .sigil-h {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}
.site .sigil-h .sigil { font-size: .9375rem; font-weight: 550; }

/* the intro block used to provide the top air; the feed owns it now */
.feed > .entry:first-of-type { border-top: 0; }
.feed { padding-top: clamp(2.5rem, 8vh, 4.5rem); }

/* --- 18. comments ------------------------------------------- */

.comments {
  grid-column: text;
  margin-top: 4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
.comments-head {
  font-family: var(--sans);
  font-size: .72rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--faint);
  margin: 0 0 1.6rem !important;
}

.comment { margin-bottom: 1.8rem; }
.comment-who {
  display: flex; gap: .6rem; align-items: baseline;
  margin-bottom: .35em !important;
  font-family: var(--sans); font-size: .78rem;
}
.comment-who b { color: var(--ink); font-weight: 600; }
.comment-who time { color: var(--faint); }
.comment p { margin-bottom: .6em; }
.comment p:last-child { margin-bottom: 0; }

.comment-form {
  display: grid; gap: .6rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
.comment-form input[type=text],
.comment-form textarea {
  font-family: var(--sans); font-size: .9375rem;
  color: var(--ink); background: var(--raised);
  border: 1px solid var(--rule); border-radius: 4px;
  padding: .55em .7em; width: 100%;
}
.comment-form input[type=text] { max-width: 16rem; }
.comment-form textarea { resize: vertical; line-height: 1.55; }
.comment-form input:focus, .comment-form textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
.comment-form button {
  appearance: none; cursor: pointer; font: inherit;
  font-family: var(--sans); font-size: .8125rem;
  background: var(--ink); color: var(--paper);
  border: 0; border-radius: 4px; padding: .5em 1.2em;
  justify-self: start;
}
.comment-form button:hover { opacity: .85; }
.comment-form button[disabled] { opacity: .45; cursor: default; }

.comment-note {
  font-family: var(--sans); font-size: .78rem; color: var(--muted);
  margin: 0 !important;
}

/* the honeypot: present in the DOM, invisible and unreachable */
.comment-trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; opacity: 0;
  pointer-events: none;
}

/* --- 19. voices --------------------------------------------- */
/* For prose that changes register: a quoted voice, an answering
   voice, an attempt the writer discards. Available to any post.
   In LaTeX these are environments:
     \begin{discarded} \begin{exchange} \begin{answer} \begin{close} */

.discarded {
  margin: 1.8em 0;
}
.discarded p {
  font-style: italic;
  color: var(--faint);
}

.exchange {
  margin: 2em 0;
  padding-left: 1.1em;
  border-left: 2px solid var(--rule);
}
.exchange p {
  margin-bottom: .75em;
  font-style: italic;
  color: var(--muted);
}
.exchange > p:last-child { margin-bottom: 0; }

/* the answering voice steps out from the one being answered */
.exchange .answer {
  margin: .75em 0 .75em 1.4em;
}
.exchange .answer p {
  font-style: normal;
  color: var(--ink);
}

.close { margin-top: 2.4em; }
.close p { line-height: 1.82; }

/* \amen{...} — pandoc renders \textsc as .smallcaps */
.close .smallcaps,
.amen {
  display: block;
  margin-top: 1.6em;
  font-variant: small-caps;
  letter-spacing: .14em;
  color: var(--muted);
}

/* --- 20. Netlify's badge ------------------------------------ */
/* Netlify injects a script after </html> that builds a fixed iframe
   (#nl-badge-frame, titled "Powered by Netlify") in the corner. It is
   added at the edge, after the build, so it cannot be removed from the
   repo -- only hidden, or switched off in the Netlify dashboard.

   Prefer the dashboard toggle; this is the fallback. */
#nl-badge-frame,
iframe[title="Powered by Netlify"] {
  display: none !important;
}

/* --- 21. verse ---------------------------------------------- */
/* pandoc turns a LaTeX \begin{verse} into a <blockquote>, which would
   otherwise pick up the quotation styling: italic, grey, rule down the
   left. Poetry is not a quotation, so inside a post with kind="poems"
   it is set as itself. */

body[data-kind="poems"] .prose blockquote {
  border-left: 0;
  padding-left: 0;
  margin: 0 0 3.2em;
  font-style: normal;
  color: var(--ink);
}
body[data-kind="poems"] .prose blockquote p {
  margin-bottom: 1.4em;      /* the gap between stanzas */
  line-height: 1.6;          /* tighter than prose: lines are short */
  text-wrap: pretty;
}
body[data-kind="poems"] .prose blockquote p:last-child { margin-bottom: 0; }

/* the title above each poem. There are a lot of Untitleds, so it reads as
   a quiet marker rather than a heading. */
body[data-kind="poems"] .prose h4 {
  margin-block: 3.2em .9em;
  color: var(--faint);
}
body[data-kind="poems"] .prose > h4:first-of-type { margin-top: 1em; }

/* --- 22. edge ornament -------------------------------------- */
/* A strip of your own work down each margin, repeated downwards.
   To use a new one: put a TALL VERTICAL image in media/ and point a
   theme's --edge at it. Nothing is cropped or altered -- it is used
   exactly as given, repeated top to bottom.

   For no visible join, make the image's bottom edge continue into its
   top edge. A tall strip that already does this needs nothing else.

   Only shows when the window is wide enough that the strips sit outside
   the reading column. Delete this section to remove it everywhere. */

:root {
  --edge: url("media/edge-green.png");
  --edge-width: 125px;
  --edge-opacity: 0.65;
}

/* only once the window is wide enough that the strips sit OUTSIDE the
   reading column rather than crowding it */
@media (min-width: 86rem) {
  body::before,
  body::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--edge-width);
    background-image: var(--edge);
    background-repeat: repeat-y;
    background-size: var(--edge-width) auto;
    opacity: var(--edge-opacity);
    pointer-events: none;
    z-index: 0;
    /* fade out top and bottom so the strip has no hard ends */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  }
  body::before { left: 0; }
  body::after  { right: 0; }

  /* keep the words above the ornament */
  .prose, .feed, .archive, .site, .site-foot { position: relative; z-index: 1; }
}