@import "https://unpkg.com/open-props";

/* ─────────────────────────────────────────────
   STRUCTURAL TOKENS  (shared scale — StarterKit base-design.md)
   ───────────────────────────────────────────── */
:root {
  --text-xs:    clamp(0.75rem, 1.5vw, 0.82rem);
  --text-sm:    clamp(0.875rem, 1.8vw, 0.98rem);
  --text-base:  clamp(1rem, 2vw, 1.1rem);
  --text-md:    clamp(1.1rem, 2.5vw, 1.35rem);
  --text-lg:    clamp(1.3rem, 3vw, 1.8rem);
  --text-xl:    clamp(1.7rem, 4vw, 2.4rem);
  --text-2xl:   clamp(2.1rem, 5vw, 3.2rem);
  --text-3xl:   clamp(2.6rem, 6.5vw, 4.4rem);
  --text-display: clamp(3rem, 8.5vw, 6rem);

  --space-1: clamp(4px, 1vw, 8px);
  --space-2: clamp(8px, 2vw, 16px);
  --space-3: clamp(16px, 3vw, 24px);
  --space-4: clamp(24px, 4vw, 40px);
  --space-5: clamp(40px, 6vw, 64px);
  --space-6: clamp(64px, 8vw, 104px);
  --space-7: clamp(84px, 10vw, 150px);
  --space-8: clamp(120px, 14vw, 240px);

  --width-content: 1200px;
  --width-wide: 1460px;
  --width-prose: 720px;

  --radius-btn: 0px;
  --radius-card: 14px;
  --radius-badge: 50px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;

  --leading-tight: 1.02;
  --leading-snug: 1.14;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-tighter: -0.035em;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.16em;

  --transition-fast: all 0.16s cubic-bezier(0.4,0,0.2,1);
  --transition-base: all 0.28s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: all 0.5s cubic-bezier(0.16,1,0.3,1);
}

/* ─────────────────────────────────────────────
   BRAND TOKENS  (Pixel Interact — premium dark studio)
   ───────────────────────────────────────────── */
:root {
  --bg: #0B0D0B;
  --surface: #141714;
  --surface-2: #1C211C;
  --surface-3: #232823;
  --text: #F3F6F3;
  --text-muted: #A6AEA6;
  --text-dim: #6E756E;
  --border: rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.14);
  --accent: #89BB1C;
  --accent-press: #78A317;
  --accent-ink: #0B0D0B;
  --accent-wash: rgba(137,187,28,0.10);
  --font-display: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ── RESET / BASE ── */
* {box-sizing: border-box;}
html {-webkit-text-size-adjust: 100%; scroll-behavior: smooth;}
body {margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;}
img {max-width: 100%; display: block;}
h1, h2, h3, h4 {font-family: var(--font-display); font-weight: 500; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); margin: 0;}
p {margin: 0;}
a {color: inherit; text-decoration: none;}
::selection {background: var(--accent); color: var(--accent-ink);}
:focus-visible {outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px;}

/* ── CONTAINERS ── */
.container {max-width: var(--width-content); margin: 0 auto; padding: 0 var(--space-3);}
.container--wide {max-width: var(--width-wide); margin: 0 auto; padding: 0 var(--space-3);}
.container--prose {max-width: var(--width-prose); margin: 0 auto; padding: 0 var(--space-3);}

/* ── UTILITY LABEL / EYEBROW ── */
.eyebrow {display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-muted);}
.eyebrow::before {content: ""; width: 22px; height: 1px; background: var(--accent);}
.eyebrow--plain::before {display: none;}

