/* Gravitational Radiation — landing page.
   Every colour, type size, weight, spacing step, duration and easing comes
   from tokens.css. This file only arranges them. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--gr-bg);
  color: var(--gr-fg);
  font-family: var(--gr-font);
  font-size: var(--gr-body-size);
  font-weight: var(--gr-body-weight);
  line-height: var(--gr-body-leading);
  letter-spacing: var(--gr-body-tracking);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-thickness var(--gr-duration-fast) var(--gr-ease-standard); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
p { margin: 0; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.wrap { max-width: var(--gr-grid-max); margin-inline: auto; padding-inline: var(--gr-grid-margin); }

/* Catalogue rows: a small label column, then the content. */
.row { display: grid; grid-template-columns: 1fr; gap: var(--gr-space-5) var(--gr-grid-gutter); }
@media (min-width: 64rem) {
  .row { grid-template-columns: repeat(12, 1fr); }
  .row > .label { grid-column: 1 / span 3; }
  .row > .content { grid-column: 4 / -1; }
}

.label {
  margin: 0;
  font-size: var(--gr-caption-size); font-weight: var(--gr-caption-weight);
  line-height: var(--gr-caption-leading); letter-spacing: var(--gr-caption-tracking);
  color: var(--gr-fg-muted);
}
.num { font-feature-settings: "tnum" 1; }

.section { padding-block: var(--gr-section-gap) 0; }
.section + .section { border-top: 0; }
.rule { border-top: 1px solid var(--gr-rule); padding-top: var(--gr-space-5); }
.section-head { margin-bottom: var(--gr-space-7); }

/* ---- 1. Hero ---------------------------------------------------------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 32rem;
  overflow: hidden;
  background: var(--gr-black);
  color: var(--gr-white);
  --rx: min(34vw, 24svh);
}
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-mark { position: absolute; top: var(--gr-space-6); left: var(--gr-grid-margin); margin: 0; z-index: 1; }
.hero-mark img { width: 10.5rem; height: auto; }
/* The static symbol: shown without JS and with reduced motion. Centred by
   its drawn outline (x 10–88.47 of 98.473), so the big body's weight does
   not pull it right; site.js reads the orbit's centre from this box. */
.hero-symbol {
  position: absolute;
  left: 50%;
  top: 46%;
  width: calc(var(--rx) * 2.7354);
  height: auto;
  transform: translate(-50%, -54.881%);
}
.hero.is-animating .hero-symbol { visibility: hidden; }
.hero-line {
  position: absolute;
  left: var(--gr-grid-margin); right: var(--gr-grid-margin);
  bottom: var(--gr-space-8);
  z-index: 1;
  margin-inline: auto;
  max-width: 18em;
  text-align: center;
  font-size: var(--gr-headline-size);
  font-weight: var(--gr-weight-light);
  line-height: var(--gr-headline-leading);
  letter-spacing: var(--gr-headline-tracking);
}
/* Landscape phones: the hero fits the short screen instead of running
   past it, and the symbol scales to the height. */
@media (orientation: landscape) and (max-height: 32rem) {
  .hero { min-height: 0; --rx: min(22vw, 25svh); }
  .hero-mark { top: var(--gr-space-5); }
  .hero-mark img { width: 8.5rem; }
  .hero-symbol { top: 47%; }
  .hero-line { bottom: var(--gr-space-5); max-width: 24em; }
}
@media (max-width: 40rem) {
  .hero { --rx: min(36vw, 22svh); }
  .hero-mark { left: 50%; transform: translateX(-50%); }
  .hero-symbol { top: 44%; }
  .hero-line { bottom: var(--gr-space-7); max-width: 12em; }
}

/* ---- 2. Wordmark convergence ----------------------------------------- */
.converge {
  padding-block: var(--gr-space-10) var(--gr-space-8);
  overflow: hidden;
  overflow: clip;
}
.converge-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--gr-space-7), 8vh, var(--gr-space-9));
}
/* Pinned (site.js adds .is-pinned unless motion is reduced): the section
   becomes a track one screen tall plus the hold, and the stage sticks to
   the screen across the hold. The words align as the stage arrives, stay
   aligned while it is pinned, and part as it leaves. overflow: clip on the
   track does not make it a scroll container, so sticky still works. */
.converge.is-pinned { padding-block: 0; height: calc(100svh + var(--converge-hold)); --converge-hold: 60svh; }
.converge.is-pinned .converge-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; overflow: clip; }
/* The stage's lower part is empty once the signal fades; the studio text
   moves up into it (it is transparent until the words part). */
.converge.is-pinned + .section { margin-top: -20svh; }

/* The merger: one ring spreads from the aligned wordmark and thins as it
   travels, like the Ripple motion. site.js adds the ring and replays it. */
