/* ============================================================
   WebBoss — site styles
   Direction: "Operator editorial" (calm pass)
   - Light editorial canvas, one soft slate hero/footer
   - Display: Bricolage Grotesque · Body: system-ui · Mono: JetBrains Mono
   - Accents: soft blue (interactive) + sage (gentle pop)
   ============================================================ */

:root{
  --bg:            oklch(98.5% 0.004 250);
  --surface:       oklch(100% 0 0);
  --ink:           oklch(17% 0.02 262);
  --fg:            oklch(21% 0.02 262);
  --muted:         oklch(49% 0.015 262);
  --faint:         oklch(64% 0.012 262);
  --border:        oklch(90.5% 0.006 262);
  --border-strong: oklch(82% 0.01 262);

  --accent:        oklch(56% 0.13 248);   /* soft blue — interactive */
  --accent-ink:    oklch(46% 0.12 248);
  --accent-wash:   oklch(96.5% 0.014 248);
  --lime:          oklch(83% 0.10 145);    /* sage — gentle pop */
  --lime-ink:      oklch(60% 0.09 148);

  --dark:          oklch(25% 0.022 258);   /* hero / footer canvas — calm slate */
  --dark-2:        oklch(30% 0.024 258);
  --on-dark:       oklch(95% 0.006 250);
  --on-dark-mut:   oklch(74% 0.014 255);
  --on-dark-line:  oklch(40% 0.02 258);

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1140px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --radius: 16px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box }
*{ margin:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--fg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; cursor:pointer }
::selection{ background:var(--lime); color:var(--ink) }

/* ---------- layout ------------------------------------------------ */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.container--wide{ max-width:1320px }
.section{ padding-block:clamp(4rem,9vw,7.5rem) }
.section--tight{ padding-block:clamp(3rem,6vw,4.5rem) }
.divide{ border-top:1px solid var(--border) }

/* ---------- type helpers ----------------------------------------- */
.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.kicker::before{ content:""; width:18px; height:1px; background:var(--accent) }
.kicker--lime::before{ background:var(--lime-ink) }
.kicker--ondark{ color:var(--on-dark-mut) }
.kicker--ondark::before{ background:var(--lime) }

.display{ font-family:var(--font-display); font-weight:650; letter-spacing:-.02em; line-height:1.03 }
.lead{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--muted); max-width:62ch; text-wrap:pretty }
.accent{ color:var(--accent) }
.mono{ font-family:var(--font-mono) }
.eyebrow-num{ font-family:var(--font-mono); font-size:.78rem; color:var(--faint) }

.section-head{ max-width:64ch }
.section-head .display{ font-size:clamp(1.9rem,4vw,3rem); margin-top:1rem }
.section-head .lead{ margin-top:1.1rem }

