/* =============================================================
   Hamza Hussein / portfolio
   Design system: near-black cool ground, bone ink, oxblood accent,
   aged brass reserved for hairlines, numerals and hover states.
   ============================================================= */

/* ---------- 1. TOKENS ---------- */

:root {
  /* Night (default) */
  --bg:            #0C0B10;
  --bg-raise:      #121119;
  --bg-sunk:       #08070C;
  --ink:           #E8E1D3;
  /* Night was never audited the way day was, and it had seven text roles
     under 4.5:1. ink-4 was the bad one at 2.13:1, carrying the dropzone
     hint, the sky stat labels and the answer timings. ink-3 sat at 4.09:1
     under the contact labels, the nav and the experience dates. */
  --ink-2:         rgba(232, 225, 211, .80);   /* 9.8:1 */
  --ink-3:         rgba(232, 225, 211, .62);   /* 6.2:1 */
  --ink-4:         rgba(232, 225, 211, .52);   /* 4.6:1, the floor */

  --accent:        #7A1F2B;
  --accent-lift:   #A8323F;
  --brass:         #B08D57;
  --brass-2:       rgba(176, 141, 87, .62);

  --hair:          rgba(176, 141, 87, .20);
  --hair-strong:   rgba(176, 141, 87, .40);
  --glow:          rgba(176, 141, 87, .18);

  --link-ink:      var(--ink);
  --name-1:        #E8CE9A;
  --name-2:        #B08D57;
  --field-bg:      rgba(232, 225, 211, .035);
  --scrim:         rgba(6, 5, 9, .78);
  --grain-op:      .035;
  --hero-wash:     rgba(122, 31, 43, .16);

  /* metal stops for SVG gradients */
  --m1: #E8CE9A;
  --m2: #B08D57;
  --m3: #6E572F;
  --m4: #3A2E19;

  /* rhythm */
  --wrap:   1320px;
  --gutter: clamp(20px, 5vw, 56px);
  --nav-h:  66px;

  --ease-mech: cubic-bezier(.62, .01, .18, 1);
  --ease-soft: cubic-bezier(.22, .68, .28, 1);

  --ff-display: "Fraunces", "Canela", Georgia, "Times New Roman", serif;
  --ff-body:    "Newsreader", Georgia, "Iowan Old Style", serif;
  --ff-black:   "UnifrakturMaguntia", "Fraunces", Georgia, serif;
  --ff-mono:    ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
}

/* Day mode is an aged parchment, not a bright sheet of paper. The previous
   ground sat at 0.772 relative luminance, which glares, and left every panel
   and hairline floating on a flat wash: card fills measured 1.00 against the
   page and their borders 1.62, so the only thing defining a card was nearly
   invisible. This ground sits at 0.609. Text lands between 4.7 and 11.2, which
   is comfortable rather than the harsh 13.8 it was, and the structure is now
   visible. Every value below was measured on the rendered page, not guessed. */
:root[data-theme="day"] {
  --bg:            #D6CCB8;
  --bg-raise:      #EAE3D4;   /* the old page colour, now the raised surface */
  --bg-sunk:       #C2B7A0;
  /* Warm ink, not grey. Fading a cool near-black over warm parchment renders
     as a neutral grey with a purple cast (the previous values resolved to
     #3A353B, #4E4A4C, #595454), which fights the ground instead of reading as
     faded ink. This base is a bistre brown, so the secondary tones stay in the
     parchment's own family: #3F3628, #534A3B, #5D5445. */
  --ink:           #2A2114;                 /* 10.0:1 */
  --ink-2:         rgba(42, 33, 20, .88);   /* 7.5:1 */
  --ink-3:         rgba(42, 33, 20, .76);   /* 5.5:1 */
  --ink-4:         rgba(42, 33, 20, .70);   /* 4.7:1, the floor for small text */

  --accent:        #6B1822;
  --accent-lift:   #7A1F2B;
  --brass:         #674B1F;   /* darkened: #7A5C2A only reached 3.9 on this ground */
  --brass-2:       rgba(103, 75, 31, .85);

  --hair:          rgba(103, 75, 31, .58);  /* 2.4:1, a visible hairline */
  --hair-strong:   rgba(103, 75, 31, .78);  /* 3.4:1, clears the non-text bar */
  --glow:          rgba(103, 75, 31, .30);

  --link-ink:      var(--accent);
  --name-1:        #8A6A38;
  --name-2:        #46361D;
  --field-bg:      rgba(42, 33, 20, .06);
  --scrim:         rgba(30, 25, 17, .62);
  --grain-op:      .055;
  --hero-wash:     rgba(107, 24, 34, .09);

  --m1: #A9884C;
  --m2: #7A5C2A;
  --m3: #54401C;
  --m4: #33260F;
}


/* ---------- 2. RESET / BASE ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: clamp(16px, .55vw + 14.4px, 18px);
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: .003em;
  overflow-x: hidden;
  transition: background-color .5s var(--ease-soft), color .5s var(--ease-soft);
}

img, svg { max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.018em;
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

p { margin: 0 0 1.1em; }
ul { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--link-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: color .3s var(--ease-soft), background-size .35s var(--ease-soft), background-position .35s var(--ease-soft);
}
a:hover { color: var(--brass); background-image: linear-gradient(var(--brass), var(--brass)); }

::selection { background: var(--accent); color: #F3EBDC; }

:focus-visible {
  outline: 1px solid var(--brass);
  outline-offset: 3px;
}

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

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-160%);
  background: var(--bg-raise); color: var(--ink);
  border: 1px solid var(--hair-strong);
  padding: 10px 16px; background-image: none;
  transition: transform .25s var(--ease-mech);
}
.skip-link:focus-visible { transform: translateY(0); }

/* paper / film grain, no image assets */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--grain-op);
  background-image:
    repeating-linear-gradient(0deg,   rgba(176,141,87,.5) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,  rgba(176,141,87,.35) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hair {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, var(--hair-strong), var(--hair) 40%, transparent);
  border: 0;
}

/* ---------- 3. NAV ---------- */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hair);
  transition: background-color .4s var(--ease-soft), border-color .4s var(--ease-soft);
}

.nav__progress {
  position: absolute; left: 0; top: 0; height: 1px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--brass));
  transition: width .1s linear;
}

.nav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--nav-h);
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  background-image: none; padding: 0; margin-right: auto;
  color: var(--ink);
  flex: 0 0 auto;
}
.brand__mark { color: var(--brass); display: inline-flex; transition: transform .8s var(--ease-mech); }
.brand:hover .brand__mark { transform: rotate(180deg); }
.brand__text {
  font-family: var(--ff-display);
  font-size: 15px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
.brand:hover { color: var(--brass); }

.nav__links { display: flex; gap: clamp(14px, 1.8vw, 30px); }
.nav__links a {
  background-image: none; padding: 4px 0;
  font-size: 13px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3);
  position: relative;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-mech);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
.nav__links a.is-active::after { background: var(--accent-lift); }

.theme-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; border: 1px solid var(--hair);
  color: var(--brass); cursor: pointer;
  padding: 7px 12px; border-radius: 0;
  transition: border-color .3s var(--ease-soft), box-shadow .4s var(--ease-soft), color .3s var(--ease-soft);
}
.theme-toggle:hover { border-color: var(--hair-strong); box-shadow: 0 0 0 1px var(--glow), 0 0 18px -4px var(--glow); }
.theme-toggle__dial { display: inline-flex; transition: transform .7s var(--ease-mech); }
.theme-toggle:hover .theme-toggle__dial { transform: rotate(120deg); }
.theme-toggle__label {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); font-family: var(--ff-body);
}
.ico-sun { display: none; }
:root[data-theme="day"] .ico-sun { display: inline; }
:root[data-theme="day"] .ico-moon { display: none; }

.nav__burger { display: none; }

/* ---------- 4. SECTIONS ---------- */

