/* Starship Jennings site styles. Rigger, 2026-09-29.
   Colour, type and size values come from tokens.css (Glyph's generated file, unedited).
   This file adds layout tokens only: spacing, radius, widths and motion. */

/* ---------- Fonts: self-hosted Latin subsets, SIL OFL 1.1 (see /fonts/) ---------- */
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("/fonts/sora-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks, so the swap moves nothing. Values measured with
   fontTools against Arial on a sample of the home page copy. */
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 102.6%;
  ascent-override: 94.6%;
  descent-override: 24.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Sora Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 115.6%;
  ascent-override: 83.9%;
  descent-override: 25.1%;
  line-gap-override: 0%;
}

/* ---------- Layout tokens ---------- */
:root {
  --font-text: "Instrument Sans", "Instrument Sans Fallback", var(--sj-font-text);
  --font-display: "Sora", "Sora Fallback", var(--sj-font-display);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --content: 72rem;
  --measure: 38rem;
  --section-gap: clamp(4.5rem, 3rem + 6vw, 8rem);

  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --focus: 3px solid var(--sj-accent);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--sj-bg);
  color: var(--sj-text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--sj-size-body);
  line-height: var(--sj-body-leading);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--sj-text);
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, var(--sj-size-h2));
  line-height: var(--sj-h2-leading);
  letter-spacing: var(--sj-h2-tracking);
}
h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, var(--sj-size-h3));
  line-height: var(--sj-h3-leading);
  letter-spacing: var(--sj-h3-tracking);
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--sj-accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: 4px; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 10;
  padding: var(--space-3) var(--space-5);
  background: var(--sj-button-bg);
  color: var(--sj-button-text);
  font-weight: 600;
  border-radius: var(--radius-pill);
}
.skip-link:focus { top: var(--space-4); }

/* ---------- Placeholder chrome: what's left marks a gap, and the launch check blocks on it ---------- */
.ph {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8125em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--sj-text);
  background: var(--sj-badge-field);
  outline: 1px dashed var(--sj-accent);
  outline-offset: -1px;
  border-radius: 4px;
  padding: 0.05em 0.4em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- The sky: two tiling star layers, fixed behind everything ----------
   Brightness is capped by site/tools/gen_starfield.py so text over it keeps 7:1.
   Drift uses `translate`, parallax uses `transform`, so the two compose. */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(70rem 40rem at 78% -10%, rgb(3 41 79 / 0.35), transparent 70%),
    radial-gradient(50rem 36rem at -10% 60%, rgb(3 41 79 / 0.22), transparent 70%),
    var(--sj-bg);
}
.sky__layer {
  position: absolute;
  left: 0;
  right: 0;
  top: -1600px;
  bottom: -240px;
  background-repeat: repeat;
  will-change: translate, transform;
}
.sky__layer--far { background-image: url("/img/stars-far.svg"); background-size: 1200px 1200px; }
.sky__layer--near { background-image: url("/img/stars-near.svg"); background-size: 1600px 1600px; }

@media (prefers-reduced-motion: no-preference) {
  .sky__layer--far { animation: drift-far 600s linear infinite; }
  .sky__layer--near { animation: drift-near 360s linear infinite; }
  @supports (animation-timeline: scroll()) {
    .sky__layer--far { animation: drift-far 600s linear infinite, parallax-far linear both; animation-timeline: auto, scroll(root); }
    .sky__layer--near { animation: drift-near 360s linear infinite, parallax-near linear both; animation-timeline: auto, scroll(root); }
  }
}
@keyframes drift-far { from { translate: 0 0; } to { translate: 0 1200px; } }
@keyframes drift-near { from { translate: 0 0; } to { translate: 0 1600px; } }
@keyframes parallax-far { from { transform: translateY(0); } to { transform: translateY(-80px); } }
@keyframes parallax-near { from { transform: translateY(0); } to { transform: translateY(-220px); } }

