/* Shiny Things Investments — "First light"
   The page is one sunrise: night at the top, daylight at the contact.
   The sun that rises as you scroll is the brand mark itself: the original
   logo's geometry, measured off its pixels (scripts/extract.mjs) and drawn as
   vectors (scripts/mark.mjs), only ever scaled uniformly. It rises in its own
   stage, never behind the words, so no copy needs a backing plate. */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-roman.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("fonts/jost.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
/* Ramforge's own wordmark face, the same file ramforge.ai serves (only used
   for the RAMFORGE wordmark; not preloaded). */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --night: #0b1026;
  --night-2: #141a3e;
  --dusk: #2a1d4d;
  --plum: #4a2456;
  --ember: #b8473f;
  --flare: #ec7a3a;
  --sun: #ffac27; /* the original logo's orange */
  --sun-hi: #ffc75a;
  --sun-glint: #ffca6a;
  --apricot: #fbd9a8;
  --day: #fcf3e4;
  --ink: #1d1530;
  --ink-2: #57496a;
  --moon: #f6ecdc;
  --moon-2: #c4bcd6;
  /* The lockup: original orange sun and grey wordmark (#717272) on daylight;
     on the night sky the wordmark turns to a quiet light grey. */
  --mark-sun: var(--sun);
  --mark-word-day: #717272;
  --mark-word-night: #d3d0ca;
  /* Ramforge's dark-theme ink and heat (ramforge.ai global.css). */
  --rf-ink: #eceae4;
  --rf-heat: #ff4f0a;

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Futura", "Century Gothic", system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --measure: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--moon);
  font-family: var(--sans);
  font-size: clamp(17px, 0.35vw + 15.6px, 20px);
  line-height: 1.55;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; }
a { color: inherit; }
em { font-style: italic; }
ul { list-style: none; margin: 0; padding: 0; }
h3 { margin: 0; font: inherit; }

:focus-visible {
  outline: 3px solid var(--sun-hi);
  outline-offset: 4px;
  border-radius: 3px;
}
.day :focus-visible, .footer :focus-visible { outline-color: var(--ink); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: 16px; z-index: 50;
  padding: 10px 16px; background: var(--sun); color: var(--ink);
  font-weight: 500; text-decoration: none; border-radius: 999px;
  transform: translateY(-160%); transition: transform .2s ease;
}
.skip:focus { transform: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; position: relative; }
.keep { white-space: nowrap; }

/* ---------- Masthead ---------- */
.masthead {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  /* Same left and right edges as the page's content column. */
  padding: clamp(18px, 2.6vw, 34px) max(var(--gutter), (100% - var(--measure)) / 2);
}
/* The lockup: the logo's sun and wordmark in their original 438 x 160 frame
   (generated from src/brand/geometry.json), sized by height only. On the
   night sky it stands on the sky itself, no plate: original orange sun,
   light wordmark. In the daylight footer it is the original colours. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lockup { display: block; height: var(--lockup-h); width: auto; aspect-ratio: 438 / 160; overflow: visible; flex: none; }
.mark-sun { fill: var(--mark-sun); }
.mark-word { fill: var(--mark-word, var(--mark-word-day)); }
.brand {
  --lockup-h: clamp(58px, 2.4vw + 38px, 76px);
  --mark-word: var(--mark-word-night);
  display: inline-flex; flex: none; text-decoration: none; border-radius: 4px;
}
.masthead-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.masthead-link, .masthead-cta {
  white-space: nowrap;
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
}
.masthead-link { color: var(--moon-2); padding: 11px 0; }
.masthead-link:hover { color: var(--sun-hi); }
.masthead-cta {
  padding: 11px 20px; border: 1px solid rgb(246 236 220 / .35); border-radius: 999px;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.masthead-cta:hover { background: var(--sun); color: var(--ink); border-color: var(--sun); }

/* ---------- Type ---------- */
.display {
  font-family: var(--serif);
  font-weight: 360;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: clamp(3rem, 7.4vw, 7.4rem);
  line-height: .96;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}
.display em, .h2 em, .statement em {
  font-weight: 330;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--sun-hi);
}
.h2 {
  font-family: var(--serif); font-weight: 340; font-variation-settings: "SOFT" 100;
  font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: .98; letter-spacing: -.025em; margin: 0;
}
.kicker, .eyebrow {
  font-family: var(--sans); font-weight: 450; font-size: 13px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--moon-2); margin: 0 0 22px;
}
.kicker-ink { color: var(--ink-2); }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 12px var(--sun); }
.ext { font-family: var(--sans); display: inline-block; margin-left: .35em; transition: transform .3s ease; }

