/* Davis Studios
   -------------
   Direction: orbital instrumentation. Not sci-fi-movie space — the visual
   language of real mission telemetry and observatory plates. HUD brackets,
   monospace readouts, wireframe geometry, a star field. Grounding it in
   something that actually exists is what keeps it from being generic neon.

   Palette is a deep blue-black void with instrument amber as the primary
   accent and ice blue for data. Amber is deliberate on two counts: it's what
   real telemetry readouts use, and it carries forward the brass accent this
   site had before the redesign. It is also a way out of the purple-to-blue
   gradient that every dark "tech" page defaults to.

   Type: Chakra Petch for display — its cut corners read as HUD without
   tipping into Orbitron pastiche — IBM Plex Sans for reading, IBM Plex Mono
   for anything meant to look like an instrument reading.

   The brand appears in three places per page: <title>, masthead, footer.

   Single-theme by choice. This design commits to the dark; there is no light
   variant, so every colour is declared explicitly and nothing relies on a
   host background showing through. */

:root {
  --void: #05070D;
  --void-rgb: 5, 7, 13;
  --deep: #090D16;
  --panel: #0E1420;
  --panel-2: #131B2A;
  --line: #1E293D;
  --line-hot: #2C3E5E;

  --text: #E9EEF7;
  --muted: #8593AA;
  --dim: #5A6579;

  /* Accent tokens are world-neutral by name. Each page sets its own values
     in the [data-world] blocks at the foot of this file. The -rgb channels
     exist so translucent uses can be themed too — a hardcoded rgba() would
     stay amber on every world. */
  --accent: #FFA62B;
  --accent-rgb: 255, 166, 43;
  --accent-lift: var(--accent-lift);
  --accent-pale: var(--accent-pale);
  --cool: #6EC5FF;
  --cool-rgb: 110, 197, 255;
  --cool-pale: var(--cool-pale);
  --accent-soft: rgba(var(--accent-rgb), .14);
  --cool-soft: rgba(var(--cool-rgb), .12);

  --display: "Chakra Petch", "Arial Narrow", system-ui, sans-serif;
  --body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 64ch;
  --maxw: 1160px;
  --gutter: clamp(20px, 5vw, 56px);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

/* A vignette and two coloured pools sitting under everything. This is what
   carries the hero if WebGL never initialises, so it has to look composed on
   its own rather than like a fallback. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(1100px 620px at 72% 8%, rgba(var(--accent-rgb), .09), transparent 62%),
    radial-gradient(900px 700px at 12% 32%, rgba(var(--cool-rgb), .07), transparent 60%),
    radial-gradient(1200px 900px at 50% 118%, rgba(var(--cool-rgb), .05), transparent 70%),
    var(--void);
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.07;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }

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

/* ---- scene + texture -------------------------------------------------- */
#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.3s ease;
}
/* Opacity is driven from JS, not a keyframe animation, for two reasons: a
   failed init leaves the canvas at 0 rather than fading a blank rectangle
   up, and the scroll fade below the hero needs to write to the same
   property (a filling animation would outrank an inline style). */

/* Fine grain over the whole page. Flat dark backgrounds band badly on cheap
   panels; a little noise hides it. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---- HUD frame -------------------------------------------------------- */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 6; }
.hud-c {
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--line-hot);
}
.hud-c.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.hud-c.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.hud-c.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.hud-c.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
@media (max-width: 640px) { .hud { display: none; } }

/* ---- shell ------------------------------------------------------------ */
.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #0A0A0A;
  padding: 10px 16px; border-radius: 3px; z-index: 20;
  font-weight: 600;
}
.skip:focus { left: var(--gutter); top: 12px; }

/* ---- masthead --------------------------------------------------------- */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-block: 26px 0;
}
.wordmark {
  font-family: var(--display);
  font-weight: 700; font-size: 18px;
  letter-spacing: .01em;
  text-decoration: none;
  display: flex; align-items: center; gap: 11px;
}
/* Three stacked bars — a signal-strength reading, not a logo pretending to
   be a rocket. */
