/* =================================================================
   LEARNING BY DESIGN — screen.css
   Extends the Kenan Jallad design system (kenanjallad.com)
   ================================================================= */

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

/* ---------------------------------------------------------------
   DESIGN TOKENS
   --------------------------------------------------------------- */
:root {
  --bg-paper: #f6f5f4;
  --bg-card: #e8e7e5;
  --ink-primary: #292a2c;
  --ink-secondary: #5f5e5a;
  --ink-tertiary: #696861;
  --ink-quaternary: #b4b2a9;
  --accent-rust: #c63412;
  --accent-oxblood: #320d05;
  --rule-faint: rgba(41,42,44,0.10);
  --rule-medium: rgba(41,42,44,0.18);
  --rule-strong: rgba(41,42,44,0.45);
  --wash-rust-soft: rgba(198,52,18,0.07);
  --wash-rust-mid:  rgba(198,52,18,0.12);
  --wash-ochre:     rgba(180,140,70,0.09);
  --wash-oxblood:   rgba(50,13,5,0.06);
  --wash-ink-soft:  rgba(41,42,44,0.04);
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

html, body { background: var(--bg-paper); color: var(--ink-primary); }
body {
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  position: relative; overflow-x: hidden; min-height: 100vh;
}

/* ---------------------------------------------------------------
   ORGANIC WASH
   --------------------------------------------------------------- */
.organic-field { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.85; will-change: transform; }
.blob--one   { width: 520px; height: 520px; top: -120px; left: -180px; background: radial-gradient(circle at 35% 40%, var(--wash-rust-mid) 0%, var(--wash-rust-soft) 45%, transparent 70%); animation: drift-one 28s ease-in-out infinite alternate; }
.blob--two   { width: 640px; height: 640px; top: 30%; right: -260px; background: radial-gradient(circle at 60% 50%, var(--wash-ochre) 0%, transparent 65%); animation: drift-two 36s ease-in-out infinite alternate; }
.blob--three { width: 460px; height: 460px; bottom: -180px; left: 18%; background: radial-gradient(circle at 50% 50%, var(--wash-rust-soft) 0%, transparent 70%); animation: drift-three 32s ease-in-out infinite alternate; }
.blob--four  { width: 380px; height: 380px; top: 60%; left: -100px; background: radial-gradient(circle at 50% 50%, var(--wash-ink-soft) 0%, transparent 65%); animation: drift-four 40s ease-in-out infinite alternate; }
.organic-field--minimal .blob--two { width: 540px; height: 540px; top: auto; bottom: -180px; right: -160px; background: radial-gradient(circle at 50% 50%, var(--wash-oxblood) 0%, transparent 70%); animation-duration: 44s; }
.organic-field--minimal .blob--three,
.organic-field--minimal .blob--four { display: none; }
@keyframes drift-one   { from { transform: translate(0,0) scale(1); } to { transform: translate(40px,60px) scale(1.08); } }
@keyframes drift-two   { from { transform: translate(0,0) scale(1); } to { transform: translate(-50px,-40px) scale(1.06); } }
@keyframes drift-three { from { transform: translate(0,0) scale(1); } to { transform: translate(60px,-30px) scale(1.1); } }
@keyframes drift-four  { from { transform: translate(0,0) scale(1); } to { transform: translate(-30px,40px) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .blob { animation: none !important; } }

/* ---------------------------------------------------------------
   DRAFTING SHEET
   --------------------------------------------------------------- */
.sheet-frame { position: fixed; inset: 24px; pointer-events: none; z-index: 1; }
.sheet-frame::before, .sheet-frame::after,
.sheet-frame > span::before, .sheet-frame > span::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border-color: var(--rule-strong); border-style: solid; border-width: 0;
}
.sheet-frame::before { top: 0; left: 0;  border-top-width: 1px; border-left-width: 1px; }
.sheet-frame::after  { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.sheet-frame > span  { display: block; width: 100%; height: 100%; position: relative; }
.sheet-frame > span::before { bottom: 0; left: 0;  border-bottom-width: 1px; border-left-width: 1px; }
.sheet-frame > span::after  { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.sheet-mark {
  position: fixed; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-quaternary); z-index: 4; pointer-events: none;
}
.sheet-mark--tl { top: 32px; left: 48px; }
.sheet-mark--tr { top: 32px; right: 48px; }
.sheet-mark--bl { bottom: 32px; left: 48px; }
.sheet-mark--br { bottom: 32px; right: 48px; }
.sheet-mark span { color: var(--accent-rust); }

/* ---------------------------------------------------------------
   CHROME BAR
   --------------------------------------------------------------- */
.chrome-bar {
  position: fixed; left: 0; right: 0; pointer-events: none; z-index: 3;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: height 0.4s cubic-bezier(0.4,0,0.2,1);
}
.chrome-bar--top    { top: 0;    height: 120px; background: linear-gradient(to bottom, rgba(246,245,244,0.97) 0%, rgba(246,245,244,0.97) 50%, rgba(246,245,244,0.80) 75%, rgba(246,245,244,0.00) 100%); }
.chrome-bar--bottom { bottom: 0; height: 72px;  background: linear-gradient(to top,    rgba(246,245,244,0.96) 0%, rgba(246,245,244,0.88) 55%, rgba(246,245,244,0.00) 100%); }
body.is-scrolled .chrome-bar--top  { height: 80px; }
body.is-scrolled .chrome-bar--bottom { height: 64px; }

/* ---------------------------------------------------------------
   MASTHEAD
   --------------------------------------------------------------- */
/* UPDATED: top nudged to 36px to sit centred in the taller 120px chrome band */
.masthead {
  position: fixed; top: 36px; left: 48px; z-index: 5;
  text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 0.75rem;
  transition: opacity 0.25s ease;
}
.masthead:hover { opacity: 0.82; }
.masthead__logo { width: 22px; height: auto; flex-shrink: 0; display: block; align-self: center; }
.masthead__name {
  font-family: var(--font-display); font-weight: 400; font-size: 22px;
  line-height: 1; letter-spacing: -0.015em; color: var(--ink-primary);
  transition: color 0.25s ease;
}
.masthead__name em { font-style: italic; font-weight: 300; color: var(--accent-rust); }

/* ---------------------------------------------------------------
   SITE NAV — fixed upper-right, mirrors masthead plane
   --------------------------------------------------------------- */
.site-nav {
  position: fixed; top: 36px; right: 48px; z-index: 5;
  display: inline-flex; align-items: baseline; gap: 1.5rem;
}
.site-nav__link {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-tertiary); text-decoration: none;
  position: relative; padding-bottom: 2px; transition: color 0.25s ease;
}
.site-nav__link::after {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px; background: var(--accent-rust);
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.site-nav__link:hover { color: var(--accent-rust); }
.site-nav__link:hover::after { width: 100%; }

/* ---------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------- */
.site-footer {
  position: relative; z-index: 2;
  padding: 5rem 2rem 6rem;
}
.site-footer__inner {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  max-width: 720px; margin: 0 auto;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-tertiary);
}
.site-footer__credit {
  color: var(--ink-tertiary); text-decoration: none;
  position: relative; padding-bottom: 2px; transition: color 0.25s ease;
}
.site-footer__credit::after {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px; background: var(--accent-rust);
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.site-footer__credit:hover { color: var(--accent-rust); }
.site-footer__credit:hover::after { width: 100%; }
.site-footer__credit span { color: var(--accent-rust); }
.site-footer__meta { color: var(--ink-quaternary); }

/* ---------------------------------------------------------------
   INDEX LINE — eyebrow with red leader rule
   --------------------------------------------------------------- */
.index-line {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-rust); display: flex; align-items: center; gap: 0.75rem;
}
.index-line::before {
  content: ""; display: inline-block; width: 32px; height: 1px; background: var(--accent-rust);
}

/* ---------------------------------------------------------------
   REVEAL — staggered rise-in animation
   --------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(8px); animation: rise 0.9s cubic-bezier(0.2,0.7,0.2,1) forwards; }
.reveal--1 { animation-delay: 0.05s; }
.reveal--2 { animation-delay: 0.18s; }
.reveal--3 { animation-delay: 0.32s; }
.reveal--4 { animation-delay: 0.46s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; animation: none; } }

/* ---------------------------------------------------------------
   PAGE SHELL
   --------------------------------------------------------------- */
/* UPDATED: padding-top increased to 9.5rem (152px) — content starts well clear
   of the 96px chrome band, matching the breathing room of kenanjallad.com */
.page { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 11rem 2rem 5rem; }
.page-header { margin-bottom: 3rem; }
.page-header__index { margin-bottom: 1.75rem; }
.page-header__title {
  font-family: var(--font-display); font-size: clamp(36px, 5.5vw, 56px);
  font-weight: 400; letter-spacing: -0.025em; color: var(--ink-primary);
  line-height: 1.05; margin-bottom: 1.5rem;
}
.page-header__title em { font-style: italic; font-weight: 300; color: var(--ink-secondary); }
.page-header__lede { font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--ink-secondary); max-width: 56ch; }