/* ---------- The scene: night to dawn, one continuous sky ---------- */
.scene {
  position: relative;
  --rise: 0; /* 0 → 1 as the sun rises; set by site.js from scroll */
  background: linear-gradient(180deg,
    var(--night) 0, var(--night) min(640px, 30%), var(--night-2) min(1000px, 44%),
    var(--dusk) 58%, var(--plum) 75%, #7a2d52 90%, #9a3848 100%);
}
/* Stars belong to the sun's sky, the frame, so none ever sits behind a word. */
.stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 42%, #fff6 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 47% 12%, #fff9 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 30%, #fff5 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 78% 16%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 44%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 7% 58%, #fff4 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 36% 66%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 60%, #fff4 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 94% 8%, #fff7 50%, transparent 51%);
  opacity: calc(1 - var(--rise) * 2);
}
.scene .wrap { z-index: 1; }

/* ---------- The sun: the mark, rising in its own stage ----------
   The frame is the window (and size container) the sun rises in. Its bottom
   edge is the horizon, the only thing allowed to hide part of the mark. The
   sun is sized and placed so no ray ever meets the frame's sides or top. */
.sun-stage { pointer-events: none; z-index: 0; }
.sun-frame { position: relative; overflow: hidden; container-type: size; }
/* The horizon: a line of first light where the sun meets it, and the warm
   haze it throws up into the sky. Drawn under the sun; both fade as it rises. */
.sun-frame::before, .sun-frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
.sun-frame::before {
  height: 46%;
  background: radial-gradient(ellipse 58% 100% at 50% 100%, rgb(255 150 60 / .2), rgb(236 122 58 / .07) 55%, transparent 80%);
  opacity: calc(1 - var(--rise) * .6);
}
.sun-frame::after {
  height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgb(255 199 120 / .75) 22%, rgb(255 214 150 / .9) 50%, rgb(255 199 120 / .75) 78%, transparent);
  box-shadow: 0 0 18px 4px rgb(255 150 60 / .28);
  opacity: calc(1 - var(--rise) * .5);
}
.sun {
  --edge: 12px;
  --peek: .42;       /* share above the horizon at first light */
  --end-top: 9cqh;   /* where its top settles when fully risen */
  --s0: .9;          /* scale at first light, growing to 1 */
  --size: min(90cqmin, 100cqw - 2 * var(--edge), 1000px);
  --anchor: 52cqw;   /* preferred centre, clamped so the sides never clip */
  --cx: clamp(var(--size) / 2 + var(--edge), var(--anchor), 100cqw - var(--size) / 2 - var(--edge));
  --min-lift: 0px;   /* the least it rises, however short its frame */
  /* Its top at first light: the peek, or lower when the frame is too short to
     leave the sun --min-lift of sky to rise through. */
  --y0: max(100cqh - var(--size) * var(--peek), var(--end-top) + var(--min-lift));
  --lift: max(0px, var(--y0) - var(--end-top));
  position: absolute; left: 0; top: 0;
  width: var(--size);
  color: var(--sun);
  transform:
    translate3d(calc(var(--cx) - var(--size) / 2), calc(var(--y0) - var(--rise) * var(--lift)), 0)
    scale(calc(var(--s0) + var(--rise) * (1 - var(--s0))));
  transform-origin: 50% 50%;
  will-change: transform;
}
.sun-svg { display: block; width: 100%; height: auto; overflow: visible; position: relative; }
.sun-glow {
  position: absolute; inset: 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 190 90 / .55), rgb(244 140 40 / .22) 45%, transparent 72%);
  filter: blur(18px);
  opacity: calc(0.45 + var(--rise) * 0.4);
}
/* Motion never moves or resizes a dot: the mark keeps its structure. At first
   light the core and then each ring of the mark appear from the centre out;
   after that a slow wave of light runs outward ring by ring (each ring warms
   from the brand orange toward gold and back), so the sun radiates
   rather than spins. */
