/* ==========================================================================
   FILAMENT — assets/css/screen.css
   Ghost 6 theme for The Smalley Creative Blog. Single stylesheet, no build step.
   Section numbers follow SPEC.md. Class contract: scratchpad/build/CONTRACT.md.

   0  Font fallbacks
   1  Tokens (light on :root; dark twice — media query + [data-scheme="dark"])
   2  Base / reset
   3  Typography helpers (labels, eyebrows, meta, mono numerals)
   4  Effects: grain, graph paper, panels
   5  Components: rule, chips, buttons, inputs, lamp, avatar, plate, glyph, icons, skip, progress
   6  Masthead + navigation
   7  Footer
   8  Hero (front panel / cover)
   9  Channels
   10 Logbook: feed, cards, datasheet plates
   11 Index rows (tag / author archives)
   12 Sidebar, author plate, sign-up plate, tag index
   13 Pagination
   14 Bands (archive, tag, author)
   15 Article: header, figure, body, TOC, notice
   16 Content (.sc-content.sc-prose) — SPEC 7
   17 Post footer: tags, comments, neighbours, related, subscribe
   18 Error / fault plate, members CTA
   19 Utilities, focus, reduced motion / transparency, print
   ========================================================================== */


/* ----
   0. Font fallbacks (metric-adjusted, limit layout shift while Google Fonts load)
   ---- */
@font-face {
  font-family: "Fraunces-fallback";
  src: local("Iowan Old Style"), local("Georgia");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
}
@font-face {
  font-family: "SourceSerif-fallback";
  src: local("Charter"), local("Georgia");
  size-adjust: 101%;
  ascent-override: 90%;
  descent-override: 24%;
}


/* ----
   1. Tokens — 2.1 LIGHT "Daylight bench"
   ---- */
:root {
  color-scheme: light;

  /* paper and plates */
  --bg:          #F4EFE6;
  --surface:     #FBF8F1;
  --surface-2:   #EAE2D3;
  --text:        #1F1B17;
  --text-2:      #3E3630;
  --muted:       #645B52;
  --border:      #D9CEBC;
  --line-5:      rgba(31,27,23,.05);
  --line-8:      rgba(31,27,23,.08);

  /* accent (amber filament) */
  --accent:      #C9741A;
  --accent-ink:  #9A4C10;
  --accent-lit:  #F0A33A;
  --accent-soft: rgba(201,116,26,.12);

  /* accent-2 (oxblood) */
  --ox:          #7A2E2B;

  /* brass */
  --brass:       #9C7A3A;
  --brass-ink:   #6E5628;
  --brass-30:    rgba(156,122,58,.30);
  --brass-40:    rgba(156,122,58,.40);

  /* code (always dark) */
  --code-bg:     #1A1613;
  --code-text:   #E9DFCF;
  --code-muted:  #A99C8B;
  --code-border: #3A3128;
  --code-amber:  #F0A33A;

  /* panel (always dark) */
  --panel:        #211D1A;
  --panel-2:      #2B2521;
  --panel-text:   #EDE4D6;
  --panel-muted:  #A99C8B;
  --panel-brass:  #C9A55A;
  --panel-frame:  rgba(201,165,90,.30);

  /* effects */
  --glow:        none;
  --glow-strong: none;
  --selection:   #EFD9BF;
  --grain-blend: multiply;
  --link-halo:   none;                       /* dark: amber text-shadow on link hover */
  --chip-hi:     rgba(255,255,255,.55);      /* chip inset top highlight */
  --glyph-glow:  none;                       /* dark: drop-shadow on hovered glyphs */
  --lamp-on:     .55;                        /* pilot-lamp dot opacity (1 in dark) */
  --stamp-bg:    rgba(251,248,241,.92);      /* stamp chip over images */
  --grain-img:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* 2.5 typography */
  --font-display: var(--gh-font-heading, "Fraunces"), "Fraunces-fallback", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body:    var(--gh-font-body, "Source Serif 4"), "SourceSerif-fallback", Charter, "Iowan Old Style", Georgia, serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --fs-hero:      clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --fs-h1:        clamp(2.125rem, 1.4rem + 3vw, 3.5rem);
  --fs-band:      clamp(2rem, 1.5rem + 2vw, 3rem);
  --fs-h2:        1.75rem;
  --fs-h3:        1.3125rem;
  --fs-h4:        1.0625rem;
  --fs-card-l:    1.625rem;
  --fs-card-g:    1.375rem;
  --fs-card-c:    1.125rem;
  --fs-tile:      1.25rem;
  --fs-nameplate: 1.375rem;
  --fs-lede:      1.25rem;
  --fs-body:      1.0625rem;   /* 1.125rem from 640px */
  --lh-body:      1.65;        /* 1.7 from 640px */
  --fs-excerpt:   1rem;
  --fs-small:     .875rem;
  --fs-caption:   .8125rem;
  --fs-label:     .75rem;
  --fs-code:      .875rem;
  --fs-err:       4rem;

  /* 2.6 spacing, radii, borders */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem;   --s-7: 3rem;  --s-8: 4rem;   --s-9: 6rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --r-1: 2px;
  --r-2: 3px;
  --r-round: 50%;
  --hairline: 1px solid var(--border);
  --hairline-brass: 1px solid var(--brass);
  --frame-inset: 10px;         /* 14px from 900px */
  --shadow: none;

  /* 2.7 widths */
  --w-site:    1200px;
  --w-wide:    1040px;
  --w-measure: 44rem;
  --w-pane:    calc(var(--w-measure) + 4rem);
  --w-sidebar: 300px;
  --w-rail:    288px;

  /* 2.8 motion */
  --t-fast: 120ms;
  --t-base: 160ms;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* 2.2 DARK "Night bench" — written twice: system preference (unless pinned light) and the pinned/toggled attribute */
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    color-scheme: dark;
    --bg:          #15120F;
    --surface:     #1E1A16;
    --surface-2:   #28221C;
    --text:        #EDE4D6;
    --text-2:      #D6CBBA;
    --muted:       #A99C8B;
    --border:      #352E27;
    --line-5:      rgba(237,228,214,.05);
    --line-8:      rgba(237,228,214,.08);
    --accent:      var(--accent-lit-rel, #F0A33A);
    --accent-ink:  var(--accent-lit-rel, #F0A33A);
    --accent-lit:  var(--accent-lit-rel, #F0A33A);
    --accent-soft: rgba(240,163,58,.14);
    --ox:          #E0776D;
    --brass:       #C9A55A;
    --brass-ink:   #C9A55A;
    --brass-30:    rgba(201,165,90,.30);
    --brass-40:    rgba(201,165,90,.40);
    --code-bg:     #0E0C0A;
    --code-border: #3A3128;
    --panel:       #0F0D0B;
    --panel-2:     #1A1613;
    --panel-frame: rgba(201,165,90,.30);
    --glow:        0 0 12px rgba(240,163,58,.45);
    --glow-strong: 0 0 18px rgba(240,163,58,.65);
    --selection:   #4A3418;
    --grain-blend: screen;
    --link-halo:   0 0 8px rgba(240,163,58,.35);
    --chip-hi:     rgba(255,255,255,.06);
    --glyph-glow:  drop-shadow(0 0 6px rgba(240,163,58,.55));
    --lamp-on:     1;
    --stamp-bg:    rgba(30,26,22,.92);
  }
}
:root[data-scheme="dark"] {
  color-scheme: dark;
  --bg:          #15120F;
  --surface:     #1E1A16;
  --surface-2:   #28221C;
  --text:        #EDE4D6;
  --text-2:      #D6CBBA;
  --muted:       #A99C8B;
  --border:      #352E27;
  --line-5:      rgba(237,228,214,.05);
  --line-8:      rgba(237,228,214,.08);
  --accent:      var(--accent-lit-rel, #F0A33A);
  --accent-ink:  var(--accent-lit-rel, #F0A33A);
  --accent-lit:  var(--accent-lit-rel, #F0A33A);
  --accent-soft: rgba(240,163,58,.14);
  --ox:          #E0776D;
  --brass:       #C9A55A;
  --brass-ink:   #C9A55A;
  --brass-30:    rgba(201,165,90,.30);
  --brass-40:    rgba(201,165,90,.40);
  --code-bg:     #0E0C0A;
  --code-border: #3A3128;
  --panel:       #0F0D0B;
  --panel-2:     #1A1613;
  --panel-frame: rgba(201,165,90,.30);
  --glow:        0 0 12px rgba(240,163,58,.45);
  --glow-strong: 0 0 18px rgba(240,163,58,.65);
  --selection:   #4A3418;
  --grain-blend: screen;
  --link-halo:   0 0 8px rgba(240,163,58,.35);
  --chip-hi:     rgba(255,255,255,.06);
  --glyph-glow:  drop-shadow(0 0 6px rgba(240,163,58,.55));
  --lamp-on:     1;
  --stamp-bg:    rgba(30,26,22,.92);
}

@media (min-width: 640px) {
  :root { --fs-body: 1.125rem; --lh-body: 1.7; }
}
@media (min-width: 900px) {
  :root { --frame-inset: 14px; }
}


/* ----
   2. Base / reset
   ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 30, "WONK" 0;
  line-height: 1.15;
  color: inherit;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
p { margin: 0; text-wrap: pretty; }
strong, b { font-weight: 600; }
em, i { font-style: italic; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
img, video, iframe, svg, picture { max-width: 100%; }
img, video { height: auto; }
img { display: inline-block; vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
hr { border: 0; }
details summary { cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
summary { list-style: none; }
::selection { background: var(--selection); }
table { border-spacing: 0; }

.sc-main { display: block; padding-bottom: var(--s-8); }


/* ----
   3. Typography helpers
   ---- */
.sc-label, .sc-eyebrow, .sc-meta, .sc-chip, .sc-btn, .sc-stamp, .sc-rule__label,
.sc-card__foot, .sc-card__time, .sc-card__more, .sc-row__num, .sc-row__time, .sc-tile__count,
.sc-hero__stats, .sc-band__count, .sc-author__links, .sc-nameplate__attr, .sc-notice, .sc-toc,
.sc-pagination__count, .sc-neighbor__label, .sc-footer__colophon, .sc-footer__nav, .sc-footer__social,
.sc-search, .sc-menu, .sc-lamp__tip, .sc-input, .sc-pane__bar, .sc-signup__ok, .sc-signup__err,
.sc-signup__signin, .sc-fault__code, .sc-fault__details, .sc-figure__cap, .sc-index__empty, .sc-dplate__stamp,
.sc-dplate__year, .sc-glyph--prompt, .sc-footer__exit, .sc-nav, code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums slashed-zero;
  font-variant-ligatures: none;
}

.sc-label, .sc-eyebrow {
  display: block;
  font: 500 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass-ink);
}
.sc-eyebrow { margin-bottom: var(--s-3); }
.sc-eyebrow__host { text-transform: uppercase; }

.sc-meta {
  font: 400 var(--fs-caption)/1.5 var(--font-mono);
  color: var(--muted);
  letter-spacing: .02em;
}
.sc-meta__sep { color: var(--muted); opacity: .8; }
.sc-meta__time, .sc-meta time { text-transform: uppercase; letter-spacing: .06em; }   /* 29 SEP 2016, like the wireframes */
.sc-meta .sc-chip { vertical-align: middle; }

.sc-stamp { font-weight: 500; letter-spacing: .06em; text-transform: none; }          /* "No. 030": mixed case like a real serial plate */
.sc-eyebrow .sc-stamp { text-transform: none; }

.sc-arrow {
  display: inline-block;
  transition: transform var(--t-base) var(--ease);
}


/* ----
   4. Effects — 2.4 grain, graph paper, panels
   ---- */
.sc-grain { position: relative; }
.sc-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .06;
  mix-blend-mode: var(--grain-blend);
  background-image: var(--grain-img);
  background-size: 160px 160px;
  border-radius: inherit;
}
.sc-grain > * { position: relative; z-index: 1; }
.sc-panel.sc-grain::after,
.sc-dplate--panel.sc-grain::after,
.sc-plate--panel.sc-grain::after { mix-blend-mode: screen; }

.sc-graph {
  background-color: var(--surface-2);
  background-image:
    repeating-linear-gradient(0deg,  transparent 0 11px, var(--line-5) 11px 12px),
    repeating-linear-gradient(90deg, transparent 0 11px, var(--line-5) 11px 12px),
    repeating-linear-gradient(0deg,  transparent 0 59px, var(--line-8) 59px 60px),
    repeating-linear-gradient(90deg, transparent 0 59px, var(--line-8) 59px 60px);
}

/* Panels: always dark. Components inside adopt the panel colourway. */
.sc-panel { background: var(--panel); color: var(--panel-text); }
.sc-panel a { color: var(--accent-lit); }
.sc-panel .sc-label, .sc-panel .sc-eyebrow, .sc-panel .sc-meta, .sc-panel .sc-meta__sep,
.sc-panel .sc-card__time, .sc-panel .sc-signup__sub, .sc-panel .sc-card__excerpt,
.sc-panel .sc-band__count, .sc-panel .sc-hero__stats { color: var(--panel-muted); }
.sc-panel .sc-rule, .sc-panel .sc-rule__label { color: var(--panel-brass); }
.sc-panel .sc-chip {
  background: var(--panel-2);
  border-color: var(--panel-frame);
  color: var(--panel-brass);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.sc-panel .sc-chip--tag { color: var(--accent-lit); }
.sc-panel .sc-chip:hover { border-color: var(--accent-lit); }
.sc-panel .sc-plate { background: var(--panel-2); border-color: var(--panel-frame); }
.sc-panel .sc-input { background: var(--panel); border-color: rgba(201,165,90,.55); color: var(--panel-text); }
.sc-panel .sc-input::placeholder { color: var(--panel-muted); }
.sc-panel .sc-avatar { box-shadow: 0 0 0 1px var(--panel-brass), 0 0 0 3px var(--panel); }
.sc-panel .sc-signup__heading, .sc-panel .sc-card__title a, .sc-panel .sc-author__name,
.sc-panel .sc-author__name a { color: var(--panel-text); }
.sc-panel .sc-signup__ok { color: var(--accent-lit); }
.sc-panel .sc-signup__err { color: #F0A099; }
.sc-panel .sc-btn { color: var(--panel-text); border-color: var(--panel-brass); }
.sc-panel .sc-btn:hover, .sc-panel .sc-btn:focus-visible {
  background: var(--accent-lit); border-color: var(--accent-lit); color: #1F1B17;
}
.sc-panel .sc-btn--primary { background: var(--accent-lit); border-color: var(--accent-lit); color: #1F1B17; }
.sc-panel :focus-visible { outline-color: var(--accent-lit); }


/* ----
   5. Components — 5.7 rule, chips, buttons, inputs, lamp, avatar, plate; 5.8 icons
   ---- */

/* Terminal rule: hairline ending in two hollow circles */
.sc-rule {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--brass);
  width: 100%;
}
.sc-rule__label {
  flex: 0 1 auto;
  min-width: 0;
  font: 500 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass-ink);
  padding-right: var(--s-2);
  max-width: 72%;              /* long labels ("LOGBOOK · ALL ENTRIES BY …") wrap before the line collapses to a stub */
  text-wrap: balance;
}
.sc-o {
  display: inline-block;
  flex: none;
  width: 5px;
  height: 5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  vertical-align: middle;
}
.sc-rule__line { flex: 1 1 0; height: 1px; background: currentColor; min-width: 3rem; }

/* Label-tape chip */
.sc-chip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  min-height: 28px;
  font: 500 var(--fs-label)/1.2 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  box-shadow: inset 0 1px 0 var(--chip-hi);
  color: var(--brass-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.sc-chip:hover, .sc-chip:focus-visible { border-color: var(--accent); }
.sc-chip--tag { color: var(--accent-ink); }
.sc-chip--count { font-size: var(--fs-caption); }
.sc-chip--stamp { color: var(--brass-ink); text-transform: none; }
.sc-chip--featured { color: var(--accent-ink); border-color: var(--accent); }
.sc-chip--more { cursor: pointer; }
.sc-chip--more::before { content: "▸"; font-size: .9em; transition: transform var(--t-base) var(--ease); }
details[open] > .sc-chip--more::before { transform: rotate(90deg); }
.sc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sc-chips li { display: contents; }

/* Buttons */
.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 44px;
  padding: 10px 16px;
  font: 500 var(--fs-caption)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--brass);
  border-radius: var(--r-1);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
@media (min-width: 640px) { .sc-btn { min-height: 40px; } }
.sc-btn:hover, .sc-btn:focus-visible { background: var(--accent); border-color: var(--accent); color: #1F1B17; }
.sc-btn--primary { background: var(--accent); border-color: var(--accent); color: #1F1B17; }
.sc-btn--primary:hover, .sc-btn--primary:focus-visible { filter: brightness(.92); }
.sc-btn--ghost { border-color: var(--panel-brass); color: var(--panel-text); }
.sc-btn.is-disabled { opacity: .62; border-style: dashed; pointer-events: none; }   /* .62 keeps the label near 4.5:1 */

/* Inputs */
.sc-input {
  display: block;
  width: 100%;
  min-height: 44px;
  font: 400 .9375rem/1.3 var(--font-mono);
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--brass);          /* 3:1 boundary (WCAG 1.4.11); matches the button frames */
  border-radius: var(--r-1);
  color: var(--text);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.sc-input::placeholder { color: var(--muted); opacity: 1; }
.sc-input:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: var(--glow); }

/* Pilot lamp (dark-mode toggle) */
.sc-lamp {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--panel-text);
}
.sc-lamp__ring {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--panel-brass);
  border-radius: 50%;
}
.sc-lamp__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-lit);
  box-shadow: var(--glow);
  vertical-align: middle;
  flex: none;
}
.sc-lamp .sc-lamp__dot {
  opacity: var(--lamp-on);
  box-shadow: var(--glow-strong);
  transition: opacity var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.sc-lamp__tip {
  position: absolute;
  top: calc(100% - 4px);
  left: 50%;
  transform: translateX(-50%);
  font: 500 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--panel-text);
  background: var(--panel-2);
  border: 1px solid var(--panel-frame);
  padding: 3px 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  z-index: 5;
  transition: opacity var(--t-fast) var(--ease);
}
.sc-lamp:hover .sc-lamp__tip, .sc-lamp:focus-visible .sc-lamp__tip { opacity: 1; visibility: visible; }
html.no-js .sc-lamp, body.has-scheme-light .sc-lamp, body.has-scheme-dark .sc-lamp { display: none; }

