/* =============================================================================
   WESLEY HARDING — PORTFOLIO
   Dark editorial / magazine. Fraunces (display voice) · Geist (quiet body
   + metadata). Warm ink-black canvas, one clay accent.
   Hand-coded. No framework, no build step.
   ========================================================================== */

/* ---- 1. TOKENS ---------------------------------------------------------- */
:root {
  /* warm ink canvas */
  --void:     #100e0c;
  --void-2:   #0a0908;
  --panel:    #16120d;
  --panel-2:  #1c1711;
  --panel-hi: #221b13;

  /* warm neutrals */
  --hi:    #f1ece2;   /* bone — display & headings */
  --mid:   #c6bdae;   /* warm body */
  --low:   #8a8074;   /* captions / metadata */
  --faint: #4c453b;   /* folios / dim rules */

  /* warm hairlines */
  --line:   rgba(228,216,196,.085);
  --line-2: rgba(228,216,196,.15);
  --line-3: rgba(228,216,196,.26);

  /* single clay accent (chrome). earth00 overrides to its real amber. */
  --accent:        #ce5f44;
  --accent-bright: #e88564;
  --accent-deep:   #3c1d14;
  --accent-soft:   rgba(206,95,68,.12);
  --accent-glow:   rgba(206,95,68,.22);
  /* legacy aliases (components still reference --blue*) */
  --blue: var(--accent); --blue-bright: var(--accent-bright);
  --blue-deep: var(--accent-deep); --blue-soft: var(--accent-soft); --blue-glow: var(--accent-glow);

  /* type */
  --sans:  "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  /* metadata voice — retired the monospace; Geist carries it now */
  --mono:  "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* metrics */
  --maxw: 1280px;
  --gutter: clamp(22px, 6vw, 110px);

  /* fluid type — extreme contrast: huge serif display vs quiet 17px body */
  --fs-display: clamp(3.3rem, 11.5vw, 9.4rem);
  --fs-h2:      clamp(2.1rem, 5.4vw, 4.4rem);
  --fs-claim:   clamp(1.5rem, 3.1vw, 2.7rem);
  --fs-lead:    clamp(1.08rem, 1.45vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-meta:    0.72rem;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- 2. RESET / BASE ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  background: var(--void);
  color: var(--mid);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, canvas, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--accent); color: #14100d; }

/* ---- 3. ATMOSPHERE — paper grain only (no grid, no glow blooms) -------- */
.fx-grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- 4. LAYOUT PRIMITIVES ---------------------------------------------- */
.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
main { position: relative; z-index: 2; }
.section { padding-block: clamp(84px, 13vh, 184px); position: relative; }
.section--dark { background: var(--void-2); }
.grid { display: grid; gap: clamp(28px, 4vw, 70px); }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.measure { max-width: 64ch; }
.measure-sm { max-width: 48ch; }

/* ---- 5. TYPE ROLES ------------------------------------------------------ */
/* Fraunces — the display/editorial voice (large only) */
.display {
  font-family: var(--serif); font-optical-sizing: auto;
  font-size: var(--fs-display); font-weight: 380; line-height: 0.94;
  letter-spacing: -0.018em; color: var(--hi);
}
.display em { font-style: italic; }
h2.title {
  font-family: var(--serif); font-optical-sizing: auto;
  font-size: var(--fs-h2); font-weight: 400; line-height: 1.0;
  letter-spacing: -0.014em; color: var(--hi);
}
.claim {
  font-family: var(--serif); font-optical-sizing: auto;
  font-size: var(--fs-claim); font-weight: 360; line-height: 1.15;
  letter-spacing: -0.01em; color: var(--hi); max-width: 22ch;
}
.claim em { font-style: italic; color: var(--accent); }
.pullquote {
  font-family: var(--serif); font-optical-sizing: auto;
  font-size: clamp(1.6rem, 3.4vw, 3rem); font-weight: 340; font-style: italic;
  line-height: 1.16; letter-spacing: -0.01em; color: var(--hi); max-width: 24ch;
}

/* Geist — quiet workhorse for all body */
.lead { font-size: var(--fs-lead); line-height: 1.62; color: var(--mid); max-width: 64ch; }
.lead strong, .lead b, .body strong { color: var(--hi); font-weight: 500; }
.body { color: var(--mid); max-width: 66ch; }
.body p + p { margin-top: 1.05em; }
.dim { color: var(--low); }
.hi { color: var(--hi); }
.accent { color: var(--accent); }
code { font-family: var(--mono); font-size: .88em; color: var(--accent); }

/* drop-cap for a feature's opening paragraph */
.dropcap::first-letter {
  font-family: var(--serif); font-weight: 460; float: left;
  font-size: 3.5em; line-height: 0.7; padding: 7px 14px 0 0; color: var(--hi);
}

/* Fragment Mono — METADATA ONLY: kickers, captions, chips, units, datelines */
.mono { font-family: var(--mono); font-size: var(--fs-meta); font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--low); }
.kicker { font-family: var(--mono); font-size: var(--fs-meta); font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--low); }
.kicker--accent { color: var(--accent); }
.caption { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--low); line-height: 1.6; }