.sun-core { animation: first-light .9s ease-out .1s both; }
.sun-ring {
  animation:
    first-light 1.1s cubic-bezier(.2, .7, .2, 1) calc(.3s + var(--k) * .15s) both,
    radiate 6.4s ease-in-out calc(2.2s + var(--k) * .5s) infinite;
}
@keyframes first-light { from { opacity: 0; } }
@keyframes radiate {
  0%, 36%, 100% { color: var(--sun); }
  14% { color: var(--sun-glint); }
}

/* ---------- Hero ---------- */
.hero { padding: 132px 0 0; }
.hero .display { max-width: 11.5ch; margin-top: 8px; }
.lede {
  max-width: 34ch; margin: clamp(24px, 2.6vw, 36px) 0 0;
  font-size: clamp(1.15rem, 1.1vw + .8rem, 1.6rem); line-height: 1.45; font-weight: 340;
  color: var(--moon);
}
.hero-cue { margin: 40px 0 0; }
.hero-cue a {
  display: inline-block;
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  color: var(--moon-2); border-bottom: 1px solid rgb(196 188 214 / .4); padding-bottom: 6px;
}
.hero-cue a:hover { color: var(--sun-hi); border-color: var(--sun-hi); }

/* ---------- What we do: three roles ---------- */
.build { padding: clamp(56px, 7vw, 104px) 0 0; }
.build .h2 { margin-bottom: clamp(28px, 3.6vw, 48px); }
.roles { border-top: 1px solid rgb(246 236 220 / .2); max-width: 44rem; }
.role {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 4px 24px;
  padding: 20px 0 22px; border-bottom: 1px solid rgb(246 236 220 / .2);
}
.role-label {
  margin: 0; padding-top: .55em;
  font-size: 12px; font-weight: 450; letter-spacing: .24em; text-transform: uppercase; color: var(--moon-2);
}
.role-name {
  font-family: var(--serif); font-weight: 380; font-variation-settings: "SOFT" 100;
  font-size: clamp(1.35rem, 1vw + 1rem, 1.7rem); line-height: 1.2; letter-spacing: -.01em;
}
/* The two Shiny Things names in the original logo's wordmark manner: thin,
   uppercase, geometric sans, tracked about as openly as the logo's letters
   (Jost light at .1em matches the logo's word widths to cap height within
   about 2%, and its stem to cap ratio). Quieter than the RAMFORGE wordmark. */
.role-name-sti {
  font-family: var(--sans); font-weight: 350; font-variation-settings: normal;
  font-size: clamp(1.05rem, .5vw + .92rem, 1.3rem); line-height: 1.45;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mark-word-night);
}
.role-text { margin: 4px 0 0; font-size: clamp(1rem, .3vw + .9rem, 1.15rem); line-height: 1.5; color: var(--moon); text-wrap: pretty; }
.role-link { margin: 8px 0 0; font-size: 15px; letter-spacing: .02em; }
.role-link a { text-decoration-color: rgb(246 236 220 / .4); text-underline-offset: 4px; }
.role-link a:hover { color: var(--sun-hi); text-decoration-color: var(--sun-hi); }
.role-link a:hover .ext { transform: translate(2px, -2px); }
/* Ramforge's own wordmark (ramforge.ai: Archivo, width 125%, weight 800,
   -0.01em; a 14px ink cell with a 6px heat corner, 10px gap at 17px), in its
   dark theme and scaled as a unit. */
.rf-wordmark {
  display: inline-flex; align-items: center; gap: .588em;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-stretch: 125%; font-weight: 800;
  font-size: 1.15em; line-height: 1.2; letter-spacing: -.01em; color: var(--rf-ink);
}
.rf-cell { width: .8235em; height: .8235em; background: var(--rf-ink); position: relative; flex: none; }
.rf-cell::after { content: ""; position: absolute; right: 0; bottom: 0; width: .353em; height: .353em; background: var(--rf-heat); }

