/* ==========================================================================
   Monad — shared stylesheet
   Design source of truth: website/DESIGN.md
   Reference implementation: website/Home.monad.html (approved 2026-08-20)
   Read-only during subagent-driven page builds — see tasks/todo.md Phase 3.
   ========================================================================== */

/* ---------- self-hosted fonts ---------- */
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/newsreader-400.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/jetbrains-mono-500.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/inter-400.woff2') format('woff2');
}

:root{
  /* Monad tokens — colors */
  --color-parchment:#f6f3f1;
  --color-lake-blue:#2b59d1;
  --color-periwinkle-mist:#cfdaf5;
  --color-sky-blue:#a0b5eb;
  --color-mint:#a7fccd;
  --color-coral:#ff9473;
  --color-gold:#ecda98;
  --color-crimson:#f37a0a;
  --color-off-black:#242424;
  --color-ink:#000000;
  --color-graphite:#4e4d4d;
  --color-smoke:#6d6b6a; /* darkened from #797776 for WCAG AA — see DESIGN.md Amendments */
  --color-ash:#cecac8;

  /* Typography — families (self-hosted substitutes, see DESIGN.md Amendments) */
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --font-serif:'Newsreader',ui-serif,Georgia,Cambria,'Times New Roman',Times,serif;
  --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Typography — scale */
  --text-caption:12px;    --tracking-caption:-0.4px;
  --text-body-sm:14px;    --tracking-body-sm:-0.28px;
  --text-body:16px;       --tracking-body:-0.4px;
  --text-label:18px;      --tracking-label:-0.4px;
  --text-body-lg:20px;
  --text-subheading:24px;
  --text-heading-sm:32px;
  --text-heading:40px;
  --text-heading-lg:48px;
  --text-display:80px;

  /* Spacing */
  --spacing-8:8px;
  --spacing-16:16px;
  --spacing-24:24px;
  --spacing-32:32px;
  --spacing-40:40px;
  --spacing-64:64px;
  --spacing-72:72px;
  --spacing-80:80px;
  --spacing-200:200px;
  --spacing-216:216px;

  /* Layout */
  --page-max-width:1432px;
  --section-gap:64px;
  --card-padding:40px;
  --element-gap:16px;

  /* Radius */
  --radius-cards:40px;
  --radius-buttons:100px;
  --radius-full:9999px;

  /* Shadows */
  --shadow-md:rgba(0,0,0,0.1) 0px 0px 10px 0px;
}

*,*::before,*::after{box-sizing:border-box}

html{overflow-x:hidden}

body{
  margin:0;
  overflow-x:hidden;
  background:var(--color-parchment);
  color:var(--color-off-black);
  font-family:var(--font-mono);
  font-size:var(--text-body);
  line-height:1.35;
  letter-spacing:var(--tracking-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-serif);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-0.02em;
  margin:0;
  text-wrap:balance;
}

p{margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--color-lake-blue);outline-offset:3px;border-radius:4px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;top:-100%;left:16px;z-index:20;
  background:var(--color-ink);color:var(--color-parchment);
  padding:12px 20px;border-radius:0 0 12px 12px;
  font-size:var(--text-body-sm);text-transform:uppercase;letter-spacing:0.04em;
  transition:top .18s ease;
}
.skip-link:focus{top:0}

.wrap{max-width:var(--page-max-width);margin:0 auto;padding:0 40px}
.section{padding-block:120px;position:relative}
.section + .section{border-top:1px solid var(--color-ash)}

/* ---------- shared type utilities ---------- */
.micro{
  font-size:var(--text-caption);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--color-smoke);
}
.lede{
  font-size:var(--text-body-lg);
  line-height:1.35;
  letter-spacing:-0.4px;
  color:var(--color-graphite);
}
/* Long-form body prose (About, case studies) — DESIGN.md Amendments D2.
   Mono stays for UI/nav/labels/tags; paragraphs over ~40 words use this. */
.prose{
  font-family:var(--font-sans);
  font-size:var(--text-body-lg);
  line-height:1.5;
  letter-spacing:-0.02em;
  color:var(--color-graphite);
}
.prose p + p{margin-top:20px}