/* ---- 6. TOPBAR — generous at the top of the page, compacts on scroll --- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 30px var(--gutter);
  transition: background .4s var(--ease), border-color .4s var(--ease), padding .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.topbar.scrolled { padding-block: 12px; background: rgba(16,14,12,.78); backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%); border-bottom: 1px solid var(--line); }
.brand { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; letter-spacing: -.01em; color: var(--hi);
  transition: font-size .45s var(--ease); }
.topbar.scrolled .brand { font-size: 1.12rem; }
.brand .dot { color: var(--accent); }
.navlinks { display: flex; gap: 34px; align-items: center; }
.navlinks a { font-size: .92rem; color: var(--low); transition: color .22s; position: relative; }
.navlinks a:hover { color: var(--hi); }
.navlinks a::after { content:''; position:absolute; left:0; bottom:-4px; width:100%; height:1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.navlinks a:hover::after { transform: scaleX(1); }
.avail { font-size: .92rem; color: var(--low); }
.avail b { color: var(--mid); font-weight: 500; }

/* ---- 7. HERO ----------------------------------------------------------- */
.hero { position: relative; padding-top: clamp(140px, 22vh, 260px); padding-bottom: clamp(48px, 9vh, 120px); overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(30px, 5vw, 90px); align-items: center; }
.hero__kicker { display: block; margin-bottom: 30px; }
.hero__portrait { width: clamp(210px, 25vw, 330px); margin: 0; padding: 8px;
  border: 1px solid var(--line-2); border-radius: 26px;
  background: linear-gradient(160deg, var(--panel-hi), var(--panel));
  box-shadow: 0 32px 60px -34px rgba(0,0,0,.9); position: relative; z-index: 3; }
.hero__portrait img { width: 100%; border-radius: 19px; }
.hero__name { margin: 0 0 34px; position: relative; z-index: 3; }
.hero__name .ln { display: block; }
.hero__name em { font-style: italic; color: var(--accent); }
.hero__statement { max-width: 30ch; position: relative; z-index: 3; }
.hero__statement .claim { color: var(--hi); }
.hero__sub { margin-top: 30px; max-width: 54ch; position: relative; z-index: 3; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 44px; align-items: center; position: relative; z-index: 3; }

/* hero load choreography — flash the name in, type the claim, then the CTAs.
   Everything is gated on .js so the page reads fully without JavaScript. */
@keyframes nameFlash {
  0%   { opacity: 0; }
  9%   { opacity: 1; filter: brightness(2.4); text-shadow: 0 0 46px rgba(241,236,226,.6); }
  22%  { opacity: .1;  filter: none; text-shadow: none; }
  34%  { opacity: 1;  filter: brightness(1.8); text-shadow: 0 0 30px rgba(241,236,226,.4); }
  50%  { opacity: .4; filter: none; }
  68%  { opacity: 1;  filter: brightness(1.2); }
  100% { opacity: 1;  filter: none; text-shadow: none; }
}
.js [data-hero] .hero__name .ln { opacity: 0; }
.js [data-hero].go .hero__name .ln { animation: nameFlash .9s var(--ease) both; animation-delay: var(--fd, 0s); }
.js [data-hero] .hero__statement { opacity: 0; transition: opacity .2s; }
.js [data-hero].typing .hero__statement { opacity: 1; }
.type-caret { display: inline-block; width: .52em; height: 1em; margin-left: 2px; vertical-align: -0.08em;
  background: var(--accent); animation: caretBlink .8s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }
.type-caret.done { animation: caretBlink .8s steps(1) 2, caretOut .4s 1.7s forwards; }
@keyframes caretOut { to { opacity: 0; } }
.js [data-hero] .hero-slide { opacity: 0; transform: translateX(72px);
  transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-hero] .hero-fade { opacity: 0; transition: opacity .9s var(--ease) .25s; }
.js [data-hero] .hero-fade--2 { transition-delay: .55s; }
.js [data-hero] .hero__portrait { opacity: 0; transform: translateX(34px);
  transition: opacity 1s var(--ease) .5s, transform 1s var(--ease) .5s; }
.js [data-hero].go .hero__portrait { opacity: 1; transform: none; }
.js [data-hero].cta .hero-slide { opacity: 1; transform: none; }
.js [data-hero].cta .hero-fade, .js [data-hero].cta .hero-fade--2 { opacity: 1; }

/* ---- 8. BUTTONS / LINKS ------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 9px; font-size: .94rem;
  padding: 12px 22px; border: 1px solid var(--line-2); border-radius: 2px; color: var(--hi);
  transition: border-color .25s, background .25s, transform .25s; }
.btn:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #14100d; font-weight: 500; }
.btn--primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: #14100d; }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn--ghost { border: none; padding-inline: 0; color: var(--mid); }
.btn--ghost:hover { background: none; color: var(--accent); transform: none; }
.textlink { color: var(--accent); border-bottom: 1px solid var(--accent-deep); transition: border-color .2s, color .2s; }
.textlink:hover { color: var(--accent-bright); border-color: var(--accent); }

/* ---- 9. RUNNING HEAD (quiet section opener) ---------------------------- */
.runhead { display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding-bottom: 16px; margin-bottom: clamp(40px, 6vw, 84px); border-bottom: 1px solid var(--line); }
.runhead__idx { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--faint); }

/* ---- 10. CAPABILITY LINE (replaces stats/toolkit wall) ----------------- */
.capline { font-family: var(--serif); font-optical-sizing: auto; font-weight: 360;
  font-size: clamp(1.4rem, 2.8vw, 2.3rem); line-height: 1.25; letter-spacing: -.01em; color: var(--hi); max-width: 26ch; }
.capline em { font-style: italic; color: var(--accent); }

/* ---- 11. INDEX / TABLE OF CONTENTS ------------------------------------- */
.toc { border-top: 1px solid var(--line-2); }
.toc__row { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: clamp(16px,3vw,46px);
  align-items: baseline; padding: clamp(24px,3.2vw,40px) 0; border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease); }
.toc__row:hover { background: linear-gradient(90deg, var(--accent-soft), transparent 55%); }
.toc__folio { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: var(--accent); }
.toc__title { font-family: var(--serif); font-size: clamp(1.6rem,3.4vw,2.8rem); font-weight: 400;
  letter-spacing: -.01em; color: var(--hi); line-height: 1.05; transition: transform .3s var(--ease); }
.toc__row:hover .toc__title { transform: translateX(8px); }
.toc__claim { color: var(--mid); max-width: 34ch; font-size: .98rem; }
.toc__meta { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--low); text-align: right; white-space: nowrap; }

/* ---- 12. FEATURE (case study) scaffolding ------------------------------ */
.feature__head { display: flex; flex-direction: column; gap: 18px; }
.dateline { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--low); }
.feature__title { margin-top: 4px; }
.stack-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { font-family: var(--mono); font-size: .66rem; letter-spacing: .05em; color: var(--low);
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 2px; }
.repo-link { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: .06em; color: var(--accent); }
.repo-link:hover { color: var(--accent-bright); }

/* section sub-label inside a feature */
.beat { margin-top: clamp(56px, 7vw, 100px); }
.beat__k { display: block; margin-bottom: 22px; }

/* ---- 13. ARCHITECTURE DIAGRAM (calm, monochrome) ----------------------- */
.diagram { border: 1px solid var(--line); border-radius: 3px; background: var(--panel); padding: clamp(24px,3vw,40px); }
.flow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
.flow__node { position: relative; padding-top: 30px; padding-right: 18px; }
.flow__node::before { content:''; position:absolute; top:5px; left:0; right:0; height:1px; background: var(--line-2); }
.flow__node:last-child::before { right: 42%; }
.flow__node::after { content:''; position:absolute; top:1px; left:0; width:8px; height:8px; border-radius:50%;
  background: var(--accent); }