.section {
  position: relative; z-index: 2;
  padding-block: clamp(76px, 10vw, 148px);
  border-top: 1px solid var(--hair);
}
.section--contact { border-bottom: 1px solid var(--hair); }

.section__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: clamp(16px, 2.4vw, 34px);
  margin-bottom: clamp(34px, 4vw, 58px);
}
.section__num {
  grid-row: 1; margin: 0;
  font-family: var(--ff-display);
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: .3em;
  color: var(--brass);
  padding-top: .5em;
}
.section__title {
  grid-row: 1;
  font-size: clamp(34px, 5.2vw, 62px);
  font-variation-settings: "opsz" 100, "SOFT" 0, "WONK" 1;
}
.section__head .hair { grid-column: 1 / -1; margin-top: clamp(18px, 2vw, 26px); }

.section__lede {
  max-width: 62ch;
  color: var(--ink-2);
  font-size: clamp(17px, .6vw + 15px, 20px);
  margin-bottom: clamp(30px, 3.5vw, 50px);
}

.eyebrow {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 1.4em;
}

/* ---------- 5. BUTTONS ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px;
  border-radius: 0;
  font-size: 13px; letter-spacing: .17em; text-transform: uppercase;
  /* background-color, not just background-image. A <button> defaults to
     buttonface, which renders as a light grey box on this dark ground, and
     .btn--ghost never set one. It went unnoticed because every .btn on the
     site was an <a> until the sky panel added the first real button. */
  background-color: transparent; background-image: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .35s var(--ease-soft), color .35s var(--ease-soft),
              border-color .35s var(--ease-soft), box-shadow .45s var(--ease-soft),
              transform .35s var(--ease-mech);
}
.btn--primary {
  background: var(--accent); color: #F1E8D8;
  border-color: var(--accent);
}
.btn--primary:hover {
  background: transparent; color: var(--brass);
  border-color: var(--brass);
  box-shadow: 0 0 0 1px var(--glow), 0 0 26px -8px var(--brass);
  transform: translateY(-1px);
}
.btn--ghost {
  border-color: var(--hair-strong); color: var(--ink-2);
}
.btn--ghost:hover {
  color: var(--brass); border-color: var(--brass);
  box-shadow: 0 0 24px -10px var(--brass);
  transform: translateY(-1px);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .42;
  cursor: not-allowed;
}
/* hover effects must not fire on a button that cannot be pressed */
.btn:disabled:hover {
  background: var(--accent); color: #F1E8D8;
  border-color: var(--accent);
  box-shadow: none; transform: none;
}
.btn--ghost:disabled:hover {
  background-color: transparent; color: var(--ink-2);
  border-color: var(--hair-strong);
  box-shadow: none; transform: none;
}

/* ---------- 6. HERO ---------- */

.hero {
  position: relative; z-index: 2;
  padding-top: clamp(46px, 7vw, 92px);
  padding-bottom: clamp(56px, 8vw, 110px);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(80% 60% at 78% 34%, var(--glow), transparent 62%),
    radial-gradient(60% 50% at 8% 8%, var(--hero-wash), transparent 70%);
  opacity: .85;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(38px, 5vw, 64px);
  align-items: center;
}
.hero__grid > * { min-width: 0; }