.merger-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.merger-ring circle { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.merger-ring.is-playing circle { animation: gr-ring calc(var(--gr-duration-ripple) / 2) var(--gr-ease-ripple) both; }
@keyframes gr-ring {
  from { transform: scale(0.12); opacity: 0.9; stroke-width: 2; }
  to   { transform: scale(1); opacity: 0; stroke-width: 0.5; }
}
/* The studio follows the wave closely: as the two words leave, its text
   arrives in their place. site.js fades it in from the same scroll value
   that moves the wordmark; without JS it simply shows. */
.converge + .section { padding-top: 0; }
.converge + .section .wrap { will-change: opacity, transform; }
.converge-mark { width: min(88vw, 64rem); }
.converge-mark svg { width: 100%; height: auto; overflow: visible; }
.converge-mark path { fill: currentColor; }
.converge-mark .line { will-change: transform; }

/* The merger signal: hidden (armed) until the words align, then traced left
   to right once, and it stays while the scene is pinned. site.js fades it as
   the words part. Without JS, or with reduced motion, it simply shows. */
.signal { width: 100%; }
.signal svg { width: 100%; height: clamp(5rem, 11vw, 10rem); overflow: visible; }
.signal path { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.signal.is-armed svg { clip-path: inset(-25% 100% -25% 0); }
.signal.is-playing svg { animation: gr-trace var(--gr-duration-slow) var(--gr-ease-ripple) both; }
@keyframes gr-trace { from { clip-path: inset(-25% 100% -25% 0); } to { clip-path: inset(-25% 0 -25% 0); } }

/* ---- 3. Statement ---------------------------------------------------- */
.statement-text {
  font-size: var(--gr-headline-size);
  font-weight: var(--gr-weight-light);
  line-height: var(--gr-headline-leading);
  letter-spacing: var(--gr-headline-tracking);
  max-width: 24em;
}
.statement-text + .statement-text { margin-top: var(--gr-space-5); }

/* ---- 4. The model ---------------------------------------------------- */
.stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0 var(--gr-grid-gutter); }
@media (min-width: 40rem) { .stages { grid-template-columns: repeat(3, 1fr); } }
.stage { border-top: 1px solid var(--gr-rule); padding: var(--gr-space-4) 0 var(--gr-space-7); }
.stage svg { width: 100%; height: auto; margin: var(--gr-space-5) 0 var(--gr-space-5); color: var(--gr-fg); }
.stage svg .orbit { fill: none; stroke: currentColor; }
.stage svg .body { fill: currentColor; }
.stage svg .halo { stroke: none; }
/* The glow and the ring travel past the frame; let them fade, not clip. */
.stage svg {
  -webkit-mask-image: radial-gradient(farthest-side at 50% 52%, var(--gr-black) 70%, transparent);
  mask-image: radial-gradient(farthest-side at 50% 52%, var(--gr-black) 70%, transparent);
}
.stage h3 {
  margin: 0 0 var(--gr-space-2);
  font-size: var(--gr-headline-size); font-weight: var(--gr-headline-weight);
  line-height: var(--gr-headline-leading); letter-spacing: var(--gr-headline-tracking);
}
.stage p { color: var(--gr-fg-muted); max-width: 22em; }

/* ---- 5. Principles --------------------------------------------------- */
.principles { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0 var(--gr-grid-gutter); }
@media (min-width: 40rem) { .principles { grid-template-columns: 1fr 1fr; } }
.principle { border-top: 1px solid var(--gr-rule); padding: var(--gr-space-4) 0 var(--gr-space-8); }
.principle dt {
  font-size: var(--gr-headline-size); font-weight: var(--gr-headline-weight);
  line-height: var(--gr-headline-leading); letter-spacing: var(--gr-headline-tracking);
  margin-bottom: var(--gr-space-3);
}
.principle dd { margin: 0; color: var(--gr-fg-muted); max-width: 24em; }

/* ---- 6. Venture index ------------------------------------------------ */
.index { width: 100%; border-collapse: collapse; }
.index th {
  text-align: left; font-weight: var(--gr-caption-weight);
  font-size: var(--gr-caption-size); line-height: var(--gr-caption-leading); letter-spacing: var(--gr-caption-tracking);
  color: var(--gr-fg-muted);
  padding: 0 var(--gr-space-4) var(--gr-space-3) 0;
  border-bottom: 1px solid var(--gr-fg);
}
.index td { padding: var(--gr-space-5) var(--gr-space-4) var(--gr-space-5) 0; border-bottom: 1px solid var(--gr-rule); vertical-align: middle; }
.index th:last-child, .index td:last-child { padding-right: 0; text-align: right; }
.index .name { width: 24%; }
.index .desc { width: 40%; }
.index .name a {
  font-size: var(--gr-headline-size); font-weight: var(--gr-headline-weight);
  line-height: var(--gr-headline-leading); letter-spacing: var(--gr-headline-tracking);
  text-decoration: none; white-space: nowrap;
}
.index .name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.index .name .arrow { font-weight: var(--gr-weight-light); }
.index td.desc, .index td.meta { font-size: var(--gr-small-size); line-height: var(--gr-small-leading); letter-spacing: var(--gr-small-tracking); }
.index td.meta { white-space: nowrap; }
.status::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; margin-right: 0.5em; vertical-align: 0.1em; }
.status.is-building::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