/* ---------------------------------------------------------------
   CALLOUT
   --------------------------------------------------------------- */
.callout { display: flex; align-items: stretch; gap: 0.85rem; padding: 1.25rem 0 1.5rem; border-bottom: 1px solid var(--rule-faint); }
.callout__bar { width: 1px; background: var(--accent-rust); opacity: 0.35; flex-shrink: 0; }
.callout__body { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-tertiary); line-height: 1.75; }
.callout__label { color: var(--accent-rust); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 0.4rem; }
.callout__body a { color: var(--accent-rust); text-decoration: none; }
.callout__body a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------
   TAG FILTER
   --------------------------------------------------------------- */
.tag-filter { margin-bottom: 0; }
.tag-filter__label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-tertiary); display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem;
}
.tag-filter__label::before { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--ink-quaternary); }
.tag-filter__label em { font-style: normal; color: var(--accent-rust); font-weight: 500; }

.tag-rail {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem 2rem; padding-bottom: 0;
  max-height: 90px; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tag-rail.is-expanded { max-height: 800px; }

.tag-rail__btn {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-quaternary); background: none; border: none;
  border-bottom: 1px solid transparent; cursor: pointer; padding: 0 0 12px;
  position: relative; transition: color 0.25s ease, border-bottom-color 0.25s ease;
  outline: none; white-space: nowrap; line-height: 1.4;
}
.tag-rail__btn::after {
  content: ''; position: absolute; bottom: -1px; left: 0;
  width: 0; height: 2px; background: var(--accent-rust);
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tag-rail__btn.is-active { color: var(--ink-primary); font-weight: 500; }
.tag-rail__btn.is-active::after { width: 100%; }
.tag-rail__btn:hover:not(.is-active) { color: var(--ink-secondary); border-bottom-color: var(--rule-faint); }
.tag-rail__btn--all { color: var(--ink-secondary); }
.tag-rail__count { display: inline-block; margin-left: 0.4rem; font-size: 9px; color: var(--ink-quaternary); font-weight: 400; letter-spacing: 0.1em; }
.tag-rail__count::before { content: "("; }
.tag-rail__count::after  { content: ")"; }
.tag-rail__btn.is-active .tag-rail__count { color: var(--accent-rust); }

.tag-filter__expand {
  display: none; margin-top: 1.5rem;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-rust); background: none; border: none; cursor: pointer; padding: 0;
  outline: none; transition: opacity 0.25s ease;
}
.tag-filter.has-overflow .tag-filter__expand { display: inline-block; }
.tag-filter__expand:hover { opacity: 0.7; }
.tag-filter__expand .arrow { display: inline-block; margin-left: 0.4rem; transition: transform 0.25s ease; }
.tag-filter.is-expanded .tag-filter__expand .arrow { transform: rotate(180deg); }