/* ---------- Header ---------- */
.site-header__inner {
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--space-4) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
}
.site-header__logo { display: block; padding: var(--space-1) 0; border-radius: var(--radius-s); }
.site-header__logo img { height: 32px; width: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-1); list-style: none; margin: 0 calc(-1 * var(--space-3)); padding: 0; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  color: var(--sj-text);
  text-decoration: none;
  font-size: var(--sj-size-small);
  font-weight: 600;
  border-radius: var(--radius-s);
}
.site-nav a:hover { color: var(--sj-accent); text-decoration: underline; }
@media (max-width: 29.99rem) {
  .site-header__inner { justify-content: flex-start; }
  .site-nav { width: 100%; }
  /* 5 links on 1 row at 320 px and up, each still a 44 px tall target. */
  .site-nav ul { justify-content: space-between; margin-inline: calc(-1 * var(--space-2)); }
  .site-nav a { padding: 0 var(--space-2); }
}
@media (min-width: 48rem) {
  .site-header__inner { padding-block: var(--space-5); }
  .site-header__logo img { height: 40px; }
}

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--sj-size-body);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.button--primary { background: var(--sj-button-bg); color: var(--sj-button-text); border: 2px solid var(--sj-button-bg); }
.button--primary:hover { background: var(--sj-text); border-color: var(--sj-text); }
.button--secondary { color: var(--sj-accent); border: 2px solid var(--sj-accent); background: var(--sj-bg); }
.button--secondary:hover { background: var(--sj-surface-raised); }
.arrow-link {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
}
.arrow-link::after {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .arrow-link::after { transition: translate 160ms var(--ease-out); }
  .arrow-link:hover::after { translate: 3px 0; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow-x: clip; }
.hero__inner { position: relative; }
.hero__sky {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("/img/hero-wide.svg") right center / auto 100% no-repeat;
  /* stars only on the portrait side, never behind the text column; checked by site/tools/sky-contrast.mjs */
  -webkit-mask-image: linear-gradient(to right, transparent 58%, #000 76%), linear-gradient(to bottom, #000 70%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 58%, #000 76%), linear-gradient(to bottom, #000 70%, transparent);
  mask-composite: intersect;
}
@media (min-width: 48rem) {
  .hero__sky { display: block; }
  .portrait__sky { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero__sky { animation: hero-parallax linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes hero-parallax { to { transform: translateY(18%); } }
.hero__inner {
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--space-5) var(--gutter) var(--space-8);
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.hero h1 {
  font-size: clamp(1.875rem, 1.2rem + 3vw, var(--sj-size-display));
  line-height: var(--sj-display-leading);
  letter-spacing: var(--sj-display-tracking);
  max-width: 17ch;
}
.availability {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-5);
  max-width: 34rem;
  font-size: var(--sj-size-body);
  line-height: var(--sj-body-leading);
  color: var(--sj-text-secondary);
}
.availability strong { color: var(--sj-text); font-weight: 600; }
.availability__mark { flex: none; fill: var(--sj-accent); margin-top: 0.3em; }
.hero .actions { margin-top: var(--space-6); }

/* Portrait: the badge's ring and sparkle, drawn round Milo's photo. */
.portrait {
  --size: 10.5rem;
  position: relative;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding-top: var(--space-4);
}
.portrait__sky {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: calc(var(--space-4) + var(--size) / 2);
  width: calc(var(--size) * 2.6);
  height: calc(var(--size) * 2.6);
  translate: -50% -50%;
  background: url("/img/hero-sky.svg") center / contain no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  pointer-events: none;
}
.portrait__photo {
  position: relative;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--sj-surface-raised), var(--sj-badge-field));
  box-shadow: 0 0 0 3px var(--sj-bg), 0 0 0 5px var(--sj-badge-ring);
  overflow: hidden;
}
.portrait__photo img { width: 100%; height: 100%; object-fit: cover; }
.portrait__orbit {
  position: absolute;
  top: calc(var(--space-4) - var(--size) * 0.12);
  left: 50%;
  width: calc(var(--size) * 1.24);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  border: 1px solid rgb(72 131 197 / 0.45);
}
.portrait__sparkle {
  position: absolute;
  top: -10px;
  left: calc(50% - 10px);
  fill: var(--sj-text);
}
@media (prefers-reduced-motion: no-preference) {
  .portrait__orbit { animation: orbit 90s linear infinite; }
}
@keyframes orbit { to { rotate: 360deg; } }
.portrait__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--sj-size-small);
  letter-spacing: 0.01em;
  color: var(--sj-text);
  /* 96% opaque, and above the orbit ring, which used to draw through it (Milo, round 3).
     #f0f4f9 on this is about 17:1. */
  position: relative;
  z-index: 1;
  background: rgb(7 14 26 / 0.96);
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--sj-border);
  border-radius: var(--radius-pill);
}

@media (min-width: 48rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    padding-block: var(--space-8) var(--space-6);
  }
  .portrait { grid-column: 2; grid-row: 1; --size: clamp(13rem, 7rem + 12vw, 22rem); padding-top: 0; }
  .portrait__sky { top: calc(var(--size) / 2); }
  .portrait__orbit { top: calc(var(--size) * -0.12); }
  .hero__copy { grid-column: 1; grid-row: 1; }
  .hero h1 { max-width: 16ch; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section-gap) 0; }