/* ---------- buttons ---------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.4rem; border-radius:999px;
  font-weight:600; font-size:.95rem; letter-spacing:-.01em;
  border:1px solid transparent; transition:transform .2s var(--ease), background .2s, border-color .2s, color .2s;
}
.btn:active{ transform:translateY(1px) }
.btn .arr{ transition:transform .25s var(--ease) }
.btn:hover .arr{ transform:translateX(4px) }

.btn-primary{ background:var(--accent); color:#fff }
.btn-primary:hover{ background:var(--accent-ink) }

.btn-dark{ background:var(--ink); color:var(--on-dark) }
.btn-dark:hover{ background:var(--dark-2) }

.btn-lime{ background:var(--lime); color:var(--ink) }
.btn-lime:hover{ filter:brightness(1.04) }

.btn-ghost{ background:transparent; color:var(--fg); border-color:var(--border-strong) }
.btn-ghost:hover{ border-color:var(--ink); background:var(--surface) }

.btn-ghost-ondark{ background:transparent; color:var(--on-dark); border-color:var(--on-dark-line) }
.btn-ghost-ondark:hover{ border-color:var(--on-dark) }

.textlink{ color:var(--accent); font-weight:600; display:inline-flex; align-items:center; gap:.4rem }
.textlink .arr{ transition:transform .25s var(--ease) }
.textlink:hover .arr{ transform:translateX(4px) }

/* ---------- nav -------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s;
}
.nav.is-stuck{ border-bottom-color:var(--border) }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:1rem }
.wordmark{ display:inline-flex; align-items:baseline; gap:.05rem; font-family:var(--font-display); font-weight:750; font-size:1.32rem; letter-spacing:-.03em; color:var(--ink) }
.wordmark .dot{ color:var(--accent) }
.wordmark .cube{ display:inline-block; width:1.08em; height:1.08em; margin-right:.42em; background:url("../favicon.svg") center/contain no-repeat; align-self:center }

.nav-links{ display:flex; align-items:center; gap:.35rem; list-style:none }
.nav-links a{
  display:inline-block; padding:.5rem .8rem; border-radius:8px;
  font-size:.93rem; font-weight:500; color:var(--muted);
  transition:color .15s, background .15s;
}
.nav-links a:hover{ color:var(--ink); background:color-mix(in oklab, var(--ink) 5%, transparent) }
.nav-links a.active{ color:var(--ink) }
.nav-links a.active::after{ content:""; display:block; height:2px; margin-top:3px; border-radius:2px; background:var(--accent) }
.nav-right{ display:flex; align-items:center; gap:.8rem }
.nav-cta{ padding:.6rem 1.05rem }

.nav-toggle{ display:none; width:42px; height:42px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); align-items:center; justify-content:center }
.nav-toggle span{ position:relative; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease), opacity .2s }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease) }
.nav-toggle span::before{ top:-6px } .nav-toggle span::after{ top:6px }
.nav.menu-open .nav-toggle span{ background:transparent }
.nav.menu-open .nav-toggle span::before{ transform:translateY(6px) rotate(45deg) }
.nav.menu-open .nav-toggle span::after{ transform:translateY(-6px) rotate(-45deg) }

/* ---------- hero ------------------------------------------------- */
.hero{ position:relative; background:var(--dark); color:var(--on-dark); overflow:hidden; isolation:isolate }
.hero::before{ /* faint dot grid */
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:radial-gradient(oklch(100% 0 0 / .055) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 0%, #000 30%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 70% 0%, #000 30%, transparent 78%);
}
.hero-inner{ padding-block:clamp(4.5rem,11vw,8rem) }
.hero .kicker{ margin-bottom:1.6rem }
.hero-title{ font-size:clamp(2.6rem,7.2vw,5.6rem); color:var(--on-dark); max-width:16ch }
.hero-title .swap{ color:var(--lime) }
.hero-rotator{ display:inline-block; position:relative }
.hero-rotator .word{ display:inline-block; transition:opacity .5s var(--ease), transform .5s var(--ease) }
.hero-rotator.swapping .word{ opacity:0; transform:translateY(-.18em) }
.hero-sub{ margin-top:1.8rem; font-size:clamp(1.05rem,1.6vw,1.35rem); color:var(--on-dark-mut); max-width:54ch; line-height:1.55; text-wrap:pretty }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.4rem }
.hero-meta{ display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; margin-top:3.5rem; padding-top:1.8rem; border-top:1px solid var(--on-dark-line) }
.hero-meta div{ display:flex; flex-direction:column; gap:.3rem }
.hero-meta dt{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-mut) }
.hero-meta dd{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; color:var(--on-dark) }

/* ---------- generic page header (inner pages) -------------------- */
.page-head{ padding-block:clamp(3.5rem,7vw,6rem) clamp(1.5rem,3vw,2.5rem) }
.page-head .display{ font-size:clamp(2.4rem,6vw,4.4rem); margin-top:1.1rem; max-width:18ch }
.page-head .lead{ margin-top:1.4rem }

/* ---------- services / what I do --------------------------------- */
.grid-svc{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-top:3rem }
.svc{ background:var(--surface); padding:clamp(1.6rem,3vw,2.4rem); display:flex; flex-direction:column; gap:.7rem; min-height:230px; transition:background .2s }
.svc:hover{ background:var(--accent-wash) }
.svc .svc-n{ font-family:var(--font-mono); font-size:.74rem; color:var(--faint) }
.svc h3{ font-family:var(--font-display); font-size:1.35rem; font-weight:600; letter-spacing:-.01em; margin-top:.2rem }
.svc p{ color:var(--muted); font-size:.97rem }
.svc .svc-tags{ margin-top:auto; display:flex; flex-wrap:wrap; gap:.4rem; padding-top:1rem }
.tag{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.04em; color:var(--muted); border:1px solid var(--border-strong); border-radius:999px; padding:.25rem .6rem }