.post-card {
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              max-height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              padding 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease;
}
.post-card.is-hidden {
  opacity: 0; transform: translateY(-4px); max-height: 0;
  padding-top: 0; padding-bottom: 0; overflow: hidden;
  pointer-events: none; border-bottom-color: transparent;
}
.post-list__empty {
  display: none; padding: 3rem 0;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-quaternary); text-align: center;
}
.post-list.is-empty .post-list__empty { display: block; }

@media (max-width: 720px) {
  .tag-rail { gap: 0.75rem 1.25rem; }
  .tag-rail__btn { font-size: 9px; letter-spacing: 0.14em; }
  .tag-filter__label { font-size: 9px; letter-spacing: 0.14em; }
}

/* ---------------------------------------------------------------
   POST LIST
   --------------------------------------------------------------- */
.post-list { border-top: 1px solid var(--rule-medium); }
.post-card {
  display: block; color: inherit;
  padding: 2.5rem 0; border-bottom: 1px solid var(--rule-faint);
  position: relative; outline: none; cursor: pointer;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              max-height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              padding 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease;
}
.post-card:focus-within { outline: 1px solid var(--rule-medium); outline-offset: 4px; border-radius: 2px; }
.post-card__row { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: start; }
.post-card__main { min-width: 0; }
.post-card__title {
  font-family: var(--font-display); font-size: 26px; font-weight: 400; letter-spacing: -0.015em;
  color: var(--ink-primary); line-height: 1.2; margin-bottom: 0.65rem; transition: color 0.25s ease;
}
.post-card__title em { font-style: italic; font-weight: 400; color: var(--ink-secondary); }

/* Stretched link — title <a> covers the entire card */
.post-card__link {
  color: inherit; text-decoration: none;
}
.post-card__link::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
}
.post-card__link:focus-visible { outline: none; }

.post-card__desc { font-family: var(--font-body); font-size: 14.5px; color: var(--ink-secondary); line-height: 1.55; max-width: 58ch; }
.post-card__meta {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-tertiary); text-align: right; white-space: nowrap;
}
.post-card__meta-date { display: block; color: var(--ink-primary); margin-bottom: 0.25rem; }
.post-card__tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.25rem; position: relative; z-index: 1; }
.tag-chip {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-secondary); padding: 4px 9px;
  border: 1px solid #8e8e8e; border-radius: 999px;
  background: transparent; text-decoration: none; display: inline-block;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tag-chip:hover { color: var(--accent-rust); border-color: var(--accent-rust); }
.post-card:hover .post-card__title,
.post-card:hover .post-card__title em { color: var(--accent-rust); }

/* ---------------------------------------------------------------
   ARTICLE / POST BODY
   --------------------------------------------------------------- */