.flow__n { font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; color: var(--accent); }
.flow__t { font-size: 1rem; font-weight: 500; color: var(--hi); margin: 9px 0 7px; }
.flow__d { font-family: var(--mono); font-size: .6rem; letter-spacing: .04em; line-height: 1.7; color: var(--low); text-transform: uppercase; }
.diagram__cap { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---- 14. "THE HARD PART" list ------------------------------------------ */
.hard { display: grid; gap: clamp(24px,3vw,44px); }
.hard__item { border-top: 1px solid var(--line-2); padding-top: 22px; }
.hard__n { font-family: var(--serif); font-size: 1.4rem; font-style: italic; color: var(--faint); }
.hard__t { font-size: 1.12rem; font-weight: 500; color: var(--hi); margin: 12px 0 10px; letter-spacing: -.01em; }
.hard__d { font-size: .98rem; color: var(--mid); }

/* ---- 15. KEY FIGURES (editorial, not KPI tiles) ------------------------ */
.figures { display: flex; flex-wrap: wrap; gap: clamp(30px,5vw,84px); align-items: flex-end; }
.figure-n { display: flex; flex-direction: column; gap: 10px; }
.figure-n__n { font-family: var(--serif); font-optical-sizing: auto; font-weight: 360;
  font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: .9; letter-spacing: -.02em; color: var(--hi);
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 4px; }
.figure-n__n .u { font-family: var(--mono); font-size: .26em; letter-spacing: .04em; color: var(--accent); text-transform: uppercase; }
.figure-n__l { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--low); line-height: 1.5; max-width: 22ch; }

/* ---- 16. WHAT'S BUILT / WHAT'S NEXT ------------------------------------ */
.tradeoffs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,60px); border-top: 1px solid var(--line-2); padding-top: 30px; }
.tradeoffs__col h4 { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--low); margin-bottom: 16px; }
.tradeoffs__col ul { list-style: none; display: grid; gap: 11px; }
.tradeoffs__col li { position: relative; padding-left: 20px; font-size: .96rem; color: var(--mid); }
.tradeoffs__col li::before { content:'—'; position:absolute; left:0; color: var(--accent); }
.tradeoffs__col--next li::before { content:'→'; }

/* ---- 17. MULTILINGUAL SPECIMEN (earth00) ------------------------------- */
.specimen { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: clamp(30px,5vw,64px) 0; }
.specimen__row { font-family: var(--serif); font-weight: 360; font-size: clamp(2rem,5vw,3.6rem); line-height: 1.2; color: var(--hi); letter-spacing: -.01em; }
.specimen__arrow { font-family: var(--mono); font-size: .8rem; letter-spacing: .2em; color: var(--accent); margin: 6px 0; }
.specimen__out { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.2rem,5.5vw,4rem); color: var(--accent); }
.specimen__cap { margin-top: 14px; }

/* ---- 18. FIGURE (captioned image) -------------------------------------- */
.figure { position: relative; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: var(--panel); }
.figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.figcap { margin-top: 12px; }
.figcap b { color: var(--mid); font-weight: 500; }
.imgrid { display: grid; gap: 14px; }
.imgrid--wtf { grid-template-columns: 1.45fr 1fr; grid-template-rows: 1fr 1fr; }
.imgrid--wtf .figure:first-child { grid-row: 1 / 3; }

/* ---- 19. PHONE FRAMES (warm, no glow) ---------------------------------- */
.phones { display: flex; gap: clamp(16px,2.5vw,36px); align-items: flex-start; flex-wrap: wrap; }
.phone { width: clamp(150px,20vw,210px); border: 1px solid var(--line-2); border-radius: 22px; padding: 7px;
  background: linear-gradient(160deg, var(--panel-hi), var(--panel)); box-shadow: 0 32px 60px -34px rgba(0,0,0,.9); }
.phone img { border-radius: 15px; width: 100%; }
.phone--lift { transform: translateY(-26px); }