/* ---------- projects grid ---------------------------------------- */
.grid-proj{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:3rem }
.grid-proj.cols-2{ grid-template-columns:repeat(2,1fr) }
.proj{
  position:relative; display:flex; flex-direction:column;
  color:inherit; text-decoration:none;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.4rem; min-height:236px;
  transition:transform .28s var(--ease), border-color .2s, box-shadow .28s;
}
.proj:hover{ transform:translateY(-2px); border-color:var(--border-strong); box-shadow:0 14px 34px -24px oklch(20% 0.04 262 / .22) }
.proj:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.proj-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.proj-badge{ width:38px; height:38px; border-radius:10px; background:var(--ink); display:grid; place-items:center; color:var(--lime); font-family:var(--font-display); font-weight:700; font-size:1rem }
.proj.is-stub .proj-badge{ background:var(--accent-wash); color:var(--accent); border:1px dashed var(--accent) }
.proj-status{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); border:1px solid var(--border); border-radius:999px; padding:.22rem .55rem }
.proj h3{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; letter-spacing:-.01em; margin-top:1.3rem }
.proj p{ color:var(--muted); font-size:.95rem; margin-top:.5rem }
.proj-foot{ margin-top:auto; padding-top:1.2rem; display:flex; align-items:center; justify-content:space-between }
.proj-tags{ display:flex; flex-wrap:wrap; gap:.35rem }
.proj-link{ font-family:var(--font-mono); font-size:.78rem; color:var(--accent); display:inline-flex; align-items:center; gap:.35rem }
.proj-link .arr{ transition:transform .25s var(--ease) }
.proj:hover .proj-link .arr{ transform:translateX(3px) }
.proj-tags{ position:relative; z-index:1 }

.note{ display:flex; gap:.7rem; align-items:flex-start; margin-top:1.4rem; padding:.9rem 1.1rem; background:var(--accent-wash); border:1px solid color-mix(in oklab, var(--accent) 25%, var(--border)); border-radius:var(--radius-sm); color:var(--accent-ink); font-size:.9rem }
.note b{ color:var(--accent-ink) }

/* ---------- writing list ----------------------------------------- */
.post-list{ margin-top:2.5rem; border-top:1px solid var(--border) }
.post{ position:relative; display:grid; grid-template-columns:120px 1fr auto; gap:1.5rem; align-items:baseline; padding:1.5rem 0; border-bottom:1px solid var(--border); transition:background .15s; color:inherit; text-decoration:none; }
.post:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px }
.post:hover{ background:color-mix(in oklab, var(--ink) 3%, transparent) }
.post-date{ font-family:var(--font-mono); font-size:.78rem; color:var(--faint) }
.post-body h3{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; letter-spacing:-.01em }
.post-body p{ color:var(--muted); font-size:.95rem; margin-top:.35rem; max-width:60ch }
.post-tag{ font-family:var(--font-mono); font-size:.7rem; color:var(--muted); border:1px solid var(--border-strong); border-radius:999px; padding:.25rem .6rem; white-space:nowrap }

/* ---------- feed (auto-built writing list) ----------------------- */
.feed-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; max-width:none }
.feed-head>div{ max-width:58ch }
.feed-meta{ font-family:var(--font-mono); font-size:.74rem; color:var(--faint); white-space:nowrap; padding-bottom:.3rem }
.feed-list .post{ align-items:start }
.post-meta{ display:flex; flex-direction:column; gap:.35rem }
.post-src{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.02em; color:var(--muted) }
.post-src::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none }
.post-src.is-ws::before{ background:var(--lime-ink) }
.post-title{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; letter-spacing:-.01em; line-height:1.25; color:var(--ink); text-decoration:none; display:inline-flex; gap:.4rem; align-items:baseline; text-wrap:balance }
.post-title .arr{ color:var(--accent); opacity:0; transform:translate(-3px,0); transition:opacity .2s var(--ease), transform .2s var(--ease) }
.post:hover .post-title{ color:var(--accent-ink) }
.post:hover .post-title .arr{ opacity:1; transform:translate(0,0) }
.post-tags{ position:relative; z-index:1 }
.post-snip{ color:var(--muted); font-size:.95rem; margin-top:.45rem; max-width:64ch; text-wrap:pretty }
.post-tags{ display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end }

/* pagination */
.pager{ display:flex; align-items:center; justify-content:center; gap:.35rem; margin-top:2.5rem; flex-wrap:wrap }
.pager:empty{ display:none }
.pager button{ font-family:var(--font-mono); font-size:.82rem; min-width:38px; height:38px; padding:0 .7rem; display:inline-flex; align-items:center; justify-content:center; background:var(--surface); color:var(--fg); border:1px solid var(--border); border-radius:10px; cursor:pointer; transition:border-color .15s, background .15s, color .15s }
.pager button:hover:not(:disabled){ border-color:var(--border-strong); background:var(--accent-wash) }
.pager button[aria-current="page"]{ background:var(--ink); color:var(--on-dark); border-color:var(--ink) }
.pager button:disabled{ opacity:.35; cursor:default }
.pager .pg-gap{ color:var(--faint); padding:0 .2rem; font-family:var(--font-mono); font-size:.82rem }
.pager .pg-edge{ font-weight:500 }
.feed-empty{ color:var(--muted); margin-top:2rem; font-size:.95rem }