.article__feature { margin: 3rem 0; }
.article__feature img { width: 100%; height: auto; display: block; }
.article__feature figcaption {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-tertiary); margin-top: 0.75rem; text-align: center;
}
.article__header { margin-bottom: 3.5rem; }
.article__index { margin-bottom: 1.75rem; }
.article__title {
  font-family: var(--font-display); font-size: clamp(34px, 5vw, 48px);
  font-weight: 400; letter-spacing: -0.025em; color: var(--ink-primary); line-height: 1.1; margin-bottom: 1.5rem;
}
.article__title em { font-style: italic; font-weight: 300; color: var(--ink-secondary); }
.article__excerpt {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 21px; line-height: 1.5; color: var(--ink-secondary); max-width: 60ch; margin-bottom: 2rem;
}
.article__meta {
  display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-tertiary);
}
.article__meta-date { color: var(--ink-primary); }
.article__meta-sep { color: var(--ink-quaternary); }
.article__content { font-family: var(--font-body); font-size: 16px; line-height: 1.75; color: var(--ink-primary); }
.article__content h2 {
  font-family: var(--font-display); font-size: clamp(24px, 3.6vw, 32px);
  font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink-primary);
  margin: 3.5rem 0 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule-faint);
}
.article__content h3 {
  font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--ink-primary);
  margin: 2.5rem 0 1rem; letter-spacing: -0.01em; line-height: 1.3;
}
.article__content p { margin: 0 0 1.1rem; }
.article__content p:last-child { margin-bottom: 0; }
.article__content strong { font-weight: 500; color: var(--ink-primary); }
.article__content em { font-style: italic; color: var(--ink-secondary); }
.article__content blockquote {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  border-left: 1px solid var(--rule-strong); padding: 0.5rem 0 0.5rem 1.75rem;
  margin: 2rem 0; font-size: 22px; line-height: 1.5; color: var(--ink-primary);
}
.article__content blockquote p { margin: 0; }
.article__content a {
  color: var(--accent-rust); text-decoration: none;
  border-bottom: 1px solid rgba(198,52,18,0.3); transition: border-color 0.2s ease;
}
.article__content a:hover { border-bottom-color: var(--accent-rust); }
.article__content ul, .article__content ol { margin: 0 0 1.5rem 1.5rem; }
.article__content li { margin-bottom: 0.5rem; }
.article__content img,
.article__content figure { max-width: 100%; height: auto; margin: 2rem 0; display: block; }
.article__content figcaption {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-tertiary); margin-top: 0.75rem; text-align: center;
}
.article__content hr { border: none; border-top: 1px solid var(--rule-faint); margin: 3rem 0; }
.article__content pre {
  background: var(--bg-card); border: 1px solid var(--rule-faint); border-radius: 2px;
  padding: 1.25rem 1.5rem; margin: 1.5rem 0; overflow-x: auto;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
}
.article__content code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-card); padding: 1px 5px; border-radius: 2px; }
.article__content pre code { background: none; padding: 0; }

.article__footer {
  margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--rule-faint);
  display: flex; flex-direction: column; gap: 1.5rem;
}
.article__footer-row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 1rem;
}
.article__footer .post-card__tags { margin-top: 0; }
.article__footer-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-tertiary);
}

/* Share action — standalone block after signoff, triggers Ghost native #/share modal */
.article__share { margin-top: 1.75rem; }
.share-action {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-rust); text-decoration: none;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--accent-rust); border-radius: 2px;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.share-action:hover { color: var(--bg-paper); background: var(--accent-rust); border-color: var(--accent-rust); }
.share-action__icon { flex-shrink: 0; transition: transform 0.25s ease; }
.share-action:hover .share-action__icon { transform: translateY(-1px); }

/* ---------------------------------------------------------------
   AUTHOR SIGNATURE
   --------------------------------------------------------------- */
.author-sig {
  margin-top: 4rem; padding-top: 2rem;
  border-top: 1px solid var(--rule-faint);
}
.author-sig__label { margin-bottom: 1.5rem; }
.author-sig__body { padding-top: 0.25rem; }
.author-sig__identity { display: flex; align-items: center; gap: 1.25rem; }
.author-sig__avatar {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; display: block; flex-shrink: 0;
  border: 1px solid var(--rule-faint);
}
.author-sig__avatar--fallback {
  background: var(--bg-card);
  font-family: var(--font-display); font-size: 22px; font-weight: 400;
  color: var(--ink-primary);
  display: flex; align-items: center; justify-content: center;
}
.author-sig__text { display: flex; flex-direction: column; gap: 0.15rem; }
.author-sig__name {
  font-family: var(--font-display); font-size: 19px; font-weight: 400;
  letter-spacing: -0.015em; line-height: 1.2; color: var(--ink-primary);
}
.author-sig__role {
  font-family: var(--font-body); font-size: 14px;
  color: var(--accent-rust); line-height: 1.3;
}
.author-sig__bio {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.55;
  color: var(--ink-secondary); margin-top: 1.25rem; max-width: 56ch;
}
.author-sig__website {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 0.85rem;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-secondary); text-decoration: none;
  transition: color 0.25s ease, gap 0.25s ease;
}
.author-sig__website:hover { color: var(--accent-rust); gap: 0.65rem; }
.author-sig__website-rule {
  display: inline-block; width: 32px; height: 1px;
  background: currentColor; flex-shrink: 0;
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.author-sig__website:hover .author-sig__website-rule { width: 48px; }
.author-sig__website-label { transition: color 0.25s ease; }
.author-sig__website-arrow {
  display: inline-block; line-height: 1;
  vertical-align: middle; margin-top: -0.5px;
  transition: transform 0.25s ease;
  font-style: normal;
}
.author-sig__website:hover .author-sig__website-arrow { transform: translate(2px, -2px); }
.article__signoff { margin-top: 3rem; border-bottom: none; }

/* ---------------------------------------------------------------
   RELATED POSTS
   --------------------------------------------------------------- */
.related-posts { margin-top: 5rem; padding-top: 3rem; border-top: 1px solid var(--rule-medium); }
.related-posts__label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-tertiary); display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem;
}
.related-posts__label::before { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--ink-quaternary); }
.related-posts__label em { font-style: normal; color: var(--accent-rust); font-weight: 500; }
.related-posts .post-card { padding: 1.75rem 0; }
.related-posts .post-card__title { font-size: 21px; margin-bottom: 0.5rem; }
.related-posts .post-card__desc { font-size: 14px; }
.related-posts .post-card__tags { margin-top: 0.85rem; }