.mark { display: flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
.mark i { width: 3px; background: var(--accent); display: block; }
.mark i:nth-child(1) { height: 6px; opacity: .5; }
.mark i:nth-child(2) { height: 10px; opacity: .75; }
.mark i:nth-child(3) { height: 14px; }

nav.top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
nav.top a {
  color: var(--muted); text-decoration: none;
  font-family: var(--mono); font-size: 13px;
  padding: 7px 12px; border-radius: 3px;
  transition: color .18s ease, background .18s ease;
}
nav.top a:hover { color: var(--text); background: rgba(255,255,255,.045); }
nav.top a.nav-cta {
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .35);
  background: var(--accent-soft);
}
nav.top a.nav-cta:hover { background: rgba(var(--accent-rgb), .2); color: var(--accent-pale); }

/* ---- shared type ------------------------------------------------------ */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow i {
  font-style: normal; color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .3);
  padding: 2px 7px; border-radius: 2px;
  background: var(--accent-soft);
}
.lede { font-size: clamp(17px, 2vw, 20px); color: var(--muted); max-width: var(--measure); }
.prose { max-width: var(--measure); color: var(--muted); display: flex; flex-direction: column; gap: 14px; }

section { padding-block: clamp(64px, 9vw, 120px); }
.section-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(27px, 4.2vw, 40px); }

/* ---- hero ------------------------------------------------------------- */
.hero {
  padding-block: clamp(56px, 11vw, 130px) clamp(40px, 6vw, 70px);
  position: relative;
}
/* A scrim under the copy. The scene is busiest exactly where the headline
   sits, and wireframe behind body text is unreadable at any contrast ratio.
   Falls off to the right so the globe still reads as unobstructed. */
.hero::before {
  content: "";
  position: absolute;
  inset: -4% -12% -6% -40%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(76% 68% at 22% 46%, rgba(var(--void-rgb), .93) 0%, rgba(var(--void-rgb), .76) 42%, transparent 76%);
}
.hero > * { position: relative; }

/* Below the two-column threshold the copy runs full width and the scene
   sits centred behind it, so the off-centre radial no longer covers the
   text. Swap to an even wash. */
@media (max-width: 859px) {
  .hero::before {
    inset: -6% -14%;
    background: linear-gradient(180deg, rgba(var(--void-rgb), .72), rgba(var(--void-rgb), .88) 30%, rgba(var(--void-rgb), .88) 82%, transparent);
  }
}
.hero-status {
  display: inline-flex; align-items: center; gap: 11px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12.5px; color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(14, 20, 32, .6);
  backdrop-filter: blur(8px);
  padding: 7px 14px; border-radius: 999px;
}
.hero-status .sep { color: var(--dim); }
.pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #3DDC97; flex: none;
  box-shadow: 0 0 0 0 rgba(61, 220, 151, .6);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 9px rgba(61, 220, 151, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
}

.hero h1 {
  font-size: clamp(40px, 8vw, 88px);
  margin-block: 24px 22px;
  display: flex; flex-direction: column;
}
.hero h1 .line { display: block; }
.hero h1 .accent {
  color: transparent;
  background: linear-gradient(96deg, var(--accent) 6%, var(--accent-pale) 52%, var(--cool-pale) 128%);
  -webkit-background-clip: text; background-clip: text;
}
.hero .lede { font-size: clamp(17px, 2.2vw, 21px); }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 600; font-size: 15px;
  letter-spacing: .01em;
  padding: 13px 22px; border-radius: 3px;
  text-decoration: none;
  background: var(--accent); color: #0A0A0A;
  border: 1px solid var(--accent);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(var(--accent-rgb), .6); background: var(--accent-lift); }
.btn.ghost {
  background: transparent; color: var(--text);
  border-color: var(--line-hot);
}
.btn.ghost:hover { background: rgba(255,255,255,.05); border-color: var(--muted); box-shadow: none; }

