/* ════════════════════════════════════════════════════════════════════
   The house style of tschoonover.com and poezine.org.
   Built on tschoonover.com as it was: a 900px column framed by hairlines,
   Helvetica at a 13px base, paper and ink, pill switches, the cursor and
   the avatar. Added: Century Schoolbook for reading text, numbered section
   labels like a register (§01), a small square mark, one deep-red accent.
   Colours come from the site's theme; the backend sets them.
   ════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ink: #111110;
  --paper: #F7F5F0;
  --dim: #999893;
  --rule: rgba(17,17,16,0.1);
  --tint: rgba(17,17,16,0.04);
  --tint-2: rgba(17,17,16,0.08);
  --accent: #a04040;
  --live: #4a7a4a;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --read: 'Century Schoolbook', 'New Century Schoolbook', 'TeX Gyre Schola', 'C059', Georgia, serif;
  --mono: 'IBM Plex Mono', Menlo, Consolas, monospace;
  --width: 900px;
}
html.dark {
  --ink: #E8E5DC;
  --paper: #131310;
  --dim: #666460;
  --rule: rgba(232,229,220,0.09);
  --tint: rgba(232,229,220,0.04);
  --tint-2: rgba(232,229,220,0.08);
  --accent: #d07a6e;
}
html { font-size: 13px; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 1rem; line-height: 1.6; letter-spacing: 0.01em;
  transition: background 0.25s, color 0.25s;
}
html.custom-cursor body, html.custom-cursor a, html.custom-cursor button, html.custom-cursor .pill span { cursor: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
i, em { font-style: italic; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* cursor and avatar */
#cursor { position: fixed; width: 32px; height: 32px; pointer-events: none; z-index: 9999; transform: translate(-4px, -4px);
  display: none; align-items: center; justify-content: center; font-size: 22px; line-height: 1; user-select: none; left: -100px; top: -100px; }
html.custom-cursor #cursor { display: flex; }
#cursor img { width: 100%; height: 100%; object-fit: contain; }
#avatar { position: fixed; bottom: 24px; right: 28px; width: 52px; height: 52px; z-index: 9998; background: none; border: 0; padding: 0; opacity: 0.85; }
#avatar img { width: 100%; height: 100%; object-fit: contain; }
#avatar.big { width: 160px; height: 160px; opacity: 1; }
/* Flat: nothing moves, grows, fades or bounces. */
*, *::before, *::after { animation: none !important; transition: none !important; }
html { scroll-behavior: auto; }

/* the column */
.site { max-width: var(--width); margin: 0 auto; border-left: 0.5px solid var(--rule); border-right: 0.5px solid var(--rule); min-height: 100vh; }

/* masthead */
.masthead { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; padding: 28px 28px 20px; border-bottom: 0.5px solid var(--rule); }
.site-name { font-size: 1em; font-weight: 500; letter-spacing: 0.02em; display: flex; align-items: center; gap: 7px; text-decoration: none; }
.site-name::before { content: ""; width: 7px; height: 7px; background: var(--accent); display: inline-block; }
.site-sub { font-size: 0.77em; color: var(--dim); letter-spacing: 0.01em; margin-top: 3px; }
.controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.pill { display: flex; border: 0.5px solid var(--rule); }
.pill button { font: inherit; font-size: 0.77em; letter-spacing: 0.02em; padding: 4px 9px; background: none; border: 0; color: var(--dim); }
.pill button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pill.font-pill button { font-size: 1em; line-height: 1; padding: 2px 9px 4px; }
.no-js .controls { display: none; }

/* nav */
nav.sections { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 0.5px solid var(--rule); padding: 12px 28px; }
nav.sections a { font-size: 0.85em; letter-spacing: 0.01em; color: var(--dim); padding: 5px 10px; text-decoration: none; border: 0.5px solid var(--rule); white-space: nowrap; }
nav.sections a:hover { color: var(--ink); border-color: var(--ink); }
nav.sections a.active { color: var(--ink); border-color: var(--accent); }
nav.sections a.here { background: var(--ink); color: var(--paper); border-color: var(--ink); }
nav.sections a.here::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--accent); margin-right: 7px; vertical-align: 1px; }