.section__inner {
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.section__head { max-width: var(--measure); margin-bottom: var(--space-7); }
.section__lead {
  margin-top: var(--space-4);
  font-size: clamp(1.125rem, 1rem + 0.5vw, var(--sj-size-lead));
  line-height: var(--sj-lead-leading);
  color: var(--sj-text-secondary);
}

/* ---------- Work ---------- */
.flagships {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 48rem) {
  /* auto-fit: 2 cards fill the row now, and a 3rd (Tee 4 Life) slots in later with no layout change */
  .flagships { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-6); }
}
.flagship {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sj-surface);
  border: 1px solid var(--sj-border);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: border-color 200ms var(--ease-out), translate 200ms var(--ease-out);
}
.flagship:hover { border-color: var(--sj-badge-ring); }
@media (prefers-reduced-motion: no-preference) {
  .flagship:hover { translate: 0 -3px; }
}
.flagship__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--sj-surface-raised);
  border-bottom: 1px solid var(--sj-border);
}
.flagship__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.flagship__body { padding: var(--space-5) var(--space-5) var(--space-6); display: grid; gap: var(--space-2); }
/* An h3 on home, an h2 on the Work page (straight under its h1): the same size either way. */
.flagship__name { order: 1; font-size: clamp(1.375rem, 1.2rem + 0.7vw, var(--sj-size-h3)); line-height: var(--sj-h3-leading); letter-spacing: var(--sj-h3-tracking); }
.flagship__kind {
  order: 0;
  font-size: var(--sj-size-small);
  line-height: var(--sj-small-leading);
  color: var(--sj-accent);
  font-weight: 600;
}
.flagship__line { order: 2; color: var(--sj-text-secondary); }
.flagship__link {
  order: 3;
  margin-top: var(--space-3);
  font-weight: 600;
  justify-self: start;
}
/* The whole card is the link's target; the visible link text stays the accessible name. */
.flagship__link::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-l); }
/* Focus ring on the whole card (overflow: hidden would clip a ring on ::before).
   Browsers without :has() keep the link's own default ring. */
.flagship:has(.flagship__link:focus-visible) { outline: var(--focus); outline-offset: 4px; }
@supports selector(:has(*)) { .flagship__link:focus-visible { outline: none; } }
@media (min-width: 48rem) {
  .flagship__body { padding: var(--space-6) var(--space-6) var(--space-7); }
}

.more__title {
  margin-top: var(--space-8);
  margin-bottom: var(--space-5);
  font-size: var(--sj-size-h4);
  line-height: var(--sj-h4-leading);
}
.tiles {
  display: grid;
  gap: var(--space-3);
}
.tile {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--space-4);
  align-items: start;
  align-content: start;
  padding: var(--space-3);
  background: var(--sj-surface);
  border: 1px solid var(--sj-border);
  border-radius: var(--radius-m);
}
.tile__shot {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-s);
  background: var(--sj-surface-raised);
  border: 1px solid var(--sj-border);
  overflow: hidden;
}
.tile__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tile__body { display: grid; gap: 0.15rem; font-size: var(--sj-size-caption); line-height: var(--sj-caption-leading); letter-spacing: var(--sj-caption-tracking); }
.tile__name { font-family: var(--font-display); font-weight: 600; font-size: var(--sj-size-small); color: var(--sj-text); letter-spacing: 0; }
.tile__kind { color: var(--sj-text-secondary); }
.tile__credit { color: var(--sj-text-secondary); }
@media (min-width: 40rem) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  /* 4 tiles: one row of 4 on wide screens, 2 by 2 from 40rem, stacked below. */
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .tile { grid-template-columns: 1fr; padding: var(--space-3) var(--space-3) var(--space-4); }
}
.more__link { margin-top: var(--space-5); }

/* ---------- Process: a track with 4 stops ---------- */
ol.track {
  display: grid;
  gap: var(--space-6);
  position: relative;
  padding-left: var(--space-7);
}
.track::before {
  content: "";
  position: absolute;
  left: calc(var(--space-3) + 1px);
  top: 0.9rem;
  bottom: 0.9rem;
  width: 1px;
  background: linear-gradient(to bottom, var(--sj-badge-ring), rgb(72 131 197 / 0.25));
}
.track__stage { position: relative; }
.track__stage::before {
  /* the badge's 4-point sparkle as the stop marker */
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-7) + var(--space-3) - 9px);
  top: 0.35rem;
  width: 20px;
  height: 20px;
  background: var(--sj-accent);
  clip-path: path("M10 0Q11.9 8.1 20 10Q11.9 11.9 10 20Q8.1 11.9 0 10Q8.1 8.1 10 0Z");
  box-shadow: 0 0 0 6px var(--sj-bg);
}
.track__stage h3, .track__stage h4 { font-family: var(--font-display); font-weight: 600; margin: 0; font-size: var(--sj-size-h4); line-height: var(--sj-h4-leading); }
.track__stage p { margin-top: var(--space-2); color: var(--sj-text-secondary); max-width: 32ch; }
@media (min-width: 60rem) {
  ol.track { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-left: 0; padding-top: var(--space-7); gap: var(--space-6); }
  .track::before {
    left: 10px; right: 0; top: calc(var(--space-3) - 1px); bottom: auto; width: auto; height: 1px;
    background: linear-gradient(to right, var(--sj-badge-ring), rgb(72 131 197 / 0.25));
  }
  .track__stage::before { left: 0; top: calc(-1 * var(--space-7) + var(--space-3) - 10px); }
}

