/* ============ TOKENS (translated from david-hckh.com DNA, see kit/) ============ */
/* Palette 1 "Gallery": monochrome + electric blue */
:root {
  --paper: #f7f6f3;
  --paper-2: #edeae3;
  --paper-3: #d8d4c9;
  --ink: #181715;
  --ink-soft: #5c574d;
  --accent: #2244e0;
  --accent-bright: #3b5bff;
  --accent-text: #2244e0;
  --panel: #181715;
  --panel-deep: #0e0d0c;
  --panel-text: #f2f0eb;
  --panel-dim: #a29c90;
  --on-accent: #fdfcfa;

  --font-sans: "Urbanist", system-ui, sans-serif;
  --font-pixel: "Silkscreen", monospace;
  --font-mono: "JetBrains Mono", monospace;

  --title-hero: clamp(2.75rem, 6.2vw, 5.5rem);
  /* 44 -> 88 */
  --title-section: clamp(2rem, 4.4vw, 3.5rem);
  /* 32 -> 56 */
  --lh-title: 1.1;
  --lh-copy: 1.3;

  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --stroke-md: 2px;
  --stroke-lg: 4px;

  --ease: cubic-bezier(.6, 0, .25, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --header-h: 72px;
}

/* Palette 3 "Night": warm charcoal + coral + dark teal */
:root[data-theme="night"] {
  --paper: #161411;
  --paper-2: #221f1a;
  --paper-3: #3a352c;
  --ink: #f0eadf;
  --ink-soft: #a79e8d;
  --accent: #c8432c;
  --accent-bright: #ff6b4a;
  --accent-text: #ff8a68;
  --panel: #24423d;
  --panel-deep: #1a2f2b;
  --panel-text: #e9f1ec;
  --panel-dim: #8fb2a6;
}

/* Palette 2 "Lapis" (blue + gold): rich navy + parchment + brushed gold */
:root[data-theme="lapis"] {
  --paper: #0f1c30;
  --paper-2: #182842;
  --paper-3: #2c3f5e;
  --ink: #ecead9;
  --ink-soft: #a3a08b;
  --accent: #a16207;
  --accent-bright: #d4a017;
  --accent-text: #e6b93f;
  --panel: #24405f;
  --panel-deep: #16293f;
  --panel-text: #eaf0f8;
  --panel-dim: #93a8c4;
}


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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-copy);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}

h1,
h2,
h3 {
  line-height: var(--lh-title);
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
}

:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 3px;
}

.title {
  font-weight: 900;
  letter-spacing: .02em;
}

.wrap {
  width: min(1400px, 100%);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
}

/* ============ PRELOADER ============ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .4s var(--ease);
}

.preloader.done {
  opacity: 0;
  pointer-events: none;
}

.preloader svg {
  width: 96px;
  height: 96px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

.preloader.done svg {
  transform: scale(.5);
  opacity: 0;
}

.preloader-rect {
  transform-origin: bottom center;
  transform: scaleY(0);
  transition: transform .7s var(--ease);
}

.preloader.filling .preloader-rect {
  transform: scaleY(1);
}

/* ============ SKIP LINK ============ */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 110;
  transform: translateY(-150%);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-pixel);
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  transition: transform .2s var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(16px, 4vw, 48px);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
  border-bottom: var(--stroke-md) solid transparent;
}

.nav.scrolled {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-color: var(--paper-3);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.nav-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--panel);
  color: var(--panel-text);
  font-family: var(--font-pixel);
  font-size: 13px;
  display: grid;
  place-items: center;
  transform: rotate(-6deg);
  transition: transform .3s var(--ease-spring);
}

.nav-brand:hover .nav-mark {
  transform: rotate(6deg);
}

.nav-name {
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 17px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a:not(.btn) {
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-soft);
  transition: color .15s ease-in-out;
}

.nav-links a:not(.btn):hover {
  color: var(--ink);
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  border-radius: 100px;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .12s ease-in-out, color .12s ease-in-out, transform .12s var(--ease-spring);
}

.btn:active {
  transform: scale(.97);
}

.btn-accent {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-accent:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 var(--stroke-md) var(--ink);
}

.btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 13px;
}

/* ============ RIBBON STICKERS ============ */
.ribbon {
  display: inline-block;
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: clamp(12px, 1.3vw, 17px);
  text-transform: uppercase;
  color: var(--panel-text);
  background: var(--panel);
  outline: var(--stroke-lg) solid var(--paper);
  padding: 6px 12px;
  line-height: 1.2;
}

