/* ===========================================================
   Smeet Shah — Portfolio 2027 / Space edition
   Bone dust on graphite. One brass planet. Glass on top.
   =========================================================== */

:root {
  --void:    #0A0B0E;
  --void2:   #101217;
  --bone:    #EAE8E3;
  --bone70:  rgb(var(--bone-rgb) / .70);
  --bone45:  rgb(var(--bone-rgb) / .45);
  --bone14:  rgb(var(--bone-rgb) / .14);
  --bone07:  rgb(var(--bone-rgb) / .07);

  --brass:   #C4A268;
  --bone-rgb:  234 232 227;
  --brass-rgb: 196 162 104;
  --void-rgb:  10 11 14;
  --oxblood: #8E2B39;
  --midnight:#1E2A44;

  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r: 22px;
  --r-sm: 10px;
  --shell: 1200px;
  --pad: 28px;
  --ease: cubic-bezier(.2,.8,.25,1);
}

/* the two hidden suits re-tint the accents only — the void stays */
[data-suit="bat"]  { --brass: #4C7FE0; --oxblood: #1B2942; --midnight: #101B2C; }
[data-suit="web"]  { --brass: #C2566A; --oxblood: #8E2230; --midnight: #233052; }
[data-suit="iron"] { --brass: #E0A03C; --oxblood: #9C2422; --midnight: #3A1412; }
[data-suit="chai"] { --brass: #D9A15C; --oxblood: #7A4B26; --midnight: #3A2A1B; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,p,ul,ol { margin: 0; }
ul,ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }

.h2, .hero__h1, .end__h {
  font-family: var(--display);
  font-weight: 800; letter-spacing: -.03em; line-height: .92;
}
.h2 { font-size: clamp(38px, 6vw, 74px); }

.kicker {
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--brass);
}

/* ===========================================================
   GLASS
   One surface treatment, used everywhere. Layered highlight on
   top edge so panels read as glass rather than grey boxes.
   =========================================================== */
.glass {
  position: relative;
  background: linear-gradient(
    180deg,
    rgb(var(--bone-rgb) / .085) 0%,
    rgb(var(--bone-rgb) / .035) 40%,
    rgb(var(--bone-rgb) / .05) 100%);
  border: 1px solid var(--bone14);
  border-radius: var(--r);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  box-shadow: 0 18px 50px rgba(0,0,0,.42);
  overflow: hidden;
}
.glass::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
  pointer-events: none;
}

/* fallback for browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(16,18,23,.88); }
}


/* ===========================================================
   DAYLIGHT
   The same star chart, printed. Ink dust on paper rather than
   bone dust on void — so the sky inverts instead of vanishing.
   =========================================================== */
[data-mode="light"] {
  --void:    #EDEBE6;
  --void2:   #E0DDD6;
  --bone:    #14161A;          /* now the ink colour, not the paper */
  --bone70:  rgb(var(--bone-rgb) / .76);
  --bone45:  rgb(var(--bone-rgb) / .64);   /* .45 gave 2.9:1 on 12px labels; this clears 4.5:1 */
  --bone14:  rgb(var(--bone-rgb) / .16);
  --bone07:  rgb(var(--bone-rgb) / .05);
  --brass:   #7C5D24;          /* dark enough to read as text on paper */
  --bone-rgb:  20 22 26;
  --brass-rgb: 124 93 36;
  --void-rgb:  237 235 230;
}

/* Frosted glass on a light page has to be WHITE and translucent. A dark
   tint just greys the panel out and loses every edge, which is what was
   wrong before. */
[data-mode="light"] .glass {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.78) 0%,
    rgba(255,255,255,.60) 45%,
    rgba(255,255,255,.68) 100%);
  border-color: rgb(var(--bone-rgb) / .13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 14px 40px rgb(var(--bone-rgb) / .11);
}
/* the top highlight is invisible against white, so retire it here */
[data-mode="light"] .glass::before { background: none; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-mode="light"] .glass { background: rgba(250,249,246,.96); }
}