/* section labels: numbered, like a register */
.sec-label { font-size: 0.77em; letter-spacing: 0.04em; color: var(--dim); display: block; margin-bottom: 10px; }
.sec-label .n { font-family: var(--mono); font-size: 0.95em; color: var(--accent); margin-right: 6px; letter-spacing: 0; }
section.block { border-bottom: 0.5px solid var(--rule); scroll-margin-top: 8px; }
.block-head { padding: 14px 28px 0; }
.pad { padding: 28px; }
.hr { border: none; border-top: 0.5px solid var(--rule); margin: 16px 0; }

/* reading text */
.lede { font-family: var(--read); font-size: 1.24em; line-height: 1.62; margin-bottom: 18px; font-weight: 400; }
.small, .note { font-size: 0.85em; color: var(--dim); line-height: 1.65; }
.prose { font-size: 1em; line-height: 1.7; max-width: 42em; }
.prose p, .prose ul, .prose ol, .prose pre, .prose blockquote { margin: 0 0 12px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose h2 { font-size: 1.15em; font-weight: 500; margin: 20px 0 8px; }
.prose h3 { font-size: 1em; font-weight: 500; margin: 16px 0 6px; }
.prose a, .about-main a, .post-excerpt a { text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 2px; text-decoration-color: var(--accent); }
.prose blockquote { border-left: 1px solid var(--accent); padding-left: 12px; font-family: var(--read); font-style: italic; }
.prose code, code { font-family: var(--mono); font-size: 0.92em; background: var(--tint); padding: 0 3px; }
pre { font-family: var(--mono); font-size: 0.85em; background: var(--tint); border: 0.5px solid var(--rule); padding: 12px 14px; overflow-x: auto; line-height: 1.55; }
pre code, .prose pre code { background: none; padding: 0; }
.prose hr { border: none; border-top: 0.5px solid var(--rule); margin: 16px 0; }

/* intro (optional headline) */
.intro h1 { font-family: var(--read); font-weight: 400; font-size: 2.3em; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 12px; max-width: 20em; }
.intro .kicker { font-size: 0.77em; color: var(--dim); letter-spacing: 0.04em; margin-bottom: 10px; display: block; }
.intro.with-image { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,2fr); gap: 28px; align-items: end; }
.intro img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }

/* about */
.about-grid { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,2fr); }
.about-main { padding: 28px; border-right: 0.5px solid var(--rule); }
.about-side { padding: 28px; }
.now-entry { margin-bottom: 14px; }
.now-title { font-size: 0.85em; font-weight: 500; letter-spacing: 0.03em; margin-bottom: 2px; }
.now-sub { font-size: 0.85em; color: var(--dim); line-height: 1.55; }
.reading-item { display: flex; gap: 8px; font-size: 0.85em; color: var(--dim); padding: 5px 0; border-bottom: 0.5px solid var(--rule); }
.reading-item:last-child { border-bottom: none; }
.rn { color: var(--rule); font-size: 0.77em; min-width: 10px; }

/* writing */
.post { display: grid; grid-template-columns: 88px minmax(0,1fr); border-bottom: 0.5px solid var(--rule); text-decoration: none; }
.post:last-child { border-bottom: none; }
a.post:hover .post-title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.5px; text-underline-offset: 2px; }
.post-date { padding: 18px 0 18px 28px; font-size: 0.85em; color: var(--dim); letter-spacing: 0.01em; border-right: 0.5px solid var(--rule); display: flex; flex-direction: column; gap: 4px; }
.post-tag { font-size: 0.77em; letter-spacing: 0.01em; color: var(--dim); }
.post-body { padding: 18px 24px; }
.post-title { font-family: var(--read); font-size: 1.08em; font-weight: 400; line-height: 1.45; margin-bottom: 5px; }
.post-excerpt { font-size: 0.85em; color: var(--dim); line-height: 1.6; }