/* Avatar in a brass ring */
.sc-avatar {
  display: inline-block;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--brass), 0 0 0 3px var(--bg);
  background: var(--surface-2);
  flex: none;
}
.sc-avatar--32  { width: 32px;  height: 32px; }
.sc-avatar--64  { width: 64px;  height: 64px; }
.sc-avatar--72  { width: 72px;  height: 72px; }
.sc-avatar--160 { width: 160px; height: 160px; box-shadow: 0 0 0 2px var(--panel-brass), 0 0 0 5px var(--panel); }
.sc-avatar--empty { display: inline-grid; place-items: center; color: var(--brass); }
.sc-avatar--empty .sc-icon { width: 60%; height: 60%; }

/* Generic inset plate */
.sc-plate {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  padding: var(--s-5);
}
.sc-plate--panel { background: var(--panel-2); border-color: var(--panel-frame); color: var(--panel-text); }

/* Icons */
.sc-icon { display: inline-block; width: 18px; height: 18px; flex: none; vertical-align: middle; }
.sc-icon--menu, .sc-icon--close { width: 24px; height: 24px; }
.sc-icon--copy { width: 14px; height: 14px; }

/* Schematic glyphs: sized by --glyph (svg) and --glyph-prompt (the $ ▍ prompt) */
.sc-glyph {
  display: inline-block;
  width: var(--glyph, 40px);
  height: var(--glyph, 40px);
  flex: none;
  vertical-align: middle;
  transition: color var(--t-base) var(--ease), filter var(--t-base) var(--ease);
}
.sc-glyph--prompt {
  width: auto;
  height: auto;
  font: 500 var(--glyph-prompt, 26px)/1 var(--font-mono);
  white-space: nowrap;
  letter-spacing: 0;
}
.sc-glyph--prompt i {
  display: inline-block;
  width: .55em;
  height: 1em;
  background: currentColor;
  vertical-align: -.1em;
}
.sc-glyph--open { width: 160px; height: 64px; color: var(--brass); }

/* Skip link */
.sc-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 50;
  padding: 10px 14px;
  font: 500 var(--fs-caption)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--brass);
  border-radius: var(--r-1);
  text-decoration: none;
  transform: translateY(-200%);
  opacity: 0;
}
.sc-skip:focus, .sc-skip:focus-visible { transform: none; opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }

/* Reading progress (posts) */
.sc-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  box-shadow: var(--glow);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 40;
  pointer-events: none;
}


/* ----
   6. Masthead + navigation — 4.1
   ---- */
.sc-masthead {
  border-bottom: 1px solid var(--brass-40);
  z-index: 10;
}
.sc-masthead__inner {
  max-width: calc(var(--w-site) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
}
.sc-masthead__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--panel-text);
}
.sc-masthead__logo {
  display: block;
  height: 22px;
  width: auto;
  max-width: 42vw;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.35));
}
.sc-masthead__title {
  font: 600 1.375rem/1.1 var(--font-display);
  font-variation-settings: "SOFT" 30, "WONK" 0;
  color: var(--panel-text);
}

/* Primary nav (Ghost output: ul.nav > li.nav-{slug} > a) */
.sc-nav { display: none; }
.sc-nav .nav { list-style: none; margin: 0; padding: 0; }
.sc-nav .nav a {
  display: inline-block;
  font: 500 .8125rem/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--panel-text);
  opacity: .8;
  text-decoration: none;
  padding: var(--s-2) 0;
  transition: opacity var(--t-base) var(--ease);
}
.sc-nav .nav a:hover, .sc-nav .nav a:focus-visible { opacity: 1; }
.sc-nav .nav .nav-current a {
  opacity: 1;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent-lit);
  text-underline-offset: .5em;
}

/* Mobile: full-width panel below the bar */
.sc-nav {
  order: 10;
  flex: 1 0 calc(100% + 2 * var(--gutter));
  width: calc(100% + 2 * var(--gutter));
  margin: 0 calc(-1 * var(--gutter)) 0;
  background: var(--panel-2);
  border-top: 1px solid var(--brass-40);
}
.sc-masthead.is-open .sc-nav, html.no-js .sc-nav { display: block; }
.sc-nav .nav li { border-bottom: 1px solid var(--panel-frame); }
.sc-nav .nav a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--gutter); }
.sc-nav .nav .nav-current a { text-underline-offset: .35em; }
.sc-nav__cta { padding: var(--s-3) var(--gutter); }
.sc-nav__cta .sc-btn { width: 100%; }

.sc-masthead__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
.sc-masthead__cta { display: none; }
@media (max-width: 899.98px) {
  .sc-masthead__inner { row-gap: 0; }                            /* the bar stays 64px when the nav panel opens below it */
  .sc-masthead__brand, .sc-masthead__actions { min-height: 64px; }
}