/* ---------- Dawn: one line, then the light ---------- */
.dawn { padding: clamp(64px, 8vw, 120px) 0 clamp(48px, 6vw, 88px); }
.statement {
  margin: 0; max-width: 17ch;
  font-family: var(--serif); font-weight: 340; font-variation-settings: "SOFT" 100;
  font-size: clamp(2.4rem, 5.6vw, 5.6rem); line-height: 1; letter-spacing: -.025em;
  color: var(--day);
  text-wrap: pretty;
}
.statement em { color: var(--day); text-decoration: underline; text-decoration-thickness: .045em; text-underline-offset: .12em; text-decoration-color: var(--sun-hi); }
.daybreak {
  height: clamp(104px, 17vh, 190px);
  background: linear-gradient(180deg, #9a3848, var(--ember) 18%, var(--flare) 40%, var(--sun) 58%, var(--apricot) 80%, var(--day));
}

/* ---------- Day ---------- */
.day { background: var(--day); color: var(--ink); }
.day .h2 em, .day .display em { color: #c4570f; }

.companies { padding: clamp(40px, 5vw, 72px) 0 clamp(40px, 5vw, 72px); }
.company-list { border-top: 1px solid rgb(29 21 48 / .16); }
.company {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; align-items: center; gap: 8px clamp(20px, 3vw, 48px);
}
.company { padding: 22px 0; border-bottom: 1px solid rgb(29 21 48 / .16); }
/* Official logos, modest and optically matched; the name beside each is the
   readable label, so the images are decorative (alt=""). */
.company-logo { width: auto; max-width: 100%; height: var(--logo-h); }
.logo-allume { --logo-h: 40px; margin-left: -4px; }
.logo-mvp { --logo-h: 27px; }
/* CERES TAG publishes its logo in white only (for its dark header); the same
   file is shown as a single-colour dark mark on daylight. */
.logo-ceres-tag { --logo-h: 23px; filter: brightness(0); }
.logo-lskd { --logo-h: 18px; }
.logo-ucg { --logo-h: 26px; }
.company-name {
  margin: 0;
  font-family: var(--serif); font-weight: 400; font-variation-settings: "SOFT" 60;
  font-size: clamp(1.3rem, .9vw + 1rem, 1.65rem); line-height: 1.15; letter-spacing: -.01em;
}
.company-text { margin: 4px 0 0; max-width: 40ch; color: var(--ink-2); line-height: 1.45; text-wrap: pretty; }
.company-link { font-size: 15px; letter-spacing: .02em; color: var(--ink); text-decoration-color: rgb(29 21 48 / .3); text-underline-offset: 4px; white-space: nowrap; }
.company-link .ext { color: var(--ink-2); }
.company-link:hover { color: #9e3f08; text-decoration-color: currentColor; }
.company-link:hover .ext { color: inherit; transform: translate(2px, -2px); }
/* Exited: set apart under its own label, and quieter than current holdings. */
.exited { padding: 26px 0 0; }
.exited .kicker { margin: 0; }
.exited .company { padding: 14px 0 0; border-bottom: 0; }
.exited .company-name { font-size: clamp(1.15rem, .6vw + 1rem, 1.4rem); color: var(--ink-2); }

.contact { padding: clamp(64px, 8vw, 128px) 0 clamp(88px, 11vw, 160px); }
.display-ink { max-width: 12ch; }
.email-block { margin-top: clamp(36px, 4.5vw, 56px); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.email {
  font-family: var(--serif); font-weight: 400; font-variation-settings: "SOFT" 50;
  font-size: clamp(1.45rem, 3.6vw, 3.4rem); letter-spacing: -.015em; line-height: 1.1;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--sun);
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
  text-decoration-skip-ink: none;
  transition: text-decoration-thickness .25s ease, text-underline-offset .25s ease;
  overflow-wrap: anywhere;
}
.email:hover { text-decoration-thickness: .16em; text-underline-offset: .1em; }
.copy {
  font: 500 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); background: transparent; cursor: pointer;
  border: 1px solid rgb(29 21 48 / .35); border-radius: 999px; padding: 13px 20px;
  transition: background-color .2s ease, border-color .2s ease;
}
.copy:hover { background: var(--ink); color: var(--day); border-color: var(--ink); }
.copy-status { flex-basis: 100%; margin: 0; min-height: 1.5em; font-size: 15px; color: var(--ink-2); }

.footer { padding: 0 0 clamp(40px, 5vw, 72px); font-size: 14px; color: var(--ink-2); }
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: center; justify-content: space-between;
  border-top: 1px solid rgb(29 21 48 / .16); padding-top: 26px;
}
.footer p { margin: 0; }
.footer-brand { display: flex; --lockup-h: clamp(56px, 1.4vw + 44px, 66px); --mark-word: var(--mark-word-day); }
.footer a { text-decoration-color: rgb(29 21 48 / .3); text-underline-offset: 3px; }

/* ---------- Wide screens: the sun rises beside the copy ----------
   The stage is the scene's right-hand column, from the top of the page to
   the dawn; the copy keeps to the left of it. Its frame is a viewport-tall
   window stuck to the screen while the scene scrolls past, so its bottom
   edge, the horizon, is the bottom of the screen. */
@media (min-width: 1100px) {
  .scene {
    --col: min(100% - 2 * var(--gutter), var(--measure));
    --split: .55;
  }
  .hero { min-height: 92vh; min-height: 92svh; display: flex; align-items: center; padding: 140px 0 40px; }
  .sun-stage {
    position: absolute; top: 0; bottom: 0; right: 0;
    left: calc((100% - var(--col)) / 2 + var(--col) * var(--split));
  }
  .sun-frame { position: sticky; top: 0; height: 100vh; height: 100svh; }
  /* Fully risen by the dawn line: the horizon has nothing left to hide. */
  .sun-frame::after { opacity: calc(1 - var(--rise)); }
  /* Copy column: everything left of the stage, with a clear gap. */
  .scene .wrap > * { max-width: min(var(--max, 100%), calc(var(--split) * 100% - 56px)); }
  .hero .display { --max: 11.5ch; font-size: clamp(3rem, 6.4vw, 5.8rem); }
  .lede { --max: 34ch; }
  .roles { --max: 44rem; }
  .statement { --max: 17ch; font-size: clamp(2.4rem, 4.8vw, 5rem); }
}

/* ---------- Narrow screens: a short pinned sunrise after the hero ----------
   (Option 2, owner request 24 Oct 2026.) Under the hero copy the stage is the
   sun's own sky: a frame just tall enough for the whole risen mark, with clear
   sky above it and under it. With motion, the stage is taller than the frame
   by --travel and the frame is sticky to the bottom of the screen, so after
   the headline has gone the sky holds for that short beat while ordinary
   scrolling lifts the whole sun clear of the horizon and the sky behind it
   warms; then the frame scrolls away with the page and "What we do" follows.
   Until the frame stands whole on the screen, its horizon is the bottom of the
   screen (--horizon, set by site.js), as on wide screens. The copy and the sun
   never share a pixel. Without script or with reduced motion the stage is the
   frame alone, holding the fully risen sun: no tall empty track.
   The sky is laid in bands that meet colour for colour, so it never steps or
   darkens: night behind the hero, the stage from night to plum, then plum to
   the rose the daybreak band starts from. */
@media (max-width: 1099.98px) {
  /* Under the bands' seams (sub-pixel edges) only the colours they meet at. */
  .scene { background: var(--plum); }
  .hero { background: linear-gradient(0deg, var(--plum) 4px, var(--night) 4px); display: flex; flex-direction: column; gap: 28px; }
  .sun-stage {
    --top: 16px;                     /* the least sky above the risen sun */
    --gap: clamp(20px, 5svh, 48px);  /* clear sky between it and the horizon */
    --frame-size: min(100vw - 20px, 620px, 100svh - var(--top) - var(--gap));
    --travel: 32svh;                 /* the pinned beat */
    position: relative; margin-top: auto;
    display: flex; flex-direction: column; justify-content: flex-end;
    background: linear-gradient(180deg, var(--night), var(--night-2) 24%, var(--dusk) 56%, #3d2153 78%, var(--plum));
  }
  .sun-frame { flex: none; height: calc(var(--frame-size) + var(--top) + var(--gap)); }
  .scene[data-sunrise] .sun-stage { height: calc(var(--frame-size) + var(--top) + var(--gap) + var(--travel)); }
  .scene[data-sunrise] .sun-frame { position: sticky; bottom: 0; }
  .scene:not([data-sunrise]) { --rise: 1; }
  .build { background: linear-gradient(180deg, var(--plum), #5a2856); }
  .dawn { background: linear-gradient(180deg, #5a2856, #7a2d52 50%, #9a3848); box-shadow: 0 -4px 0 #5a2856, 0 4px 0 #9a3848; }
  /* The horizon glow and haze stand on the visible horizon and are gone by the
     time the frame lets go, so no line or warm edge travels up the page. */
  .sun-frame::before, .sun-frame::after { bottom: calc(100% - var(--horizon, 100%)); }
  .sun-frame::before { height: min(46%, var(--horizon, 100%) * .8); opacity: calc(1 - var(--rise)); }
  .sun-frame::after { opacity: calc(1 - var(--rise)); }
  /* The sun's top: from a 42% peek over the horizon to standing whole, --gap
     above it, and never above the frame's top (so never clipped there). */
  .sun { --peek: .42; --anchor: 50cqw; --edge: 10px;
    --size: min(100cqw - 2 * var(--edge), 620px, 100cqh - var(--top) - var(--gap));
    --hz: var(--horizon, 100cqh);
    transform:
      translate3d(calc(var(--cx) - var(--size) / 2),
        max(var(--top), var(--hz) - var(--size) * var(--peek) - var(--rise) * (var(--size) * (1 - var(--peek)) + var(--gap))), 0)
      scale(calc(var(--s0) + var(--rise) * (1 - var(--s0)))); }
}
/* ---------- The narrow sunrise on the native scroll timeline ----------
   (26 Oct 2026.) Only when site.js has
   verified that the engine runs CSS scroll-driven animations does it mark the
   scene data-sunrise="native". Then the horizon is a sticky, zero-height anchor
   at the bottom of the frame: the engine keeps it at the frame's visible
   bottom, min(frame bottom, screen bottom), exactly where --horizon put it.
   The sun, the line of first light and the haze hang from it, and their
   transforms and opacities are CSS animations on the root scroll timeline
   (keyframes written by site.js from the measured layout, not per scroll).
   The frame clips with overflow: clip, so it is not a scroll container and
   the anchor stays sticky to the page. Everywhere else the anchors generate
   no box and the extra elements are not drawn: the baseline composition. */
.sun-anchor { display: contents; }
.sun-haze, .sun-line { display: none; }
@media (max-width: 1099.98px) {
  .scene[data-sunrise="native"] .sun-frame { overflow: clip; display: flex; flex-direction: column; justify-content: flex-end; }
  .scene[data-sunrise="native"] .sun-frame::before, .scene[data-sunrise="native"] .sun-frame::after { content: none; }
  .scene[data-sunrise="native"] .sun-anchor { display: block; position: sticky; bottom: 0; height: 0; flex: none; }
  .scene[data-sunrise="native"] .sun-haze, .scene[data-sunrise="native"] .sun-line { display: block; position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
  .scene[data-sunrise="native"] .sun-haze {
    height: 46cqh; transform-origin: 50% 100%;
    background: radial-gradient(ellipse 58% 100% at 50% 100%, rgb(255 150 60 / .2), rgb(236 122 58 / .07) 55%, transparent 80%);
  }
  .scene[data-sunrise="native"] .sun-line {
    height: 2px; z-index: 1;
    background: linear-gradient(90deg, transparent, rgb(255 199 120 / .75) 22%, rgb(255 214 150 / .9) 50%, rgb(255 199 120 / .75) 78%, transparent);
    box-shadow: 0 0 18px 4px rgb(255 150 60 / .28);
  }
}
@media (max-width: 760px) {
  .brand { --lockup-h: 54px; }
  .masthead-cta { padding: 9px 14px; font-size: 12px; letter-spacing: .16em; }
  .masthead-link { font-size: 12px; letter-spacing: .16em; }
  .hero { padding-top: 118px; }
  .role { grid-template-columns: 1fr; padding: 16px 0 18px; }
  .role-label { padding-top: 0; }
  .company { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 20px 0; }
  .company-logo { height: calc(var(--logo-h) * .82); }
  .company-body { grid-column: 1 / -1; grid-row: 2; }
}
/* No room for two links beside the lockup: keep the call to action. */
@media (max-width: 479.98px) {
  .masthead-link { display: none; }
}
@media (max-width: 359.98px) {
  .masthead { gap: 12px; }
  .masthead-cta { padding: 9px 12px; letter-spacing: .12em; }
}

/* ---------- Reduced motion: a still sunrise ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene { --rise: .5 !important; }
  .sun { will-change: auto; }
  .sun-core, .sun-ring { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}
/* Narrow: the still composition is the whole, risen sun. */
@media (prefers-reduced-motion: reduce) and (max-width: 1099.98px) {
  .scene { --rise: 1 !important; }
}

@media (forced-colors: active) {
  .sun-stage, .stars, .daybreak { display: none; }
  .mark-sun, .mark-word { fill: CanvasText; }
  .rf-cell, .rf-cell::after { background: CanvasText; }
}