/* ---------- Services ---------- */
.services__grid {
  display: grid;
  border: 1px solid var(--sj-border);
  border-radius: var(--radius-l);
  background: var(--sj-surface);
  overflow: hidden;
}
.service { padding: var(--space-6); }
.service + .service { border-top: 1px solid var(--sj-border); }
.service p { margin-top: var(--space-3); color: var(--sj-text-secondary); max-width: 34ch; }
@media (min-width: 48rem) {
  .services__grid { grid-template-columns: 1fr 1fr; }
  .service { padding: var(--space-7); }
  .service + .service { border-top: 0; border-left: 1px solid var(--sj-border); }
}
.services__link { margin-top: var(--space-5); }

/* ---------- About strip ---------- */
.about-strip__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
}
.about-strip__mark { width: 3.5rem; height: 3.5rem; }
.about-strip__text {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.4;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.005em;
  max-width: 30ch;
  margin-bottom: var(--space-2);
}
@media (min-width: 48rem) {
  .about-strip__inner { gap: var(--space-6); max-width: 56rem; }
  .about-strip__mark { width: 4.5rem; height: 4.5rem; }
}

/* ---------- Contact prompt: a panel with a planet's rim below the text ---------- */
.contact-prompt { padding-bottom: var(--section-gap); }
.contact-prompt__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
  border: 1px solid var(--sj-border);
  background: var(--sj-surface);
  padding: var(--space-7) var(--space-5) clamp(7rem, 5rem + 8vw, 11rem);
}
.contact-prompt__copy { position: relative; z-index: 1; max-width: 36rem; }
.contact-prompt__copy p { margin: var(--space-4) 0 var(--space-6); color: var(--sj-text-secondary); font-size: clamp(1.125rem, 1rem + 0.5vw, var(--sj-size-lead)); line-height: var(--sj-lead-leading); }
.contact-prompt__horizon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 220%;
  aspect-ratio: 1;
  translate: -50% calc(100% - clamp(4.5rem, 3rem + 6vw, 8rem));
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--sj-badge-field) 0%, var(--sj-surface) 100%);
  box-shadow: inset 0 1px 0 0 rgb(72 131 197 / 0.9), 0 -1px 40px 0 rgb(72 131 197 / 0.18);
}
@media (min-width: 48rem) {
  .contact-prompt__panel { padding: var(--space-9) var(--space-8) clamp(8rem, 5rem + 8vw, 12rem); }
  .contact-prompt__horizon { width: 160%; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--sj-border);
  background: var(--sj-bg);
}
.site-footer__inner {
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--space-8) var(--gutter) var(--space-7);
  display: grid;
  gap: var(--space-6);
}
.site-footer__brand img { width: 160px; }
.site-footer__availability { margin-top: var(--space-4); color: var(--sj-text-secondary); font-size: var(--sj-size-small); line-height: var(--sj-small-leading); max-width: 28rem; }
.site-footer__nav ul { list-style: none; margin: 0 calc(-1 * var(--space-2)); padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-2); }
/* Footer links contrast with the footer text in colour, weight and underline, so the
   privacy policy link is conspicuous (CalOPPA, Candor's H7). */
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
  color: var(--sj-accent);
  font-size: var(--sj-size-small);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.site-footer__nav a:hover { color: var(--sj-text); text-decoration-thickness: 2px; }
.site-footer__copy { color: var(--sj-text-secondary); font-size: var(--sj-size-caption); }
@media (min-width: 48rem) {
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: start; }
  .site-footer__copy { grid-column: 1 / -1; border-top: 1px solid var(--sj-border); padding-top: var(--space-5); }
}