.hero__name {
  font-size: clamp(56px, 11.5vw, 132px);
  line-height: .92;
  letter-spacing: -.035em;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  margin: 0 0 .28em;
  position: relative;
  background-image:
    radial-gradient(26% 42% at var(--sx, 26%) var(--sy, 22%),
      var(--name-1) 0%, var(--name-2) 22%, var(--ink) 55%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero__name-line { display: block; }

.hero__role {
  font-family: var(--ff-display);
  font-size: clamp(19px, 1.6vw + 13px, 28px);
  line-height: 1.32;
  color: var(--ink);
  font-weight: 300;
  max-width: 22ch;
  margin-bottom: .7em;
}
.hero__blurb {
  color: var(--ink-2);
  max-width: 48ch;
  margin-bottom: 2em;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: clamp(34px, 4vw, 52px); }

/* A button that carries an icon. The gap is what stops the glyph colliding
   with the letterspaced label, which is wide in this typeface. */
.btn--file { gap: 9px; }
.btn--file svg { flex: 0 0 auto; }


.hero__scrollcue {
  position: relative; z-index: 2;
  max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter);
  margin-top: clamp(24px, 4vw, 44px);
  display: flex; align-items: center; gap: 12px;
  color: var(--ink-4);
}
.hero__scrollcue span {
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
}
.hero__scrollcue svg { animation: cue 3.4s var(--ease-soft) infinite; }
@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ---------- 7. ASTROLABE ---------- */

.astrolabe { width: 100%; }

.astro-stage {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(18px, 2.2vw, 30px);
}

.astro-dial {
  position: relative;
  flex: 3 1 320px;
  max-width: 440px;
  min-width: 260px;
  margin-inline: auto;
  perspective: 1500px;
  perspective-origin: 50% 46%;
}
.astro-svg {
  display: block; width: 100%; height: auto; overflow: visible;
  transform-box: view-box;
  transform-origin: 300px 300px;
  will-change: transform;
}

/* each layer carries its own parallax offset; see initTilt in astrolabe.js */
.astro-plane { transform-box: view-box; transform-origin: 300px 300px; }

/* machined edges, lit from the upper left and deliberately not rotating */
.astro-bevel { opacity: .55; }
.astro-bevel--in { opacity: .40; }
.astro-shadow { stroke: #000; opacity: .22; }
:root[data-theme="day"] .astro-shadow { stroke: #4A3A20; opacity: .13; }

/* the ring lights up while it turns, and cools off after it lands.
   Fast in, slow out: heat does not leave as quickly as it arrives. */
.astro-glow {
  stroke: var(--m1);
  opacity: 0;
  transition: opacity .68s var(--ease-soft);
}
.astro-plane.is-turning .astro-glow { opacity: .50; transition-duration: .15s; }

/* on parchment a bright bloom washes out, so day mode glows darker and
   softer and reads as the metal warming rather than lighting up */
:root[data-theme="day"] .astro-glow { stroke: var(--m2); }
:root[data-theme="day"] .astro-plane.is-turning .astro-glow { opacity: .30; }

/* the dial leans back, then levels out as the rings settle */
.astro-svg.is-calibrating { animation: dialWake 2.1s var(--ease-mech) both; }
@keyframes dialWake {
  0%   { transform: rotateX(24deg) scale(.93); }
  70%  { transform: rotateX(4deg) scale(1.005); }
  100% { transform: none; }
}

.astro-ring {
  transition: transform .95s var(--ease-mech);
  transform-box: view-box;
  transform-origin: 300px 300px;
  will-change: transform;
}

.astro-seg { cursor: pointer; }
.astro-seg-face {
  fill: var(--seg-fill, rgba(176,141,87,.045));
  stroke: var(--hair);
  stroke-width: 1;
  transition: fill .4s var(--ease-soft), stroke .4s var(--ease-soft);
}
.astro-seg:hover .astro-seg-face { fill: rgba(176,141,87,.13); stroke: var(--hair-strong); }
.astro-seg.is-active .astro-seg-face { fill: rgba(122,31,43,.42); stroke: var(--brass-2); }
:root[data-theme="day"] .astro-seg.is-active .astro-seg-face { fill: rgba(107,24,34,.20); }

.astro-seg-label {
  font-family: var(--ff-body);
  font-size: 15px;
  letter-spacing: .05em;
  fill: var(--ink);
  opacity: .58;
  pointer-events: none;
  transition: fill .4s var(--ease-soft), opacity .4s var(--ease-soft);
}
.astro-seg:hover .astro-seg-label { fill: var(--brass); opacity: 1; }
:root[data-theme="day"] .astro-seg-label { opacity: .74; }
.astro-seg.is-active .astro-seg-label { fill: var(--ink); opacity: 1; letter-spacing: .1em; }
.astro-seg:focus { outline: none; }
.astro-seg:focus-visible .astro-seg-face { stroke: var(--brass); stroke-width: 1.6; }

/* engraved furniture: fixed limb, crosshairs, guilloche */

.astro-limb {
  transform-box: view-box;
  transform-origin: 300px 300px;
}
.astro-limb-rule { fill: none; stroke: var(--hair); stroke-width: 1; }
.astro-limb-rule--outer { stroke: var(--hair-strong); }
.astro-limb-tick { stroke: var(--brass); stroke-width: .7; opacity: .26; }
.astro-limb-tick--med { stroke-width: .9; opacity: .42; }
.astro-limb-tick--major { stroke-width: 1.2; opacity: .68; }
.astro-limb-num {
  font-family: var(--ff-body);
  font-size: 11px; letter-spacing: .1em;
  fill: var(--brass); opacity: .62;
  font-variant-numeric: tabular-nums;
}
.astro-cardinal { fill: var(--brass); opacity: .55; }

.astro-crosshair { stroke: var(--brass); stroke-width: 1; opacity: .10; }

.astro-guilloche line { stroke: var(--brass); stroke-width: .5; opacity: .10; }
.astro-guilloche circle { stroke: var(--brass); stroke-width: .4; opacity: .09; fill: none; }

/* third motion: power-on calibration, once, when the dial first comes into view */
.astro-svg.is-calibrating .astro-limb { animation: limbWake 2s var(--ease-mech) both; }
.astro-svg.is-calibrating .astro-medallion { animation: medWake 1.7s var(--ease-mech) both; }
.astro-svg.is-calibrating .astro-crosshairs { animation: fadeUp 2.2s var(--ease-soft) both; }

@keyframes limbWake {
  0%   { opacity: 0; transform: scale(.94); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes medWake {
  0%   { opacity: 0; }
  40%  { opacity: .6; }
  100% { opacity: 1; }
}
@keyframes fadeUp { from { opacity: 0; } to { opacity: 1; } }

/* the pointer takes a small mechanical knock each time a segment lands.
   Only the index triangle moves, never the guide line behind it. */
.astro-pointer { transform-box: view-box; transform-origin: 300px 48px; }
.astro-pointerg.is-struck .astro-pointer { animation: ptrStrike .42s var(--ease-mech); }
@keyframes ptrStrike {
  0%   { transform: translateY(0) scale(1); }
  22%  { transform: translateY(-5px) scale(1.14); }
  55%  { transform: translateY(1.5px) scale(.97); }
  100% { transform: translateY(0) scale(1); }
}

.astro-medallion.is-pulse .astro-medallion-ring { animation: medPulse .9s var(--ease-soft); }
@keyframes medPulse {
  0%   { stroke: var(--hair-strong); stroke-width: 1; }
  25%  { stroke: var(--brass); stroke-width: 2; }
  100% { stroke: var(--hair-strong); stroke-width: 1; }
}

.astro-tick { stroke: var(--brass); stroke-width: .8; opacity: .30; }
.astro-tick--major { stroke-width: 1.1; opacity: .55; }
.astro-rule { fill: none; stroke: var(--hair-strong); stroke-width: 1; }
.astro-rule--faint { stroke: var(--hair); }

.astro-ring .astro-tick,
.astro-ring .astro-rule,
.astro-bevel { transition: opacity .55s var(--ease-soft), stroke .55s var(--ease-soft); }

.astro-plane.is-turning .astro-tick { opacity: .58; }
.astro-plane.is-turning .astro-tick--major { opacity: 1; }
.astro-plane.is-turning .astro-rule { stroke: var(--brass-2); }
.astro-plane.is-turning .astro-bevel { opacity: .88; }
/* the segment that is landing keeps its own treatment, so it stays the
   one thing on the ring that reads as chosen rather than merely lit */
.astro-plane.is-turning .astro-seg:not(.is-active) .astro-seg-label {
  opacity: .86; fill: var(--brass);
}

/* the lane the segment lands in lights with it */
.astro-pointer-line { transition: opacity .45s var(--ease-soft); }
.astro-pointer { transition: filter .45s var(--ease-soft); }
.astro-svg.is-turning .astro-pointer-line { opacity: .8; }
.astro-svg.is-turning .astro-pointer { filter: drop-shadow(0 0 5px var(--brass)); }

.astro-medallion-ring { fill: none; stroke: var(--hair-strong); stroke-width: 1; }
.astro-mark {
  font-family: var(--ff-display);
  font-size: 36px; letter-spacing: .06em;
  fill: url(#astroMetal);
  text-anchor: middle;
  font-variation-settings: "opsz" 120;
}
.astro-mark-sub {
  font-family: var(--ff-body);
  font-size: 10px; letter-spacing: .3em;
  fill: var(--ink-4); text-anchor: middle;
}
.astro-pointer { fill: var(--accent-lift); stroke: var(--brass); stroke-width: .8; }
.astro-pointer-line { stroke: var(--brass); stroke-width: 1; opacity: .35; }

.astro-note {
  flex: 1 1 186px;
  min-width: 178px;
  border-left: 1px solid var(--hair);
  padding-left: clamp(14px, 1.6vw, 22px);
  align-self: center;
}
.astro-note__cat {
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 8px;
}
.astro-note__name {
  font-family: var(--ff-display);
  font-size: clamp(20px, 1.4vw + 14px, 27px);
  margin-bottom: 10px; line-height: 1.14;
  font-variation-settings: "opsz" 60, "WONK" 1;
}
.astro-note__body { font-size: 15px; line-height: 1.62; color: var(--ink-2); margin: 0; }
.astro-note__hint { font-size: 13px; color: var(--ink-4); font-style: italic; margin: 0; }
.astro-note.is-swapping .astro-note__name,
.astro-note.is-swapping .astro-note__body { opacity: 0; transform: translateY(5px); }
.astro-note__name, .astro-note__body {
  transition: opacity .3s var(--ease-soft), transform .3s var(--ease-soft);
}

.astro-rows { display: none; min-width: 0; max-width: 100%; }

.astro-row { border-top: 1px solid var(--hair); padding: 16px 0; min-width: 0; }
.astro-row:last-child { border-bottom: 1px solid var(--hair); }
.astro-row__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.astro-row__cat {
  font-family: var(--ff-display);
  font-size: 15px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); margin: 0;
}
.astro-row__count { font-size: 11px; letter-spacing: .18em; color: var(--brass); margin: 0 0 0 auto; font-variant-numeric: tabular-nums; }

.astro-row__track {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: none; scroll-snap-type: x mandatory;
  min-width: 0; max-width: 100%;
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
}
.astro-row__track::-webkit-scrollbar { display: none; }
.astro-chip {
  flex: 0 0 auto; scroll-snap-align: start;
  background: transparent; border: 1px solid var(--hair);
  color: var(--ink-3); cursor: pointer;
  padding: 8px 14px; border-radius: 0;
  font-size: 13px; letter-spacing: .06em;
  transition: color .3s, border-color .3s, background-color .3s;
}
.astro-chip.is-active {
  color: var(--ink); border-color: var(--brass-2);
  background: rgba(122,31,43,.28);
}
:root[data-theme="day"] .astro-chip.is-active { background: rgba(107,24,34,.14); }

.astro-row__note {
  font-size: 14.5px; line-height: 1.6; color: var(--ink-2);
  margin: 10px 0 0; padding-left: 12px;
  border-left: 1px solid var(--hair-strong);
  min-height: 3.2em;
}
.astro-row__nav { display: flex; gap: 6px; margin-top: 12px; }
.astro-step {
  background: transparent; border: 1px solid var(--hair); color: var(--brass);
  width: 34px; height: 30px; cursor: pointer; border-radius: 0; line-height: 1;
  transition: border-color .3s, color .3s;
}
.astro-step:hover { border-color: var(--brass); }

.astro-fallback { color: var(--ink-3); font-size: 15px; }

.astro-sound {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: clamp(14px, 1.6vw, 20px);
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 0;
  color: var(--ink-4);
  cursor: pointer;
  padding: 7px 13px;
  font-family: var(--ff-body);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  transition: color .3s var(--ease-soft), border-color .3s var(--ease-soft);
}
.astro-sound:hover { color: var(--brass); border-color: var(--brass-2); }
.astro-sound:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }
.astro-sound[aria-pressed="true"] { color: var(--brass); border-color: var(--hair-strong); }
.astro-sound__ico { width: 15px; height: 15px; display: block; flex: 0 0 auto; }
.astro-sound .wv, .astro-sound .slash { transition: opacity .3s var(--ease-soft); }
.astro-sound .slash { opacity: 0; }
.astro-sound[aria-pressed="false"] .wv { opacity: .16; }
.astro-sound[aria-pressed="false"] .slash { opacity: 1; }

/* ---------- 8. ABOUT ---------- */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(34px, 4vw, 60px);
}
.about__grid > * { min-width: 0; }
.about__prose { max-width: 66ch; }
.about__prose p { color: var(--ink-2); font-size: clamp(16.5px, .5vw + 15px, 18.5px); }

.about__lead { color: var(--ink) !important; }
.about__lead::first-letter {
  font-family: var(--ff-black);
  float: left;
  font-size: 4.05em;
  line-height: .84;
  padding: .06em .14em 0 0;
  margin-top: .04em;
  color: var(--accent-lift);
  text-shadow: 0 1px 0 var(--hair-strong);
}
:root[data-theme="day"] .about__lead::first-letter { color: var(--accent); }

/* footnote marks */
.fn {
  background: transparent; border: 0; padding: 0 1px 0 2px; margin: 0;
  cursor: pointer; color: var(--brass);
  font-family: var(--ff-display);
  transition: color .3s var(--ease-soft), transform .3s var(--ease-mech);
  vertical-align: baseline;
}
.fn sup { font-size: .72em; letter-spacing: .02em; }
.fn:hover { color: var(--accent-lift); transform: translateY(-2px); }
.fn[aria-expanded="true"] { color: var(--accent-lift); }
.fn[aria-expanded="true"] sup { text-decoration: underline; text-underline-offset: 2px; }

.fn-hint {
  font-size: 13px; letter-spacing: .04em; color: var(--ink-4);
  display: flex; align-items: center; gap: 9px; font-style: italic;
}
.fn-hint__mark {
  font-family: var(--ff-display); font-style: normal;
  color: var(--brass); font-size: 11px;
  border: 1px solid var(--hair-strong);
  width: 20px; height: 20px; display: inline-grid; place-items: center;
}

.fn-slips { margin-top: 8px; }
.fn-slip {
  border: 1px solid var(--hair);
  border-left: 2px solid var(--accent);
  background: var(--bg-raise);
  padding: 18px 20px;
  animation: slipIn .45s var(--ease-mech) both;
}
.fn-slip[hidden] { display: none; }
.fn-slip p:last-child { margin-bottom: 0; }
.fn-slip__num {
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 8px;
}
.fn-slip p:not(.fn-slip__num) { font-size: 15.5px; color: var(--ink-2); line-height: 1.62; }
@keyframes slipIn {
  from { opacity: 0; transform: translateY(-6px) rotate(-.25deg); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}

.record {
  border-top: 1px solid var(--hair-strong);
  padding-top: 20px;
  align-self: start;
}
.record__title {
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 18px;
}
.record__list { margin: 0; }
.record__list > div {
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
}
.record__list dt {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 4px;
}
.record__list dd {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 16px; line-height: 1.35; color: var(--ink);
  font-variation-settings: "opsz" 30;
}

/* ---------- 9. SKILLS ---------- */

.skills__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.skillgroup {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px clamp(16px, 2.4vw, 34px);
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-top: 1px solid var(--hair);
  transition: background-color .5s var(--ease-soft);
}
.skillgroup:last-child { border-bottom: 1px solid var(--hair); }
.skillgroup:hover { background: linear-gradient(90deg, var(--glow), transparent 55%); }
.skillgroup__num {
  grid-row: 1 / span 2;
  font-family: var(--ff-display);
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: .2em; color: var(--brass);
  margin: 0; padding-top: .35em;
  font-variant-numeric: tabular-nums;
}
.skillgroup__title {
  font-size: clamp(21px, 1.5vw + 14px, 30px);
  margin: 0 0 4px;
  font-variation-settings: "opsz" 60, "WONK" 1;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 2; }
.chips li {
  border: 1px solid var(--hair);
  padding: 6px 13px;
  font-size: 13.5px; letter-spacing: .05em;
  color: var(--ink-2);
  transition: color .35s var(--ease-soft), border-color .35s var(--ease-soft),
              box-shadow .45s var(--ease-soft), transform .35s var(--ease-mech);
}
.chips li:hover {
  color: var(--brass); border-color: var(--brass-2);
  box-shadow: 0 0 22px -10px var(--brass);
  transform: translateY(-2px);
}

/* ---------- 9a. EXPERIENCE (CV style) ---------- */

.roles { display: grid; }

.role {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px clamp(16px, 2.4vw, 34px);
  align-items: baseline;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-top: 1px solid var(--hair);
  transition: background-color .5s var(--ease-soft);
}
.role:last-of-type { border-bottom: 1px solid var(--hair); }
.role[hidden] { display: none; }
.role:hover { background: linear-gradient(90deg, var(--glow), transparent 55%); }

.role__num {
  grid-column: 1; grid-row: 1;
  font-family: var(--ff-display);
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: .2em; color: var(--brass);
  margin: 0; padding-top: .35em;
  font-variant-numeric: tabular-nums;
}
.role__body { grid-column: 2; grid-row: 1; }
.role__title {
  font-size: clamp(20px, 1.4vw + 14px, 28px);
  margin: 0 0 7px;
  font-variation-settings: "opsz" 60, "WONK" 1;
}
.role__org {
  font-size: 13.5px; letter-spacing: .04em;
  color: var(--brass); margin: 0 0 14px;
}
.role__type {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  border: 1px solid var(--hair);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); vertical-align: 1px;
}

.role__points { display: grid; gap: 8px; max-width: 68ch; }
.role__points li {
  position: relative; padding-left: 20px;
  color: var(--ink-2); font-size: 15.5px; line-height: 1.6;
}
.role__points li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 9px; height: 1px; background: var(--brass);
}

.role__date {
  grid-column: 3; grid-row: 1;
  margin: 0; padding-top: .5em;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .role { grid-template-columns: auto minmax(0, 1fr); }
  .role__date { grid-column: 2; grid-row: 2; padding-top: 14px; }
}

/* ---------- 9b. CERTIFICATIONS ---------- */

.certs { display: grid; }

.cert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px clamp(16px, 2.4vw, 34px);
  align-items: baseline;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-top: 1px solid var(--hair);
  transition: background-color .5s var(--ease-soft);
}
.cert:last-of-type { border-bottom: 1px solid var(--hair); }
.cert[hidden] { display: none; }
.cert:hover { background: linear-gradient(90deg, var(--glow), transparent 55%); }

.cert__num {
  grid-column: 1; grid-row: 1;
  font-family: var(--ff-display);
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: .2em; color: var(--brass);
  margin: 0; padding-top: .35em;
  font-variant-numeric: tabular-nums;
}
.cert__body { grid-column: 2; grid-row: 1; }
.cert__title {
  font-size: clamp(20px, 1.4vw + 14px, 28px);
  margin: 0 0 7px;
  font-variation-settings: "opsz" 60, "WONK" 1;
}
.cert__issuer {
  font-size: 13.5px; letter-spacing: .04em;
  color: var(--brass); margin: 0 0 11px;
}
.cert__note {
  color: var(--ink-2); font-size: 15.5px; line-height: 1.62;
  max-width: 62ch; margin: 0;
}
.cert__verify {
  display: inline-block; margin-left: 4px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
}
/* a bare reference number, no URL to point at */
.cert__ref {
  display: inline-block; margin-left: 4px;
  font-size: 11px; letter-spacing: .14em;
  color: var(--ink-4); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cert__date {
  grid-column: 3; grid-row: 1;
  margin: 0; padding-top: .5em;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}

/* ---------- 10. PROJECTS ---------- */

/* The fifth card spans the row rather than sitting orphaned in a 2x2 grid. */
.card--wide { grid-column: 1 / -1; }
.card__live {
  position: relative; z-index: 2;       /* above the card's full-cover button */
  display: inline-block; margin-top: 12px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass);
}
.card__live:hover { color: var(--accent-lift); }

.projects {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2vw, 26px);
}