.sc-search, .sc-menu {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--s-2);
  background: none;
  border: 0;
  border-radius: var(--r-1);
  color: var(--panel-text);
  font: 500 var(--fs-label)/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: center;
  transition: color var(--t-base) var(--ease);
}
.sc-search:hover, .sc-menu:hover { color: var(--accent-lit); }
.sc-search__label, .sc-menu__label { display: none; }
.sc-menu__icon { display: inline-flex; }
.sc-menu__icon--close { display: none; }
.sc-menu[aria-expanded="true"] .sc-menu__icon--open { display: none; }
.sc-menu[aria-expanded="true"] .sc-menu__icon--close { display: inline-flex; }
html.no-js .sc-menu { display: none; }

@media (min-width: 480px) {
  .sc-menu__label { display: inline; }
}
@media (min-width: 900px) {
  .sc-masthead__inner { min-height: 72px; flex-wrap: nowrap; }
  .sc-masthead__logo { height: 28px; max-width: none; }
  .sc-nav {
    display: flex !important;
    align-items: center;
    order: 0;
    flex: 0 1 auto;
    width: auto;
    margin: 0;
    background: none;
    border: 0;
  }
  .sc-nav .nav { display: flex; align-items: center; gap: var(--s-5); }
  .sc-nav .nav li { border: 0; }
  .sc-nav .nav a { display: inline-block; min-height: 0; padding: var(--s-2) 0; }
  .sc-nav .nav .nav-current a { text-underline-offset: .5em; }
  .sc-nav__cta { display: none; }
  .sc-masthead__cta { display: block; }
  .sc-masthead__actions { gap: var(--s-3); }
  .sc-search__label { display: inline; }
  .sc-menu { display: none; }
}


/* ----
   7. Footer — 4.1
   ---- */
.sc-footer {
  border-top: 1px solid var(--brass-40);
  margin-top: var(--s-4);
  z-index: 10;
}
.sc-footer__inner {
  max-width: calc(var(--w-site) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--s-6) var(--gutter) var(--s-5);
}
.sc-footer__cols {
  display: grid;
  gap: var(--s-7);
  margin-top: var(--s-6);
}
.sc-footer__icon {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--panel-brass), 0 0 0 4px var(--panel);
}
.sc-footer__icon--empty { display: grid; place-items: center; color: var(--panel-brass); }
.sc-footer__icon--empty .sc-o { width: 9px; height: 9px; }
.sc-footer__title {
  margin-top: var(--s-4);
  font: 600 1.25rem/1.2 var(--font-display);
  font-variation-settings: "SOFT" 30, "WONK" 0;
  color: var(--panel-text);
}
.sc-footer__desc.sc-nameplate {
  margin-top: var(--s-3);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--panel-muted);
  max-width: 34rem;
}
.sc-footer__desc .sc-nameplate__attr { margin-top: var(--s-2); }

.sc-footer__index .sc-label { margin-bottom: var(--s-3); }
.sc-footer__chips { gap: var(--s-2); }
.sc-footer__hr { height: 1px; margin: var(--s-4) 0; background: var(--brass-30); }
.sc-footer__nav .nav { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.sc-footer__nav a, .sc-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 28px;
  font: 500 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--panel-text);
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
}
.sc-footer__nav a:hover, .sc-footer__social a:hover { color: var(--accent-lit); }
.sc-footer__nav a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--panel-frame); text-underline-offset: .35em; }
.sc-footer__nav a:hover { text-decoration-color: var(--accent-lit); }
.sc-footer__social { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); }
.sc-footer__social .sc-icon { color: var(--panel-brass); }
.sc-footer__social-fallback { display: none; }

.sc-footer__member { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.sc-footer__member .sc-label { display: inline-flex; align-items: center; gap: .5em; color: var(--panel-text); }

.sc-footer__colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--brass-30);
  font: 400 var(--fs-label)/1.5 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--panel-muted);
}
.sc-footer__copy a { color: var(--panel-text); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--panel-brass); }
.sc-footer__copy a:hover { color: var(--accent-lit); }
.sc-footer__exit { color: var(--panel-brass); text-transform: none; letter-spacing: 0; }
.sc-footer--minimal .sc-footer__colophon { margin-top: 0; border-top: 0; padding-top: 0; }

@media (min-width: 640px) and (max-width: 899.98px) {
  .sc-footer__cols { grid-template-columns: 1fr 1fr; }
  .sc-footer__mark { grid-column: 1 / -1; }                      /* mark full width, then CHANNELS | SIGN-UP side by side */
}
@media (min-width: 900px) {
  .sc-footer__inner { padding-top: var(--s-7); }
  .sc-footer__cols { grid-template-columns: 2fr 1.2fr 1.4fr; gap: var(--s-7); }
}


/* ----
   8. Hero — 4.2.1 front panel / cover
   ---- */
.sc-hero {
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter);
  border-bottom: 1px solid var(--brass-40);
  z-index: 1;
}
.sc-hero--cover { background-size: cover; background-position: center; }
.sc-hero--cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(rgba(21,18,15,.72), rgba(21,18,15,.90));
}

/* Brass inset frame with four hollow corner terminals (hero + author band) */
.sc-hero__frame, .sc-band__frame { position: static; z-index: auto; }
.sc-hero__frame::before, .sc-band__frame::before {
  content: "";
  position: absolute;
  inset: var(--frame-inset);
  border: 1px solid var(--panel-frame);
  pointer-events: none;
  z-index: 1;
}
.sc-hero__frame::after, .sc-band__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(circle, var(--panel) 3px, var(--panel-brass) 3px 4px, transparent 4.5px),
    radial-gradient(circle, var(--panel) 3px, var(--panel-brass) 3px 4px, transparent 4.5px),
    radial-gradient(circle, var(--panel) 3px, var(--panel-brass) 3px 4px, transparent 4.5px),
    radial-gradient(circle, var(--panel) 3px, var(--panel-brass) 3px 4px, transparent 4.5px);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position:
    calc(var(--frame-inset) - 6px) calc(var(--frame-inset) - 6px),
    calc(100% - var(--frame-inset) + 6px) calc(var(--frame-inset) - 6px),
    calc(var(--frame-inset) - 6px) calc(100% - var(--frame-inset) + 6px),
    calc(100% - var(--frame-inset) + 6px) calc(100% - var(--frame-inset) + 6px);
}
.sc-hero__inner, .sc-band__inner { position: relative; z-index: 1; }
.sc-hero__inner {
  max-width: var(--w-site);
  margin-inline: auto;
  display: grid;
  gap: var(--s-7);
}
.sc-hero__copy { max-width: 40rem; }
.sc-hero__title {
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--panel-text);
  max-width: 12ch;
}
.sc-hero__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  background: var(--panel-brass);
  margin-top: var(--s-5);
}
.sc-nameplate {
  margin-top: var(--s-5);
  font: italic 500 var(--fs-nameplate)/1.35 var(--font-display);
  font-variation-settings: "SOFT" 30, "WONK" 0;
  color: var(--accent-lit);
  hanging-punctuation: first;
  max-width: 30em;
}
.sc-nameplate__attr {
  display: block;
  margin-top: var(--s-3);
  font: 500 var(--fs-label)/1.2 var(--font-mono);
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--panel-muted);
}
.sc-hero__stats {
  margin-top: var(--s-5);
  font: 500 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--panel-muted);
}
.sc-hero__bench { min-width: 0; }
.sc-hero__bench-label { margin-bottom: var(--s-3); }

@media (min-width: 900px) {
  .sc-hero__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: var(--s-8);
    align-items: center;
  }
}


/* ----
   Shared page containers (root-level sections)
   ---- */