/* ---------- Contact page and form ---------- */
[hidden] { display: none !important; }
.site-nav a[aria-current="page"] { color: var(--sj-accent); text-decoration: underline; text-decoration-thickness: 2px; }
.contact { padding-block: var(--space-7) var(--section-gap); }
.contact__grid { display: grid; gap: var(--space-7); align-items: start; }
.contact h1 {
  font-size: clamp(2.125rem, 1.5rem + 2.6vw, var(--sj-size-display));
  line-height: var(--sj-display-leading);
  letter-spacing: var(--sj-display-tracking);
}
.contact__intro p { margin-top: var(--space-4); color: var(--sj-text-secondary); max-width: 34rem; }
.contact__intro .contact__lead { margin-top: var(--space-5); color: var(--sj-text); font-size: clamp(1.125rem, 1rem + 0.5vw, var(--sj-size-lead)); line-height: var(--sj-lead-leading); }
.contact__client { padding-top: var(--space-4); border-top: 1px solid var(--sj-border); }
@media (min-width: 60rem) {
  .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); }
  .contact__intro { position: sticky; top: var(--space-6); }
}

.form {
  display: grid;
  gap: var(--space-6);
  background: var(--sj-surface);
  border: 1px solid var(--sj-border);
  border-radius: var(--radius-l);
  padding: var(--space-6) var(--space-5);
}
@media (min-width: 48rem) { .form { padding: var(--space-7); } }
.form__mock {
  font-size: var(--sj-size-caption);
  line-height: var(--sj-caption-leading);
  color: var(--sj-text);
  border: 1px dashed var(--sj-accent);
  border-radius: var(--radius-s);
  padding: var(--space-2) var(--space-3);
}
.field { display: grid; gap: var(--space-2); margin: 0; min-width: 0; }
.field label, .field legend { font-weight: 600; color: var(--sj-text); font-size: var(--sj-size-body); }
.field__help { font-size: var(--sj-size-small); line-height: var(--sj-small-leading); color: var(--sj-text-secondary); margin-top: calc(-1 * var(--space-1)); }
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  color: var(--sj-text);
  background: var(--sj-bg);
  border: 1.5px solid var(--sj-input-border);
  border-radius: 10px;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus-visible, .field textarea:focus-visible { outline: var(--focus); outline-offset: 2px; border-color: var(--sj-accent); }
fieldset.choices { border: 0; padding: 0; gap: var(--space-2); }
fieldset.choices legend { padding: 0; margin-bottom: var(--space-3); }
.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--sj-input-border);
  border-radius: 10px;
  background: var(--sj-bg);
  position: relative;
}
.choice:has(input:checked) { border-color: var(--sj-accent); background: var(--sj-surface-raised); }
.choice input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex: none;
  border: 2px solid var(--sj-input-border);
  border-radius: 50%;
  background: var(--sj-bg);
  display: grid;
  place-items: center;
}
.choice input::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sj-accent); scale: 0; }
.choice input:checked { border-color: var(--sj-accent); }
.choice input:checked::before { scale: 1; }
@media (forced-colors: active) { .choice input { appearance: auto; } }
.choice label { font-weight: 400; flex: 1; padding-block: var(--space-3); cursor: pointer; }
.choice label::after { content: ""; position: absolute; inset: 0; }
.field--nested { margin: 0 0 var(--space-2) var(--space-6); padding-left: var(--space-4); border-left: 2px solid var(--sj-accent); }
.form__neither {
  background: var(--sj-surface-raised);
  border-left: 3px solid var(--sj-accent);
  border-radius: var(--radius-s);
  padding: var(--space-4);
  color: var(--sj-text);
}
/* Always rendered so screen readers announce the text when it's set (never display: none). */
.form__neither:empty { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
.form__turnstile { min-height: 65px; display: grid; place-items: center start; }
.form__submit { display: grid; gap: var(--space-3); justify-items: start; }
.form__submit .button { font-size: var(--sj-size-body); border: 2px solid var(--sj-button-bg); cursor: pointer; }
.form__commit, .form__privacy { font-size: var(--sj-size-small); line-height: var(--sj-small-leading); color: var(--sj-text-secondary); }
.form__status:empty { display: none; }
.form__status { font-weight: 600; color: var(--sj-accent); }

/* ---------- Shared page parts (stage 4) ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.eyebrow {
  font-size: var(--sj-size-small);
  line-height: var(--sj-small-leading);
  font-weight: 600;
  color: var(--sj-accent);
  margin-bottom: var(--space-3);
}
/* Narrow sections keep the page's left edge. Only their text measure is capped. */
.narrow > * { max-width: 46rem; }
.section--first { padding-top: var(--space-6); }

/* Page header: the home hero's sky on the right, text held to the left 56% so the stars never sit behind it */
.page-hero { position: relative; overflow-x: clip; }
.page-hero__sky {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("/img/hero-wide.svg") right top / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 60%, #000 80%), linear-gradient(to bottom, #000 60%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 60%, #000 80%), linear-gradient(to bottom, #000 60%, transparent);
  mask-composite: intersect;
}
.page-hero__inner {
  position: relative;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--space-6) var(--gutter) var(--space-6);
}
.page-hero h1 {
  font-size: clamp(2.125rem, 1.5rem + 2.6vw, var(--sj-size-display));
  line-height: var(--sj-display-leading);
  letter-spacing: var(--sj-display-tracking);
  max-width: 20ch;
}
.page-hero__lead {
  margin-top: var(--space-5);
  max-width: 38rem;
  font-size: clamp(1.125rem, 1rem + 0.5vw, var(--sj-size-lead));
  line-height: var(--sj-lead-leading);
  color: var(--sj-text-secondary);
}
@media (min-width: 48rem) {
  .page-hero__sky { display: block; }
  .page-hero__inner { padding-block: var(--space-8) var(--space-7); }
  .page-hero__inner > * { max-width: min(38rem, 56vw); }
  .page-hero h1 { max-width: min(20ch, 56vw); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .page-hero__sky { animation: hero-parallax linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}

/* Closing call to action */
.closing { padding-bottom: var(--section-gap); }
/* The rule is drawn across the content width only, not into the gutters. */
.closing__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding-top: var(--space-7);
  background: linear-gradient(var(--sj-border), var(--sj-border)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.closing__text { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.35; max-width: 30ch; }

/* Prose pages (privacy, offer) */
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); }
.prose h2:first-child, .prose > h1 + * { margin-top: var(--space-5); }
.prose p, .prose li { color: var(--sj-text-secondary); }
.prose ul { padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-3); }
.prose li::marker { color: var(--sj-badge-ring); }
.prose code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; color: var(--sj-text); background: var(--sj-surface-raised); padding: 0.1em 0.35em; border-radius: 4px; }
.prose__strong { color: var(--sj-text) !important; font-weight: 600; }
.policy h1 { font-size: clamp(2.125rem, 1.5rem + 2.6vw, var(--sj-size-h1)); line-height: var(--sj-h1-leading); letter-spacing: var(--sj-h1-tracking); }
.policy__date { font-size: var(--sj-size-small); }
.policy .policy__date + .policy__date { margin-top: 0; }