/* photo interlude (a single photo) */
.photo-interlude { position: relative; overflow: hidden; }
.photo-interlude img { width: 100%; height: 220px; object-fit: cover; transition: filter 0.15s; }
.photo-interlude.tall img { height: 340px; }

.photo-interlude .g-cap { padding: 30px 28px 10px; }

/* work: tinted boxes */
.work-grid { display: grid; grid-template-columns: 1fr 1fr; padding: 10px 28px 28px; gap: 2px; }
.work-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.proj { background: var(--tint); padding: 18px 20px; transition: background 0.15s; height: 100%; display: flex; flex-direction: column; text-decoration: none; }
a.proj:hover { background: var(--tint-2); }
.proj img { margin: -18px -20px 14px; width: calc(100% + 40px); max-width: none; aspect-ratio: 3/2; object-fit: cover; }
.proj-tag { font-size: 0.77em; letter-spacing: 0.01em; color: var(--dim); margin-bottom: 6px; }
.proj-name { font-size: 0.95em; font-weight: 500; line-height: 1.35; margin-bottom: 5px; }
.proj-desc { font-size: 0.85em; color: var(--dim); line-height: 1.5; }
.proj-desc p { margin: 0 0 6px; }
.proj-status { margin-top: auto; padding-top: 10px; font-size: 0.77em; letter-spacing: 0.01em; color: var(--dim); display: flex; align-items: center; gap: 5px; }
.proj-host { font-family: var(--mono); font-size: 0.77em; color: var(--dim); margin-bottom: 5px; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--dim); display: inline-block; }
.dot.live, .dot.up { background: var(--live); }
.dot.down { background: var(--accent); }

/* feature: an ink band, like the old admin bar */
.feature { display: grid; grid-template-columns: minmax(0,1fr) auto; }
.feature-bar { grid-column: 1 / -1; background: var(--ink); color: var(--paper); padding: 10px 28px; font-size: 0.85em; letter-spacing: 0.02em; display: flex; justify-content: space-between; gap: 12px; }
.feature-bar .n { font-family: var(--mono); color: var(--paper); opacity: 0.6; }
.feature-body { padding: 24px 28px 28px; }
.feature-body h2 { font-family: var(--read); font-weight: 400; font-size: 1.7em; line-height: 1.2; margin-bottom: 10px; }
.feature img { width: 220px; height: 100%; object-fit: cover; border-left: 0.5px solid var(--rule); }
.button { display: inline-block; font-size: 0.85em; letter-spacing: 0.02em; border: 0.5px solid var(--ink); padding: 7px 14px; text-decoration: none; margin-top: 6px; }
.button:hover { background: var(--ink); color: var(--paper); }

/* gallery: rows of one fixed height, equal cells, 2px joints */
.gallery-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px; }
.gallery-title { font-size: 0.85em; font-weight: 500; }
.gallery-count { font-size: 0.77em; color: var(--dim); }
.gallery-body { padding: 0 28px 2px; }
.g-row { display: flex; gap: 2px; margin-bottom: 2px; height: 300px; }
.g-row.short { height: 220px; }
.g-row[hidden] { display: none; }
.g-cell { flex: 1 1 0; overflow: hidden; position: relative; min-width: 0; background: var(--tint); padding: 0; border: 0; }
.g-cell.wide { flex: 2 2 0; }
.g-cell img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.15s; }

.g-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px 8px 7px; font-size: 0.69em; color: rgba(255,255,255,0.88); line-height: 1.4; text-align: left;
  background: rgba(17,17,16,0.72); padding-top: 6px; pointer-events: none; }