.readout {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; margin: 52px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden;
}
.readout > div { background: rgba(9, 13, 22, .72); padding: 16px 18px; backdrop-filter: blur(6px); }
.readout dt {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 6px;
}
.readout dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 17px; }
.readout dd.hot { color: var(--accent); }

/* ---- ticker ----------------------------------------------------------- */
.ticker {
  border-block: 1px solid var(--line);
  background: rgba(9, 13, 22, .6);
  overflow: hidden;
  margin-inline: calc(var(--gutter) * -1);
  padding-block: 12px;
}
.ticker-track {
  display: flex; gap: 22px; align-items: center;
  width: max-content;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim);
  animation: slide 46s linear infinite;
}
.ticker-track i { color: var(--accent); font-style: normal; font-size: 8px; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---- capability panels ------------------------------------------------ */
.caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.panel {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(168deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 26px 24px 24px;
  overflow: hidden;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease;
  transform-style: preserve-3d;
}
.panel:hover { border-color: var(--line-hot); }
/* A specular pool that follows the pointer. Only visible on hover, so it
   reads as light catching a surface rather than a permanent gradient. */
.panel-glow {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), .13), transparent 62%);
}
.panel:hover .panel-glow { opacity: 1; }
/* Hairline along the top edge, brightest in the middle — a lit bezel. */
.panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .55), transparent);
}
.panel-idx {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  color: var(--accent); display: block; margin-bottom: 16px;
}
.panel h3 { font-size: 20px; margin-bottom: 11px; }
.panel p { font-size: 15.5px; color: var(--muted); }
/* Pushed to the foot of the card so the tag row lands in the same place on
   every panel, however many lines the copy above it runs to. */
.tags { display: flex; gap: 7px; flex-wrap: wrap; list-style: none; padding: 0; margin: 20px 0 0; margin-top: auto; padding-top: 20px; }
.tags li {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--muted);
  border: 1px solid var(--line); border-radius: 2px;
  padding: 4px 9px;
  background: rgba(255,255,255,.02);
}

/* ---- work ------------------------------------------------------------- */
.work { display: flex; flex-direction: column; gap: clamp(64px, 9vw, 108px); }
.project { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) {
  .project { grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
  .project.flip .project-media { order: 2; }
}
.project-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.project-head .idx {
  font-family: var(--display); font-weight: 700; font-size: 34px;
  color: transparent; -webkit-text-stroke: 1px var(--line-hot);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cool);
  border: 1px solid rgba(var(--cool-rgb), .3); background: var(--cool-soft);
  padding: 4px 10px; border-radius: 2px;
}
.chip.amber { color: var(--accent); border-color: rgba(var(--accent-rgb), .3); background: var(--accent-soft); }
.project h3 { font-size: clamp(26px, 3.6vw, 36px); }
.project-kind { font-family: var(--mono); font-size: 13px; color: var(--accent); margin-top: 8px; }
.project-link { margin-top: 18px; font-family: var(--mono); font-size: 13px; }
.project-link a { color: var(--accent); text-underline-offset: 4px; }
.project .prose { margin-top: 18px; }