.sc-channels, .sc-logbook, .sc-cloud, .sc-main > .sc-related-wrap, .sc-fault-wrap {
  max-width: calc(var(--w-site) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sc-channels, .sc-logbook, .sc-cloud, .sc-main > .sc-related-wrap { margin-top: var(--s-7); }


/* ----
   9. Channels — 4.2.2
   ---- */
.sc-tiles {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
.sc-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  height: 100%;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  color: var(--text);
  text-decoration: none;
  transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.sc-tile:hover, .sc-tile:focus-visible, .sc-tiles li:focus-within .sc-tile {
  box-shadow: inset 3px 0 0 var(--accent);
}
.sc-tile__glyph {
  display: flex;
  align-items: center;
  height: 40px;
  margin-bottom: var(--s-2);
  color: var(--tag-accent, var(--brass));
  --glyph: 40px;
  --glyph-prompt: 26px;
}
.sc-tile:hover .sc-tile__glyph, .sc-tile:focus-visible .sc-tile__glyph { color: var(--accent); }
.sc-tile:hover .sc-glyph { filter: var(--glyph-glow); }
.sc-tile__name {
  font: 600 var(--fs-tile)/1.2 var(--font-display);
  font-variation-settings: "SOFT" 30, "WONK" 0;
  text-wrap: balance;
}
.sc-tile__count {
  font: 500 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass-ink);
}
.sc-tile__desc { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
@media (min-width: 640px) {
  .sc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .sc-tile { padding: var(--s-5); }
}
@media (min-width: 900px) {
  .sc-tiles { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}


/* ----
   10. Logbook — 4.2.3 feed, 5.4 cards, 4.9 datasheet plates
   ---- */
.sc-logbook__grid { margin-top: var(--s-4); }
.sc-feed--list .sc-card { padding: var(--s-6) 0; border-top: var(--hairline); }
.sc-feed--list .sc-card:first-child { border-top: 0; padding-top: var(--s-4); }
.sc-feed--grid {
  display: grid;
  gap: var(--s-6);
  padding-top: var(--s-4);
}
.sc-feed--grid .sc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  padding: var(--s-4);
}

/* Card — shared */
.sc-card {
  position: relative;
  display: grid;
  gap: var(--s-4);
  align-content: start;
}
.sc-card__media { position: relative; aspect-ratio: 16 / 9; min-width: 0; }
.sc-card--noimage .sc-card__media { aspect-ratio: auto; height: 72px; }
.sc-card__img { display: block; height: 100%; border-radius: var(--r-1); }
.sc-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  background: var(--surface-2);            /* visible plate while a lazy image loads */
  transition: outline-color var(--t-base) var(--ease);
}
.sc-card__stamp {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: var(--surface);
  background: var(--stamp-bg);
}
.sc-card__body { min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.sc-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.sc-card__meta .sc-chip { position: relative; z-index: 2; }
.sc-card__title {
  font-size: var(--fs-card-l);
  line-height: 1.15;
}
.sc-card__title a { color: var(--text); text-decoration: none; }
.sc-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sc-card__excerpt {
  font-size: var(--fs-excerpt);
  line-height: 1.5;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.sc-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  margin-top: auto;
  font: 500 var(--fs-caption)/1.2 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.sc-card__more { color: var(--accent-ink); display: inline-flex; align-items: center; gap: .35em; }

/* Card hover / focus: underline, outline, arrow slide, glow */
.sc-card:hover .sc-card__title a, .sc-card:focus-within .sc-card__title a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: .12em;
}
.sc-card:hover .sc-card__img img, .sc-card:focus-within .sc-card__img img,
.sc-card:hover .sc-dplate, .sc-card:focus-within .sc-dplate {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}
.sc-card:hover .sc-arrow, .sc-card:focus-within .sc-arrow { transform: translateX(4px); }
.sc-card:hover .sc-dplate, .sc-card:focus-within .sc-dplate,
.sc-card:hover .sc-dplate__stamp, .sc-card:focus-within .sc-dplate__stamp { color: var(--accent); }
.sc-card:hover .sc-dplate .sc-glyph { filter: var(--glyph-glow); }

/* Grid variant text */
.sc-feed--grid .sc-card__title { font-size: var(--fs-card-g); }
.sc-feed--grid .sc-card__excerpt { -webkit-line-clamp: 2; }

/* Compact (related / error) */
.sc-card--compact { gap: var(--s-3); }
.sc-card--compact .sc-card__title { font-size: var(--fs-card-c); line-height: 1.25; }
.sc-card--compact .sc-card__excerpt { -webkit-line-clamp: 2; font-size: var(--fs-small); }
.sc-card--compact .sc-card__body { gap: var(--s-2); }
.sc-card--compact .sc-dplate__tag { display: none; }

/* Bench (hero, on --panel-2) */
.sc-card--bench {
  background: var(--panel-2);
  border: 1px solid var(--panel-frame);
  border-radius: var(--r-1);
  padding: var(--s-4);
  gap: var(--s-4);
}
.sc-card--bench .sc-card__img img { border-color: var(--panel-frame); }
.sc-card--bench .sc-card__title {
  font-size: 1.5rem;
  line-height: 1.15;
}
.sc-card--bench .sc-card__title a { color: var(--panel-text); }
.sc-card--bench .sc-card__excerpt { -webkit-line-clamp: 2; color: var(--panel-muted); }
.sc-card--bench .sc-card__foot { color: var(--panel-muted); }
.sc-card--bench .sc-card__more { color: var(--accent-lit); }
.sc-card--bench:hover .sc-card__title a, .sc-card--bench:focus-within .sc-card__title a { text-decoration-color: var(--accent-lit); }
.sc-card--bench:hover .sc-card__img img, .sc-card--bench:hover .sc-dplate,
.sc-card--bench:focus-within .sc-card__img img, .sc-card--bench:focus-within .sc-dplate { outline-color: var(--accent-lit); }
.sc-card--bench .sc-card__stamp { background: var(--panel); color: var(--panel-brass); }

/* Datasheet plate (imageless media slot) */
.sc-dplate {
  height: 100%;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  color: var(--brass);
  overflow: hidden;
  transition: color var(--t-base) var(--ease), outline-color var(--t-base) var(--ease);
  /* <640: 72px strip — stamp · glyph · year */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0 var(--s-3);
  --glyph: 28px;
  --glyph-prompt: 20px;
}
.sc-dplate__stamp {
  font: 500 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: none;
  color: var(--brass-ink);
  white-space: nowrap;
}
.sc-dplate__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 0;
}
.sc-dplate__tag { display: none; }
.sc-dplate__year {
  font: 400 var(--fs-caption)/1.2 var(--font-mono);
  color: var(--muted);
  white-space: nowrap;
}
.sc-dplate--panel {
  --line-5: rgba(237,228,214,.05);
  --line-8: rgba(237,228,214,.08);
  background-color: var(--panel-2);
  border-color: var(--panel-frame);
  color: var(--panel-brass);
}
.sc-dplate--panel .sc-dplate__stamp, .sc-dplate--panel .sc-dplate__year { color: var(--panel-muted); }

/* Mini plate (index-row swatch) */
.sc-dplate--mini {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  --glyph: 22px;
  --glyph-prompt: 18px;
}

@media (min-width: 640px) {
  .sc-card__media, .sc-card--noimage .sc-card__media { height: auto; aspect-ratio: 16 / 10; }
  .sc-feed--list .sc-card__media, .sc-feed--list .sc-card--noimage .sc-card__media { aspect-ratio: 4 / 3; }
  .sc-card--bench .sc-card__media, .sc-card--bench.sc-card--noimage .sc-card__media { aspect-ratio: 16 / 9; }
  .sc-feed--list .sc-card {
    grid-template-columns: 38% minmax(0, 1fr);
    gap: var(--s-5);
    align-items: start;
  }
  .sc-feed--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-feed--grid .sc-card { grid-template-columns: 1fr; }

  /* full datasheet plate: stamp top-left, glyph centre, tag bottom-left, year bottom-right */
  .sc-dplate {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "stamp stamp" "glyph glyph" "tag year";
    padding: var(--s-3);
    gap: var(--s-2);
    --glyph: 52px;
    --glyph-prompt: 28px;
  }
  .sc-dplate__stamp { grid-area: stamp; justify-self: start; }
  .sc-dplate__glyph { grid-area: glyph; align-self: center; justify-self: center; }
  .sc-dplate__tag { display: inline-flex; grid-area: tag; align-self: end; justify-self: start; }
  .sc-dplate__year { grid-area: year; align-self: end; justify-self: end; }
  .sc-card--compact .sc-dplate { --glyph: 44px; --glyph-prompt: 24px; }
  .sc-dplate--mini { display: flex; padding: 0; --glyph: 24px; --glyph-prompt: 20px; }
}
@media (min-width: 900px) {
  .sc-card--bench .sc-card__media, .sc-card--bench.sc-card--noimage .sc-card__media { aspect-ratio: 4 / 3; }
}
@media (min-width: 1024px) {
  .sc-feed--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-logbook.has-sidebar .sc-logbook__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--w-sidebar);
    grid-template-rows: auto 1fr;            /* the sidebar's extra height goes to row 2, so pagination hugs a short index */
    gap: var(--s-7);
    align-items: start;
  }
  .sc-logbook.has-sidebar .sc-sidebar { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: var(--s-5); margin-top: var(--s-4); }
  .sc-logbook.has-sidebar .sc-pagination { grid-column: 1; align-self: start; margin-block: var(--s-6) 0; }
  .sc-logbook.has-sidebar .sc-feed--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .sc-logbook.has-sidebar .sc-feed--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sc-logbook:not(.has-sidebar) .sc-logbook__grid { max-width: var(--w-wide); margin-inline: auto; }

/* Below-the-fold rendering budget (SPEC 10.3) deliberately NOT applied: content-visibility: auto left
   off-screen cards unpainted in full-page captures and print; 12 cards per page do not need it. */


/* ----
   11. Index rows — 5.5 (tag + author archives)
   ---- */
.sc-index { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.sc-row {
  position: relative;
  display: grid;
  grid-template-columns: 48px auto auto 1fr;
  grid-template-areas: "swatch main main main" "swatch num tag time";
  gap: var(--s-2) var(--s-3);
  align-items: center;
  padding: var(--s-4) 0;
  border-top: var(--hairline);
}
.sc-row:first-child { border-top: 0; padding-top: var(--s-3); }
.sc-row__swatch {
  grid-area: swatch;
  align-self: start;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--r-1);
}
.sc-row__swatch img, .sc-row__swatch .sc-dplate {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  background-color: var(--surface-2);
}
.sc-row__num {
  grid-area: num;
  font: 500 var(--fs-caption)/1.2 var(--font-mono);
  color: var(--brass-ink);
  letter-spacing: .04em;
}
.sc-row__main { grid-area: main; min-width: 0; }
.sc-row__title { font-size: var(--fs-card-c); line-height: 1.25; }
.sc-row__title a { color: var(--text); text-decoration: none; }
.sc-row__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sc-row__excerpt {
  display: none;
  margin-top: var(--s-1);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-row__tag { grid-area: tag; position: relative; z-index: 2; justify-self: start; }
.sc-row__time {
  grid-area: time;
  justify-self: start;
  font: 500 var(--fs-caption)/1.2 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.sc-row:hover .sc-row__title a, .sc-row:focus-within .sc-row__title a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: .12em;
}
.sc-row:hover .sc-row__swatch img, .sc-row:hover .sc-row__swatch .sc-dplate,
.sc-row:focus-within .sc-row__swatch img, .sc-row:focus-within .sc-row__swatch .sc-dplate {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  color: var(--accent);
}
.sc-index__empty {
  padding: var(--s-6) 0;
  font: 500 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (min-width: 900px) {
  .sc-row {
    grid-template-columns: 56px 4.5ch minmax(0, 1fr) auto minmax(5ch, auto);
    grid-template-areas: "swatch num main tag time";
    gap: var(--s-4);
  }
  .sc-row__swatch { width: 56px; height: 56px; align-self: center; }
  .sc-row__excerpt { display: block; }
  .sc-row__time { justify-self: end; text-align: right; }
}


/* ----
   12. Sidebar, author plate, sign-up plate, tag index — 5.6
   ---- */
.sc-sidebar { margin-top: var(--s-7); display: grid; gap: var(--s-5); align-content: start; }
.sc-sidebar > .sc-plate { margin: 0; }
@media (min-width: 640px) and (max-width: 1023.98px) {
  .sc-sidebar { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .sc-sidebar > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .sc-sidebar { margin-top: 0; }
}

/* Author plate */
.sc-author__avatar { display: inline-block; line-height: 0; }
.sc-author__name {
  font-size: 1.125rem;
  line-height: 1.25;
}
.sc-author__name a { color: var(--text); text-decoration: none; display: inline-block; padding-block: .15rem; }
.sc-author__name a:hover { color: var(--accent-ink); }
.sc-author__bio { margin-top: var(--s-2); font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.sc-author__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-3);
  font: 500 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sc-author__links a { color: var(--brass-ink); text-decoration: none; display: inline-flex; align-items: center; gap: .35em; padding-block: .4rem; margin-block: -.4rem; }   /* >= 24px hit box, same visual rhythm */
.sc-author__links a:hover { color: var(--accent-ink); }
.sc-author__links a:hover .sc-arrow { transform: translateX(4px); }
.sc-author__about { color: var(--accent-ink) !important; }
.sc-author--72 { display: block; }
.sc-author--72 .sc-author__avatar { margin-bottom: var(--s-4); }
.sc-author--64 { display: flex; align-items: center; gap: var(--s-5); }
.sc-author--64 .sc-author__body { min-width: 0; flex: 1 1 auto; }

/* Sign-up plate */
.sc-signup__heading {
  font-size: 1.25rem;
  line-height: 1.2;
}
.sc-signup__sub { margin-top: var(--s-2); font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.sc-signup__form { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.sc-signup__input { flex: 1 1 12rem; min-width: 0; }
.sc-signup__btn { flex: 0 0 auto; }
.sc-signup--sidebar .sc-signup__btn, .sc-signup--footer .sc-signup__btn { flex: 1 1 100%; width: 100%; }
.sc-signup__ok, .sc-signup__err {
  display: none;
  flex: 1 1 100%;
  font: 500 var(--fs-label)/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sc-signup__ok { color: var(--accent-ink); align-items: center; gap: .5em; }
.sc-signup__err { color: var(--ox); }
.sc-signup__form.loading .sc-signup__btn { opacity: .5; cursor: progress; }
.sc-signup__form.success .sc-signup__input, .sc-signup__form.success .sc-signup__btn { display: none; }
.sc-signup__form.success .sc-signup__ok { display: flex; }
.sc-signup__form.error .sc-signup__err { display: block; }
.sc-signup__signin {
  margin-top: var(--s-3);
  font: 400 var(--fs-caption)/1.5 var(--font-mono);
  color: var(--muted);
}
.sc-signup__signin a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; letter-spacing: .06em; }
.sc-signup__signin a:hover { text-decoration-thickness: 2px; }

/* Tag index */
.sc-tagindex { margin-top: var(--s-4); }
.sc-sidebar__tags .sc-tagindex { margin-top: var(--s-4); }
.sc-cloud .sc-tagindex { margin-top: var(--s-4); }


/* ----
   13. Pagination — 4.2.4
   ---- */
.sc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-block: var(--s-7);
}
.sc-pagination__count {
  font: 500 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
}


/* ----
   14. Bands — 4.3 archive, 4.6 tag, 4.7 author
   ---- */
.sc-band { border-bottom: var(--hairline); padding: var(--s-6) var(--gutter); }
.sc-band__inner { max-width: var(--w-site); margin-inline: auto; }
.sc-band__eyebrow { display: flex; align-items: center; gap: .6em; }
.sc-band__eyebrow::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 1px;
  background: var(--tag-accent, var(--brass));
}
.sc-band__title {
  font-size: var(--fs-band);
  line-height: 1.1;
  max-width: 18ch;
}
.sc-band--archive .sc-band__title { font-size: 2.25rem; }
.sc-band__desc {
  margin-top: var(--s-3);
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--text-2);
  max-width: 40rem;
}
.sc-band__count {
  margin-top: var(--s-4);
  font: 500 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sc-band--tag .sc-band__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); }
.sc-band__copy { min-width: 0; }
.sc-band__thumb { flex: none; width: 120px; height: 120px; object-fit: cover; border: 1px solid var(--border); border-radius: var(--r-1); }

/* Author band (panel with brass frame) */
.sc-band--panel {
  border-bottom: 1px solid var(--brass-40);
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
  background-size: cover;
  background-position: center;
}
.sc-band--panel[style*="background-image"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(rgba(21,18,15,.72), rgba(21,18,15,.90));
}
.sc-band--panel .sc-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-5);
}
.sc-band--panel .sc-band__eyebrow { justify-content: center; }
.sc-band--panel .sc-band__eyebrow::before { background: var(--panel-brass); }
.sc-band--panel .sc-band__title { color: var(--panel-text); max-width: none; }
.sc-author--band .sc-author__name { font-size: 2.5rem; line-height: 1.1; }
.sc-band--panel .sc-band__count { color: var(--panel-muted); }
.sc-band--panel .sc-author__links { justify-content: center; color: var(--panel-muted); }
.sc-band--panel .sc-author__links a { color: var(--panel-brass); }
.sc-band--panel .sc-author__links a:hover { color: var(--accent-lit); }
.sc-band--panel .sc-author__about { color: var(--accent-lit) !important; }
.sc-band--panel .sc-author__bio { margin-top: var(--s-4); font-size: var(--fs-lede); color: var(--panel-text); max-width: 36rem; }
.sc-band--panel .sc-nameplate { margin-inline: auto; }
.sc-author__avatar--band { position: relative; width: 112px; height: 112px; line-height: 0; }
.sc-author__avatar--band .sc-avatar { width: 100%; height: 100%; }
.sc-author__pilot { position: absolute; left: 90%; top: 72%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--panel), var(--glow); }
.sc-social { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-4); }
.sc-social a {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--panel-frame);
  border-radius: var(--r-1);
  color: var(--panel-brass);
}
.sc-social a:hover { color: var(--accent-lit); border-color: var(--accent-lit); }