.ribbon-accent {
  background: var(--accent);
  color: var(--on-accent);
}

/* ============ HERO ============ */
.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding-top: var(--header-h);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
}

.hero-title-block {
  position: relative;
}

.hero-title {
  font-size: var(--title-hero);
}

.hero-title em {
  font-style: normal;
  color: var(--accent-text);
}

.hero-sticker {
  position: absolute;
  top: -18px;
  right: 4%;
  transform: rotate(-5deg);
  animation: sticker-in .6s var(--ease-spring) both;
  animation-delay: .9s;
}

@keyframes sticker-in {
  from {
    transform: rotate(-5deg) scale(0);
  }

  to {
    transform: rotate(-5deg) scale(1);
  }
}

.hero-sub {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-soft);
  max-width: 44ch;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ============ THE BENCH ============ */
.bench {
  perspective: 1200px;
}

.bench-stage {
  background: var(--paper-2);
  border: var(--stroke-md) solid var(--ink);
  border-radius: var(--radius-xl);
  padding: clamp(18px, 2vw, 28px);
  transform-style: preserve-3d;
  will-change: transform;
}

.bench-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.bench-dots {
  display: flex;
  gap: 6px;
}

.bench-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: var(--stroke-md) solid var(--ink);
}

.demo-card {
  background: var(--paper);
  border: var(--stroke-md) solid var(--ink);
  border-radius: var(--demo-radius, 16px);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-radius var(--demo-dur, .5s) var(--demo-ease, var(--ease-spring));
}

.demo-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.demo-avatar {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: calc(var(--demo-radius, 16px) * .75);
  background: var(--demo-accent, var(--accent));
  /* Set per swatch in main.js (readableOn); falls back to the theme default. */
  color: var(--demo-on-accent, var(--on-accent));
  font-weight: 900;
  font-size: 17px;
  letter-spacing: .02em;
  display: grid;
  place-items: center;
  transition: background-color var(--demo-dur, .5s) var(--demo-ease, var(--ease-spring)),
    border-radius var(--demo-dur, .5s) var(--demo-ease, var(--ease-spring));
}

.demo-title {
  font-weight: 800;
  font-size: 17px;
}

.demo-meta {
  font-size: 14px;
  color: var(--ink-soft);
}

.demo-divider {
  height: var(--stroke-md);
  background: var(--paper-3);
  border: none;
  margin: 0;
}

.demo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.demo-row-label {
  font-weight: 700;
  font-size: 15px;
}

.switch {
  position: relative;
  width: 52px;
  height: 30px;
  flex: none;
  border-radius: 100px;
  border: var(--stroke-md) solid var(--ink);
  background: var(--paper-2);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--demo-dur, .5s) var(--demo-ease, var(--ease-spring));
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform var(--demo-dur, .5s) var(--demo-ease, var(--ease-spring)),
    background-color var(--demo-dur, .5s) var(--demo-ease, var(--ease-spring));
}

.switch[aria-checked="true"] {
  background: var(--demo-accent, var(--accent));
}

.switch[aria-checked="true"]::after {
  transform: translateX(22px);
  background: var(--on-accent);
}

.demo-btn {
  border: none;
  cursor: pointer;
  border-radius: calc(var(--demo-radius, 16px) * .8);
  background: var(--demo-accent, var(--accent));
  /* Set per swatch in main.js (readableOn); falls back to the theme default. */
  color: var(--demo-on-accent, var(--on-accent));
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 14px;
  transition: background-color var(--demo-dur, .5s) var(--demo-ease, var(--ease-spring)),
    border-radius var(--demo-dur, .5s) var(--demo-ease, var(--ease-spring)),
    transform .15s var(--ease-spring);
}

.demo-btn:active {
  transform: scale(.96);
}

.demo-btn.booked {
  background: var(--panel);
  color: var(--panel-text);
}

.demo-card>* {
  opacity: 0;
  transform: translateY(18px) scale(.96);
}

body.loaded .demo-card>* {
  animation: assemble .55s var(--ease-spring) forwards;
}

body.loaded .demo-card>*:nth-child(1) {
  animation-delay: .25s;
}

body.loaded .demo-card>*:nth-child(2) {
  animation-delay: .37s;
}

body.loaded .demo-card>*:nth-child(3) {
  animation-delay: .49s;
}

body.loaded .demo-card>*:nth-child(4) {
  animation-delay: .61s;
}

@keyframes assemble {
  to {
    opacity: 1;
    transform: none;
  }
}

.bench-controls {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}

