/* ==========================================================================
   coldfusionmaster.com · "Frost & Ember"
   Palette: deep ink-teal base, frost-cyan primary accent, ember-amber warmth.
   Edit the custom properties below to retheme the whole site.
   ========================================================================== */

/* Self-hosted fonts (latin subsets, variable woff2; SIL Open Font License). Preloaded in <head>. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../assets/fonts/plex-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/plex-sans-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../assets/fonts/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Metric-matched fallbacks so text doesn't reflow when the web fonts arrive. */
@font-face { font-family: "Plex Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 101.15%; }
@font-face { font-family: "Grotesk Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 101.4%; }

:root {
  --ink-950: #0a1113;          /* page background */
  --ink-900: #0f1a1d;          /* raised surfaces */
  --ink-800: #172629;          /* borders, tracks */
  --ink-700: #22363a;

  --text: #a9bcbf;             /* body copy */
  --text-strong: #e9f4f5;      /* headings */
  --muted: #768b8f;            /* meta, labels */

  --ice: #8fe9f3;              /* primary accent: frost */
  --ice-rgb: 143 233 243;
  --ember: #f3b55c;            /* secondary accent: warm amber */
  --ember-rgb: 243 181 92;

  --font-display: "Space Grotesk", "Grotesk Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Plex Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 10px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Updated by JS for the spotlight + grid reveal */
  --mx: 50vw;
  --my: 30vh;
  --ex: 50vw;
  --ey: 30vh;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink-950);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgb(var(--ice-rgb) / .28); color: var(--text-strong); }

a { color: inherit; text-decoration: none; }
img, svg { display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; color: var(--text-strong); font-family: var(--font-display); }
p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--ice);
  color: var(--ink-950);
  font-weight: 600;
  border-radius: 6px;
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   Decorative layers
   -------------------------------------------------------------------------- */

/* Blueprint grid + film grain. Painted once and never repainted: the brighter
   "reveal" near the cursor is a separate small layer (see .fx-reveal). */
.fx-grid {
  --grid-alpha: .007;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(var(--ice-rgb) / var(--grid-alpha)) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--ice-rgb) / var(--grid-alpha)) 1px, transparent 1px);
  background-size: 48px 48px;
  contain: strict;
}
.fx-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .07;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Dual-tone spotlight. js/main.js fills this host with three small layers and moves
   them with transform only (compositor work, no style recalc or repaint per frame):
   - .fx-glow--ice   frost halo, tracks the pointer exactly
   - .fx-glow--ember warm core that eases after it like a comet
   - .fx-reveal      brighter blueprint grid around the pointer (masked circle whose
                     inner grid is counter-translated so the lines stay put) */
.fx-spotlight {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.fx-spotlight.is-on { opacity: 1; }
.fx-spotlight > * {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: translate3d(-9999px, -9999px, 0);
}
.fx-spotlight.is-on > *,
.fx-spotlight.is-on .fx-reveal-grid { will-change: transform; }
.fx-glow--ice {
  width: 768px;
  height: 768px;
  background: radial-gradient(circle closest-side, rgb(var(--ice-rgb) / .075), transparent);
}
.fx-glow--ember {
  width: 252px;
  height: 252px;
  background: radial-gradient(circle closest-side, rgb(var(--ember-rgb) / .07), transparent);
}
.fx-reveal {
  width: 840px;
  height: 840px;
  overflow: hidden;
  -webkit-mask: radial-gradient(circle closest-side, #000 0%, rgb(0 0 0 / .15) 55%, transparent 100%) no-repeat;
          mask: radial-gradient(circle closest-side, #000 0%, rgb(0 0 0 / .15) 55%, transparent 100%) no-repeat;
}
.fx-reveal-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image:
    linear-gradient(rgb(var(--ice-rgb) / .048) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--ice-rgb) / .048) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.layout {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 0;
}

@media (min-width: 768px) {
  .layout { padding: 5rem 3rem 0; }
}

@media (min-width: 1024px) {
  .layout {
    display: flex;
    justify-content: space-between;
    gap: 4rem;
    padding: 0 4rem;
  }
  .intro {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 46%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4.5rem 0 3rem;
  }
  .layout > main {
    width: 54%;
    padding: 4.5rem 0 4rem;
  }
}

main:focus { outline: none; }

/* --------------------------------------------------------------------------
   Intro (left column)
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--muted);
}

/* Frost & Ember ring. JS points the ice highlight toward the cursor (--ring-angle)
   and warms the glow as the cursor gets close (--glow, 0 to 1). */
.portrait {
  --ring-angle: 210deg;
  --glow: 0;
  position: relative;
  flex: none;
  width: 96px;
  height: 96px;
  margin-bottom: 1.6rem;
  padding: 2px;
  border-radius: 50%;
  isolation: isolate;
  box-shadow:
    0 0 0 1px rgb(var(--ice-rgb) / .06),
    0 12px 32px -14px rgb(var(--ice-rgb) / .45),
    0 0 6px rgb(var(--ice-rgb) / .08);
}
/* Ring: conic gradient painted once, then rotated (compositor-only). */
.portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--ice) 0deg,
    rgb(var(--ice-rgb) / .12) 90deg,
    rgb(var(--ember-rgb) / .85) 180deg,
    rgb(var(--ember-rgb) / .12) 270deg,
    var(--ice) 360deg);
  transform: rotate(var(--ring-angle));
}
/* Proximity glow: full-strength shadow painted once, then faded with opacity. */
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  box-shadow: 0 0 32px 2px rgb(var(--ice-rgb) / .3);
  opacity: var(--glow);
}
.portrait.is-tracking::before,
.portrait.is-tracking::after { will-change: transform, opacity; }
.portrait picture { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.portrait-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--ink-950);
  background: var(--ink-900);
}
@media (min-width: 1024px) {
  .portrait { width: 120px; height: 120px; margin-bottom: 1.4rem; }
  .intro .tagline { max-width: 26rem; }
}
@media (min-width: 1280px) {
  .portrait { width: 132px; height: 132px; padding: 2.5px; }
}

.status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ice);
}
.status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgb(var(--ice-rgb) / .55);
  animation: pulse 2.8s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  70%, 100% { transform: scale(3.25); opacity: 0; }
}

.name {
  font-size: clamp(2.5rem, 6vw, 3.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
}
.name a {
  background: linear-gradient(100deg, var(--text-strong) 30%, var(--ice) 75%, var(--text-strong) 100%);
  background-size: 220% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  transition: background-position 1.2s var(--ease);
}
.name a:hover { background-position: 100% 0; }

.headline {
  margin-top: .9rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  font-weight: 500;
  color: var(--text-strong);
  letter-spacing: -.01em;
}
.headline .amp { color: var(--ember); }

.intro-meta {
  margin-top: .6rem;
  max-width: 24rem;
  font: .72rem/1.7 var(--font-mono);
  letter-spacing: .04em;
  color: var(--muted);
}

.tagline {
  margin-top: 1rem;
  max-width: 22rem;
  color: var(--text);
}

/* In-page nav with animated indicator line (desktop only) */
.section-nav { display: none; }

@media (min-width: 1024px) {
  .section-nav { display: block; margin-top: 2.5rem; }
  .section-nav li + li { margin-top: .15rem; }
  .section-nav a {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    padding: .42rem 0;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .25s var(--ease);
  }
  .nav-index { width: 1.4rem; color: var(--ink-700); transition: color .25s var(--ease); }
  .nav-line {
    position: relative;
    height: 1px;
    width: 2rem;
    background: var(--ink-700);
    transition: width .35s var(--ease), background-color .35s var(--ease);
  }
  /* small "node" at the end of the line */
  .nav-line::after {
    content: "";
    position: absolute;
    right: -2px;
    top: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transform: scale(.4);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .section-nav a:hover,
  .section-nav a:focus-visible { color: var(--text-strong); }
  .section-nav a:hover .nav-line,
  .section-nav a:focus-visible .nav-line { width: 3.5rem; background: var(--text-strong); }

  .section-nav a.is-active { color: var(--ice); }
  .section-nav a.is-active .nav-index { color: var(--ember); }
  .section-nav a.is-active .nav-line { width: 4.5rem; background: var(--ice); color: var(--ice); }
  .section-nav a.is-active .nav-line::after { opacity: 1; transform: scale(1); }
}

.intro-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-top: 2rem;
}

.socials { display: flex; gap: 1.1rem; }
.socials a {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--muted);
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.socials a:hover, .socials a:focus-visible { color: var(--ice); transform: translateY(-2px); }
.socials svg { width: 22px; height: 22px; fill: currentColor; }

.kbd-hint {
  display: none;
  align-items: center;
  gap: .5rem;
  padding: 0;
  background: none;
  border: 0;
  font: 500 .72rem/1 var(--font-mono);
  letter-spacing: .06em;
  color: var(--muted);
  cursor: pointer;
}
.kbd-hint:hover { color: var(--text-strong); }
@media (hover: hover) and (pointer: fine) { .kbd-hint { display: inline-flex; } }

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 .35rem;
  font: 500 .72rem/1 var(--font-mono);
  color: var(--text-strong);
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-bottom-width: 2px;
  border-radius: 5px;
}