.card {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: 0;
  padding: clamp(24px, 2.6vw, 36px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-raise) 92%, transparent), transparent 70%);
  display: flex; flex-direction: column;
  transition: border-color .45s var(--ease-soft), box-shadow .55s var(--ease-soft),
              transform .45s var(--ease-mech), background-color .45s var(--ease-soft);
}
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid transparent;
  transition: border-color .45s var(--ease-soft);
}
.card:hover, .card:focus-within {
  border-color: var(--brass-2);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px var(--glow),
    0 0 46px -14px var(--brass),
    inset 0 0 40px -30px var(--brass);
}

.card__num {
  font-family: var(--ff-display);
  font-size: 12px; letter-spacing: .3em; color: var(--brass);
  margin: 0 0 16px; font-variant-numeric: tabular-nums;
}
.card__title { margin: 0 0 14px; }
.card__btn {
  background: transparent; border: 0; padding: 0; margin: 0;
  text-align: left; cursor: pointer;
  font-family: var(--ff-display);
  font-size: clamp(21px, 1.3vw + 15px, 28px);
  line-height: 1.14; letter-spacing: -.015em;
  color: var(--ink);
  font-variation-settings: "opsz" 60, "WONK" 1;
  transition: color .35s var(--ease-soft);
}
.card__btn::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__btn { color: var(--brass); }
.card__btn:focus-visible { outline: none; }
.card:focus-within .card__btn { color: var(--brass); }

