/* ============================================================
   Direction C · Kinetic Showcase — Varun Rajurkar
   Display: Bricolage Grotesque · Body: Inter · Mono: IBM Plex Mono
   Builds on tokens.css (cypress system). Motion via shared app.js
   plus direction-specific signatures wired in c.html.
   ============================================================ */

:root{
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --hero-fs:clamp(2.7rem,13.5vw,9rem);
  --display-2:clamp(2rem,1.4rem + 3.4vw,4.2rem);

  --label-ink:#57503B;              /* AA-safe label on cotton */
  --line-dark:rgba(193,195,172,.18);
  --line-dark-strong:rgba(193,195,172,.34);

  --shadow-card:0 22px 48px -30px rgba(4,18,11,.42);
  --shadow-float:0 30px 90px -44px rgba(0,0,0,.72);
  --nav-h:66px;
}

html{scroll-padding-top:calc(var(--nav-h) + 12px);}
body{font-family:var(--font-body);background:var(--cotton);color:var(--ink);}

/* keep the loader-free first paint calm; hero animates itself */
img{height:auto;}

/* ---------- shared layout primitives ---------- */
.section{position:relative;padding-block:clamp(3.5rem,3rem + 6vw,7.5rem);}
.section-light{background:var(--cotton);color:var(--ink);}
.section-dark{background:var(--cypress);color:var(--cotton);}
.section-light .label{color:var(--label-ink);}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,.6rem + 2vw,2rem);}

.sec-head{display:flex;flex-direction:column;gap:.9rem;margin-bottom:clamp(2rem,1.4rem + 2.5vw,3.6rem);}
.sec-index{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.2em;color:var(--label-ink);}
.section-dark .sec-index{color:var(--sage);}
.sec-title{font-family:var(--font-display);font-weight:800;font-size:var(--display-2);line-height:.98;letter-spacing:-.02em;max-width:16ch;}
.sec-lead{max-width:56ch;color:var(--muted);font-size:var(--step-1);line-height:1.5;}
.section-dark .sec-lead{color:var(--sage);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-body);
  font-weight:600;font-size:var(--step-0);line-height:1;padding:.9em 1.5em;border-radius:999px;
  border:1.5px solid transparent;cursor:pointer;text-align:center;white-space:nowrap;
  transition:transform .35s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
  will-change:transform;}
.btn svg{width:1.05em;height:1.05em;transition:transform .35s var(--ease);}
.btn:hover svg{transform:translateX(3px);}
.btn--light{background:var(--cotton);color:var(--ink);}
.btn--light:hover{background:var(--signal);box-shadow:0 14px 34px -16px rgba(183,208,122,.6);}
.btn--dark{background:var(--cypress);color:var(--cotton);}
.btn--dark:hover{background:var(--cypress-600);box-shadow:var(--shadow-card);}
.btn--outline{background:transparent;border-color:currentColor;color:inherit;opacity:.92;}
.btn--outline:hover{opacity:1;border-color:var(--signal);color:var(--signal);}
.section-light .btn--outline:hover{color:var(--cypress);border-color:var(--cypress);}
.btn--lg{padding:1.05em 1.8em;font-size:var(--step-1);}

/* ---------- status chip ---------- */
.chip{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-mono);
  font-size:var(--step--1);letter-spacing:.06em;padding:.5em .95em;border-radius:999px;
  border:1px solid var(--line-dark-strong);color:var(--sage);background:rgba(14,61,42,.5);}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--signal);position:relative;flex:none;}
.chip .dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--signal);opacity:.5;
  animation:ping 2.6s var(--ease) infinite;}
@keyframes ping{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.7);opacity:0}}

/* ============================================================
   NAV
   ============================================================ */
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--signal);color:var(--ink);
  padding:.7em 1.1em;border-radius:8px;font-weight:600;transition:top .25s var(--ease);}
.skip:focus{top:12px;}

#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--signal),var(--sage));box-shadow:0 0 12px rgba(183,208,122,.5);}

.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(1,50,32,.66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-dark);}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,.6rem + 2vw,2rem);}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);
  font-weight:800;color:var(--cotton);letter-spacing:-.01em;font-size:1.1rem;}
.brand .mono{width:34px;height:34px;border:1.5px solid var(--sage);border-radius:9px;
  display:grid;place-items:center;font-size:.82rem;letter-spacing:.02em;color:var(--signal);flex:none;}
.brand .name{display:none;}
@media (min-width:560px){.brand .name{display:inline;}}
.footer .brand .name{display:inline;}
.nav__links{display:none;align-items:center;gap:1.6rem;}
.nav__links a{font-size:var(--step--1);color:var(--sage);letter-spacing:.02em;position:relative;padding:.3em 0;}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--signal);
  transition:right .3s var(--ease);}
.nav__links a:hover{color:var(--cotton);}
.nav__links a:hover::after{right:0;}
.nav__cta{display:inline-flex;align-items:center;gap:.6rem;}
@media (min-width:880px){.nav__links{display:flex;}}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:grid;overflow:hidden;
  padding-top:var(--nav-h);
  background-color:var(--ink);}