/* ---------------------------------------------------------------
   SUBSCRIBE BLOCK — post-footer CTA (Ghost native form)
   --------------------------------------------------------------- */
.subscribe-block {
  margin-top: 5rem; padding-top: 3rem;
  border-top: 1px solid var(--rule-medium);
}
.subscribe-block__eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-tertiary); display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem;
}
.subscribe-block__eyebrow::before {
  content: ""; display: inline-block; width: 24px; height: 1px; background: var(--ink-quaternary);
}
.subscribe-block__title {
  font-family: var(--font-display); font-size: clamp(26px, 4vw, 36px);
  font-weight: 400; letter-spacing: -0.02em; color: var(--ink-primary);
  line-height: 1.15; margin-bottom: 2rem;
}
.subscribe-block__form {
  display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  max-width: 480px;
}
.subscribe-block__input {
  flex: 1 1 240px;
  font-family: var(--font-body); font-size: 14px; line-height: 1.4;
  color: var(--ink-primary); background: transparent;
  border: none; border-bottom: 1px solid var(--rule-medium);
  padding: 0.5rem 0; outline: none;
  transition: border-color 0.25s ease;
}
.subscribe-block__input::placeholder { color: var(--ink-quaternary); }
.subscribe-block__input:focus { border-bottom-color: var(--accent-rust); }
.subscribe-block__btn {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--accent-rust); color: var(--bg-paper);
  border: none; cursor: pointer;
  padding: 0.65rem 1.5rem; border-radius: 2px;
  transition: background 0.25s ease;
}
.subscribe-block__btn:hover { background: var(--accent-oxblood); }

/* ---------------------------------------------------------------
   COMMENTS BLOCK — wraps Ghost native {{comments}} helper
   Now sits directly after author bio, before article footer/tags.
   --------------------------------------------------------------- */
.comments-block {
  margin-top: 4rem; padding-top: 2.5rem;
  border-top: 1px solid var(--rule-faint);
}
/* Ghost injects its comments UI into this container.
   Ensure it respects the content column width. */
.comments-block iframe { width: 100%; max-width: 100%; }

/* ---------------------------------------------------------------
   TAG PAGE
   --------------------------------------------------------------- */
.tag-header { margin-bottom: 3rem; }
.tag-header__index { margin-bottom: 1.75rem; }
.tag-header__name {
  font-family: var(--font-display); font-size: clamp(36px, 5.5vw, 56px);
  font-weight: 400; letter-spacing: -0.025em; color: var(--ink-primary); line-height: 1.05; margin-bottom: 1.5rem;
}
.tag-header__name .hash { color: var(--accent-rust); font-weight: 300; margin-right: 0.1em; }
.tag-header__description {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 21px; line-height: 1.5; color: var(--ink-secondary); max-width: 60ch; margin-bottom: 2rem;
}
.tag-header__meta {
  display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-tertiary);
}
.tag-header__meta-count { color: var(--ink-primary); }
.tag-header__meta-sep { color: var(--ink-quaternary); }

.tag-back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-tertiary); text-decoration: none; margin-bottom: 2.5rem;
  transition: color 0.25s ease, gap 0.25s ease;
}
.tag-back:hover { color: var(--accent-rust); gap: 0.75rem; }
.tag-back__arrow { display: inline-block; transition: transform 0.25s ease; }
.tag-back:hover .tag-back__arrow { transform: translateX(-3px); }

/* ---------------------------------------------------------------
   KOENIG CARD CLASSES — required by GScan
   --------------------------------------------------------------- */

/* Wide / full width cards */
.kg-width-wide {
  margin-left: calc(50% - 50vw + 2rem);
  margin-right: calc(50% - 50vw + 2rem);
  max-width: min(960px, calc(100vw - 4rem));
}
.kg-width-full {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}
@media (max-width: 720px) {
  .kg-width-wide,
  .kg-width-full { margin-left: -1.25rem; margin-right: -1.25rem; max-width: calc(100% + 2.5rem); }
}

/* Bookmark card */
.kg-bookmark-card { margin: 2rem 0; }
.kg-bookmark-container {
  display: flex; align-items: stretch;
  border: 1px solid var(--rule-medium); border-radius: 2px;
  text-decoration: none; color: inherit;
  background: var(--bg-card);
  transition: border-color 0.25s ease;
  overflow: hidden;
}
.kg-bookmark-container:hover { border-color: var(--rule-strong); }
.kg-bookmark-content {
  flex: 1 1 auto; padding: 1.25rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  min-width: 0;
}
.kg-bookmark-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 400;
  color: var(--ink-primary); line-height: 1.3;
}
.kg-bookmark-description {
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink-secondary); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kg-bookmark-metadata {
  display: flex; align-items: center; gap: 0.5rem; margin-top: auto;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-tertiary);
}
.kg-bookmark-icon { width: 16px; height: 16px; flex-shrink: 0; }
.kg-bookmark-author { color: var(--ink-tertiary); }
.kg-bookmark-publisher { color: var(--ink-quaternary); }
.kg-bookmark-thumbnail {
  flex: 0 0 140px; max-width: 140px;
}
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 480px) {
  .kg-bookmark-thumbnail { display: none; }
}