.facts { margin-top: 26px; border-top: 1px solid var(--line); }
.fact {
  display: grid; grid-template-columns: 124px 1fr; gap: 16px;
  padding-block: 12px; border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.fact dt { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.fact dd { margin: 0; color: var(--text); }
.facts.stand { margin-top: 0; }

.project-media { display: flex; flex-direction: column; gap: 14px; }
.shot {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden;
  background: var(--panel);
  margin: 0;
}
.shot.dark { background: #080C14; }
.shot.portrait { max-width: 300px; }

/* The photographs are warm and soft; the page is cold and dark. A slight
   cool grade and a scanline sheet integrate them without draining the colour
   out of someone's work — hover restores them fully. */
.shot img { width: 100%; height: auto; filter: saturate(.92) contrast(1.04); transition: filter .4s ease; }
.shot:hover img { filter: none; }
.scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(var(--cool-rgb), .05) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen; opacity: .55;
}

/* Perspective frames — the "3D" in the project media. */
.tilt {
  transform: perspective(1400px) rotateY(-5deg) rotateX(2deg);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease;
  box-shadow: -18px 22px 50px -26px rgba(0,0,0,.9);
}
.project.flip .tilt { transform: perspective(1400px) rotateY(5deg) rotateX(2deg); box-shadow: 18px 22px 50px -26px rgba(0,0,0,.9); }
.project-media:hover .tilt { transform: perspective(1400px) rotateY(0) rotateX(0); }

.shot.crop img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 32%; }
.shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.shot-pair img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center 28%; }
.icon-plate { padding: 30px; display: flex; justify-content: center; }
.icon-plate img { width: 132px; height: 132px; border-radius: 24%; }
figcaption { font-family: var(--mono); font-size: 12px; color: var(--dim); }

/* ---- about ------------------------------------------------------------ */
.about { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 900px) { .about { grid-template-columns: 1.12fr 1fr; gap: 64px; } }
.about .big {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(19px, 2.4vw, 24px); line-height: 1.38;
  color: var(--text); margin-bottom: 20px; max-width: 30ch;
}

/* ---- contact ---------------------------------------------------------- */
.contact-card {
  position: relative; overflow: hidden;
  background: linear-gradient(158deg, var(--panel-2), #080C14);
  border: 1px solid var(--line-hot);
  border-radius: 6px;
  padding: clamp(32px, 5.5vw, 62px);
  display: flex; flex-direction: column; gap: 20px;
}
/* A faint survey grid, fading out downward. */
.contact-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(var(--cool-rgb), .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cool-rgb), .07) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, #000, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%);
}
.contact-card > * { position: relative; }
.contact-card h2 { font-size: clamp(28px, 4.6vw, 46px); }
.contact-lines { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; border-top: 1px solid var(--line); }
.contact-line {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-block: 14px; border-bottom: 1px solid var(--line);
}
.contact-line .label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
  width: 78px; flex: none;
}
.contact-line a, .contact-line .val { font-size: 17px; text-decoration: none; }
.contact-line a { color: var(--accent); border-bottom: 1px solid rgba(var(--accent-rgb), .3); padding-bottom: 1px; }
.contact-line a:hover { border-color: var(--accent); }

/* ---- footer ----------------------------------------------------------- */
footer {
  padding-block: 34px 52px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12.5px; color: var(--dim);
}
footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--accent); }

/* ---- reveals ---------------------------------------------------------- */
/* Opt-in: the class is added by JS. With JS off, reduced motion on, or in a
   thumbnail of the first frame, every section is simply visible. */
.reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- legal pages ------------------------------------------------------ */
.legal { padding-block: 44px 80px; max-width: 70ch; }
.legal h1 { font-size: clamp(30px, 5vw, 44px); margin-bottom: 12px; }
.legal h2 { font-size: 21px; margin-top: 40px; margin-bottom: 12px; }
.legal h3 { font-size: 17px; margin-top: 26px; margin-bottom: 6px; color: var(--text); }
.legal p, .legal li { color: var(--muted); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 20px; margin: 12px 0; }
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--accent); }
.legal .updated { font-family: var(--mono); font-size: 13px; color: var(--dim); margin-bottom: 32px; }
.legal a { color: var(--accent); }
.legal strong { color: var(--text); }

/* ---- reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ticker-track { animation: none; }
  .tilt { transform: none; }
  .pulse { animation: none; }
}


/* ======================================================================
   WORLDS
   ----------------------------------------------------------------------
   One block per page. Each sets a ground, an accent pair and its own
   background pools; scene.js reads the same `data-world` attribute and
   builds the matching landscape. Adding a page means adding a block here
   and an entry in the WORLDS table in scene.js — nothing else changes.

   Grounds are all dark, but deliberately different darks: blue-black,
   brown-black, ink and plum. Four palettes rather than four tints of one.
   ====================================================================== */