.gallery-more { padding: 10px 28px 14px; }
.gallery-more button, .more-btn { font: inherit; font-size: 0.77em; color: var(--dim); background: none; border: 0.5px solid var(--rule); padding: 7px 0; width: 100%; transition: color 0.15s, border-color 0.15s; }
.gallery-more button:hover { color: var(--ink); border-color: var(--ink); }

/* lightbox */
#lightbox { display: none; position: fixed; inset: 0; z-index: 10002; background: rgba(17,17,16,0.92); align-items: center; justify-content: center; }
#lightbox.open { display: flex; }
#lightbox img { max-width: 90vw; max-height: 88vh; object-fit: contain; }
#lightbox-cap { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: 0.85em; color: rgba(255,255,255,0.6); letter-spacing: 0.02em; max-width: 90vw; text-align: center; }
#lightbox-close { position: absolute; top: 20px; right: 28px; font-size: 1.2em; color: rgba(255,255,255,0.5); background: none; border: none; font-family: var(--sans); }
#lightbox-close:hover { color: rgba(255,255,255,0.9); }

/* résumé */
.resume-grid { display: grid; grid-template-columns: 1fr 1fr; }
.resume-col { padding: 28px; border-right: 0.5px solid var(--rule); }
.resume-col:last-child { border-right: none; }
.resume-entry { margin-bottom: 16px; }
.resume-role { font-size: 0.92em; font-weight: 500; margin-bottom: 2px; }
.resume-org { font-size: 0.85em; color: var(--dim); }
.resume-date { font-size: 0.77em; color: var(--dim); letter-spacing: 0.04em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.skill-list { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; }
.skill-tag { font-size: 0.77em; letter-spacing: 0.06em; color: var(--dim); border: 0.5px solid var(--rule); padding: 3px 8px; }

/* links, as ruled rows */
.links { list-style: none; padding: 4px 28px 20px; }
.links li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 16px; padding: 9px 0; border-bottom: 0.5px solid var(--rule); align-items: baseline; }
.links li:last-child { border-bottom: none; }
.links a { font-size: 0.95em; font-weight: 500; text-decoration: none; }

.links .note { font-size: 0.85em; }

/* quote */
.quote { padding: 32px 28px; }
.quote p { font-family: var(--read); font-style: italic; font-size: 1.5em; line-height: 1.4; max-width: 28em; }
.quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 0.77em; color: var(--dim); letter-spacing: 0.04em; }

/* tables: status, files */
table { border-collapse: collapse; width: 100%; font-size: 0.85em; font-variant-numeric: tabular-nums; }
th { text-align: left; font-weight: 400; font-size: 0.9em; letter-spacing: 0.04em; color: var(--dim); border-bottom: 0.5px solid var(--ink); padding: 6px 12px 6px 0; }
td { border-bottom: 0.5px solid var(--rule); padding: 9px 12px 9px 0; vertical-align: top; }
td a { font-weight: 500; text-decoration: none; }
td a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
td .note { display: block; font-size: 0.9em; }
dl.facts { display: grid; grid-template-columns: minmax(8em, max-content) 1fr; gap: 6px 20px; margin-top: 22px; font-size: 0.85em; }
dl.facts dt { color: var(--dim); }
dl.facts dd { margin: 0; }
.mono { font-family: var(--mono); }

/* figure, divider */
figure.photo { padding: 0; }
figcaption { font-size: 0.77em; color: var(--dim); padding: 8px 28px 12px; }
hr.divider { border: none; height: 14px; background: var(--tint); border-bottom: 0.5px solid var(--rule); }

/* footer */
footer.colophon { padding: 12px 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 0.85em; color: var(--dim); letter-spacing: 0.01em; }
footer.colophon p { margin: 0; }
footer.colophon a { text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 2px; }

.skip-link { position: absolute; top: -40px; left: 28px; background: var(--ink); color: var(--paper); font-size: 0.85em; padding: 8px 14px; z-index: 10001; text-decoration: none; transition: top 0.15s; }
.skip-link:focus { top: 8px; }