/* --------------------------------------------------------------------------
   Sections (right column)
   -------------------------------------------------------------------------- */

.section {
  margin-top: 4rem;
  scroll-margin-top: 1.5rem;
}
.section:first-child { margin-top: 3.5rem; }

@media (min-width: 1024px) {
  .section { margin-top: 0; margin-bottom: 7rem; scroll-margin-top: 6rem; }
  .section:first-child { margin-top: 0; }
}

/* Mobile: sticky translucent section headers. Desktop: visually hidden (nav does the job). */
.section-title {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin: 0 -1.5rem 1.5rem;
  padding: 1.1rem 1.5rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-strong);
  background: rgb(10 17 19 / .78);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid rgb(var(--ice-rgb) / .08);
}
.section-index { color: var(--ember); }

@media (min-width: 768px) {
  .section-title { margin: 0 -3rem 1.5rem; padding: 1.1rem 3rem; }
}
@media (min-width: 1024px) {
  .section-title {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
}

.prose p + p { margin-top: 1.1rem; }
.prose strong { color: var(--text-strong); font-weight: 500; }

.b-side {
  position: relative;
  margin-top: 1.6rem !important;
  padding: 1rem 1.15rem 1rem 1.15rem;
  border-left: 2px solid var(--ember);
  background: linear-gradient(90deg, rgb(var(--ember-rgb) / .07), transparent 80%);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.b-side-label {
  display: inline-block;
  margin-right: .5rem;
  padding: .1rem .45rem;
  font: 500 .65rem/1.6 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-950);
  background: var(--ember);
  border-radius: 4px;
  vertical-align: .12em;
}

.section-lede { margin-bottom: 1.5rem; color: var(--muted); font-size: .95rem; }

/* --------------------------------------------------------------------------
   Now Building: terminal card
   -------------------------------------------------------------------------- */

.terminal {
  overflow: hidden;
  background: linear-gradient(180deg, rgb(var(--ice-rgb) / .04), rgb(15 26 29 / .9));
  border: 1px solid rgb(var(--ice-rgb) / .14);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px -30px rgb(var(--ice-rgb) / .35);
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem .9rem;
  border-bottom: 1px solid rgb(var(--ice-rgb) / .1);
}
.terminal-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-700); }
.terminal-bar span:first-child { background: rgb(var(--ember-rgb) / .8); }
.terminal-bar p { margin-left: auto; font: .7rem/1 var(--font-mono); color: var(--muted); letter-spacing: .05em; }

.terminal-body { padding: 1.1rem 1.1rem 1.2rem; font-size: .93rem; }
.terminal-body li { display: grid; grid-template-columns: auto 6.5rem 1fr; gap: .6rem; align-items: baseline; }
@media (max-width: 520px) {
  .terminal-body li { grid-template-columns: auto 1fr; row-gap: .1rem; }
  .term-text { grid-column: 2; }
}
.terminal-body li + li { margin-top: .55rem; }
.prompt { font-family: var(--font-mono); color: var(--ember); }
.term-key {
  font: 500 .75rem/1.6 var(--font-mono);
  color: var(--ice);
}
.term-cursor {
  display: inline-block;
  width: .55rem;
  height: 1.05rem;
  background: var(--ice);
  transform: translateY(3px);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* --------------------------------------------------------------------------
   Cards (experience + projects)
   -------------------------------------------------------------------------- */

.card-list > li + li { margin-top: 1rem; }

.card {
  position: relative;
  display: grid;
  gap: .5rem;
  padding: 1.25rem 0;
  border-radius: var(--radius);
  transition: opacity .3s var(--ease);
}

@media (min-width: 640px) {
  .card { grid-template-columns: 9rem 1fr; gap: 1.5rem; }
}

/* the hover surface lives on a pseudo-element so it can bleed past the text */
.card::before {
  content: "";
  position: absolute;
  inset: 0 -1.25rem;
  z-index: -1;
  border-radius: var(--radius);
  border: 1px solid rgb(var(--ice-rgb) / .14);
  background: rgb(var(--ice-rgb) / .035);
  box-shadow: inset 0 1px 0 rgb(var(--ice-rgb) / .08), 0 18px 40px -28px rgb(var(--ice-rgb) / .45);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
/* frost edge that grows down the left side on hover */
.card::after {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 18%;
  bottom: 18%;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--ice), var(--ember));
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .4s var(--ease);
}

.card-meta {
  padding-top: .2rem;
  font: 500 .72rem/1.6 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.card-title { font-size: 1.05rem; font-weight: 600; line-height: 1.35; letter-spacing: -.005em; transition: color .25s var(--ease); }
.card-at { font-weight: 500; }
.card-place { margin-top: .2rem; font: .72rem/1.6 var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.card-kicker { margin-bottom: .25rem; font: 500 .7rem/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ember); }
.card-sub { margin-top: .9rem; font-size: .85rem; color: var(--muted); }
.client-list { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin-top: .45rem; }
.client-list li { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--text-strong); }
.client-list li::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--ember); }
.card-stat {
  display: inline-block;
  margin-top: .85rem;
  padding: .35rem .7rem;
  font: 500 .75rem/1.5 var(--font-mono);
  color: var(--ember);
  background: rgb(var(--ember-rgb) / .07);
  border: 1px solid rgb(var(--ember-rgb) / .2);
  border-radius: 6px;
}
.card-link {
  display: inline;
  transition: color .25s var(--ease);
}
/* stretch the link over the whole card */
.card-link::before {
  content: "";
  position: absolute;
  inset: 0 -1.25rem;
  z-index: 1;
  border-radius: var(--radius);
}
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::before { outline: 2px solid var(--ice); outline-offset: 2px; }

.card-arrow {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: .2rem;
  vertical-align: -.1em;
  transition: transform .25s var(--ease);
}

.card-text { margin-top: .55rem; font-size: .95rem; }

.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.tags li {
  padding: .22rem .65rem;
  font: 500 .72rem/1.5 var(--font-mono);
  color: var(--ice);
  background: rgb(var(--ice-rgb) / .08);
  border: 1px solid rgb(var(--ice-rgb) / .12);
  border-radius: 999px;
}

/* Hover / focus state */
.card:hover::before,
.card:focus-within::before { opacity: 1; }
.card:hover::after,
.card:focus-within::after { transform: scaleY(1); }
.card:hover .card-title,
.card:focus-within .card-title,
.card:hover .card-link,
.card:focus-within .card-link { color: var(--ice); }
.card:hover .card-arrow,
.card:focus-within .card-arrow { transform: translate(3px, -3px); }

/* Dim the siblings while one card is active (desktop pointer only) */
@media (hover: hover) and (min-width: 1024px) {
  /* Dim siblings only while a card is actually hovered (not the gaps between cards). */
  .card-list:has(> .card:hover) > .card:not(:hover) { opacity: .45; }
}
.card-list:focus-within > .card:not(:focus-within) { opacity: .55; }

/* Project cards: thumbnail column */
.card-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  max-width: 9rem;
  border-radius: 8px;
  border: 1px solid var(--ink-700);
  background:
    radial-gradient(circle at 30% 30%, rgb(var(--ice-rgb) / .22), transparent 60%),
    radial-gradient(circle at 80% 80%, rgb(var(--ember-rgb) / .18), transparent 55%),
    var(--ink-900);
  font: 500 .8rem/1 var(--font-mono);
  letter-spacing: .08em;
  color: rgb(var(--ice-rgb) / .8);
  transition: border-color .3s var(--ease);
  order: 2;
}
@media (min-width: 640px) { .card-thumb { order: 0; margin-top: .25rem; } }
@media (max-width: 639px) { .card--project .card-thumb { display: none; } }
.card:hover .card-thumb { border-color: rgb(var(--ice-rgb) / .35); }