/* elegant dark pattern backdrop — ported from the shadcn DarkGradientBg to vanilla,
   recolored cyan->cypress, self-hosted (no framer/unsplash hotlinks) */
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink);}
.hero__bg::before{content:"";position:absolute;inset:0;
  background:radial-gradient(100% 100% at 0% 0%, #123f2b 0%, #04120B 100%);
  -webkit-mask:radial-gradient(125% 100% at 0% 0%, #000 0%, rgba(0,0,0,.22) 88%, transparent 100%);
          mask:radial-gradient(125% 100% at 0% 0%, #000 0%, rgba(0,0,0,.22) 88%, transparent 100%);}
.hero__bg::after{content:"";position:absolute;inset:0;opacity:.10;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.5) 1px, transparent 0);
  background-size:22px 22px;}
.hero__bg-streaks{position:absolute;inset:0;}
.hero__bg-streaks span{position:absolute;inset:0;opacity:.16;transform:skewX(45deg);transform-origin:center;
  background:linear-gradient(#B7D07A 0%, rgba(183,208,122,0) 100%);}
.hero__bg-streaks span:nth-child(1){
  -webkit-mask:linear-gradient(90deg,transparent 0%,#000 20%,transparent 36%,#000 55%,rgba(0,0,0,.13) 67%,#000 78%,transparent 97%);
          mask:linear-gradient(90deg,transparent 0%,#000 20%,transparent 36%,#000 55%,rgba(0,0,0,.13) 67%,#000 78%,transparent 97%);}
.hero__bg-streaks span:nth-child(2){
  -webkit-mask:linear-gradient(90deg,transparent 9%,#000 20%,rgba(0,0,0,.55) 28%,rgba(0,0,0,.42) 40%,#000 48%,rgba(0,0,0,.27) 54%,rgba(0,0,0,.13) 78%,#000 88%,transparent 97%);
          mask:linear-gradient(90deg,transparent 9%,#000 20%,rgba(0,0,0,.55) 28%,rgba(0,0,0,.42) 40%,#000 48%,rgba(0,0,0,.27) 54%,rgba(0,0,0,.13) 78%,#000 88%,transparent 97%);}
.hero__bg-streaks span:nth-child(3){
  -webkit-mask:linear-gradient(90deg,transparent 0%,#000 17%,rgba(0,0,0,.55) 26%,#000 35%,transparent 47%,rgba(0,0,0,.13) 69%,#000 79%,transparent 97%);
          mask:linear-gradient(90deg,transparent 0%,#000 17%,rgba(0,0,0,.55) 26%,#000 35%,transparent 47%,rgba(0,0,0,.13) 69%,#000 79%,transparent 97%);}
@media (prefers-reduced-motion:reduce){.hero__bg-streaks span{opacity:.12;}}
.hero__grid{position:relative;z-index:2;display:grid;gap:clamp(1.5rem,1rem + 3vw,3rem);
  align-items:center;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:clamp(1.1rem,.6rem + 2vw,2rem);padding-block:clamp(2rem,1rem + 4vw,3rem);}

.hero__copy{position:relative;z-index:3;}
.hero__role{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.24em;
  font-size:clamp(.72rem,.66rem + .3vw,.9rem);color:var(--signal);margin-bottom:1.1rem;
  display:flex;align-items:center;gap:.8rem;}
.hero__role::before{content:"";width:clamp(24px,6vw,54px);height:1.5px;background:var(--sage);opacity:.7;}

h1.hero__name{font-family:var(--font-display);font-weight:800;color:var(--cotton);
  font-size:var(--hero-fs);line-height:.86;letter-spacing:-.035em;margin:.1em 0 .55rem;}
.hero__name .reveal-line{display:block;overflow:hidden;padding-block:.02em;}
.hero__name .reveal-line > span{display:block;}
.hero__name .accent{color:var(--signal);}
.hero__sub{font-size:var(--step-1);line-height:1.5;color:var(--sage);max-width:40ch;margin-bottom:1.7rem;}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:1.6rem;}
.hero__meta{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;}

/* headshot as full-bleed canvas moment */
.hero__media{position:relative;z-index:2;}
.hero__frame{position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-float);border:1px solid var(--line-dark-strong);
  background:var(--cypress-600);}
.hero__frame img{width:100%;height:100%;object-fit:cover;display:block;}
.hero__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,transparent 45%,rgba(1,50,32,.55) 100%),
             linear-gradient(0deg,rgba(1,50,32,.35),transparent 40%);}
.hero__tag{position:absolute;left:14px;bottom:14px;z-index:3;font-family:var(--font-mono);
  font-size:var(--step--1);letter-spacing:.08em;color:var(--cotton);
  background:rgba(4,18,11,.55);backdrop-filter:blur(6px);padding:.5em .9em;border-radius:999px;
  border:1px solid var(--line-dark);}
.hero__scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--sage);opacity:.7;display:flex;flex-direction:column;align-items:center;gap:.5rem;}
.hero__scroll .line{width:1px;height:34px;background:linear-gradient(var(--sage),transparent);
  animation:scrolldrop 2s var(--ease) infinite;}
@keyframes scrolldrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

@media (min-width:900px){
  .hero__grid{grid-template-columns:1.05fr .95fr;}
  .hero__frame{aspect-ratio:auto;height:min(78svh,680px);}
}
@media (max-width:899px){
  .hero__frame{aspect-ratio:4/5;max-height:60svh;margin-inline:auto;max-width:420px;width:100%;}
  .hero__scroll{display:none;}
}

/* line reveal — plays on load, JS-independent, reduced-motion safe */
@media (prefers-reduced-motion:no-preference){
  .hero__name .reveal-line > span{animation:lineUp 1.05s var(--ease) backwards;}
  .hero__name .l1{animation-delay:.12s;}
  .hero__name .l2{animation-delay:.24s;}
  .hero__fade{animation:fadeUp .9s var(--ease) backwards;}
  .hero__role{animation-delay:.05s;}
  .hero__sub{animation-delay:.42s;}
  .hero__actions{animation-delay:.54s;}
  .hero__meta{animation-delay:.66s;}
  .hero__media{animation:fadeIn 1.3s var(--ease) .3s backwards;}
}
@keyframes lineUp{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* hero copy sits directly on the atmospheric bg with a darkening scrim — no glass plate behind the name */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(103deg,rgba(4,18,11,.86) 0%,rgba(4,18,11,.66) 38%,rgba(4,18,11,.22) 66%,transparent 88%);}
@media (max-width:899px){
  .hero::before{background:linear-gradient(180deg,rgba(4,18,11,.55) 0%,rgba(4,18,11,.8) 52%,rgba(4,18,11,.9) 100%);}
}
/* secondary CTA must be legible at rest on the dark hero (was inheriting dark ink -> invisible) */
.hero__actions .btn--outline{color:var(--cotton);border-color:rgba(237,234,225,.55);opacity:1;}
.hero__actions .btn--outline:hover{color:var(--cotton);background:rgba(237,234,225,.14);border-color:var(--cotton);}
/* hero glass now lives on the headshot frame, not behind the text */
.hero__frame--glass{border-color:rgba(237,234,225,.28);
  box-shadow:var(--shadow-float),inset 0 1px 0 rgba(237,234,225,.35),inset 0 0 0 1px rgba(237,234,225,.06);}
.hero__frame__sheen{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(125deg,rgba(237,234,225,.24) 0%,transparent 32%,transparent 70%,rgba(237,234,225,.09) 100%);
  mix-blend-mode:screen;}

/* ============================================================
   HERO VARIANTS — preview of the future PHP `hero_variant` setting
   ------------------------------------------------------------
   .hero carries data-hero="1|2|3". Only the active variant's panel
   is shown, via display:none (never opacity) so assistive tech only
   ever sees ONE <h1>. Content is identical across all three; the
   shared .hero__bg backdrop + .hero::before scrim stay underneath.
   All hero text is cotton/sage/signal on the dark backdrop — every
   pairing clears AA (sage ≈ 6.8:1 on the lightest backdrop region,
   cotton/signal higher) so contrast never depends on a variant.
   ============================================================ */
.hero__v{position:relative;z-index:2;width:100%;display:none;}
.hero[data-hero="1"] .hero__v--1{display:grid;place-items:center;}
.hero[data-hero="2"] .hero__v--2{display:grid;}            /* inner .hero__grid keeps its exact styles */
.hero[data-hero="3"] .hero__v--3{display:grid;place-items:center;}

/* V1 mouse-trail canvas — hero-scoped, behind content. Shown (and JS-inited)
   ONLY on data-hero=1 + fine pointer + motion, so it's absent on mobile/RM. */
.hero__canvas{position:absolute;inset:0;z-index:1;pointer-events:none;display:none;}
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero[data-hero="1"] .hero__canvas{display:block;}
}

/* shared centered column for V1 + V3 */
.hero__center,.hero__wide{width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:clamp(1.1rem,.6rem + 2vw,2rem);padding-block:clamp(2rem,1rem + 4vw,3rem);
  display:flex;flex-direction:column;align-items:center;text-align:center;}
.hero__center{max-width:940px;}
.hero__wide{max-width:820px;}
.hero__center .hero__role,.hero__wide .hero__role{justify-content:center;}
.hero__center .hero__role::before,.hero__wide .hero__role::before{display:none;} /* drop the left dash when centered */
.hero__sub--center{margin-inline:auto;}
.hero__actions--center{justify-content:center;}
.hero__meta--center{justify-content:center;}

/* V1 name — full-bleed display size, wraps cleanly (no overflow at 360px) */
.hero__name--big{font-size:var(--hero-fs);line-height:.9;text-align:center;overflow-wrap:break-word;}

/* V1 typewriter line */
.hero__type-line{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.15rem .55ch;
  font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.6rem,1.2rem + 3vw,3.2rem);line-height:1.08;margin:.4rem 0 1.6rem;color:var(--cotton);}
/* V1 heading (name removed): the "I work across …" line is now the hero h1 */
.hero__type-line--lead{font-size:clamp(2.2rem,1.5rem + 4vw,4.4rem);letter-spacing:-.02em;margin-top:.2rem;}
.hero__type-lead{color:var(--sage);}
.hero__type{color:var(--signal);display:inline-flex;align-items:center;min-height:1.2em;}
.hero__type-txt{white-space:pre;}
.hero__caret{width:2px;height:1.05em;margin-left:2px;background:var(--signal);border-radius:1px;
  animation:caretBlink 1s steps(1) infinite;}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* V1 primary CTA — animated cypress shine border (frozen static under reduced-motion) */
@property --shine-angle{syntax:'<angle>';inherits:false;initial-value:0deg;}
.btn--shine{--shine-angle:0deg;position:relative;isolation:isolate;}
.btn--shine::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;z-index:-1;
  background:conic-gradient(from var(--shine-angle),
    var(--cypress),var(--signal) 25%,var(--sage) 50%,var(--signal) 75%,var(--cypress));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:shineSpin 4.5s linear infinite;}
@keyframes shineSpin{to{--shine-angle:360deg;}}

/* V3 modest circular photo — clearly NOT dominant */
.hero__mini{width:clamp(120px,20vw,156px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  margin:0 auto 1.4rem;border:1px solid rgba(237,234,225,.3);background:var(--cypress-600);
  box-shadow:var(--shadow-float),inset 0 1px 0 rgba(237,234,225,.28);}
.hero__mini img{width:100%;height:100%;object-fit:cover;}
.hero__name--mid{font-size:clamp(2.6rem,1.8rem + 6vw,5.2rem);line-height:.95;text-align:center;overflow-wrap:break-word;}
.hero__about{margin:1.2rem auto 1.6rem;max-width:52ch;color:var(--sage);
  font-size:var(--step-0);line-height:1.6;}

/* PREVIEW-ONLY switcher → becomes the admin `hero_variant` control server-side */
.hero-switch{position:fixed;left:clamp(.8rem,2vw,1.4rem);bottom:clamp(.8rem,2vw,1.4rem);z-index:130;
  display:flex;align-items:center;gap:.3rem;padding:.35rem;border-radius:999px;
  background:rgba(4,18,11,.82);border:1px solid var(--line-dark-strong);box-shadow:var(--shadow-card);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.hero-switch__label{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sage);padding-inline:.45rem;}
.hero-switch button{width:1.9rem;height:1.9rem;border-radius:999px;border:1px solid transparent;background:transparent;
  color:var(--sage);font-family:var(--font-mono);font-size:.82rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .25s var(--ease),color .25s var(--ease);}
.hero-switch button:hover{color:var(--cotton);background:rgba(237,234,225,.1);}
.hero-switch button[aria-pressed="true"]{background:var(--signal);color:var(--ink);border-color:var(--signal);}

/* ---------- V1 height trim + smaller buttons (per feedback) ---------- */
.hero[data-hero="1"]{min-height:84svh;}
.hero__v--1 .hero__center{padding-block:clamp(1.2rem,.6rem + 3vw,2.2rem);}
.hero__v--1 .btn--lg{padding:.9em 1.55em;font-size:var(--step-0);}
.hero__v--1 .hero__type-line{margin:.3rem 0 1.2rem;}

/* ---------- scroll cue only on V2 (was overlapping the chip on centered variants) ---------- */
.hero:not([data-hero="2"]) .hero__scroll{display:none;}

/* ---------- V3: value-prop hero (no photo) + About band with image ---------- */
.hero[data-hero="3"]{min-height:auto;}
.hero[data-hero="3"] .hero__v--3{display:block;place-items:initial;}
.hero__v3-lead{min-height:86svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;max-width:960px;margin-inline:auto;
  padding:clamp(2rem,1rem + 4vw,3rem) clamp(1.1rem,.6rem + 2vw,2rem);}
.hero__v3-lead .hero__role{justify-content:center;}
.hero__v3-lead .hero__role::before{display:none;}
.hero__eyebrow-name{color:var(--cotton);font-weight:600;}
.hero__name.hero__vp{font-size:clamp(2.2rem,1.4rem + 4.5vw,4.4rem);line-height:1.03;letter-spacing:-.02em;
  text-align:center;max-width:20ch;margin-inline:auto;color:var(--cotton);overflow-wrap:break-word;}
.hero__v3-about{position:relative;z-index:2;background:var(--cotton);color:var(--ink);}
.hero__v3-about-inner{max-width:var(--maxw);margin-inline:auto;display:grid;gap:clamp(1.6rem,1rem + 3vw,3.5rem);
  align-items:center;padding:clamp(3rem,2rem + 4vw,5.5rem) clamp(1.1rem,.6rem + 2vw,2rem);}
@media (min-width:820px){.hero__v3-about-inner{grid-template-columns:1.15fr .85fr;}}
.hero__v3-about-copy .label{color:var(--label-ink);}
.hero__v3-about-h{font-family:var(--font-display);font-weight:800;font-size:var(--display-2);
  line-height:1;letter-spacing:-.02em;margin:.6rem 0 1rem;}
.hero__v3-about-copy p{color:var(--muted);font-size:var(--step-1);line-height:1.6;max-width:54ch;}
.hero__v3-about-fig{position:relative;overflow:hidden;border-radius:var(--radius);max-width:440px;
  margin-inline:auto;border:1px solid var(--line);box-shadow:var(--shadow-card);}
.hero__v3-about-fig img{width:100%;height:auto;display:block;}

/* ============================================================
   VENTURES — logo/name tiles linking out (backend-populated)
   ============================================================ */
.ventures{border-top:1px solid var(--line);}
.ventures__grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,.6rem + 1.5vw,1.4rem);
  grid-template-columns:1fr;}
@media (min-width:640px){.ventures__grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:960px){.ventures__grid{grid-template-columns:repeat(3,1fr);}}
.venture{display:flex;}
.venture__link{display:flex;align-items:center;gap:1rem;width:100%;padding:1.1rem 1.2rem;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);}
.venture__link:hover{transform:translateY(-4px);border-color:var(--cypress);box-shadow:var(--shadow-card);}
.venture__logo{flex:none;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;
  background:var(--cypress);color:var(--cotton);font-family:var(--font-display);font-weight:800;
  font-size:1.1rem;letter-spacing:-.02em;}
.venture__body{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.venture__name{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);line-height:1.15;}
.venture__meta{font-family:var(--font-mono);font-size:var(--step--1);color:var(--label-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.venture__go{width:20px;height:20px;flex:none;margin-left:auto;color:var(--cypress);
  transition:transform .35s var(--ease);}
.venture__link:hover .venture__go{transform:translate(2px,-2px);}

/* ============================================================
   TRUST STRIP (counters)
   ============================================================ */
.trust{padding-block:clamp(2.4rem,2rem + 2vw,3.6rem);border-bottom:1px solid var(--line);}
.trust__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,1rem + 2vw,2.6rem);}
.stat{position:relative;}
.stat__num{font-family:var(--font-display);font-weight:800;line-height:1;letter-spacing:-.02em;
  font-size:clamp(2.3rem,1.6rem + 3.4vw,3.8rem);color:var(--cypress);
  font-variant-numeric:tabular-nums;min-height:1em;}
.stat__label{margin-top:.5rem;color:var(--muted);font-size:var(--step--1);line-height:1.4;max-width:22ch;}
@media (min-width:760px){.trust__grid{grid-template-columns:repeat(5,1fr);}}

/* ============================================================
   CAPABILITIES
   ============================================================ */
.caps__grid{display:grid;gap:1rem;grid-template-columns:1fr;}
@media (min-width:640px){.caps__grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1000px){.caps__grid{grid-template-columns:repeat(4,1fr);}}

.cap{position:relative;padding:1.6rem 1.5rem 1.7rem;border-radius:var(--radius);
  background:var(--cypress-600);border:1px solid var(--line-dark);overflow:hidden;
  transition:transform .4s var(--ease),border-color .4s var(--ease);isolation:isolate;}
.cap::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,50%),rgba(183,208,122,.14),transparent 70%);}
.cap:hover{transform:translateY(-5px);border-color:var(--line-dark-strong);}
.cap:hover::before{opacity:1;}
.cap__ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;margin-bottom:1.1rem;
  background:rgba(183,208,122,.12);border:1px solid var(--line-dark-strong);color:var(--signal);}