/* ── BUTTONS ── */
.btn {display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); line-height: 1; border-radius: var(--radius-btn); padding: 15px 26px; cursor: pointer; border: 1px solid transparent; transition: var(--transition-base); white-space: nowrap;}
.btn--primary {background: var(--accent); color: white;}
.btn--primary:hover {background: var(--accent-press); transform: translateY(-2px);}
.btn--ghost {background: transparent; color: var(--text); border-color: var(--border-2);}
.btn--ghost:hover {border-color: var(--text); transform: translateY(-2px);}
.btn--sm {padding: 11px 20px; font-size: var(--text-xs);}
.link-arrow {display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--text-sm); color: var(--accent);}
.link-arrow svg {transition: var(--transition-fast);}
.link-arrow:hover svg {transform: translateX(5px);}

/* ── NAV ── */
#site-header {display: contents;}
.nav-wrap {position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px); border-bottom: 1px solid transparent; transition: var(--transition-base);}
.nav-wrap.scrolled {border-bottom-color: var(--border); background: color-mix(in srgb, var(--bg) 88%, transparent);}
.nav-inner {display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 80px;}
.brand {display: inline-flex; align-items: center; gap: 11px; color: var(--text);}
.brand-mark {width: 34px; height: 34px; border-radius: 0px; object-fit: cover; display: block; flex: none;}
.brand-name {font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: var(--tracking-tight);}
.nav-links {display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px);}
.nav-links a {position: relative; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; padding: 6px 0; transition: var(--transition-fast);}
.nav-links a:hover {color: var(--text);}
.nav-links a.active {color: var(--text);}
.nav-links a.active::after {content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--accent);}
.nav-cta {display: flex; align-items: center; gap: var(--space-3);}
.nav-toggle {display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: 1px solid var(--border-2); border-radius: var(--radius-btn); cursor: pointer;}
.nav-toggle span {display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--text); transition: var(--transition-fast);}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {transform: translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {opacity: 0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {transform: translateY(-7px) rotate(-45deg);}
.mob-nav {display: none; flex-direction: column; padding: var(--space-2) var(--space-3) var(--space-4); border-top: 1px solid var(--border); background: var(--bg);}
.mob-nav a {padding: 16px 0; color: var(--text); font-size: var(--text-md); font-family: var(--font-display); border-bottom: 1px solid var(--border);}
.mob-nav .btn {margin-top: var(--space-3);}
.mob-nav.open {display: flex;}

/* ── HERO ── */
.hero {position: relative; min-height: 92vh; display: flex; align-items: flex-end; padding: var(--space-8) 0 var(--space-7); overflow: hidden;}
.hero-bg {position: absolute; inset: 0; z-index: 0;}
.hero-bg img, .hero-bg video {width: 100%; height: 100%; object-fit: cover; display: block;}
.hero-bg::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,11,0.42) 0%, rgba(11,13,11,0.26) 45%, rgba(11,13,11,0.9) 100%), linear-gradient(90deg, rgba(11,13,11,0.82) 0%, rgba(11,13,11,0.12) 68%);}
.hero .container--wide {position: relative; z-index: 1; width: 100%;}
.hero-inner {max-width: 960px;}
.hero h1 {font-size: var(--text-display); font-weight: 700; letter-spacing: var(--tracking-tighter); line-height: var(--leading-tight); margin: var(--space-3) 0 0; max-width: 16ch;}
.hero .sub {margin-top: var(--space-4); max-width: 58ch; font-size: var(--text-md); color: var(--text-muted); line-height: var(--leading-normal);}
.hero-actions {margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2);}

/* ── SECTION SHELL ── */
.section {padding: var(--space-7) 0;}
.section--tight {padding: var(--space-6) 0;}
.section-head {max-width: 720px; margin-bottom: var(--space-5);}
.section-head h2 {margin-top: var(--space-2); font-size: var(--text-2xl); font-weight: 500; letter-spacing: var(--tracking-tight);}
.divider-line {height: 1px; background: var(--border); border: 0; margin: 0;}