.cta-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 2.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-strong);
  border-bottom: 1px solid rgb(var(--ice-rgb) / .3);
  padding-bottom: .15rem;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.cta-link svg { width: 1rem; height: 1rem; transition: transform .25s var(--ease); }
.cta-link:hover { color: var(--ice); border-color: var(--ice); }
.cta-link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Toolbox constellation
   -------------------------------------------------------------------------- */

.constellation {
  position: relative;
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--ink-800);
  border-radius: var(--radius);
  background:
    radial-gradient(1px 1px at 12% 22%, rgb(var(--ice-rgb) / .5), transparent),
    radial-gradient(1px 1px at 68% 14%, rgb(var(--ice-rgb) / .4), transparent),
    radial-gradient(1px 1px at 40% 78%, rgb(var(--ember-rgb) / .5), transparent),
    radial-gradient(1px 1px at 88% 62%, rgb(var(--ice-rgb) / .35), transparent),
    rgb(15 26 29 / .55);
}
@media (min-width: 640px) { .constellation { grid-template-columns: 1fr 1fr; } }

.constellation-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.constellation-lines line {
  stroke: rgb(var(--ice-rgb) / .75);
  stroke-width: 1.25;
  filter: drop-shadow(0 0 3px rgb(var(--ice-rgb) / .6));
  stroke-dasharray: 3 4;
  animation: dash 1.2s linear infinite;
}
@keyframes dash { to { stroke-dashoffset: -14; } }

.star-group { position: relative; }
.star-group-title {
  margin-bottom: .65rem;
  font: 500 .7rem/1.4 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.star-group ul { display: flex; flex-wrap: wrap; gap: .5rem; }

.star {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .7rem .3rem .55rem;
  font-size: .85rem;
  color: var(--text);
  background: var(--ink-950);
  border: 1px solid var(--ink-700);
  border-radius: 999px;
  cursor: default;
  transition: color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), opacity .25s var(--ease);
}
.star::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.star--major { color: var(--text-strong); font-weight: 500; border-color: rgb(var(--ice-rgb) / .3); }
.star--ai { border-color: rgb(var(--ember-rgb) / .35); }
.star--ai::before { background: var(--ember); }
.star--ice::before { background: var(--ice); box-shadow: 0 0 8px rgb(var(--ice-rgb) / .8); }

.constellation.is-lit .star { opacity: .4; }
.constellation .star.is-source,
.constellation .star.is-linked { opacity: 1; }
.star.is-source {
  color: var(--text-strong);
  border-color: var(--ice);
  box-shadow: 0 0 0 3px rgb(var(--ice-rgb) / .12);
}
.star.is-source::before { background: var(--ice); box-shadow: 0 0 10px var(--ice); }
.star.is-linked { color: var(--text-strong); border-color: rgb(var(--ember-rgb) / .6); }
.star.is-linked::before { background: var(--ember); }

/* --------------------------------------------------------------------------
   Kind Words (testimonials)
   -------------------------------------------------------------------------- */
.card--quote { display: block; padding: 1.5rem 0; }
.card--quote figure { margin: 0; }
.card--quote blockquote { position: relative; margin: 0; padding-left: 2.2rem; }
.card--quote blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -.55rem;
  font: 700 3rem/1 var(--font-display);
  color: rgb(var(--ice-rgb) / .45);
  transition: color .3s var(--ease);
}
.card--quote:hover blockquote::before { color: var(--ember); }
.card--quote blockquote p { font-size: 1.02rem; line-height: 1.7; color: var(--text-strong); }
.card--quote figcaption { display: flex; align-items: center; gap: .85rem; margin-top: 1.1rem; padding-left: 2.2rem; }
.quote-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  font: 600 .78rem/1 var(--font-display);
  color: var(--ink-950);
  background: linear-gradient(135deg, var(--ice), var(--ember));
}
.quote-who { display: grid; gap: .1rem; }
.quote-name { font-family: var(--font-display); font-weight: 600; color: var(--text-strong); transition: color .25s var(--ease); }
.card--quote:hover .quote-name, .card--quote:focus-within .quote-name { color: var(--ice); }
.quote-role { font-size: .82rem; color: var(--text); line-height: 1.45; }
.quote-rel { font: .7rem/1.6 var(--font-mono); letter-spacing: .04em; color: var(--muted); }

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

/* --------------------------------------------------------------------------
   Contact block (footer)
   -------------------------------------------------------------------------- */
.contact {
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  border: 1px solid rgb(var(--ice-rgb) / .14);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgb(var(--ice-rgb) / .05), rgb(var(--ember-rgb) / .04));
}
.contact-title { margin-bottom: .5rem; font-size: 1.25rem; letter-spacing: -.01em; }
.contact p { color: var(--text); font-size: .95rem; overflow-wrap: anywhere; }
.site-footer .contact a { color: var(--ice); border-bottom: 1px solid rgb(var(--ice-rgb) / .35); }
.site-footer .contact a:hover { border-color: var(--ice); }

/* --------------------------------------------------------------------------
   Archive page
   -------------------------------------------------------------------------- */
.archive {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 0;
}
@media (min-width: 768px) { .archive { padding: 6rem 3rem 0; } }
@media (min-width: 1024px) { .archive { padding: 6rem 4rem 0; } }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font: 500 .85rem/1 var(--font-display);
  color: var(--ice);
}
.back-link svg { width: 1rem; height: 1rem; transition: transform .25s var(--ease); }
.back-avatar {
  display: block;
  width: 32px;
  height: 32px;
  padding: 1.5px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--ice), rgb(var(--ember-rgb) / .85), var(--ice));
}
.back-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--ink-950); object-fit: cover; }
.back-link:hover svg { transform: translateX(-4px); }
.archive-title {
  margin-top: 1rem;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -.03em;
}
.archive-lede { margin-top: .75rem; max-width: 36rem; color: var(--text); }

.archive-table {
  width: 100%;
  margin-top: 3rem;
  border-collapse: collapse;
  text-align: left;
}
.archive-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 1rem .75rem 1rem 0;
  font: 500 .72rem/1.4 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-strong);
  background: rgb(10 17 19 / .85);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid rgb(var(--ice-rgb) / .12);
}
.archive-table td {
  padding: 1.1rem .75rem 1.1rem 0;
  vertical-align: top;
  border-bottom: 1px solid var(--ink-800);
  transition: background-color .25s var(--ease);
}
.archive-table tbody tr { transition: opacity .3s var(--ease); }
.archive-table tbody tr:hover td { background: rgb(var(--ice-rgb) / .03); }
.archive-table tbody tr:hover .arch-title { color: var(--ice); }
@media (hover: hover) and (min-width: 1024px) {
  .archive-table tbody:hover tr:not(:hover) { opacity: .55; }
}
.arch-date {
  width: 9.5rem;
  font: 500 .75rem/1.7 var(--font-mono);
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
}
.arch-role > span { display: block; }
.arch-title { font: 600 1rem/1.4 var(--font-display); color: var(--text-strong); transition: color .25s var(--ease); }
.arch-company { margin-top: .1rem; color: var(--text-strong); opacity: .85; font-size: .92rem; }
.arch-loc { font: .7rem/1.6 var(--font-mono); color: var(--muted); }
.arch-short { margin-top: .4rem; font-size: .9rem; color: var(--text); max-width: 36rem; }
.arch-tech { width: 34%; font-size: .82rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 767px) {
  .arch-tech { display: none; }
  .arch-date { width: 6.5rem; white-space: normal; }
}

.archive-subtitle {
  margin: 3.5rem 0 .75rem;
  font: 500 .78rem/1.4 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ember);
}
.archive-edu p { color: var(--text); }
.archive-edu strong { color: var(--text-strong); font-weight: 500; }
.archive-edu a { color: var(--ice); border-bottom: 1px solid rgb(var(--ice-rgb) / .35); }
.page-archive .site-footer { margin-top: 4rem; }
.site-footer .footer-note { max-width: 30rem; }

/* --------------------------------------------------------------------------
   Placeholders (TODO-CONTENT). Visible on purpose so they're easy to spot.
   -------------------------------------------------------------------------- */
