/* shihaabalam.com - shared styles for the homepage and post pages */

:root {
  --ink:    #0c0c0c;
  --grey:   #525252;
  --line:   #dfe0e5;
  --orange: #fb4a02;
  --teal:   #1a9db4;
  --deep:   #0b3a4a;

  --sans: 'Inter Tight', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;

  --frame: 1280px;
  --pad: clamp(20px, 4vw, 48px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.chev { width: 14px; height: 14px; flex: none; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  font-size: 16px;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-white { background: #fff; color: var(--ink); border-color: #fff; }
.btn-white:hover { background: transparent; color: #fff; }
.btn-black { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-black:hover { background: #fff; color: var(--ink); }
.btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost:hover { border-color: #fff; }
.btn-outline { color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); }
.btn-sm { padding: 10px 16px; font-size: 14px; }

/* ---------- nav: liquid glass ----------
   A floating pane of glass. The rim light and inner glow are box-shadows; the sheen is
   ::before. In Chromium the backdrop is also bent at the edges by an SVG displacement
   map (see the script), which is what makes it read as a lens rather than frosted plastic.
   Over the white sections the glass stays, and only the ink on it flips to dark. */

.nav {
  position: fixed;
  z-index: 10;
  top: 12px;
  left: 12px;
  right: 12px;
  max-width: 1320px;
  margin: 0 auto;
  height: 64px;
  padding: 0 10px 0 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-radius: 22px;
  color: #fff;
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(6px) saturate(1.9) brightness(1.08);
          backdrop-filter: blur(6px) saturate(1.9) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(255,255,255,.22),
    inset 1px 0 0 rgba(255,255,255,.28),
    inset -1px 0 0 rgba(255,255,255,.28),
    inset 0 0 22px rgba(255,255,255,.12),
    0 12px 32px -10px rgba(0,0,0,.40);
  transition: color .4s ease, background-color .4s ease, box-shadow .4s ease;
}
.nav.refract { backdrop-filter: url(#glass) blur(3px) saturate(1.9) brightness(1.08); }
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 48%),
    radial-gradient(120% 140% at 12% -30%, rgba(255,255,255,.22), transparent 55%);
  pointer-events: none;
}
.nav > * { position: relative; display: flex; align-items: center; }
.nav .brand { justify-self: start; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.nav .mark { box-shadow: 0 2px 10px rgba(0,0,0,.30); }
.nav .links { gap: 34px; font-weight: 500; }
.nav .right { justify-self: end; gap: 22px; font-weight: 500; }
.nav .links a, .nav .right a:not(.btn) { text-shadow: 0 1px 10px rgba(0,0,0,.35); opacity: .92; transition: opacity .2s; }
.nav .links a:hover, .nav .right a:not(.btn):hover { opacity: 1; }
.nav .btn {
  border-radius: 999px;
  padding: 11px 20px;
  font-weight: 500;
  background: #fff;
  color: var(--ink);
  border: 0;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,.35), inset 0 -1px 0 rgba(0,0,0,.08), inset 0 1px 0 #fff;
  transition: transform .2s ease, background .4s ease, color .4s ease, box-shadow .4s ease;
}
.nav .btn:hover { background: #fff; color: var(--ink); transform: translateY(-1px); }

/* same glass over a light background: clearer pane, dark ink */
.nav.light {
  color: var(--ink);
  background: rgba(255,255,255,.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.55),
    inset 0 0 22px rgba(255,255,255,.35),
    0 0 0 1px rgba(12,12,12,.07),
    0 12px 32px -12px rgba(0,0,0,.22);
}
.nav.light .brand, .nav.light .links a, .nav.light .right a:not(.btn) { text-shadow: none; }
.nav.light .mark { background: var(--ink); color: #fff; box-shadow: none; }
.nav.light .btn, .nav.light .btn:hover { background: var(--ink); color: #fff; box-shadow: 0 6px 18px -6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18); }
.nav .mark { transition: background .4s ease, color .4s ease; }

.brand { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; gap: 10px; display: flex; align-items: center; }
.mark {
  width: 26px; height: 26px;
  background: #fff; color: var(--ink);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; letter-spacing: -0.04em;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: #fff;
  background: var(--deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px var(--pad) 48px;
}

/* the moving light behind the glass */
.glow { position: absolute; inset: -10%; filter: blur(60px); }
.glow i { position: absolute; border-radius: 50%; display: block; }
.glow .g1 { width: 70vw; height: 70vw; left: -15vw; top: -10vw; background: #0f6f8c; }
.glow .g2 { width: 55vw; height: 55vw; right: -8vw; top: -12vw; background: #f2b08c; animation: drift 14s ease-in-out infinite alternate; }
.glow .g3 { width: 50vw; height: 50vw; right: 0; bottom: -18vw; background: #ff5a0a; animation: drift 11s ease-in-out infinite alternate-reverse; }
.glow .g4 { width: 38vw; height: 38vw; left: 22vw; top: 14vw; background: #061d26; animation: drift 17s ease-in-out infinite alternate; }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-6vw, 4vw) scale(1.12); }
}

/* WebGL smoke that drifts right (see the script at the bottom).
   The CSS glow above stays underneath as the fallback. */
.flow {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  display: block;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.flow.on { opacity: 1; }
.glow:has(~ .flow.on) { display: none; }   /* fallback only: hidden under the smoke */

/* ribbed glass */
.flutes { position: absolute; inset: 0; display: flex; }
.flutes span {
  flex: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,0) 30%, rgba(0,0,0,.12));
}


/* keeps the nav readable over the light part of the glow */
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(6,20,26,.35), transparent);
  pointer-events: none;
}
.hero-content { position: relative; max-width: var(--frame); }
.hero h1 {
  font-weight: 800;
  font-size: clamp(64px, 10.4vw, 150px);
  line-height: .96;
  letter-spacing: -0.035em;
  margin: 0;
}
.hero .sub { font-size: clamp(18px, 1.6vw, 21px); font-weight: 300; margin: 28px 0 32px; max-width: 560px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero h1 + .ctas { margin-top: clamp(32px, 4vw, 48px); }
.hero-foot {
  position: relative;
  margin-top: auto;
  padding-top: 64px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}
.foot-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255,255,255,.55);
  transition: border-color .2s;
}
.foot-link:hover { border-color: #fff; }
.foot-link .chev { width: 12px; height: 12px; transition: transform .2s; }
.foot-link:hover .chev { transform: translateX(3px); }
.pulse { width: 8px; height: 8px; background: #3ee08f; box-shadow: 0 0 0 0 rgba(62,224,143,.6); animation: pulse 2s infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 10px rgba(62,224,143,0); } }

/* ---------- framed white sections ---------- */

.frame {
  max-width: var(--frame);
  margin: 0 auto;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.section-intro { text-align: center; padding: clamp(80px, 10vw, 128px) var(--pad) 64px; }
h2 {
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 auto;
  max-width: 820px;
}
.lead { font-size: 18px; color: var(--grey); margin: 20px auto 0; max-width: 560px; font-weight: 300; }

.dots {
  height: 96px;
  border-top: 1px solid var(--line);
  background-image: radial-gradient(#d4d6dc 1px, transparent 1.4px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
          mask-image: linear-gradient(to bottom, #000, transparent);
}

/* project panels */
.project {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.project:last-child { border-bottom: 1px solid var(--line); }
.project .copy { padding: clamp(40px, 5vw, 64px) var(--pad); display: flex; flex-direction: column; justify-content: center; }
.step {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--orange);
  border: 1px solid var(--orange);
  padding: 2px 10px;
}
.project h3 {
  font-weight: 700;
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 24px 0 18px;
}
.project p { margin: 0; font-size: 17px; max-width: 470px; }
.stack { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); padding: 6px 10px; font-size: 14px; }
.chip b { width: 14px; height: 14px; background: var(--teal); display: grid; place-items: center; }
.chip b svg { width: 10px; height: 10px; }
.facts { list-style: none; margin: 22px 0 0; padding: 0; max-width: 470px; }
.facts li { position: relative; padding-left: 20px; margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--grey); }
.facts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--orange); }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.year { font-family: var(--mono); font-size: 13px; color: var(--grey); }
.repo { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.repo:hover { color: var(--orange); border-color: var(--orange); }

.visual {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 48px;
}
.visual::before { content: ""; position: absolute; inset: -20%; filter: blur(50px); }
.v1::before { background: radial-gradient(40% 50% at 80% 10%, #f4b896, transparent), radial-gradient(60% 60% at 10% 90%, #0f6f8c, transparent), linear-gradient(135deg, #c9a58f, #2c7f8f 55%, #0b3a4a); }
.v2::before { background: radial-gradient(45% 55% at 85% 85%, #ff5a0a, transparent), radial-gradient(50% 50% at 20% 20%, #1a9db4, transparent), linear-gradient(160deg, #0b3a4a, #1d4f5c 50%, #b5643a); }
.window {
  position: relative;
  width: min(100%, 460px);
  background: #fff;
  border: 1px solid rgba(255,255,255,.7);
  outline: 12px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.35);
}
.window .bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--grey); }
.shot-img { display: block; width: 100%; height: auto; border-top: 1px solid var(--line); }
.window picture { display: block; }
.visual:has(.shot-img) { padding: 32px; }
.window:has(.shot-img) { width: min(100%, 600px); }
.window a:has(.shot-img) { display: block; cursor: zoom-in; }
.visual.wide-figure { padding: clamp(28px, 4vw, 56px) var(--pad); }
.wide-figure .window:has(.shot-img) { width: min(100%, 1180px); }
.window .bar i { width: 9px; height: 9px; border-radius: 50%; background: #e2e3e8; }
.window .bar i:nth-child(1) { background: #fb3748; }
.window .bar i:nth-child(2) { background: #f7b928; }
.window .bar i:nth-child(3) { background: #1fc16b; }
.window .bar span { margin-left: auto; }
.shot {
  margin: 14px;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  border: 1px dashed #c9cbd2;
  background: repeating-linear-gradient(-45deg, #fafafb 0 8px, #f3f4f6 8px 9px);
  font-family: var(--mono);
  font-size: 12px;
  color: #8a8b90;
  text-align: center;
  padding: 12px;
}

/* ---------- flagship project ----------
   The first project gets the same split panel as the others, then a strip of
   headline numbers, two short columns of detail, and its tools and links. */

.flagship { border-top: 1px solid var(--line); }
.flagship .project { border-top: 0; }
.flagship .project h3 { font-size: clamp(44px, 5vw, 68px); }
.tag-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.flag-label { font-family: var(--mono); font-size: 13px; color: var(--grey); }
.flagship .project p { max-width: 520px; }
.flagship .facts { max-width: 520px; }

.v3::before { background: radial-gradient(45% 55% at 90% 10%, #f2b08c, transparent), radial-gradient(55% 60% at 10% 85%, #0f6f8c, transparent), linear-gradient(150deg, #1d4f5c, #0b3a4a 45%, #9a4a22); }
.chart-window { margin: 0; width: min(100%, 500px); }
.chart-body { padding: 14px 14px 4px; }
.chart { display: block; width: 100%; height: auto; font-family: var(--sans); }
.chart-window figcaption { padding: 0 16px 14px; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--grey); }
.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; }

.flag-video { min-height: 0; border-top: 1px solid var(--line); padding: clamp(28px, 4vw, 56px) var(--pad); }
.video-window { margin: 0; width: min(100%, 1180px); }
.video-window video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #f2efe6; }
.video-window figcaption { padding: 12px 16px 14px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--grey); }
.vid-toggle {
  margin-left: 14px;
  padding: 3px 10px;
  font: 500 12px var(--mono);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
}
.vid-toggle:hover { border-color: var(--ink); }
.vid-size { margin-left: 8px; }

/* Enlarged video: the same player, moved into a dialog over a dimmed page.
   Sized to the window's height so the whole figure, caption included, fits. */
.vid-modal { padding: 0; border: 0; background: none; max-width: none; max-height: none; overflow: visible; }
/* plain dim, no blur: a blurred backdrop is redrawn on every video frame and made playback stutter */
.vid-modal::backdrop { background: rgba(6, 20, 26, .9); }
.vid-modal .video-window { width: min(92vw, calc((100vh - 170px) * 16 / 9)); }
/* While it's open, skip work nobody can see behind the dim: the glass nav,
   the pulse, and the window's large soft shadow. */
.vid-modal .window { box-shadow: none; outline: 0; }
.vid-open .nav { visibility: hidden; }
.vid-open .pulse { animation: none; }
@media (max-width: 700px) { .vid-size { display: none; } }
.flag-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.flag-stats > div { padding: 30px var(--pad) 32px; display: flex; flex-direction: column; gap: 8px; }
.flag-stats > div + div { border-left: 1px solid var(--line); }
.flag-stats b { font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.flag-stats span { font-size: 14px; line-height: 1.45; color: var(--grey); max-width: 240px; }

.flag-detail { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.flag-detail > div { padding: clamp(36px, 4vw, 52px) var(--pad); }
.flag-detail > div + div { border-left: 1px solid var(--line); }
.flag-detail h4 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.flag-detail .facts { margin-top: 14px; }

.flag-foot { border-top: 1px solid var(--line); padding: 28px var(--pad) 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.flag-foot .stack, .flag-foot .meta-row { margin-top: 0; }
.flagship + .project { border-top: 1px solid var(--line); }

/* ---------- dark band ---------- */

.band {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--ink);
  text-align: center;
  padding: clamp(96px, 12vw, 150px) var(--pad);
}
.band .glow { opacity: .55; }
.band .glow .g1 { background: #0b3a4a; }
.band .glow .g4 { background: #0c0c0c; width: 60vw; height: 60vw; left: 20vw; top: -10vw; }
.band > .inner { position: relative; }
.band .lead { color: rgba(255,255,255,.72); }
.band .btn { margin-top: 36px; }

.posts {
  max-width: 820px;
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255,255,255,.16);
  text-align: left;
}
.post { padding: 24px; min-height: 170px; display: flex; flex-direction: column; background: rgba(12,12,12,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.post + .post { border-left: 1px solid rgba(255,255,255,.16); }
.post .n { font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,.5); }
.post .t { margin-top: auto; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.post .t.dim { color: rgba(255,255,255,.35); }
.post.live { background: rgba(251,74,2,.10); }
.post.live .n { color: var(--orange); }

/* ---------- contact + footer ---------- */

.contact { text-align: center; padding: clamp(96px, 11vw, 140px) var(--pad); }
.contact .ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.mail-line { margin: 22px 0 0; font-family: var(--mono); font-size: 14px; color: var(--grey); }
.mail-line a:hover { color: var(--orange); }
@media (max-width: 560px) {
  .contact .ctas .btn { justify-content: center; }
  .contact .ctas .btn-black { flex-basis: 100%; }
  .contact .ctas .btn-outline { flex: 1; }
}

footer {
  background: var(--ink);
  color: #fff;
  display: grid;
  grid-template-columns: 330px 1fr 330px;
  border-top: 1px solid #222;
}
footer > * { padding: 36px var(--pad); display: flex; align-items: center; }
footer nav { gap: 32px; justify-content: center; border-left: 1px solid #222; border-right: 1px solid #222; }
footer nav a { opacity: .75; }
footer nav a:hover { opacity: 1; }
footer small { justify-content: flex-end; font-family: var(--mono); font-size: 12px; color: #8a8b90; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  footer { grid-template-columns: auto 1fr auto; }
}
/* Between tablet and laptop widths the centre links crowd the right-hand ones. */
@media (max-width: 1000px) {
  .nav .links { display: none; }
  .nav { grid-template-columns: 1fr auto; }
}
@media (max-width: 860px) {
  .nav .links { display: none; }
  .nav { grid-template-columns: 1fr auto; top: 10px; left: 10px; right: 10px; height: 58px; padding: 0 8px 0 14px; border-radius: 20px; }
  .nav .right a:not(.btn) { display: none; }
  .project { grid-template-columns: 1fr; }
  .flag-stats { grid-template-columns: 1fr 1fr; }
  .flag-stats > div:nth-child(3) { border-left: 0; }
  .flag-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .flag-detail { grid-template-columns: 1fr; }
  .flag-detail > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .visual { min-height: 0; padding: 40px 20px; }
  .posts { grid-template-columns: 1fr; }
  .post + .post { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
  .post { min-height: 120px; }
  footer { grid-template-columns: 1fr; }
  footer nav { justify-content: flex-start; border: 0; border-top: 1px solid #222; border-bottom: 1px solid #222; }
  footer small { justify-content: flex-start; }
  .flutes span:nth-child(n+11) { display: none; }
  .hero .glow .g2 { width: 110vw; height: 110vw; right: -55vw; top: 20%; }
  .hero .glow .g3 { width: 130vw; height: 130vw; right: -45vw; bottom: -35vw; }
  .hero .glow .g4 { width: 80vw; height: 80vw; left: -10vw; top: 30%; }
}

@media (prefers-reduced-motion: reduce) {
  .glow i, .pulse { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- post pages ----------
   A dark smoke header (the same band as the homepage's Writing section) holding the
   title, then the article on white inside the thin page frame. Everything under
   .prose is plain HTML, so a converted document or hand-written post both work. */

.post-hero { padding: clamp(150px, 17vw, 210px) var(--pad) clamp(76px, 9vw, 112px); }
.post-hero .inner { max-width: 900px; margin: 0 auto; }
.post-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(255,255,255,.72);
}
.post-hero h1 {
  font-weight: 800;
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: .98;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}

.post-body { padding: clamp(56px, 7vw, 88px) var(--pad) clamp(64px, 8vw, 104px); }
.prose {
  max-width: 680px;
  margin: 0 auto;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.72;
  color: #262626;
}
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.25em; text-wrap: pretty; }
.prose .standfirst { font-size: 1.22em; line-height: 1.55; color: var(--ink); margin-bottom: 1.6em; }
.prose h2 {
  max-width: none;
  margin: 2.1em 0 .6em;
  font-size: clamp(28px, 2.8vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.prose h3 { margin: 1.8em 0 .5em; font-size: 1.2em; line-height: 1.25; letter-spacing: -0.01em; }
.prose a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--orange); }
.prose blockquote {
  margin: 1.9em 0;
  padding: 2px 0 2px 24px;
  border-left: 3px solid var(--orange);
  font-size: 1.3em;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.prose blockquote p { margin: 0; }
.prose ul, .prose ol { margin: 0 0 1.4em; padding: 0; list-style: none; }
.prose li { position: relative; padding-left: 28px; margin: .5em 0; }
.prose ul > li::before { content: ""; position: absolute; left: 4px; top: .68em; width: 7px; height: 7px; background: var(--orange); }
.prose ol { counter-reset: item; }
.prose ol > li { counter-increment: item; }
.prose ol > li::before {
  content: counter(item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .3em;
  font-family: var(--mono);
  font-size: .72em;
  color: var(--orange);
}
.prose code { font-family: var(--mono); font-size: .86em; background: #f3f4f6; border: 1px solid var(--line); padding: .06em .35em; }
.prose pre {
  margin: 1.8em 0;
  padding: 20px 22px;
  overflow-x: auto;
  background: var(--ink);
  color: #e6e6e6;
  font-size: 14px;
  line-height: 1.65;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }
.prose figure { margin: 2.2em 0; }
.prose figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.prose figure .shot { margin: 0; aspect-ratio: 16 / 9; }
.prose figcaption { margin-top: 10px; font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--grey); }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.6em 0; }
.table-wrap { margin: 1.8em 0; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: .88em; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.prose th { font-family: var(--mono); font-size: .82em; font-weight: 500; color: var(--grey); border-bottom-color: var(--ink); }

.post-end {
  max-width: 680px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 24px;
}
.chev.flip { transform: scaleX(-1); }

/* ---------- 404 page ----------
   One full-screen smoke band with the message in the middle. */

.lost {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 120px;
}
.lost h1 {
  font-weight: 800;
  font-size: clamp(52px, 8vw, 112px);
  line-height: .96;
  letter-spacing: -0.035em;
  margin: 0;
}
.lost .ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.lost .ctas .btn { margin-top: 0; }


/* ==========================================================================
   Hero positioning, the short intro, project hooks, CTA hierarchy, and the
   case study page (projects/celeste-rl.html).
   ========================================================================== */

/* hero: who I am, under the name */
.hero h1 + .sub { margin: clamp(26px, 3vw, 36px) 0 0; max-width: 640px; font-size: clamp(19px, 1.7vw, 23px); font-weight: 400; line-height: 1.4; text-wrap: balance; }
.hero .sub + .ctas { margin-top: clamp(28px, 3.4vw, 40px); }
.hero-foot .where { font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,.82); }

/* short personal intro at the top of Work */
.intro { padding: clamp(72px, 9vw, 120px) var(--pad) 0; max-width: 980px; }
.intro-text {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.intro-more { margin: 20px 0 0; max-width: 640px; font-size: 18px; font-weight: 300; color: var(--grey); text-wrap: pretty; }
.intro + .section-intro { padding-top: clamp(64px, 8vw, 104px); }

/* project panels: a one-line hook under the title */
.project .hook { margin: 0 0 16px; font-size: clamp(20px, 1.8vw, 24px); font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); max-width: 520px; text-wrap: balance; }
.project p + p { margin-top: 14px; }
.project .muted { color: var(--grey); font-size: 16px; }

/* CTA hierarchy: one filled button, one outline, then a plain text link */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 30px; }
.cta-row .btn { padding: 12px 18px; font-size: 15px; }

/* Celeste panel: the demo sits beside the copy */
.flagship .visual.v3 { min-height: 0; padding: clamp(28px, 3vw, 40px); }
.flagship .visual .video-window { width: 100%; }
.flagship .visual .video-window figcaption { font-size: 11.5px; }

/* DualSense: labelled facts, and the panel flipped so it reads differently */
.facts.labelled li b { color: var(--ink); font-weight: 600; }
.project.flip .visual { order: -1; }

/* Writing: just the one piece for now */
.posts.one { grid-template-columns: 1fr; max-width: 460px; }

@media (max-width: 860px) {
  .project.flip .visual { order: 0; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(56px, 17vw, 72px); }
  .hero-foot { padding-top: 40px; }
  .intro-more { font-size: 17px; }
}

/* ---------- case study page ---------- */

.cs-hero .inner { text-align: center; }
.cs-hero .deck { margin: 24px auto 0; max-width: 640px; font-size: clamp(18px, 1.7vw, 22px); font-weight: 300; line-height: 1.45; color: rgba(255,255,255,.86); text-wrap: balance; }
.cs-hero .ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

.cs-stats { border-bottom: 1px solid var(--line); }
.cs-stats.flag-stats { border-top: 0; }

.cs-body { padding-top: clamp(48px, 6vw, 72px); }
/* Narrow screens: contents list above the article, the article in one
   reading column. Wide screens: contents stick in a left column, the main
   column widens so tables, the stack and pull-outs use the room, and
   running text stays at a comfortable line length. */
.cs-layout { max-width: 680px; margin: 0 auto; }
.cs-main { min-width: 0; }
.toc { margin: 0 0 2.4em; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toc b { display: block; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); margin-bottom: 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; counter-reset: toc; }
.toc li { counter-increment: toc; display: flex; gap: 10px; padding: 4px 0; font-size: 15px; line-height: 1.4; break-inside: avoid; }
.toc li::before { content: counter(toc, decimal-leading-zero); flex: none; padding-top: 2px; font-family: var(--mono); font-size: 11px; color: var(--orange); }
.toc a { color: var(--grey); transition: color .15s; }
.toc a:hover, .toc a.on { color: var(--ink); }
.toc a.on { font-weight: 600; }

@media (min-width: 1100px) {
  .cs-layout { max-width: 1160px; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0 72px; align-items: start; }
  .cs-side { position: sticky; top: 112px; }
  .cs-side .toc { margin: 0; border-bottom: 0; }
  .toc ol { columns: 1; }
  .cs-layout .prose { max-width: none; margin: 0; }
  .cs-layout .prose > p, .cs-layout .prose > ul, .cs-layout .prose > h2 { max-width: 760px; }
  .cs-layout .post-end { max-width: none; }
  .cs-layout .pull { grid-template-columns: auto minmax(0, 560px); gap: 8px 44px; align-items: center; }
  .cs-layout .prose .chart-fig { max-width: 640px; }
}
.prose h2[id] { scroll-margin-top: 100px; }
.prose .scope { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--grey); }

/* pull-outs: one big figure with its explanation, set off by rules, not boxes */
.pull { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 6px 28px; align-items: baseline; margin: 2em 0; padding: 22px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.pull b { font-size: clamp(44px, 5vw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ink); white-space: nowrap; }
.pull p { margin: 0; font-size: .95em; line-height: 1.55; color: #333; }
.pull p strong { color: var(--ink); }
.pull.warn b { color: var(--orange); }

/* the stack, top to bottom */
.pipe { list-style: none; margin: 1.8em 0; padding: 0; border-top: 1px solid var(--ink); }
.prose .pipe li { display: grid; grid-template-columns: 80px 1fr; gap: 4px 20px; padding: 14px 0; margin: 0; border-bottom: 1px solid var(--line); }
.prose .pipe li::before { display: none; }
.pipe .lang { font-family: var(--mono); font-size: 12px; color: var(--orange); padding-top: .35em; }
.pipe .name { font-weight: 600; color: var(--ink); line-height: 1.35; }
.pipe .what { grid-column: 2; font-size: .88em; line-height: 1.5; color: var(--grey); }

.prose .ledger td { white-space: normal; vertical-align: top; min-width: 150px; }
.prose .ledger td:first-child { font-weight: 600; color: var(--ink); min-width: 120px; }
.prose .ledger td:last-child { font-family: var(--mono); font-size: .9em; color: var(--ink); min-width: 170px; }
.prose td.num, .prose th.num { text-align: right; font-variant-numeric: tabular-nums; }
.prose tr.total td { font-weight: 700; color: var(--ink); border-top: 1px solid var(--ink); }
.prose .neg { color: #b42318; }

.prose .chart-fig { border: 1px solid var(--line); padding: 16px 16px 6px; }
.prose .chart-fig figcaption { margin: 8px 0 10px; }

.lessons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 36px; margin: 1.2em 0 1.6em; }
.lessons h3 { margin: 0 0 .3em; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }
.lessons ul { margin: 0; font-size: .95em; }

@media (max-width: 640px) {
  .pull { grid-template-columns: 1fr; }
  .toc ol { columns: 1; }
  .lessons { grid-template-columns: 1fr; gap: 20px; }
  .prose .pipe li { grid-template-columns: 1fr; }
  .pipe .what { grid-column: 1; }
}

@media (max-width: 860px) {
  footer { grid-template-columns: minmax(0, 1fr); }
  footer nav { flex-wrap: wrap; gap: 12px 24px; }
}
@media (max-width: 640px) {
  .prose .ledger thead { display: none; }
  .prose .ledger, .prose .ledger tbody, .prose .ledger tr, .prose .ledger td { display: block; min-width: 0; }
  .prose .ledger tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .prose .ledger td { padding: 2px 0; border: 0; }
  .prose .ledger td:last-child { margin-top: 6px; }
}
.prose .results td:first-child { white-space: normal; min-width: 150px; }
.prose em { padding-right: .06em; }
.project em, .intro em, .deck em { padding-right: .06em; }
.pull { grid-template-columns: 1fr; gap: 10px; }
.pull p { max-width: 560px; }
@media (max-width: 640px) {
  .prose .results, .prose .table-wrap table { font-size: .8em; }
  .prose .results th, .prose .results td, .prose .table-wrap td, .prose .table-wrap th { white-space: normal; padding: 9px 6px; }
  .prose .results td:first-child { min-width: 0; }
  .hero .ctas .btn { justify-content: center; }
  .hero .ctas .btn-white { flex-basis: 100%; }
  .hero .ctas .btn-ghost { flex: 1; }
}
.prose td.num strong { white-space: nowrap; }