.split { display: grid; gap: var(--space-7); }
.split h2 + p { margin-top: var(--space-4); color: var(--sj-text-secondary); }
@media (min-width: 48rem) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }

.panel { background: var(--sj-surface); border: 1px solid var(--sj-border); border-radius: var(--radius-l); padding: var(--space-6) var(--space-5); }
.panel--center p { margin: var(--space-4) 0 var(--space-6); color: var(--sj-text-secondary); max-width: 40rem; }
@media (min-width: 48rem) { .panel { padding: var(--space-8); } }

/* Services */
.subhead { font-size: var(--sj-size-h3); line-height: var(--sj-h3-leading); margin-bottom: var(--space-3); }
.subhead--spaced { margin-top: var(--space-8); }
.subhead__lead, .prose-line { color: var(--sj-text-secondary); max-width: var(--measure); margin-bottom: var(--space-5); }
.subhead + .subhead__lead + p { margin-bottom: var(--space-7); }
ol.track.track--services { margin-top: var(--space-6); }
.care { background: var(--sj-surface); border: 1px solid var(--sj-border); border-radius: var(--radius-l); padding: var(--space-6) var(--space-5); }
.care__list { display: grid; gap: var(--space-5); margin-bottom: var(--space-6) !important; }
.care__list h3 { font-size: var(--sj-size-h4); line-height: var(--sj-h4-leading); }
.care__list p { margin-top: var(--space-2); color: var(--sj-text-secondary); }
.care__note { color: var(--sj-text-secondary); max-width: var(--measure); }
.care__note + .care__note { margin-top: var(--space-3); }
@media (min-width: 48rem) {
  .care { padding: var(--space-8); }
  .care__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-7); }
}
@media (min-width: 60rem) { .care__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* About */
.about-hero__inner { display: grid; gap: var(--space-6); padding-top: var(--space-6); align-items: start; }
.about-photo { margin: 0; }
.about-photo__frame {
  aspect-ratio: 4 / 5;
  width: min(100%, 22rem);
  border-radius: var(--radius-l);
  background: radial-gradient(circle at 50% 30%, var(--sj-surface-raised), var(--sj-badge-field));
  box-shadow: 0 0 0 3px var(--sj-bg), 0 0 0 5px var(--sj-badge-ring);
  overflow: hidden;
}
.about-photo__frame img { width: 100%; height: 100%; object-fit: cover; }
.about-bio h1 { margin-bottom: var(--space-5); }
.about-bio p { color: var(--sj-text-secondary); max-width: var(--measure); }
.about-bio p + p { margin-top: var(--space-4); }
.about-bio .about-bio__lead { color: var(--sj-text); font-size: clamp(1.125rem, 1rem + 0.5vw, var(--sj-size-lead)); line-height: var(--sj-lead-leading); }
.narrow h2 + p { margin-top: var(--space-4); }
.narrow p { color: var(--sj-text-secondary); }
.narrow p + p { margin-top: var(--space-4); }
@media (min-width: 48rem) {
  .about-hero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); padding-top: var(--space-8); }
}