/* ---------- announcement bar ---------- */
.announce{
  background:var(--color-ink);
  color:var(--color-parchment);
  min-height:40px;
  display:flex;align-items:center;
}
.announce .wrap{
  display:flex;align-items:center;gap:16px;
  width:100%;padding-block:8px;
}
.announce-text{font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm)}
.announce-pill{
  font-size:var(--text-caption);
  text-transform:uppercase;letter-spacing:0.06em;
  border:1px solid rgba(246,243,241,.6);
  border-radius:var(--radius-full);
  padding:5px 14px;
  margin-left:auto;
  transition:background .18s ease,border-color .18s ease;
}
.announce-pill:hover{background:rgba(246,243,241,.12);border-color:var(--color-parchment)}
.announce-close{
  background:none;border:0;color:inherit;cursor:pointer;
  font-family:inherit;font-size:16px;line-height:1;padding:12px;margin:-12px;
}

/* ---------- nav ---------- */
.nav{position:relative;z-index:3}
.nav .wrap{
  height:80px;display:flex;align-items:center;gap:40px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{
  width:11px;height:11px;border-radius:var(--radius-full);
  background:var(--color-off-black);display:block;
}
.brand .word{
  font-size:var(--text-label);letter-spacing:-0.022em;
  text-transform:lowercase;font-weight:500;
}
.nav-links{display:flex;gap:32px;margin-left:24px}
.nav-links a{
  font-size:var(--text-label);
  letter-spacing:-0.022em;
  text-transform:uppercase;
  color:var(--color-off-black);
  transition:color .18s ease;
}
.nav-links a:hover{color:var(--color-smoke)}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:12px}

/* ---------- mobile nav ---------- */
.nav-toggle{
  display:none;
  margin-left:auto;
  background:none;border:0;cursor:pointer;
  width:40px;height:40px;
  align-items:center;justify-content:center;
  color:var(--color-off-black);
}
.nav-toggle svg{width:22px;height:22px}
.mobile-nav{
  display:none;
  position:fixed;inset:0;z-index:10;
  background:var(--color-parchment);
  flex-direction:column;
}
.mobile-nav.open{display:flex}
.mobile-nav .wrap{
  height:80px;display:flex;align-items:center;
}
.mobile-nav-close{
  margin-left:auto;background:none;border:0;cursor:pointer;
  width:40px;height:40px;color:var(--color-off-black);
}
.mobile-nav-close svg{width:22px;height:22px}
.mobile-nav-links{
  display:flex;flex-direction:column;gap:8px;
  padding:16px 40px 40px;
}
.mobile-nav-links a{
  font-family:var(--font-serif);
  font-size:var(--text-heading-sm);
  letter-spacing:-0.64px;
  color:var(--color-off-black);
  padding-block:16px;
  border-bottom:1px solid var(--color-ash);
}
.mobile-nav-actions{
  margin-top:auto;
  padding:0 40px 40px;
  display:flex;flex-direction:column;gap:12px;
}
.mobile-nav-actions .btn{justify-content:center;width:100%}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);
  font-size:var(--text-body-sm);
  letter-spacing:0.02em;
  text-transform:uppercase;
  padding:16px 32px;
  border-radius:var(--radius-buttons);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.btn-blue{background:var(--color-lake-blue);color:#fff}
.btn-blue:hover{background:#1f45ab}
.btn-black{background:var(--color-off-black);color:var(--color-parchment)}
.btn-black:hover{background:#000}
.btn-ghost{background:transparent;border-color:var(--color-off-black);color:var(--color-off-black)}
.btn-ghost:hover{background:var(--color-off-black);color:var(--color-parchment)}
.btn-sm{padding:11px 22px}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--text-body-sm);
  text-transform:uppercase;letter-spacing:0.04em;
  color:var(--color-off-black);
}
.link-arrow .arr{transition:transform .18s ease}
.link-arrow:hover .arr{transform:translateX(4px)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:112px 128px;text-align:center}
.wash{position:absolute;border-radius:var(--radius-full);pointer-events:none;z-index:0}
.wash-a{
  width:620px;height:420px;top:-120px;left:calc(50% - 520px);
  background:linear-gradient(120deg,rgba(255,148,115,.8),rgba(160,181,235,.8));
  filter:blur(75px);opacity:.42;
}
.wash-b{
  width:520px;height:380px;top:40px;left:calc(50% + 60px);
  background:linear-gradient(200deg,rgba(160,181,235,.8),rgba(167,252,205,.8));
  filter:blur(75px);opacity:.38;
}
.hero .wrap{position:relative;z-index:1}
.hero .eyebrow{margin-bottom:32px;display:block}
.hero h1{
  font-size:var(--text-display);
  letter-spacing:-1.6px;
  max-width:15ch;
  margin:0 auto;
}
.hero .lede{max-width:62ch;margin:32px auto 0}
.hero-actions{display:flex;gap:16px;justify-content:center;margin-top:40px;flex-wrap:wrap}

/* ---------- node tags ---------- */
.tags{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:64px}
.tag{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--color-parchment);
  border:1px solid var(--color-ash);
  border-radius:var(--radius-full);
  padding:12px 20px;
  font-size:var(--text-body-sm);
  text-transform:uppercase;letter-spacing:0.03em;
  color:var(--color-off-black);
}
.tag .glyph{font-size:var(--text-caption);color:var(--color-smoke)}