@media (max-width: 640px) {
  html.custom-cursor body, html.custom-cursor a, html.custom-cursor button { cursor: auto; }
  #cursor, #avatar { display: none !important; }
  .masthead { padding: 18px 16px 14px; gap: 10px; grid-template-columns: 1fr; }
  .controls { gap: 8px; justify-content: flex-start; }
  nav.sections { padding: 0 16px; }
  nav.sections a { margin-right: 16px; }
  .pad, .about-main, .about-side, .resume-col { padding: 20px 16px; }
  .about-grid, .resume-grid, .intro.with-image, .feature { grid-template-columns: 1fr; }
  .about-main, .resume-col { border-right: none; border-bottom: 0.5px solid var(--rule); }
  .post { grid-template-columns: 70px minmax(0,1fr); }
  .post-date { padding: 14px 0 14px 16px; }
  .post-body { padding: 14px 16px; }
  .work-grid, .work-grid.cols-3 { grid-template-columns: 1fr; padding: 8px 16px 20px; }
  .block-head, .gallery-header, .gallery-more, .links, .quote, footer.colophon, .feature-bar, .feature-body { padding-left: 16px; padding-right: 16px; }
  .gallery-body { padding: 0; }
  .g-row { height: 150px; }
  .g-row.short { height: 110px; }
  .photo-interlude img { height: 160px; }
  .feature img { display: none; }
}
@media print {
  .controls, #avatar, #cursor, nav.sections, .gallery-more { display: none !important; }
  .site { border: 0; }
}

/* tables in text */
.prose table { margin: 0 0 14px; font-size: 0.92em; }
.prose th, .prose td { padding: 6px 12px 6px 0; }
.prose .scroll { overflow-x: auto; }
.prose:has(table) { max-width: none; }
.prose .scroll table { width: 100%; }
.prose td:first-child code, .prose th:first-child { white-space: nowrap; }
.prose td code { white-space: pre-wrap; }

/* ── the mark, the art, the marquees ─────────────────────────────────── */
.site-name.has-mark::before { display: none; }
.mark-svg { display: inline-block; vertical-align: middle; flex: none; }

.art-band { height: 64px; overflow: hidden; color: var(--dim); border-bottom: 0.5px solid var(--rule); }
.art-band svg { width: 100%; height: 100%; display: block; }
.art-block { margin: 0; color: var(--ink); padding: 0 28px 18px; }
.art-block svg { width: 100%; height: 180px; display: block; }
.art-block.tall svg { height: 320px; }
.art-block figcaption { padding: 8px 0 0; }
.b-art { padding-top: 18px; }

.marquees { padding: 0; }
.marquee-lead { padding: 22px 28px 0; font-size: 0.85em; color: var(--dim); letter-spacing: 0.02em; }
.marquee { overflow: hidden; padding: 16px 0; }
.marquee + .marquee { border-top: 0.5px solid var(--rule); padding: 10px 0; }
.marquee-track { display: flex; width: max-content; animation: marquee var(--dur, 60s) linear infinite !important; }
.marquee.reverse .marquee-track { animation-direction: reverse !important; }
.marquee:hover .marquee-track { animation-play-state: paused !important; }
.mq-run { display: flex; align-items: center; flex: none; }
.mq-item { font-family: var(--read); font-size: 2.6em; line-height: 1.15; padding: 0 22px; white-space: nowrap; letter-spacing: -0.01em; }
.mq-sep { width: 8px; height: 8px; background: var(--accent); flex: none; }
.marquee.reverse .mq-item { font-family: var(--sans); font-size: 1em; color: var(--dim); padding: 0 16px; letter-spacing: 0.02em; }
.marquee.reverse .mq-sep { width: 4px; height: 4px; background: var(--dim); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; width: auto; flex-wrap: wrap; }
  .mq-run { flex-wrap: wrap; }
  .mq-run[aria-hidden] { display: none; }
}