/* ---- 20. SPEC ROWS (capabilities appendix) ----------------------------- */
.spec { border-top: 1px solid var(--line-2); }
.spec__row { display: grid; grid-template-columns: minmax(150px,1fr) 2.6fr; gap: clamp(16px,3vw,52px);
  padding: 22px 0; border-bottom: 1px solid var(--line); transition: background .25s; }
.spec__row:hover { background: linear-gradient(90deg, var(--accent-soft), transparent 55%); }
.spec__k { font-family: var(--serif); font-size: 1.1rem; color: var(--hi); }
.spec__v { color: var(--mid); font-size: .98rem; }

/* ---- 21. TIMELINE (notes) ---------------------------------------------- */
.tl__item { position: relative; padding-left: 30px; padding-bottom: 40px; border-left: 1px solid var(--line-2); }
.tl__item:last-child { padding-bottom: 0; }
.tl__item::before { content:''; position:absolute; left:-5px; top:6px; width:9px; height:9px; border-radius:50%;
  background: var(--void); border: 1px solid var(--accent); }
.tl__when { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--low); }
.tl__t { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; color: var(--hi); margin: 10px 0 10px; letter-spacing: -.01em; }
.tl__d { font-size: .98rem; color: var(--mid); max-width: 64ch; }

/* ---- 22. CONTACT / COLOPHON -------------------------------------------- */
.contact__big { font-family: var(--serif); font-optical-sizing: auto; font-size: clamp(2.2rem,5.4vw,4.2rem);
  font-weight: 360; line-height: 1.02; letter-spacing: -.014em; color: var(--hi); max-width: 15ch; }
.contact__big em { font-style: italic; color: var(--accent); }
.contact-list { border-top: 1px solid var(--line-2); }
.contact-list a, .contact-list .ci { display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 2px; border-bottom: 1px solid var(--line); font-size: 1rem; color: var(--mid);
  transition: color .2s, padding .25s; }
.contact-list a:hover { color: var(--hi); padding-left: 12px; }
.contact-list .ci__k { font-family: var(--mono); color: var(--low); text-transform: uppercase; letter-spacing: .12em; font-size: .64rem; }
.contact-list a .arr { color: var(--accent); }
.footer { border-top: 1px solid var(--line); padding-block: 36px; }
.footer__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; align-items: center;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.footer__row a { color: var(--low); transition: color .2s; }
.footer__row a:hover { color: var(--accent); }

/* ---- 23. PROJECT WORDMARKS / BRAND ------------------------------------- */
.wtf-lines { width: clamp(210px, 32vw, 420px); opacity: .94; filter: invert(1) brightness(0.94); }
.e00-mark { width: clamp(84px, 11vw, 140px); height: auto;
  filter: drop-shadow(0 0 26px rgba(255,160,40,.28)); }

/* ---- 24. EARTH00 — AMBER, WIRE-SERVICE REGISTER ------------------------ */
.s-earth00 {
  --accent: #f6a23a; --accent-bright: #ffce7a; --accent-deep: #4a2f0e;
  --accent-soft: rgba(255,160,40,.10); --accent-glow: rgba(255,160,40,.30);
  --blue: var(--accent); --blue-bright: var(--accent-bright); --blue-deep: var(--accent-deep);
  --blue-soft: var(--accent-soft); --blue-glow: var(--accent-glow);
  --line: rgba(230,180,120,.09); --line-2: rgba(230,180,120,.16); --line-3: rgba(230,180,120,.28);
  background: radial-gradient(120% 90% at 50% 0%, #0f0b06 0%, #000 74%);
}
.s-earth00 ::selection { background: #f6a23a; color: #140d04; }

/* ---- 24b. UNDER THE HOOD — recessed, collapsible technical detail ------ */
.uth { margin-top: 30px; border: 1px solid var(--line); border-radius: 3px;
  background: rgba(0,0,0,.24); overflow: hidden; }
.uth > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 15px 20px; font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: .14em;
  text-transform: uppercase; color: var(--low); transition: color .2s; }
.uth > summary:hover { color: var(--mid); }
.uth > summary::-webkit-details-marker { display: none; }
.uth > summary::after { content: 'show +'; font-family: var(--mono); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); }
.uth[open] > summary::after { content: 'hide \2013'; }
.uth__body { padding: 4px 20px 22px; display: grid; gap: 16px; }
.uth__body p, .uth__body li, .uth__body .hard__d, .uth__body .spec__v { font-size: .9rem; color: var(--low); line-height: 1.62; }
.uth__body .hard__t, .uth__body .spec__k, .uth__body b { color: var(--mid); }
.uth__row { display: grid; grid-template-columns: minmax(120px,1fr) 2.4fr; gap: clamp(12px,2.5vw,36px);
  padding: 12px 0; border-top: 1px solid var(--line); }