.cap__ico svg{width:22px;height:22px;}
.cap__n{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;color:var(--sage);opacity:.7;}
.cap h3{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);margin:.5rem 0 .55rem;
  color:var(--cotton);line-height:1.05;}
.cap__what{color:var(--sage);font-size:var(--step-0);line-height:1.5;}
.cap__get{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line-dark);
  display:flex;gap:.55rem;font-size:var(--step--1);line-height:1.45;color:var(--cotton);}
.cap__get b{color:var(--signal);font-weight:600;flex:none;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;}
.caps__also{margin-top:1.6rem;display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;
  color:var(--sage);font-size:var(--step--1);}
.caps__also .k{font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sage);}
.caps__also li{list-style:none;padding:.35em .8em;border:1px solid var(--line-dark);border-radius:999px;}
.caps__also ul{display:flex;flex-wrap:wrap;gap:.55rem;padding:0;margin:0;}

/* ============================================================
   SELECTED WORK — pinned horizontal (JS opt-in), vertical fallback
   ============================================================ */
.work{overflow:hidden;}
/* pinned full-height stage supplies its own bottom breathing room; drop the section's */
body.work-horizontal .work{padding-bottom:0;}
.work .sec-head{margin-bottom:1.6rem;}

/* kinetic marquee (velocity skew via GSAP, translate via CSS) */
.marquee{overflow:hidden;margin:1.6rem 0 2.4rem;border-block:1px solid var(--line);
  padding-block:.55rem;}