.ctrl {
  background: var(--paper);
  border: var(--stroke-md) solid var(--paper-3);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ctrl-label {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.ctrl input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}

.swatches {
  display: flex;
  gap: 8px;
}

.swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  border: var(--stroke-md) solid var(--ink);
  transition: transform .2s var(--ease-spring);
}

.swatch:hover {
  transform: scale(1.15);
}

.swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
}

.bench-readout {
  margin-top: 14px;
  font-family: var(--font-pixel);
  font-size: 11px;
  color: var(--accent-text);
  overflow-x: auto;
  white-space: nowrap;
}

/* ============ SECTIONS ============ */
section {
  padding-block: clamp(96px, 12vh, 160px);
}

.section-title-block {
  position: relative;
  width: fit-content;
  margin-bottom: clamp(36px, 5vh, 64px);
}

.section-title {
  font-size: var(--title-section);
}

.section-sticker {
  position: absolute;
  top: -27px;
  left: -14px;
  transform: rotate(-4deg);
}

/* ---- Work ---- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.work-card {
  background: var(--paper-2);
  border: var(--stroke-md) solid var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--ease);
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

.work-card:hover {
  transform: translateY(-6px) rotate(-.5deg) translateZ(0);
}

.work-card-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: var(--stroke-md) solid var(--ink);
}

.work-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.work-card:hover .work-card-img img {
  transform: scale(1.04);
}

.work-card-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.work-tag {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--accent-text);
  text-transform: uppercase;
}

.work-card h3 {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .02em;
}

.work-card p {
  color: var(--ink-soft);
  font-size: 15px;
  flex: 1;
}

.tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tech-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  border: var(--stroke-md) solid color-mix(in srgb, var(--accent) 35%, var(--paper-2));
  border-radius: 999px;
  padding: 3px 10px;
}

.work-link {
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration: none;
  width: fit-content;
  border-bottom: var(--stroke-md) solid var(--accent);
  padding-bottom: 2px;
  transition: color .15s ease-in-out;
}

.work-link:hover {
  color: var(--accent-text);
}

.work-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.work-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.work-links .work-link {
  font-size: 12px;
}

/* ---- Craft: live principles ---- */
.craft-rows {
  display: flex;
  flex-direction: column;
}

.craft-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  padding-block: clamp(24px, 3.5vh, 36px);
  border-top: var(--stroke-md) solid var(--paper-3);
}

.craft-row h3 {
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 900;
  letter-spacing: .02em;
  transition: color .2s ease-in-out;
}

.craft-row:hover h3 {
  color: var(--accent-text);
}

.craft-row p {
  color: var(--ink-soft);
  font-size: 15px;
  margin-top: 8px;
  max-width: 52ch;
}

.craft-demo {
  width: 180px;
  height: 84px;
  flex: none;
  background: var(--paper-2);
  border: var(--stroke-md) solid var(--ink);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
}

/* demo 1: spring dots */
.sp-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
}

.craft-row:hover .sp-dot,
.no-hover .sp-dot {
  animation: sp-bounce .8s var(--ease-spring) infinite alternate;
}

.sp-dot:nth-child(2) {
  animation-delay: .12s;
}

.sp-dot:nth-child(3) {
  animation-delay: .24s;
}

@keyframes sp-bounce {
  from {
    transform: translateY(9px);
  }

  to {
    transform: translateY(-9px);
  }
}

/* demo 2: states cycle */
.demo-states {
  flex-direction: column;
  gap: 10px;
}

.st-bar {
  height: 10px;
  border-radius: 5px;
  background: var(--paper-3);
}

.st-bar:nth-child(1) {
  width: 96px;
}

.st-bar:nth-child(2) {
  width: 64px;
}

.craft-row:hover .st-bar,
.no-hover .st-bar {
  animation: st-cycle 2s ease-in-out infinite;
}

.st-bar:nth-child(2) {
  animation-delay: .15s;
}

@keyframes st-cycle {

  0%,
  100% {
    background: var(--paper-3);
  }

  45%,
  70% {
    background: var(--ink);
  }
}

/* demo 3: agent orbits, judgment holds the center */
.ai-orbit {
  display: block;
  width: 48px;
  height: 48px;
  border: var(--stroke-md) solid var(--ink);
  border-radius: 50%;
  position: relative;
}

.ai-core {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: var(--ink);
}

.ai-sat {
  position: absolute;
  inset: 0;
}

.ai-sat::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  margin-left: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
}

.craft-row:hover .ai-sat,
.no-hover .ai-sat {
  animation: ai-orbit 1.8s linear infinite;
}