/* Case studies */
.case__facts { display: grid; gap: var(--space-3); margin: var(--space-5) 0 0; }
.case__facts div { display: grid; gap: 0.1rem; align-content: start; }
.case__facts dt { font-size: var(--sj-size-small); font-weight: 600; color: var(--sj-accent); }
.case__facts dd { margin: 0; color: var(--sj-text-secondary); }
@media (min-width: 48rem) { .case__facts { grid-template-columns: 2fr 2fr 1fr; gap: var(--space-5); } .page-hero__inner > .case__facts { max-width: min(46rem, 58vw); } }
.case__hero-shot {
  position: relative;
  max-width: var(--content);
  margin: 0 var(--gutter) var(--space-2);
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--sj-border);
  aspect-ratio: 16 / 9;
}
@media (min-width: 76rem) { .case__hero-shot { margin-inline: auto; } }
.case__hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.case__hero-shot .shot-open { display: block; height: 100%; }
.case__live { margin-top: var(--space-5); }
.case__body { padding-bottom: var(--section-gap); }
.case__section { max-width: 46rem; margin-top: var(--space-9); }
.case__section h2 { margin-bottom: var(--space-5); }
.case__section p { color: var(--sj-text-secondary); }
.case__section p + p { margin-top: var(--space-4); }
.changes { margin: var(--space-5) 0 0; padding-left: 1.4em; display: grid; gap: var(--space-4); color: var(--sj-text-secondary); }
.changes li::marker { color: var(--sj-accent); font-weight: 600; }
.case__links { margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid var(--sj-border); display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; justify-content: space-between; }

/* Work page variants */
.more__title--h2 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, var(--sj-size-h2)); line-height: var(--sj-h2-leading); margin-top: 0; }
/* Work: 4 tiles as 2 by 2 at every width from 40rem, so the row never splits 3 and 1. */
@media (min-width: 60rem) { .tiles--work { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles--work .tile { grid-template-columns: 11rem 1fr; } }

/* Offer page */
.price { margin-top: var(--space-6); padding: var(--space-5); border-left: 3px solid var(--sj-accent); background: var(--sj-surface); border-radius: 0 var(--radius-m) var(--radius-m) 0; }
.price p { color: var(--sj-text-secondary); }
.price p + p { margin-top: var(--space-3); }
.price .price__main { color: var(--sj-text); font-weight: 600; font-size: var(--sj-size-body); }
.cta { margin-top: var(--space-6); display: grid; gap: var(--space-3); justify-items: start; }
.cta__note { color: var(--sj-text-secondary); font-size: var(--sj-size-small); }
.deliverables { margin: 0; padding-left: 1.6em; display: grid; gap: var(--space-4); max-width: 50rem; color: var(--sj-text-secondary); }
.deliverables li::marker { color: var(--sj-accent); font-weight: 600; font-family: var(--font-display); }
.deliverables__note { margin-top: var(--space-5); font-weight: 600; }
.faq h3 { font-size: var(--sj-size-h4); line-height: var(--sj-h4-leading); margin-top: var(--space-6); }
.faq h2 + h3 { margin-top: var(--space-5); }
.faq h3 + p { margin-top: var(--space-2); }
.offer-form { padding-bottom: var(--section-gap); }
.offer-form:focus { outline: none; }
.offer-form h2 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, var(--sj-size-h2)); line-height: var(--sj-h2-leading); }
.offer-form .contact__lead { margin-top: var(--space-5); }

/* Form states */
.field__error { color: var(--sj-text); font-weight: 600; font-size: var(--sj-size-small); line-height: var(--sj-small-leading); padding-left: var(--space-3); border-left: 3px solid var(--sj-accent); }
.field [aria-invalid="true"] { border-color: var(--sj-accent) !important; border-width: 2px !important; }
fieldset.choices[aria-invalid="true"] .choice { border-color: var(--sj-accent); }
.form-sent, .form__failed { background: var(--sj-surface); border: 1px solid var(--sj-border); border-radius: var(--radius-l); padding: var(--space-6) var(--space-5); }
.form-sent:focus { outline: var(--focus); outline-offset: 3px; }
.form-sent p { margin-top: var(--space-4); color: var(--sj-text-secondary); }
.form-sent strong { color: var(--sj-text); overflow-wrap: anywhere; }
.form__failed { border-left: 3px solid var(--sj-accent); padding: var(--space-4); border-radius: var(--radius-s); color: var(--sj-text); }
.form__submit .button[disabled] { opacity: 0.7; cursor: progress; }