.marquee__skew{will-change:transform;}
.marquee__inner{display:flex;width:max-content;}
.marquee__group{display:flex;align-items:center;flex:none;padding-right:0;}
.marq-word{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(2rem,1.2rem + 5vw,5rem);line-height:1;padding-inline:.35em;color:var(--cypress);}
.marq-word.ghost{color:transparent;-webkit-text-stroke:1.5px rgba(1,50,32,.5);}
.marq-star{color:var(--olive);font-size:clamp(1rem,.6rem + 2vw,2rem);}
@media (prefers-reduced-motion:no-preference){
  .marquee__inner{animation:marq 30s linear infinite;}
}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.work__filter{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.6rem;}
.fbtn{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.04em;
  padding:.55em 1.1em;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--muted);cursor:pointer;transition:all .3s var(--ease);}
.fbtn[aria-pressed="true"]{background:var(--cypress);color:var(--cotton);border-color:var(--cypress);}
.fbtn:hover{border-color:var(--cypress);color:var(--cypress);}
.fbtn[aria-pressed="true"]:hover{color:var(--cotton);}

/* work: skip / advance controls — shown only during the pinned horizontal phase */
.work__nav{display:none;}
body.work-pinned .work__nav{position:fixed;z-index:60;
  right:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,3vw,2rem);
  display:flex;align-items:center;gap:.6rem;}
.work__arrow{width:2.6rem;height:2.6rem;border-radius:999px;border:1px solid var(--line);
  background:var(--cotton);color:var(--cypress);font-size:1.5rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--shadow-card);
  transition:background .3s var(--ease),transform .3s var(--ease);}
.work__arrow:hover{background:var(--signal);transform:translateY(-2px);}
.work__skip{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.04em;
  padding:.85em 1.15em;border-radius:999px;background:var(--cypress);color:var(--cotton);
  box-shadow:var(--shadow-card);transition:background .3s var(--ease);}
.work__skip:hover{background:var(--cypress-600);}
#stack{scroll-margin-top:var(--nav-h);}

.work__viewport{position:relative;}
.work__track{display:grid;grid-template-columns:1fr;gap:1.1rem;}
@media (min-width:640px){.work__track{grid-template-columns:repeat(2,1fr);}}

.case{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem;
  padding:1.6rem 1.5rem 1.7rem;border-radius:var(--radius);background:var(--cypress);color:var(--cotton);
  border:1px solid var(--line-dark);box-shadow:var(--shadow-card);overflow:hidden;isolation:isolate;
  min-height:320px;text-decoration:none;transition:transform .4s var(--ease),border-color .4s var(--ease);}
.case::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.6;
  background:radial-gradient(120% 90% at 100% 0,rgba(14,61,42,.9),transparent 60%);}
.case:hover{transform:translateY(-6px);border-color:var(--line-dark-strong);}
.case__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.case__cat{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal);}
.case__badge{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;padding:.35em .7em;
  border-radius:999px;border:1px solid var(--line-dark-strong);color:var(--sage);}
.case__ind{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);line-height:1.08;
  color:var(--cotton);max-width:18ch;}
.case__metrics{display:flex;flex-direction:column;gap:.6rem;margin-top:auto;}
.metric{display:flex;align-items:baseline;gap:.7rem;padding-top:.6rem;border-top:1px solid var(--line-dark);}
.metric b{font-family:var(--font-display);font-weight:800;font-size:clamp(1.3rem,1rem + 1.4vw,1.9rem);
  color:var(--signal);line-height:1;flex:none;letter-spacing:-.01em;}
.metric span{color:var(--sage);font-size:var(--step--1);line-height:1.35;}
.case__go{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.74rem;
  letter-spacing:.08em;color:var(--cotton);opacity:.85;}
.case__go svg{width:1em;height:1em;transition:transform .35s var(--ease);}
.case:hover .case__go svg{transform:translateX(4px);}
.case.hidden{display:none;}

/* horizontal mode toggled by JS on <body> */
/* stage hugs a moderate card row (no full-height dead space); JS pins it centered under the nav */
body.work-horizontal .work__viewport{display:flex;align-items:stretch;overflow:hidden;
  padding-block:clamp(1rem,.5rem + 2svh,1.75rem);}
body.work-horizontal .work__track{display:flex;grid-template-columns:none;width:max-content;height:clamp(360px,60svh,600px);
  gap:clamp(1rem,.6rem + 1.6vw,2rem);align-items:stretch;padding-inline:clamp(1.1rem,.6rem + 2vw,2rem);padding-right:6vw;}
body.work-horizontal .case{width:min(80vw,440px);flex:none;}
body.work-horizontal .work__intro{width:min(70vw,380px);flex:none;display:flex;flex-direction:column;
  justify-content:center;padding-right:2rem;}
.work__intro{display:none;}
body.work-horizontal .work__intro{display:flex;}
.work__intro .k{font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--label-ink);font-size:var(--step--1);margin-bottom:.8rem;}
.work__intro h3{font-family:var(--font-display);font-weight:800;font-size:var(--display-2);
  line-height:.98;letter-spacing:-.02em;color:var(--cypress);}
.work__intro p{margin-top:1rem;color:var(--muted);max-width:34ch;}
.work__hint{display:none;}
body.work-horizontal .work__hint{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.6rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--label-ink);}

/* ============================================================
   LIQUID GLASS SYSTEM  (hero plate + tool tiles only)
   ------------------------------------------------------------
   Baseline .glass = a SOLID frosted panel. This is the safe
   default that mobile, no-backdrop-filter, and reduced-transparency
   all keep — so real text is ALWAYS on an opaque dark panel and
   AA contrast never depends on the blur. Translucent glass, the
   decorative fx layers and displacement are PROGRESSIVE ENHANCEMENTS
   layered on top only where they're safe and cheap.
   ============================================================ */
.glass{position:relative;border-radius:var(--radius);isolation:isolate;
  background:rgba(1,50,32,.92);
  border:1px solid rgba(237,234,225,.14);
  box-shadow:
    0 24px 60px -30px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(237,234,225,.16),
    inset 0 -1px 0 rgba(4,18,11,.4);}
/* brighter top-left edge — layered gradient border via mask */
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  pointer-events:none;z-index:4;
  background:linear-gradient(140deg,rgba(237,234,225,.55),rgba(237,234,225,.06) 34%,rgba(237,234,225,0) 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;}