.todo { color: var(--ember); font-style: italic; }
.tags li.todo { color: var(--ember); background: rgb(var(--ember-rgb) / .07); border-color: rgb(var(--ember-rgb) / .2); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding: 2rem 0 4rem;
  font-size: .85rem;
  color: var(--muted);
}
.site-footer a { color: var(--text); border-bottom: 1px solid var(--ink-700); }
.site-footer a:hover { color: var(--ice); border-color: var(--ice); }
.footer-mono { margin-top: .75rem; font: .72rem/1.6 var(--font-mono); letter-spacing: .06em; }

/* --------------------------------------------------------------------------
   Shortcuts dialog
   -------------------------------------------------------------------------- */
.shortcuts {
  width: min(92vw, 24rem);
  padding: 1.5rem;
  color: var(--text);
  background: var(--ink-900);
  border: 1px solid rgb(var(--ice-rgb) / .2);
  border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .7), 0 0 0 1px rgb(var(--ice-rgb) / .05);
}
.shortcuts::backdrop { background: rgb(5 9 10 / .65); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.shortcuts h2 { margin-bottom: 1rem; font-size: 1.05rem; }
.shortcuts dl { margin: 0; display: grid; gap: .65rem; }
.shortcuts dl > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.shortcuts dt { display: flex; gap: .3rem; align-items: center; color: var(--muted); }
.shortcuts dd { margin: 0; font-size: .9rem; }
.dialog-close {
  margin-top: 1.4rem;
  width: 100%;
  padding: .6rem;
  font: 600 .85rem/1 var(--font-display);
  color: var(--ink-950);
  background: var(--ice);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.dialog-close:hover { background: var(--text-strong); }

/* --------------------------------------------------------------------------
   Entrance reveal (enabled by JS only, so content is never hidden without it)
   -------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Reduced motion: no spotlight, no animation, no smooth scroll
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fx-spotlight { display: none; }
  .fx-grid { --grid-alpha: .02; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* Short desktop viewports (e.g. 13" laptops): tighten the sticky column so it never overflows. */
@media (min-width: 1024px) and (max-height: 820px) {
  .intro { padding: 2.25rem 0 1.75rem; }
  .portrait { width: 96px; height: 96px; margin-bottom: .9rem; }
  .eyebrow { margin-bottom: .7rem; }
  .name { font-size: clamp(2.25rem, 4.4vw, 3.1rem); }
  .headline { margin-top: .6rem; }
  .section-nav { margin-top: 1.4rem; }
  .section-nav a { padding: .3rem 0; }
  .tagline { font-size: .95rem; line-height: 1.6; }
  .tagline { margin-top: .75rem; }
  .intro-meta { margin-top: .45rem; }
  .layout > main { padding-top: 2.25rem; }
}
/* Very short desktop viewports: drop the secondary meta line (the same facts are in About). */
@media (min-width: 1024px) and (max-height: 720px) {
  .intro-meta { display: none; }
}

/* ==========================================================================
   Contact gate (architect variant): pill triggers + "Route the signal" modal
   ========================================================================== */
.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .9rem .45rem .75rem;
  font: 500 .78rem/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ice);
  background: rgb(var(--ice-rgb) / .06);
  border: 1px solid rgb(var(--ice-rgb) / .3);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.contact-pill svg { width: 16px; height: 16px; fill: currentColor; }
.contact-pill:hover { background: rgb(var(--ice-rgb) / .12); border-color: var(--ice); transform: translateY(-1px); }
.contact-pill--lg { margin-top: 1rem; padding: .7rem 1.1rem .7rem .95rem; font-size: .8rem; }
.contact-noscript { margin-top: .75rem; font-size: .85rem; color: var(--muted); }

.contact-modal {
  --tile: clamp(44px, 12.4vw, 60px);
  width: min(94vw, 33rem);
  max-height: calc(100dvh - 2rem);
  padding: 1.6rem 1.5rem 1.4rem;
  overflow: auto;
  color: var(--text);
  background:
    linear-gradient(rgb(var(--ice-rgb) / .03) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgb(var(--ice-rgb) / .03) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--ink-900);
  border: 1px solid rgb(var(--ice-rgb) / .22);
  border-radius: 16px;
  box-shadow: 0 40px 100px -30px rgb(0 0 0 / .8), 0 0 0 1px rgb(var(--ice-rgb) / .05), 0 0 60px -20px rgb(var(--ice-rgb) / .25);
}
.contact-modal::backdrop { background: rgb(4 8 9 / .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.contact-modal[open] { animation: cm-in .28s var(--ease); }
@keyframes cm-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@media (max-width: 480px) { .contact-modal { padding: 1.3rem 1rem 1.1rem; } }

.modal-x {
  position: absolute;
  top: .8rem;
  right: .8rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.modal-x svg { width: 1rem; height: 1rem; }
.modal-x:hover { color: var(--text-strong); border-color: var(--ink-700); }

.cm-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font: 500 .7rem/1.4 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ember);
}
.cm-kicker .status-dot { background: var(--ember); }
.cm-kicker .status-dot::after { background: rgb(var(--ember-rgb) / .55); }
.cm-kicker--ok { color: var(--ice); }
.cm-kicker--ok .status-dot { background: var(--ice); }
.cm-kicker--ok .status-dot::after { background: rgb(var(--ice-rgb) / .55); }
.cm-title { margin-top: .55rem; padding-right: 2rem; font-size: 1.3rem; letter-spacing: -.01em; line-height: 1.25; }
.cm-title:focus { outline: none; }
.cm-desc { margin-top: .5rem; font-size: .88rem; line-height: 1.6; color: var(--text); }
.cm-you { color: var(--ember); font-weight: 500; }
@media (hover: none) { .cm-kbd-hint { display: none; } }
.cm-inbox { color: var(--ice); font-weight: 500; }

/* Board: [source] grid [inbox] */
.cm-board {
  display: grid;
  grid-template-columns: 2.1rem auto 2.1rem;
  column-gap: .35rem;
  justify-content: center;
  margin: 1.25rem auto .25rem;
}
.cm-grid { grid-column: 2; display: grid; gap: 4px; }
.cm-row { display: grid; grid-template-columns: repeat(var(--cols, 5), var(--tile)); gap: 4px; }
.cm-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  font: 500 .58rem/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cm-node { position: relative; }
.cm-node-label { position: absolute; top: calc(50% + 12px); left: 50%; transform: translateX(-50%); }
.cm-node::before { content: ""; position: absolute; top: calc(50% - 1.5px); width: .7rem; height: 3px; border-radius: 2px; }
.cm-node--src::before { right: -.4rem; background: var(--ember); }
.cm-node--dst::before { left: -.4rem; background: var(--ink-700); transition: background-color .2s var(--ease); }
.cm-board.is-complete .cm-node--dst::before { background: var(--ember); }
.cm-node--src { grid-column: 1; color: var(--ember); }
.cm-node--dst { grid-column: 3; color: var(--muted); }
.cm-node-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 12px rgb(var(--ember-rgb) / .8); }
.cm-node--dst svg { position: relative; left: 3px; width: 20px; height: 20px; fill: currentColor; transition: filter .3s var(--ease); }
.cm-board.is-complete .cm-node--dst { color: var(--ice); }
.cm-board.is-complete .cm-node--dst svg { filter: drop-shadow(0 0 6px rgb(var(--ice-rgb) / .9)); }

.cm-tile {
  position: relative;
  width: var(--tile);
  height: var(--tile);
  padding: 0;
  background: rgb(10 17 19 / .9);
  border: 1px solid var(--ink-800);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cm-tile:hover { border-color: rgb(var(--ice-rgb) / .35); }
.cm-tile:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.cm-tile-inner { display: block; width: 100%; height: 100%; transition: transform .18s var(--ease); }
.cm-tile svg { display: block; width: 100%; height: 100%; }
.cm-tile .p-chan { fill: none; stroke: var(--ink-700); stroke-width: 20; stroke-linecap: butt; }
.cm-tile .p-core { fill: none; stroke: #4c6266; stroke-width: 7; stroke-linecap: butt; transition: stroke .2s var(--ease); }
.cm-tile .p-hub { fill: #4c6266; transition: fill .2s var(--ease); }
.cm-tile.is-live { background: rgb(var(--ice-rgb) / .05); border-color: rgb(var(--ice-rgb) / .22); }
.cm-tile.is-live .p-core { stroke: var(--ice); }
.cm-tile.is-live .p-hub { fill: var(--ice); }
.cm-board.is-complete .cm-tile.is-live .p-core { stroke: var(--ember); }
.cm-board.is-complete .cm-tile.is-live .p-hub { fill: var(--ember); }
.cm-board.is-shake { animation: cm-shake .35s var(--ease); }
@keyframes cm-shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

.cm-status { min-height: 1.4em; margin-top: .7rem; text-align: center; font: .74rem/1.5 var(--font-mono); color: var(--muted); }
.cm-status[data-kind="ok"] { color: var(--ice); }
.cm-status[data-kind="err"] { color: var(--ember); }
.cm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .9rem; }
.cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8.5rem;
  padding: .65rem 1rem;
  font: 600 .85rem/1 var(--font-display);
  color: var(--text-strong);
  background: transparent;
  border: 1px solid var(--ink-700);
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.cm-btn:hover { border-color: rgb(var(--ice-rgb) / .45); }
.cm-btn--primary { color: var(--ink-950); background: var(--ice); border-color: var(--ice); }
.cm-btn--primary:hover { background: var(--text-strong); border-color: var(--text-strong); }
.cm-board.is-complete ~ .cm-actions [data-transmit] { box-shadow: 0 0 0 4px rgb(var(--ice-rgb) / .18); }
.cm-alt { margin-top: 1rem; text-align: center; font-size: .78rem; color: var(--muted); }
.cm-alt a { color: var(--text); border-bottom: 1px solid var(--ink-700); }
.cm-alt a:hover { color: var(--ice); border-color: var(--ice); }

.cm-email {
  margin-top: 1.1rem;
  padding: .85rem 1rem;
  text-align: center;
  font: 500 .92rem/1.4 var(--font-mono);
  color: var(--text-strong);
  background: rgb(var(--ice-rgb) / .05);
  border: 1px dashed rgb(var(--ice-rgb) / .3);
  border-radius: 10px;
  overflow-wrap: anywhere;
  user-select: all;
}
.contact-modal.is-fresh .cm-email { animation: cm-glow 1.2s var(--ease); }
@keyframes cm-glow { 0% { box-shadow: 0 0 0 0 rgb(var(--ember-rgb) / .5); border-color: var(--ember); } 100% { box-shadow: 0 0 0 14px rgb(var(--ember-rgb) / 0); } }

@media (prefers-reduced-motion: reduce) {
  .contact-modal[open], .cm-board.is-shake, .contact-modal.is-fresh .cm-email { animation: none; }
  .cm-tile-inner { transition: none; }
}

/* --------------------------------------------------------------------------
   Kind Words: compact two-column wall (featured first card spans both)
   -------------------------------------------------------------------------- */
#kind-words { container: kw / inline-size; }
.quote-rel:has(.quote-src) { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .55rem; margin-top: .15rem; }
.quote-src {
  display: inline-block;
  padding: 0 .4rem;
  border-radius: 4px;
  border: 1px solid rgb(var(--ice-rgb) / .22);
  color: var(--ice);
  letter-spacing: .06em;
}
.quote-src--letter { color: var(--ember); border-color: rgb(var(--ember-rgb) / .3); }
.quote-src--review { color: var(--text); border-color: var(--ink-700); }
.card--quote-featured blockquote p { font-size: 1.12rem; }

@container kw (min-width: 34rem) {
  .quotes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
  }
  .quotes > li + li { margin-top: 0; }
  .quotes > .card--quote { padding: 1.25rem 1.25rem 1.2rem; }
  /* in the grid the hover surface sits inside the cell instead of bleeding past it */
  .quotes > .card--quote::before,
  .quotes > .card--quote .card-link::before { inset: 0; }
  .quotes > .card--quote::after { left: 0; }
  .quotes > .card--quote blockquote { padding-left: 0; padding-top: 1.35rem; }
  .quotes > .card--quote blockquote::before { top: -.5rem; font-size: 2.4rem; }
  .quotes > .card--quote blockquote p { font-size: .94rem; line-height: 1.65; }
  .quotes > .card--quote figcaption { padding-left: 0; margin-top: .95rem; align-items: flex-start; }
  .quotes > .card--quote .quote-avatar { width: 2.1rem; height: 2.1rem; font-size: .72rem; }
  .quotes > .card--quote .quote-role { font-size: .78rem; }
  .quotes > .card--quote .quote-rel { font-size: .66rem; }
  .quotes > .card--quote-featured,
  .quotes > .card--quote:last-child:nth-child(even) { grid-column: 1 / -1; }
  .quotes > .card--quote-featured { padding: 1.5rem 1.5rem 1.35rem; }
  .quotes > .card--quote-featured blockquote { padding-left: 2.4rem; padding-top: 0; }
  .quotes > .card--quote-featured blockquote::before { top: -.55rem; font-size: 3rem; }
  .quotes > .card--quote-featured blockquote p { font-size: 1.1rem; line-height: 1.6; }
  .quotes > .card--quote-featured figcaption { padding-left: 2.4rem; align-items: center; }
  .quotes > .card--quote:last-child:nth-child(even):not(.card--quote-featured) blockquote { padding-left: 2.4rem; padding-top: 0; }
  .quotes > .card--quote:last-child:nth-child(even):not(.card--quote-featured) blockquote::before { top: -.55rem; font-size: 3rem; }
  .quotes > .card--quote:last-child:nth-child(even):not(.card--quote-featured) figcaption { padding-left: 2.4rem; align-items: center; }
}

/* Contact gate: replay ("Route another signal") + score line */
.cm-btn--replay { gap: .45rem; flex-basis: 100%; max-width: 17.6rem; color: var(--ember); border-color: rgb(var(--ember-rgb) / .35); }
.cm-btn--replay svg { width: 1rem; height: 1rem; flex: none; }
.cm-btn--replay:hover { border-color: var(--ember); background: rgb(var(--ember-rgb) / .08); }
.cm-score {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .45rem;
  margin-top: .7rem;
  padding: .3rem .65rem;
  font: 500 .74rem/1.4 var(--font-mono);
  color: var(--ember);
  background: rgb(var(--ember-rgb) / .08);
  border: 1px solid rgb(var(--ember-rgb) / .28);
  border-radius: 999px;
}
.cm-score::before { content: "\2713"; font-weight: 700; }
.cm-score[hidden] { display: none; }
.contact-modal.is-fresh .cm-score:not([hidden]) { animation: cm-pop .45s var(--ease); }
@keyframes cm-pop { from { transform: scale(.9); opacity: 0; } }
.contact-modal.is-replay [data-puzzle-kicker] { color: var(--ice); }
.contact-modal.is-replay [data-puzzle-kicker] .status-dot { background: var(--ice); }
.contact-modal.is-replay [data-puzzle-kicker] .status-dot::after { background: rgb(var(--ice-rgb) / .55); }
.cm-linkbtn {
  padding: 0;
  font: inherit;
  color: var(--text);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink-700);
  cursor: pointer;
}
.cm-linkbtn:hover { color: var(--ice); border-color: var(--ice); }
@media (prefers-reduced-motion: reduce) { .contact-modal.is-fresh .cm-score:not([hidden]) { animation: none; } }
@media (max-width: 480px) { .cm-email { padding: .8rem .6rem; font-size: clamp(.7rem, 3.2vw, .92rem); } }

/* Contact gate: route-complete "go" state + connected-transmit transition */
.cm-board { position: relative; }
.cm-btn--primary.is-ready {
  color: var(--ink-950);
  background: var(--ember);
  border-color: var(--ember);
  box-shadow: 0 0 0 1px rgb(var(--ember-rgb) / .5), 0 0 18px 2px rgb(var(--ember-rgb) / .45);
  animation: cm-ready 1.6s ease-in-out infinite;
}
.cm-btn--primary.is-ready:hover { background: #ffc06b; border-color: #ffc06b; }
.cm-board.is-complete ~ .cm-actions [data-transmit].is-ready { box-shadow: 0 0 0 1px rgb(var(--ember-rgb) / .5), 0 0 18px 2px rgb(var(--ember-rgb) / .45); }
@keyframes cm-ready {
  0%, 100% { box-shadow: 0 0 0 1px rgb(var(--ember-rgb) / .5), 0 0 12px 0 rgb(var(--ember-rgb) / .35); }
  50% { box-shadow: 0 0 0 4px rgb(var(--ember-rgb) / .22), 0 0 30px 6px rgb(var(--ember-rgb) / .55); }
}
.cm-fx { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 2; }
.cm-fx path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cm-fx-glow { stroke: rgb(var(--ember-rgb) / .55); stroke-width: 16; filter: blur(6px); }
.cm-fx-trail { stroke: #fff4dc; stroke-width: 4.5; }
.cm-fx-head { fill: #fff; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px var(--ember)); }
.cm-tile.is-zap { animation: cm-zap .5s var(--ease) var(--zap-delay, 0ms) both; }
@keyframes cm-zap {
  0% { background-color: rgb(var(--ice-rgb) / .05); }
  25% { background-color: rgb(var(--ember-rgb) / .3); border-color: var(--ember); box-shadow: 0 0 16px rgb(var(--ember-rgb) / .5); }
  100% { background-color: rgb(var(--ember-rgb) / .1); border-color: rgb(var(--ember-rgb) / .5); }
}
.cm-board.is-flare .cm-node--dst { color: var(--ember); }
.cm-board.is-flare .cm-node--dst svg { animation: cm-flare .45s var(--ease) both; }
@keyframes cm-flare {
  0% { transform: scale(1); filter: drop-shadow(0 0 6px rgb(var(--ember-rgb) / .9)); }
  40% { transform: scale(1.55); filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 22px var(--ember)); }
  100% { transform: scale(1.25); filter: drop-shadow(0 0 14px var(--ember)); }
}
.cm-flash { position: absolute; left: 0; width: 100%; overflow: hidden; pointer-events: none; z-index: 3; border-radius: inherit; }
.cm-flash-core {
  position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: radial-gradient(circle, #fff7e6 0%, rgb(var(--ember-rgb) / .85) 30%, rgb(var(--ember-rgb) / .25) 60%, transparent 72%);
  animation: cm-bloom .62s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes cm-bloom { 0% { transform: scale(.2); opacity: 1; } 55% { opacity: .85; } 100% { transform: scale(26); opacity: 0; } }
.contact-modal.is-transmitting [data-view="puzzle"] .cm-btn,
.contact-modal.is-transmitting .cm-tile { pointer-events: none; }
.contact-modal [data-view] { transition: opacity .24s var(--ease), filter .24s var(--ease), transform .24s var(--ease); }
.contact-modal.is-dissolving [data-view="puzzle"] { opacity: 0; filter: blur(6px); transform: scale(.965); }
.contact-modal.is-arriving [data-view="unlocked"] { animation: cm-arrive .46s cubic-bezier(.2,.8,.25,1) both; }
@keyframes cm-arrive { from { opacity: 0; filter: blur(8px); transform: translateY(8px) scale(1.03); } }
@media (prefers-reduced-motion: reduce) {
  .cm-btn--primary.is-ready { animation: none; box-shadow: 0 0 0 2px rgb(var(--ember-rgb) / .35), 0 0 22px 3px rgb(var(--ember-rgb) / .45); }
  .contact-modal [data-view] { transition: opacity .15s linear; }
  .contact-modal.is-dissolving [data-view="puzzle"] { filter: none; transform: none; }
  .contact-modal.is-arriving [data-view="unlocked"] { animation: cm-fade .18s linear both; }
  .cm-tile.is-zap, .cm-board.is-flare .cm-node--dst svg, .cm-flash-core { animation: none; }
}
@keyframes cm-fade { from { opacity: 0; } }
.cm-btn--primary.is-ready:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Mobile & tablet polish (360–1023px): safe areas, 44px tap targets,
   12px minimum text, thumb-reach section menu.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .layout { padding-left: max(1.5rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right)); }
  .archive { padding-left: max(1.5rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .layout, .archive { padding-left: max(3rem, env(safe-area-inset-left)); padding-right: max(3rem, env(safe-area-inset-right)); }
}
.site-footer { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }

@media (max-width: 1023px) {
  /* readable minimums for the mono labels (they sit at 11–11.5px on desktop) */
  .intro-meta, .card-meta, .card-place, .card-kicker, .tags li, .quote-rel, .quotes > .card--quote .quote-rel,
  .star-group-title, .footer-mono, .archive-table thead th, .arch-loc, .b-side-label { font-size: .75rem; }
  .intro-meta { max-width: none; }
  /* room for the floating section pill so it never covers the last footer line */
  .site-footer { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}

/* 44px touch targets wherever the pointer is coarse or the layout is single-column */
@media (pointer: coarse), (max-width: 1023px) {
  .socials { gap: .4rem; margin-left: -.375rem; }
  .socials a { width: 2.75rem; height: 2.75rem; }
  .cta-link { min-height: 2.75rem; }
  .back-link { min-height: 2.75rem; }
  .card--quote .card-link { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -.5rem; }
  .site-footer a { display: inline-block; padding-block: .75rem; margin-block: -.75rem; border-bottom: 0; text-decoration: underline; text-decoration-color: var(--ink-700); text-underline-offset: 3px; }
  .site-footer a:hover { text-decoration-color: var(--ice); }
}

/* Section menu pill (below 1024px; the sidebar nav takes over above that) */
.mnav { display: none; }
@media (max-width: 1023px) {
  html.js .mnav { display: block; }
  .mnav-toggle {
    position: fixed;
    z-index: 40;
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(1rem + env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 3rem;
    max-width: calc(100vw - 2rem);
    padding: 0 1.1rem 0 .95rem;
    font: 500 .78rem/1 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-strong);
    background: rgb(10 17 19 / .82);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgb(var(--ice-rgb) / .28);
    border-radius: 999px;
    box-shadow: 0 12px 30px -10px rgb(0 0 0 / .7), 0 0 0 1px rgb(0 0 0 / .2);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s, border-color .2s var(--ease);
  }
  .mnav.is-shown .mnav-toggle, .mnav.is-open .mnav-toggle, .mnav-toggle:focus-visible {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  }
  .mnav-toggle:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
  .mnav.is-open .mnav-toggle { border-color: var(--ice); }
  .mnav-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mnav-icon { display: grid; gap: 3px; width: 14px; }
  .mnav-icon span { display: block; height: 1.5px; border-radius: 1px; background: var(--ice); transition: transform .2s var(--ease), opacity .2s var(--ease); }
  .mnav-icon span:nth-child(2) { width: 70%; }
  .mnav.is-open .mnav-icon span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
  .mnav.is-open .mnav-icon span:nth-child(2) { opacity: 0; }
  .mnav.is-open .mnav-icon span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

  .mnav-panel {
    position: fixed;
    z-index: 41;
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(4.6rem + env(safe-area-inset-bottom));
    width: min(18rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 6.5rem - env(safe-area-inset-bottom) - env(safe-area-inset-top));
    overflow: auto;
    padding: .5rem;
    background: rgb(10 17 19 / .95);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgb(var(--ice-rgb) / .22);
    border-radius: 14px;
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / .85);
    animation: mnav-in .2s var(--ease);
    overscroll-behavior: contain;
  }
  .mnav-panel[hidden] { display: none; }
  @keyframes mnav-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
  .mnav-panel ol { list-style: none; margin: 0; padding: 0; }
  .mnav-panel ol a {
    display: flex; align-items: center; gap: .8rem;
    min-height: 2.9rem; padding: 0 .8rem;
    font: 500 1rem/1.2 var(--font-display);
    color: var(--text-strong);
    border-radius: 9px;
  }
  .mnav-panel .nav-index { width: 1.5rem; font: 500 .75rem/1 var(--font-mono); color: var(--muted); }
  .mnav-panel ol a.is-active { background: rgb(var(--ice-rgb) / .08); color: var(--ice); }
  .mnav-panel ol a.is-active .nav-index { color: var(--ember); }
  .mnav-panel ol a:active { background: rgb(var(--ice-rgb) / .12); }
  .mnav-extras { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; padding-top: .5rem; border-top: 1px solid var(--ink-800); }
  .mnav-extra {
    flex: 1 1 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 2.75rem; padding: 0 .7rem;
    font: 500 .75rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
    color: var(--ice);
    background: rgb(var(--ice-rgb) / .05);
    border: 1px solid rgb(var(--ice-rgb) / .2);
    border-radius: 9px;
    cursor: pointer;
  }
  .mnav-extra svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
  .mnav-panel a:focus-visible, .mnav-extra:focus-visible { outline: 2px solid var(--ice); outline-offset: -2px; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .mnav-toggle, .mnav-icon span { transition: none; }
  .mnav-panel { animation: none; }
}
@media print { .mnav { display: none !important; } }

/* Contact gate on touch: 44px controls, safe-area-aware sizing */
@media (pointer: coarse), (max-width: 1023px) {
  .contact-pill { min-height: 2.75rem; }
  .modal-x { width: 2.75rem; height: 2.75rem; top: .45rem; right: .45rem; }
  .cm-btn { min-height: 2.75rem; }
  .cm-linkbtn { padding-block: .7rem; margin-block: -.7rem; border-bottom: 0; text-decoration: underline; text-decoration-color: var(--ink-700); text-underline-offset: 3px; }
  .cm-alt a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; border-bottom: 0; text-decoration: underline; text-decoration-color: var(--ink-700); text-underline-offset: 3px; }
}
.contact-modal { max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
@media (max-width: 400px) {
  .contact-modal { width: calc(100vw - 1.25rem - env(safe-area-inset-left) - env(safe-area-inset-right)); padding: 1.2rem .8rem 1rem; }
  .cm-board { grid-template-columns: 1.9rem auto 1.9rem; column-gap: .25rem; }
  .cm-actions .cm-btn { flex: 1 1 8rem; min-width: 0; }
}
@media (min-width: 768px) and (max-width: 1023px) { .portrait { width: 120px; height: 120px; } }


/* Mobile hero portrait: large, with an always-on rotating Frost & Ember ring and breathing glow (no interaction needed). */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes portrait-spin { to { transform: rotate(360deg); } }
@keyframes portrait-breathe {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
@media (max-width: 767px) {
  .portrait {
    width: min(82vw, 360px);
    height: min(82vw, 360px);
    padding: 5px;
    margin: .5rem auto 1.8rem;
    box-shadow:
      0 0 0 1px rgb(var(--ice-rgb) / .10),
      0 18px 48px -16px rgb(var(--ice-rgb) / .55),
      0 0 40px rgb(var(--ember-rgb) / .18);
  }
  .portrait::before {
    inset: -2px;
    filter: blur(.5px) saturate(1.3);
    animation: portrait-spin 6s linear infinite;
  }
  .portrait::after {
    inset: -10px;
    box-shadow:
      0 0 36px 6px rgb(var(--ice-rgb) / .45),
      0 0 70px 14px rgb(var(--ember-rgb) / .22);
    animation: portrait-breathe 3.2s ease-in-out infinite;
    opacity: .8;
  }
  .portrait-img { border-width: 4px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .portrait::before, .portrait::after { animation: none; }
}

/* Mobile: Matrix-style code rain orbiting the portrait (canvas injected by js/main.js). */
.portrait-rain { display: none; }
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
@media (max-width: 767px) {
  .portrait-rain {
    display: block;
    position: absolute;
    top: -24%;
    left: 50%;
    width: 100vw;
    height: 148%;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
            mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
  }
  .intro { overflow: visible; }
  .portrait, .portrait-img { touch-action: pan-y; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .portrait-rain { display: none; } }

/* Orbiting particles around the portrait (mobile) */
.portrait-orbit { display: none; }
@media (max-width: 767px) {
  .portrait-orbit {
    display: block;
    position: absolute;
    inset: -14%;
    width: 128%;
    height: 128%;
    pointer-events: none;
  }
  .portrait-orbit.back { z-index: -1; }
  .portrait-orbit.front { z-index: 6; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .portrait-orbit { display: none; } }
.cm-phone { margin-top: .25rem; }

/* Mobile: LinkedIn + Contact ride on the name row, right side, above the fold */
@media (max-width: 767px) {
  .name-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem .75rem; }
  .name-row .name { margin: 0; }
  .name-row .intro-foot { margin: 0 0 0 auto; gap: .35rem; flex-wrap: nowrap; }
  .name-row .socials { margin-left: 0; gap: 0; }
  .name-row .contact-pill { padding: .45rem .75rem .45rem .65rem; font-size: .72rem; min-height: 2.5rem; }
  .name-row .kbd-hint { display: none; }
}

/* ==========================================================================
   Desktop hero portrait (>=1024px, v18): the mobile Frost & Ember portrait
   (glowing ring, code rain, orbiting particles) scaled up for the sticky
   left column. The portrait sits in a flex "slot" that takes whatever height
   is left after the name, tagline, nav and socials, so it grows on tall
   screens and shrinks on short ones without ever pushing the nav or socials
   below the fold. Rain and glow bleed behind the eyebrow and name (text is
   lifted above them). Below 1024px nothing here applies.
   ========================================================================== */
.portrait-slot { display: contents; }
.qr-card { display: none; }

@media (min-width: 1024px) {
  .intro { padding: clamp(1.5rem, 5vh, 4rem) 0 clamp(1.25rem, 3.6vh, 2.75rem); }
  .intro > div:first-child { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

  /* The slot absorbs the free height; the portrait sizes from it (cqh). */
  .portrait-slot {
    display: flex;
    flex: 1 1 0;
    align-items: flex-end;
    min-height: 120px;
    margin-bottom: clamp(.55rem, 1.8vh, 1.2rem);
    container-type: size;
  }
  .portrait,
  .portrait-slot .portrait {
    --pz: clamp(120px, 100cqh, 300px);
    width: var(--pz);
    height: var(--pz);
    margin: 0;
    padding: 4px;
    box-shadow:
      0 0 0 1px rgb(var(--ice-rgb) / .10),
      0 18px 48px -16px rgb(var(--ice-rgb) / .55),
      0 0 40px rgb(var(--ember-rgb) / .18);
  }
  /* Ring keeps the cursor-tracking angle (--ring-angle) from js/main.js; no auto-spin. */
  .portrait::before { inset: -2px; filter: blur(.5px) saturate(1.3); }
  /* Always-on breathing glow like mobile; the cursor proximity (--glow) brightens it. */
  .portrait::after {
    inset: -10px;
    box-shadow:
      0 0 36px 6px rgb(var(--ice-rgb) / .45),
      0 0 70px 14px rgb(var(--ember-rgb) / .22);
    opacity: calc(.5 + var(--glow) * .5);
    animation: portrait-breathe-d 3.2s ease-in-out infinite;
  }
  .portrait-img { border-width: 4px; }

  .portrait-rain {
    display: block;
    position: absolute;
    top: -26%;
    left: 50%;
    width: 185%;
    height: 158%;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 47%, #000 62%, transparent 100%);
            mask: radial-gradient(ellipse 50% 50% at 50% 47%, #000 62%, transparent 100%);
  }
  .portrait-orbit {
    display: block;
    position: absolute;
    inset: -14%;
    width: 128%;
    height: 128%;
    pointer-events: none;
  }
  .portrait-orbit.back { z-index: -1; }
  .portrait-orbit.front { z-index: 6; }

  /* Hero text rides above the rain/glow bleed. */
  .intro .eyebrow, .intro .name, .intro .headline, .intro .intro-meta, .intro .tagline {
    position: relative;
    z-index: 2;
  }
  .eyebrow { margin-bottom: clamp(.6rem, 1.6vh, 1.25rem); }
  .headline { margin-top: clamp(.5rem, 1.2vh, .9rem); }
  .tagline { margin-top: clamp(.7rem, 1.4vh, 1rem); }

  /* Nav + QR share one row: the QR uses the empty space to the right of the nav. */
  .nav-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(1rem, 3vh, 2.5rem);
  }
  .nav-row .section-nav { margin-top: 0; }
  .section-nav a { padding: clamp(.24rem, .55vh, .42rem) 0; }
  .intro-foot { margin-top: clamp(.9rem, 2.4vh, 2rem); }
}
@keyframes portrait-breathe-d {
  0%, 100% { scale: 1; }
  50% { scale: 1.04; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .portrait::after { animation: none; }
  .portrait-rain, .portrait-orbit { display: none; }
}

/* Desktop-only QR: real mouse + wide screen only (hidden on touch and small screens). */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .qr-card {
    --qz: clamp(76px, 11vh, 104px);
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .55rem .55rem .5rem;
    border-radius: 12px;
    background: rgb(10 17 19 / .82);
    border: 1px solid rgb(var(--ice-rgb) / .16);
    box-shadow: 0 0 0 1px rgb(var(--ember-rgb) / .06), 0 14px 32px -18px rgb(var(--ice-rgb) / .45);
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
  }
  .qr-card:hover {
    border-color: rgb(var(--ice-rgb) / .45);
    box-shadow: 0 0 0 1px rgb(var(--ember-rgb) / .22), 0 0 28px -6px rgb(var(--ice-rgb) / .45);
  }
  .qr-code { display: block; width: var(--qz); height: var(--qz); border-radius: 6px; }
  /* Standard polarity (dark modules on light) so every phone camera reads it. */
  .qr-bg { fill: #dff7fa; }
  .qr-mod { fill: #0a1113; }
  .qr-card figcaption {
    font: 500 .62rem/1.35 var(--font-mono);
    letter-spacing: .06em;
    text-align: center;
    color: var(--muted);
  }
  .qr-card figcaption::first-line { color: #f3b55c; }
}
/* Too narrow for nav + QR side by side: drop the QR rather than crowd the nav. */
@media (min-width: 1024px) and (max-width: 1179px) { .qr-card { display: none; } }

/* === Lights Out gate: "Reboot the grid" (second contact-gate puzzle) + play-again pair === */
.cm-again { margin-top: .6rem; padding-top: 1rem; border-top: 1px solid var(--ink-800); }
.cm-again-label { text-align: center; font: 500 .62rem/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cm-again-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .75rem; }
.cm-play {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .6rem; min-height: 56px; padding: .6rem .8rem;
  text-align: left; color: var(--text-strong); background: transparent; border: 1px solid var(--ink-700); border-radius: 10px; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.cm-play svg { width: 1.15rem; height: 1.15rem; grid-row: span 2; }
.cm-play-name { font: 600 .86rem/1.2 var(--font-display); white-space: nowrap; }
.cm-play-sub { margin-top: .15rem; font: 400 .64rem/1.3 var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.cm-play--same { border-color: rgb(var(--ember-rgb) / .35); }
.cm-play--same svg, .cm-play--same .cm-play-name { color: var(--ember); }
.cm-play--same:hover { border-color: var(--ember); background: rgb(var(--ember-rgb) / .08); }
.cm-play--diff { border-color: rgb(var(--ice-rgb) / .35); border-style: dashed; }
.cm-play--diff svg, .cm-play--diff .cm-play-name { color: var(--ice); }
.cm-play--diff:hover { border-color: var(--ice); border-style: solid; background: rgb(var(--ice-rgb) / .07); }
.cm-play:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
@media (max-width: 480px) { .cm-play { padding: .55rem .65rem; column-gap: .5rem; } .cm-play-name { font-size: .82rem; } .cm-play-sub { font-size: .6rem; } }

.contact-modal { --lo-tile: clamp(44px, 13vw, 58px); }
.contact-modal.is-replay [data-view="lights"] .cm-kicker,
.contact-modal [data-view="lights"] .cm-kicker { color: var(--ice); }
.contact-modal [data-view="lights"] .cm-kicker .status-dot { background: var(--ice); }
.contact-modal [data-view="lights"] .cm-kicker .status-dot::after { background: rgb(var(--ice-rgb) / .55); }
.lo-meta {
  display: flex; justify-content: space-between; align-items: center; width: calc(var(--lo-tile) * 5 + 16px); max-width: 100%; margin: 1.15rem auto 0;
  font: 500 .66rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.lo-meta b { color: var(--text-strong); font-weight: 500; font-variant-numeric: tabular-nums; }
.lo-meta .lo-lit b { color: var(--ice); }
.lo-meter { display: inline-block; width: 3.6rem; height: 3px; margin-left: .5rem; vertical-align: middle; background: var(--ink-700); border-radius: 2px; overflow: hidden; }
.lo-meter i { display: block; height: 100%; width: var(--pct, 0%); background: var(--ice); box-shadow: 0 0 8px rgb(var(--ice-rgb) / .8); transition: width .25s var(--ease), background-color .2s var(--ease); }
.contact-modal.is-flooding .lo-meter i { background: var(--ember); box-shadow: 0 0 8px rgb(var(--ember-rgb) / .8); }
.lo-board { position: relative; display: grid; grid-template-columns: repeat(5, var(--lo-tile)); gap: 4px; justify-content: center; margin: .6rem auto .25rem; touch-action: manipulation; }
.lo-node {
  position: relative; width: var(--lo-tile); height: var(--lo-tile); padding: 0;
  background: rgb(10 17 19 / .9); border: 1px solid var(--ink-800); border-radius: 8px; cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .25s var(--ease);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.lo-node:hover { border-color: rgb(var(--ice-rgb) / .35); }
.lo-node:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.lo-node svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.lo-node .n-chan { fill: none; stroke: var(--ink-700); stroke-width: 7; }
.lo-node .n-core { fill: none; stroke: #33474b; stroke-width: 2.5; transition: stroke .2s var(--ease); }
.lo-node .n-ring { fill: none; stroke: var(--ink-700); stroke-width: 3; transition: stroke .2s var(--ease); }
.lo-node .n-led { fill: #33474b; transition: fill .2s var(--ease); }
.lo-node .n-spark { fill: #fff; opacity: 0; transition: opacity .2s var(--ease); }
.lo-node.is-on { background: rgb(var(--ice-rgb) / .06); border-color: rgb(var(--ice-rgb) / .26); box-shadow: inset 0 0 18px -6px rgb(var(--ice-rgb) / .45); }
.lo-node.is-on .n-core { stroke: rgb(var(--ice-rgb) / .7); }
.lo-node.is-on .n-ring { stroke: rgb(var(--ice-rgb) / .45); }
.lo-node.is-on .n-led { fill: var(--ice); }
.lo-node.is-on .n-spark { opacity: .7; }
.lo-node.is-on svg { filter: drop-shadow(0 0 5px rgb(var(--ice-rgb) / .55)); }
.lo-node.is-hit { animation: lo-hit .32s var(--ease); }
.lo-node.is-ripple { animation: lo-ripple .32s var(--ease) 50ms; }
@keyframes lo-hit { 40% { transform: scale(.9); } }
@keyframes lo-ripple { 45% { transform: scale(.95); } }
.lo-board.is-complete .lo-node { border-color: rgb(var(--ember-rgb) / .5); background: rgb(var(--ember-rgb) / .1); box-shadow: inset 0 0 18px -6px rgb(var(--ember-rgb) / .5); }
.lo-board.is-complete .n-core { stroke: rgb(var(--ember-rgb) / .8); }
.lo-board.is-complete .n-ring { stroke: rgb(var(--ember-rgb) / .55); }
.lo-board.is-complete .n-led { fill: var(--ember); }
.lo-board.is-complete svg { filter: drop-shadow(0 0 6px rgb(var(--ember-rgb) / .7)); }
.lo-node.is-zap { animation: lo-zap .5s var(--ease) var(--zap-delay, 0ms) both; }
@keyframes lo-zap {
  0% { background-color: rgb(var(--ice-rgb) / .05); }
  25% { background-color: rgb(var(--ember-rgb) / .3); border-color: var(--ember); box-shadow: 0 0 16px rgb(var(--ember-rgb) / .5); transform: scale(1.04); }
  100% { background-color: rgb(var(--ember-rgb) / .1); border-color: rgb(var(--ember-rgb) / .5); }
}
.lo-board.is-shake { animation: cm-shake .35s var(--ease); }
.cm-btn--sm { min-width: 0; padding: .55rem .9rem; font-size: .8rem; color: var(--text); }
.cm-btn--sm svg { width: .95rem; height: .95rem; margin-right: .4rem; flex: none; }
.lo-actions .cm-btn { flex: 0 0 auto; }
.contact-modal.is-transmitting [data-view="lights"] .cm-btn, .contact-modal.is-transmitting .lo-node { pointer-events: none; }
.contact-modal.is-dissolving [data-view="lights"] { opacity: 0; filter: blur(6px); transform: scale(.965); }
.contact-modal.is-arriving [data-view="lights"]:not([hidden]) { animation: cm-arrive .46s cubic-bezier(.2,.8,.25,1) both; }
@media (prefers-reduced-motion: reduce) {
  .lo-node.is-hit, .lo-node.is-ripple, .lo-node.is-zap, .lo-board.is-shake { animation: none; }
  .lo-meter i { transition: none; }
  .contact-modal.is-dissolving [data-view="lights"] { filter: none; transform: none; }
  .contact-modal.is-arriving [data-view="lights"]:not([hidden]) { animation: cm-fade .18s linear both; }
}
/* === end Lights Out gate === */