/* ---------- stat strip ---------- */
.stats{display:flex;flex-wrap:wrap;gap:0;border-block:1px solid var(--color-ash)}
.stat{
  flex:1 1 220px;padding:32px 40px;
  border-left:1px solid var(--color-ash);
}
.stat:first-child{border-left:0;padding-left:0}
.stat .n{font-family:var(--font-serif);font-size:var(--text-heading);display:block;letter-spacing:-0.8px}
.stat .l{margin-top:12px;display:block}

/* ---------- interior page head (non-Home pages; Home keeps the unique 80px hero) ---------- */
.page-head{padding-block:80px 96px}
.page-head .eyebrow{margin-bottom:24px;display:block}
.page-head h1{font-size:var(--text-heading-lg);letter-spacing:-0.96px;max-width:22ch}
.page-head .lede{margin-top:24px;max-width:56ch}

/* ---------- section heads ---------- */
.sec-head{display:flex;align-items:flex-end;gap:40px;margin-bottom:64px;flex-wrap:wrap}
.sec-head h2{font-size:var(--text-heading-lg);letter-spacing:-0.96px;max-width:20ch}
.sec-head .side{margin-left:auto;padding-bottom:6px}

/* ---------- feature cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
  border:1px solid var(--color-ash);
  border-radius:var(--radius-cards);
  padding:var(--card-padding);
  background:transparent;
  display:flex;flex-direction:column;gap:20px;
}
.card .glyph{
  font-size:var(--text-body-lg);
  color:var(--color-smoke);
  letter-spacing:0;
}
.card h3{font-size:var(--text-subheading);letter-spacing:-0.48px}
.card p{color:var(--color-graphite);max-width:44ch}

/* ---------- pipeline diagram ---------- */
.pipe{
  position:relative;width:100%;max-width:1000px;margin:0 auto;
  aspect-ratio:1000/380;
}
.pipe svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pipe .glow{
  position:absolute;left:50%;top:50%;width:260px;height:260px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(167,252,205,.55) 0%,rgba(167,252,205,0) 68%);
  filter:blur(18px);pointer-events:none;
}
.node{
  position:absolute;transform:translateY(-50%);
  width:23%;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--color-parchment);
  border:1px solid var(--color-ash);
  border-radius:var(--radius-full);
  padding:12px 16px;
  font-size:var(--text-body-sm);
  text-transform:uppercase;letter-spacing:0.02em;
  white-space:nowrap;
}
.node .glyph{font-size:var(--text-caption);color:var(--color-smoke)}
.node.in{left:0}
.node.out{right:0}
.node.hub{
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:20%;
  background:var(--color-off-black);
  border-color:var(--color-off-black);
  color:var(--color-parchment);
  padding:16px;
}
.node.hub .glyph{color:var(--color-mint)}
.pipe-list{display:none}
.pipe-caption{
  margin:56px auto 0;max-width:62ch;text-align:center;
  color:var(--color-graphite);
}