/* decorative fx — clipped, sits BEHIND content, hidden unless real glass is on */
.glass__fx{position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  z-index:-1;pointer-events:none;display:none;}
.glass__liquid{position:absolute;inset:-12%;border-radius:inherit;opacity:.9;
  background:
    radial-gradient(58% 54% at 28% 30%,rgba(14,61,42,.65),transparent 70%),
    radial-gradient(52% 50% at 82% 74%,rgba(183,208,122,.12),transparent 72%);
  -webkit-filter:url(#c-liquid);filter:url(#c-liquid);}
.glass__blob{position:absolute;width:62%;height:72%;left:-12%;top:8%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(183,208,122,.14),transparent 68%);
  -webkit-filter:blur(26px);filter:blur(26px);will-change:transform;
  animation:glassblob 15s var(--ease) infinite alternate;}
.glass__sheen{position:absolute;top:-60%;left:-30%;width:55%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(237,234,225,.16),transparent);
  transform:rotate(18deg) translateX(-180%);}
.glass:hover .glass__sheen{transition:transform 1.1s var(--ease);transform:rotate(18deg) translateX(360%);}
@keyframes glassblob{from{transform:translate(0,0) scale(1)}to{transform:translate(18%,-10%) scale(1.14)}}

/* Enable translucency + blur + fx: desktop only, and only where
   backdrop-filter is supported. prefers-reduced-transparency is handled
   as an OVERRIDE below (not a gate) so unsupporting browsers still get glass. */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  @media (min-width:769px){
    .glass{
      background:linear-gradient(150deg,rgba(237,234,225,.12),rgba(14,61,42,.10) 45%,rgba(4,18,11,.16));
      -webkit-backdrop-filter:blur(16px) saturate(135%);
      backdrop-filter:blur(16px) saturate(135%);}
    .glass__fx{display:block;}
    /* hero plate leans darker so the h1 / sub / CTAs keep AA over the blur */
    .hero__plate{background:linear-gradient(150deg,rgba(237,234,225,.10),rgba(6,36,23,.30) 48%,rgba(4,18,11,.46));}
    .tool{-webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%);}
    .tools__ambient{display:block;}
  }
}
/* Explicit no-support fallback: keep the solid panel (redundant with base, but stated). */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glass,.hero__plate{background:rgba(1,50,32,.92);}
  .glass__fx,.tools__ambient{display:none;}
}
/* Reduced transparency → force solid everywhere, drop blur + fx. */
@media (prefers-reduced-transparency:reduce){
  .glass,.hero__plate,.tool{
    background:rgba(1,50,32,.94)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
  .glass__fx,.tools__ambient{display:none!important;}
}

/* ============================================================
   TOOLS  (#stack "Tools I reach for.") — liquid-glass tile grid
   ============================================================ */
.tools{background-color:var(--ink);
  background-image:
    linear-gradient(180deg,rgba(4,18,11,.5),rgba(4,18,11,.18) 32%,rgba(4,18,11,.42)),
    url('img/bg-tools.svg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;}
.tools > .wrap{position:relative;z-index:1;}
/* one ambient blob drifting behind the tiles (single element, transform-only) */
.tools__ambient{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;display:none;}
.tools__ambient .glass__blob{width:60vw;height:60vw;max-width:720px;max-height:720px;
  left:auto;right:-8%;top:6%;
  background:radial-gradient(circle at 50% 50%,rgba(14,61,42,.5),transparent 65%);
  -webkit-filter:blur(42px);filter:blur(42px);opacity:.7;
  animation:toolsblob 24s var(--ease) infinite alternate;}
@keyframes toolsblob{from{transform:translate(0,0) scale(1)}to{transform:translate(-14%,10%) scale(1.12)}}

.tools__grid{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;
  grid-template-columns:repeat(2,1fr);}
@media (min-width:560px){.tools__grid{grid-template-columns:repeat(3,1fr);}}
@media (min-width:900px){.tools__grid{grid-template-columns:repeat(4,1fr);}}

.tool{min-width:0;min-height:104px;display:flex;flex-direction:column;justify-content:space-between;
  gap:.6rem;padding:1.1rem 1.15rem 1rem;overflow:visible;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);}
/* pointer spotlight — driven by data-card (--mx/--my); sits behind text */
.tool::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  z-index:-1;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(150px 150px at var(--mx,50%) var(--my,50%),rgba(183,208,122,.2),transparent 70%);}
.tool:hover{transform:translateY(-5px);border-color:rgba(237,234,225,.3);
  box-shadow:0 32px 64px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(237,234,225,.22),inset 0 -1px 0 rgba(4,18,11,.4);}
.tool:hover::after{opacity:1;}
.tool__name{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);
  color:var(--cotton);line-height:1.05;letter-spacing:-.01em;overflow-wrap:break-word;}
.tool__tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);}
.tool__tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;}
.tools__note{margin-top:1.8rem;color:var(--sage);max-width:56ch;position:relative;z-index:1;}

/* ============================================================
   HOW I WORK
   ============================================================ */
.flow{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.flow__step{background:var(--cotton);padding:1.7rem 1.5rem;display:grid;gap:.4rem;
  grid-template-columns:auto 1fr;column-gap:1.2rem;align-items:start;
  transition:background .35s var(--ease);}
.flow__step:hover{background:var(--cotton-card);}
.flow__n{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,1.2rem + 2vw,2.6rem);
  color:var(--cypress);line-height:1;grid-row:span 2;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;opacity:.85;}
.flow__step h3{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);color:var(--ink);}
.flow__step p{color:var(--muted);font-size:var(--step-0);line-height:1.5;max-width:60ch;}
@media (min-width:820px){.flow{grid-template-columns:repeat(2,1fr);}}

/* ============================================================
   TESTIMONIALS (+ "updating soon" empty state)
   ============================================================ */
.ph{border:1.5px dashed var(--line-dark-strong);border-radius:var(--radius);
  padding:clamp(1.6rem,1.2rem + 2vw,2.8rem);background:rgba(14,61,42,.4);}
.ph__tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin-bottom:1rem;}
.ph__tag::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--signal);}
.ph__note{color:var(--sage);max-width:52ch;}
@media (prefers-reduced-motion:no-preference){.ph--soon .ph__tag::before{animation:ph-pulse 1.8s ease-in-out infinite;}}
@keyframes ph-pulse{50%{opacity:.3}}
.tst__grid{display:grid;gap:1rem;grid-template-columns:1fr;}
@media (min-width:760px){.tst__grid{grid-template-columns:repeat(3,1fr);}}
.tst{padding:1.5rem;border-radius:12px;border:1px solid var(--line-dark);background:rgba(1,50,32,.35);}
.tst__stars{display:flex;gap:.25rem;color:var(--olive);margin-bottom:1rem;opacity:.5;}
.tst__stars svg{width:16px;height:16px;}
.tst__line{height:10px;border-radius:6px;background:var(--line-dark-strong);margin-bottom:.7rem;}
.tst__line.s{width:60%;}
.tst__by{margin-top:1.2rem;font-family:var(--font-mono);font-size:.72rem;color:var(--sage);opacity:.7;}

/* ============================================================
   EXPERIENCE (placeholder timeline)
   ============================================================ */
.exp__grid{display:grid;gap:2.4rem;align-items:start;}
@media (min-width:900px){.exp__grid{grid-template-columns:1fr 1fr;}}
.timeline{position:relative;padding-left:1.6rem;}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:var(--line);}
.tl{position:relative;padding-bottom:1.7rem;}
.tl:last-child{padding-bottom:0;}
.tl::before{content:"";position:absolute;left:-1.6rem;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--cotton);border:2px solid var(--cypress);}
.tl__yr{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;color:var(--label-ink);}
.tl__role{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);color:var(--ink);margin:.2rem 0;}
.tl__meta{color:var(--muted);font-size:var(--step--1);}
.tl--ph .tl__role,.tl--ph .tl__meta{color:var(--muted);}
.tl--ph::before{background:var(--cotton-card);border-style:dashed;}
.exp__cv{padding:clamp(1.6rem,1.2rem + 2vw,2.4rem);border-radius:var(--radius);
  background:var(--cotton-card);border:1px solid var(--line);}