.card__tagline {
  color: var(--ink-2);
  font-size: 15.5px; line-height: 1.62;
  margin-bottom: 20px;
  flex: 1;
}
.card__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.card__tags li {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-4);
  border-bottom: 1px solid var(--hair);
  padding-bottom: 3px;
}
.card__cta {
  margin: 0; font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass); display: flex; align-items: center; gap: 8px;
}
.card__cta::after {
  content: ""; height: 1px; flex: 1; background: var(--hair);
  transition: background-color .45s var(--ease-soft);
}
.card:hover .card__cta::after { background: var(--brass-2); }

/* ---------- 10b. LIVE CLASSIFIER ---------- */

.classifier { margin-top: clamp(28px, 3.5vw, 48px); }

.clf {
  border: 1px solid var(--hair);
  padding: clamp(22px, 2.8vw, 38px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-raise) 90%, transparent), transparent 72%);
}

.clf__eyebrow {
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 10px;
}
.clf__title {
  font-size: clamp(22px, 1.6vw + 15px, 32px);
  margin: 0 0 12px;
  font-variation-settings: "opsz" 70, "WONK" 1;
}
.clf__lede {
  color: var(--ink-2); font-size: 15.5px; line-height: 1.64;
  max-width: 68ch; margin-bottom: clamp(22px, 2.6vw, 32px);
}

.clf__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: start;
}

.clf__dropzone {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  border: 1px solid var(--hair);
  background: var(--field-bg);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .35s var(--ease-soft), box-shadow .45s var(--ease-soft),
              background-color .35s var(--ease-soft);
}
.clf__dropzone:hover,
.clf__dropzone:focus-visible,
.clf__dropzone.is-over {
  border-color: var(--brass-2);
  box-shadow: 0 0 0 1px var(--glow), 0 0 40px -16px var(--brass);
  outline: none;
}
.clf__dropzone.is-over { background: color-mix(in srgb, var(--brass) 8%, transparent); }

.clf__tick {
  position: absolute; width: 12px; height: 12px; pointer-events: none;
  border-color: var(--brass); opacity: .5;
  transition: opacity .35s var(--ease-soft), width .35s var(--ease-mech), height .35s var(--ease-mech);
}
.clf__tick--tl { top: 7px; left: 7px; border-top: 1px solid; border-left: 1px solid; }
.clf__tick--tr { top: 7px; right: 7px; border-top: 1px solid; border-right: 1px solid; }
.clf__tick--bl { bottom: 7px; left: 7px; border-bottom: 1px solid; border-left: 1px solid; }
.clf__tick--br { bottom: 7px; right: 7px; border-bottom: 1px solid; border-right: 1px solid; }
.clf__dropzone:hover .clf__tick,
.clf__dropzone.is-over .clf__tick { opacity: 1; width: 18px; height: 18px; }

.clf__preview {
  width: 100%; height: 100%; object-fit: contain;
  display: block; background: var(--bg-sunk);
}
.clf__preview[hidden] { display: none; }

.clf__prompt { text-align: center; color: var(--ink-3); padding: 20px; }
.clf__prompt[hidden] { display: none; }
.clf__prompt svg { color: var(--brass); margin-bottom: 10px; }
.clf__prompt-main {
  font-family: var(--ff-display); font-size: 17px; color: var(--ink); margin: 0 0 4px;
}
.clf__prompt-sub { font-size: 13px; margin: 0; color: var(--ink-4); }

.clf__status {
  font-size: 13px; letter-spacing: .02em; color: var(--ink-3);
  margin: 0 0 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
  min-height: 1.4em;
}
.clf__status.is-ok  { color: var(--brass); }
.clf__status.is-work { color: var(--ink-2); }
.clf__status.is-bad { color: var(--accent-lift); }
:root[data-theme="night"] .clf__status.is-bad { color: #D2707C; }

.clf__bars { display: grid; gap: 10px; }
.clf__bar {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr) 4em;
  align-items: center; gap: 12px;
  font-variant-numeric: tabular-nums;
}
.clf__bar-name {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.clf__bar-track {
  height: 8px; background: var(--field-bg);
  border: 1px solid var(--hair); position: relative; overflow: hidden;
}
.clf__bar-fill {
  position: absolute; inset: 0 auto 0 0; width: var(--p, 0%);
  background: var(--accent);
  transition: width .75s var(--ease-mech);
}
.clf__bar-val { font-size: 14px; color: var(--ink-3); text-align: right; }
.clf__bar-val i { font-style: normal; font-size: .74em; color: var(--ink-4); margin-left: 1px; }

.clf__bar.is-top .clf__bar-name { color: var(--ink); }
.clf__bar.is-top .clf__bar-track { border-color: var(--brass-2); }
.clf__bar.is-top .clf__bar-val { color: var(--brass); }

@media (min-width: 760px) {
  .clf__body { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

/* Narrow: give the probability track its own full-width row */
@media (max-width: 560px) {
  .clf__bars { gap: 14px; }
  .clf__bar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name val" "track track";
    gap: 5px 10px;
  }
  .clf__bar-name  { grid-area: name; }
  .clf__bar-val   { grid-area: val; }
  .clf__bar-track { grid-area: track; }
}

/* ---------- 11. MODAL ---------- */

.modal {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 48px);
}
.modal[hidden] { display: none; }
.modal__scrim {
  position: absolute; inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  animation: fade .3s var(--ease-soft) both;
}
.modal__panel {
  position: relative;
  width: min(680px, 100%);
  max-height: min(84vh, 780px);
  overflow-y: auto;
  background: var(--bg-raise);
  border: 1px solid var(--hair-strong);
  border-radius: 0;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 0 0 1px var(--glow), 0 40px 90px -40px #000;
  animation: panelIn .42s var(--ease-mech) both;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.modal__close {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: 1px solid var(--hair);
  color: var(--ink-3); cursor: pointer;
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 0;
  transition: color .3s, border-color .3s, transform .4s var(--ease-mech);
}
.modal__close:hover { color: var(--brass); border-color: var(--brass); transform: rotate(90deg); }

.modal__num {
  font-family: var(--ff-display);
  font-size: 11px; letter-spacing: .3em; color: var(--brass); margin: 0 0 12px;
}
.modal__title {
  font-size: clamp(25px, 2vw + 16px, 38px);
  margin-bottom: 16px; padding-right: 40px;
  font-variation-settings: "opsz" 90, "WONK" 1;
}
.modal__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }
.modal__tags li {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-4); border: 1px solid var(--hair); padding: 4px 10px;
}
.modal__body h4 {
  font-family: var(--ff-body);
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--brass); font-weight: 400;
  margin: 26px 0 8px; padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.modal__body h4:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.modal__body p { color: var(--ink-2); font-size: 16px; line-height: 1.68; }