/* ORBIT — home. Deep space: cold ground, instrument amber, ice blue. */
:root[data-world="orbit"] {
  --void-rgb: 5, 7, 13;
  --void: #05070D; --deep: #090D16; --panel: #0E1420; --panel-2: #131B2A;
  --line: #1E293D; --line-hot: #2C3E5E;
  --accent: #FFA62B; --accent-rgb: 255, 166, 43;
  --accent-lift: #FFB84D; --accent-pale: #FFD9A0;
  --cool: #6EC5FF; --cool-rgb: 110, 197, 255; --cool-pale: #9FD8FF;
}
:root[data-world="orbit"] body::before {
  background:
    radial-gradient(1100px 620px at 72% 8%, rgba(var(--accent-rgb), .09), transparent 62%),
    radial-gradient(900px 700px at 12% 32%, rgba(var(--cool-rgb), .07), transparent 60%),
    radial-gradient(1200px 900px at 50% 118%, rgba(var(--cool-rgb), .05), transparent 70%),
    var(--void);
}

/* TERRAIN — work. Canyon at dusk: warm brown-black, rust, bone. */
:root[data-world="terrain"] {
  --void-rgb: 11, 7, 5;
  --void: #0B0705; --deep: #100A07; --panel: #16100B; --panel-2: #1D1610;
  --line: #2E2219; --line-hot: #463425;
  --accent: #E4703C; --accent-rgb: 228, 112, 60;
  --accent-lift: #F08853; --accent-pale: #F2C39E;
  --cool: #E8D5B7; --cool-rgb: 232, 213, 183; --cool-pale: #F5E9D6;
  --muted: #A3907F; --dim: #6E5F52;
}
:root[data-world="terrain"] body::before {
  background:
    radial-gradient(1200px 560px at 50% 96%, rgba(var(--accent-rgb), .16), transparent 66%),
    radial-gradient(900px 620px at 18% 14%, rgba(var(--cool-rgb), .05), transparent 62%),
    var(--void);
}

/* CURRENT — about. Deep water: ink blue, jade, violet. */
:root[data-world="current"] {
  --void-rgb: 4, 9, 14;
  --void: #04090E; --deep: #071119; --panel: #0A1720; --panel-2: #0F1F2B;
  --line: #17303C; --line-hot: #22475A;
  --accent: #45D6C0; --accent-rgb: 69, 214, 192;
  --accent-lift: #62E5D2; --accent-pale: #A7EFE2;
  --cool: #A98CFF; --cool-rgb: 169, 140, 255; --cool-pale: #C9B6FF;
  --muted: #7F98A6; --dim: #55707E;
}
:root[data-world="current"] body::before {
  background:
    radial-gradient(1000px 700px at 26% 22%, rgba(var(--accent-rgb), .09), transparent 62%),
    radial-gradient(900px 760px at 78% 70%, rgba(var(--cool-rgb), .08), transparent 64%),
    var(--void);
}

/* SIGNAL — contact. Transmission: plum-black, coral, warm white. */
:root[data-world="signal"] {
  --void-rgb: 11, 6, 16;
  --void: #0B0610; --deep: #120A18; --panel: #191021; --panel-2: #21162B;
  --line: #33203F; --line-hot: #4A3159;
  --accent: #FF6B6B; --accent-rgb: 255, 107, 107;
  --accent-lift: #FF8585; --accent-pale: #FFB3A7;
  --cool: #FFD9A0; --cool-rgb: 255, 217, 160; --cool-pale: #FFE9C9;
  --muted: #9B8AA6; --dim: #6B5A78;
}
:root[data-world="signal"] body::before {
  background:
    radial-gradient(1100px 620px at 50% 108%, rgba(var(--accent-rgb), .13), transparent 64%),
    radial-gradient(800px 600px at 80% 10%, rgba(var(--cool-rgb), .07), transparent 60%),
    var(--void);
}