.exp__cv h3{font-family:var(--font-display);font-weight:700;font-size:var(--step-2);color:var(--ink);margin-bottom:.7rem;letter-spacing:-.01em;}
.exp__cv p{color:var(--muted);margin-bottom:1.4rem;max-width:44ch;}
.ph-inline{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--label-ink);border:1px dashed var(--line);border-radius:6px;padding:.3em .6em;display:inline-block;}

/* ============================================================
   OFF THE CLOCK
   ============================================================ */
.off__grid{display:grid;gap:2rem;align-items:center;}
@media (min-width:820px){.off__grid{grid-template-columns:1.1fr .9fr;}}
.off__big{font-family:var(--font-display);font-weight:800;font-size:var(--display-2);line-height:.98;
  letter-spacing:-.02em;color:var(--cotton);}
.off__big em{font-style:normal;color:var(--signal);}
.off__line{margin-top:1.2rem;color:var(--sage);font-size:var(--step-1);line-height:1.5;max-width:44ch;}
.off__chips{display:flex;flex-wrap:wrap;gap:.7rem;}
.off__chip{display:inline-flex;align-items:center;gap:.6rem;padding:.7em 1.1em;border-radius:999px;
  border:1px solid var(--line-dark);background:rgba(14,61,42,.55);color:var(--cotton);
  font-size:var(--step-0);transition:transform .35s var(--ease),border-color .35s var(--ease);}
.off__chip:hover{transform:translateY(-3px);border-color:var(--signal);}
.off__chip svg{width:19px;height:19px;color:var(--signal);}

/* ============================================================
   CONTACT
   ============================================================ */
.contact__grid{display:grid;gap:clamp(2rem,1.4rem + 3vw,4rem);align-items:start;}
@media (min-width:900px){.contact__grid{grid-template-columns:.9fr 1.1fr;}}
.contact__pitch h2{font-family:var(--font-display);font-weight:800;font-size:var(--display-2);
  line-height:.98;letter-spacing:-.02em;color:var(--ink);}
.contact__pitch p{margin-top:1.1rem;color:var(--muted);font-size:var(--step-1);line-height:1.5;max-width:42ch;}
.contact__mail{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.6rem;
  font-family:var(--font-mono);font-size:var(--step-0);color:var(--cypress);
  border-bottom:1.5px solid var(--line);padding-bottom:.25rem;transition:border-color .3s var(--ease);}
.contact__mail:hover{border-color:var(--cypress);}
.contact__mail svg{width:1.1em;height:1.1em;}
.contact__alt{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.8rem;}

.form{background:var(--cotton-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.4rem,1rem + 2vw,2.2rem);}
.field{margin-bottom:1.15rem;}
.field label{display:block;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--label-ink);margin-bottom:.5rem;}
.field input,.field textarea{width:100%;font-family:var(--font-body);font-size:var(--step-0);
  color:var(--ink);background:var(--cotton);border:1.5px solid var(--line);border-radius:10px;
  padding:.85em 1em;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);}
.field textarea{resize:vertical;min-height:130px;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cypress);
  box-shadow:0 0 0 3px rgba(1,50,32,.12);}
.field input::placeholder,.field textarea::placeholder{color:var(--olive);opacity:.7;}
.form__submit{width:100%;justify-content:center;}
.form__note{margin-top:1rem;font-size:var(--step--1);color:var(--muted);line-height:1.4;}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.form__status{margin-top:1rem;font-size:var(--step--1);min-height:1.2em;}
.form__status.ok{color:var(--cypress);font-weight:600;}
.form__status.err{color:#b3402e;font-weight:600;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:var(--sage);padding-block:clamp(2.6rem,2rem + 3vw,4rem);}
.footer__top{display:grid;gap:2rem;grid-template-columns:1fr;margin-bottom:2.4rem;}
@media (min-width:760px){.footer__top{grid-template-columns:1.4fr 1fr 1fr;}}
.footer .brand{margin-bottom:1rem;}
.footer__blurb{color:var(--sage);opacity:.8;max-width:34ch;font-size:var(--step--1);line-height:1.5;}
.footer h4{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--olive);margin-bottom:1rem;}
.footer__list{display:flex;flex-direction:column;gap:.6rem;}
.footer__list a,.footer__list span{color:var(--sage);font-size:var(--step--1);transition:color .3s var(--ease);}
.footer__list a:hover{color:var(--signal);}
.footer__soon{opacity:.5;}
.footer__bottom{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;justify-content:space-between;align-items:center;
  padding-top:1.6rem;border-top:1px solid var(--line-dark);font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.04em;color:var(--olive);}

/* pointer trail overlay */
.trail{position:fixed;inset:0;z-index:90;pointer-events:none;}

/* off-canvas host for the liquid-glass displacement filter */
.c-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;}

/* ============================================================
   REDUCED MOTION — global safety net
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .chip .dot::after,.hero__scroll .line{animation:none!important;}
  .marquee__inner{animation:none!important;transform:none!important;}
  .trail{display:none!important;}
  /* liquid-glass: static only — no drifting blobs, no sheen sweep, no fixed parallax */
  .glass__blob,.tools__ambient .glass__blob{animation:none!important;transform:none!important;}
  .glass:hover .glass__sheen{transition:none!important;transform:rotate(18deg) translateX(-180%)!important;}
  .hero,.tools{background-attachment:scroll!important;}
}
/* CSS-only parallax: pin the organic fields on desktop with motion allowed */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .hero,.tools{background-attachment:fixed;}
}

/* ============================================================
   SUB-PAGES — Portfolio (.pf-*) & Case studies (.cs-*)
   ------------------------------------------------------------
   Built for portfolio.html, case-studies.html, work.html,
   case-study.html. Reuses tokens + c.css primitives (.section,
   .wrap, .sec-head, .btn, .fbtn, .metric, .chip, .label). The
   page shell (head/nav/footer/scripts) is copied verbatim from
   c.html so every page reads as one system.
   ============================================================ */

/* keep first section clear of the fixed nav on inner pages */
.section.subpage-first{padding-top:calc(var(--nav-h) + clamp(1.4rem,1rem + 3vw,3.2rem));}

/* active nav item on inner pages */
.nav__links a[aria-current="page"]{color:var(--cotton);}
.nav__links a[aria-current="page"]::after{right:0;}

/* ---------- breadcrumb (detail pages, dark band) ---------- */
.pf-crumb,.cs-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .5rem;
  font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.04em;color:var(--sage);margin-bottom:1.4rem;}
.pf-crumb a,.cs-crumb a{color:var(--sage);border-bottom:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);}
.pf-crumb a:hover,.cs-crumb a:hover{color:var(--cotton);border-color:var(--signal);}
.pf-crumb .sep,.cs-crumb .sep{opacity:.45;}
.pf-crumb [aria-current],.cs-crumb [aria-current]{color:var(--cotton);}

/* ============================================================
   PORTFOLIO INDEX — filter + card grid
   ============================================================ */
.pf-filter{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:clamp(1.6rem,1rem + 2vw,2.6rem);}
.pf-filter .fbtn{display:inline-flex;align-items:center;gap:.5em;}
.pf-count{font-size:.82em;opacity:.7;font-variant-numeric:tabular-nums;}
.fbtn[aria-pressed="true"] .pf-count{opacity:.9;}

.pf-grid{display:grid;gap:clamp(1rem,.7rem + 1vw,1.5rem);grid-template-columns:1fr;}
@media (min-width:600px){.pf-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:960px){.pf-grid{grid-template-columns:repeat(3,1fr);}}