/* ---------- work ---------- */
.work-hero{
  background:var(--color-periwinkle-mist);
  border-radius:var(--radius-cards);
  padding:var(--card-padding);
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  margin-bottom:24px;
}
.work-hero .body{padding:24px}
.work-hero h3{font-size:var(--text-heading);letter-spacing:-0.8px;margin-top:16px}
.work-hero p{color:#3a4257;margin-top:20px;max-width:42ch}
.work-hero .kicker{color:#3f4a66}
.work-hero .actions{margin-top:32px}
.illo{
  position:relative;border-radius:24px;overflow:hidden;
  aspect-ratio:4/3;background:rgba(255,255,255,.5);
}
.illo span{position:absolute;border-radius:var(--radius-full);filter:blur(28px)}
.illo .b1{width:62%;height:70%;left:6%;top:8%;background:var(--color-coral);opacity:.85}
.illo .b2{width:58%;height:66%;left:36%;top:14%;background:var(--color-sky-blue);opacity:.85}
.illo .b3{width:46%;height:52%;left:22%;top:42%;background:var(--color-mint);opacity:.8}
.illo .b4{width:30%;height:34%;left:60%;top:52%;background:var(--color-gold);opacity:.7}
.illo .plate{
  position:absolute;inset:auto 24px 24px 24px;
  background:rgba(246,243,241,.82);
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px;padding:20px;filter:none;
  font-size:var(--text-caption);text-transform:uppercase;letter-spacing:0.06em;
  color:var(--color-graphite);
  display:flex;justify-content:space-between;gap:16px;
}
.illo .plate b{font-family:var(--font-serif);font-size:20px;font-weight:400;letter-spacing:-0.4px;text-transform:none;color:var(--color-off-black);display:block;margin-top:6px}

.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.work-grid-3{grid-template-columns:repeat(3,1fr)}
.work-card{
  border:1px solid var(--color-ash);
  border-radius:var(--radius-cards);
  padding:var(--card-padding);
  display:flex;flex-direction:column;gap:16px;
  transition:background .2s ease;
}
.work-card:hover{background:rgba(36,36,36,.03)}
.work-card h3{font-size:var(--text-subheading);letter-spacing:-0.48px}
.work-card p{color:var(--color-graphite);max-width:46ch;flex:1}
.work-card .foot{display:flex;align-items:center;gap:12px;margin-top:8px}
.live{display:inline-flex;align-items:center;gap:7px}
.live i{width:7px;height:7px;border-radius:var(--radius-full);background:#2f9e5f;display:block}
.dev{display:inline-flex;align-items:center;gap:7px}
.dev i{width:7px;height:7px;border-radius:var(--radius-full);background:var(--color-crimson);display:block}

/* ---------- faq ---------- */
.faq{max-width:none}
.faq details{border-bottom:1px solid var(--color-ash)}
.faq summary{
  list-style:none;cursor:pointer;
  padding-block:40px;
  display:flex;align-items:center;gap:24px;
  font-family:var(--font-serif);
  font-size:var(--text-subheading);
  letter-spacing:-0.48px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{
  margin-left:auto;font-family:var(--font-mono);font-size:var(--text-body-lg);
  transition:transform .22s ease;
}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq .ans{padding-bottom:40px;color:var(--color-graphite);max-width:62ch}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--color-ash);padding-block:120px 40px}
.foot-top{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:start}
.foot-top h2{font-size:var(--text-heading-lg);letter-spacing:-0.96px;max-width:16ch}
.foot-top p{color:var(--color-graphite);margin-top:24px;max-width:48ch}
.foot-top .actions{margin-top:40px}
.f-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.f-col{display:flex;flex-direction:column;gap:14px}
.f-col .h{margin-bottom:6px}
.f-col a{font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm);color:var(--color-graphite)}
.f-col a:hover{color:var(--color-off-black)}
.foot-bottom{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:96px;padding-top:32px;border-top:1px solid var(--color-ash);
}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:64px;align-items:start}
.channel-list{display:flex;flex-direction:column}
.channel{
  display:flex;align-items:center;gap:16px;
  padding-block:20px;
  border-bottom:1px solid var(--color-ash);
}
.channel:first-child{padding-top:0}
a.channel{transition:opacity .18s ease}
a.channel:hover{opacity:.65}
.ch-icon{
  width:40px;height:40px;flex:0 0 40px;
  border:1px solid var(--color-ash);border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;
  color:var(--color-off-black);
}
.ch-icon svg{width:18px;height:18px}
.ch-k{display:block;font-size:var(--text-caption);text-transform:uppercase;letter-spacing:0.06em;color:var(--color-smoke)}
.ch-v{display:block;margin-top:2px;font-size:var(--text-body);color:var(--color-off-black);word-break:break-word}
.ch-arr{margin-left:auto;color:var(--color-off-black)}
.contact-note{margin-top:24px;color:var(--color-graphite);font-size:var(--text-body-sm);max-width:44ch}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px}
.helper{font-size:var(--text-caption);color:var(--color-smoke)}