/* ── TECH STRIP ── */
.tech {padding: var(--space-5) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);}
.tech-inner {display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;}
.tech-label {font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-dim); white-space: nowrap;}
.tech-row {display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap;}
.tech-row span {display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); letter-spacing: var(--tracking-tight);}
.tech-row span::before {content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--border-2);}
.tech-row span:hover {color: var(--text);}

/* ── THESIS (full-bleed image) ── */
.thesis {position: relative; padding: var(--space-7) 0; overflow: hidden;}
.thesis-bg {position: absolute; inset: 0; z-index: 0;}
.thesis-bg img {width: 100%; height: 100%; object-fit: cover;}
.thesis-bg::after {content: ""; position: absolute; inset: 0; background: none;} /*linear-gradient(180deg, rgba(11,13,11,0.9), rgba(11,13,11,0.78));}*/
.thesis .container--wide {position: relative; z-index: 1;}
.thesis-grid {display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-5); align-items: end;}
.thesis h2 {font-size: var(--text-2xl); font-weight: 500; letter-spacing: var(--tracking-tight); max-width: 16ch;}
.thesis-body {display: flex; flex-direction: column; gap: var(--space-3);}
.thesis-body p {color: var(--text-muted); font-size: var(--text-md); line-height: var(--leading-normal);}

/* ── SERVICES (accordion) ── */
.svc-list {border-top: 1px solid var(--border);}
.svc {border-bottom: 1px solid var(--border);}
.svc summary {list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-4) 0;}
.svc summary::-webkit-details-marker {display: none;}
.svc-num {font-family: var(--font-display); font-size: var(--text-sm); color: var(--text-dim); font-weight: 500;}
.svc-title {font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-tight); color: var(--text); transition: var(--transition-fast);}
.svc:hover .svc-title {color: var(--accent);}
.svc-plus {position: relative; width: 22px; height: 22px; flex: none;}
.svc-plus::before, .svc-plus::after {content: ""; position: absolute; background: var(--text-muted); transition: var(--transition-base);}
.svc-plus::before {top: 10px; left: 0; width: 22px; height: 2px;}
.svc-plus::after {top: 0; left: 10px; width: 2px; height: 22px;}
.svc[open] .svc-plus::after {transform: rotate(90deg); opacity: 0;}
.svc[open] .svc-plus::before {background: var(--accent);}
.svc-body {display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); padding: 0 0 var(--space-4);}
.svc-body .spacer {width: 1px;}
.svc-desc {max-width: 62ch;}
.svc-desc p {color: var(--text-muted); font-size: var(--text-md); line-height: var(--leading-normal);}
.svc-tags {margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: 10px;}
.svc-tag {font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); padding: 7px 14px; border: 1px solid var(--border-2); border-radius: var(--radius-badge);}

/* ── SELECTED WORK ── */
.work-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);}
.work-card {display: block; border-radius: var(--radius-card); overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: var(--transition-base);}
.work-card:hover {transform: translateY(-5px); border-color: var(--border-2);}
.work-media {position: relative; aspect-ratio: 4 / 3; overflow: hidden;}
.work-media img {width: 100%; height: 100%; object-fit: cover; transition: var(--transition-slow);}
.work-card:hover .work-media img {transform: scale(1.04);}
.work-meta {display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-4);}
.work-title {font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-tight);}
.work-cat {font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-dim); text-align: right; white-space: nowrap;}

/* ── APPROACH ── */
.approach-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;}
.approach-card {background: var(--bg); padding: var(--space-4); transition: var(--transition-base);}
.approach-card:hover {background: var(--surface);}
.approach-card .tick {display: block; width: 26px; height: 3px; background: var(--accent); border-radius: 2px;}
.approach-card h3 {margin: var(--space-3) 0 var(--space-2); font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-tight);}
.approach-card p {color: var(--text-muted); font-size: var(--text-base); line-height: var(--leading-normal);}