/* a larger opening line where a page starts with one */
.intro h1 { font-size: clamp(2.3em, 4.6vw, 3.9em); line-height: 1.06; max-width: 15em; }
@media (max-width: 640px) { .mq-item { font-size: 1.8em; } .art-band { height: 44px; } .art-block { padding: 0 16px 14px; } }

/* ── the wordmark: the mark and the name, set together everywhere ─────── */
.wordmark { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-weight: 500; letter-spacing: 0.01em; color: var(--ink); }
.wordmark .sq { width: 7px; height: 7px; background: var(--accent); display: inline-block; }
.wordmark.small { font-size: 1.05em; }
.kicker .wordmark { font-size: 1.1em; }
.kicker:has(.wordmark) { color: var(--ink); }
.site-name.has-mark::before { display: none; }

/* ── links: ↗ leaves the site, → stays on it ─────────────────────────── */
.prose a.ext::after, .links a.ext::after, .colophon a.ext::after, .small a.ext::after, td a.ext::after, .button.ext::after { content: "\2009↗"; color: var(--accent); }
.prose a.int::after, .links a.int::after, .colophon a.int::after, .small a.int::after, td a.int::after { content: "\2009→"; color: var(--accent); }
.button.int::after { content: ""; }
.toc a.int::after { content: ""; }

/* ── on this page ─────────────────────────────────────────────────────── */
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13em, 1fr)); gap: 0 24px; counter-reset: toc; }
.toc li { counter-increment: toc; padding: 6px 0; border-bottom: 0.5px solid var(--rule); font-size: 0.92em; }
.toc li::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 0.85em; color: var(--accent); margin-right: 10px; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.b-toc .pad { padding-top: 18px; padding-bottom: 18px; }

/* ── the status ticker ────────────────────────────────────────────────── */
.ticker { display: flex; align-items: stretch; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 0.8em; border-bottom: 0.5px solid var(--rule); }
.ticker[hidden] { display: none; }
.tk-label { flex: none; padding: 6px 12px; background: var(--accent); color: var(--paper); text-decoration: none; letter-spacing: 0.04em; }
.tk-label::after { content: "" !important; }
.ticker-window { flex: 1; overflow: hidden; padding: 6px 0; }
.ticker .marquee-track:hover { animation-play-state: paused !important; }
.tk { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; white-space: nowrap; }
.tk b { font-weight: 500; letter-spacing: 0.04em; opacity: 0.7; }
.tk-sep { opacity: 0.35; }
.chg.up { color: #7fc48f; } .chg.down { color: #e0827a; } .chg.flat { opacity: 0.5; }
.ticker .dot { width: 6px; height: 6px; }
.ticker-x { flex: none; background: none; border: 0; border-left: 0.5px solid rgba(127,127,127,0.4); color: var(--paper); font: inherit; font-size: 1.1em; padding: 0 12px; cursor: pointer; }
.ticker-open { background: none; border: 0.5px solid var(--rule); color: var(--dim); font: inherit; font-size: 0.85em; padding: 3px 8px; cursor: pointer; }
.ticker-open[hidden] { display: none; }

/* ── status ───────────────────────────────────────────────────────────── */
.st-h { font-size: 0.85em; font-weight: 500; letter-spacing: 0.03em; color: var(--dim); margin: 18px 0 6px; }
.deps { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 0.85em; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); vertical-align: 1px; }

/* the lettered name, and the mark between marquee items */
.wordmark.lettered { gap: 9px; }
.lettering { display: block; color: var(--ink); overflow: visible; }
.kicker .lettering { height: 13px; }
.mq-sep.mark { width: auto; height: auto; background: none; display: inline-flex; color: var(--ink); }
.mq-sep.mark .mark-svg { width: 26px; height: 26px; }