/* ---------------------------------------------------------------
   KOENIG IMAGE CARD — artifact frame treatment
   --------------------------------------------------------------- */
/* Grid layout: img + ::after share row 1, figcaption flows to row 2.
   This keeps the ENLARGE hint anchored to the image cell while the
   caption sits cleanly outside the framed area. */
.article__content .kg-image-card {
  display: grid;
  margin: 2.5rem 0;
}

/* Frame lives on the img itself, not the figure.
   max-height caps tall diagrams/SVGs at a scannable preview;
   object-fit: contain centres the content within the frame. */
.article__content .kg-image-card img {
  grid-row: 1;
  grid-column: 1;
  display: block;
  width: 100%;
  max-height: 600px;
  height: auto;
  object-fit: contain;
  margin: 0;
  background: var(--bg-card);
  border: 0.5px solid var(--rule-medium);
  border-radius: 8px;
  cursor: zoom-in;
  transition: opacity 0.25s ease;
}
.article__content .kg-image-card:hover img { opacity: 0.92; }

/* ENLARGE hint — overlays the image cell via shared grid placement */
.article__content .kg-image-card::after {
  content: "ENLARGE ↗";
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  justify-self: end;
  margin: 0 14px 14px 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-primary);
  background: rgba(246, 245, 244, 0.92);
  padding: 4px 8px;
  border: 0.5px solid var(--rule-medium);
  border-radius: 3px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 6;
}
.article__content .kg-image-card:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Caption — sits in grid row 2, outside the image frame */
.article__content .kg-image-card figcaption {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-tertiary);
  line-height: 1.4;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  padding: 0.75rem 0 0;
  margin: 0;
}

/* ---------------------------------------------------------------
   KOENIG GALLERY CARD — contact-sheet treatment
   --------------------------------------------------------------- */
.article__content .kg-gallery-card {
  margin: 2.5rem 0;
}

/* Primary image area */
.article__content .kg-gallery-card .kg-gallery-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.article__content .kg-gallery-card .kg-gallery-row:first-child {
  display: block;
}

/* First image in first row = the primary view */
.article__content .kg-gallery-card .kg-gallery-row:first-child .kg-gallery-image {
  position: relative;
  background: var(--bg-card);
  border: 0.5px solid var(--rule-medium);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  cursor: zoom-in;
}
.article__content .kg-gallery-card .kg-gallery-row:first-child .kg-gallery-image img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  transition: opacity 0.3s ease;
}

/* Enlarge hint on primary */
.article__content .kg-gallery-card .kg-gallery-row:first-child .kg-gallery-image::after {
  content: "ENLARGE ↗";
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-primary);
  background: rgba(246, 245, 244, 0.92);
  padding: 4px 8px;
  border: 0.5px solid var(--rule-medium);
  border-radius: 3px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 6;
}
.article__content .kg-gallery-card .kg-gallery-row:first-child .kg-gallery-image:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Thumbnail strip — remaining rows become a flat grid */
.article__content .kg-gallery-card .kg-gallery-row:not(:first-child) {
  display: grid;
  gap: 0;
  border-left: 0.5px solid var(--rule-medium);
  border-right: 0.5px solid var(--rule-medium);
  border-bottom: 0.5px solid var(--rule-medium);
  overflow: hidden;
}
.article__content .kg-gallery-card .kg-gallery-row:last-child {
  border-radius: 0 0 8px 8px;
}

.article__content .kg-gallery-card .kg-gallery-row:not(:first-child) .kg-gallery-image {
  position: relative;
  cursor: pointer;
  background: var(--bg-card);
  overflow: hidden;
  border-top: 0.5px solid var(--rule-medium);
  transition: background 0.2s ease;
  min-height: 88px;
}
.article__content .kg-gallery-card .kg-gallery-row:not(:first-child) .kg-gallery-image + .kg-gallery-image {
  border-left: 0.5px solid var(--rule-medium);
}
.article__content .kg-gallery-card .kg-gallery-row:not(:first-child) .kg-gallery-image:hover {
  background-color: #dddcda;
}
.article__content .kg-gallery-card .kg-gallery-row:not(:first-child) .kg-gallery-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.article__content .kg-gallery-card .kg-gallery-row:not(:first-child) .kg-gallery-image:hover img {
  opacity: 1;
}

/* Active thumb state (set by JS) */
.article__content .kg-gallery-card .kg-gallery-row:not(:first-child) .kg-gallery-image.is-active {
  background-color: #dddcda;
  border-top: 2px solid var(--accent-rust);
}
.article__content .kg-gallery-card .kg-gallery-row:not(:first-child) .kg-gallery-image.is-active img {
  opacity: 1;
}

/* Gallery caption */
.article__content .kg-gallery-card figcaption {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-tertiary);
  line-height: 1.4;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  margin-top: 0.75rem;
}

/* ---------------------------------------------------------------
   KOENIG CTA CARD — branded resource/action block
   High-specificity selectors to override Ghost's built-in card
   styles, background-colour variants, and inline editor styles.
   --------------------------------------------------------------- */