@media (min-width: 900px) {
  .sc-band { padding: var(--s-7) var(--gutter); }
  .sc-band--panel .sc-band__inner {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--s-7);
  }
  .sc-band--panel .sc-band__eyebrow, .sc-band--panel .sc-author__links, .sc-band--panel .sc-social { justify-content: flex-start; }
  .sc-band--panel .sc-nameplate { margin-inline: 0; }
  .sc-author__avatar--band { width: 160px; height: 160px; flex: none; }
}


/* ----
   15. Article — 4.4 post, 4.5 page
   ---- */
.sc-article {
  max-width: calc(var(--w-wide) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--s-6) var(--gutter) 0;
}
@media (min-width: 900px) { .sc-article { padding-top: var(--s-7); } }

.sc-article__head { max-width: var(--w-wide); }
.sc-article__head .sc-eyebrow .sc-stamp { color: var(--accent-ink); }
.sc-article__head .sc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
.sc-article__title {
  font-size: var(--fs-h1);
  line-height: 1.08;
  max-width: 22ch;
  letter-spacing: -.005em;
}
.sc-article__lede {
  margin-top: var(--s-4);
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--muted);
  max-width: var(--w-measure);
}
.sc-byline { margin-top: var(--s-4); }
.sc-byline a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text);
  text-decoration: none;
}
.sc-byline a:hover .sc-byline__name { color: var(--accent-ink); }
.sc-byline__name { font-weight: 600; font-size: .9375rem; }
.sc-notice {
  margin-top: var(--s-4);
  font: 500 var(--fs-caption)/1.5 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  padding: var(--s-3) var(--s-4);
  max-width: var(--w-wide);
}

/* Feature image */
.sc-article__figure { margin: var(--s-6) 0 0; }
.sc-feature {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto 16 / 9;               /* reserves a box before the image arrives (Ghost exposes no dimensions) */
  max-height: 640px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
}
/* WordPress-era images narrower than the column (JS adds .is-small) sit at natural size on a graph plate instead of being upscaled */
.sc-feature.is-small {
  object-fit: scale-down;
  background-color: var(--surface-2);
  background-image:
    repeating-linear-gradient(0deg,  transparent 0 11px, var(--line-5) 11px 12px),
    repeating-linear-gradient(90deg, transparent 0 11px, var(--line-5) 11px 12px),
    repeating-linear-gradient(0deg,  transparent 0 59px, var(--line-8) 59px 60px),
    repeating-linear-gradient(90deg, transparent 0 59px, var(--line-8) 59px 60px);
}
.sc-figure__cap {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font: 400 var(--fs-caption)/1.5 var(--font-mono);
  letter-spacing: .01em;
  color: var(--brass-ink);
  text-align: left;
}
.sc-figure__cap .sc-o { position: relative; top: -1px; }
.sc-figure__text { min-width: 0; }         /* one flex item, so multi-node captions (links) wrap as prose */
.sc-article > .sc-rule { margin-top: var(--s-6); }

/* Body: centred measure by default; grid with the rail when the JS unhides it (>= 1280) */
.sc-article__body { margin-top: var(--s-7); }
.sc-content { max-width: var(--w-measure); margin-inline: auto; }
.sc-article__foot, .sc-article__after { max-width: var(--w-measure); margin-inline: auto; }

/* Table of contents */
.sc-toc--inline {
  max-width: var(--w-measure);
  margin: 0 auto var(--s-6);
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--r-1);
  padding: var(--s-3) var(--s-4);
}
.sc-toc--inline:not([hidden]) { min-height: 3.25rem; }   /* the summary row never shifts once the list arrives */
.sc-toc__summary {
  display: flex;
  align-items: center;
  gap: .6em;
  min-height: 28px;
  font: 500 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass-ink);
}
.sc-toc__summary::before { content: "▸"; transition: transform var(--t-base) var(--ease); }
.sc-toc--inline[open] .sc-toc__summary::before { transform: rotate(90deg); }
.sc-toc__list { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.sc-toc__item { margin: 0; }
.sc-toc__link {
  display: flex;
  align-items: baseline;
  gap: .4em;
  padding: .3rem .75rem;
  border-left: 2px solid transparent;
  font: 400 var(--fs-caption)/1.45 var(--font-mono);
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.sc-toc__link:hover { color: var(--text); }
.sc-toc__item--h3 .sc-toc__link { padding-left: 1.75rem; }
.sc-toc__item.is-active > .sc-toc__link { color: var(--accent-ink); border-left-color: var(--accent); }
.sc-toc__num { flex: none; color: var(--brass-ink); font-weight: 500; }
.sc-toc__item.is-active .sc-toc__num { color: var(--accent-ink); }
.sc-toc--rail {
  position: sticky;
  top: var(--s-5);
  max-height: calc(100vh - 3rem);
  overflow: auto;
  align-self: start;
  padding-bottom: var(--s-4);
  scrollbar-width: thin;
}
.sc-toc--rail .sc-toc__list { margin-top: var(--s-4); }

@media (min-width: 1280px) {
  .sc-article__body.has-toc:has(> .sc-toc--rail:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, var(--w-measure)) var(--w-rail);
    grid-template-rows: auto;
    gap: var(--s-7);
    align-items: start;
  }
  /* Explicit placement: the prose and the rail own row 1; anything else injected into the body (an AdSense <ins>, a
     code-injection <div>) stacks in column 1 and can never push the article into the 288px rail column. */
  .sc-article__body.has-toc:has(> .sc-toc--rail:not([hidden])) > .sc-content { grid-column: 1; grid-row: 1; margin-inline: 0; }
  .sc-article__body.has-toc:has(> .sc-toc--rail:not([hidden])) > .sc-toc--rail { grid-column: 2; grid-row: 1; }
  .sc-article__body.has-toc:has(> .sc-toc--rail:not([hidden])) > :not(.sc-content):not(.sc-toc) { grid-column: 1; }
  .sc-article:has(.sc-toc--rail:not([hidden])) .sc-article__foot,
  .sc-article:has(.sc-toc--rail:not([hidden])) .sc-article__after { margin-inline: 0; }
}


/* ----
   16. Content — SPEC 7 (.sc-content.sc-prose): Koenig cards + WordPress import markup
   ---- */
.sc-content {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  counter-reset: sec fig;
}
.sc-content::after { content: ""; display: block; clear: both; }
.sc-content > * { margin-block: 0 0; }

/* 7.3 paragraphs, links, inline */
/* Long unbreakable tokens (bare URLs, paths) wrap instead of overflowing the phone column: break-word keeps normal
   min-content sizing for prose; links (whose text is often the URL itself) may break anywhere. */
.sc-content p, .sc-content li, .sc-content dd, .sc-content dt, .sc-content td, .sc-content th, .sc-content figcaption, .sc-content blockquote { overflow-wrap: break-word; }
.sc-content a { overflow-wrap: anywhere; }
.sc-content p {
  margin: 0 0 1.25em;
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 10 5 4;           /* no "be-came" / "me-dia": 10-letter words, 5 before, 4 after the break */
  -webkit-hyphenate-limit-before: 5;
  -webkit-hyphenate-limit-after: 4;
  hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-lines: 2;
}
.sc-content a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--accent-ink) 55%, transparent);
  transition: text-decoration-thickness var(--t-base) var(--ease), color var(--t-base) var(--ease), text-decoration-color var(--t-base) var(--ease);
}
.sc-content a:hover, .sc-content a:focus-visible {
  text-decoration-thickness: 3px;
  text-decoration-color: var(--accent-ink);
  text-shadow: var(--link-halo);
}
.sc-content mark { background: var(--accent-soft); color: inherit; padding: 0 .15em; }
.sc-content small { font-size: var(--fs-caption); }
.sc-content sub, .sc-content sup { font-size: max(.7em, .75rem); line-height: 0; position: relative; vertical-align: baseline; }
.sc-content sup { top: -.5em; }
.sc-content sub { bottom: -.25em; }
.sc-content abbr[title] { text-decoration: underline dotted; text-underline-offset: .18em; }
.sc-content kbd {
  font-size: .85em;
  padding: .05em .4em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  box-shadow: inset 0 -1px 0 var(--border);
}
.sc-content img, .sc-content video, .sc-content iframe, .sc-content svg { max-width: 100%; height: auto; }
.sc-content figure img, .sc-content > img, .sc-content .kg-image-card img {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
}
/* WordPress "custom border" figures carry style="border-style:none;border-width:0px" inline: keep the theme frame (SPEC 7.8) */
.sc-content figure.has-custom-border img[style*="border"] { border: 1px solid var(--border) !important; border-radius: var(--r-1) !important; }
/* images inside running text or table cells stay inline and unframed (badges, icons, affiliate pixels) */
.sc-content p img, .sc-content li img, .sc-content td img, .sc-content th img {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  max-width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
}
.sc-content img[width="1"][height="1"] { display: none; }
.sc-content figure.wp-block-image:not(.alignleft):not(.alignright):not(.is-resized) > img:not([width]),
.sc-content .kg-image-card > img:not([width]) { aspect-ratio: auto 4 / 3; }
.sc-content .is-style-rounded img { border-radius: 8px; }
.sc-content > img { margin: 2rem auto; }