@media (max-width: 48rem) {
  .index thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .index, .index tbody, .index tr, .index td { display: block; width: auto; }
  .index tr { display: grid; grid-template-columns: auto auto 1fr; gap: var(--gr-space-2) var(--gr-space-5); padding: var(--gr-space-5) 0; border-top: 1px solid var(--gr-fg); }
  .index td { padding: 0; border: 0; text-align: left !important; }
  .index td.name, .index td.desc { grid-column: 1 / -1; width: auto; }
  .index td.meta::before { content: attr(data-label); display: block; font-size: var(--gr-caption-size); font-weight: var(--gr-caption-weight); letter-spacing: var(--gr-caption-tracking); color: var(--gr-fg-muted); }
}

/* ---- 7. Footer -------------------------------------------------------
   Black, like the hero: the page opens and closes on the same field.
   A contact band, then a catalogue row (mark, studio, ventures), then a
   single base line. */
.footer {
  margin-top: var(--gr-section-gap);
  background: var(--gr-black);
  color: var(--gr-white);
  padding-block: var(--gr-space-10) var(--gr-space-6);
  font-size: var(--gr-small-size); line-height: var(--gr-small-leading); letter-spacing: var(--gr-small-tracking);
}
.footer p { margin: 0; }
.footer .label, .footer .muted { color: var(--gr-gray-400); }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gr-space-7) var(--gr-grid-gutter);
}
@media (min-width: 40rem) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-mark { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .footer-grid { grid-template-columns: repeat(12, 1fr); }
  .footer-mark { grid-column: 1 / span 4; }
  .footer-grid > :nth-child(2) { grid-column: 5 / span 2; }
  .footer-grid > :nth-child(3) { grid-column: 7 / span 2; }
  .footer-grid > :nth-child(4) { grid-column: 9 / span 4; }
}
.footer-email a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.footer-email a:hover { text-decoration-thickness: 2px; }
.footer-mark img { width: var(--gr-space-8); height: auto; margin-bottom: var(--gr-space-5); }
.footer-name { font-weight: var(--gr-weight-semibold); }
/* "Venture lab | Creative studio" in the label style, the bar as a divider;
   it can only break at the bar. Then, after a gap, "Est. 2026". */
.footer-tag { display: flex; flex-wrap: wrap; align-items: baseline; }
.footer-tag span { white-space: nowrap; }
.footer-tag .bar { margin-inline: 0.6em; color: var(--gr-gray-600); }
.footer-mark .footer-est { margin-top: var(--gr-space-6); }
.footer-col .label { margin-bottom: var(--gr-space-3); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li + li { margin-top: var(--gr-space-2); }
/* Touch: every footer link gets a full-size target (44px). */
/* Phones: less dead space around the wordmark and wave, the diagrams,
   and the footer. */
@media (max-width: 40rem) {
  .converge { padding-block: var(--gr-space-10) var(--gr-space-7); }
  .converge + .section { padding-top: var(--gr-space-5); }
  .stage svg { max-height: 13rem; margin-block: var(--gr-space-3); }
  .stage { padding-bottom: var(--gr-space-6); }
  .footer { padding-top: var(--gr-space-8); }
  .footer-base { margin-top: var(--gr-space-7); }
}
@media (pointer: coarse) {
  .footer-col a, .footer-email a, .footer-base a { display: inline-block; padding-block: var(--gr-space-3); }
  .footer-col li + li { margin-top: 0; }
  .footer-col .label, .footer-contact .label { margin-bottom: 0; }
}

.footer-base {
  margin-top: var(--gr-space-9);
  padding-top: var(--gr-space-5);
  border-top: 1px solid var(--gr-gray-600);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gr-space-2) var(--gr-space-6);
}
@media (max-width: 40rem) { .footer-base { flex-direction: column; } }

@media (prefers-reduced-motion: reduce) {
  .converge-mark .line, .converge + .section .wrap { transform: none !important; opacity: 1 !important; }
  .signal svg { animation: none !important; clip-path: none !important; opacity: 1 !important; }
  .merger-ring { display: none; }
}