.article__content .kg-card.kg-cta-card,
.article__content .kg-card.kg-cta-card.kg-cta-bg-grey,
.article__content .kg-card.kg-cta-card.kg-cta-bg-white,
.article__content .kg-card.kg-cta-card.kg-cta-bg-accent {
  background: var(--bg-card) !important;
  border: 0.5px solid var(--rule-medium) !important;
  border-radius: 12px !important;
  padding: 2rem !important;
  margin: 2.5rem 0 !important;
  position: relative;
  box-shadow: none !important;
}

/* Eyebrow label */
.article__content .kg-card.kg-cta-card .kg-cta-sponsor-label-wrapper {
  margin-bottom: 1.25rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid var(--accent-rust) !important;
  background: none !important;
}
.article__content .kg-card.kg-cta-card .kg-cta-sponsor-label,
.article__content .kg-card.kg-cta-card .kg-cta-sponsor-label span {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--accent-rust) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

/* Content body */
.article__content .kg-cta-card .kg-cta-content-inner {
  gap: 1.5rem !important;
}
.article__content .kg-cta-card .kg-cta-text,
.article__content .kg-cta-card .kg-cta-text p,
.article__content .kg-cta-card .kg-cta-text span {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--ink-primary) !important;
}

/* Action button — nuclear specificity to defeat Ghost's inline + !important
   card CSS.  Doubled class-chains (.kg-cta-card.kg-cta-card) raise specificity
   above anything Ghost ships.  The [style] attribute selector is kept so the
   rule explicitly targets elements that carry inline background-color.
   A companion script in main.js strips the inline styles at runtime as a
   second line of defence. */
.article__content .kg-card.kg-cta-card.kg-cta-card a.kg-cta-button.kg-cta-button,
.article__content .kg-card.kg-cta-card.kg-cta-card a.kg-cta-button.kg-cta-button[style],
.article__content .kg-card.kg-cta-card.kg-cta-card .kg-cta-button.kg-cta-button,
.article__content .kg-card.kg-cta-card.kg-cta-card .kg-cta-button.kg-cta-button[style],
.article__content .kg-card.kg-cta-card.kg-cta-minimal a.kg-cta-button.kg-cta-button,
.article__content .kg-card.kg-cta-card.kg-cta-minimal a.kg-cta-button.kg-cta-button[style] {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: none !important;
  text-align: center !important;
  background: var(--accent-rust) !important;
  background-color: var(--accent-rust) !important;
  color: var(--bg-paper) !important;
  border: none !important;
  padding: 1rem 2.25rem !important;
  border-radius: 2px !important;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transition: background 0.25s ease, background-color 0.25s ease !important;
  align-self: flex-start !important;
}
.article__content .kg-card.kg-cta-card.kg-cta-card a.kg-cta-button.kg-cta-button:hover,
.article__content .kg-card.kg-cta-card.kg-cta-card a.kg-cta-button.kg-cta-button[style]:hover,
.article__content .kg-card.kg-cta-card.kg-cta-card .kg-cta-button.kg-cta-button:hover,
.article__content .kg-card.kg-cta-card.kg-cta-card .kg-cta-button.kg-cta-button[style]:hover,
.article__content .kg-card.kg-cta-card.kg-cta-minimal a.kg-cta-button.kg-cta-button:hover,
.article__content .kg-card.kg-cta-card.kg-cta-minimal a.kg-cta-button.kg-cta-button[style]:hover {
  background: var(--accent-oxblood) !important;
  background-color: var(--accent-oxblood) !important;
  color: var(--bg-paper) !important;
}

/* ---------------------------------------------------------------
   KOENIG CODE CARD — branded
   --------------------------------------------------------------- */
.article__content .kg-code-card {
  background: var(--bg-card);
  border: 1px solid var(--rule-faint);
  border-radius: 2px;
  margin: 1.5rem 0;
}
.article__content .kg-code-card pre {
  background: transparent;
  border: none;
  margin: 0;
}
.article__content .kg-code-card figcaption {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  color: var(--ink-tertiary);
  padding: 0.75rem 1.5rem 1rem;
  margin: 0;
}

/* ---------------------------------------------------------------
   LIGHTBOX — fullscreen image viewer
   --------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s;
  contain: layout style;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(41, 42, 44, 0.82);
  cursor: zoom-out;
}

.lightbox__frame {
  position: relative;
  z-index: 1;
  max-width: min(1100px, 94vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lightbox__frame.is-svg {
  width: min(1100px, 94vw);
}

.lightbox__mount {
  position: relative;
  background: var(--bg-card);
  border: 0.5px solid rgba(246, 245, 244, 0.15);
  border-radius: 6px;
  overflow: hidden;
}

.lightbox__img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: calc(90vh - 80px);
  object-fit: contain;
  cursor: zoom-out;
}

.lightbox__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0 0;
}
.lightbox__fig {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(246, 245, 244, 0.5);
}
.lightbox__close {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 245, 244, 0.6);
  background: none;
  border: 0.5px solid rgba(246, 245, 244, 0.2);
  border-radius: 3px;
  padding: 4px 10px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.lightbox__close:hover {
  color: rgba(246, 245, 244, 0.95);
  border-color: rgba(246, 245, 244, 0.5);
}

/* Nav arrows — positioned at viewport edges */
.lightbox__nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(41, 42, 44, 0.7);
  border: 0.5px solid rgba(246, 245, 244, 0.25);
  border-radius: 3px;
  color: rgba(246, 245, 244, 0.85);
  font-family: var(--font-mono);
  font-size: 18px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  align-items: center;
  justify-content: center;
}
.lightbox.has-nav .lightbox__nav { display: flex; }
.lightbox__nav:hover {
  color: rgba(246, 245, 244, 1);
  border-color: rgba(246, 245, 244, 0.5);
  background: rgba(41, 42, 44, 0.88);
}
.lightbox__nav:disabled {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}
.lightbox__nav--prev { left: 2rem; }
.lightbox__nav--next { right: 2rem; }