[data-mode="light"] .hero__card {
  background: linear-gradient(
    104deg,
    rgba(255,255,255,.86) 0%,
    rgba(255,255,255,.68) 58%,
    rgba(255,255,255,.44) 100%);
  border-color: rgb(var(--bone-rgb) / .13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 48px rgb(var(--bone-rgb) / .12);
}

/* dim more of the sky, so dark dust never sits behind small text */
[data-mode="light"] .sky__scrim {
  background:
    radial-gradient(125% 85% at 68% 40%, transparent 0%, transparent 52%, rgb(var(--void-rgb) / .34) 78%, rgb(var(--void-rgb) / .62) 100%),
    linear-gradient(180deg, transparent 0%, transparent 62%, rgb(var(--void-rgb) / .48) 100%);
}

[data-mode="light"] .meter { background: rgb(var(--bone-rgb) / .10); }

/* chips and inputs need a visible edge, not just a tint */
[data-mode="light"] .chips i,
[data-mode="light"] .chips li,
[data-mode="light"] .lens,
[data-mode="light"] .modebtn,
[data-mode="light"] .end__links a,
[data-mode="light"] .btn--glass,
[data-mode="light"] .field__in {
  background: rgba(255,255,255,.62);
  border-color: rgb(var(--bone-rgb) / .16);
}
[data-mode="light"] .lens.is-on { background: var(--bone); color: #F7F6F3; border-color: var(--bone); }
[data-mode="light"] .field__in:focus { background: #FFFFFF; border-color: var(--brass); }
[data-mode="light"] .btn--glass:hover,
[data-mode="light"] .end__links a:hover { background: var(--bone); color: #F7F6F3; }
[data-mode="light"] .topnav a:hover,
[data-mode="light"] .topnav a.is-active { background: var(--bone); color: #F7F6F3; }

[data-mode="light"] .stamps li { background: rgb(var(--bone-rgb) / .045); }
[data-mode="light"] .stamps li.is-got {
  background: rgb(var(--brass-rgb) / .14);
  border-color: rgb(var(--brass-rgb) / .34);
}
[data-mode="light"] .passport__done {
  background: rgb(var(--brass-rgb) / .14);
  border-color: rgb(var(--brass-rgb) / .32);
}
[data-mode="light"] .toast { color: var(--bone); }

[data-mode="light"] .proj:hover {
  border-color: rgb(var(--bone-rgb) / .24);
  box-shadow: 0 22px 50px rgb(var(--bone-rgb) / .16);
}
[data-mode="light"] .who__pic { box-shadow: 0 0 0 1px var(--bone14), 0 0 0 5px rgb(var(--bone-rgb) / .05); }
[data-mode="light"] [data-mode="light"] .btn--brass { color: #FBF8F1; }
[data-mode="light"] .proj__art i { color: rgba(255,255,255,.94); }
[data-mode="light"] .line__item::before { background: var(--void); }
[data-mode="light"] .foot kbd { background: rgba(255,255,255,.7); }

/* ===========================================================
   SKY
   =========================================================== */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.sky__dust {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
}
.sky__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(115% 75% at 68% 40%, transparent 0%, rgb(var(--void-rgb) / .30) 58%, rgb(var(--void-rgb) / .70) 100%),
    linear-gradient(180deg, transparent 0%, transparent 48%, rgb(var(--void-rgb) / .62) 100%);
}

/* ===========================================================
   SOLAR SYSTEM
   Positions come from JS, so nothing here animates. Each body is
   sized and coloured by custom properties the script sets.
   =========================================================== */
.system {
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* The orrery shares this container with the planets rather than living in
   .sky, so a single parallax transform moves both. Two transforms that had
   to agree was what let the Voyager trails slide off their craft. */
.sky__orrery {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  pointer-events: none;
}

.body, .craft {
  position: absolute; left: 0; top: 0;
  width: var(--d, 10px); height: var(--d, 10px);
  margin: 0; padding: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%,
      color-mix(in srgb, var(--c, #8E867C) 75%, #FFFFFF) 0%,
      var(--c, #8E867C) 52%,
      color-mix(in srgb, var(--c, #8E867C) 55%, #05070A) 100%);
  box-shadow: 0 0 0 1px rgb(var(--bone-rgb) / .13);
  pointer-events: auto;
  transition: box-shadow .25s var(--ease);
}
[data-mode="light"] .body, [data-mode="light"] .craft {
  box-shadow: 0 0 0 1px rgb(var(--bone-rgb) / .16);
}

.body:hover, .body:focus-visible,
.craft:hover, .craft:focus-visible {
  box-shadow: 0 0 0 2px var(--brass), 0 0 22px rgb(var(--brass-rgb) / .45);
  z-index: 3;
}

/* the Sun is not to scale — nothing here is — but it has to read as
   the light source, so it gets a corona instead of a rim */
.body--sun {
  background: radial-gradient(circle at 42% 38%, #FFF8E9 0%, #F2E1BC 32%, var(--brass) 70%, rgb(var(--brass-rgb) / 0) 100%);
  box-shadow: none;
}
.body--sun::after {
  content: ""; position: absolute; inset: -150%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--brass-rgb) / .16) 0%, transparent 60%);
  pointer-events: none;
}
[data-mode="light"] .body--sun {
  background: radial-gradient(circle at 42% 38%, #F3DDAE 0%, #DCBC7E 38%, var(--brass) 74%, rgb(var(--brass-rgb) / 0) 100%);
  box-shadow: none;
}
[data-mode="light"] .body--sun::after {
  background: radial-gradient(circle, rgb(var(--brass-rgb) / .12) 0%, transparent 58%);
}

/* Saturn's rings, tipped to match the plane of the plot */
.body--ringed::before {
  content: ""; position: absolute;
  left: 50%; top: 50%;
  width: 230%; height: 230%;
  transform: translate(-50%, -50%) rotate(-14deg) scaleY(.30);
  border-radius: 50%;
  border: 2px solid rgba(216,195,148,.55);
  box-shadow: inset 0 0 0 3px rgba(216,195,148,.16);
  pointer-events: none;
}

/* the two spacecraft read as specks, not worlds */
.craft {
  width: 7px; height: 7px;
  border-radius: 1.5px;
  background: var(--bone);
  box-shadow: 0 0 0 1px rgb(var(--bone-rgb) / .3), 0 0 10px rgb(var(--bone-rgb) / .35);
}
.craft--far { background: var(--brass); box-shadow: 0 0 0 1px rgb(var(--brass-rgb) / .4), 0 0 12px rgb(var(--brass-rgb) / .5); }
[data-mode="light"] .craft { background: var(--bone); box-shadow: 0 0 0 1px rgb(var(--bone-rgb) / .3); }

.body__tag {
  position: absolute; left: 50%; bottom: calc(100% + 9px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--bone);
  background: color-mix(in srgb, var(--void) 82%, transparent);
  border: 1px solid var(--bone14);
  border-radius: 999px;
  padding: 4px 10px;
  opacity: 0; pointer-events: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity .22s;
}
.body:hover .body__tag, .body:focus-visible .body__tag,
.craft:hover .body__tag, .craft:focus-visible .body__tag { opacity: 1; }

/* ===========================================================
   METER + TOP BAR
   =========================================================== */
.meter { position: fixed; inset: 0 0 auto 0; z-index: 46; height: 2px; background: transparent; }
.meter__fill { display: block; height: 100%; width: 0; background: var(--brass); transition: width .1s linear; }

.topbar {
  position: fixed; top: 13px; left: 0; right: 0; z-index: 45;
  width: min(calc(100% - 28px), var(--shell));
  margin: 0 auto;
  padding: 9px 15px 9px 12px;
  border-radius: 999px;               /* a floating bar, not a full-width band */
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.mark { display: inline-flex; align-items: center; gap: 10px; }
.mark__logo {
  width: auto; height: 21px;
  transition: transform .4s var(--ease), opacity .3s;
}
.mark:hover .mark__logo { transform: rotate(-6deg) scale(1.06); }
.mark__name { font-weight: 600; letter-spacing: -.01em; }

.topnav { display: flex; gap: 4px; }
.topnav a {
  padding: 7px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 500; color: var(--bone70);
  transition: background-color .25s, color .25s;
}
.topnav a:hover, .topnav a.is-active { background: var(--bone14); color: var(--bone); }

.tools { display: flex; align-items: center; gap: 10px; }

.clock {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 500; color: var(--bone45);
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.wx {
  display: inline-flex; width: 17px; height: 17px;
  color: var(--brass);
}
.wx svg { width: 100%; height: 100%; display: block; }
.wx:empty { display: none; }
.wx__temp { color: var(--bone70); }
.wx__temp:empty { display: none; }

.modebtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 10px; border-radius: 999px;
  border: 1px solid var(--bone14); background: var(--bone07);
  font-size: 13px; font-weight: 500; color: var(--bone70);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .25s, color .25s, transform .25s var(--ease);
}
.modebtn:hover { border-color: var(--bone45); color: var(--bone); transform: translateY(-1px); }
.modebtn__ico { display: inline-flex; width: 15px; height: 15px; color: var(--brass); }
.modebtn__ico svg { width: 100%; height: 100%; display: block; }

/* ===========================================================
   HERO
   =========================================================== */
main { position: relative; z-index: 2; }

.hero {
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 120px 0 60px;
  pointer-events: none;         /* so the planets behind stay clickable */
}
.hero .wrap { pointer-events: none; }
.hero__card { pointer-events: auto; }
.hero__card {
  max-width: 548px;
  padding: clamp(26px, 3.2vw, 40px);
  /* denser behind the text on the left, clearing toward the right so the
     dust and planets stay visible through the panel's empty side */
  background: linear-gradient(
    104deg,
    rgb(var(--bone-rgb) / .105) 0%,
    rgb(var(--bone-rgb) / .055) 58%,
    rgb(var(--bone-rgb) / .022) 100%);
  backdrop-filter: blur(26px) saturate(115%);
  -webkit-backdrop-filter: blur(26px) saturate(115%);
  box-shadow: 0 22px 70px rgba(0,0,0,.38);
}
.hero__h1 { font-size: clamp(36px, 5.1vw, 64px); margin-top: 12px; }
.hero__h1 em { font-style: normal; color: var(--brass); }
.hero__sub { margin-top: 18px; max-width: 42ch; color: var(--bone70); font-size: 16.5px; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 24px; }
.hero__hint { margin-top: 16px; font-size: 13px; color: var(--bone45); font-style: italic; }

.btn {
  display: inline-flex; align-items: center;
  height: 48px; padding: 0 24px; border-radius: 999px;
  font-weight: 600; font-size: 15.5px;
  transition: transform .3s var(--ease), background-color .3s, color .3s;
}
.btn--brass { background: var(--brass); color: #12100B; }
.btn--brass:hover { transform: translateY(-3px); }
.btn--glass { border: 1px solid var(--bone14); background: var(--bone07); color: var(--bone); }
.btn--glass:hover { background: var(--bone); color: var(--void); transform: translateY(-3px); }


/* ===========================================================
   DEBRIS FIELD
   Replaces the text ticker. Same job — a band that separates the
   hero from the work — but it belongs to the world the page is in.
   =========================================================== */
.debris {
  position: relative; z-index: 2;
  height: 86px;
  overflow: hidden;
  /* no borders, no fill — the rocks fade out top and bottom so the band
     reads as a drift through open space rather than a strip in a box */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
}
.debris canvas { display: block; width: 100%; height: 100%; }

/* an emptied stats list should collapse, not leave a bordered gap */

/* ===========================================================
   SECTIONS
   =========================================================== */
.sect { padding: 96px 0 0; }
.sect--end { padding-bottom: 96px; }

.sect__head {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
  gap: 40px; align-items: end; margin-bottom: 40px;
}
.sect__aside { color: var(--bone70); font-size: 16.5px; }
.sect__aside .more { margin-top: 16px; font-size: 15.5px; }

.lenses { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.lens {
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--bone14); background: var(--bone07);
  font-size: 14.5px; font-weight: 500; color: var(--bone70);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.lens:hover { border-color: var(--bone45); color: var(--bone); transform: translateY(-2px); }
.lens.is-on { background: var(--bone); color: var(--void); border-color: var(--bone); }
.lens__note { margin-top: 14px; font-size: 14px; color: var(--bone45); font-style: italic; }

/* ---------- project grid ---------- */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.proj {
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.proj:hover {
  transform: translateY(-6px);
  border-color: rgb(var(--bone-rgb) / .28);
  box-shadow: 0 26px 60px rgba(0,0,0,.55);
}
.proj--wide { grid-column: span 2; }

.proj__art {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--a), var(--b));
  overflow: hidden;
}
.proj__art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;              /* nothing gets cut off */
  transition: transform .7s var(--ease);
}
.proj--fill .proj__art img { object-fit: cover; object-position: center top; }

/* Posters are artwork rather than case-study covers: they fill their frame,
   cropped from the top so a title at the head of the sheet survives, and get
   a slightly taller window than the project cards. */
.proj[data-cat="poster"] .proj__art { aspect-ratio: 4 / 3; background: #1B2028; }
.proj:hover .proj__art img { transform: scale(1.03); }
.proj__art i {
  font-family: var(--display); font-weight: 800; font-style: normal;
  font-size: clamp(22px, 3vw, 40px); letter-spacing: -.03em;
  color: rgba(255,255,255,.9); text-align: center; padding: 0 18px;
}
.proj__art img ~ i { display: none; }

.proj__meta { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.proj__meta b { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.proj__meta em { font-style: normal; font-size: 15px; color: var(--bone70); line-height: 1.45; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.chips i, .chips li {
  font-style: normal; font-size: 12.5px; font-weight: 500;
  padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--bone07); border: 1px solid var(--bone14);
}
.proj.is-hidden { display: none; }
.grid__empty { margin-top: 28px; color: var(--bone45); font-style: italic; }

.more {
  display: inline-block; margin-top: 30px;
  font-weight: 600; color: var(--bone);
  border-bottom: 2px solid var(--brass); padding-bottom: 3px;
  transition: color .25s;
}
.more:hover { color: var(--brass); }

/* ===========================================================
   ABOUT
   =========================================================== */
.about { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 56px; }

/* the portrait now lives here, small, as a byline */
.who { display: inline-flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.who__pic {
  position: relative;
  width: 54px; height: 54px; border-radius: 50%;
  overflow: hidden; flex: 0 0 54px;
  background: var(--midnight);
  box-shadow: 0 0 0 1px var(--bone14), 0 0 0 5px rgb(var(--bone-rgb) / .05);
}
.who__pic img { width: 100%; height: 100%; object-fit: cover; }
.who__pic--empty::after {
  content: "SS"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 18px;
  color: var(--bone45);
}
.who__meta { display: flex; flex-direction: column; line-height: 1.3; }
.who__meta b { font-size: 15px; font-weight: 600; }
.who__meta em { font-style: normal; font-size: 13px; color: var(--bone45); }

.about__text .h2 { margin-bottom: 24px; }
.about__text p { margin-bottom: 16px; color: var(--bone70); }
.about__text .lead { font-size: 21px; color: var(--bone); font-weight: 500; }
.kern { display: inline-block; transition: letter-spacing .5s var(--ease), color .4s; }
.kern:hover { letter-spacing: .22em; color: var(--brass); }

.about__side { display: flex; flex-direction: column; gap: 14px; }
.card { padding: 24px; }
.card__h { font-size: 13px; font-weight: 600; color: var(--brass); margin-bottom: 14px; letter-spacing: .03em; }
.chips--lg li { font-size: 14px; padding: 6px 12px; }

/* ===========================================================
   PATH
   =========================================================== */
.path { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.path__col { padding: 30px 28px; }
.path__h { font-size: 13px; font-weight: 600; color: var(--brass); margin-bottom: 22px; letter-spacing: .03em; }
.line { display: flex; flex-direction: column; }
.line__item { position: relative; padding: 0 0 28px 26px; border-left: 1px solid var(--bone14); }
.line__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.line__item::before {
  content: ""; position: absolute; left: -5px; top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--void); border: 1px solid var(--bone45);
}
.line__item.is-now::before {
  background: var(--brass); border-color: var(--brass);
  box-shadow: 0 0 12px rgb(var(--brass-rgb) / .6);
}
.line__when { display: block; font-size: 13px; color: var(--bone45); font-weight: 500; }
.line__what { display: block; font-size: 17.5px; font-weight: 600; margin-top: 3px; letter-spacing: -.015em; }
.line__where { display: block; font-size: 14.5px; color: var(--brass); font-weight: 500; }
.line__where a {
  border-bottom: 1px solid rgb(var(--brass-rgb) / .4);
  transition: border-color .25s, color .25s;
}
.line__where a:hover { border-color: var(--brass); color: var(--bone); }
.line__where a::after { content: " \2197"; font-size: 11px; opacity: .7; }
.line__item p { margin-top: 8px; font-size: 14.5px; color: var(--bone70); }

/* ===========================================================
   CONTACT
   =========================================================== */
.end { margin-top: 90px; padding: clamp(40px, 7vw, 84px); text-align: center; }
.end__kick { font-size: 14px; color: var(--brass); font-weight: 600; }
.end__h { font-size: clamp(40px, 8vw, 92px); margin: 18px 0; }
.end__mail {
  display: inline-block; margin-top: 30px;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 3.2vw, 34px); letter-spacing: -.02em;
  border-bottom: 3px solid var(--brass); padding-bottom: 4px;
  transition: color .3s;
}
.end__mail:hover { color: var(--brass); }
.end__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 34px; }
.end__links a {
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--bone14); background: var(--bone07);
  font-size: 14.5px; font-weight: 500;
  transition: background-color .25s, color .25s, transform .25s var(--ease);
}
.end__links a:hover { background: var(--bone); color: var(--void); transform: translateY(-2px); }

.foot {
  position: relative; z-index: 2;
  max-width: var(--shell); margin: 0 auto;
  padding: 30px var(--pad) 96px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 13px; color: var(--bone45);
}

/* ===========================================================
   TRANSMISSION FORM
   =========================================================== */
.wire__form { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }

/* the honeypot: a real field, hidden from people but visible to bots */
.wire__pot { position: absolute; left: -9999px; }

.wire__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }

.field { display: flex; flex-direction: column; gap: 7px; position: relative; border: 0; padding: 0; margin: 0; }
.field__label {
  font-size: 12.5px; font-weight: 600; letter-spacing: .03em;
  color: var(--bone45); padding: 0;
}
.field__in {
  width: 100%;
  font: inherit; font-size: 15.5px;
  color: var(--bone);
  background: var(--bone07);
  border: 1px solid var(--bone14);
  border-radius: 12px;
  padding: 12px 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .25s, background-color .25s;
}
.field__in::placeholder { color: var(--bone45); }
.field__in:focus { outline: none; border-color: var(--brass); background: rgb(var(--brass-rgb) / .07); }
.field__in--area { resize: vertical; min-height: 104px; line-height: 1.5; }
.field__count {
  position: absolute; right: 2px; bottom: -18px;
  font-size: 11.5px; color: var(--bone45);
  font-variant-numeric: tabular-nums;
}

/* the planet picker */
.field--planets { gap: 10px; }
.orbs { display: flex; flex-wrap: wrap; gap: 7px; }
.orb {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 9px; border-radius: 999px;
  border: 1px solid var(--bone14); background: var(--bone07);
  font-size: 13.5px; font-weight: 500; color: var(--bone70);
  transition: border-color .25s, color .25s, background-color .25s;
}
.orb__dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,
    color-mix(in srgb, var(--c) 78%, #FFFFFF) 0%, var(--c) 58%,
    color-mix(in srgb, var(--c) 55%, #05070A) 100%);
}
.orb:hover { border-color: var(--bone45); color: var(--bone); }
.orb.is-on {
  border-color: var(--brass);
  background: rgb(var(--brass-rgb) / .12);
  color: var(--bone);
}
.orbs__delay { font-size: 13px; color: var(--bone45); font-style: italic; min-height: 19px; }

.wire__send { align-self: flex-start; margin-top: 4px; }
.wire__send[disabled] { opacity: .55; cursor: default; transform: none; }

.wire__status { font-size: 14px; color: var(--bone70); min-height: 20px; }
.wire__status.is-bad { color: #D98A94; }
[data-mode="light"] .wire__status.is-bad { color: #9A2C39; }
.wire__status.is-good { color: var(--brass); font-weight: 500; }
.wire__status a { border-bottom: 1px solid var(--bone45); }


/* ===========================================================
   THE GOLDEN RECORD PLATE
   The one loud moment on the page. Etched gold, its own colour
   scope so it stays the same object in daylight or dark, the way
   a plate bolted to a spacecraft would.
   =========================================================== */
.record {
  position: relative;
  margin: 48px auto 8px;
  max-width: 700px;
  text-align: left;
  border-radius: 20px;
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px);
  color: #2A2009;

  /* rolled gold: a warm sheet with a diagonal sheen across it */
  background:
    linear-gradient(118deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,0) 26%,
      rgba(120,82,18,.16) 58%,
      rgba(255,255,255,.20) 82%,
      rgba(120,82,18,.10) 100%),
    linear-gradient(152deg, #E5C070 0%, #C69A4A 40%, #A87F35 72%, #C9A155 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,248,226,.6),
    inset 0 -1px 0 rgba(90,60,12,.35),
    0 24px 60px rgba(0,0,0,.42);
}

/* record grooves, raked across the plate */
.record::after {
  content: "";
  position: absolute; inset: -40% -10% auto -10%;
  height: 180%;
  background: repeating-linear-gradient(
    96deg,
    rgba(90,60,12,.055) 0 1px,
    transparent 1px 7px);
  pointer-events: none;
}

/* the pulsar map from the real cover, etched into the corner */
.record__etch {
  position: absolute;
  right: -56px; top: -46px;
  width: 300px; height: 300px;
  color: #6B4A12;
  opacity: .22;
  pointer-events: none;
}
.record__etch svg { width: 100%; height: 100%; display: block; }

.record__in { position: relative; z-index: 1; }

.record__kick {
  font-family: var(--display);
  font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(22px, 3.2vw, 32px);
  color: #241B06;
  margin-bottom: 14px;
}
.record__lede { font-size: 16px; line-height: 1.6; max-width: 46ch; }


.record__silence { font-size: 15.5px; line-height: 1.6; }
.record__silence b { font-weight: 700; color: #201803; }
.record__ask {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: #3E2D08;
  max-width: 52ch;
}
.record__turn {
  margin-top: 14px;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(17px, 2.4vw, 21px); letter-spacing: -.02em;
  color: #241B06;
}

/* ---- the form, etched rather than boxed ---- */
.record .wire__form { margin-top: 26px; gap: 18px; }
.record .field__label { color: #4A360C; }
.record .field__in {
  color: #201803;
  background: rgba(255,250,236,.30);
  border: 1px solid rgba(90,60,12,.34);
  border-radius: 10px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.record .field__in::placeholder { color: rgba(60,44,10,.5); }
.record .field__in:focus {
  border-color: #3A2A07;
  background: rgba(255,252,242,.55);
}
.record .field__count { color: #5A430F; }

.record .orb {
  border: 1px solid rgba(90,60,12,.32);
  background: rgba(255,250,236,.26);
  color: #3A2B08;
}
.record .orb:hover { border-color: #3A2A07; color: #201803; }
.record .orb.is-on { background: #2A2009; border-color: #2A2009; color: #EFD9A4; }
.record .orbs__delay { color: #4E3A0F; }

.record .wire__send {
  background: #241B06; color: #F0DCAA;
  border: 0;
}
.record .wire__send:hover { background: #100C02; transform: translateY(-3px); }
.record .wire__status { color: #3E2D08; }
.record .wire__status.is-good { color: #1F4A2A; font-weight: 600; }
.record .wire__status.is-bad { color: #7A1C20; }
.record .wire__status a { border-bottom: 1px solid rgba(60,44,10,.5); }

@media (max-width: 620px) {
  .record { padding: 26px 20px; border-radius: 16px; }
    .record__etch { right: -70px; top: -60px; width: 230px; height: 230px; opacity: .17; }
}

/* the speck that flies home when a message sends */
.sent {
  position: fixed; left: 0; top: 0;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--brass);
  box-shadow: 0 0 14px rgb(var(--brass-rgb) / .75);
  z-index: 44; pointer-events: none;
}

@media (max-width: 620px) {
  .wire__row { grid-template-columns: 1fr; }
}

.foot__wx { border-bottom: 1px solid var(--bone14); }
.foot__wx:hover { color: var(--bone70); border-color: var(--bone45); }
.foot kbd {
  font-family: var(--sans); font-size: 12.5px;
  padding: 2px 7px; border-radius: 6px;
  background: var(--bone07); border: 1px solid var(--bone14); color: var(--bone70);
}



/* ===========================================================
   THE STREETS
   A real street map, recoloured to the page palette and left
   transparent so the sky shows through it. The car wanders the
   road network rather than following a fixed loop.
   =========================================================== */
.map {
  position: relative; z-index: 2;
  max-width: 860px;              /* nearly square, so keep it in proportion */
  margin: 14px auto 0;
  padding: 0 var(--pad);
}
.map__svg {
  display: block; width: 100%; height: auto;
  overflow: visible;
  /* soften the cut edges so it reads as a fragment of a city,
     not a rectangle someone pasted in */
  -webkit-mask-image: radial-gradient(118% 108% at 50% 48%, #000 56%, transparent 100%);
          mask-image: radial-gradient(118% 108% at 50% 48%, #000 56%, transparent 100%);
}

/* GTA-style hierarchy: dark flat blocks, dark casings, bright surfaces,
   and freeways picked out in brass so the network reads at a glance. */
.mp-bld path { fill: #1B222A; stroke: none; }

.mp-rail path {
  fill: none; stroke: var(--bone); stroke-opacity: .30;
  stroke-width: 1.4; stroke-dasharray: 3 3.4; stroke-linecap: butt;
}

.mp-case path { fill: none; stroke: #0C1116; stroke-linecap: round; stroke-linejoin: round; }
.mp-case .rc-minor path { stroke-width: 2.6; }
.mp-case .rc-major path { stroke-width: 4.0; }
.mp-case .rc-hiway path { stroke-width: 5.4; }

#mpRoads path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#mpRoads .rf-minor path { stroke: #7E8B98; stroke-width: 1.5; }
#mpRoads .rf-major path { stroke: #BAC5CE; stroke-width: 2.5; }
#mpRoads .rf-hiway path { stroke: var(--brass);  stroke-width: 3.4; }

/* home */
.mp-home__pin  { fill: #C13046; }
.mp-home__ring { fill: none; stroke: #C13046; stroke-width: 1.2; opacity: .55;
                 transform-origin: 345.4px 240.7px; animation: home-ping 3.4s ease-out infinite; }
@keyframes home-ping {
  0%   { transform: scale(.7); opacity: .6; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

[data-mode="light"] .mp-bld path { fill: #C9CFD6; }
[data-mode="light"] .mp-case path { stroke: #8A949E; }
[data-mode="light"] #mpRoads .rf-minor path { stroke: #F2F4F6; }
[data-mode="light"] #mpRoads .rf-major path { stroke: #FFFFFF; }
[data-mode="light"] .mp-rail path { stroke: #4A525B; stroke-opacity: .5; }


/* the car itself */
.mp-car__s      { transform: scale(0.26); }
.mp-car__glow   { fill: var(--brass); opacity: .18; }
.mp-car__tyre   { fill: #0B0D10; }
.mp-car__mirror { fill: #171B21; }
.mp-car__body   { fill: #12161B; stroke: #6E7C8A; stroke-width: .9; }
.mp-car__glass  { fill: #46566A; }
.mp-car__roof   { fill: #252B34; }
.mp-car__crease { stroke: #39414C; stroke-width: .9; fill: none; }
.mp-car__lamp   { fill: #F6E8C4; }
.mp-car__tail   { fill: #8E2B39; }
[data-mode="light"] .mp-car__glow { opacity: .24; }
[data-mode="light"] .mp-car__body { stroke: #2B333D; }

.map__cap {
  margin-top: 2px;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: .03em;
  color: var(--bone45);
}

@media (max-width: 720px) {
  .map { margin-top: 0; }
  
/* the car itself */
.mp-car__s      { transform: scale(0.26); }
.mp-car__glow   { fill: var(--brass); opacity: .18; }
.mp-car__tyre   { fill: #0B0D10; }
.mp-car__mirror { fill: #171B21; }
.mp-car__body   { fill: #12161B; stroke: #6E7C8A; stroke-width: .9; }
.mp-car__glass  { fill: #46566A; }
.mp-car__roof   { fill: #252B34; }
.mp-car__crease { stroke: #39414C; stroke-width: .9; fill: none; }
.mp-car__lamp   { fill: #F6E8C4; }
.mp-car__tail   { fill: #8E2B39; }
[data-mode="light"] .mp-car__glow { opacity: .24; }
[data-mode="light"] .mp-car__body { stroke: #2B333D; }

.map__cap { font-size: 11.5px; }
  .mp-car__s { transform: scale(0.36); }  /* smaller screen, bigger marker */
}


/* ===========================================================
   LO-FI SWITCH, REVERT CHIP
   =========================================================== */
.lofi.is-on { border-color: var(--brass); color: var(--bone); }
.lofi.is-on .modebtn__ico { animation: hum 2.6s ease-in-out infinite; }
@keyframes hum { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

.revert[hidden] { display: none; }
.revert .modebtn__ico { font-size: 15px; line-height: 1; }
.revert { border-color: var(--brass); color: var(--bone); }

/* ===========================================================
   ADRIFT
   Leave the page alone and it wanders off: the panels step back,
   the sky comes forward. Any sign of life brings it round.
   =========================================================== */
.is-adrift .glass:not(.toast):not(.passport):not(.stampbtn),
.is-adrift .record,
.is-adrift .debris,
.is-adrift .map,
.is-adrift .foot,
.is-adrift .topbar { opacity: .26; }
.is-adrift .sky__scrim { opacity: .18; }
.glass, .record, .debris, .map, .foot, .topbar, .sky__scrim {
  transition: opacity 2.2s var(--ease);
}
/* the 404 is a quick blink, not the slow drift */
.is-gone main, .is-gone .debris, .is-gone .map, .is-gone .foot {
  transition: opacity .45s var(--ease);
}
main { transition: opacity .45s var(--ease); }

.adrift {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(18px, 3vw, 26px);
  letter-spacing: -.02em;
  color: var(--bone70);
  opacity: 0; pointer-events: none;
  transition: opacity 2.2s var(--ease);
}
.is-adrift .adrift { opacity: 1; }

/* ===========================================================
   404 AND WARP
   =========================================================== */
.is-gone main, .is-gone .debris, .is-gone .map, .is-gone .foot { opacity: 0; }
.is-gone .adrift { opacity: 0 !important; }
.gone-note {
  position: fixed; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  z-index: 7; margin: 0;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(34px, 9vw, 96px); letter-spacing: -.04em;
  color: var(--brass);
}
.gone-note small {
  display: block; margin-top: 10px;
  font-family: var(--sans); font-weight: 500;
  font-size: 15px; letter-spacing: 0; color: var(--bone70);
}

/* the orrery briefly runs away with itself */
.is-warping .system { transition: none; }

/* ===========================================================
   THE MAP, DRIFTING
   =========================================================== */
.map__svg { animation: map-drift 90s ease-in-out infinite alternate; }
@keyframes map-drift {
  from { transform: translate(-0.8%, 0.6%) scale(1.012); }
  to   { transform: translate(0.9%, -0.7%) scale(1.004); }
}
.map__cap--sub { color: var(--bone45); font-size: 11.5px; }

/* the penguin, looking up */
.peng.is-gazing .peng__body { transform: rotate(-16deg); transition: transform .8s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .map__svg { animation: none; }
  .mp-home__ring { animation: none; opacity: .4; }
  .peng.is-gazing .peng__body { transition: none; }
  .lofi.is-on .modebtn__ico { animation: none; }
}

/* ===========================================================
   FLIGHT LOG
   =========================================================== */
.stampbtn {
  position: fixed; left: 20px; bottom: 20px; z-index: 48;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px 12px 15px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600;
  transition: transform .3s var(--ease);
}
.stampbtn:hover { transform: translateY(-3px); }
.stampbtn.is-ping { animation: ping .6s var(--ease); }
@keyframes ping { 40% { transform: scale(1.1) rotate(-3deg); } 70% { transform: scale(.97); } }
.stampbtn__seal { color: var(--brass); font-size: 16px; }
.stampbtn__txt b { color: var(--brass); }

.passport {
  position: fixed; left: 20px; bottom: 84px; z-index: 49;
  width: min(340px, calc(100vw - 40px));
  padding: 22px;
  opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.passport.is-open { opacity: 1; transform: none; pointer-events: auto; }
.passport__top { display: flex; align-items: center; justify-content: space-between; }
.passport__top h3 { font-size: 17px; font-weight: 600; }
.passport__x { font-size: 24px; line-height: 1; color: var(--bone45); }
.passport__note { font-size: 13px; color: var(--bone45); margin-top: 6px; }
.stamps { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.stamps li {
  display: grid; grid-template-columns: 24px 1fr; gap: 3px 11px; align-items: center;
  padding: 9px 11px; border-radius: var(--r-sm);
  background: rgb(var(--bone-rgb) / .04);
  border: 1px solid transparent;
  opacity: .45;
  transition: opacity .35s, background-color .35s, border-color .35s;
}
.stamps li span { grid-row: span 2; font-size: 18px; color: var(--bone45); }
.stamps li b { font-size: 14.5px; font-weight: 600; }
.stamps li em { font-style: normal; font-size: 12.5px; color: var(--bone45); }
.stamps li.is-got {
  opacity: 1;
  background: rgb(var(--brass-rgb) / .12);
  border-color: rgb(var(--brass-rgb) / .32);
}
.stamps li.is-got span { color: var(--brass); }
.passport__done {
  margin-top: 14px; padding: 12px; border-radius: var(--r-sm);
  background: rgb(var(--brass-rgb) / .14); border: 1px solid rgb(var(--brass-rgb) / .3);
  font-size: 13px;
}

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 60;
  transform: translate(-50%, 20px);
  padding: 12px 22px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500;
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s var(--ease);
}
.toast.is-up { opacity: 1; transform: translate(-50%, 0); }

.cups { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.cup {
  position: absolute;
  color: var(--brass);
  animation: float 2.6s var(--ease) forwards;
}
.cup svg { width: 100%; height: 100%; display: block;
           filter: drop-shadow(0 3px 10px rgba(0,0,0,.45)); }
@keyframes float {
  0% { transform: translateY(0) rotate(0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(-88vh) rotate(24deg); opacity: 0; }
}


/* ===========================================================
   THE PENGUIN
   Lives in the viewport, not the page, so he stays with you as
   you scroll. JS moves the outer .peng; all the animation lives
   on .peng__body so the two never fight over `transform`.
   =========================================================== */
.peng {
  position: fixed;
  left: 0; top: 0;
  z-index: 47;                 /* above the content, below the log button */
  width: 34px; height: 46px;
  pointer-events: none;
  will-change: transform;
}
.peng[hidden] { display: none; }

.peng__body {
  display: block;
  width: 100%; height: 100%;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
  transform-origin: 50% 92%;
}
[data-mode="light"] .peng__body { filter: drop-shadow(0 6px 10px rgb(var(--bone-rgb) / .22)); }
.peng__body svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* walking: a waddle from the feet, and the wings swing out of phase */
.peng.is-walking .peng__body { animation: waddle .46s ease-in-out infinite; }
@keyframes waddle {
  0%, 100% { transform: rotate(-4.5deg) translateY(0); }
  50%      { transform: rotate(4.5deg) translateY(-1.5px); }
}
.peng.is-walking .peng__wing--l { animation: flapL .46s ease-in-out infinite; }
.peng.is-walking .peng__wing--r { animation: flapR .46s ease-in-out infinite; }
@keyframes flapL { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(7deg); } }
@keyframes flapR { 0%,100% { transform: rotate(9deg); } 50% { transform: rotate(-7deg); } }
.peng__wing--l { transform-origin: 88% 8%; }
.peng__wing--r { transform-origin: 12% 8%; }

/* the feet shuffle in opposition, so the waddle reads as steps
   rather than a slide */
.peng.is-walking .peng__foot--l { animation: stepL .46s ease-in-out infinite; }
.peng.is-walking .peng__foot--r { animation: stepR .46s ease-in-out infinite; }
@keyframes stepL { 0%,100% { transform: translate(-1px, 0); }   50% { transform: translate(2px, -2.5px); } }
@keyframes stepR { 0%,100% { transform: translate(1px, -2.5px); } 50% { transform: translate(-2px, 0); } }

/* facing: flipped on the wrapper so the walk animation is unaffected */
.peng.is-left .peng__body svg { transform: scaleX(-1); }

/* a blink every so often, so he doesn't look dead while idling */
.peng__eye { animation: blink 6.2s infinite; transform-origin: center; }
@keyframes blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96%, 98%      { transform: scaleY(.12); }
}

/* the hop when you greet him */
.peng.is-hop .peng__body { animation: hop .52s var(--ease); }
@keyframes hop {
  0%   { transform: translateY(0) scale(1,1); }
  28%  { transform: translateY(-16px) scale(.94,1.08); }
  62%  { transform: translateY(0) scale(1.08,.92); }
  100% { transform: translateY(0) scale(1,1); }
}

@media (max-width: 720px) { .peng { width: 28px; height: 38px; } }

@media (max-width: 400px) {
  .mark__name { font-size: 13px; }
  .clock { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .peng.is-walking .peng__body,
  .peng.is-walking .peng__wing--l,
  .peng.is-walking .peng__wing--r,
  .peng.is-walking .peng__foot--l,
  .peng.is-walking .peng__foot--r,
  .peng__eye, .peng.is-hop .peng__body { animation: none; }
}

/* ===========================================================
   REVEAL
   =========================================================== */
.up { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .up { opacity: 0; transform: translateY(22px); }
.js .up.is-in { opacity: 1; transform: none; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 1000px) {
  .sect__head { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .about { grid-template-columns: 1fr; gap: 40px; }
  .path { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .proj--wide { grid-column: span 2; }
}

@media (max-width: 720px) {
  :root { --pad: 18px; --r: 18px; }
  body { font-size: 16px; }
  .topbar {
    top: 10px;
    width: calc(100% - 20px);
    padding: 9px 12px;
    border-radius: var(--r);
    flex-wrap: wrap; gap: 8px;
  }
  /* the name stays — everything around it gives up a few pixels instead */
  .mark { gap: 8px; }
  .mark__name { display: inline; font-size: 14px; }
  .mark__logo { height: 18px; }
  .clock { font-size: 11.5px; gap: 4px; }
  .wx { width: 14px; height: 14px; }
  .modebtn__txt { display: none; }
  .modebtn { padding: 5px 8px; }
  .modebtn__ico { width: 14px; height: 14px; }
  .tools { gap: 6px; }
  .topnav { order: 3; width: 100%; justify-content: space-between; gap: 2px; }
  .topnav a { padding: 6px 10px; font-size: 14px; }

  /* On a phone the hero card covered the solar system entirely. Reordering
     main lets the sky breathe first: open space, then the belt, then the
     card. The sections themselves keep their source order. */
  main { display: flex; flex-direction: column; padding-top: 116px; }
  .debris { order: -1; margin-top: 30vh; }
  .hero { padding-top: 20px; min-height: 0; }
  .grid { grid-template-columns: 1fr; }
  .proj--wide { grid-column: span 1; }
  .about__text .lead { font-size: 18.5px; }
  .path__col { padding: 24px 20px; }
  .end { border-radius: 20px; }
  .foot { padding-bottom: 100px; justify-content: center; text-align: center; }
  .stampbtn { left: 14px; bottom: 14px; padding: 10px 16px 10px 12px; font-size: 13.5px; }
  .passport { left: 14px; bottom: 72px; }
  .hero__card {
    background: linear-gradient(
      180deg,
      rgb(var(--bone-rgb) / .10) 0%,
      rgb(var(--bone-rgb) / .06) 100%);
  }
  .body__tag { font-size: 10px; padding: 3px 8px; }
}

/* ===========================================================
   REDUCED MOTION
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cup, .stampbtn.is-ping { animation: none; }
  .up, .js .up { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; }
}


/* =================================================================
   MATERIAL 3 EXPRESSIVE LAYER
   Sits on top of everything above. Colour comes from theme.js,
   which writes the full M3 role palette (--md-*) from one seed
   and maps it onto the site's own tokens. This layer adds the
   M3 Expressive shape scale, spring motion, tonal surfaces and
   Google Sans Flex. Every rule is prefixed with :root so it wins
   over the light-mode overrides above without !important.
   ================================================================= */

@font-face {
  font-family: "Google Sans Flex";
  src: url("fonts/google-sans-flex.woff2") format("woff2-variations"),
       url("fonts/google-sans-flex.woff2") format("woff2");
  font-weight: 1 1000;
  font-display: swap;
}

:root {
  --display: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans:    "Google Sans Flex", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* M3 Expressive shape scale */
  --md-shape-xs: 4px;   --md-shape-sm: 8px;    --md-shape-md: 12px;
  --md-shape-lg: 16px;  --md-shape-lg-up: 20px; --md-shape-xl: 28px;
  --md-shape-xl-up: 32px; --md-shape-xxl: 48px; --md-shape-full: 999px;

  /* springs: a real damped spring sampled into linear() */
  --md-spring: linear(0, 0.045, 0.158, 0.308, 0.47, 0.627, 0.767, 0.884, 0.974, 1.038, 1.079, 1.101, 1.107, 1.102, 1.09, 1.074, 1.057, 1.04, 1.025, 1.012, 1.003, 0.996, 0.992, 0.989, 0.989, 0.989, 0.99, 0.992, 1);
  --md-spring-snap: linear(0, 0.064, 0.209, 0.383, 0.554, 0.703, 0.822, 0.911, 0.971, 1.009, 1.029, 1.038, 1.038, 1.034, 1.027, 1.02, 1.014, 1.009, 1.005, 1.002, 1, 0.999, 0.999, 1);
  --md-spring-dur: .62s;
  --md-snap-dur: .38s;

  /* fallbacks for before theme.js runs */
  --md-primary: #E6C184; --md-on-primary: #3F2E00;
  --md-primary-container: #5B4300; --md-on-primary-container: #FFDEA6;
  --md-secondary-container: #4F4532; --md-on-secondary-container: #F2E0C4;
  --md-tertiary-container: #2E4F3E; --md-on-tertiary-container: #C1EDD2;
  --md-surface: #17130B; --md-surface-container-lowest: #110E07;
  --md-surface-container-low: #1F1B13; --md-surface-container: #231F17;
  --md-surface-container-high: #2E2921; --md-surface-container-highest: #39342B;
  --md-on-surface: #EBE1D4; --md-on-surface-variant: #D1C5B4;
  --md-outline: #9A8F80; --md-outline-variant: #4E4639;
  --md-inverse-surface: #EBE1D4; --md-inverse-on-surface: #353027;
  --md-surface-container-rgb: 35 31 23;
  --md-surface-container-low-rgb: 31 27 19;
  --md-surface-container-high-rgb: 46 41 33;
  --rond: 30;
}

/* roundness is a font axis; each element re-reads its own --rond */
:root * { font-variation-settings: "ROND" var(--rond); }
:root body { font-family: var(--sans); letter-spacing: .005em; }
::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }

/* ---------- emphasised type ---------- */
:root .hero__h1, :root .h2, :root .end__h, :root .record__kick {
  --rond: 100;
  font-family: var(--display);
  font-weight: 760;
  letter-spacing: -.035em;
  line-height: .96;
}
:root .hero__h1 em { color: var(--md-primary); }
:root .kicker, :root .card__h, :root .path__h, :root .eyebrow, :root .end__kick {
  --rond: 60; font-weight: 640; letter-spacing: .02em; color: var(--md-primary);
}

/* ---------- surfaces: tonal, not glass ---------- */
:root .glass {
  background: rgb(var(--md-surface-container-low-rgb) / .9);
  border: 0;
  box-shadow: none;
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
  border-radius: var(--md-shape-xl);
}
:root .glass::before { display: none; }

:root .hero__card {
  background: rgb(var(--md-surface-container-rgb) / .9);
  border-radius: var(--md-shape-xxl);
  padding: clamp(28px, 4vw, 52px);
}

/* the floating top bar becomes an M3 Expressive floating toolbar */
:root .topbar {
  background: rgb(var(--md-surface-container-high-rgb) / .92);
  border-radius: var(--md-shape-full);
}
:root .topnav a {
  --rond: 60;
  border-radius: var(--md-shape-full);
  font-weight: 520;
  transition: background-color .25s, color .25s, font-weight .3s var(--md-spring-snap),
              border-radius var(--md-snap-dur) var(--md-spring-snap);
}
:root .topnav a:hover { background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-weight: 680; }
:root .topnav a.is-active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-weight: 680; }

/* ---------- buttons: pills that morph square-ish when pressed ---------- */
:root .btn, :root .modebtn, :root .end__links a, :root .lens, :root .wire__send, :root .cb__reset {
  --rond: 70;
  border-radius: var(--md-shape-full);
  font-weight: 560;
  transition: border-radius var(--md-snap-dur) var(--md-spring-snap),
              transform var(--md-snap-dur) var(--md-spring-snap),
              background-color .2s, color .2s, font-weight .3s var(--md-spring-snap);
}
:root .btn:active, :root .modebtn:active, :root .end__links a:active,
:root .lens:active, :root .wire__send:active, :root .cb__reset:active {
  border-radius: var(--md-shape-md);
  transform: scale(.97);
}
:root .btn:hover, :root .end__links a:hover, :root .wire__send:hover { font-weight: 700; }

:root .btn--brass {
  background: var(--md-primary); color: var(--md-on-primary);
}
:root .btn--brass:hover { transform: translateY(-2px); }
:root .btn--glass {
  background: var(--md-secondary-container); color: var(--md-on-secondary-container); border: 0;
}
:root .btn--glass:hover { background: var(--md-secondary-container); color: var(--md-on-secondary-container); transform: translateY(-2px); }

:root .modebtn {
  background: var(--md-surface-container-highest); color: var(--md-on-surface); border: 0;
}
:root .modebtn:hover { color: var(--md-on-surface); transform: none; }
:root .modebtn.is-on, :root .colourbtn[aria-expanded="true"] {
  background: var(--md-primary-container); color: var(--md-on-primary-container);
}
:root .revert { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
:root .modebtn__ico { color: inherit; }

:root .end__links a {
  background: var(--md-surface-container-highest); color: var(--md-on-surface); border: 0;
}
:root .end__links a:hover { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

/* ---------- filter chips, selected ones gain a tick and a squarer shape ---------- */
:root .lens {
  background: transparent; color: var(--md-on-surface-variant);
  border: 1px solid var(--md-outline-variant);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
:root .lens:hover { border-color: var(--md-outline); color: var(--md-on-surface); transform: none; }
:root .lens.is-on {
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  border-color: transparent; border-radius: var(--md-shape-md); font-weight: 680;
}
:root .lens.is-on::before { content: "\2713"; margin-right: 6px; font-weight: 800; }

/* ---------- project cards: inset media, concentric corners ---------- */
:root .proj {
  background: var(--md-surface-container-low);
  border-radius: var(--md-shape-xl);
  padding: 8px;
  transition: transform var(--md-spring-dur) var(--md-spring),
              border-radius var(--md-spring-dur) var(--md-spring),
              background-color .3s;
}
:root .proj:hover {
  transform: translateY(-6px);
  border-radius: var(--md-shape-xl-up);
  background: var(--md-surface-container);
  box-shadow: none;
}
:root .proj__art { border-radius: var(--md-shape-lg-up); overflow: hidden; }
:root .proj__meta { padding: 16px 14px 18px; }
:root .proj__meta b { --rond: 80; font-weight: 680; }
:root .chips i, :root .chips li {
  --rond: 60;
  background: var(--md-surface-container-highest); color: var(--md-on-surface-variant);
  border: 0; border-radius: var(--md-shape-sm); font-weight: 560;
}

:root .more { border-bottom: 2px solid var(--md-primary); color: var(--md-on-surface); }
:root .more:hover { color: var(--md-primary); }

/* ---------- about ---------- */
:root .card { background: var(--md-surface-container-low); border-radius: var(--md-shape-xl); }
:root .who__pic {
  /* the M3 Expressive nine-scallop "cookie" */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 100 100%22%3E%3Cpath d%3D%22M99.4 50.0L99.0 52.4L97.9 54.8L96.2 57.0L94.3 59.0L92.5 60.8L91.0 62.6L90.0 64.6L89.5 66.7L89.5 69.0L89.7 71.6L89.9 74.4L89.8 77.1L89.1 79.7L87.9 81.8L86.0 83.4L83.6 84.5L80.9 85.1L78.2 85.4L75.6 85.6L73.3 86.0L71.3 86.8L69.6 88.2L68.0 90.0L66.5 92.1L64.9 94.3L63.0 96.4L60.9 97.9L58.6 98.7L56.1 98.7L53.6 98.0L51.2 96.8L48.9 95.2L46.7 93.7L44.7 92.6L42.6 91.9L40.5 91.8L38.1 92.2L35.6 92.9L32.9 93.5L30.2 93.9L27.6 93.7L25.3 92.8L23.4 91.3L21.9 89.1L20.8 86.6L20.1 83.9L19.4 81.4L18.6 79.2L17.4 77.4L15.8 75.9L13.8 74.7L11.4 73.6L8.9 72.4L6.6 70.9L4.7 69.1L3.5 66.9L3.1 64.5L3.3 61.9L4.2 59.3L5.3 56.7L6.4 54.4L7.2 52.1L7.4 50.0L7.2 47.9L6.4 45.6L5.3 43.3L4.2 40.7L3.3 38.1L3.1 35.5L3.5 33.1L4.7 30.9L6.6 29.1L8.9 27.6L11.4 26.4L13.8 25.3L15.8 24.1L17.4 22.6L18.6 20.8L19.4 18.6L20.1 16.1L20.8 13.4L21.9 10.9L23.4 8.7L25.3 7.2L27.6 6.3L30.2 6.1L32.9 6.5L35.6 7.1L38.1 7.8L40.5 8.2L42.6 8.1L44.7 7.4L46.7 6.3L48.9 4.8L51.2 3.2L53.6 2.0L56.1 1.3L58.6 1.3L60.9 2.1L63.0 3.6L64.9 5.7L66.5 7.9L68.0 10.0L69.6 11.8L71.3 13.2L73.3 14.0L75.6 14.4L78.2 14.6L80.9 14.9L83.6 15.5L86.0 16.6L87.9 18.2L89.1 20.3L89.8 22.9L89.9 25.6L89.7 28.4L89.5 31.0L89.5 33.3L90.0 35.4L91.0 37.4L92.5 39.2L94.3 41.0L96.2 43.0L97.9 45.2L99.0 47.6Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 100 100%22%3E%3Cpath d%3D%22M99.4 50.0L99.0 52.4L97.9 54.8L96.2 57.0L94.3 59.0L92.5 60.8L91.0 62.6L90.0 64.6L89.5 66.7L89.5 69.0L89.7 71.6L89.9 74.4L89.8 77.1L89.1 79.7L87.9 81.8L86.0 83.4L83.6 84.5L80.9 85.1L78.2 85.4L75.6 85.6L73.3 86.0L71.3 86.8L69.6 88.2L68.0 90.0L66.5 92.1L64.9 94.3L63.0 96.4L60.9 97.9L58.6 98.7L56.1 98.7L53.6 98.0L51.2 96.8L48.9 95.2L46.7 93.7L44.7 92.6L42.6 91.9L40.5 91.8L38.1 92.2L35.6 92.9L32.9 93.5L30.2 93.9L27.6 93.7L25.3 92.8L23.4 91.3L21.9 89.1L20.8 86.6L20.1 83.9L19.4 81.4L18.6 79.2L17.4 77.4L15.8 75.9L13.8 74.7L11.4 73.6L8.9 72.4L6.6 70.9L4.7 69.1L3.5 66.9L3.1 64.5L3.3 61.9L4.2 59.3L5.3 56.7L6.4 54.4L7.2 52.1L7.4 50.0L7.2 47.9L6.4 45.6L5.3 43.3L4.2 40.7L3.3 38.1L3.1 35.5L3.5 33.1L4.7 30.9L6.6 29.1L8.9 27.6L11.4 26.4L13.8 25.3L15.8 24.1L17.4 22.6L18.6 20.8L19.4 18.6L20.1 16.1L20.8 13.4L21.9 10.9L23.4 8.7L25.3 7.2L27.6 6.3L30.2 6.1L32.9 6.5L35.6 7.1L38.1 7.8L40.5 8.2L42.6 8.1L44.7 7.4L46.7 6.3L48.9 4.8L51.2 3.2L53.6 2.0L56.1 1.3L58.6 1.3L60.9 2.1L63.0 3.6L64.9 5.7L66.5 7.9L68.0 10.0L69.6 11.8L71.3 13.2L73.3 14.0L75.6 14.4L78.2 14.6L80.9 14.9L83.6 15.5L86.0 16.6L87.9 18.2L89.1 20.3L89.8 22.9L89.9 25.6L89.7 28.4L89.5 31.0L89.5 33.3L90.0 35.4L91.0 37.4L92.5 39.2L94.3 41.0L96.2 43.0L97.9 45.2L99.0 47.6Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  border-radius: 0;
  box-shadow: none;
  width: 72px; height: 72px; flex-basis: 72px;
  background: var(--md-primary-container);
  transition: transform 1.2s var(--md-spring);
}
:root .who:hover .who__pic { transform: rotate(40deg); }
:root .who__pic img { transition: transform 1.2s var(--md-spring); }
:root .who:hover .who__pic img { transform: rotate(-40deg); }
:root .who__pic--empty::after { color: var(--md-on-primary-container); }
.who__pic--empty img { display: none; }

/* ---------- path ---------- */
:root .path__col { background: var(--md-surface-container-low); border-radius: var(--md-shape-xl); }
:root .line__item { border-left-color: var(--md-outline-variant); }
:root .line__item::before { background: var(--md-surface-container-low); border-color: var(--md-outline); }
:root .line__item.is-now::before { background: var(--md-primary); border-color: var(--md-primary); box-shadow: none; }
:root .line__where { color: var(--md-primary); }

/* ---------- contact and the record plate ---------- */
:root .end { background: var(--md-surface-container); border-radius: var(--md-shape-xxl); }
:root .end__mail { border-bottom-color: var(--md-primary); }
:root .record {
  border-radius: var(--md-shape-xl-up);
  color: var(--md-on-primary-container);
  background:
    linear-gradient(118deg,
      color-mix(in srgb, var(--md-on-primary-container) 14%, transparent) 0%,
      transparent 30%,
      color-mix(in srgb, var(--md-primary) 18%, transparent) 62%,
      transparent 100%),
    var(--md-primary-container);
  box-shadow: none;
}
:root .record::after {
  background: repeating-linear-gradient(96deg,
    color-mix(in srgb, var(--md-on-primary-container) 7%, transparent) 0 1px, transparent 1px 7px);
}
:root .record__etch { color: var(--md-on-primary-container); opacity: .16; }
:root .record__kick, :root .record__turn,
:root .record__silence b { color: var(--md-on-primary-container); }
:root .record__lede, :root .record__silence, :root .record__ask { color: var(--md-on-primary-container); opacity: .9; }
:root .record .field__label, :root .record .orbs__delay, :root .record .field__count { color: var(--md-on-primary-container); opacity: .78; }

/* M3 filled text fields */
:root .record .field__in {
  --rond: 30;
  background: var(--md-surface-container-highest);
  color: var(--md-on-surface);
  border: 0;
  border-bottom: 2px solid var(--md-outline);
  border-radius: var(--md-shape-lg) var(--md-shape-lg) var(--md-shape-xs) var(--md-shape-xs);
  transition: border-color .2s, border-radius var(--md-snap-dur) var(--md-spring-snap);
}
:root .record .field__in::placeholder { color: var(--md-on-surface-variant); opacity: .8; }
:root .record .field__in:focus {
  background: var(--md-surface-container-highest);
  border-bottom-color: var(--md-primary);
  border-radius: var(--md-shape-lg);
}
:root .record .orb {
  background: transparent; color: var(--md-on-primary-container);
  border: 1px solid color-mix(in srgb, var(--md-on-primary-container) 40%, transparent);
  border-radius: var(--md-shape-sm);
}
:root .record .orb:hover { border-color: var(--md-on-primary-container); color: var(--md-on-primary-container); }
:root .record .orb.is-on {
  background: var(--md-on-primary-container); color: var(--md-primary-container);
  border-color: transparent; border-radius: var(--md-shape-full);
}
:root .record .wire__send { background: var(--md-primary); color: var(--md-on-primary); }
:root .record .wire__send:hover { background: var(--md-primary); }
:root .record .wire__status { color: var(--md-on-primary-container); }

/* ---------- flight log: an extended FAB and a sheet ---------- */
:root .stampbtn {
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  border-radius: var(--md-shape-lg-up);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
:root .stampbtn__seal, :root .stampbtn__txt b { color: inherit; }
:root .passport { background: var(--md-surface-container-high); border-radius: var(--md-shape-xl); }
:root .stamps li { background: var(--md-surface-container-highest); border-radius: var(--md-shape-md); border: 0; }
:root .stamps li.is-got { background: var(--md-primary-container); border: 0; }
:root .stamps li.is-got b, :root .stamps li.is-got span { color: var(--md-on-primary-container); }
:root .passport__done { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); border: 0; border-radius: var(--md-shape-md); }

/* the toast becomes an M3 snackbar */
:root .toast {
  background: var(--md-inverse-surface); color: var(--md-inverse-on-surface);
  border-radius: var(--md-shape-md);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ---------- the sky stays real: celestial bodies keep their own colours ---------- */
:root .body--sun {
  background: radial-gradient(circle at 42% 38%, #FFF8E9 0%, #F2E1BC 32%, #C4A268 70%, rgba(196,162,104,0) 100%);
}
:root .body--sun::after { background: radial-gradient(circle, rgba(196,162,104,.16) 0%, transparent 60%); }

/* the map picks up the surface tones; the freeway carries the primary */
:root .mp-bld path { fill: var(--md-surface-container-highest); }
:root .mp-case path { stroke: var(--md-surface-container-lowest); }
:root #mpRoads .rf-minor path { stroke: var(--md-outline); }
:root #mpRoads .rf-major path { stroke: var(--md-on-surface-variant); }
:root #mpRoads .rf-hiway path { stroke: var(--md-primary); }

/* =================================================================
   THE COLOUR BAR
   ================================================================= */
.cb {
  position: fixed; left: 50%; top: 84px; z-index: 44;
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 10px 12px 10px 20px;
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  border-radius: var(--md-shape-full);
  box-shadow: 0 10px 34px rgb(0 0 0 / .32);
  opacity: 0;
  transform: translate(-50%, -14px) scale(.96);
  transform-origin: 50% 0;
  pointer-events: none;
  transition: opacity .25s, transform var(--md-spring-dur) var(--md-spring);
}
.cb.is-open { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.cb__title { --rond: 100; margin: 0; font-weight: 700; font-size: 14px; letter-spacing: .01em; color: var(--md-primary); white-space: nowrap; }

.cb__swatches { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb__swatch {
  position: relative;
  width: 32px; height: 32px; padding: 0;
  border: 0; cursor: pointer;
  border-radius: var(--md-shape-full);
  background: var(--sw, var(--md-surface-container-highest));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
  transition: border-radius var(--md-snap-dur) var(--md-spring-snap),
              transform var(--md-snap-dur) var(--md-spring-snap);
}
.cb__swatch:hover { transform: scale(1.08); }
/* selected: the circle morphs to a rounded square, M3 Expressive style */
.cb__swatch.is-on {
  border-radius: var(--md-shape-md);
  box-shadow: 0 0 0 2px var(--md-surface-container-high), 0 0 0 4px var(--md-on-surface);
}
.cb__swatch--any {
  display: grid; place-items: center; overflow: hidden;
  background: conic-gradient(from 90deg, #f44, #fb3, #4c4, #3cf, #66f, #e4e, #f44);
}
.cb__swatch--any.is-on { background: var(--sw); }
.cb__swatch--any span {
  --rond: 100; font-weight: 800; font-size: 18px; line-height: 1;
  color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .5);
}
.cb__swatch--any input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: 0; padding: 0;
}

/* a connected M3 button group */
.cb__styles { display: inline-flex; gap: 2px; }
.cb__style {
  --rond: 70;
  padding: 7px 14px; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 560;
  background: var(--md-surface-container-highest); color: var(--md-on-surface-variant);
  border-radius: var(--md-shape-sm);
  transition: border-radius var(--md-snap-dur) var(--md-spring-snap), background-color .2s, color .2s;
}
.cb__style:first-child { border-radius: var(--md-shape-full) var(--md-shape-sm) var(--md-shape-sm) var(--md-shape-full); }
.cb__style:last-child  { border-radius: var(--md-shape-sm) var(--md-shape-full) var(--md-shape-full) var(--md-shape-sm); }
.cb__style.is-on { background: var(--md-primary); color: var(--md-on-primary); border-radius: var(--md-shape-full); font-weight: 700; }

.cb__reset {
  padding: 7px 14px; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 13px;
  background: transparent; color: var(--md-primary);
}
.cb__reset:hover { background: color-mix(in srgb, var(--md-primary) 12%, transparent); }

@media (max-width: 900px) {
  .cb { flex-wrap: wrap; width: auto; border-radius: var(--md-shape-xl); padding: 14px; gap: 12px; }
  .cb__title { width: 100%; text-align: center; }
}
@media (max-width: 720px) {
  .cb { top: 118px; }
  /* M3 snackbars sit above the FAB, never across it */
  :root .toast { bottom: 84px; max-width: calc(100% - 32px); text-align: center; }
  .cb__title { width: 100%; text-align: center; }
  :root .hero__card { border-radius: var(--md-shape-xl-up); }
  :root .who__pic { width: 60px; height: 60px; flex-basis: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  :root .who:hover .who__pic, :root .who:hover .who__pic img { transform: none; }
  .cb, .cb__swatch, .cb__style { transition: none; }
}


/* =================================================================
   ALIGNMENT PASS
   Built from layout rules, not pixel offsets, so it holds whichever
   font the browser ends up using.
   ================================================================= */

:root { --edge: clamp(20px, 3.2vw, 64px); }

/* Section headers: the last line of the right-hand block shares a baseline
   with the last line of the big heading. Browsers that don't know
   "last baseline" keep the earlier bottom alignment. */
:root .sect__head { align-items: end; align-items: last baseline; }

/* Selected work filter row: a touch tighter, so all seven lenses stay on one
   line even in a wider fallback font. */
:root #work .lenses { gap: 6px; }
:root #work .lenses .lens { padding: 8px 14px; font-size: 14px; }

@media (min-width: 1001px) {

  /* Hero: the card keeps to the left edge of the screen instead of the
     centred column, which leaves the solar system in the clear. */
  :root .hero .wrap {
    max-width: none;
    padding-left: var(--edge);
    padding-right: var(--pad);
  }

  /* The top bar spans the same width, with the same margin, so its left edge
     sits exactly above the hero card's. Both read from --edge, so changing one
     can't pull them apart. */
  :root .topbar { width: calc(100% - 2 * var(--edge)); }

  /* About: the three cards share the height of the text block, so they start
     with the byline and finish with the last line of the paragraph. */
  :root .about { align-items: stretch; }
  :root .about__text p:last-child { margin-bottom: 0; }
  :root .about__side .card {
    flex: 1 1 auto;
    display: flex; flex-direction: column; justify-content: center;
  }
  /* the shared chip row carries "margin-top: auto" for the project cards; here it
     would shove the chips to the bottom and leave a gap under each label */
  :root .about__side .card .chips { margin-top: 0; padding-top: 0; }

  /* Selected work: the heading column hugs its text, so the chips get room to
     sit on one row. Together with the trimmed spacing, that makes the right-hand
     block as tall as the heading, so its top lines up as well as its bottom. */
  :root #work .sect__head { grid-template-columns: auto minmax(0, 1fr); }
  :root #work .lenses { margin-top: 14px; }
  :root #work .lens__note { margin-top: 10px; }
}

/* On a wide bar the nav links sit in the true centre. With flex and
   space-between they drifted ~120px left, because the logo group is narrower
   than the tools group. A three-column grid fixes that; below 1280px there
   isn't room to centre them without crowding the tools, so those widths keep
   the original spacing. */
@media (min-width: 1280px) {
  :root .topbar { display: grid; grid-template-columns: 1fr auto 1fr; }
  :root .topbar .tools { justify-self: end; }
}


/* =================================================================
   HERO WITHOUT A BOX
   The text sits straight on the sky. The card element stays (the page
   fades it up and dims it when idle) but has no surface of its own.
   `.hero__card.glass` outranks every earlier .glass / .hero__card rule,
   in dark, light and every picked colour, so nothing needs !important.
   ================================================================= */
:root .hero__card.glass {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  max-width: 620px;
  padding: 0 0 0 12px;           /* lines the text up under the logo in the top bar */
  pointer-events: none;          /* an invisible box must not block the planets behind it */
}

/* Only the text itself and the buttons take the pointer, so the text can still be
   selected and the buttons clicked, while planets show their labels right up to
   the letters. */
:root .hero__card .kicker, :root .hero__card .hero__h1,
:root .hero__card .hero__sub, :root .hero__card .hero__hint {
  pointer-events: auto;
  width: fit-content;
}
:root .hero__card .hero__btns .btn { pointer-events: auto; }

/* A halo in the page's own background colour keeps letters crisp where a star,
   a ring or a passing planet sits behind them. It is invisible on clear sky and
   follows every theme because it reads the surface token. */
:root .hero__card .kicker, :root .hero__card .hero__h1,
:root .hero__card .hero__sub, :root .hero__card .hero__hint {
  text-shadow: 0 0 16px rgb(var(--void-rgb) / .78), 0 1px 3px rgb(var(--void-rgb) / .55);
}

/* the same left edge as the logo, at every size */
@media (max-width: 1000px) { :root .hero__card.glass { padding-left: 0; margin-left: -2px; } }
@media (max-width: 720px)  { :root .hero__card.glass { padding-left: 4px; margin-left: 0; } }

/* Daylight: dark specks of dust can sit behind the paragraph, so it takes a
   little more ink than it did inside the box. */
:root[data-mode="light"] .hero__card .hero__sub { color: rgb(var(--bone-rgb) / .88); }