.uth__k { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

/* ---- 24c. SERVICES — plain "what I can build for you" ------------------ */
.services { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(26px,3.4vw,56px); }
.service { border-top: 1px solid var(--line-2); padding-top: 24px; }
.service__n { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--faint); }
.service__t { font-family: var(--serif); font-size: clamp(1.4rem,2.3vw,1.85rem); font-weight: 400; color: var(--hi);
  margin: 14px 0 12px; letter-spacing: -.01em; line-height: 1.12; }
.service__d { font-size: 1rem; color: var(--mid); }

/* ---- 24d. PROCESS — how working together works (reuses .flow) ---------- */
.process .flow__t { font-family: var(--serif); font-size: 1.18rem; font-weight: 400; }
.process .flow__d { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: .82rem; color: var(--mid); }
.cost { margin-top: clamp(40px,5vw,68px); padding: clamp(22px,3vw,34px); border: 1px solid var(--line-2);
  border-radius: 3px; background: var(--panel); }
.cost p { font-size: clamp(1.1rem,1.7vw,1.4rem); color: var(--hi); font-family: var(--serif); font-weight: 360; line-height: 1.4; max-width: 40ch; }

/* ---- 24e. MINOR / secondary link --------------------------------------- */
.minor { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--low); }
.minor a { color: var(--low); border-bottom: 1px solid var(--line-2); transition: color .2s, border-color .2s; }
.minor a:hover { color: var(--accent); border-color: var(--accent); }

/* ---- 24g. BROWSER-FRAMED STILLS (storefronts) --------------------------- */
.stillgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2.5vw,32px); align-items: start; }
.browser { border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; background: var(--panel);
  box-shadow: 0 36px 76px -44px rgba(0,0,0,.92); }
.browser__bar { display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  border-bottom: 1px solid var(--line); background: var(--panel-2); }
.browser__dots { display: flex; gap: 5px; }
.browser__dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.browser__url { font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; color: var(--low); }
.browser img { width: 100%; display: block; }