/* ---------- form fields ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label{
  font-size:var(--text-body-sm);
  text-transform:uppercase;letter-spacing:0.04em;
  color:var(--color-off-black);
}
.field .hint{font-size:var(--text-caption);color:var(--color-smoke)}
.field input,.field textarea,.field select{
  font-family:var(--font-mono);
  font-size:var(--text-body);
  letter-spacing:var(--tracking-body);
  color:var(--color-off-black);
  background:var(--color-parchment);
  border:1px solid var(--color-smoke);
  border-radius:16px;
  padding:14px 18px;
  transition:border-color .18s ease;
  width:100%;
}
/* Resting border is Smoke, not Ash — Ash (#cecac8) is ~1.5:1 on Parchment, well under
   the 3:1 WCAG guideline for UI-component boundaries. Smoke passes at ~4:1. */
.field textarea{resize:vertical;min-height:140px}
.field input::placeholder,.field textarea::placeholder{color:var(--color-smoke)}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--color-off-black)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--color-lake-blue);
  box-shadow:0 0 0 2px rgba(43,89,209,.22);
}
/* Crimson (#f37a0a) is ~2.5:1 on Parchment — fails WCAG AA for text/UI. This darker
   shade is the error-state equivalent of the success message's #1e6b41 below: a
   token deviation made specifically for on-Parchment text contrast (~6:1). */