.modal__body ul { margin: 0 0 1em; }
.modal__body li {
  color: var(--ink-2); font-size: 15.5px; line-height: 1.6;
  padding-left: 18px; position: relative; margin-bottom: 7px;
}
.modal__body li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 8px; height: 1px; background: var(--brass);
}
.modal__result {
  display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 40px);
  border-top: 1px solid var(--hair); padding-top: 18px; margin-top: 24px;
}
.modal__result div { min-width: 88px; }
.modal__result dt {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 5px;
}
.modal__result dd {
  margin: 0; font-family: var(--ff-display);
  font-size: 23px; color: var(--brass); font-variation-settings: "opsz" 40;
}

/* ---------- 11b. CONFUSION MATRIX ---------- */

.cm__lede {
  font-size: 14.5px !important;
  line-height: 1.6;
  color: var(--ink-3) !important;
  margin-bottom: 18px;
}
.cm__lede--tight { margin: 26px 0 10px; }

.cm {
  margin: 0 0 22px;
  border: 1px solid var(--hair);
  padding: 16px 16px 12px;
}
.cm__head { margin-bottom: 14px; }
.cm__title {
  font-family: var(--ff-display);
  font-size: 16px; color: var(--ink); margin: 0 0 3px;
  font-variation-settings: "opsz" 30;
}
.cm__meta {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass); margin: 0;
  font-variant-numeric: tabular-nums;
}

.cm__scroll { overflow-x: auto; scrollbar-width: thin; }
.cm__scroll::-webkit-scrollbar { height: 5px; }
.cm__scroll::-webkit-scrollbar-thumb { background: var(--hair-strong); }

.cm__grid {
  border-collapse: separate;
  border-spacing: 2px;
  font-variant-numeric: tabular-nums;
  margin-inline: auto;
}
.cm__corner { border: 0; }

.cm__grid thead th {
  font-family: var(--ff-body);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 400; color: var(--brass);
  padding: 0 0 6px; text-align: center;
}
.cm__grid tbody th {
  font-family: var(--ff-body);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 400; color: var(--ink-3);
  text-align: right; padding-right: 10px; white-space: nowrap;
}

.cm__cell {
  width: 46px; height: 40px;
  text-align: center; vertical-align: middle;
  font-size: 14px; color: var(--ink);
  background: color-mix(in srgb, var(--accent) calc(var(--cmv, 0) * 88%), transparent);
  border: 1px solid var(--hair);
  cursor: default;
  transition: outline-color .2s var(--ease-soft), color .2s var(--ease-soft);
  outline: 1px solid transparent;
}
.cm__cell.is-diag { border-color: var(--brass-2); }
.cm__cell.is-zero { color: var(--ink-4); }
.cm__cell:hover, .cm__cell:focus-visible {
  outline-color: var(--brass);
  outline-offset: 1px;
  color: var(--ink);
}

.cm__caption {
  margin: 12px 0 0;
  font-size: 13px !important;
  color: var(--ink-2) !important;
  min-height: 1.5em;
  border-top: 1px solid var(--hair);
  padding-top: 10px;
}

.cm__pc {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
}
.cm__pc th, .cm__pc td { padding: 8px 10px; text-align: right; }
.cm__pc thead th {
  font-family: var(--ff-body); font-weight: 400;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass);
  border-bottom: 1px solid var(--hair-strong);
}
.cm__pc tbody th {
  font-weight: 400; text-align: left;
  color: var(--ink); letter-spacing: .04em;
}
.cm__pc tbody td { color: var(--ink-2); border-bottom: 1px solid var(--hair); }
.cm__pc tbody th { border-bottom: 1px solid var(--hair); }
.cm__pc .is-weak { color: var(--brass); }

@media (max-width: 420px) {
  .cm { padding: 13px 12px 10px; }
  .cm__cell { width: 40px; height: 36px; font-size: 13px; }
}

/* ---------- 11c. ENERGY EVIDENCE ---------- */

.ee__tbl {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums; font-size: 13.5px;
}
.ee__tbl th, .ee__tbl td { padding: 8px 9px; text-align: right; white-space: nowrap; }
.ee__tbl thead th {
  font-family: var(--ff-body); font-weight: 400;
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brass); border-bottom: 1px solid var(--hair-strong);
}
.ee__tbl tbody th {
  font-weight: 400; text-align: left; color: var(--ink); letter-spacing: .03em;
}
.ee__tbl tbody th, .ee__tbl tbody td { border-bottom: 1px solid var(--hair); color: var(--ink-2); }
.ee__tbl tbody tr.is-best th { color: var(--ink); }
.ee__tbl tbody tr.is-best .ee__r2 { color: var(--brass); }
.ee__tbl .ee__leak { color: var(--ink-4); }

.ee__imp {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
  margin-bottom: 22px;
}
.ee__impttl {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 10px;
  padding-bottom: 7px; border-bottom: 1px solid var(--hair);
}
.ee__impttl--bad { color: var(--ink-4); }

.ee__flist { display: grid; gap: 7px; font-variant-numeric: tabular-nums; }
.ee__flist li {
  display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) 3.4em;
  align-items: center; gap: 8px; font-size: 12.5px;
  padding-left: 0; margin-bottom: 0;
}
.ee__flist li::before { display: none; }
.ee__fname { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ee__fbar { height: 6px; background: var(--field-bg); border: 1px solid var(--hair); position: relative; }
.ee__fbar i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--accent); }
.ee__fval { text-align: right; color: var(--ink-3); }
.ee__fval i { font-style: normal; font-size: .76em; color: var(--ink-4); }

.ec { margin: 0 0 6px; }
.ec__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ec__grid { stroke: var(--hair); stroke-width: 1; }
.ec__day  { stroke: var(--hair); stroke-width: 1; opacity: .45; stroke-dasharray: 2 5; }
.ec__ylab {
  font-family: var(--ff-body); font-size: 10px;
  fill: var(--ink-4); letter-spacing: .06em;
}
.ec__unit { fill: var(--brass); letter-spacing: .16em; }
.ec__area { fill: var(--ink); opacity: .11; stroke: none; }
.ec__line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ec__line--actual { stroke: var(--ink-3); stroke-width: .9; }
.ec__line--pred   { stroke: var(--accent-lift); stroke-width: 1.5; }

.ec__cap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid var(--hair);
  font-size: 11.5px !important; color: var(--ink-3) !important;
}
.ec__key { display: inline-flex; align-items: center; gap: 7px; letter-spacing: .04em; }
.ec__sw { width: 16px; height: 2px; display: inline-block; }
.ec__sw--actual { background: var(--ink-3); }
.ec__sw--pred { background: var(--accent-lift); }
.ec__range { margin-left: auto; color: var(--ink-4); letter-spacing: .1em; text-transform: uppercase; font-size: 10px; }

