/* ============================================================
   AFTERBURNER — seminars & software field manual
   emerald / magenta / gold on deep green-black
   ============================================================ */

:root{
  --bg:#f5f7f2;
  --bg-2:#eceff0;
  --bg-3:#e2e9e0;
  --card:#ffffff;
  --card-2:#f6faf4;
  --line:rgba(18,42,32,.18);
  --line-soft:rgba(18,42,32,.10);
  --ink:#132619;
  --ink-soft:#35493c;
  --muted:#5d7266;
  --emerald:#0d8a58;
  --emerald-deep:#0a6b45;
  --emerald-dim:rgba(13,138,88,.12);
  --magenta:#bb2977;
  --magenta-deep:#96205f;
  --magenta-dim:rgba(187,41,119,.11);
  --gold:#c28a1d;
  --gold-deep:#9c6f14;
  --gold-dim:rgba(194,138,29,.15);
  --font-display:"Unbounded",sans-serif;
  --font-body:"Space Grotesk",sans-serif;
  --font-mono:"JetBrains Mono",monospace;
  --size-body:23px;
  --measure:740px;
  --wrap:1240px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--size-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--emerald);text-decoration:none}
a:hover{color:var(--gold)}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;text-wrap:balance;margin:0 0 .6em}
h1{font-size:clamp(2rem,5.2vw,3.6rem);font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(1.55rem,3.4vw,2.35rem);font-weight:700}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem);font-weight:700}
h4{font-size:1.1rem;font-weight:600}
p{margin:0 0 1.25em}
ul,ol{margin:0 0 1.4em;padding-left:1.3em}
li{margin-bottom:.55em}
figure{margin:0}
::selection{background:var(--magenta);color:#fff}

/* ---------- shared layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.kicker{
  font-family:var(--font-mono);font-size:.82rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:.9em;margin-bottom:1.1em;
}
.kicker::before{content:"";width:2.2em;height:2px;background:var(--gold);flex:none}
.kicker.k-magenta{color:var(--magenta)}
.kicker.k-magenta::before{background:var(--magenta)}
.kicker.k-emerald{color:var(--emerald)}
.kicker.k-emerald::before{background:var(--emerald)}
.section-intro{max-width:640px;color:var(--muted);font-size:1.02rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-mono);font-size:.94rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.95em 1.7em;border-radius:4px;border:1px solid transparent;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  cursor:pointer;
}
.btn::after{content:"→";font-family:var(--font-body)}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#1d1503}
.btn-gold:hover{background:#d69c2b;color:#1d1503;box-shadow:0 8px 28px rgba(194,138,29,.3)}
.btn-emerald{background:var(--emerald);color:#f4fbf7}
.btn-emerald:hover{background:#0fa568;color:#f4fbf7;box-shadow:0 8px 28px rgba(13,138,88,.28)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--emerald);color:var(--emerald)}
.btn-magenta{background:var(--magenta);color:#fdf3f8}
.btn-magenta:hover{background:#cf3f8b;color:#fdf3f8;box-shadow:0 8px 28px rgba(187,41,119,.3)}

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(245,247,242,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.head-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:78px;
}
.brand{display:flex;flex-direction:column;line-height:1.05;gap:2px}
.brand .b-main{
  font-family:var(--font-display);font-weight:800;font-size:1.18rem;
  letter-spacing:.02em;color:var(--ink);
}
.brand .b-main em{font-style:normal;color:var(--gold)}
.brand .b-sub{
  font-family:var(--font-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--emerald);
}
.brand:hover .b-main{color:var(--ink)}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px)}
.nav a{
  font-family:var(--font-mono);font-size:.88rem;font-weight:500;
  letter-spacing:.08em;color:var(--ink-soft);
  padding:6px 2px;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--emerald);border-bottom-color:var(--emerald)}
.nav a.is-here{color:var(--gold);border-bottom-color:var(--gold)}
.nav .nav-cta{
  border:1px solid var(--emerald);border-radius:4px;
  padding:8px 16px;color:var(--emerald);
}
.nav .nav-cta:hover{background:var(--emerald);color:#f4fbf7;border-bottom-color:transparent}
.nav-toggle-box{display:none}
.nav-burger{display:none}

@media (max-width:940px){
  .nav-burger{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    width:52px;height:52px;padding:12px;cursor:pointer;
    border:1px solid var(--line);border-radius:6px;
  }
  .nav-burger span{display:block;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
  .nav{
    position:fixed;inset:78px 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg-2);border-bottom:1px solid var(--line);
    padding:10px 24px 26px;
    transform:translateY(-130%);transition:transform .25s ease;
  }
  .nav a{font-size:1.05rem;padding:15px 4px;border-bottom:1px solid var(--line-soft)}
  .nav a.is-here{border-bottom-color:var(--line-soft)}
  .nav .nav-cta{margin-top:16px;text-align:center;justify-content:center;display:flex;border-bottom:1px solid var(--emerald)}
  #nav-toggle:checked ~ .nav{transform:translateY(0)}
  #nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  #nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  #nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

/* ============================================================
   HOME — hero
   ============================================================ */
.hero{
  position:relative;
  padding:clamp(70px,10vw,130px) 0 clamp(60px,8vw,110px);
  background:
    radial-gradient(58% 80% at 78% 20%,rgba(187,41,119,.10),transparent 60%),
    radial-gradient(50% 70% at 12% 85%,rgba(13,138,88,.10),transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(70% 70% at 50% 30%,#000 30%,transparent 100%);
}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{margin-bottom:.45em}
.hero h1 .h-line{display:block}
.hero h1 .h-em{color:var(--emerald)}
.hero h1 .h-gold{color:var(--gold)}
.hero .hero-copy{color:var(--ink-soft);font-size:1.12rem;max-width:34ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:2em}
.hero-visual{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 30px 80px rgba(19,38,25,.22)}
.hero-visual img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/4.6}
.hero-visual .hv-tag{
  position:absolute;left:14px;bottom:14px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:4px;
  padding:8px 12px;color:var(--gold-deep);
}
.hero-readout{
  display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:2.4em;
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.1em;color:var(--muted);
}
.hero-readout b{color:var(--emerald);font-weight:600}

/* ticker */
.ticker{
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:var(--bg-2);overflow:hidden;white-space:nowrap;
  font-family:var(--font-mono);font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;
  padding:13px 0;color:var(--muted);
}
.ticker-track{display:inline-block;white-space:nowrap;animation:ticker-scroll 56s linear infinite}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker span{display:inline-block;padding-right:3.4em}
.ticker .t-dot{color:var(--magenta)}
.ticker .t-hl{color:var(--gold)}

/* ============================================================
   HOME — flight manual (learning path)
   ============================================================ */
.section{padding:clamp(64px,9vw,120px) 0}
.section-tint{background:var(--bg-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-bottom:clamp(32px,5vw,56px)}
.section-head h2{margin:0;max-width:18ch}

.manual{display:grid;gap:14px;counter-reset:module}
.module{
  display:grid;grid-template-columns:110px minmax(0,1.15fr) minmax(0,2fr) auto;
  gap:clamp(16px,3vw,40px);align-items:center;
  background:var(--card);border:1px solid var(--line-soft);border-radius:10px;
  padding:clamp(20px,3vw,30px) clamp(20px,3vw,36px);
  position:relative;transition:border-color .2s,background .2s,transform .2s;
}
.module:hover{border-color:var(--emerald);background:var(--card-2);transform:translateX(6px)}
.module::before{
  counter-increment:module;
  content:"0" counter(module);
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2rem,4vw,3rem);color:transparent;
  -webkit-text-stroke:1.5px var(--gold);
  line-height:1;
}
.module:nth-child(even)::before{-webkit-text-stroke-color:var(--magenta)}
.module h3{margin:0;font-size:clamp(1.05rem,1.8vw,1.3rem)}
.module h3 a{color:var(--ink)}
.module h3 a::after{content:"";position:absolute;inset:0}
.module:hover h3 a{color:var(--emerald)}
.module .m-desc{margin:0;color:var(--muted);font-size:.98rem;max-width:52ch}
.module .m-go{
  font-family:var(--font-mono);font-size:1.4rem;color:var(--emerald);
  border:1px solid var(--line);border-radius:50%;
  width:54px;height:54px;display:grid;place-items:center;flex:none;
}
.module:hover .m-go{background:var(--emerald);color:#f4fbf7;border-color:var(--emerald)}
.module .m-tag{
  position:absolute;top:-9px;left:130px;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  background:var(--bg-3);border:1px solid var(--line);border-radius:3px;
  padding:2px 9px;color:var(--gold);
}
@media (max-width:900px){
  .module{grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;row-gap:8px}
  .module::before{font-size:1.7rem;grid-row:1}
  .module h3{grid-column:2}
  .module .m-desc{grid-column:2;max-width:none}
  .module .m-go{display:none}
  .module .m-tag{left:84px}
  .module:hover{transform:none}
}

/* ============================================================
   HOME — gauges strip
   ============================================================ */
.gauges{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
}
.gauge{
  background:var(--bg-3);border:1px solid var(--line-soft);border-radius:10px;
  padding:26px 22px 22px;text-align:center;position:relative;overflow:hidden;
}
.gauge::before{
  content:"";position:absolute;top:0;left:20%;right:20%;height:3px;border-radius:0 0 4px 4px;
  background:var(--emerald);
}
.gauge:nth-child(2)::before{background:var(--gold)}
.gauge:nth-child(3)::before{background:var(--magenta)}
.gauge:nth-child(4)::before{background:var(--gold)}
.gauge:nth-child(5)::before{background:var(--emerald)}
.gauge .g-dial{
  font-family:var(--font-mono);font-size:1.5rem;font-weight:700;color:var(--ink);
  display:block;margin-bottom:6px;
}
.gauge .g-dial i{font-style:normal;color:var(--emerald);font-size:1rem}
.gauge .g-label{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
@media (max-width:900px){.gauges{grid-template-columns:repeat(2,1fr)}.gauge:last-child{grid-column:1/-1}}

/* ============================================================
   PARTNER CARDS  (10 slots, two sections)
   ============================================================ */
.partner-card{
  background:var(--card);border:1px solid var(--line-soft);border-radius:10px;
  padding:26px 26px 24px;display:flex;flex-direction:column;gap:14px;
  transition:border-color .2s,transform .2s;
}
.partner-card:hover{border-color:var(--gold);transform:translateY(-4px)}
.partner-logo{
  width:100%;height:64px;border-radius:6px;
  background:#17110d;border:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;
  padding:10px 18px;
}
.partner-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:0 auto}
.partner-name{margin:0;font-family:var(--font-display);font-size:1.02rem;font-weight:700}
.partner-name a{color:var(--ink)}
.partner-name a:hover{color:var(--gold)}
.partner-desc{position:relative;margin:0;color:var(--muted);font-size:.95rem;line-height:1.6}
.partner-desc p{
  margin:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.partner-desc.no-clamp p{display:block;-webkit-line-clamp:none;overflow:visible}
.p-more-toggle{position:absolute;opacity:0;pointer-events:none}
.p-more-label{
  display:inline-block;margin-top:6px;cursor:pointer;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--emerald);border-bottom:1px dashed var(--emerald);
}
.p-more-label:hover{color:var(--gold);border-bottom-color:var(--gold)}
.p-more-label .p-less{display:none}
.p-more-toggle:checked ~ p{-webkit-line-clamp:unset;overflow:visible;display:block}
.p-more-toggle:checked ~ .p-more-label .p-more{display:none}
.p-more-toggle:checked ~ .p-more-label .p-less{display:inline}
.partner-cta{
  margin-top:auto;align-self:flex-start;
  font-family:var(--font-mono);font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold-deep);border-radius:4px;padding:9px 16px;
}
.partner-cta:hover{background:var(--gold);color:#1d1503}

/* sponsor section A — "bench partners": horizontal rail */
.bench-partners{position:relative}
.bench-rail{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;padding:6px 6px 8px;
}
.bench-rail::-webkit-scrollbar{height:8px}
.bench-rail::-webkit-scrollbar-thumb{background:var(--emerald-deep);border-radius:4px}
.bench-rail::-webkit-scrollbar-track{background:var(--bg-3);border-radius:4px}
.bench-rail .partner-card{scroll-snap-align:start;border-top:3px solid var(--emerald-deep)}
.rail-hint{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* sponsor section B — "partners & friends": compact grid near footer */
.friends-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.friends-grid .partner-card{border-top:3px solid var(--magenta-deep)}
@media (max-width:1150px){.friends-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.friends-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.friends-grid{grid-template-columns:1fr 1fr}.friends-grid .partner-card{padding:16px}.friends-grid .partner-logo{height:52px}}

/* ============================================================
   HOME — toolkit rack
   ============================================================ */
.rack{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rack-item{
  position:relative;border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;
  background:var(--card);display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s;
}
.rack-item:hover{border-color:var(--magenta);transform:translateY(-5px)}
.rack-item img{aspect-ratio:16/10;object-fit:cover;width:100%}
.rack-body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.rack-body h3{margin:0}
.rack-body h3 a{color:var(--ink)}
.rack-body h3 a::after{content:"";position:absolute;inset:0}
.rack-item:hover h3 a{color:var(--magenta)}
.rack-body p{margin:0;color:var(--muted);font-size:.97rem}
.rack-body .rack-go{
  margin-top:auto;padding-top:10px;
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
@media (max-width:900px){.rack{grid-template-columns:1fr}}

/* ============================================================
   HOME — about / contact split
   ============================================================ */
.homabout{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);
  align-items:center;
}
.homabout .ha-visual{border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.homabout .ha-visual img{width:100%;object-fit:cover;aspect-ratio:5/4}
.homabout blockquote{
  margin:1.4em 0;padding-left:1.1em;border-left:3px solid var(--magenta);
  color:var(--ink-soft);font-size:1.05rem;
}
@media (max-width:900px){.homabout{grid-template-columns:1fr}}

/* ============================================================
   FOOTER — statement
   ============================================================ */
.site-foot{
  background:
    radial-gradient(70% 120% at 50% 130%,rgba(230,185,80,.12),transparent 60%),
    #10241a;
  border-top:1px solid rgba(230,242,236,.14);
  padding:clamp(56px,8vw,96px) 0 34px;
  color:#e9f2ec;
}
.site-foot .btn-ghost{border-color:rgba(233,242,236,.35);color:#e9f2ec}
.site-foot .btn-ghost:hover{border-color:#37d492;color:#37d492}
.foot-statement{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,6vw,4.2rem);line-height:1.08;letter-spacing:-.01em;
  margin:0 0 .35em;max-width:16ch;
}
.foot-statement em{font-style:normal;color:#37d492}
.foot-statement .fs-gold{color:#e8bd58}
.foot-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:1.4em 0 3em}
.foot-grid{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:22px 40px;
  border-top:1px solid rgba(230,242,236,.14);padding-top:26px;
}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 22px;max-width:640px}
.foot-links a{
  font-family:var(--font-mono);font-size:.85rem;letter-spacing:.06em;color:#9db5a8;
}
.foot-links a:hover{color:#37d492}
.foot-meta{font-family:var(--font-mono);font-size:.82rem;color:#9db5a8;letter-spacing:.05em}
.foot-meta b{color:#e8bd58;font-weight:600}
@media (max-width:640px){
  .site-foot{padding-top:44px}
  .foot-cta-row{margin-bottom:1.8em}
  .foot-links{gap:4px 18px}
}

/* ============================================================
   ARTICLE / PAGE — shared editorial system
   ============================================================ */
.article-hero{
  position:relative;
  padding:clamp(56px,8vw,96px) 0 clamp(36px,5vw,56px);
  background:
    radial-gradient(60% 90% at 85% 0%,var(--magenta-dim),transparent 55%),
    radial-gradient(45% 70% at 5% 100%,var(--emerald-dim),transparent 60%),
    var(--bg-2);
  border-bottom:1px solid var(--line-soft);
}
.article-hero.tint-emerald{
  background:
    radial-gradient(60% 90% at 85% 0%,var(--emerald-dim),transparent 55%),
    radial-gradient(45% 70% at 5% 100%,var(--gold-dim),transparent 60%),
    var(--bg-2);
}
.article-hero.tint-gold{
  background:
    radial-gradient(60% 90% at 85% 0%,var(--gold-dim),transparent 55%),
    radial-gradient(45% 70% at 5% 100%,var(--magenta-dim),transparent 60%),
    var(--bg-2);
}
.article-hero h1{max-width:20ch}
.article-hero .ah-meta{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:1.4em;
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.article-hero .ah-meta b{color:var(--emerald);font-weight:600}
.article-hero .ah-standfirst{max-width:56ch;color:var(--ink-soft);font-size:1.1rem;margin-top:.8em}

.article-figure{margin:clamp(28px,5vw,52px) 0}
.article-figure img{width:100%;border-radius:10px;border:1px solid var(--line-soft);object-fit:cover}
.article-figure figcaption{
  margin-top:12px;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.08em;
  color:var(--muted);display:flex;gap:.8em;
}
.article-figure figcaption::before{content:"▸";color:var(--gold)}
.fig-hero img{aspect-ratio:21/9}
.fig-wide{margin-left:clamp(0px,-6vw,-80px);margin-right:clamp(0px,-6vw,-80px)}
.fig-wide img{aspect-ratio:21/8}

.prose{max-width:var(--measure);margin:0 auto}
.article-body{padding:clamp(40px,6vw,72px) 0 clamp(56px,8vw,96px)}
.article-body h2{margin-top:1.9em;color:var(--ink)}
.article-body h2::before{
  content:"//";font-family:var(--font-mono);color:var(--magenta);
  font-size:.7em;margin-right:.55em;font-weight:700;
}
.article-body h3{margin-top:1.6em;color:var(--gold)}
.article-body a{border-bottom:1px solid rgba(13,138,88,.35)}
.article-body a:hover{border-bottom-color:var(--gold)}

.lead{font-size:1.22rem;color:var(--ink);line-height:1.6}
.dropcap::first-letter{
  font-family:var(--font-display);font-weight:800;
  font-size:3.3em;line-height:.85;float:left;
  padding:.08em .16em .02em 0;color:var(--emerald);
}
.dropcap-magenta::first-letter{color:var(--magenta)}
.dropcap-gold::first-letter{color:var(--gold)}

.pullquote{
  margin:clamp(32px,5vw,52px) 0;padding:0;border:0;position:relative;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.35;color:var(--ink);
  padding-left:clamp(24px,4vw,44px);
}
.pullquote::before{
  content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:4px;
  background:linear-gradient(var(--emerald),var(--magenta));border-radius:2px;
}
.pullquote em{font-style:normal;color:var(--emerald)}
.pullquote cite{
  display:block;margin-top:.7em;font-family:var(--font-mono);font-style:normal;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}

/* callouts */
.callout{
  margin:clamp(28px,4vw,44px) 0;padding:24px 28px;border-radius:10px;
  background:var(--card);border:1px solid var(--line-soft);position:relative;
}
.callout .c-tag{
  display:inline-block;margin-bottom:10px;
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  padding:4px 12px;border-radius:3px;
}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.callout-heat{border-color:rgba(187,41,119,.38)}
.callout-heat .c-tag{background:var(--magenta-dim);color:var(--magenta)}
.callout-tip{border-color:rgba(13,138,88,.38)}
.callout-tip .c-tag{background:var(--emerald-dim);color:var(--emerald)}
.callout-fact{border-color:rgba(194,138,29,.45)}
.callout-fact .c-tag{background:var(--gold-dim);color:var(--gold)}

/* key takeaways / at-a-glance box */
.takeaways{
  margin:clamp(32px,5vw,52px) 0;padding:30px 32px;border-radius:10px;
  background:linear-gradient(135deg,var(--bg-3),var(--card));
  border:1px solid var(--emerald-deep);
}
.takeaways h4{
  font-family:var(--font-mono);font-weight:600;font-size:.8rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--emerald);
  display:flex;align-items:center;gap:.8em;margin-bottom:1.1em;
}
.takeaways h4::after{content:"";height:1px;background:var(--emerald-deep);flex:1}
.takeaways ul{margin:0;padding:0;list-style:none;display:grid;gap:.7em}
.takeaways li{margin:0;padding-left:1.6em;position:relative;font-size:1rem;color:var(--ink-soft)}
.takeaways li::before{content:"▹";position:absolute;left:0;color:var(--gold)}

/* numbered step ladder */
.steps{list-style:none;counter-reset:step;margin:clamp(28px,4vw,44px) 0;padding:0;display:grid;gap:14px}
.steps li{
  counter-increment:step;margin:0;position:relative;
  background:var(--card);border:1px solid var(--line-soft);border-radius:10px;
  padding:22px 26px 22px 92px;min-height:76px;display:flex;align-items:center;
}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:24px;top:50%;transform:translateY(-50%);
  font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--gold);
}
.steps li::after{
  content:"";position:absolute;left:70px;top:18px;bottom:18px;width:1px;background:var(--line);
}
.steps.steps-magenta li::before{color:var(--magenta)}
.steps.steps-emerald li::before{color:var(--emerald)}
.steps p{margin:0}
.steps b{color:var(--ink)}
@media (max-width:560px){
  .steps li{padding:64px 20px 20px;display:block}
  .steps li::before{top:16px;transform:none}
  .steps li::after{left:20px;right:20px;top:52px;bottom:auto;width:auto;height:1px}
}

/* spec / readout panel */
.spec-panel{
  margin:clamp(28px,4vw,44px) 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  font-family:var(--font-mono);
  background:#0c1210;
}
.spec-panel .sp-title{
  padding:13px 22px;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:#e6b950;border-bottom:1px solid rgba(230,242,236,.12);
  display:flex;align-items:center;gap:.9em;
}
.spec-panel .sp-title::before{content:"●";color:#2bd68f;font-size:.7em}
.spec-row{
  display:grid;grid-template-columns:minmax(150px,220px) 1fr;
  border-bottom:1px solid rgba(230,242,236,.12);
}
.spec-row:last-child{border-bottom:0}
.spec-row dt{padding:15px 22px;font-size:.86rem;color:#2bd68f;letter-spacing:.06em}
.spec-row dd{margin:0;padding:15px 22px;font-size:.9rem;color:#c8d6cd;border-left:1px solid rgba(230,242,236,.12)}
.spec-panel dl{margin:0}
@media (max-width:560px){
  .spec-row{grid-template-columns:1fr}
  .spec-row dd{border-left:0;padding-top:0}
  .spec-row dt{padding-bottom:4px}
}

/* inline half figures */
.duo-fig{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:clamp(28px,4vw,44px) 0}
.duo-fig figure{margin:0}
.duo-fig img{border-radius:10px;border:1px solid var(--line-soft);aspect-ratio:4/3;object-fit:cover;width:100%}
.duo-fig figcaption{margin-top:10px;font-family:var(--font-mono);font-size:.76rem;color:var(--muted);letter-spacing:.06em}
@media (max-width:640px){.duo-fig{grid-template-columns:1fr}}

/* tool entries (alternatives / benchmarks / communities) */
.tool-entry{
  display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(20px,4vw,44px);
  padding:clamp(28px,4vw,44px) 0;border-top:1px solid var(--line-soft);
  align-items:start;
}
.tool-entry:last-of-type{border-bottom:1px solid var(--line-soft)}
.tool-entry img{border-radius:10px;border:1px solid var(--line-soft);aspect-ratio:4/3;object-fit:cover;width:100%}
.tool-entry h3{margin-top:0}
.tool-entry .t-meta{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1em;padding:0;list-style:none;
}
.tool-entry .t-meta li{
  margin:0;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:3px;padding:4px 10px;color:var(--muted);
}
.tool-entry .t-meta li.m-hl{color:var(--emerald);border-color:var(--emerald-deep)}
.tool-entry .t-link{
  font-family:var(--font-mono);font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
}
@media (max-width:760px){.tool-entry{grid-template-columns:1fr}.tool-entry img{max-width:340px}}

/* prev / next lesson nav */
.lesson-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin-top:clamp(48px,7vw,80px);
}
.lesson-nav a{
  border:1px solid var(--line-soft);border-radius:10px;padding:22px 26px;
  display:flex;flex-direction:column;gap:6px;background:var(--card);
  transition:border-color .2s,transform .2s;
}
.lesson-nav a:hover{border-color:var(--emerald);transform:translateY(-3px)}
.lesson-nav .ln-dir{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.lesson-nav .ln-title{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink);line-height:1.3}
.lesson-nav a:hover .ln-title{color:var(--emerald)}
.lesson-nav .ln-next{text-align:right;align-items:flex-end}
.lesson-nav .ln-span{grid-column:1/-1}
@media (max-width:640px){.lesson-nav{grid-template-columns:1fr}.lesson-nav .ln-next{text-align:left;align-items:flex-start}}

/* related strip on articles */
.related{
  margin-top:clamp(40px,6vw,64px);padding-top:30px;border-top:1px solid var(--line-soft);
}
.related .r-title{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;
}
.related-row{display:flex;flex-wrap:wrap;gap:10px}
.related-row a{
  font-family:var(--font-mono);font-size:.85rem;letter-spacing:.04em;
  border:1px solid var(--line);border-radius:100px;padding:9px 18px;color:var(--ink-soft);
}
.related-row a:hover{border-color:var(--magenta);color:var(--magenta)}

/* ============================================================
   BLOG INDEX
   ============================================================ */
.index-list{display:grid;gap:0;counter-reset:entry}
.index-entry{
  display:grid;grid-template-columns:minmax(0,72px) minmax(0,1fr) minmax(0,300px);
  gap:clamp(18px,3.5vw,44px);align-items:center;
  padding:clamp(28px,4vw,42px) 0;border-top:1px solid var(--line-soft);position:relative;
}
.index-entry:last-child{border-bottom:1px solid var(--line-soft)}
.index-entry::before{
  counter-increment:entry;content:"0" counter(entry);
  font-family:var(--font-mono);font-size:1rem;color:var(--muted);
  align-self:start;padding-top:6px;
}
.index-entry h2{font-size:clamp(1.25rem,2.6vw,1.8rem);margin:0 0 .4em}
.index-entry h2 a{color:var(--ink)}
.index-entry h2 a::after{content:"";position:absolute;inset:0}
.index-entry:hover h2 a{color:var(--emerald)}
.index-entry .ie-excerpt{margin:0;color:var(--muted);font-size:1rem;max-width:58ch}
.index-entry .ie-track{
  margin-top:12px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.index-entry img{border-radius:10px;border:1px solid var(--line-soft);aspect-ratio:16/10;object-fit:cover;width:100%}
@media (max-width:860px){
  .index-entry{grid-template-columns:minmax(0,1fr)}
  .index-entry::before{display:none}
  .index-entry img{order:-1;max-width:100%}
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,6vw,80px);align-items:start}
.contact-channels{list-style:none;margin:2em 0 0;padding:0;display:grid;gap:12px}
.contact-channels li{
  margin:0;display:flex;align-items:center;gap:16px;
  border:1px solid var(--line-soft);border-radius:10px;padding:16px 20px;background:var(--card);
}
.contact-channels .ch-ico{
  width:44px;height:44px;border-radius:8px;flex:none;
  display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;
  background:var(--emerald-dim);color:var(--emerald);font-size:.95rem;
}
.contact-channels li:nth-child(2) .ch-ico{background:var(--magenta-dim);color:var(--magenta)}
.contact-channels li:nth-child(3) .ch-ico{background:var(--gold-dim);color:var(--gold)}
.contact-channels li:nth-child(4) .ch-ico{background:var(--magenta-dim);color:var(--magenta)}
.contact-channels b{display:block;font-size:.98rem}
.contact-channels span{font-family:var(--font-mono);font-size:.8rem;color:var(--muted);letter-spacing:.05em}
.contact-form{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:clamp(26px,4vw,40px);display:grid;gap:18px;
}
.contact-form label{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--emerald);
  display:grid;gap:8px;
}
.contact-form label .req{color:var(--magenta)}
.contact-form input,.contact-form textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:6px;
  padding:14px 16px;color:var(--ink);font-family:var(--font-body);font-size:1rem;
}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--emerald);outline-offset:0;border-color:transparent}
.contact-form textarea{min-height:170px;resize:vertical}
.contact-form .form-note{font-family:var(--font-mono);font-size:.75rem;color:var(--muted);margin:0;letter-spacing:.05em}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* ============================================================
   ABOUT — manifesto
   ============================================================ */
.manifesto-hero{
  padding:clamp(64px,9vw,120px) 0 clamp(40px,6vw,64px);
  background:
    radial-gradient(50% 80% at 90% 10%,var(--gold-dim),transparent 55%),
    radial-gradient(40% 70% at 10% 90%,var(--magenta-dim),transparent 60%),
    var(--bg-2);
  border-bottom:1px solid var(--line-soft);
}
.manifesto-hero h1{max-width:16ch}
.creed{
  margin:clamp(32px,5vw,56px) 0;display:grid;gap:14px;
}
.creed-line{
  display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:baseline;
  border-top:1px solid var(--line-soft);padding-top:18px;
}
.creed-line .cl-n{font-family:var(--font-mono);color:var(--magenta);font-size:.9rem}
.creed-line p{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.4}
@media (max-width:560px){.creed-line{grid-template-columns:40px 1fr}}

/* stat chips (about / community) */
.chip-row{display:flex;flex-wrap:wrap;gap:12px;margin:1.8em 0}
.chip{
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.1em;
  border:1px solid var(--line);border-radius:100px;padding:8px 18px;color:var(--ink-soft);
}
.chip b{color:var(--gold);font-weight:600}

/* map embed */
.map-embed{
  margin:clamp(28px,4vw,44px) 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.map-embed iframe{display:block;width:100%;height:340px;border:0;filter:grayscale(.2) contrast(1.05)}

/* video embed */
.video-embed{
  margin:clamp(28px,4vw,44px) 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  aspect-ratio:16/9;background:#000;
}
.video-embed iframe{width:100%;height:100%;border:0;display:block}

/* misc */
.divider-glyph{
  display:flex;justify-content:center;gap:1.2em;margin:clamp(36px,5vw,56px) 0;
  color:var(--gold);font-family:var(--font-mono);letter-spacing:.5em;
}
.small-note{font-size:.92rem;color:var(--muted)}
.text-center{text-align:center}

@media (max-width:640px){
  :root{--size-body:21.5px}
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{max-width:480px}
  .hero-visual img{aspect-ratio:16/10}
}

.rail-hint{display:none!important}
.bench-rail::-webkit-scrollbar{display:none}
/* sp-text-contrast: sponsor copy measured against its OWN ground as a WCAG contrast RATIO, not as a
   luminance subtraction. The subtraction passed capitanalatriste's blurbs at a 75-point gap
   while they sat at 2.8:1 and could not be read. Bar is 4.5:1 for body copy, 3:1 for large or
   bold; opacity is folded in, because it compounds down the tree and computed colour ignores
   it. The lift keeps Design's hue and saturation and moves lightness only, by the smallest
   step that clears the bar, so a warm blurb on near-black stays warm. Colour only — size,
   weight, family and spacing are exactly as delivered. */
.p-less.p-less{color:rgb(13,135,86)!important;opacity:1!important}
.p-more.p-more{color:rgb(13,135,86)!important;opacity:1!important}
.partner-cta.partner-cta{color:rgb(155,110,23)!important;opacity:1!important}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.bench-rail .partner-card .partner-logo.partner-logo{display:block!important;width:100%!important}
.bench-rail .partner-card.partner-card img{height:42px!important;display:block!important;width:100%!important}
.friends-grid .partner-card.partner-card img{height:38px!important}

/* op-blurb-rows: money blurbs ran to 8 rows at 390, 1019px of tier across
   5 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .friends-grid p{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:72px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead: .friends-grid (5 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .friends-grid:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-money-cutoff: at 320 article.partner-card — past its container by 3px. Structural only — the box is allowed to shrink to the
   room it has, the mark is held to the box it is given, and a track pinned in px is allowed to
   flex. No spacing value of mine. Trialled before writing: cut-offs to zero, no new overflow,
   marks no smaller than they were. Phone widths only. */
@media (max-width:360px){
  article.partner-card{max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
  div.friends-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .friends-grid 5 rows at 1440). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .friends-grid p{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */
/* op-heading-levels */
h3.rt-h4{font-family: var(--font-display); line-height: 1.15; text-wrap: balance; margin: 0px 0px 0.6em;}
h2:where(.rt-h3){font-family: var(--font-display); line-height: 1.15; text-wrap: balance; margin: 0px 0px 0.6em;}
h3:where(.rt-h4){font-family: var(--font-display); line-height: 1.15; text-wrap: balance; margin: 0px 0px 0.6em;}
h2:where(.rt-h3){font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 700;}
h3.rt-h4{font-size: 1.1rem; font-weight: 600;}
h3:where(.rt-h4){font-size: 1.1rem; font-weight: 600;}
.article-body h2:where(.rt-h3){margin-top: 1.6em; color: var(--gold);}
.takeaways h3.rt-h4{font-family: var(--font-mono); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--emerald); display: flex; align-items: center; gap: 0.8em; margin-bottom: 1.1em;}
.takeaways h3:where(.rt-h4){font-family: var(--font-mono); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--emerald); display: flex; align-items: center; gap: 0.8em; margin-bottom: 1.1em;}
.takeaways h3.rt-h4::after{content: ""; height: 1px; background: var(--emerald-deep); flex: 1 1 0%;}
.takeaways h3:where(.rt-h4)::after{content: ""; height: 1px; background: var(--emerald-deep); flex: 1 1 0%;}
.tool-entry h2:where(.rt-h3){margin-top: 0px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.duo-fig > figure > img,
  div.hero-grid.wrap > figure.hero-visual > img,
  div.homabout.wrap > figure.ha-visual > img,
  div.index-list > article.index-entry > img,
  div.prose > figure.article-figure > img,
  div.prose > figure.article-figure.fig-hero > img,
  div.rack > article.rack-item > img,
  div.video-embed > a.video-facade > img,
  div.wrap > div.tool-entry > img,
  div.wrap > figure.article-figure.fig-hero > img){height:auto}
/* op-img-dims:end */