/* ── GitHire v5 · base palette + typography ──────────────────── */

:root{
  --paper:      #F6F1E8;
  --paper-2:    #EFE9DC;
  --ink:        #181818;
  --ink-soft:   #4A4A48;
  --ink-mute:   #8A887F;
  --line:       rgba(24,24,24,0.14);
  --accent:     #D97757;
  --accent-ink: #B54A27;   /* darker terracotta for readable/interactive text — 4.7:1 on paper. --accent stays for fills + large decorative. */
  --ink-label:  #67645B;   /* muted label color that still clears AA — 5.3:1 on paper. Replaces --ink-mute for kicker-sized text. */
  --navy:       #1C2348;
  --lilac:      #B7B1D9;

  /* One typographic system — Spectral for Latin, Noto Serif SC for CJK.
     No mono. Meta/label tone comes from letter-spacing + small caps. */
  --font-serif: "Spectral", "Noto Serif SC", "Songti SC", Georgia, serif;
  --font-sans:  "Spectral", "Noto Serif SC", system-ui, sans-serif;
  --font-mono:  "Spectral", "Noto Serif SC", Georgia, serif;

  --max:        1280px;
  --gutter:     clamp(20px, 4vw, 56px);
  --rhythm:     clamp(80px, 12vw, 160px);

  --stage-opacity: 1;
  --hero-wash: 0.2;
  --definition-opacity: 1;
  --definition-y: 0px;
  --closer-overlay: 0.25;
  --closer-beam-opacity: 0.42;
  --closer-beam-y: -28px;
}

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

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}
body {
  min-height: 100vh;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }

/* Visible keyboard focus for every interactive element. Specific components
   below may layer on their own treatment, but none should remove this without
   a replacement of at least 3:1 against its background. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip{
  position: absolute; top: -100px; left: 12px;
  background: var(--ink); color: var(--paper);
  padding: 8px 12px; border-radius: 4px;
  z-index: 1000;
}
.skip:focus { top: 12px; }

/* ── Persistent canvas behind all sections ───────────────────── */

#stage{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
  opacity: var(--stage-opacity);
  transition: opacity 80ms linear;
}

main, .topnav, .site-foot { position: relative; z-index: 1; }

/* ── Top nav ─────────────────────────────────────────────────── */

.topnav{
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  z-index: 20;
  pointer-events: none;
}
.topnav > * { pointer-events: auto; }

.topnav .brand{
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: color 220ms ease, opacity 220ms ease;
}
.topnav .brand-mark{
  width: 30px; height: 30px;
  display: block;
}
.topnav .brand-name{
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.005em;
}

.topnav-actions{
  display: flex; align-items: center; gap: 10px;
  position: relative;
}

.btn-primary, .btn-ghost{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.005em;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn-primary{
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { transform: translateY(-1px); background: #000; }

.btn-ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { background: rgba(24,24,24,0.04); }
.btn-ghost[aria-expanded="true"]{
  background: rgba(24,24,24,0.07);
  border-color: rgba(24,24,24,0.24);
}

.btn-primary.lg, .btn-ghost.lg{
  font-size: 14px;
  padding: 16px 28px;
}

.lang-switch{
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: transparent;
  height: 36px;
}
.lang-switch button{
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0 12px;
  min-width: 36px;
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  transition: background 160ms ease, color 160ms ease;
}
.lang-switch button + button{
  border-left: 1px solid var(--line);
}
.lang-switch button:hover{
  background: rgba(24,24,24,0.06);
  color: var(--ink);
}
.lang-switch button.is-active,
.lang-switch button[aria-pressed="true"]{
  background: var(--ink);
  color: var(--paper);
}
.topnav.nav-on-dark .lang-switch{
  border-color: rgba(244, 239, 229, 0.24);
}
.topnav.nav-on-dark .lang-switch button{
  color: rgba(244, 239, 229, 0.7);
}
.topnav.nav-on-dark .lang-switch button + button{
  border-left-color: rgba(244, 239, 229, 0.24);
}
.topnav.nav-on-dark .lang-switch button:hover{
  background: rgba(244, 239, 229, 0.08);
  color: rgba(244, 239, 229, 0.96);
}
.topnav.nav-on-dark .lang-switch button.is-active,
.topnav.nav-on-dark .lang-switch button[aria-pressed="true"]{
  background: rgba(244, 239, 229, 0.92);
  color: #0F0F10;
}
@media (max-width: 560px){
  .lang-switch{ height: 32px; }
  .lang-switch button{ padding: 0 9px; min-width: 32px; font-size: 12px; }
}

.nav-menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(240px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(246, 241, 232, 0.92);
  box-shadow: 0 24px 56px rgba(24, 24, 24, 0.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.nav-menu.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.nav-menu a{
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.nav-menu a:hover,
.nav-menu a:focus-visible{
  background: rgba(24,24,24,0.06);
  color: var(--accent-ink);
}

.topnav.nav-on-dark .brand{
  color: rgba(244, 239, 229, 0.9);
}
.topnav.nav-on-dark .brand-mark [stroke="#181818"]{
  stroke: rgba(244, 239, 229, 0.82);
}
.topnav.nav-on-dark .brand-mark [fill="#181818"]{
  fill: rgba(244, 239, 229, 0.82);
}
.topnav.nav-on-dark .btn-primary{
  background: rgba(244, 239, 229, 0.92);
  color: #0F0F10;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}
.topnav.nav-on-dark .btn-primary:hover{
  background: #fffaf0;
}
.topnav.nav-on-dark .btn-ghost{
  background: rgba(244, 239, 229, 0.04);
  color: rgba(244, 239, 229, 0.76);
  border-color: rgba(244, 239, 229, 0.24);
}
.topnav.nav-on-dark .btn-ghost:hover,
.topnav.nav-on-dark .btn-ghost[aria-expanded="true"]{
  background: rgba(244, 239, 229, 0.1);
  color: rgba(244, 239, 229, 0.96);
  border-color: rgba(244, 239, 229, 0.38);
}
.topnav.nav-on-dark .nav-menu{
  background: rgba(15, 15, 16, 0.86);
  border-color: rgba(244, 239, 229, 0.18);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.34);
}
.topnav.nav-on-dark .nav-menu a{
  color: rgba(244, 239, 229, 0.86);
}
.topnav.nav-on-dark .nav-menu a:hover,
.topnav.nav-on-dark .nav-menu a:focus-visible{
  background: rgba(244, 239, 229, 0.08);
  color: var(--accent);
}
@media (max-width: 560px){
  .topnav{ padding-top: 14px; }
  .topnav .brand-name{ display: none; }
  .btn-primary, .btn-ghost{ padding: 9px 14px; font-size: 14px; }
}

/* ── Generic scene-section ───────────────────────────────────── */

.scene-section{
  position: relative;
  padding: var(--rhythm) var(--gutter);
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
}

.meta{
  font-family: var(--font-serif);
  font-variant: small-caps;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--ink-label);
  margin: 0 0 24px;
}

.section-head{
  margin-bottom: clamp(48px, 8vw, 96px);
}
.section-head h2{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: pretty;
  max-width: 18ch;
}

/* ── ACT 1 · Hero ────────────────────────────────────────────── */

.scene-intro{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--rhythm) + 24px);
  overflow: hidden;
}
.scene-intro::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(180px, 26vh, 320px);
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(246, 241, 232, 0) 0%,
      rgba(246, 241, 232, 0.52) 46%,
      var(--paper) 100%
    );
  opacity: var(--hero-wash);
  z-index: 0;
}
.hero-content{
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--gutter);
}
/* Soft paper scrim between the moving canvas and the text. Sits inside the
   hero's stacking context (so it's above the z-0 canvas) but behind the copy,
   lifting legibility while the starfield still reads through at the edges. */