/* ---------- principles (about) ----------------------------------- */
.grid-prin{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-top:3rem }
.prin{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem }
.prin .pn{ font-family:var(--font-mono); font-size:.74rem; color:var(--accent) }
.prin h3{ font-family:var(--font-display); font-size:1.25rem; font-weight:600; margin-top:.6rem }
.prin p{ color:var(--muted); font-size:.96rem; margin-top:.5rem }

.bio{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start }
.bio-prose p{ font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--fg); margin-top:1.1rem; text-wrap:pretty }
.bio-prose p:first-child{ margin-top:0 }
.bio-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem; position:sticky; top:96px }
.bio-card .bio-portrait{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:50% 22%; border-radius:calc(var(--radius) - 7px); display:block; margin-bottom:1.5rem; background:var(--accent-wash) }
.bio-card h4{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted) }
.bio-card dl{ margin-top:1rem; display:flex; flex-direction:column; gap:.9rem }
.bio-card .row{ display:flex; flex-direction:column; gap:.15rem; padding-bottom:.9rem; border-bottom:1px solid var(--border) }
.bio-card .row:last-child{ border-bottom:0; padding-bottom:0 }
.bio-card dt{ font-size:.78rem; color:var(--faint) }
.bio-card dd{ font-weight:600; font-size:.98rem }

/* ---------- contact + form --------------------------------------- */
.contact{ background:var(--dark); color:var(--on-dark); border-radius:clamp(18px,3vw,28px); padding:clamp(2rem,5vw,4rem); position:relative; overflow:hidden; isolation:isolate }
.contact::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.6; background-image:radial-gradient(oklch(100% 0 0 / .05) 1px, transparent 1px); background-size:24px 24px; -webkit-mask-image:radial-gradient(90% 120% at 100% 0%, #000, transparent 70%); mask-image:radial-gradient(90% 120% at 100% 0%, #000, transparent 70%) }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start }
.contact h2{ font-family:var(--font-display); font-size:clamp(1.9rem,4vw,3rem); font-weight:650; letter-spacing:-.02em; color:var(--on-dark); line-height:1.05 }
.contact .lead{ color:var(--on-dark-mut); margin-top:1.2rem }
.contact-direct{ margin-top:2rem; display:flex; flex-direction:column; gap:.9rem }
.email-row{ display:inline-flex; align-items:center; gap:.7rem; flex-wrap:wrap }
.email-row .email{ font-family:var(--font-mono); font-size:1.05rem; color:var(--lime) }
.copy-btn{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark); border:1px solid var(--on-dark-line); border-radius:999px; padding:.35rem .7rem; background:transparent; transition:border-color .2s, color .2s }
.copy-btn:hover{ border-color:var(--on-dark) }
.copy-btn.copied{ color:var(--lime); border-color:var(--lime) }

.form{ display:flex; flex-direction:column; gap:1rem }
.field{ display:flex; flex-direction:column; gap:.4rem }
.field label{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-mut) }
.field input,.field textarea{
  font:inherit; color:var(--on-dark); background:oklch(100% 0 0 / .04);
  border:1px solid var(--on-dark-line); border-radius:10px; padding:.8rem .9rem;
  transition:border-color .2s, background .2s;
}
.field textarea{ resize:vertical; min-height:120px }
.field input::placeholder,.field textarea::placeholder{ color:oklch(70% 0.01 255 / .6) }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--lime); background:oklch(100% 0 0 / .07) }
.field.invalid input,.field.invalid textarea{ border-color:oklch(64% 0.2 24) }
.field .err{ font-size:.78rem; color:oklch(74% 0.16 24); display:none }
.field.invalid .err{ display:block }
.form-foot{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.3rem }
.form-status{ font-size:.86rem; color:var(--muted) }
.form-status.ok{ color:var(--lime-ink) }
.form-status.bad{ color:oklch(55% 0.17 25) }

/* ---------- social block ----------------------------------------- */
.socials{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-top:2.5rem }
.social{ background:var(--surface); padding:1.4rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; transition:background .18s }
.social:hover{ background:var(--accent-wash) }
.social .s-left{ display:flex; flex-direction:column; gap:.15rem }
.social .s-net{ font-family:var(--font-display); font-weight:600; font-size:1.08rem }
.social .s-handle{ font-family:var(--font-mono); font-size:.82rem; color:var(--muted) }
.social .arr{ color:var(--accent); transition:transform .25s var(--ease) }
.social:hover .arr{ transform:translate(3px,-3px) }
/* odd count → the trailing tile spans full width so the grid stays even */
.socials .social:last-child:nth-child(odd){ grid-column:1 / -1 }