/* 7.2 headings + § counters */
.sc-content h1, .sc-content h2, .sc-content h3, .sc-content h4, .sc-content h5, .sc-content h6 { clear: both; scroll-margin-top: 1rem; }
.sc-content h1 {                            /* five imported posts use h1 as their section heading: render it as an h2 */
  font-size: var(--fs-h2);
  line-height: 1.2;
  margin: 2.25em 0 .6em;
}
.sc-content h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
  margin: 2.25em 0 .6em;
}
.sc-content h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-style: normal;
  margin: 1.75em 0 .6em;
}
.sc-content h4 {
  font: 500 var(--fs-h4)/1.4 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brass-ink);
  margin: 1.5em 0 .6em;
}
.sc-content h5, .sc-content h6 {
  font: 500 var(--fs-caption)/1.4 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.5em 0 .6em;
}
.sc-content.is-numbered :is(h1, h2):not(:is(.kg-card, .kg-header-card, .kg-signup-card, .kg-toggle-card, .kg-product-card, .sc-cta) :is(h1, h2)) { counter-increment: sec; }
.sc-content.is-numbered :is(h1, h2):not(:is(.kg-card, .kg-header-card, .kg-signup-card, .kg-toggle-card, .kg-product-card, .sc-cta) :is(h1, h2))::before {
  content: "§ " counter(sec, decimal-leading-zero);
  display: block;
  font: 500 var(--fs-label)/1 var(--font-mono);
  font-variation-settings: normal;
  letter-spacing: .08em;
  color: var(--brass-ink);
  margin-bottom: .5rem;
}
.sc-content > :is(pre, figure, .sc-pane, .kg-card, .wp-block-syntaxhighlighter-code, .sc-table, table, blockquote) + :is(h1, h2, h3, h4) { margin-top: 1.5em; }
.sc-content > :first-child { margin-top: 0; }

/* 7.4 lists */
.sc-content ul, .sc-content ol { margin: 0 0 1.25em; display: flow-root; }   /* own formatting context: markers stay clear of floated figures */
.sc-content ul { padding-left: 1.4em; list-style: disc; }
.sc-content ul ul { list-style: circle; margin-top: .45em; }
.sc-content ul li::marker { color: var(--brass); }
.sc-content ol { padding-left: 2.2em; list-style: decimal; }
.sc-content ol li::marker {
  font: 500 .85em/1 var(--font-mono);
  color: var(--brass-ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.sc-content li { margin-bottom: .45em; }
.sc-content li > p { margin-bottom: .5em; }
.sc-content li > ul, .sc-content li > ol { margin-top: .45em; margin-bottom: 0; }
.page-template .sc-content ul > li::marker { content: "— "; color: var(--brass-ink); font-family: var(--font-mono); font-weight: 500; }
.page-template .sc-content ul { padding-left: 1.6em; }
.sc-content ul.checklist { list-style: none; padding-left: 0; }
.sc-content input[type="checkbox"] { accent-color: var(--accent); margin-right: .5em; }

/* 7.5 blockquotes */
.sc-content blockquote {
  position: relative;
  margin: 2rem 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--ox);
  font: italic 500 1.15em/1.5 var(--font-display);
  font-variation-settings: "SOFT" 30, "WONK" 0;
  color: var(--text-2);
  hanging-punctuation: first;
}
.sc-content blockquote::before {
  content: "\201C";
  position: absolute;
  left: .6rem;
  top: -1.4rem;
  font: 700 4rem/1 var(--font-display);
  font-variation-settings: "SOFT" 30, "WONK" 0;
  font-style: normal;
  color: var(--brass);
  opacity: .12;
  pointer-events: none;
  display: none;
}
.sc-content blockquote p { margin-bottom: .75em; hyphens: manual; }
.sc-content blockquote p:last-child { margin-bottom: 0; }
.sc-content blockquote cite, .sc-content .wp-block-quote cite {
  display: block;
  margin-top: .6em;
  font: 400 var(--fs-caption)/1.5 var(--font-mono);
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.sc-content blockquote cite::before { content: "— "; }
.sc-content blockquote strong { font-weight: 700; }
.sc-content blockquote.kg-blockquote-alt {
  border-left: 0;
  border-top: 1px solid var(--brass);
  border-bottom: 1px solid var(--brass);
  padding: 2.75rem 2rem 1.25rem;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.4;
}
.sc-content blockquote.kg-blockquote-alt::before {
  display: block;
  left: 50%;
  top: .5rem;
  transform: translateX(-50%);
}
@media (min-width: 640px) {
  .sc-content blockquote::before { display: block; }
}

/* 7.6 code panes + inline code */
.sc-content pre {
  margin: 2rem 0;
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--code-border);
  border-radius: var(--r-2);
  padding: 1.1rem 1.25rem;
  font: 400 var(--fs-code)/1.6 var(--font-mono);
  white-space: pre;
  overflow-x: auto;
  tab-size: 4;
  -webkit-overflow-scrolling: touch;
  font-variant-ligatures: none;
  hyphens: none;
  -webkit-hyphens: none;
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: var(--code-amber) var(--code-bg);
  transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.sc-content pre::-webkit-scrollbar { height: 8px; }
.sc-content pre::-webkit-scrollbar-track { background: var(--code-bg); }
.sc-content pre::-webkit-scrollbar-thumb { background: var(--code-amber); border-radius: 4px; }
.sc-content pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; font-family: inherit; white-space: inherit; }
.sc-content pre span[style*="#ff0000"], .sc-content pre span[style*="#FF0000"], .sc-content pre span[style*="red"] { color: #FF8A7A !important; }
.sc-content.has-wrapped-code pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-prompt { color: var(--code-amber); }

.sc-pane { position: relative; margin: 2rem 0; }
.sc-pane pre { margin: 0; }
.sc-pane__bar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.sc-pane__lang {
  font: 500 var(--fs-label)/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--code-muted);
  padding: 4px 6px;
}
.sc-pane__copy {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 28px;
  padding: 4px 8px;
  font: 500 var(--fs-label)/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--code-text);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--code-border);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: opacity var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.sc-pane__copy:hover, .sc-pane__copy:focus-visible { border-color: var(--code-amber); color: var(--code-amber); }
.sc-pane__copy .sc-lamp__dot { width: 8px; height: 8px; box-shadow: var(--glow); opacity: 1; }
.sc-pane.is-copied .sc-pane__copy { color: var(--code-amber); border-color: var(--code-amber); }
.sc-pane.is-copied pre { border-color: var(--code-amber); box-shadow: var(--glow); }
@media (hover: hover) and (pointer: fine) {
  .sc-pane__copy { opacity: 0; }
  .sc-pane:hover .sc-pane__copy, .sc-pane:focus-within .sc-pane__copy, .sc-pane.is-copied .sc-pane__copy { opacity: 1; }
}
@media (hover: none) {
  .sc-pane__copy { min-height: 44px; padding: 8px 12px; }
  .sc-pane:not(.sc-pane--short) pre { padding-top: calc(1.1rem + 44px); }   /* the button never covers the first line */
}

/* WordPress / Koenig code wrappers */
.sc-content .wp-block-syntaxhighlighter-code, .sc-content .kg-code-card { margin: 2rem 0; }
.sc-content .wp-block-syntaxhighlighter-code > pre, .sc-content .wp-block-syntaxhighlighter-code > .sc-pane,
.sc-content .kg-code-card > pre, .sc-content .kg-code-card > .sc-pane { margin: 0; }
.sc-content .kg-code-card figcaption { margin-top: .6rem; }
.sc-content .kg-code-card figcaption::before { content: none !important; }

/* Overhang: panes run 2rem wider than the measure at >= 900px */
@media (min-width: 900px) {
  .sc-content > pre, .sc-content > .sc-pane, .sc-content > .wp-block-syntaxhighlighter-code, .sc-content > .kg-code-card {
    width: calc(100% + 4rem);
    max-width: none;
    margin-inline: -2rem;
  }
  .sc-content > .kg-width-wide.kg-code-card, .sc-content > .kg-width-full.kg-code-card { margin-inline: auto; width: auto; }
}

/* Inline code (outside panes) */
.sc-content :not(pre) > code {
  font-size: .9em;
  color: var(--ox);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  padding: .1em .35em;
  overflow-wrap: anywhere;
}
.sc-content a > code { color: inherit; }
.sc-content :is(h1, h2, h3, h4) code { font-size: .85em; }

/* 7.7 tables */
.sc-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  line-height: 1.45;
  margin: 2rem 0;
}
.sc-content th {
  font: 500 var(--fs-label)/1.3 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brass-ink);
  text-align: left;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--brass);
  vertical-align: bottom;
}
.sc-content td {
  padding: .6rem .75rem;
  border-bottom: var(--hairline);
  font-variant-numeric: lining-nums tabular-nums;
  vertical-align: top;
}
.sc-content tbody tr:nth-child(even) { background: var(--surface-2); }
.sc-content .wp-block-table thead th, .sc-content .wp-block-table tr:first-child td strong { font-family: var(--font-mono); }
.sc-content figure.wp-block-table { overflow-x: auto; margin: 2rem 0; }
.sc-content figure.wp-block-table table { margin: 0; }
.sc-table { overflow-x: auto; margin: 2rem 0; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.sc-table table { margin: 0; }
.sc-table:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-content figure.wp-block-table .sc-table { margin: 0; }

/* 7.8 figures, images, floats, galleries */
.sc-content figure { margin: 2rem 0; }
.sc-content figure > img, .sc-content figure > a > img, .sc-content figure > picture > img { width: 100%; height: auto; }
.sc-content figure.wp-block-image.is-resized img,
.sc-content figure.alignleft img, .sc-content figure.alignright img,
.sc-content figure.aligncenter img { width: auto; max-width: 100%; }
.sc-content figure.aligncenter { text-align: center; }
.sc-content figure.aligncenter img { margin-inline: auto; }
.sc-content figure.aligncenter figcaption { text-align: center; }
@media (min-width: 720px) {
  .sc-content figure.alignleft { float: left; max-width: 45%; margin: .35rem 1.5rem 1rem 0; }
  .sc-content figure.alignright { float: right; max-width: 45%; margin: .35rem 0 1rem 1.5rem; }
  .sc-content figure.alignleft img, .sc-content figure.alignright img { width: auto; max-width: 100%; }
}
.sc-content pre, .sc-content .sc-pane, .sc-content table, .sc-content .sc-table { clear: both; }

.kg-gallery-container { display: flex; flex-direction: column; gap: .5rem; }
.kg-gallery-row { display: flex; gap: .5rem; }
.kg-gallery-image { flex: 1 1 0; min-width: 0; }
.kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.sc-content figure.wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
}
.sc-content figure.wp-block-gallery.has-nested-images > figure { margin: 0; display: flex; flex-direction: column; }
.sc-content figure.wp-block-gallery.has-nested-images > figure img { width: 100%; height: 100%; object-fit: cover; }
.sc-content figure.wp-block-gallery.has-nested-images > figure figcaption { font-size: var(--fs-label); }