@media (max-width: 720px) {
  .lightbox { padding: 1rem; }
  .lightbox__nav--prev { left: 0.5rem; }
  .lightbox__nav--next { right: 0.5rem; }
  .article__content .kg-gallery-card .kg-gallery-row:not(:first-child) .kg-gallery-image { min-height: 64px; }
}

/* ---------------------------------------------------------------
   ERROR PAGE  (error.hbs)
   --------------------------------------------------------------- */
.page--error {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 4rem);
}
.error-block {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}
.error-block__eyebrow {
  justify-content: center;
  margin-bottom: 2rem;
}
.error-block__code {
  font-family: var(--font-display);
  font-size: clamp(96px, 22vw, 180px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent-rust);
  margin-bottom: 2rem;
}
.error-block__message {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink-secondary);
  margin-bottom: 2.5rem;
}
.error-block__back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  text-decoration: none;
  transition: color 0.25s ease, gap 0.25s ease;
}
.error-block__back:hover { color: var(--accent-rust); gap: 0.9rem; }
.error-block__back-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.error-block__back:hover .error-block__back-arrow { transform: translateX(-3px); }

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 720px) {
  .sheet-frame { inset: 12px; }
  .sheet-mark { font-size: 9px; letter-spacing: 0.12em; }
  .sheet-mark--tl, .sheet-mark--tr { top: 18px; }
  .sheet-mark--bl, .sheet-mark--br { bottom: 18px; }
  .sheet-mark--tl, .sheet-mark--bl { left: 22px; }
  .sheet-mark--tr, .sheet-mark--br { right: 22px; }
  /* UPDATED: mobile masthead repositioned for smaller header band */
  .masthead { top: 14px; left: 22px; gap: 0.5rem; }
  .masthead__logo { width: 18px; }
  .masthead__name { font-size: 18px; }
  /* Site nav — mobile repositioned to mirror masthead */
  .site-nav { top: 14px; right: 22px; }
  .site-nav__link { font-size: 9px; }
  /* UPDATED: mobile chrome heights recalibrated */
  .chrome-bar--top { height: 80px; }
  .chrome-bar--bottom { height: 64px; }
  body.is-scrolled .chrome-bar--top { height: 56px; }
  body.is-scrolled .chrome-bar--bottom { height: 48px; }
  /* UPDATED: page padding-top raised to clear taller chrome */
  .page { padding: 8rem 1.25rem 4rem; }
  .page-header { margin-bottom: 3rem; }
  .page-header__title { font-size: 32px; }
  .page-header__lede { font-size: 15.5px; }
  .post-card { padding: 2rem 0; }
  .post-card__row { grid-template-columns: 1fr; gap: 1rem; }
  .post-card__title { font-size: 21px; }
  .post-card__meta { text-align: left; }
  .article__title { font-size: 30px; }
  .article__excerpt { font-size: 18px; }
  .related-posts { margin-top: 4rem; padding-top: 2.5rem; }
  .related-posts__label { font-size: 9px; letter-spacing: 0.14em; }
  .related-posts .post-card { padding: 1.5rem 0; }
  .related-posts .post-card__title { font-size: 19px; }
  .subscribe-block { margin-top: 4rem; padding-top: 2.5rem; }
  .subscribe-block__eyebrow { font-size: 9px; letter-spacing: 0.14em; }
  .share-action { font-size: 9px; letter-spacing: 0.12em; }
  .article__share { margin-top: 1.25rem; }
  .comments-block { margin-top: 3rem; padding-top: 2rem; }
  .subscribe-block__form { flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .subscribe-block__input { flex: 1 1 auto; }
  .tag-header { margin-bottom: 2.5rem; }
  .tag-header__name { font-size: 32px; }
  .tag-header__description { font-size: 17px; }
  .site-footer { padding: 4rem 1.25rem 5rem; }
  .author-sig { margin-top: 3rem; padding-top: 1.5rem; }
  .author-sig__avatar { width: 52px; height: 52px; }
  .author-sig__name { font-size: 17px; }
  .author-sig__role { font-size: 13px; }
  .site-footer__inner { flex-direction: column; gap: 0.75rem; }
  .error-block__code { font-size: 88px; }
  .error-block__message { font-size: 18px; }
}
@media (max-width: 420px) {
  .sheet-mark--bl, .sheet-mark--br { display: none; }
}