@media (min-width: 620px) {
  .ee__imp { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
}

/* ---------- 12. CHAT ---------- */

.chat {
  border: 1px solid var(--hair);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-raise) 88%, transparent), transparent 80%);
  max-width: 780px;
}
.chat__head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hair);
}
.chat__dot {
  width: 6px; height: 6px; background: var(--accent-lift);
  box-shadow: 0 0 10px var(--accent-lift);
  animation: pulse 2.6s var(--ease-soft) infinite;
}
@keyframes pulse { 0%,100% { opacity: .45 } 50% { opacity: 1 } }
.chat__title {
  margin: 0; font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-3);
}
.chat__clear {
  margin-left: auto; background: transparent; border: 0; cursor: pointer;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-4); padding: 4px 2px;
  transition: color .3s;
}
.chat__clear:hover { color: var(--brass); }

.chat__log {
  padding: 20px 18px;
  min-height: 220px; max-height: 380px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  scrollbar-width: thin;
}
.chat__log::-webkit-scrollbar { width: 6px; }
.chat__log::-webkit-scrollbar-thumb { background: var(--hair-strong); }

.msg { max-width: 88%; animation: msgIn .38s var(--ease-mech) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.msg__who {
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  margin-bottom: 6px;
}
.msg__text { margin: 0; font-size: 15.5px; line-height: 1.62; }

.msg--bot { align-self: flex-start; }
.msg--bot .msg__who { color: var(--brass); }
.msg--bot .msg__text {
  color: var(--ink-2);
  border-left: 1px solid var(--hair-strong);
  padding-left: 14px;
}
.msg--user { align-self: flex-end; text-align: right; }
.msg--user .msg__who { color: var(--ink-4); }
.msg--user .msg__text {
  color: var(--ink);
  border-right: 2px solid var(--accent);
  padding-right: 14px;
}
.msg--typing .msg__text { color: var(--ink-4); letter-spacing: .3em; }

.chat__suggest {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 0 18px 14px;
}
.chat__chip {
  background: transparent; border: 1px solid var(--hair);
  color: var(--ink-3); cursor: pointer;
  padding: 6px 12px; border-radius: 0;
  font-size: 12.5px; letter-spacing: .03em; text-align: left;
  transition: color .3s, border-color .3s, box-shadow .4s, transform .3s var(--ease-mech);
}
.chat__chip:hover {
  color: var(--brass); border-color: var(--brass-2);
  box-shadow: 0 0 20px -10px var(--brass);
  transform: translateY(-1px);
}

.chat__form {
  display: flex; gap: 0;
  border-top: 1px solid var(--hair);
}
.chat__input {
  flex: 1; min-width: 0;
  background: var(--field-bg); border: 0; border-radius: 0;
  padding: 15px 18px;
  color: var(--ink); font-size: 15.5px;
}
.chat__input::placeholder { color: var(--ink-4); }
.chat__input:focus { outline: none; background: color-mix(in srgb, var(--brass) 7%, transparent); }
.chat__send {
  background: var(--accent); border: 0; color: #F1E8D8;
  width: 56px; display: grid; place-items: center; cursor: pointer;
  transition: background-color .35s var(--ease-soft), color .35s;
}
.chat__send:hover { background: var(--accent-lift); }

/* ---------- 13. CONTACT ---------- */

.contact__grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 70px);
}
.contact__grid > * { min-width: 0; }
.contact__lede {
  font-family: var(--ff-display);
  font-size: clamp(19px, 1.2vw + 14px, 25px);
  line-height: 1.38; color: var(--ink);
  max-width: 30ch; margin-bottom: 34px;
  font-variation-settings: "opsz" 40, "WONK" 1;
}
.contact__list > div {
  padding: 14px 0; border-top: 1px solid var(--hair);
}
.contact__list dt {
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 6px;
}
.contact__list dd { margin: 0; font-size: 16.5px; word-break: break-word; }

.form { position: relative; }
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 9px;
}
.field input, .field textarea {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--hair);
  border-radius: 0;
  padding: 13px 15px;
  color: var(--ink); font-size: 16px; font-family: var(--ff-body);
  transition: border-color .35s var(--ease-soft), box-shadow .45s var(--ease-soft), background-color .35s;
  resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brass-2);
  box-shadow: 0 0 0 1px var(--glow), 0 0 24px -12px var(--brass);
}
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--accent-lift); }
.field__err {
  margin: 7px 0 0; font-size: 12.5px; color: var(--accent-lift);
  min-height: 1em; letter-spacing: .02em;
}
:root[data-theme="night"] .field__err { color: #D2707C; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 6px; }
.form__submit { min-width: 190px; }
.form__submit[disabled] { opacity: .55; cursor: progress; }
.form__status { margin: 0; font-size: 13.5px; color: var(--ink-3); flex: 1 1 200px; }
.form__status.is-ok { color: var(--brass); }
.form__status.is-bad { color: var(--accent-lift); }
:root[data-theme="night"] .form__status.is-bad { color: #D2707C; }

.seal {
  position: absolute; right: 4px; bottom: 2px;
  opacity: 0; pointer-events: none;
  visibility: hidden;
  transform-origin: 100% 100%;   /* scale inward, never past the right edge */
}
.seal.is-stamped { visibility: visible; animation: stamp 1.5s var(--ease-mech) forwards; }
@keyframes stamp {
  0%   { opacity: 0; transform: scale(2.4) rotate(-22deg); }
  38%  { opacity: 1; transform: scale(.94) rotate(-7deg); }
  48%  { transform: scale(1.03) rotate(-9deg); }
  60%  { transform: scale(1) rotate(-8deg); }
  100% { opacity: .95; transform: scale(1) rotate(-8deg); }
}

/* ---------- 14. FOOTER ---------- */

.footer {
  position: relative; z-index: 2;
  padding-block: clamp(44px, 5vw, 72px);
  background: var(--bg-sunk);
}
.footer__inner { text-align: center; }
.footer__name {
  font-family: var(--ff-display);
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: .04em; margin-bottom: 10px;
  font-variation-settings: "opsz" 60, "WONK" 1;
}
.footer__meta { font-size: 13px; letter-spacing: .1em; color: var(--ink-4); margin-bottom: 18px; }
.footer__links {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  margin: 0;
}
.footer__sep { color: var(--hair-strong); }

/* ---------- 15. SCROLL REVEAL ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 16. RESPONSIVE ---------- */

@media (min-width: 700px) {
  /* Four projects: a 2x2 block reads better than 3 + 1 orphan */
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skills__grid { gap: 0; }
}

@media (min-width: 900px) {
  .about__grid { grid-template-columns: minmax(0, 1.62fr) minmax(240px, .82fr); }
  .contact__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}

@media (min-width: 1080px) {
  .hero__grid {
    grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
    gap: clamp(36px, 3.4vw, 58px);
  }
}

@media (min-width: 1280px) {
  .hero__grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
  .astro-dial { max-width: 468px; }
  .astro-note { flex: 1 1 200px; min-width: 190px; }
}

/* Mobile astrolabe: stacked tap-through rows instead of rings */
@media (max-width: 600px) {
  .astro-stage { display: none; }
  .astro-rows { display: block; }
}

@media (max-width: 700px) {
  .cert { grid-template-columns: auto minmax(0, 1fr); }
  .cert__date { grid-column: 2; grid-row: 2; padding-top: 12px; }
}

@media (max-width: 1080px) {
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--bg-raise);
    border-bottom: 1px solid var(--hair-strong);
    padding: 8px var(--gutter) 20px;
    transform: translateY(calc(-100% - var(--nav-h) - 12px));
    visibility: hidden;
    transition: transform .5s var(--ease-mech), visibility 0s linear .5s;
    box-shadow: 0 30px 60px -40px #000;
  }
  .nav.is-open .nav__links {
    transform: translateY(0);
    visibility: visible;
    transition: transform .5s var(--ease-mech), visibility 0s;
  }
  .nav__links a { padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
  .nav__links a::after { display: none; }
  .nav__links a.is-active { color: var(--brass); }

  .theme-toggle__label { display: none; }
  .theme-toggle { padding: 8px 10px; }

  .nav__burger {
    display: inline-grid; gap: 4px; align-content: center;
    background: transparent; border: 1px solid var(--hair);
    padding: 9px 10px; cursor: pointer; border-radius: 0;
  }
  .nav__burger span {
    display: block; width: 17px; height: 1px; background: var(--brass);
    transition: transform .4s var(--ease-mech), opacity .3s;
  }
  .nav.is-open .nav__burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
}

@media (max-width: 520px) {
  .brand__text { font-size: 13px; letter-spacing: .12em; }
  .about__lead::first-letter { font-size: 3.5em; }
  .modal__panel { padding: 26px 20px; max-height: 88vh; }
  .seal { right: 0; bottom: 0; }
  .footer__links { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 380px) {
  .chat__log { padding: 16px 13px; }
  .chat__suggest { padding: 0 13px 12px; }
  .chat__input { padding: 13px 13px; }
  .msg { max-width: 100%; }
}

/* ---------- 15b. THE SKY PANEL (weather + model) ---------- */

.sky { min-width: 0; }

.sky__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 38px);
  border: 1px solid var(--hair);
  border-left: 2px solid var(--accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-raise) 90%, transparent), transparent 72%);
  padding: clamp(20px, 2.6vw, 32px);
}