/* 7.9 captions and FIG. counters */
.sc-content figcaption {
  font: 400 var(--fs-caption)/1.5 var(--font-mono);
  color: var(--brass-ink);
  text-align: left;
  margin-top: .6rem;
  letter-spacing: .01em;
}
.sc-content figcaption a { color: var(--accent-ink); }
.sc-content.is-numbered figure:has(> figcaption):not(.kg-code-card):not(.kg-bookmark-card) { counter-increment: fig; }
.sc-content.is-numbered figure:has(> figcaption):not(.kg-code-card):not(.kg-bookmark-card) > figcaption::before {
  content: "FIG. " counter(fig) " — ";
  font-weight: 500;
  letter-spacing: .06em;
}
.sc-content.is-numbered figure:has(> figcaption):not(.kg-code-card):not(.kg-bookmark-card) > figcaption.is-bare::before { content: "FIG. " counter(fig); }

/* 7.10 horizontal rules = terminal rules */
.sc-content hr {
  position: relative;
  border: 0;
  height: 1px;
  width: 100%;
  margin: 3rem auto;
  background: var(--brass);
  overflow: visible;
  clear: both;
}
.sc-content hr::before, .sc-content hr::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  background: var(--bg);
  transform: translateY(-50%);
}
.sc-content hr::before { left: 0; }
.sc-content hr::after { right: 0; }

/* 7.11 embeds, video, audio, files, bookmarks, buttons, callouts, toggles, headers, products, signup
   Ghost's cards.min.css is linked AFTER this stylesheet, so every override below carries more specificity
   than the Ghost rule it replaces (e.g. `.kg-bookmark-card a.kg-bookmark-container`, `.kg-header-card.kg-size-large`). */
.sc-content figure.wp-block-embed .wp-block-embed__wrapper, .sc-content .kg-embed-card { position: relative; }
.sc-content iframe[src*="youtube"], .sc-content iframe[src*="youtu.be"], .sc-content iframe[src*="vimeo"],
.sc-content .kg-embed-card iframe[src*="youtube"], .sc-content .kg-embed-card iframe[src*="vimeo"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r-1);
  background: var(--code-bg);
}
.sc-content .wp-embed-aspect-16-9 iframe { aspect-ratio: 16 / 9; }
.sc-content .wp-embed-aspect-4-3 iframe { aspect-ratio: 4 / 3; }
.sc-content .kg-embed-card { margin: 2rem auto; max-width: var(--w-measure); }
.sc-content .kg-embed-card > * { margin-inline: auto; }

/* video / audio / file */
.sc-content .kg-video-card video, .sc-content .kg-video-container { border: 1px solid var(--border); border-radius: var(--r-1); }
.sc-content.sc-prose .kg-audio-card, .sc-content .kg-file-card a.kg-file-card-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  box-shadow: none;
  color: var(--text);
  font-family: var(--font-body);
}
.sc-content .kg-file-card a.kg-file-card-container:hover { border-color: var(--accent); }
.sc-content.sc-prose .kg-audio-title, .sc-content.sc-prose .kg-file-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 30, "WONK" 0;
}
.sc-content.sc-prose .kg-audio-duration, .sc-content.sc-prose .kg-audio-time, .sc-content.sc-prose .kg-file-card-caption,
.sc-content.sc-prose .kg-file-card-metadata, .sc-content.sc-prose .kg-file-card-filename, .sc-content.sc-prose .kg-file-card-filesize {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--muted);
  opacity: 1;
}
.sc-content .kg-file-card-icon svg { color: var(--brass); }
.sc-content .kg-audio-thumbnail { border-radius: var(--r-1); }
.sc-content .kg-audio-thumbnail.placeholder { background: var(--accent); }

/* bookmark */
.sc-content .kg-bookmark-card { margin: 2rem 0; }
.sc-content .kg-bookmark-card a.kg-bookmark-container, .sc-content .kg-bookmark-card a.kg-bookmark-container:hover {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease);
}
.sc-content .kg-bookmark-card a.kg-bookmark-container:hover { border-color: var(--accent); }
.sc-content.sc-prose .kg-bookmark-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-family: var(--font-body);
}
.sc-content.sc-prose .kg-bookmark-title {
  font: 600 1.0625rem/1.3 var(--font-display);
  font-variation-settings: "SOFT" 30, "WONK" 0;
  color: var(--text);
}
.sc-content.sc-prose .kg-bookmark-description {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--muted);
  opacity: 1;
  max-height: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.sc-content.sc-prose .kg-bookmark-metadata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em;
  margin-top: auto;
  font: 500 var(--fs-label)/1.3 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brass-ink);
}
.sc-content.sc-prose .kg-bookmark-icon { width: 18px; height: 18px; margin: 0; border: 0; border-radius: 0; }
.sc-content.sc-prose .kg-bookmark-publisher { line-height: 1.3; }
.sc-content.sc-prose .kg-bookmark-thumbnail { flex: 0 0 33%; min-width: 0; max-width: 33%; position: relative; }
.sc-content .kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; margin: 0; position: absolute; inset: 0; }
@media (max-width: 639.98px) {
  .sc-content .kg-bookmark-card a.kg-bookmark-container { flex-direction: column-reverse; }
  .sc-content.sc-prose .kg-bookmark-thumbnail { flex-basis: auto; max-width: none; aspect-ratio: 16 / 9; }
}

/* buttons (button card, product, header, signup) — the theme's mono primary button */
.sc-content .kg-button-card { display: flex; margin: 2rem 0; }
.sc-content .kg-button-card.kg-align-center { justify-content: center; }
.sc-content .kg-button-card a.kg-btn, .sc-content .kg-product-card a.kg-product-card-button,
.sc-content.sc-prose .kg-header-card a.kg-header-card-button, .sc-content.sc-prose .kg-header-card .kg-header-card-button,
.sc-content.sc-prose .kg-signup-card .kg-signup-card-button {
  display: inline-flex;
  position: static;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-height: 40px;
  padding: 10px 16px;
  font: 500 var(--fs-caption)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1F1B17;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-1);
  text-decoration: none;
  text-shadow: none;
  cursor: pointer;
  transition: filter var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.sc-content .kg-button-card a.kg-btn:hover, .sc-content .kg-product-card a.kg-product-card-button:hover,
.sc-content.sc-prose .kg-signup-card .kg-signup-card-button:hover { filter: brightness(.92); }