/* ---- page nav state --------------------------------------------------- */
nav.top a[aria-current="page"] {
  color: var(--text);
  background: rgba(255, 255, 255, .06);
}
nav.top a[aria-current="page"]::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  display: inline-block; margin-right: 8px; vertical-align: middle;
}

/* ---- page header (inner pages) ---------------------------------------- */
.page-head { padding-block: clamp(50px, 9vw, 104px) clamp(28px, 4vw, 48px); position: relative; }
.page-head::before {
  content: ""; position: absolute; inset: -8% -14% -10% -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 70% at 26% 50%, rgba(var(--void-rgb), .92) 0%, rgba(var(--void-rgb), .74) 44%, transparent 78%);
}
.page-head > * { position: relative; }
.page-head h1 { font-size: clamp(38px, 7vw, 74px); margin-block: 20px 20px; }
.page-head .lede { font-size: clamp(17px, 2.1vw, 20px); }

/* ---- next-page pager -------------------------------------------------- */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 5px;
  background: linear-gradient(150deg, var(--panel-2), var(--panel));
  padding: 24px 26px; text-decoration: none;
  transition: border-color .25s ease, transform .25s ease;
}
.pager:hover { border-color: var(--line-hot); transform: translateY(-2px); }
.pager .pager-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.pager .pager-title { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 3vw, 27px); margin-top: 5px; }
.pager .pager-go {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .35);
  background: var(--accent-soft); padding: 9px 15px; border-radius: 3px; flex: none;
}

/* ---- home teasers ----------------------------------------------------- */
.teasers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.teaser {
  position: relative; overflow: hidden; text-decoration: none;
  border: 1px solid var(--line); border-radius: 5px;
  background: linear-gradient(168deg, var(--panel-2), var(--panel));
  padding: 24px; display: flex; flex-direction: column; gap: 9px; min-height: 176px;
  transition: border-color .25s ease, transform .25s ease;
}
.teaser:hover { border-color: var(--line-hot); transform: translateY(-3px); }
.teaser::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .5), transparent);
}
.teaser .t-world { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.teaser h3 { font-size: 21px; }
.teaser p { font-size: 14.5px; color: var(--muted); }
.teaser .t-go { margin-top: auto; padding-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.teaser:hover .t-go { color: var(--accent); }

/* Each teaser previews the palette of the page it leads to, so the nav
   reads as four places rather than four links. */
.teaser[data-to="terrain"] { --accent: #E4703C; --accent-rgb: 228, 112, 60; }
.teaser[data-to="current"] { --accent: #45D6C0; --accent-rgb: 69, 214, 192; }
.teaser[data-to="signal"]  { --accent: #FF6B6B; --accent-rgb: 255, 107, 107; }

/* ---- contact form ----------------------------------------------------- */
.lead-form { display: grid; gap: 16px; max-width: 720px; padding: clamp(22px, 4vw, 40px); background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; }
.lead-form h2 { margin: 0 0 6px; }
.lead-form label { display: grid; gap: 6px; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--muted); }
.lead-form .opt { color: var(--dim); }
.lead-form input, .lead-form textarea { font: 400 17px/1.5 var(--body); color: var(--text); background: var(--deep);
  border: 1px solid var(--line-hot); border-radius: 10px; padding: 12px 14px; min-height: 48px; }
.lead-form input:focus, .lead-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .lf-row { grid-template-columns: 1fr; } }
.lf-send { justify-self: start; font: 600 16px var(--display); letter-spacing: .04em; text-transform: uppercase; color: #0A0D14;
  background: var(--accent); border: 0; border-radius: 10px; padding: 14px 26px; min-height: 48px; cursor: pointer;
  box-shadow: 0 8px 28px var(--accent-soft); }
.lf-send:disabled { opacity: .6; cursor: progress; }
.lead-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lf-status { margin: 0; min-height: 1.4em; color: var(--muted); }
.lf-status[data-state="ok"] { color: var(--accent); }
.lf-status[data-state="error"] { color: #FF7A7A; }