.field.error input,.field.error textarea{border-color:#a13a17}
.field .error-msg{display:none;font-size:var(--text-caption);color:#a13a17}
.field.error .error-msg{display:block}
.field.success input,.field.success textarea{border-color:#2f9e5f}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.form-note{
  border:1px solid #2f9e5f;background:rgba(47,158,95,.08);
  border-radius:16px;padding:16px 20px;
  color:#1e6b41;font-size:var(--text-body-sm);
  display:none;
}
.form-note.show{display:block}
.form-note.error{
  border-color:#c94a3f;background:rgba(201,74,63,.08);color:#a13a30;
}

/* ---------- 404 ---------- */
.error-hero{text-align:center;padding-block:160px}
.error-hero .code{font-family:var(--font-serif);font-size:var(--text-display);letter-spacing:-1.6px}
.error-hero p{margin-top:24px}
.error-hero .actions{margin-top:40px;display:flex;gap:16px;justify-content:center}

/* ---------- photo treatment (About headshot) — DESIGN.md Amendments D3 ---------- */
.photo{
  border-radius:40px;
  overflow:hidden;
  filter:grayscale(0.85) saturate(0.4);
  background:var(--color-parchment);
}
.photo img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- about: portrait + narrative ---------- */
.about-grid{display:grid;grid-template-columns:0.9fr 1.4fr;gap:64px;align-items:start}
.about-portrait .photo{aspect-ratio:4/5}
.about-body .lead{
  font-family:var(--font-sans);
  font-size:var(--text-subheading);
  line-height:1.4;
  letter-spacing:-0.02em;
  color:var(--color-off-black);
}
.about-body .prose{margin-top:24px}

/* ---------- skills grid ---------- */
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px}
.skill-group h3{
  font-family:var(--font-mono);font-weight:500;
  font-size:var(--text-caption);text-transform:uppercase;letter-spacing:0.06em;
  color:var(--color-smoke);margin:0 0 16px;
}
.skill-group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.skill-group li{font-size:var(--text-body);color:var(--color-graphite)}

/* ---------- timeline ---------- */
.timeline{display:flex;flex-direction:column}
.tl-item{display:grid;grid-template-columns:160px 1fr;gap:32px;padding-block:32px;border-bottom:1px solid var(--color-ash)}
.tl-item:first-child{padding-top:0}
.tl-item:last-child{border-bottom:0;padding-bottom:0}
.tl-year{font-size:var(--text-body-sm);color:var(--color-smoke);text-transform:uppercase;letter-spacing:0.03em}
.tl-item h3{font-size:var(--text-subheading);letter-spacing:-0.48px;margin-bottom:4px}
.tl-co{font-size:var(--text-body-sm);color:var(--color-graphite);margin-bottom:12px}
.tl-item p{color:var(--color-graphite);max-width:56ch}

/* ---------- credentials ---------- */
.cred-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cred{border:1px solid var(--color-ash);border-radius:var(--radius-cards);padding:32px}
.cred-k{font-size:var(--text-caption);text-transform:uppercase;letter-spacing:0.06em;color:var(--color-smoke);margin-bottom:12px}
.cred-v{font-family:var(--font-serif);font-size:var(--text-subheading);letter-spacing:-0.48px;color:var(--color-off-black)}
.cred-sub{margin-top:8px;font-size:var(--text-body-sm);color:var(--color-graphite)}

/* ---------- article / long-form layout ---------- */
.article-head{max-width:48rem;margin:0 auto;text-align:center}
.article-head .micro{margin-bottom:24px}
.article-head h1{font-size:var(--text-heading-lg);letter-spacing:-0.96px}
.article-body{max-width:42rem;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.article-body h2{font-size:var(--text-heading-sm);letter-spacing:-0.64px;margin-top:16px}
.article-body h3{font-size:var(--text-subheading);letter-spacing:-0.48px;margin-top:8px}
.pull-quote{
  font-family:var(--font-serif);
  font-size:var(--text-heading-sm);
  letter-spacing:-0.64px;
  line-height:1.3;
  border-left:2px solid var(--color-off-black);
  padding-left:32px;
  margin-block:8px;
}
.metric-row{display:flex;flex-wrap:wrap;gap:0;border-block:1px solid var(--color-ash)}
.metric{flex:1 1 160px;padding:24px 32px;border-left:1px solid var(--color-ash)}
.metric:first-child{border-left:0;padding-left:0}
.metric .n{font-family:var(--font-serif);font-size:var(--text-heading-sm);display:block;letter-spacing:-0.64px}
.metric .l{margin-top:8px;display:block}
.figure{border-radius:24px;overflow:hidden;border:1px solid var(--color-ash)}
.figure img{display:block;width:100%}
.figure figcaption{padding:16px 20px;font-size:var(--text-body-sm);color:var(--color-smoke)}
.article-body code{
  font-family:var(--font-mono);font-size:0.9em;
  background:var(--color-periwinkle-mist);
  padding:2px 6px;border-radius:6px;
}

/* ---------- case study article ---------- */
.cs-back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--text-body-sm);text-transform:uppercase;letter-spacing:0.04em;
  color:var(--color-smoke);margin-bottom:40px;transition:color .18s ease;
}
.cs-back:hover{color:var(--color-off-black)}
.cs-meta-row{display:flex;flex-wrap:wrap;gap:0;margin-top:40px}
.cs-meta{flex:1 1 180px;padding:16px 24px;border-left:1px solid var(--color-ash)}
.cs-meta:first-child{padding-left:0;border-left:0}
.cs-meta .k{display:block;font-size:var(--text-caption);text-transform:uppercase;letter-spacing:0.06em;color:var(--color-smoke)}
.cs-meta .v{display:block;margin-top:6px;font-size:var(--text-body-sm);color:var(--color-off-black)}
.cs-shot-placeholder{
  border:1px dashed var(--color-ash);border-radius:var(--radius-cards);
  aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--color-smoke);text-align:center;
}
.cs-block{display:grid;grid-template-columns:200px 1fr;gap:40px;padding-block:48px;border-bottom:1px solid var(--color-ash)}
.cs-block:first-child{padding-top:0}
.cs-block:last-child{border-bottom:0;padding-bottom:0}
.cs-label{
  font-family:var(--font-mono);font-weight:400;margin:0;
  font-size:var(--text-caption);text-transform:uppercase;letter-spacing:0.06em;
  color:var(--color-smoke);
}
.cs-content{max-width:42rem}
.cs-content.wide{max-width:52rem}
.built-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.built-list li{font-family:var(--font-sans);font-size:var(--text-body-lg);line-height:1.5;letter-spacing:-0.02em;color:var(--color-graphite)}
.built-list strong{color:var(--color-off-black);font-weight:500}
.cs-next{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-block:56px}
.cs-next .eyebrow-label{display:block;margin-bottom:8px}
.cs-next-title{font-size:var(--text-heading-sm);letter-spacing:-0.64px;color:var(--color-off-black)}