/* ── PROCESS (full-bleed image) ── */
.process {position: relative; padding: var(--space-7) 0; overflow: hidden;}
.process-bg {position: absolute; inset: 0; z-index: 0;}
.process-bg img {width: 100%; height: 100%; object-fit: cover;}
.process-bg::after {content: ""; position: absolute; inset: 0; background: rgba(11,13,11,0.4);}
.process .container--wide {position: relative; z-index: 1;}
.process-steps {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-5);}
.process-step {border-top: 2px solid var(--accent); padding-top: var(--space-3);}
.process-step .step-n {font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; color: var(--accent);}
.process-step h3 {margin: var(--space-2) 0; font-size: var(--text-lg); font-weight: 500;}
.process-step p {color: var(--text-muted); font-size: var(--text-base); line-height: var(--leading-normal);}

/* ── WRITING TEASER ── */
.writing-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);}
.write-card {display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); transition: var(--transition-base); min-height: 210px;}
.write-card:hover {transform: translateY(-4px); border-color: var(--border-2);}
.write-cat {font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--accent);}
.write-card h3 {font-family: var(--font-display); font-size: var(--text-md); font-weight: 500; letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); margin-top: auto;}
.write-card .link-arrow {margin-top: var(--space-2);}

/* ── CTA BAND ── */
.cta-band {padding: var(--space-7) 0;}
.cta-inner {display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-6) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);}
.cta-inner h2 {font-size: var(--text-3xl); font-weight: 700; letter-spacing: var(--tracking-tighter); max-width: 18ch;}
.cta-inner p {color: var(--text-muted); font-size: var(--text-md); max-width: 48ch;}
.cta-inner .btn {margin-top: var(--space-2);}

/* ── FOOTER ── */
.footer {border-top: 1px solid var(--border); background: var(--bg); overflow: hidden;}
.foot-top {display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--space-4); padding: var(--space-6) 0 var(--space-5);}
.foot-brand .brand {margin-bottom: var(--space-3);}
.foot-tag {color: var(--text-muted); font-size: var(--text-sm); max-width: 34ch; line-height: var(--leading-normal);}
.foot-col-label {font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-dim); margin-bottom: var(--space-3);}
.foot-links {display: flex; flex-direction: column; gap: 12px;}
.foot-links a {color: var(--text-muted); font-size: var(--text-sm); transition: var(--transition-fast);}
.foot-links a:hover {color: var(--text);}
.foot-contact a {color: var(--text); font-size: var(--text-base); font-weight: 500;}
.foot-contact a:hover {color: var(--accent);}
.footer-wordmark {font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 12.3vw, 14rem); line-height: 0.86; letter-spacing: -0.035em; text-align: center; white-space: nowrap; background: linear-gradient(180deg, #FFFFFF 6%, #0B0D0B 98%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; padding-top: var(--space-3);}
.foot-btm {display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) 0 var(--space-4); border-top: 1px solid var(--border); color: var(--text-dim); font-size: var(--text-xs);}

/* ── PROSE (about) ── */
.page-head {padding: var(--space-8) 0 var(--space-4);}
.page-head h1 {margin-top: var(--space-3); font-size: var(--text-3xl); font-weight: 700; letter-spacing: var(--tracking-tighter); max-width: 20ch;}
.prose {max-width: var(--width-prose);}
.prose > p {font-size: var(--text-md); color: var(--text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-4);}
.prose > p.lead {font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; color: var(--text); line-height: var(--leading-snug);}
.values {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: var(--space-3) 0 var(--space-6);}
.value-card {padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);}
.value-card h3 {font-family: var(--font-display); font-size: var(--text-md); font-weight: 500; margin-bottom: var(--space-2);}
.value-card p {color: var(--text-muted); font-size: var(--text-base); line-height: var(--leading-normal);}
.caps {display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-3);}
.caps span {font-size: var(--text-sm); color: var(--text-muted); padding: 8px 16px; border: 1px solid var(--border-2); border-radius: var(--radius-badge);}