.hero-content::before{
  content: "";
  position: absolute;
  inset: -10% -8%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 76% 66% at 50% 47%,
    rgba(246, 241, 232, 0.85) 0%,
    rgba(246, 241, 232, 0.66) 40%,
    rgba(246, 241, 232, 0) 76%
  );
}
.hero-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(56px, 9vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 18px 0 28px;
  text-wrap: balance;
}
.hero-title em{
  font-style: italic;
  font-weight: 500;
}
.hero-title .hl-1, .hero-title .hl-2{
  display: block;
}
.hero-title .period{
  color: var(--accent);
}
.hero-lede{
  max-width: 30ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.4vw, 19px);
  font-style: italic;
}
.scroll-hint{
  position: absolute;
  bottom: 36px; left: 0; right: 0;
  z-index: 1;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.scroll-hint span{ display: inline-block; margin-left: 6px; animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(6px); } }

/* ── ACT 2 · Definition ──────────────────────────────────────── */

.scene-definition{
  position: relative;
  margin-top: -1px;
  background:
    linear-gradient(to bottom, var(--paper) 0%, rgba(246,241,232,0.96) 28%, rgba(246,241,232,0) 70%);
}
.scene-definition::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(96px, 14vw, 180px);
  pointer-events: none;
  background: linear-gradient(to bottom, var(--paper), rgba(246,241,232,0));
}
.scene-definition .wrap{
  position: relative;
  z-index: 1;
  opacity: var(--definition-opacity);
  transform: translateY(var(--definition-y));
  transition: opacity 80ms linear, transform 80ms linear;
}
.scene-definition .definition-line{
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.18;
  margin: 0 0 clamp(56px, 8vw, 96px);
  max-width: 20ch;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.scene-definition .definition-line em{
  font-style: italic;
  color: var(--ink);
}
.scene-definition .definition-line strong{
  font-weight: 600;
}

.pillars{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 0;
}
.pillar{
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.pillar dt{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.005em;
  margin-bottom: 10px;
  display: flex; align-items: baseline; gap: 10px;
}
.pillar dd{
  margin: 0;
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 28ch;
}
@media (max-width: 760px){
  .pillars{ grid-template-columns: 1fr; }
}

/* ── ACT 3 · Workflow ────────────────────────────────────────── */

/* ── Workflow · full-screen panels (flim.ai-inspired) ────────── */
.wf-stage{
  position: relative;
  z-index: 1;
}
.wf-panel{
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--rhythm) var(--gutter);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.wf-panel.is-key{ color: var(--accent-ink); }
.wf-grid{
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 120px);
  align-items: center;
}
.wf-grid.reverse{ direction: rtl; }
.wf-grid.reverse > *{ direction: ltr; }
.wf-fig{
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
.wf-fig svg{ width: 100%; height: 100%; }
.wf-text{ max-width: 38ch; }
.wf-counter{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  margin: 0 0 24px;
}
.wf-counter span{ color: var(--accent-ink); }
.wf-panel h3{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0 0 32px;
  text-wrap: balance;
  color: var(--ink);
}
.wf-panel.is-key h3{ color: var(--ink); }
.wf-panel h3 em{ font-style: italic; font-weight: 500; }
.wf-panel h3 .period{ color: var(--accent); }
.wf-body{
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: 36ch;
}
.wf-en{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
@media (max-width: 880px){
  .wf-grid, .wf-grid.reverse{ grid-template-columns: 1fr; direction: ltr; gap: 40px; }
  .wf-fig{ max-width: 280px; }
}

/* Workflow · per-panel scroll entrance — counter / h3 / body / en / fig stagger */
.wf-panel .wf-counter,
.wf-panel h3,
.wf-panel .wf-body,
.wf-panel .wf-en{
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 800ms cubic-bezier(.2,.7,.2,1),
    transform 800ms cubic-bezier(.2,.7,.2,1);
}
.wf-panel .wf-fig{
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 1000ms cubic-bezier(.2,.7,.2,1),
    transform 1100ms cubic-bezier(.2,.7,.2,1);
}
.wf-panel.is-visible .wf-counter{ opacity: 1; transform: none; transition-delay: 0ms; }
.wf-panel.is-visible h3       { opacity: 1; transform: none; transition-delay: 120ms; }
.wf-panel.is-visible .wf-body { opacity: 1; transform: none; transition-delay: 260ms; }
.wf-panel.is-visible .wf-en   { opacity: 1; transform: none; transition-delay: 380ms; }
.wf-panel.is-visible .wf-fig  { opacity: 1; transform: none; transition-delay: 80ms; }

/* Filled SVG elements (dots, silhouette, text) — fade in after the strokes draw */
.wf-panel .wf-fig svg [fill]:not([fill="none"]){
  opacity: 0;
  transition: opacity 700ms cubic-bezier(.2,.7,.2,1);
  transition-delay: 900ms;
}
.wf-panel.is-visible .wf-fig svg [fill]:not([fill="none"]){ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .wf-panel .wf-counter,.wf-panel h3,.wf-panel .wf-body,.wf-panel .wf-en,.wf-panel .wf-fig{
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}
.wf-overview{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rhythm) var(--gutter);
  background: var(--paper-2);
}
.wf-overview-inner{
  max-width: var(--max);
  margin: 0 auto;
  text-align: center;
}
.wf-overview-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 16px 0 64px;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms cubic-bezier(.2,.7,.2,1), transform 800ms cubic-bezier(.2,.7,.2,1);
}
.wf-overview.is-revealed .wf-overview-title{ opacity: 1; transform: none; }
.wf-overview-title em{ font-style: italic; font-weight: 500; }
.wf-overview-title .period{ color: var(--accent); }
.wf-flow{
  list-style: none; padding: 0; margin: 0 0 56px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  position: relative;
  align-items: start;
}
.wf-flow::before{
  content: "";
  position: absolute;
  top: 40px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1600ms cubic-bezier(.2,.7,.2,1) 300ms;
}
.wf-overview.is-revealed .wf-flow::before{ transform: scaleX(1); }
.wf-flow li{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(16px) scale(0.92);
  transition: opacity 600ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
}
.wf-overview.is-revealed .wf-flow li{ opacity: 1; transform: none; }
.wf-overview.is-revealed .wf-flow li:nth-child(1){ transition-delay: 400ms; }
.wf-overview.is-revealed .wf-flow li:nth-child(2){ transition-delay: 600ms; }
.wf-overview.is-revealed .wf-flow li:nth-child(3){ transition-delay: 800ms; }
.wf-overview.is-revealed .wf-flow li:nth-child(4){ transition-delay: 1000ms; }
.wf-overview.is-revealed .wf-flow li:nth-child(5){ transition-delay: 1200ms; }
.wf-overview.is-revealed .wf-flow li:nth-child(6){ transition-delay: 1400ms; }
.wf-overview .wf-overview-foot{
  opacity: 0;
  transition: opacity 700ms ease 1700ms;
}
.wf-overview.is-revealed .wf-overview-foot{ opacity: 1; }
.wf-flow svg{
  width: 80px; height: 80px;
  background: var(--paper-2);
  padding: 12px;
  color: var(--ink);
}
.wf-flow li.is-key svg{ color: var(--accent); }
.wf-flow span{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.wf-overview-foot{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-mute);
  margin: 0;
}
.wf-overview-cta{
  margin: 22px 0 0;
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 0.02em;
}
.wf-overview-cta a{
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  text-decoration: none;
  font-style: italic;
  transition: color .2s ease;
}
.wf-overview-cta a:hover{
  color: var(--accent);
}
@media (max-width: 760px){
  .wf-flow{ grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .wf-flow::before{ display: none; }
}

/* legacy hidden */
.wf-pipeline{
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.wf-pipeline::before{
  content: "";
  position: absolute;
  left: 14px; top: 12px; bottom: 12px;
  width: 1px;
  background: linear-gradient(to bottom, var(--accent) 0%, var(--accent) 30%, var(--line) 100%);
}
.wf-pipeline > li{
  position: relative;
  padding: 32px 0 32px 60px;
  border-bottom: 1px solid var(--line);
}
.wf-pipeline > li:last-child{ border-bottom: 0; }
.wf-dot{
  position: absolute;
  left: 8px; top: 38px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
}
.wf-pipeline > li.is-key .wf-dot{
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 6px rgba(217,119,87,0.18);
}
.wf-num{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--accent-ink);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.wf-pipeline h3{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 34px);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
  line-height: 1.18;
}
.wf-pipeline h3 em{
  font-style: italic;
  font-weight: 400;
  color: var(--ink-mute);
  font-size: 0.7em;
  margin-left: 8px;
  letter-spacing: 0.08em;
}
.wf-pipeline p:last-child{
  margin: 0;
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 58ch;
}
.wf-pipeline > li.is-key h3{ color: var(--ink); }
.wf-pipeline > li.is-key{
  background: linear-gradient(to right, rgba(217,119,87,0.05), transparent 60%);
}

/* Hero entrance — meta / title parts stagger in on load */
@keyframes heroRise{ from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.hero-content .meta{ animation: heroRise 900ms cubic-bezier(.2,.7,.2,1) both; }
.hero-content .hero-title .hl-1{ display: inline-block; animation: heroRise 1000ms cubic-bezier(.2,.7,.2,1) 180ms both; }
.hero-content .hero-title .hl-2{ display: inline-block; animation: heroRise 1000ms cubic-bezier(.2,.7,.2,1) 360ms both; }
.hero-content .hero-lede{ animation: heroRise 900ms cubic-bezier(.2,.7,.2,1) 620ms both; }
.hero-content .hero-title .period{ animation: heroRise 700ms cubic-bezier(.2,.7,.2,1) 820ms both; }

/* Scroll-driven exit — fades as the hero scrolls away */
.scene-intro{ --hero-exit: 0; }
.hero-content{
  opacity: calc(1 - var(--hero-exit));
  transform: translateY(calc(var(--hero-exit) * -40px));
  transition: opacity 80ms linear, transform 80ms linear;
}
@media (prefers-reduced-motion: reduce){
  .hero-content .meta,
  .hero-content .hero-title .hl-1,
  .hero-content .hero-title .hl-2,
  .hero-content .hero-title .period,
  .hero-content .hero-lede{ animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Section lede paragraph */
.section-head .section-lede{
  margin: 24px 0 0;
  max-width: 56ch;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Ritual cards — flip-open reveal on scroll */
.rituals-cards{
  list-style: none;
  padding: 0;
  margin: 64px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.ritual-card{
  background: var(--paper);
  perspective: 1400px;
  min-height: 440px;
}
.ritual-inner{
  padding: clamp(28px, 3.5vw, 56px);
  height: 100%;
  transform-origin: top center;
  transform: rotateX(-92deg);
  opacity: 0;
  transition:
    transform 900ms cubic-bezier(.2,.7,.2,1),
    opacity 600ms ease-out;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.ritual-card.is-revealed .ritual-inner{
  transform: rotateX(0);
  opacity: 1;
}
.ritual-num{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink-label);
  margin: 0 0 28px;
  text-transform: uppercase;
}
.ritual-card h3{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink);
}
.ritual-en{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 22px;
}
.ritual-body{
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 42ch;
}
.ritual-dl{
  margin: 0;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 32px;
  row-gap: 12px;
  align-items: baseline;
}
.ritual-dl dt{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ritual-dl dd{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
@media (max-width: 760px){
  .rituals-cards{ grid-template-columns: 1fr; }
}

/* legacy hidden */
.rituals-list{
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.rituals-list li{
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.rituals-list h3{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.rituals-list p{
  margin: 0;
  font-size: 15px;
  color: var(--ink-soft);
}
@media (max-width: 980px){
  .rituals-list{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .rituals-list{ grid-template-columns: 1fr; }
}

/* ── ACT 5 · FAQ ─────────────────────────────────────────────── */

.scene-faq{
  position: relative;
  z-index: 1;
  padding-bottom: calc(var(--rhythm) + clamp(48px, 8vw, 120px));
  overflow: hidden;
  background: var(--paper);
}
.scene-faq .wrap{
  position: relative;
  z-index: 2;
}
.scene-faq::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(180px, 24vw, 320px);
  pointer-events: none;
  z-index: 1;
  opacity: var(--closer-overlay);
  background:
    linear-gradient(
      to bottom,
      rgba(246,241,232,0) 0%,
      rgba(246,241,232,0.72) 16%,
      rgba(65,61,55,0.55) 58%,
      #0F0F10 100%
    );
}
.faq-list{
  border-top: 1px solid var(--line);
}
.faq-list details{
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.faq-list summary{
  list-style: none;
  cursor: pointer;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.005em;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after{
  content: "+";
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 28px;
  color: var(--accent);
  transition: transform .25s ease;
  line-height: 0.6;
}
.faq-list details[open] summary::after{
  content: "−";
  transform: rotate(0deg);
}
.faq-list details p{
  margin: 16px 0 0;
  color: var(--ink-soft);
  max-width: 64ch;
  font-size: 17px;
}
.faq-list em { font-style: italic; color: var(--ink); }
.faq-list details p strong{
  font-weight: 600;
  color: var(--ink);
}
.faq-list details p a{
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  text-decoration: none;
  font-style: italic;
  transition: color .2s ease;
}
.faq-list details p a:hover{ color: var(--accent); }

/* FAQ details · smooth open + summary hover */
.faq-list details{
  overflow: hidden;
  transition: background 400ms ease;
}
.faq-list details summary{
  cursor: pointer;
  transition: color 240ms ease;
}
.faq-list details summary:hover{ color: var(--accent-ink); }
.faq-list details[open] summary{ color: var(--accent-ink); }
.faq-list details > p{
  margin: 16px 0 0;
  color: var(--ink-soft);
  max-width: 64ch;
  font-size: 17px;
  line-height: 1.65;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.faq-list details[open] > p{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  .faq-list details > p{ opacity: 1 !important; transform: none !important; }
}

/* Closer · dark-in fade — paper → ink crossfade as section enters */
.scene-closer.is-dark{ transition: background-color 900ms cubic-bezier(.2,.7,.2,1), color 900ms ease; }
.scene-closer.is-dark .closer-line,
.scene-closer.is-dark .closer-en,
.scene-closer.is-dark .meta{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1000ms cubic-bezier(.2,.7,.2,1), transform 1000ms cubic-bezier(.2,.7,.2,1);
}
/* On the dark closer the kicker must use the light section color, not the
   paper-bg --ink-label, or it sinks to ~2.5:1 on near-black. */
.scene-closer.is-dark .meta{ color: inherit; }
.scene-closer.is-dark.is-revealed .meta      { opacity: 0.55; transform: none; transition-delay: 200ms; }
.scene-closer.is-dark.is-revealed .closer-line{ opacity: 1; transform: none; transition-delay: 380ms; }
.scene-closer.is-dark.is-revealed .closer-en { opacity: 0.6; transform: none; transition-delay: 700ms; }
@media (prefers-reduced-motion: reduce){
  .scene-closer.is-dark .closer-line,
  .scene-closer.is-dark .closer-en,
  .scene-closer.is-dark .meta{ opacity: 1 !important; transform: none !important; }
}

.scene-closer{
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-top: calc(var(--rhythm) + clamp(44px, 6vw, 96px));
  min-height: 100svh;
  padding-bottom: calc(var(--rhythm) + clamp(36px, 6vh, 72px));
  margin-top: -1px;
}
.scene-closer.is-dark{
  background: #0F0F10;
  color: #F4EFE5;
}
.scene-closer::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(180px, 24vw, 360px);
  pointer-events: none;
  opacity: var(--closer-beam-opacity);
  background:
    linear-gradient(to bottom, rgba(244,239,229,0.12) 0%, rgba(15,15,16,0.2) 36%, rgba(15,15,16,0) 100%),
    repeating-linear-gradient(
      90deg,
      rgba(244,239,229,0.08) 0 2px,
      transparent 2px 28px,
      rgba(217,119,87,0.2) 28px 30px,
      transparent 30px 64px
    );
  transform: translateY(var(--closer-beam-y));
  transition: opacity 80ms linear, transform 80ms linear;
}
.scene-closer .wrap{
  position: relative;
  z-index: 1;
}
.scene-closer.is-dark .meta{ color: rgba(244,239,229,0.55); }
.scene-closer.is-dark .closer-line{ color: #F4EFE5; }
.scene-closer.is-dark .closer-line em{ color: #F4EFE5; }
.scene-closer.is-dark .closer-en{ color: rgba(244,239,229,0.6); }
.closer-line{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(48px, 8vw, 104px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 14px auto 28px;
  max-width: 16ch;
}
.closer-line em{
  font-style: italic;
  font-weight: 500;
}
.closer-line .period{ color: var(--accent); }
.closer-en{
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.4vw, 19px);
  max-width: 48ch;
  margin: 0 auto;
  line-height: 1.5;
}

.closer-cta{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  max-width: 64ch;
}
.closer-link{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 17px);
  color: #F4EFE5;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 239, 229, 0.35);
  padding-bottom: 2px;
  letter-spacing: 0.01em;
  transition: color .25s ease, border-color .25s ease;
}
.closer-link:hover,
.closer-link:focus-visible{
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.scene-closer.is-dark .closer-cta{ opacity: 0; transform: translateY(10px); transition: opacity 900ms ease, transform 900ms cubic-bezier(.2,.7,.2,1); }
.scene-closer.is-dark.is-revealed .closer-cta{ opacity: 1; transform: none; transition-delay: 900ms; }
@media (prefers-reduced-motion: reduce){
  .scene-closer.is-dark .closer-cta{ opacity: 1 !important; transform: none !important; }
}

/* ── Footer ──────────────────────────────────────────────────── */
/* Continues the Closer's dark theme — no harsh ink/paper edge. */

.site-foot{
  background: #0F0F10;
  color: rgba(245, 240, 230, 0.55);
  border-top: 1px solid rgba(245, 240, 230, 0.08);
  padding: 28px var(--gutter) 34px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.01em;
  position: relative;
}
/* Hairline accent stripe — Barcode Mark callback */
.site-foot::before{
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0,
    rgba(245, 240, 230, 0.18) 18%,
    rgba(245, 240, 230, 0.18) 46%,
    var(--accent) 46%,
    var(--accent) 54%,
    rgba(245, 240, 230, 0.18) 54%,
    rgba(245, 240, 230, 0.18) 82%,
    transparent 100%
  );
  opacity: 0.7;
}
.site-foot .wrap{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(220px, 0.8fr);
  align-items: center;
  gap: 20px;
  max-width: var(--max);
}
.site-foot .repo{ text-align: center; }
@media (max-width: 760px){
  .site-foot .wrap{ grid-template-columns: 1fr; gap: 14px; }
  .site-foot .repo, .site-foot .home{ text-align: left; }
}
.site-foot p { margin: 0; }
.site-foot .repo a {
  font-style: normal;
  letter-spacing: 0;
  color: rgba(245, 240, 230, 0.82);
  border-bottom: 1px solid rgba(245, 240, 230, 0.18);
  padding-bottom: 1px;
  transition: color 180ms ease, border-color 180ms ease;
}
.site-foot .repo a:hover{
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.site-foot a { text-decoration: none; }
.site-foot .home{ text-align: right; }
.site-foot .home a{
  color: rgba(245, 240, 230, 0.55);
  transition: color 180ms ease;
}
.site-foot .home a:hover{ color: var(--accent); }

/* ── Bottom scroll · Blog handoff ────────────────────────────── */

.blog-jump-prompt{
  --blog-jump-progress: 0;
  display: grid;
  justify-self: end;
  width: min(300px, 100%);
  gap: 10px;
  color: rgba(244, 239, 229, 0.58);
  text-align: right;
  pointer-events: none;
  opacity: 0.88;
  transition: opacity 220ms ease, color 220ms ease;
}
.blog-jump-prompt.is-ready,
.blog-jump-prompt.is-primed{
  color: rgba(244, 239, 229, 0.92);
  opacity: 1;
}
.blog-jump-prompt.is-complete{
  color: #F4EFE5;
}
.blog-jump-copy{
  display: grid;
  gap: 4px;
}
.blog-jump-kicker{
  color: var(--accent);
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.blog-jump-copy strong{
  color: currentColor;
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.2vw, 17px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
}
.blog-jump-track{
  position: relative;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(244, 239, 229, 0.16);
}
.blog-jump-track span{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #f0b08d);
  transform: scaleX(var(--blog-jump-progress));
  transform-origin: left center;
  transition: transform 120ms linear;
}
@media (max-width: 760px){
  .blog-jump-prompt{
    justify-self: stretch;
    width: 100%;
    text-align: left;
  }
}

/* ── Reduced motion / no-WebGL fallback ──────────────────────── */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  #stage { display: none; }
}
body.no-webgl #stage{ display: none; }
body.no-webgl{ background: var(--paper); }

/* ── Blog route ──────────────────────────────────────────────── */

.blog-page{
  background:
    linear-gradient(rgba(24,24,24,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,24,24,0.045) 1px, transparent 1px),
    var(--paper);
  background-size: 56px 56px;
}
.blog-main{
  min-height: calc(100vh - 120px);
  position: relative;
  z-index: 1;
}
.blog-hero{
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--rhythm) + 36px);
}
.blog-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(40px, 6.6vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  max-width: 22ch;
  word-break: keep-all;
}
.blog-title em{
  font-style: italic;
  color: var(--ink);
}
.blog-title em .period{ color: var(--accent); }
.blog-lede{
  max-width: 60ch;
  margin: 0 0 clamp(40px, 6vw, 72px);
  color: var(--ink-soft);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.7;
}

/* ── Case index (blog as cases) ──────────────────────────── */

.case-index{
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.case-entry{
  position: relative;
  padding: clamp(28px, 3.4vw, 44px);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.5);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.case-entry.is-live{
  background: #fff;
  border-left: 3px solid var(--accent);
  box-shadow: 0 12px 28px rgba(24,24,24,0.05);
}
.case-entry.is-live:hover,
.case-entry.is-live:focus-within{
  border-left-color: var(--ink);
  transform: translateY(-2px);
}
.case-entry-link{
  display: block;
  text-decoration: none;
  color: inherit;
}
.case-entry-link:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; }
.case-entry-head{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 18px;
  margin-bottom: 14px;
  font-family: var(--font-serif);
}
.case-entry-num{
  margin: 0;
  font-variant: small-caps;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.case-entry-meta{
  margin: 0;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  font-feature-settings: "tnum" 1;
}
.case-entry-title{
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  max-width: 26ch;
  word-break: keep-all;
}
.case-entry-title em{
  font-style: italic;
  background-image: linear-gradient(to bottom, transparent 64%, rgba(217,119,87,0.22) 64%, rgba(217,119,87,0.22) 92%, transparent 92%);
  padding: 0 0.04em;
}
.case-entry-title .period{ color: var(--accent); }
.case-entry-desc{
  margin: 0 0 18px;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
}
.case-entry-tags{
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.case-entry-tags span{
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  background: rgba(246,241,232,0.55);
}
.case-entry-cta{
  margin: 0;
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  display: inline-block;
  padding-bottom: 1px;
  transition: color .2s ease;
}
.case-entry-link:hover .case-entry-cta{ color: var(--accent); }

.case-entry.is-pending{
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: clamp(20px, 2.4vw, 30px) clamp(28px, 3.4vw, 44px);
  border-style: dashed;
  background: transparent;
  color: var(--ink-mute);
}
.case-entry.is-pending .case-entry-num{
  flex: 0 0 auto;
}
.case-entry-title-mute{
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}

.blog-foot{
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
}
.blog-foot a{
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  text-decoration: none;
}
.blog-foot a:hover{ color: var(--accent); }
.blog-foot .sep{ margin: 0 12px; color: var(--ink-mute); }

@media (max-width: 620px){
  .case-entry.is-pending{
    flex-direction: column;
    gap: 6px;
  }
}


/* ── Skill route ─────────────────────────────────────────────── */

.skill-page{
  background:
    linear-gradient(rgba(24,24,24,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,24,24,0.045) 1px, transparent 1px),
    var(--paper);
  background-size: 56px 56px;
}
.skill-main{
  min-height: calc(100vh - 120px);
  position: relative;
  z-index: 1;
}
.skill-hero{
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--rhythm) + 36px);
}
.skill-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(56px, 10vw, 136px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  max-width: 11ch;
}
.skill-title em{
  font-style: italic;
  color: var(--accent);
}
.skill-lede{
  max-width: 58ch;
  margin: 0 0 clamp(36px, 5vw, 64px);
  color: var(--ink-soft);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.65;
}
.skill-panel{
  max-width: 780px;
  margin: 0 0 clamp(34px, 5vw, 58px);
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--line);
  background: rgba(246,241,232,0.84);
}
.skill-kicker{
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.skill-command{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 100%;
  padding: 12px 12px 12px 18px;
  border: 1px solid rgba(24,24,24,0.13);
  background: rgba(255,255,255,0.58);
  box-shadow: 0 16px 36px rgba(24,24,24,0.06);
}
.skill-command code{
  min-width: 0;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.skill-copy{
  flex: 0 0 auto;
  min-width: 84px;
  min-height: 44px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.skill-copy:hover{
  transform: translateY(-1px);
  background: var(--accent);
  border-color: var(--accent);
}
.skill-copy:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.skill-note{
  max-width: 64ch;
  margin: 18px 0 0;
  color: var(--ink-soft);
  line-height: 1.65;
}
.skill-note a{
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  text-decoration: none;
  color: var(--ink);
}
.skill-note a:hover{ color: var(--accent); }
.skill-inline{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(24,24,24,0.05);
  padding: 1px 6px;
  border-radius: 3px;
}
.skill-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  background: var(--line);
}
.skill-list li{
  min-height: 180px;
  padding: clamp(22px, 3vw, 34px);
  background: rgba(246,241,232,0.84);
  color: var(--ink-soft);
  line-height: 1.6;
}
.skill-list li strong{
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(17px, 1.3vw, 19px);
  color: var(--ink);
  letter-spacing: 0.01em;
}
.skill-list li a{
  display: inline-block;
  margin-top: 6px;
  font-style: italic;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  text-decoration: none;
  color: var(--ink);
}
.skill-list li a:hover{ color: var(--accent); }
.skill-list span{
  display: block;
  margin-bottom: 28px;
  color: var(--accent);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.12em;
}
.skill-foot{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin: 36px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--font-serif);
  font-size: 15px;
}
.skill-anchor{
  display: inline-block;
  font-style: italic;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  text-decoration: none;
  color: var(--ink);
  transition: color .2s ease, border-color .2s ease;
}
.skill-anchor:hover{
  color: var(--accent);
  border-color: var(--accent);
}
@media (max-width: 820px){
  .skill-command{
    align-items: stretch;
    flex-direction: column;
  }
  .skill-copy{ width: 100%; }
  .skill-list{ grid-template-columns: 1fr; }
  .skill-list li{ min-height: 150px; }
}

/* ────────────────────────────────────────────────────────────── */
/* ── Case page · /case-redis-scan.html ────────────────────────── */
/* ────────────────────────────────────────────────────────────── */

.case-page{
  background: var(--paper);
}
.case-main{
  position: relative;
  z-index: 1;
}
.case-main .scene-section{
  padding: clamp(56px, 9vw, 120px) var(--gutter);
}
.case-main .wrap{
  max-width: 1180px;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.case-hero{
  padding-top: clamp(110px, 14vw, 180px) !important;
  padding-bottom: clamp(72px, 10vw, 140px) !important;
  border-bottom: 1px solid var(--line);
}
.case-title{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(40px, 6.6vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  max-width: 18ch;
  text-wrap: balance;
}
.case-title em{
  font-style: italic;
  color: var(--ink);
  background-image: linear-gradient(to bottom, transparent 64%, rgba(217,119,87,0.22) 64%, rgba(217,119,87,0.22) 92%, transparent 92%);
  padding: 0 0.04em;
}
.case-title .period{
  color: var(--accent);
}
.case-lede{
  max-width: 62ch;
  margin: 0 0 44px;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Timeline strip ── horizontal scroll on mobile, even row on desktop ── */
.case-timeline{
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case-timeline li{
  position: relative;
  padding: 22px 18px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-timeline li:last-child{ border-right: 0; }
.case-timeline .t{
  font-family: var(--font-serif);
  font-feature-settings: "tnum" 1;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
}
.case-timeline .e{
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
}
.case-timeline li.is-hot{
  background: linear-gradient(to bottom, rgba(217,119,87,0.10), rgba(217,119,87,0.04));
}
.case-timeline li.is-hot .t{ color: var(--accent); }
.case-timeline li.is-hot .e em,
.case-timeline li.is-hot .e{ color: var(--ink); }
.case-timeline li.is-hot::before{
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%; height: 2px;
  background: var(--accent);
}
.case-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  font-style: italic;
}

/* ── Methodology framing ──────────────────────────────────────── */
.case-method{
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.case-method h2{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0 0 36px;
  max-width: 36ch;
  word-break: keep-all;
}
.case-method h2 em{ display: inline-block; }
.case-method h2 em{
  color: var(--ink);
  background-image: linear-gradient(to bottom, transparent 64%, rgba(217,119,87,0.22) 64%, rgba(217,119,87,0.22) 92%, transparent 92%);
  padding: 0 0.04em;
}
.case-method h2 .period{ color: var(--accent); }
.case-method-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: 28px;
}
.case-body{
  margin: 0 0 18px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 62ch;
}
.case-body strong{ color: var(--ink); font-weight: 600; }
.case-body em{ color: var(--ink); font-style: italic; }
.case-body code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(24,24,24,0.05);
  padding: 1px 5px;
  border-radius: 3px;
}
.case-body-large{ font-size: clamp(18px, 1.5vw, 22px); }
.case-hint{
  max-width: 60ch;
  margin: 0 0 22px;
  color: var(--ink);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
}
.case-anchor{
  display: inline-block;
  font-style: italic;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  text-decoration: none;
  color: var(--ink);
  transition: color .2s ease, border-color .2s ease;
}
.case-anchor:hover{
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Step panels ──────────────────────────────────────────────── */
.case-step{
  border-bottom: 1px solid var(--line);
}
.case-step-head{
  margin-bottom: clamp(28px, 4vw, 48px);
}
.case-counter{
  font-family: var(--font-serif);
  font-style: italic;
  font-variant: small-caps;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin: 0 0 10px;
}
.case-counter em{
  color: var(--accent);
  font-style: italic;
}
.case-step-head h2{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.8vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 38ch;
  word-break: keep-all;
}
.case-step-head h2 em{
  display: inline-block;
}
.case-step-head h2 em{
  font-style: italic;
  color: var(--ink);
}
.case-step-head h2 .period{ color: var(--accent); }

.case-step-body{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.case-step-body-narrow{
  grid-template-columns: 1fr;
  max-width: 62ch;
}

/* ── Architect step · key visual ──────────────────────────────── */
.case-step-key{
  background: linear-gradient(to bottom, rgba(217,119,87,0.04), transparent 65%);
  border-top: 1px solid rgba(217,119,87,0.5);
}
.case-step-key .case-counter em{ color: var(--accent); font-weight: 500; }
.case-arch-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.6vw, 56px);
  margin-top: 28px;
}
.case-arch-card{
  border-left: 2px solid var(--accent);
  padding: 6px 0 6px 22px;
}
.case-arch-card .meta{ margin-bottom: 14px; }
.case-arch-card ol{
  margin: 0;
  padding-left: 22px;
  color: var(--ink-soft);
  line-height: 1.75;
  font-size: 16px;
}
.case-arch-card ol li{ margin-bottom: 8px; }
.case-arch-card ol li::marker{
  font-style: italic;
  color: var(--accent);
}
.case-arch-card p{
  margin: 0 0 14px;
  color: var(--ink-soft);
  line-height: 1.75;
  font-size: 16px;
}
.case-arch-card p em{ color: var(--ink); font-style: italic; }
.case-arch-card p strong{ color: var(--ink); font-weight: 600; }

/* ── Prompt blockquote ────────────────────────────────────────── */
.case-prompt{
  margin: 0;
  padding: clamp(22px, 2.6vw, 32px);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  box-shadow: 0 12px 28px rgba(24,24,24,0.04);
}
.case-prompt .meta{ margin-bottom: 14px; }
.case-prompt blockquote{
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--ink);
}
.case-prompt blockquote p{ margin: 0 0 12px; }
.case-prompt blockquote p:last-child{ margin-bottom: 0; }
.case-prompt blockquote ol{
  margin: 0 0 12px;
  padding-left: 22px;
}
.case-prompt blockquote ol li{ margin-bottom: 4px; }
.case-prompt blockquote code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-style: normal;
  font-size: 0.9em;
  background: rgba(24,24,24,0.06);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ── Notes (BAD prompt observations) ─────────────────────────── */
.case-note{
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px dashed rgba(24,24,24,0.22);
  background: rgba(255,255,255,0.4);
}
.case-note .meta{ margin-bottom: 14px; }
.case-missing{
  margin: 0;
  padding-left: 22px;
  list-style: decimal;
  color: var(--ink-soft);
  line-height: 1.7;
  font-size: 15.5px;
}
.case-missing li{ margin-bottom: 12px; }
.case-missing li::marker{ color: var(--accent); font-style: italic; }
.case-missing strong{ color: var(--ink); font-weight: 600; }
.case-missing code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
  background: rgba(24,24,24,0.06);
  padding: 1px 4px;
  border-radius: 3px;
}
.case-note-tail{
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.65;
}
.case-note-tail em{ font-style: italic; }

/* ── Code block (Python) ──────────────────────────────────────── */
.case-code{
  margin: 0;
  background: #fbf6ec;
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(24,24,24,0.04);
}
.case-code figcaption{
  padding: 14px clamp(18px, 2vw, 24px);
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.case-code pre{
  margin: 0;
  padding: clamp(20px, 2.4vw, 28px);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink);
  white-space: pre;
  tab-size: 4;
}
.case-code .cc{ color: #6f3aab; }
.case-code .ch{ color: var(--accent); font-weight: 500; }
.case-code .cs{ color: #1f6a4a; }
.case-code .cm{ color: var(--ink-mute); font-style: italic; }

/* ── Callout box ──────────────────────────────────────────────── */
.case-callout{
  margin-top: 24px;
  padding: clamp(20px, 2.4vw, 28px);
  background: rgba(28,35,72,0.04);
  border: 1px solid rgba(28,35,72,0.18);
}
.case-callout .meta{ margin-bottom: 10px; }
.case-callout p{
  margin: 0;
  color: var(--ink);
  line-height: 1.7;
  font-size: 15.5px;
}
.case-callout p em{ font-style: italic; }

/* ── Fix chain ────────────────────────────────────────────────── */
.case-fixes{
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case-fixes h2{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0 0 44px;
  max-width: 36ch;
  word-break: keep-all;
}
.case-fixes h2 em{ display: inline-block; }
.case-fixes h2 em{ color: var(--ink); }
.case-fixes h2 .period{ color: var(--accent); }
.case-fix-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.case-fix-list li{
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(20px, 3vw, 40px);
  row-gap: 6px;
  padding: clamp(20px, 3vw, 32px) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.case-fix-list li > .case-fix-time{
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
}
.case-fix-list li > h3{
  grid-column: 2;
  grid-row: 1;
}
.case-fix-list li > p:not(.case-fix-time){
  grid-column: 2;
  grid-row: 2;
}
.case-fix-time{
  margin: 0;
  font-family: var(--font-serif);
  font-feature-settings: "tnum" 1;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.case-fix-list h3{
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.35;
  color: var(--ink);
}
.case-fix-list h3 em{ font-style: italic; }
.case-fix-list p{
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.7;
  font-size: 15.5px;
}
.case-fix-list p em{ color: var(--ink); font-style: italic; }
.case-fix-list p code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
  background: rgba(24,24,24,0.06);
  padding: 1px 5px;
  border-radius: 3px;
}
.case-fix-list li.is-final{
  background: linear-gradient(to right, rgba(217,119,87,0.08), transparent 70%);
}
.case-fix-list li.is-final .case-fix-time{ color: var(--accent); }
.case-fix-list li.is-final h3{ color: var(--ink); }
.case-fix-tail{
  margin: 28px 0 0;
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--ink);
  line-height: 1.7;
  max-width: 60ch;
}
.case-fix-tail em{ font-style: italic; }

/* ── Prompt rewrite (BAD vs GOOD) ─────────────────────────────── */
.case-rewrite h2{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0 0 36px;
  max-width: 36ch;
  word-break: keep-all;
}
.case-rewrite h2 em{ display: inline-block; }
.case-rewrite h2 em{ color: var(--ink); }
.case-rewrite h2 .period{ color: var(--accent); }
.case-prompt-diff{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 36px);
  margin-bottom: 28px;
}
.case-prompt-col{
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 12px 28px rgba(24,24,24,0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.case-prompt-col.is-bad{
  border-top: 3px solid rgba(177,53,53,0.55);
}
.case-prompt-col.is-good{
  border-top: 3px solid #1f6a4a;
}
.case-prompt-col h3{
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.06em;
}
.case-prompt-col.is-bad h3{ color: rgba(177,53,53,0.85); }
.case-prompt-col.is-good h3{ color: #1f6a4a; }
.case-prompt-text{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}
.case-prompt-text p{ margin: 0 0 10px; }
.case-prompt-text p:last-child{ margin-bottom: 0; }
.case-prompt-text strong{
  font-style: normal;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-right: 4px;
}
.case-prompt-text em{ font-style: italic; color: var(--ink); font-weight: 500; }
.case-prompt-text code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-style: normal;
  font-size: 0.9em;
  background: rgba(24,24,24,0.06);
  padding: 1px 5px;
  border-radius: 3px;
}
.case-prompt-tags{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.case-prompt-tags li{
  font-size: 12.5px;
  letter-spacing: 0.08em;
  font-style: italic;
  color: var(--ink-soft);
}
.case-prompt-col.is-bad .case-prompt-tags li{ color: rgba(177,53,53,0.8); }
.case-prompt-col.is-good .case-prompt-tags li{ color: #1f6a4a; }
.case-rewrite-tail{
  margin: 0;
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--ink);
  line-height: 1.7;
  max-width: 60ch;
}
.case-rewrite-tail em{ font-style: italic; }
.case-rewrite-cta{
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.7;
}
.case-rewrite-cta a{
  font-style: italic;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  text-decoration: none;
  color: var(--ink);
  transition: color .2s ease;
}
.case-rewrite-cta a:hover{ color: var(--accent); }
.case-rewrite-cta-note{
  display: inline;
  margin-left: 6px;
  color: var(--ink-mute);
  font-size: 14px;
  font-style: italic;
}
.case-rewrite-cta-note code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-style: normal;
  font-size: 0.92em;
  background: rgba(24,24,24,0.05);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ── Closer · lessons + CTA ───────────────────────────────────── */
.case-closer{
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}
.case-closer h2{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0 0 36px;
  max-width: 36ch;
  word-break: keep-all;
}
.case-closer h2 .period{ color: var(--accent); }
.case-lessons{
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  counter-reset: case-l;
}
.case-lessons li{
  position: relative;
  padding: 0 0 0 36px;
  counter-increment: case-l;
}
.case-lessons li::before{
  content: counter(case-l, decimal-leading-zero);
  position: absolute;
  left: 0; top: 2px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.case-lessons h3{
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.35;
  color: var(--ink);
}
.case-lessons p{
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
}
.case-lessons p em{ color: var(--ink); font-style: italic; }
.case-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 18px 22px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.case-cta .btn-primary{ flex: 0 0 auto; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 980px){
  .case-step-body{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .case-method-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .case-arch-grid{
    grid-template-columns: 1fr;
  }
  .case-prompt-diff{
    grid-template-columns: 1fr;
  }
  .case-lessons{
    grid-template-columns: 1fr;
  }
  .case-timeline{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .case-timeline li:nth-child(3){ border-right: 0; }
  .case-timeline li:nth-child(-n+3){ border-bottom: 1px solid var(--line); }
}
@media (max-width: 620px){
  .case-timeline{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .case-timeline li{ border-right: 1px solid var(--line) !important; }
  .case-timeline li:nth-child(2n){ border-right: 0 !important; }
  .case-fix-list li{
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ── Reveal failsafe ─────────────────────────────────────────────
   Scroll-reveal sections start at opacity:0 and are revealed by
   githire-scroll.js. That script adds `.js` to <html> only once it is
   actually executing (after its stage init), so these hidden states take
   effect only when the reveal code is present to undo them. If JS is
   disabled, ES modules are unsupported, the script 404s, or its `three`
   import fails — and for any renderer that doesn't execute JS (crawlers,
   prerenderers) — `.js` is never added and every revealed section stays
   fully visible. Reveal is an enhancement on an already-visible default,
   never a gate. */
html:not(.js) .wf-panel .wf-counter,
html:not(.js) .wf-panel h3,
html:not(.js) .wf-panel .wf-body,
html:not(.js) .wf-panel .wf-en,
html:not(.js) .wf-panel .wf-fig,
html:not(.js) .wf-panel .wf-fig svg [fill]:not([fill="none"]),
html:not(.js) .wf-overview .wf-overview-title,
html:not(.js) .wf-overview .wf-flow li,
html:not(.js) .wf-overview .wf-overview-foot,
html:not(.js) .ritual-card .ritual-inner,
html:not(.js) .scene-closer.is-dark .meta,
html:not(.js) .scene-closer.is-dark .closer-line,
html:not(.js) .scene-closer.is-dark .closer-en,
html:not(.js) .scene-closer.is-dark .closer-cta{
  opacity: 1 !important;
  transform: none !important;
}