/* =============================================================
   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 {
  --paper:  #fbfaf7;
  --raised: #f4f2ec;
  --ink:    #1b1a17;
  --muted:  #6d685e;
  --faint:  #9b958a;
  --rule:   #e3dfd5;
  --accent: #9c4221;
  --mat:    #efece4;   /* 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;
    --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;
  --mat:    #0d0d0c;
  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;
  --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;
  grid-template-columns:
    [full-start] var(--gutter)
    [wide-start] minmax(0, calc((var(--wide) - var(--measure)) / 2))
    [text-start] minmax(0, var(--measure)) [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; }

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