/* ── ARTICLES INDEX ── */
.articles-intro {max-width: var(--width-prose);}
.articles-intro p {font-size: var(--text-md); color: var(--text-muted); line-height: var(--leading-normal);}
.article-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);}
.articles-empty {grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-6) var(--space-3); border: 1px dashed var(--border-2); border-radius: var(--radius-lg); background: var(--surface);}
.articles-empty .dot-row {display: flex; gap: 7px; margin-bottom: var(--space-2);}
.articles-empty .dot-row span {width: 8px; height: 8px; border-radius: 50%; background: var(--border-2);}
.articles-empty .dot-row span:first-child {background: var(--accent);}
.articles-empty h2 {font-size: var(--text-lg); font-weight: 500;}
.articles-empty p {color: var(--text-muted); font-size: var(--text-sm); max-width: 42ch;}

/* card template (used when posts exist) */
.article-card {display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-4); overflow: hidden; transition: var(--transition-base);}
.article-card:hover {transform: translateY(-4px); border-color: var(--border-2);}
/* Optional card thumbnail — bleeds to the top edges; omit for text-only cards. */
.article-thumb {margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3); aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--surface-2);}
.article-thumb img {width: 100%; height: 100%; object-fit: cover; transition: var(--transition-slow);}
.article-card:hover .article-thumb img {transform: scale(1.04);}
.article-meta {display: flex; gap: 12px; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-dim); margin-bottom: var(--space-2);}
.article-card h3 {font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500;}
.article-card p {margin-top: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); flex: 1;}

/* ── SCROLL REVEAL ── */
[data-reveal] {opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);}
[data-reveal="fade"] {transform: none;}
[data-reveal].revealed {opacity: 1; transform: none;}

/* ── HERO LOAD (fallback-safe: visible by default; JS adds .preload before paint) ── */
.preload .hero-inner .eyebrow, .preload .hero-inner h1, .preload .hero-inner .sub, .preload .hero-inner .hero-actions {opacity: 0;}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .thesis-grid {grid-template-columns: 1fr; gap: var(--space-4); align-items: start;}
  .work-grid {grid-template-columns: repeat(2, 1fr);}
  .approach-grid {grid-template-columns: repeat(2, 1fr);}
  .process-steps {grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-3);}
  .writing-grid {grid-template-columns: 1fr; gap: var(--space-3);}
  .values {grid-template-columns: 1fr;}
  .foot-top {grid-template-columns: 1fr 1fr; gap: var(--space-4);}
  .foot-brand {grid-column: 1 / -1;}
}
@media (max-width: 640px) {
  .nav-links {display: none;}
  .nav-cta .btn {display: none;}
  .nav-toggle {display: flex;}
  .hero {min-height: 88vh;}
  .work-grid {grid-template-columns: 1fr;}
  .approach-grid {grid-template-columns: 1fr;}
  .process-steps {grid-template-columns: 1fr;}
  .foot-top {grid-template-columns: 1fr; gap: var(--space-5);}
  .foot-btm {flex-direction: column; gap: 8px; text-align: center;}
  .svc summary {gap: var(--space-2);}
  .svc-body {grid-template-columns: 1fr;}
}
@media (prefers-reduced-motion: reduce) {
  * {transition: none !important; scroll-behavior: auto !important; animation: none !important;}
  [data-reveal] {opacity: 1; transform: none;}
  .preload .hero-inner .eyebrow, .preload .hero-inner h1, .preload .hero-inner .sub, .preload .hero-inner .hero-actions {opacity: 1;}
}

/* ─────────────────────────────────────────────
   ARTICLE POST (single) — /articles/<slug>/
   ───────────────────────────────────────────── */