.pf-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;color:var(--ink);isolation:isolate;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);}
.pf-card:hover{transform:translateY(-6px);border-color:var(--cypress);box-shadow:var(--shadow-card);}
.pf-card:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}
.pf-card__media{display:block;position:relative;aspect-ratio:808/632;overflow:hidden;background:var(--cotton);
  border-bottom:1px solid var(--line);}
.pf-card__img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s var(--ease);}
.pf-card:hover .pf-card__img{transform:scale(1.05);}
.pf-card__body{display:flex;flex-direction:column;gap:.55rem;padding:1.2rem 1.25rem 1.35rem;flex:1;}
.pf-card__ind{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label-ink);}
.pf-card__title{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);line-height:1.1;
  letter-spacing:-.01em;color:var(--ink);}
.pf-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.5rem;}
.pf-tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--label-ink);
  border:1px solid var(--line);border-radius:999px;padding:.35em .7em;background:var(--cotton);}
.pf-card__go{display:inline-flex;align-items:center;gap:.45rem;margin-top:.35rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;color:var(--cypress);}
.pf-card__go svg{width:1em;height:1em;transition:transform .35s var(--ease);}
.pf-card:hover .pf-card__go svg{transform:translateX(4px);}

/* empty-state (graphic / logo / social — coming soon) */
.pf-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.7rem;padding:clamp(2.4rem,2rem + 4vw,4.5rem) 1.5rem;
  border:1.5px dashed var(--line);border-radius:var(--radius);background:var(--surface);color:var(--muted);}
.pf-empty__tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--label-ink);}
.pf-empty__tag::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--olive);}
.pf-empty h2{font-family:var(--font-display);font-weight:800;font-size:var(--step-2);color:var(--ink);letter-spacing:-.01em;}
.pf-empty p{max-width:46ch;color:var(--muted);}
.pf-empty .btn{margin-top:.6rem;}

.is-hidden{display:none!important;}

/* ============================================================
   CASE-STUDIES INDEX — imageless, metric-forward (dark cards)
   ============================================================ */
.cs-grid{display:grid;gap:clamp(1rem,.7rem + 1vw,1.5rem);grid-template-columns:1fr;}
@media (min-width:640px){.cs-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1040px){.cs-grid{grid-template-columns:repeat(3,1fr);}}

.cs-card{position:relative;display:flex;flex-direction:column;gap:1.1rem;
  padding:1.5rem 1.4rem 1.6rem;border-radius:var(--radius);background:var(--cypress);color:var(--cotton);
  border:1px solid var(--line-dark);box-shadow:var(--shadow-card);overflow:hidden;isolation:isolate;
  min-height:300px;transition:transform .4s var(--ease),border-color .4s var(--ease);}
.cs-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%),rgba(183,208,122,.14),transparent 70%);}
.cs-card:hover{transform:translateY(-6px);border-color:var(--line-dark-strong);}
.cs-card:hover::before{opacity:1;}
.cs-card:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}
.cs-card__head{display:flex;flex-direction:column;gap:.55rem;}
.cs-badge{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);line-height:1.35;}
.cs-region{align-self:flex-start;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;
  padding:.3em .7em;border-radius:999px;border:1px solid var(--line-dark-strong);color:var(--sage);}
.cs-card__title{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);line-height:1.12;
  color:var(--cotton);letter-spacing:-.01em;}
.cs-card__metrics{display:flex;flex-direction:column;gap:.55rem;margin-top:auto;}
.cs-card__go{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.08em;color:var(--cotton);opacity:.85;}
.cs-card__go svg{width:1em;height:1em;transition:transform .35s var(--ease);}
.cs-card:hover .cs-card__go svg{transform:translateX(4px);}

/* ============================================================
   DETAIL PAGES — shared dark lede band + light prose body
   ============================================================ */
.pf-lede .wrap,.cs-lede .wrap{max-width:960px;}
.pf-title,.cs-title{font-family:var(--font-display);font-weight:800;font-size:var(--display-2);
  line-height:1;letter-spacing:-.02em;color:var(--cotton);max-width:22ch;margin:.2rem 0 .9rem;overflow-wrap:break-word;}
.pf-meta,.cs-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;margin-bottom:.9rem;}
.pf-meta__ind,.cs-meta__ind{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal);}
.pf-lede__sum,.cs-lede__sum{color:var(--sage);font-size:var(--step-1);line-height:1.55;max-width:62ch;margin:1.2rem 0 1.4rem;}

/* prominent metrics row (dark band) */
.cs-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.2rem 1.6rem;
  margin:1.4rem 0 1.6rem;padding-top:1.4rem;border-top:1px solid var(--line-dark);}
.cs-fig__v{font-family:var(--font-display);font-weight:800;line-height:1.02;letter-spacing:-.02em;
  font-size:clamp(1.6rem,1.2rem + 2.2vw,3rem);color:var(--signal);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.cs-fig__l{margin-top:.5rem;color:var(--sage);font-size:var(--step--1);line-height:1.4;max-width:28ch;}

/* service chips + timeframe (dark band) */
.pf-services,.cs-services{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:.6rem 0 0;padding:0;}
.pf-service,.cs-service{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sage);border:1px solid var(--line-dark-strong);border-radius:999px;padding:.42em .8em;background:rgba(14,61,42,.5);}
.pf-actions,.cs-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem;}

/* web-project framed preview (browser mockup of a full-page capture) */
.pf-hero{margin-top:1.8rem;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-dark-strong);
  background:var(--cypress-600);box-shadow:var(--shadow-float);}
.pf-hero__bar{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border-bottom:1px solid var(--line-dark);
  background:rgba(4,18,11,.4);}
.pf-hero__dots{display:flex;gap:.4rem;flex:none;}
.pf-hero__dots span{width:10px;height:10px;border-radius:50%;background:var(--line-dark-strong);}
.pf-hero__url{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em;color:var(--sage);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.pf-hero__shot{aspect-ratio:16/10;overflow:hidden;background:var(--ink);}
.pf-hero__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;}
@media (max-width:560px){.pf-hero__shot{aspect-ratio:4/5;}}

/* light body prose (trusted body_html) */
.pf-prose,.cs-prose{max-width:72ch;}
.pf-prose h3,.cs-prose h3{font-family:var(--font-display);font-weight:800;font-size:var(--step-2);
  color:var(--ink);letter-spacing:-.01em;line-height:1.1;margin:2rem 0 .8rem;}
.pf-prose > :first-child,.cs-prose > :first-child{margin-top:0;}
.pf-prose p,.cs-prose p{color:var(--muted);font-size:var(--step-0);line-height:1.7;margin-bottom:1rem;}
.pf-prose ul,.cs-prose ul{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-direction:column;gap:.6rem;}
.pf-prose li,.cs-prose li{position:relative;padding-left:1.5rem;color:var(--muted);line-height:1.6;}
.pf-prose li::before,.cs-prose li::before{content:"";position:absolute;left:.1rem;top:.62em;width:8px;height:8px;
  border-radius:2px;background:var(--signal);border:1px solid var(--cypress);}

/* gallery (web projects, if present) */
.pf-gallery{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.6rem;}
@media (min-width:640px){.pf-gallery{grid-template-columns:repeat(2,1fr);}}
.pf-gallery figure{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--cotton);}
.pf-gallery img{width:100%;height:auto;display:block;}

/* back link + graceful loading / not-found (dark band) */
.pf-back,.cs-back{margin-top:2rem;}
.pf-back a,.cs-back a{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);
  font-size:var(--step--1);letter-spacing:.06em;color:var(--cypress);border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);}
.pf-back a:hover,.cs-back a:hover{border-color:var(--cypress);}
.dt-notfound{text-align:center;max-width:54ch;margin-inline:auto;padding-block:clamp(1.5rem,4vw,3.5rem);}
.dt-notfound .label{color:var(--signal);}
.dt-notfound h1{font-family:var(--font-display);font-weight:800;font-size:var(--display-2);color:var(--cotton);
  margin:.6rem 0 .8rem;letter-spacing:-.02em;}