/* ---- 24h. APP MOCK SCREENS (CSS-drawn, inside .phone frames) ------------ */
.phones--mock .phone { background: linear-gradient(160deg, #201a12, #14100b); }
.am { border-radius: 15px; overflow: hidden; background: #0e0b08; aspect-ratio: 9 / 19.2;
  display: flex; flex-direction: column; font-size: clamp(7px, 0.95vw, 10px); }
.am__status { display: flex; justify-content: space-between; padding: .9em 1.4em .5em;
  font-family: var(--mono); font-size: .78em; color: var(--faint); letter-spacing: .06em; }
.am__head { padding: .6em 1.4em 1em; border-bottom: 1px solid var(--line); }
.am__brand { font-family: var(--mono); font-size: .72em; letter-spacing: .22em; color: var(--accent); text-transform: uppercase; }
.am__title { font-family: var(--serif); font-size: 1.75em; color: var(--hi); margin-top: .3em; letter-spacing: -.01em; }
.am__body { padding: 1.2em 1.4em; display: flex; flex-direction: column; gap: 1.1em; flex: 1; }
.am__cards { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.am__card { border: 1px solid var(--line); border-radius: 4px; padding: .9em; background: var(--panel); }
.am__card--wide { grid-column: 1 / -1; }
.am__n { font-family: var(--serif); font-size: 2.1em; line-height: 1; color: var(--hi); font-variant-numeric: tabular-nums; }
.am__n em { font-style: normal; color: var(--accent); }
.am__l { font-family: var(--mono); font-size: .68em; letter-spacing: .1em; text-transform: uppercase; color: var(--low); margin-top: .5em; line-height: 1.5; }
.am__row { display: flex; justify-content: space-between; align-items: center; gap: 1em;
  padding: .8em 0; border-bottom: 1px solid var(--line); }
.am__row:last-child { border-bottom: none; }
.am__row-t { color: var(--mid); font-size: .95em; }
.am__row-s { font-family: var(--mono); font-size: .66em; letter-spacing: .08em; text-transform: uppercase; color: var(--low); white-space: nowrap; }
.am__pill { font-family: var(--mono); font-size: .62em; letter-spacing: .1em; text-transform: uppercase;
  padding: .35em .8em; border-radius: 2em; border: 1px solid var(--accent); color: var(--accent); white-space: nowrap; }
.am__pill--ok { border-color: rgba(140,180,120,.6); color: #a8c990; }
.am__img { border-radius: 4px; aspect-ratio: 4 / 3; background:
  linear-gradient(140deg, #2a2016 0%, #1a140d 55%, #241a10 100%); position: relative; overflow: hidden; }
.am__img::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(85% 70% at 60% 30%, rgba(206,95,68,.28), transparent 60%); }
.am__qr { width: 34%; aspect-ratio: 1; margin: 0 auto; border-radius: 4px; opacity: .85; background:
  conic-gradient(var(--hi) 25%, transparent 0 50%, var(--hi) 0 75%, transparent 0) 0 0 / 34% 34%,
  linear-gradient(var(--hi), var(--hi)) 50% 50% / 22% 22% no-repeat, #0e0b08; }
.am__foot { display: flex; justify-content: space-around; padding: 1em 1.4em; border-top: 1px solid var(--line); }
.am__dot { width: .55em; height: .55em; border-radius: 50%; background: var(--faint); }
.am__dot.on { background: var(--accent); }

@media (max-width: 720px) {
  .services { grid-template-columns: 1fr; }
  .uth__row { grid-template-columns: 1fr; gap: 4px; }
  .stillgrid { grid-template-columns: 1fr; }
}

/* ---- 25. REVEAL / MOTION ------------------------------------------------
   First-viewport choreography, echoing the hero: rise (default), slide from
   the right, wipe open, or flicker-flash in — plus decoded kickers (JS). */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d,0ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal--right { transform: translateX(64px); }
.js .reveal--wipe { transform: none; clip-path: inset(-2% 101% -2% -2%);
  transition: opacity .5s var(--ease), clip-path 1.15s var(--ease); transition-delay: var(--d,0ms); }
.js .reveal--wipe.in { clip-path: inset(-2% -2% -2% -2%); }
.js .reveal--flash { transform: none; transition: none; opacity: 0; }
.js .reveal--flash.in { opacity: 1; animation: nameFlash .85s var(--ease) both; animation-delay: var(--d,0ms); }
.kicker.decoding { color: var(--accent); }

/* ---- 26. RESPONSIVE ---------------------------------------------------- */
@media (max-width: 980px) {
  .cols-2 { grid-template-columns: 1fr; }
  .imgrid--wtf { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .imgrid--wtf .figure:first-child { grid-row: auto; grid-column: 1 / 3; }
  .flow { grid-auto-flow: row; grid-auto-columns: auto; gap: 4px; }
  .flow__node { padding: 0 0 22px 26px; }
  .flow__node::before { top:0; bottom:0; left:3px; right:auto; width:1px; height:auto; }
  .flow__node:last-child::before { bottom:50%; right:auto; }
  .flow__node::after { top:3px; left:0; }
  .tradeoffs { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .navlinks { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero__portrait { width: min(66vw, 280px); }
  .cols-3 { grid-template-columns: 1fr; }
  .imgrid--wtf { grid-template-columns: 1fr; }
  .imgrid--wtf .figure:first-child { grid-column: auto; }
  .toc__row { grid-template-columns: 3rem 1fr; }
  .toc__meta { display: none; }
  .spec__row { grid-template-columns: 1fr; gap: 6px; }
  .phone--lift { transform: none; }
  .runhead { flex-direction: column; gap: 6px; }
}

/* ---- 27. REDUCED MOTION / PRINT ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal--wipe { clip-path: none; }
  .js [data-hero] .hero__name .ln, .js [data-hero] .hero__statement,
  .js [data-hero] .hero-slide, .js [data-hero] .hero-fade,
  .js [data-hero] .hero__portrait { opacity: 1 !important; transform: none !important; animation: none !important; }
}
@media print {
  .fx-grain, .topbar { display: none !important; }
  body { background: #fff; color: #111; }
}