.breadcrumb {padding: var(--space-6) 0 0;}
.breadcrumb ol {list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-dim);}
.breadcrumb li {display: inline-flex; align-items: center; gap: 10px;}
.breadcrumb li:not(:last-child)::after {content: "/"; color: var(--border-2);}
.breadcrumb a {color: var(--text-muted); transition: var(--transition-fast);}
.breadcrumb a:hover {color: var(--text);}
.breadcrumb li[aria-current] {color: var(--text-muted);}

.post-head {padding: var(--space-3) 0 var(--space-4);}
.post-head h1 {margin-top: var(--space-3); font-size: var(--text-3xl); font-weight: 700; letter-spacing: var(--tracking-tighter); max-width: 20ch;}
.post-meta {display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--space-3); margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-muted);}
.post-meta .author {color: var(--text); font-weight: 500;}
.post-meta .dot {width: 4px; height: 4px; border-radius: 50%; background: var(--border-2);}

/* Slim hero band — holds an optional photo behind a cinematic scrim.
   Falls back to a brand gradient + grid motif when no <img> is present. */
.post-hero {position: relative; margin-top: var(--space-4); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 16 / 7; min-height: clamp(150px, 26vw, 320px); background:
  radial-gradient(120% 140% at 12% 0%, rgba(137,187,28,0.16), transparent 55%),
  radial-gradient(90% 120% at 100% 100%, rgba(137,187,28,0.08), transparent 60%),
  linear-gradient(135deg, var(--surface-2), var(--surface));}
.post-hero img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;}
/* Scrim over the photo keeps it on-brand and text-safe. */
.post-hero.has-photo::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,11,0.12) 0%, rgba(11,13,11,0.34) 55%, rgba(11,13,11,0.74) 100%), linear-gradient(90deg, rgba(11,13,11,0.44) 0%, rgba(11,13,11,0.04) 60%);}
/* Grid motif — only when there is no photo. */
.post-hero:not(.has-photo)::after {content: ""; position: absolute; inset: 0; background-image:
  linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 42px 42px; mask-image: radial-gradient(80% 100% at 20% 0%, #000, transparent 78%);}

/* Article body */
.post-body {max-width: var(--width-prose); margin: 0 auto;}
.post-body > * + * {margin-top: var(--space-4);}
.post-body p {font-size: var(--text-md); color: var(--text-muted); line-height: var(--leading-relaxed);}
.post-body p.lead {font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; color: var(--text); line-height: var(--leading-snug);}
.post-body h2 {font-size: var(--text-xl); font-weight: 600; letter-spacing: var(--tracking-tight); margin-top: var(--space-6); color: var(--text);}
.post-body h3 {font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-tight); margin-top: var(--space-5); color: var(--text);}
.post-body h2 + p, .post-body h3 + p {margin-top: var(--space-3);}
.post-body strong {color: var(--text); font-weight: 700;}
.post-body a {color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); transition: var(--transition-fast);}
.post-body a:hover {text-decoration-color: var(--accent);}
.post-body ul, .post-body ol {padding-left: 1.3em; color: var(--text-muted); font-size: var(--text-md); line-height: var(--leading-relaxed);}
.post-body li + li {margin-top: 10px;}
.post-body li::marker {color: var(--accent);}
.post-body blockquote {margin: var(--space-5) 0; padding: var(--space-2) 0 var(--space-2) var(--space-4); border-left: 2px solid var(--accent); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; color: var(--text); line-height: var(--leading-snug);}
.post-body blockquote p {font-size: inherit; color: inherit; line-height: inherit;}

/* Related reading */
.related {border-top: 1px solid var(--border); margin-top: var(--space-6); padding-top: var(--space-5);}
.related .eyebrow {margin-bottom: var(--space-4);}
.related-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3);}

/* Back link */
.post-back {margin-top: var(--space-5);}
.post-back .link-arrow svg {transform: scaleX(-1);}
.post-back .link-arrow:hover svg {transform: scaleX(-1) translateX(5px);}

@media (max-width: 640px) {
  .related-grid {grid-template-columns: 1fr;}
}