/* callout */
.sc-content.sc-prose .kg-callout-card {
  display: flex;
  gap: var(--s-3);
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-1);
  box-shadow: none;
  color: var(--text);
}
.sc-content .kg-callout-card div.kg-callout-emoji { flex: none; padding: 0; font-size: 1.25em; line-height: 1.4; }
.sc-content .kg-callout-card div.kg-callout-text { font-size: 1rem; line-height: 1.6; }
.sc-content .kg-callout-card.kg-callout-card-accent a { color: var(--accent-ink); }
.sc-content.sc-prose .kg-callout-card-blue   { border-left-color: #3F6E9A; }
.sc-content.sc-prose .kg-callout-card-green  { border-left-color: #4F7A4A; }
.sc-content.sc-prose .kg-callout-card-yellow { border-left-color: #B08A1E; }
.sc-content.sc-prose .kg-callout-card-red    { border-left-color: var(--ox); }
.sc-content.sc-prose .kg-callout-card-pink   { border-left-color: #A2506F; }
.sc-content.sc-prose .kg-callout-card-purple { border-left-color: #6E5A9A; }
.sc-content.sc-prose .kg-callout-card-accent, .sc-content.sc-prose .kg-callout-card-grey, .sc-content.sc-prose .kg-callout-card-white { border-left-color: var(--accent); }

/* toggle */
.sc-content.sc-prose .kg-toggle-card {
  margin: 2rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  box-shadow: none;
  padding: var(--s-4) var(--s-5);
}
.sc-content .kg-toggle-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); cursor: pointer; }
.sc-content .kg-toggle-card h4.kg-toggle-heading-text {
  font: 600 1.0625rem/1.3 var(--font-display);
  font-variation-settings: "SOFT" 30, "WONK" 0;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin: 0;
}
.sc-content .kg-toggle-card-icon { color: var(--brass); background: none; border: 0; padding: 0; }
.sc-content .kg-toggle-heading svg { width: 18px; height: 18px; color: var(--brass); }
.sc-content .kg-toggle-card .kg-toggle-content p, .sc-content .kg-toggle-card .kg-toggle-content li { font-size: 1rem; line-height: 1.6; }
.sc-content .kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content { display: none; }

/* header card: a mini front panel (both the v1 and the v2 markup) */
.sc-content.sc-prose .kg-header-card {
  position: relative;
  margin: 2rem 0;
  padding: clamp(2.5rem, 6vw, 5rem) var(--s-6);
  min-height: 0;
  background-color: var(--panel);
  color: var(--panel-text);
  text-align: center;
  border-radius: var(--r-1);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.sc-content.sc-prose .kg-header-card.kg-v2 { padding: 0; text-align: initial; }
.sc-content.sc-prose .kg-header-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: screen;
  background-image: var(--grain-img);
  background-size: 160px 160px;
}
.sc-content.sc-prose .kg-header-card.kg-style-image::before, .sc-content.sc-prose .kg-header-card[style*="background-image"]::before {
  opacity: 1;
  mix-blend-mode: normal;
  background: linear-gradient(rgba(21,18,15,.72), rgba(21,18,15,.90));
}
.sc-content.sc-prose .kg-header-card > * { position: relative; z-index: 1; }
.sc-content.sc-prose .kg-header-card h2.kg-header-card-header, .sc-content.sc-prose .kg-header-card h2.kg-header-card-heading {
  font: 600 clamp(1.75rem, 1.2rem + 2vw, 2.5rem)/1.1 var(--font-display);
  font-variation-settings: "SOFT" 30, "WONK" 0;
  letter-spacing: -.005em;
  color: var(--panel-text);
  margin: 0 0 var(--s-3);
}
.sc-content.sc-prose .kg-header-card h3.kg-header-card-subheader, .sc-content.sc-prose .kg-header-card .kg-header-card-subheading {
  font: 400 var(--fs-lede)/1.5 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--panel-muted);
  margin: 0 0 var(--s-5);
  max-width: 40em;
}
.sc-content.sc-prose .kg-header-card a.kg-header-card-button, .sc-content.sc-prose .kg-header-card .kg-header-card-button {
  background: transparent;
  border-color: var(--panel-brass);
  color: var(--panel-text);
  fill: currentColor;
}
.sc-content.sc-prose .kg-header-card a.kg-header-card-button:hover, .sc-content.sc-prose .kg-header-card .kg-header-card-button:hover {
  background: var(--accent-lit);
  border-color: var(--accent-lit);
  color: #1F1B17;
  filter: none;
}
.sc-content.sc-prose .kg-header-card a, .sc-content.sc-prose .kg-header-card a span { color: var(--accent-lit); }

/* product */
.sc-content .kg-product-card { margin: 2rem 0; }
.sc-content.sc-prose .kg-product-card-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  box-shadow: none;
  padding: var(--s-5);
  color: var(--text);
}
.sc-content .kg-product-card h4.kg-product-card-title {
  font: 600 1.25rem/1.25 var(--font-display);
  font-variation-settings: "SOFT" 30, "WONK" 0;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.sc-content .kg-product-card-rating-star svg { fill: var(--brass); opacity: .25; }
.sc-content .kg-product-card-rating-active svg { fill: var(--accent); opacity: 1; }
.sc-content .kg-product-card .kg-product-card-description p { font-size: 1rem; color: var(--text-2); opacity: 1; }

/* signup card: styled like the header card, keeps Ghost's data-members-form behaviour */
.sc-content.sc-prose .kg-signup-card {
  position: relative;
  margin: 2rem 0;
  padding: 0;
  background-color: var(--panel);
  color: var(--panel-text);
  border-radius: var(--r-1);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.sc-content.sc-prose .kg-signup-card.kg-style-accent { background-color: var(--panel); }
.sc-content.sc-prose .kg-signup-card h2.kg-signup-card-heading {
  font: 600 clamp(1.5rem, 1.2rem + 1.5vw, 2rem)/1.15 var(--font-display);
  font-variation-settings: "SOFT" 30, "WONK" 0;
  letter-spacing: 0;
  color: var(--panel-text);
  margin: 0 0 var(--s-3);
}
.sc-content.sc-prose .kg-signup-card .kg-signup-card-subheading { font: 400 1.0625rem/1.5 var(--font-body); color: var(--panel-muted); margin: 0 0 var(--s-4); }
.sc-content.sc-prose .kg-signup-card-form { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sc-content.sc-prose .kg-signup-card-fields { display: flex; flex-wrap: wrap; gap: var(--s-2); width: 100%; max-width: 30rem; padding: 0; background: transparent; border: 0; border-radius: 0; }
.sc-content.sc-prose .kg-signup-card-input {
  flex: 1 1 12rem;
  width: auto;
  height: auto;
  min-height: 40px;
  margin: 0;
  padding: 10px 12px;
  font: 400 .9375rem/1.3 var(--font-mono);
  background: var(--panel-2);
  border: 1px solid var(--panel-frame);
  border-radius: var(--r-1);
  color: var(--panel-text);
}
.sc-content.sc-prose .kg-signup-card-input:focus { border-color: var(--accent-lit); outline: 2px solid var(--accent-lit); outline-offset: 1px; }
.sc-content.sc-prose .kg-signup-card .kg-signup-card-button, .sc-content.sc-prose .kg-signup-card .kg-signup-card-button.kg-style-accent { background: var(--accent-lit); border-color: var(--accent-lit); height: auto; }
.sc-content.sc-prose .kg-signup-card-disclaimer { font: 400 var(--fs-caption)/1.5 var(--font-mono); color: var(--panel-muted); margin-top: var(--s-3); }
.sc-content.sc-prose .kg-signup-card-success, .sc-content.sc-prose .kg-signup-card-error { display: none; font: 500 var(--fs-label)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; margin-top: var(--s-3); }
.sc-content.sc-prose .kg-signup-card-success { color: var(--accent-lit); }
.sc-content.sc-prose .kg-signup-card-error { color: #F0A099; position: static; }
.sc-content.sc-prose .kg-signup-card-form.success .kg-signup-card-fields, .sc-content.sc-prose .kg-signup-card-form.success .kg-signup-card-disclaimer { display: none; }
.sc-content.sc-prose .kg-signup-card-form.success .kg-signup-card-success { display: flex; height: auto; font-size: var(--fs-label); }
.sc-content.sc-prose .kg-signup-card-form.error .kg-signup-card-fields { border: 0; box-shadow: none; }
.sc-content.sc-prose .kg-signup-card-form.error .kg-signup-card-error { display: block; }
.sc-content.sc-prose .kg-signup-card-form.loading .kg-signup-card-button { opacity: .5; cursor: progress; }

.sc-content .kg-nft-card, .sc-content .kg-html-card { margin: 2rem 0; }
.sc-content .kg-nft-card img, .sc-content .kg-html-card img { border: 1px solid var(--border); border-radius: var(--r-1); }
.sc-content .kg-card { margin-block: 2rem; }
.sc-content .kg-image-card img, .sc-content .kg-image-card picture { width: 100%; }

/* Koenig widths (gscan requires these; used inside .sc-content) */
.kg-width-wide { max-width: var(--w-wide); }
.kg-width-full { max-width: none; width: 100vw; margin-inline: calc(50% - 50vw); }
.sc-content .kg-width-wide, .sc-content figure.alignwide {
  --w-break: min(var(--w-wide), 100vw - 2 * var(--gutter));
  width: var(--w-break);
  max-width: none;
  margin-inline: calc((100% - var(--w-break)) / 2);
}
.sc-content .kg-width-full { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }
@media (min-width: 1280px) {
  .sc-article__body.has-toc:has(> .sc-toc--rail:not([hidden])) .sc-content :is(.kg-width-wide, figure.alignwide, .kg-width-full) {
    width: auto;
    max-width: none;
    margin-inline: 0;
  }
}

/* AdSense: never inside a pane, never breaking rows */
.sc-content ins.adsbygoogle, ins.adsbygoogle { display: block; clear: both; margin: 2rem 0; max-width: 100%; }
.sc-feed--grid ins.adsbygoogle { grid-column: 1 / -1; }

/* 7.12 footnotes */
.sc-content sup a[href^="#fn"], .sc-content .footnote-ref a, .sc-content a.footnote-ref {
  font: 500 max(.7em, .75rem)/0 var(--font-mono);
  color: var(--accent-ink);
  text-decoration: none;
}
.sc-content sup a[href^="#fn"]::before, .sc-content a.footnote-ref::before { content: "["; }
.sc-content sup a[href^="#fn"]::after, .sc-content a.footnote-ref::after { content: "]"; }
.sc-content .footnotes {
  font-size: var(--fs-small);
  color: var(--muted);
  border-top: 1px solid var(--brass);
  padding-top: 1rem;
  margin-top: 3rem;
}
.sc-content .footnotes ol li::marker { color: var(--brass-ink); }
.sc-content .footnotes li:target, .sc-content li:target { background: var(--accent-soft); }

/* 7.13 drop cap (essay / bench / other strands, or all posts) */
.sc-content.has-dropcap > p:first-of-type:not(.sc-note)::first-letter,
.sc-content.has-dropcap > p.sc-note + p::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "SOFT" 30, "WONK" 0;
  color: var(--accent-ink);
  padding-right: .12em;
}
.sc-content.has-dropcap > p.sc-note::first-letter { initial-letter: 1; -webkit-initial-letter: 1; font: inherit; color: inherit; padding: 0; float: none; }
@supports not (initial-letter: 3) {
  .sc-content.has-dropcap > p:first-of-type:not(.sc-note)::first-letter,
  .sc-content.has-dropcap > p.sc-note + p::first-letter {
    float: left;
    font-size: 3.1em;
    line-height: .82;
    margin: .06em .12em 0 0;
  }
}
/* "I’ve" openers: JS inserts a zero-width space after the letter so ::first-letter stops before the apostrophe (no extra CSS) */
.sc-note { color: var(--text-2); }

/* 7.14 members gate is styled in section 18 (.sc-cta) */


/* ----
   17. Post footer — 4.4.5 tags, 4.4.6 comments, 4.4.7 author, 4.4.8 prev/next, 4.4.9 related + subscribe
   ---- */
.sc-article__foot { margin-top: var(--s-8); display: grid; gap: var(--s-6); }
.sc-tags .sc-chips { margin-top: var(--s-4); }
.sc-tags__more { margin-top: var(--s-3); }
.sc-tags__more > .sc-chips { margin-top: var(--s-3); }
.sc-comments { margin: 0; }
.sc-comments .sc-label { margin-bottom: var(--s-4); }

.sc-neighbors { display: grid; gap: var(--s-4); }
.sc-neighbor {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--r-1);
  color: var(--text);
  text-decoration: none;
  transition: outline-color var(--t-base) var(--ease);
  outline: 1px solid transparent;
  outline-offset: 3px;
}
.sc-neighbor:hover, .sc-neighbor:focus-visible { outline-color: var(--accent); }
.sc-neighbor:hover .sc-neighbor__title { color: var(--accent-ink); }
.sc-neighbor__label {
  font: 500 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass-ink);
}
.sc-neighbor__title {
  font: 600 var(--fs-card-c)/1.25 var(--font-display);
  font-variation-settings: "SOFT" 30, "WONK" 0;
  text-wrap: balance;
  transition: color var(--t-base) var(--ease);
}
.sc-neighbor--newer { text-align: right; align-items: flex-end; }
.sc-neighbor:only-child { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .sc-neighbors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-neighbor--newer:first-child { grid-column: 2; }
}

.sc-article__after { margin-top: var(--s-7); display: grid; gap: var(--s-7); }
.sc-related { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.sc-related > .sc-card:nth-of-type(n+4) { display: none; }   /* by type: an injected <ins> is not a card */
.sc-related > ins.adsbygoogle { grid-column: 1 / -1; }
@media (min-width: 640px) and (max-width: 899.98px) {
  .sc-related .sc-card { grid-template-columns: 38% minmax(0, 1fr); gap: var(--s-4); align-items: start; }
  .sc-related .sc-card__media, .sc-related .sc-card--noimage .sc-card__media { aspect-ratio: 4 / 3; height: auto; }
}
@media (min-width: 900px) {
  .sc-related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sc-signup--post { margin: 0; }


/* ----
   18. Error / fault plate — 4.8; members gate — 7.14
   ---- */
.sc-fault-wrap { padding-block: var(--s-8) 0; }
.sc-fault {
  max-width: 560px;
  margin-inline: auto;
  padding: var(--s-7) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  text-align: center;
}
.sc-fault .sc-glyph--open { display: block; margin: 0 auto var(--s-4); max-width: 100%; }
.sc-fault__code {
  font: 500 clamp(2.5rem, 14vw, var(--fs-err))/1 var(--font-mono);
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--accent-ink);                 /* 4.8:1 on the graph plate; equals --accent (and glows) in dark */
  text-shadow: var(--glow);
}
.sc-fault :focus-visible { outline-color: var(--accent-ink); }
.sc-fault__msg {
  margin-top: var(--s-4);
  font-size: 1.5rem;
  line-height: 1.25;
}
.sc-fault__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }
.sc-fault__details { margin-top: var(--s-6); text-align: left; font-size: var(--fs-caption); line-height: 1.5; color: var(--muted); }
.sc-fault__details .sc-label { margin-bottom: var(--s-3); }
.sc-fault__list { list-style: none; padding: 0; display: grid; gap: var(--s-4); }
.sc-fault__rule { display: block; font-style: normal; font-weight: 500; color: var(--text); }
.sc-fault__ref, .sc-fault__message { margin-top: var(--s-1); overflow-wrap: anywhere; }
@media (min-width: 640px) { .sc-fault { padding: var(--s-7); } }

.sc-cta { margin: 2rem 0; text-align: left; }
.sc-cta__label { margin-bottom: var(--s-3); }
.sc-cta__title { font-size: 1.5rem; line-height: 1.25; }
.sc-cta__sub { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--muted); }
.sc-cta__actions { margin-top: var(--s-4); }
.sc-cta .sc-signup__form { margin-top: var(--s-4); }


/* ----
   19. Utilities, focus, reduced motion / transparency, print — SPEC 10
   ---- */
.sc-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-content pre:focus-visible, .sc-pane :focus-visible { outline-color: var(--accent-lit); }
.sc-card__title a:focus-visible, .sc-row__title a:focus-visible { outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .sc-card:hover .sc-arrow, .sc-card:focus-within .sc-arrow, .sc-author__links a:hover .sc-arrow { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .sc-grain::after, .sc-content .kg-header-card::before { display: none; }
}
@media (forced-colors: active) {
  .sc-rule__line, .sc-content hr, .sc-progress { forced-color-adjust: none; background: CanvasText; }
  .sc-lamp__dot { forced-color-adjust: none; background: Highlight; }
}

@media print {
  .sc-masthead__actions, .sc-progress, .sc-skip, .sc-footer__signup, .sc-sidebar, .sc-signup, .sc-pane__bar,
  .sc-toc, .sc-neighbors, .sc-article__after, .sc-lamp { display: none !important; }
  .sc-panel, .sc-panel.sc-grain::after { background: none !important; color: #000 !important; }
  .sc-content pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .sc-grain::after { display: none; }
  a { color: inherit; }
}