/* ---------- bylines (where I write) ------------------------------ */
.bylines{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-top:2.5rem }
.byline{ background:var(--surface); padding:clamp(1.5rem,2.6vw,2rem); display:flex; flex-direction:column; gap:.6rem; min-height:170px; transition:background .18s }
.byline:hover{ background:var(--accent-wash) }
.byline-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.byline-pub{ font-family:var(--font-display); font-weight:600; font-size:1.22rem; letter-spacing:-.01em }
.byline-top .arr{ color:var(--accent); transition:transform .25s var(--ease) }
.byline:hover .arr{ transform:translate(3px,-3px) }
.byline-desc{ color:var(--muted); font-size:.95rem; margin:0 }
.byline-by{ font-family:var(--font-mono); font-size:.78rem; color:var(--faint); margin-top:auto; padding-top:.4rem }

/* ---------- footer ----------------------------------------------- */
.footer{ background:var(--dark); color:var(--on-dark-mut); padding-block:clamp(3rem,6vw,4.5rem) 2.5rem; margin-top:0 }
.footer-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid var(--on-dark-line) }
.footer .wordmark{ color:var(--on-dark) }
.footer .wordmark .cube{ background:url("../assets/logo-mark-invert.svg") center/contain no-repeat }
.footer-tag{ margin-top:.9rem; max-width:34ch; color:var(--on-dark-mut); font-size:.95rem }
.footer-cols{ display:flex; gap:clamp(2rem,6vw,5rem); flex-wrap:wrap }
.footer-col h5{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-mut); margin-bottom:.9rem }
.footer-col a{ display:block; color:var(--on-dark); font-size:.95rem; padding:.28rem 0; opacity:.85; transition:opacity .15s, color .15s }
.footer-col a:hover{ opacity:1; color:var(--lime) }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:1.8rem; font-family:var(--font-mono); font-size:.76rem; color:var(--on-dark-mut) }

/* ---------- reveal animation ------------------------------------- */
html.reveal-on .reveal{ opacity:0; transform:translateY(12px); transition:opacity .85s var(--ease), transform .85s var(--ease) }
html.reveal-on .reveal.in{ opacity:1; transform:none }
html.reveal-on .reveal[data-d="1"]{ transition-delay:.07s }
html.reveal-on .reveal[data-d="2"]{ transition-delay:.14s }
html.reveal-on .reveal[data-d="3"]{ transition-delay:.21s }
html.reveal-on .reveal[data-d="4"]{ transition-delay:.28s }

/* ---------- responsive ------------------------------------------- */
@media (max-width: 960px){
  .grid-proj{ grid-template-columns:repeat(2,1fr) }
  .bio{ grid-template-columns:1fr }
  .bio-card{ position:static }
}
@media (max-width: 760px){
  .nav-links, .nav-cta.desk{ display:none }
  .nav-toggle{ display:inline-flex }
  .nav.menu-open .nav-links{
    display:flex; position:absolute; left:0; right:0; top:72px;
    flex-direction:column; align-items:stretch; gap:.2rem;
    background:var(--surface); border-bottom:1px solid var(--border);
    padding:.8rem var(--pad) 1.2rem; box-shadow:0 20px 40px -28px oklch(20% 0.04 262 / .4);
  }
  .nav.menu-open .nav-links a{ padding:.7rem .2rem; font-size:1.05rem }
  .nav.menu-open .nav-links a.active::after{ display:none }
  .grid-svc{ grid-template-columns:1fr }
  .grid-proj, .grid-proj.cols-2{ grid-template-columns:1fr }
  .grid-prin{ grid-template-columns:1fr }
  .contact-grid{ grid-template-columns:1fr }
  .socials{ grid-template-columns:1fr }
  .bylines{ grid-template-columns:1fr }
  .post{ grid-template-columns:1fr; gap:.5rem }
  .post-date{ order:-1 }
  .post-tag{ justify-self:start; margin-top:.4rem }
  .feed-list .post{ gap:.55rem }
  .post-meta{ flex-direction:row; align-items:center; gap:.7rem; flex-wrap:wrap }
  .post-tags{ justify-content:flex-start; margin-top:.2rem }
  .feed-head{ gap:1rem }
  .feed-meta{ padding-bottom:0 }
  .hero-meta{ gap:1.3rem 2rem }
}
@media (max-width: 420px){
  .hero-actions .btn{ width:100% ; justify-content:center }
}