@media (min-width: 780px) {
  .sky__panel { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}

/* --- the live reading --- */

.sky__reading { min-width: 0; }

.sky__place {
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 10px;
}
.sky__temp {
  font-family: var(--ff-display);
  font-size: clamp(56px, 7vw, 84px);
  line-height: .92; margin: 0;
  font-variation-settings: "opsz" 120;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.sky__temp i { font-style: normal; font-size: .38em; color: var(--brass); margin-left: .06em; vertical-align: super; }
.sky__desc {
  font-size: clamp(16px, .6vw + 14px, 19px);
  color: var(--ink-2); margin: 8px 0 0;
  text-transform: lowercase;
}

.sky__stats {
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.sky__stats div { min-width: 0; }
.sky__stats dt {
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 4px;
}
.sky__stats dd {
  margin: 0; font-size: 14.5px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.sky__status { font-size: 15px; color: var(--ink-3); margin: 0; font-style: italic; }
.sky__status.is-work { color: var(--brass); }
.sky__status.is-bad { color: var(--accent-lift); font-style: normal; }

/* --- what the model made of it --- */

.sky__verdict { min-width: 0; display: flex; flex-direction: column; }
.sky__verdict-label {
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 14px;
}
.sky__answers { display: grid; gap: 12px; min-width: 0; }
@media (min-width: 780px) {
  .sky__answers:has(.sky__answer + .sky__answer) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sky__answer {
  border: 1px solid var(--hair);
  border-top: 2px solid var(--hair-strong);
  padding: 16px 18px;
  min-width: 0;
  animation: fadeUp .4s var(--ease-soft) both;
}
.sky__answer.is-bad { border-top-color: var(--accent); }
.sky__answer-model {
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-4); margin: 0 0 8px;
}
.sky__answer-text {
  margin: 0; font-size: clamp(15px, .4vw + 14px, 17.5px);
  line-height: 1.55; color: var(--ink);
}
.sky__answer.is-bad .sky__answer-text { color: var(--ink-2); }
.sky__answer-meta {
  margin: 10px 0 0; font-size: 10.5px; letter-spacing: .16em;
  color: var(--ink-4); font-variant-numeric: tabular-nums;
}
.sky__answer-meta:empty { display: none; }

/* the wait, made visible */
.sky__dots { display: inline-flex; gap: 5px; align-items: center; height: 1.2em; }
.sky__dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brass); opacity: .3;
  animation: skyDot 1.1s var(--ease-soft) infinite;
}
.sky__dots i:nth-child(2) { animation-delay: .16s; }
.sky__dots i:nth-child(3) { animation-delay: .32s; }
@keyframes skyDot {
  0%, 100% { opacity: .22; transform: translateY(0); }
  40%      { opacity: 1;   transform: translateY(-3px); }
}

/* --- controls --- */

.sky__controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  margin-top: 18px;
}
.sky__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sky__select { text-overflow: ellipsis; }
.sky__label {
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass);
}
/* Eighteen model names, two of them, plus two buttons. Let the row wrap
   rather than squeezing the selects to nothing. */
.sky__field { flex: 1 1 12rem; max-width: 18rem; }
.sky__select {
  background: var(--field-bg);
  border: 1px solid var(--hair);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 14px;
  padding: 10px 12px;
  min-width: 11rem; max-width: 100%;
  transition: border-color .3s var(--ease-soft), box-shadow .4s var(--ease-soft);
}
.sky__select:focus-visible { outline: none; border-color: var(--brass); box-shadow: 0 0 0 1px var(--glow); }
.sky__select:disabled { opacity: .55; cursor: not-allowed; }
.sky__btn { padding: 11px 18px; font-size: 11px; }

/* --- the model tag under a chat answer --- */

.chat__model {
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 0;
  color: var(--ink-3);
  font-family: var(--ff-body);
  font-size: 11px; letter-spacing: .1em;
  padding: 5px 8px;
  margin-left: auto;
  max-width: 11rem;
  transition: border-color .3s var(--ease-soft), color .3s var(--ease-soft);
}
.chat__model:hover:not(:disabled) { border-color: var(--brass-2); color: var(--ink); }
.chat__model:disabled { opacity: .5; }

/* --- the native dropdown popup ---

   The list a <select> opens is painted by the browser, outside the page, so
   most of the styling on the select itself does not reach it. In night mode
   the select's colour is a pale bone and the popup defaults to a white ground,
   which put pale text on near-white and made the options almost unreadable.

   color-scheme is the actual fix: it tells the browser which way to paint its
   own controls, so the popup comes back dark. The explicit option colours
   below are the fallback for browsers that ignore it, and they also pin the
   font, which the popup otherwise takes from the OS. */
.sky__select,
.chat__model {
  color-scheme: dark;
}
:root[data-theme="day"] .sky__select,
:root[data-theme="day"] .chat__model {
  color-scheme: light;
}

.sky__select option,
.chat__model option {
  background-color: var(--bg-raise);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 14px;
}

.msg__meta {
  margin: 8px 0 0;
  font-size: 10.5px; letter-spacing: .14em;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .sky__controls { flex-direction: column; align-items: stretch; }
  .sky__btn { width: 100%; }
  .sky__select { min-width: 0; width: 100%; }
  /* Model names got long once the list grew to eighteen. Give the select its
     own row rather than clipping "Nemotron 3.5 Lightning" mid-word. */
  .chat__model { order: 3; flex: 1 1 100%; max-width: 100%; margin-left: 0; }
}

/* Dividers can stay faint, but a border that is the only thing defining a
   control or a card cannot. These get the stronger rule in day mode only.
   Wrapped in :where() so the theme selector adds no specificity and the
   hover and focus rules on these same elements still win. */
:where(:root[data-theme="day"]) .card,
:where(:root[data-theme="day"]) .chip,
:where(:root[data-theme="day"]) .clf__dropzone,
:where(:root[data-theme="day"]) .field input,
:where(:root[data-theme="day"]) .field textarea,
:where(:root[data-theme="day"]) .astro-sound,
:where(:root[data-theme="day"]) .astro-chip,
:where(:root[data-theme="day"]) .astro-step,
:where(:root[data-theme="day"]) .sky__select,
:where(:root[data-theme="day"]) .sky__answer,
:where(:root[data-theme="day"]) .sky__panel,
:where(:root[data-theme="day"]) .chat__model {
  border-color: var(--hair-strong);
}

/* ---------- 17. MOTION PREFERENCES ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .astro-ring { transition: none; }
}

@media print {
  .nav, .grain, .hero__scrollcue, .chat, .form, .modal, .theme-toggle,
  .astro-sound { display: none !important; }
  body { background: #fff; color: #000; }
}