/* ---------- motion ---------- */
.rise{animation:rise .6s cubic-bezier(.2,.7,.3,1) both}
.rise[data-d="1"]{animation-delay:.06s}
.rise[data-d="2"]{animation-delay:.12s}
.rise[data-d="3"]{animation-delay:.18s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- responsive ----------
   Blocks ordered widest → narrowest (1100 / 900 / 820 / 640) so a narrower
   breakpoint's rules always win over a wider one for any shared selector,
   matching the max-width cascade instead of relying on accidental non-overlap. */
@media (max-width:1100px){
  .cards{grid-template-columns:1fr}
  .work-hero{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr;gap:56px}
  .form-row{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .contact-grid{grid-template-columns:1fr;gap:48px}
  .cs-block{grid-template-columns:1fr;gap:16px}
  .about-portrait .photo{max-width:320px;aspect-ratio:1/1}
  .skills-grid{grid-template-columns:repeat(2,1fr)}
  .cred-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .pipe{aspect-ratio:auto;max-width:400px}
  .pipe svg,.pipe .glow{display:none}
  .pipe .node{position:static;transform:none;width:100%;margin-bottom:8px;padding:10px 16px}
  .pipe-list{display:block}
  .pipe-list.rail{
    text-align:center;color:var(--color-smoke);
    font-size:var(--text-body-lg);line-height:1;margin:4px 0 16px;
  }
}
@media (max-width:820px){
  .wrap{padding:0 24px}
  .section{padding-block:80px}
  .nav-links{display:none}
  .nav-actions{display:none}
  .nav-toggle{display:flex}
  .announce .wrap{flex-wrap:wrap;row-gap:8px}
  .announce-text{flex:1 1 100%}
  .announce-pill{margin-left:0}
  .hero{padding-block:72px 88px}
  .hero h1{font-size:48px;letter-spacing:-0.96px;max-width:none}
  .sec-head h2,.foot-top h2,.page-head h1{font-size:var(--text-heading-sm);letter-spacing:-0.64px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px}
  .sec-head .side{margin-left:0;padding-bottom:0}
  .page-head{padding-block:56px 64px}
  .faq summary{font-size:var(--text-body-lg);padding-block:28px}
  .stat{flex:1 1 100%;border-left:0;padding:24px 0;border-top:1px solid var(--color-ash)}
  .stat:first-child{border-top:0}
  .work-hero .body{padding:0}
  .metric{flex:1 1 100%;border-left:0;padding:16px 0;border-top:1px solid var(--color-ash)}
  .metric:first-child{border-top:0}
  .cs-meta{flex:1 1 100%;border-left:0;padding:12px 0;border-top:1px solid var(--color-ash)}
  .cs-meta:first-child{border-top:0}
  .cs-next-title{font-size:24px}
  .site-footer{padding-block:80px 40px}
  .foot-bottom{margin-top:64px}
}
@media (max-width:640px){
  .tl-item{grid-template-columns:1fr;gap:8px}
  .card,.work-card,.work-hero{padding:24px;border-radius:28px}
  .illo{aspect-ratio:8/7}
  .illo .plate{flex-direction:column;gap:10px}
}