@keyframes ai-orbit {
  to {
    transform: rotate(360deg);
  }
}

/* demo 4: token chips pop */
.tk-chip {
  width: 36px;
  height: 26px;
  border-radius: 7px;
  border: var(--stroke-md) solid var(--ink);
}

.tk-chip:nth-child(1) {
  background: var(--accent);
}

.tk-chip:nth-child(2) {
  background: var(--panel);
}

.tk-chip:nth-child(3) {
  background: var(--paper-3);
}

.craft-row:hover .tk-chip,
.no-hover .tk-chip {
  animation: tk-pop .7s var(--ease-spring) infinite alternate;
}

.tk-chip:nth-child(2) {
  animation-delay: .1s;
}

.tk-chip:nth-child(3) {
  animation-delay: .2s;
}

@keyframes tk-pop {
  to {
    transform: translateY(-7px) rotate(-5deg);
  }
}

/* The tilted band is deliberately scaled past 100% so it bleeds off both edges,
   but a rotated box is wider than its layout width, which pushed the document
   ~5px wider than the viewport and let the whole page slide sideways on mobile.
   `clip` contains that bleed without creating a scroll container the way
   `hidden` would, so vertical flow and the fixed nav are untouched. */
main {
  overflow-x: clip;
}

/* ---- Marquee band ---- */
.band {
  background: var(--panel);
  transform: rotate(-1.5deg) scale(1.02);
  padding-block: 18px;
  overflow: hidden;
  border-block: var(--stroke-lg) solid var(--paper);
}

.band-track {
  display: flex;
  gap: 56px;
  width: max-content;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--panel-text);
  text-transform: uppercase;
  animation: band-scroll 28s linear infinite;
}

.band-track span {
  white-space: nowrap;
}

@keyframes band-scroll {
  to {
    transform: translateX(-50%);
  }
}

/* ---- About (stage panel, mirrors the hero) ---- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

.about-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-copy h2 {
  font-size: var(--title-section);
}

.about-copy>p {
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 56ch;
}

.about-stage .terminal {
  background: var(--panel-deep);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 2.1;
  color: var(--panel-text);
}

.terminal .dim {
  color: var(--panel-dim);
}

.terminal .cursor {
  display: inline-block;
  width: 9px;
  height: 15px;
  background: var(--accent-bright);
  vertical-align: middle;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.term-line {
  display: block;
  opacity: 0;
  transform: translateY(8px);
}

.terminal-wrap.in .term-line {
  animation: term-in .45s var(--ease) forwards;
}

.terminal-wrap.in .term-line:nth-child(1) {
  animation-delay: .1s;
}

.terminal-wrap.in .term-line:nth-child(2) {
  animation-delay: .3s;
}

.terminal-wrap.in .term-line:nth-child(3) {
  animation-delay: .5s;
}

.terminal-wrap.in .term-line:nth-child(4) {
  animation-delay: .7s;
}

.terminal-wrap.in .term-line:nth-child(5) {
  animation-delay: .9s;
}

.terminal-wrap.in .term-line:nth-child(6) {
  animation-delay: 1.1s;
}

@keyframes term-in {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Contact / footer ---- */
.contact {
  padding-bottom: 0;
}

.contact-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.contact h2 {
  font-size: var(--title-hero);
  max-width: 14ch;
}

.contact h2 em {
  font-style: italic;
  color: var(--accent-text);
  line-height: 1.1;
}

.contact-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.contact-links a {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: var(--stroke-md) solid var(--paper-3);
  transition: color .15s ease-in-out, border-color .15s ease-in-out;
}

.contact-links a:hover {
  color: var(--ink);
  border-color: var(--accent);
}

/* Decorative footer watermark.

   The wordmark is pure decoration under WCAG 1.4.3: the name is already
   available in the nav brand, the hero intro, and the copyright line, and this
   copy is aria-hidden and unselectable. Keeping the glyphs in CSS rather than
   as a DOM text node states that intent in the markup, and stops contrast
   auditors from grading a texture as if it were body copy. If it ever needs to
   be read rather than felt, move the text back into the HTML and darken it to
   at least 3:1 (#918e87 on the gallery paper). */
.footer-wordmark {
  margin-top: clamp(48px, 8vh, 96px);
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(44px, 9.5vw, 180px);
  line-height: .85;
  color: var(--paper-3);
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}

.footer-wordmark::after {
  content: "RAMONA BELLAMY";
}

.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 20px;
  font-size: 13px;
  color: var(--ink-soft);
  border-top: var(--stroke-md) solid var(--paper-3);
  margin-top: 8px;
}