/* 404 */
.notfound .page-hero__inner { padding-bottom: var(--section-gap); }
.notfound__links { display: grid; gap: var(--space-2); margin-top: var(--space-6) !important; }

/* ---------- Forced colours ---------- */
@media (forced-colors: active) {
  .sky, .portrait__sky, .contact-prompt__horizon { display: none; }
  .button { border: 2px solid ButtonText; }
  .track__stage::before { background: CanvasText; }
}

/* ---------- Screenshots that open large (js/gallery.js) ---------- */
.shot-open { display: block; border-radius: inherit; cursor: zoom-in; }
.shot-open img { display: block; }
.shot-open:focus-visible { outline: var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .shot-open img { transition: opacity 160ms var(--ease-out); }
}
.shot-open:hover img { opacity: 0.88; }
.tile__shot.shot-open { overflow: hidden; }

/* Case studies: the rest of the project's screenshots, under the hero shot. */
.case__gallery { max-width: var(--content); margin: var(--space-4) var(--gutter) 0; }
@media (min-width: 76rem) { .case__gallery { margin-inline: auto; } }
.shot-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 48rem) { .shot-strip { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-4); } }
.shot-strip .shot-open, .tile__more .shot-open {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--sj-border);
  border-radius: var(--radius-m);
  background: var(--sj-surface-raised);
}
.shot-strip img, .tile__more img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Work page tiles: a row of small extra screenshots under the credit. */
.tile__more { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tile__more li { width: 4.5rem; }
.tile__more .shot-open { border-radius: var(--radius-s); }

/* The viewer itself */
html.has-lightbox { overflow: hidden; }
.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sj-text);
  overflow: hidden;
}
.lightbox::backdrop { background: rgb(7 14 26 / 0.94); }
.lightbox__stage {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 4rem var(--space-3) var(--space-4);
  touch-action: pan-y pinch-zoom;
}
.lightbox__figure { margin: 0; display: grid; justify-items: center; gap: var(--space-3); max-width: 100%; }
.lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 1600px);
  max-height: calc(100dvh - 9rem);
  object-fit: contain;
  border-radius: var(--radius-m);
  border: 1px solid var(--sj-border);
  background: var(--sj-surface-raised);
}
.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-3);
  text-align: center;
  font-size: var(--sj-size-small);
  line-height: var(--sj-small-leading);
  color: var(--sj-text);
}
.lightbox__count { color: var(--sj-text-secondary); }
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--sj-border);
  background: rgb(15 23 36 / 0.92);
  color: var(--sj-text);
  cursor: pointer;
}
.lightbox__btn:hover { background: var(--sj-surface-raised); border-color: var(--sj-badge-ring); }
.lightbox__btn:focus-visible { outline: var(--focus); outline-offset: 3px; }
.lightbox__btn::before { content: ""; display: block; }
.lightbox__close { top: var(--space-3); right: var(--space-3); }
.lightbox__close::before {
  width: 18px; height: 18px;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
}
.lightbox__prev, .lightbox__next { top: 50%; translate: 0 -50%; }
.lightbox__prev { left: var(--space-3); }
.lightbox__next { right: var(--space-3); }
.lightbox__prev::before, .lightbox__next::before {
  width: 12px; height: 12px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.lightbox__prev::before { transform: translateX(2px) rotate(-135deg); }
.lightbox__next::before { transform: translateX(-2px) rotate(45deg); }
.lightbox__btn[hidden] { display: none; }
/* On phones the arrows sit under the image, beside the caption, not over it. */
@media (max-width: 47.99rem) {
  .lightbox__stage { padding: 4rem var(--space-3) 5rem; }
  .lightbox__img { max-height: calc(100dvh - 12rem); }
  .lightbox__prev, .lightbox__next { top: auto; bottom: var(--space-4); translate: none; }
  .lightbox__prev { left: calc(50% - 56px); }
  .lightbox__next { right: calc(50% - 56px); }
}
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lightbox-in 180ms var(--ease-out); }
  .lightbox[open]::backdrop { animation: lightbox-fade 180ms var(--ease-out); }
}
@keyframes lightbox-in { from { opacity: 0; scale: 0.98; } }
@keyframes lightbox-fade { from { opacity: 0; } }
@media (forced-colors: active) {
  .lightbox__btn { border: 2px solid ButtonText; }
  .lightbox__close::before { background: none; width: auto; height: auto; content: "\00d7"; font-size: 1.5rem; }
}