.dt-notfound p{color:var(--sage);margin-bottom:1.2rem;}
.dt-notfound a{color:var(--signal);border-bottom:1px solid var(--signal);}

/* ============================================================
   CONTACT PAGE (.ct-*) — dedicated "Quick connect" page
   ------------------------------------------------------------
   Reuses .contact__grid, .contact__mail, .form, .field, .form__*
   primitives from the home page's #contact so the form contract
   and look stay identical. .ct-* covers only the new connect aside.
   ============================================================ */
.ct-connect{display:flex;flex-direction:column;gap:1.6rem;min-width:0;}
.ct-connect__h{font-family:var(--font-display);font-weight:800;font-size:var(--step-2);
  line-height:1.06;letter-spacing:-.01em;color:var(--ink);max-width:20ch;margin-top:.4rem;}
.ct-connect .contact__mail{margin-top:0;}

.ct-next{padding-top:1.5rem;border-top:1px solid var(--line);}
.ct-next__k{display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--label-ink);margin-bottom:1rem;}
.ct-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem;}
.ct-steps li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  color:var(--muted);font-size:var(--step-0);line-height:1.5;}
.ct-steps__n{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:var(--cypress);
  font-variant-numeric:tabular-nums;padding-top:.2em;}

.ct-social{padding-top:1.5rem;border-top:1px solid var(--line);}
.ct-social__k{display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--label-ink);margin-bottom:.9rem;}
.ct-social__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;}
.ct-social__item{display:inline-flex;align-items:center;gap:.55rem;padding:.5em .9em;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:var(--step--1);}
.ct-social__name{font-weight:600;color:var(--ink);}
.ct-social__item--link{text-decoration:none;transition:border-color .3s var(--ease),transform .3s var(--ease);}
.ct-social__item--link:hover{border-color:var(--cypress);transform:translateY(-2px);}
.ct-social__soon{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--label-ink);border:1px solid var(--line);border-radius:999px;padding:.2em .5em;}

.ct-form__h{font-family:var(--font-display);font-weight:800;font-size:var(--step-2);line-height:1.06;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:1.3rem;}
.ct-optional{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-weight:400;
  font-size:.92em;color:var(--olive);}

/* ============================================================
   BLOG (.bl-*) — index card grid + post lede / notes
   ------------------------------------------------------------
   Post detail reuses .cs-crumb, .cs-title, .cs-prose, .cs-back.
   .bl-* covers the index cards, the post meta/tags, and the
   sample-content note. Cypress palette only, no external images.
   ============================================================ */
.bl-grid{display:grid;gap:clamp(1rem,.7rem + 1vw,1.5rem);grid-template-columns:1fr;}
@media (min-width:640px){.bl-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1040px){.bl-grid{grid-template-columns:repeat(3,1fr);}}

.bl-loading{grid-column:1/-1;color:var(--muted);font-family:var(--font-mono);font-size:var(--step--1);
  letter-spacing:.04em;padding:1rem 0;}

.bl-card{display:flex;flex-direction:column;gap:.8rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.4rem 1.35rem 1.45rem;color:var(--ink);isolation:isolate;min-height:250px;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);}
.bl-card:hover{transform:translateY(-6px);border-color:var(--cypress);box-shadow:var(--shadow-card);}
.bl-card:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}
.bl-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.06em;color:var(--label-ink);}
.bl-dot{width:4px;height:4px;border-radius:50%;background:var(--olive);flex:none;}
.bl-badge{margin-left:auto;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cypress);background:rgba(183,208,122,.3);border:1px solid var(--signal);
  border-radius:999px;padding:.28em .6em;}
.bl-card__title{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);line-height:1.14;
  letter-spacing:-.01em;color:var(--ink);}
.bl-card__excerpt{color:var(--muted);font-size:var(--step-0);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.bl-card__foot{margin-top:auto;display:flex;flex-direction:column;gap:.8rem;}
.bl-tags{display:flex;flex-wrap:wrap;gap:.4rem;}
.bl-tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--label-ink);border:1px solid var(--line);border-radius:999px;padding:.35em .7em;background:var(--cotton);}
.bl-card__go{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.08em;color:var(--cypress);}
.bl-card__go svg{width:1em;height:1em;transition:transform .35s var(--ease);}
.bl-card:hover .bl-card__go svg{transform:translateX(4px);}

/* blog author box (settings-driven) */
.bl-author{display:flex;gap:1rem;align-items:flex-start;margin:2.4rem 0 0;padding:1.2rem 1.4rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);max-width:72ch;}
.bl-author__img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line);}
.bl-author__name{font-family:var(--font-display);font-weight:700;margin:0 0 .3rem;}
.bl-author__bio{color:var(--muted);font-size:var(--step-0);line-height:1.6;margin:0;}

/* ============================================================
   CAPABILITIES — scroll-driven tilted thumbnail wall background
   ============================================================ */
.caps--wall{position:relative;overflow:hidden;isolation:isolate;}
.caps--wall .caps__bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.caps__wall{position:absolute;top:50%;left:50%;width:185%;height:185%;display:flex;gap:.9rem;
  transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px))) rotate(-24deg);
  transition:transform .5s var(--ease);}
.caps__col{display:flex;flex-direction:column;gap:.9rem;flex:1 1 0;min-width:0;will-change:transform;
  transform:translateY(calc(-20% + var(--sy,0px)));}
.caps__col img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:9px;display:block;
  border:1px solid rgba(193,195,172,.10);box-shadow:0 16px 40px -28px rgba(0,0,0,.85);}
.caps--wall .caps__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 28%, rgba(1,50,32,.80) 0%, rgba(1,50,32,.93) 52%, rgba(4,18,11,.985) 100%);
  -webkit-backdrop-filter:blur(2px) saturate(112%);backdrop-filter:blur(2px) saturate(112%);}
.caps--wall > .wrap{position:relative;z-index:2;}
.caps--wall .cap{background:rgba(4,18,11,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-color:rgba(193,195,172,.18);}
@media (prefers-reduced-motion:reduce){.caps__wall{transform:translate(-50%,-50%) rotate(-24deg);}}

/* empty / error state (mirrors .pf-empty) */
.bl-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.7rem;padding:clamp(2.4rem,2rem + 4vw,4.5rem) 1.5rem;
  border:1.5px dashed var(--line);border-radius:var(--radius);background:var(--surface);color:var(--muted);}
.bl-empty__tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--label-ink);}
.bl-empty__tag::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--olive);}
.bl-empty h2{font-family:var(--font-display);font-weight:800;font-size:var(--step-2);color:var(--ink);letter-spacing:-.01em;}
.bl-empty p{max-width:46ch;color:var(--muted);}
.bl-empty a{color:var(--cypress);border-bottom:1px solid var(--cypress);}

/* post detail — dark lede band (reuses .cs-title + .cs-crumb) */
.bl-lede .wrap{max-width:820px;}
.bl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-family:var(--font-mono);
  font-size:var(--step--1);letter-spacing:.04em;color:var(--sage);margin-top:1rem;}
.bl-lede .bl-tags{margin-top:1.2rem;}
.section-dark .bl-tag{color:var(--sage);border-color:var(--line-dark-strong);background:rgba(14,61,42,.5);}

/* sample-content note on the post body */
.bl-note{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin-bottom:1.8rem;
  padding:.85rem 1.1rem;border:1px dashed var(--line);border-radius:10px;background:var(--cotton-card);
  color:var(--muted);font-size:var(--step--1);line-height:1.5;}
.bl-note__tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cypress);background:rgba(183,208,122,.3);border:1px solid var(--signal);border-radius:999px;
  padding:.3em .7em;flex:none;}