/* ============ THEME SWITCHER (live, persisted feature) ============ */
/* Sits with the other sandbox controls rather than floating. Floating
   bottom-right, it covered page content at ~41% of scroll positions on a phone
   and sat in the thumb zone; grouped with radius and accent it reads as one
   more knob, and the surrounding .ctrl supplies the frame. */
.palette-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Matches the accent swatches next to it in the sandbox control row. */
.pp-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  border: var(--stroke-md) solid var(--ink);
  color: var(--on-accent);
  font-weight: 800;
  font-size: 13px;
  display: grid;
  place-items: center;
  padding: 0;
  transition: transform .2s var(--ease-spring);
}

.pp-btn:hover {
  transform: scale(1.12);
}

.pp-btn[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
}

/* ============ INTERACTIVITY HINTS (one-time, on load) ============ */
/* A brief, self-stopping nudge so a skimmer notices the bench controls and the
   theme switcher are live. JS gates these off under reduced motion. */
@keyframes ctrl-hint {

  0%,
  100% {
    border-color: var(--paper-3);
  }

  50% {
    border-color: var(--accent);
  }
}

body.loaded .bench-controls.bench-hint .ctrl {
  animation: ctrl-hint 1.6s var(--ease) 1;
}

.bench-controls.bench-hint .ctrl:nth-child(2) {
  animation-delay: .12s;
}

.bench-controls.bench-hint .ctrl:nth-child(3) {
  animation-delay: .24s;
}

/* ============ SCROLL REVEALS ============ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.reveal-d1 {
  transition-delay: .1s;
}

.reveal-d2 {
  transition-delay: .2s;
}

.reveal-d3 {
  transition-delay: .3s;
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .band-track {
    animation: none;
  }

  .hero-sticker {
    animation: none;
  }

  .demo-card>*,
  body.loaded .demo-card>* {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .term-line,
  .terminal-wrap.in .term-line {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .terminal .cursor {
    animation: none;
  }

  .sp-dot,
  .st-bar,
  .ai-sat,
  .tk-chip {
    animation: none !important;
  }

  .bench-stage {
    transform: none !important;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01s !important;
    animation-duration: .01s !important;
  }
}

/* ============ MOBILE ============ */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: calc(var(--header-h) + 24px);
    gap: 40px;
    min-height: auto;
    padding-bottom: 64px;
  }

  .hero-sticker {
    right: auto;
    left: 0;
    top: -34px;
  }

  .craft-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .bench-controls {
    grid-template-columns: 1fr;
  }

  /* Sections are trimmed to 24px of top padding at this width, which no longer
     clears the fixed nav on an anchor jump. Desktop keeps its full padding and
     lands fine on its own, so the offset is scoped here. */
  html {
    scroll-padding-top: calc(var(--header-h) + 16px);
  }

  /* Keep section navigation reachable on mobile; drop the redundant full name
     (it also lives in the footer wordmark) and tighten the link row to fit. */
  .nav-name {
    display: none;
  }

  .nav-links {
    gap: 16px;
  }

  .nav-links a:not(.btn) {
    font-size: 13px;
  }

  /* The About section already ends on ~12vh of its own bottom padding, so the
     contact section's matching top padding stacked into a near-half-screen gap
     above the closing headline. Desktop has the height to carry that pause;
     mobile does not. Trim this side and let About's padding do the separating. */
  .contact {
    padding-top: 24px;
  }

  /* Same doubled-padding problem as the contact section: the Work section's
     bottom padding already separates the two, so this side only needs enough
     to breathe. */
  #craft {
    padding-top: 24px;
  }

  /* "RAMONA BELLAMY" on one line overflows a phone by ~36px and gets clipped
     mid-surname. Break it across two lines instead of letting it run off. */
  .footer-wordmark {
    white-space: pre-line;
    line-height: .9;
  }

  /* The space after \A terminates the escape. Without it the parser reads
     \ABE as a hex code point and the name renders mangled on one line. */
  .footer-wordmark::after {
    content: "RAMONA\A BELLAMY";
  }
}

/* Very small screens: the nav CTA is duplicated in the hero and contact
   section, so shed it here to guarantee the section links always fit. */
@media (max-width: 380px) {
  .nav-links .btn {
    display: none;
  }
}

/* Touch devices: enlarge the bench's real controls to a comfortable hit size. */
@media (pointer: coarse) {
  .swatches {
    gap: 12px;
  }

  .swatch {
    width: 34px;
    height: 34px;
  }

  /* Same size as the accent swatches they now sit beside. */
  .pp-btn {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
}