/* ============================================================
   ORIGIN — the first viewport

   One composition in two halves. The visual half stacks a live
   Earth, the campaign badge and one orbit into a single square
   "orb"; the clock sits directly under it. The type half is set
   against the pair, so the balance survives every width.

   Everything here is scoped to .origin. The globe surface is
   painted by earth.js; the orb only frames it.
   ============================================================ */

.origin {
  /* The square the foreground stack is drawn in. */
  --orb: clamp(210px, 57vw, 288px);
  /* The planet: a square far wider than the frame, with its centre
     placed past the bottom-left corner so only a limb is on screen.
     Held high enough here that the limb is part of the first screen
     rather than a sliver under the fold. */
  --limb: 250vw;
  --limb-x: 34vw;     /* centre, from the left edge  */
  --limb-y: -44vw;    /* centre, from the bottom edge (negative = below) */
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--header-h) 0 0;
  /* Not flat: a touch of lift toward the top left, where the sky is
     furthest from the planet, so the frame has depth without a wash. */
  background: radial-gradient(120% 90% at 12% 0%, var(--space-lift), var(--space) 58%);
  color: #fff;
  overflow: clip;
}

/* ---------- Deep field ----------
   A field, not a graphic: one low nebula wash and a sparse star
   layer that trajectory.js parallaxes with the scroll. */
.origin-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; contain: paint; }
.sky-glow {
  position: absolute; inset: -20% -10% auto -30%; height: 120%;
  /* Faint galactic haze. On the old navy these had to be strong to
     show at all; against near black the same values read as a blue
     wash over the whole frame, so they are pulled right back. */
  background:
    radial-gradient(58% 52% at 22% 34%, #12409426, transparent 70%),
    radial-gradient(42% 44% at 78% 8%, #2e96f512, transparent 72%);
}
.sky-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-stars circle { fill: #dce8fb; opacity: .55; }
.sky-stars circle:nth-child(odd) { opacity: .8; }
.sky-streak { stroke: #fff; stroke-width: 1.4; stroke-linecap: round; opacity: 0; }
/* The moon is a body, not a bright star, so it is taken off the star rule
   above — matched on specificity, which is why the element is named. */
.sky-stars circle.body-moon { fill: #b9c8de; opacity: .42; }
.sky-stars circle.body-crater { fill: #8fa3c0; opacity: .5; }
.scene-layer { will-change: transform; }

.origin-head, .origin-stage, .origin-foot { position: relative; z-index: 1; }

/* ---------- Mission line ---------- */
.origin-head { flex: 0 0 auto; }
.mission-line {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; padding-block: 14px; font-size: 10px;
  border-bottom: 1px solid var(--rule);
}
.mission-status { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .04em; }
.mission-status::before {
  content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 9px #eafe0796;
}
.mission-line .coordinates { display: none; }
.mission-line > .mono { white-space: nowrap; }

/* ============================================================
   THE STAGE
   Mobile first: the type block dissolves into the stage grid so
   the badge can sit between the headline and the copy.
   ============================================================ */
.origin-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 4vw, 26px);
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: clamp(22px, 6vw, 34px) var(--gutter) clamp(26px, 7vw, 38px);
  align-items: center;
}
.origin-type { display: contents; }
.origin-type .eyebrow {
  grid-row: 1; margin: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sky-blue);
}
html[lang="ar"] .origin-type .eyebrow { letter-spacing: 0; }
/* The eyebrow sits inside the H1 so the heading carries the event's name
   as people search for it. It keeps the look and the spacing it had as a
   separate line: its margin stands in for the gap it used to take. */
.origin-title .eyebrow { display: block; margin: 0 0 clamp(18px, 4vw, 26px); line-height: 1.5; }
.origin-title { grid-row: 1 / 3; margin: 0; }
.origin-visual { grid-row: 3; }
.frontier-description { grid-row: 4; margin: 0; }
.frontier-actions { grid-row: 5; margin: 0; }
.tminus { grid-row: 6; }

/* ---------- Headline ----------
   Each line steps further along the trajectory than the one above
   it, and each is masked so motion can lift it into place. */
.origin-title {
  font-size: clamp(38px, 10.5vw, 62px);
  line-height: 1.12; font-weight: 700; letter-spacing: -.01em;
  text-wrap: balance;
}
.origin-title .tl { display: block; overflow: hidden; padding-block: .14em; margin-block: -.09em; }
.origin-title .tl i { display: block; font-style: normal; }
.origin-title em { color: var(--sky-blue); }
html[lang="en"] .origin-title {
  font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.02; font-size: clamp(28px, 7.6vw, 46px);
}
html[lang="ar"] .origin-title { line-height: 1.2; }

.frontier-description {
  font-size: 15px; line-height: 1.85; max-width: 46ch; color: #d5deee;
  text-wrap: pretty;
}
html[lang="en"] .frontier-description { line-height: 1.62; }

/* ============================================================
   CALLS TO ACTION
   Cut corners rather than a rounded pill: the shape belongs to
   the instrument panels the rest of the page is set in. The
   primary carries a single sweep of light on hover.
   ============================================================ */
.frontier-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn-mission {
  --notch: 11px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 16px;
  min-height: 56px; padding-inline: 26px;
  border-radius: 0;
  clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
  font-weight: 700; letter-spacing: .01em;
  transition: background .25s, color .25s, translate .25s cubic-bezier(.2,.7,.2,1);
}
.btn-mission:hover, .btn-mission:focus-visible { translate: 0 -2px; box-shadow: none; }
.btn-mission .btn-label { position: relative; z-index: 1; }

.frontier-actions .btn-primary { background: var(--neon-yellow); color: var(--deep-blue); }
.frontier-actions .btn-primary:hover { background: #f6ff7a; }
/* One pass of light across the field, on hover only. */
.frontier-actions .btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(105deg, transparent 38%, #ffffffc4 50%, transparent 62%);
  translate: -120% 0; transition: translate .7s cubic-bezier(.3,.7,.3,1);
}
.frontier-actions .btn-primary:hover::after,
.frontier-actions .btn-primary:focus-visible::after { translate: 120% 0; }

.frontier-actions .btn-ghost {
  background: #ffffff0a; color: #fff;
  box-shadow: inset 0 0 0 1px #ffffff40;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.frontier-actions .btn-ghost:hover, .frontier-actions .btn-ghost:focus-visible {
  background: #ffffff16; box-shadow: inset 0 0 0 1px var(--sky-blue); color: #fff;
}
.btn-chevron { font-size: 17px; transition: translate .3s cubic-bezier(.2,.7,.2,1); }
.btn-ghost:hover .btn-chevron, .btn-ghost:focus-visible .btn-chevron { translate: 0 3px; }

/* On a phone the two actions share one row rather than stacking: at their
   natural widths they overflow by a few pixels and wrap, which reads as a
   full-width primary with a stray second button under it. They split the
   row instead, and the longer English labels wrap inside their own button
   rather than pushing the pair apart. */
@media (max-width: 639px) {
  .frontier-actions { flex-wrap: nowrap; gap: 10px; align-items: stretch; }
  .frontier-actions .btn-mission {
    flex: 1 1 0; min-width: 0;
    justify-content: center; text-align: center;
    padding-inline: 14px; gap: 10px;
    font-size: 15px;
  }
  /* .btn sets nowrap, which is right for a button sized to its own text and
     wrong for one sharing a fixed row: the English labels would spill past
     the edges instead of taking a second line. */
  .frontier-actions .btn-mission .btn-label { white-space: normal; min-width: 0; }
  .frontier-actions .btn-mission .rocket { width: 30px; height: 30px; }
  .frontier-actions .btn-mission .rocket svg { width: 17px; height: 17px; }
  html[lang="en"] .frontier-actions .btn-mission { font-size: 14px; line-height: 1.25; }
}

/* ============================================================
   THE COMPOSITION — limb, badge, trajectory

   Three objects, each owning one job.

   .earth-limb is the environment. It is a square far larger than
   the frame, hung past the bottom-left corner, and earth.js
   paints the sphere inscribed in it — so what reaches the screen
   is the upper-right quarter of a planet the camera is close to,
   and the curvature of the limb is what draws the composition.

   .origin-visual is the foreground: the campaign artwork at full
   size with one trajectory threaded behind and back out of it.
   It sits in the stage grid, so the type half is measured
   against it rather than against the planet.
   ============================================================ */

/* ---------- The limb ----------
   Sized off the viewport height so the arc keeps its shape when
   the window is wide; --limb-x / --limb-y place the sphere's
   centre relative to the bottom-left corner, past it on both
   axes so no full circle is ever visible. */
.earth-limb {
  position: absolute;
  z-index: 0;
  width: var(--limb); height: var(--limb);
  left: calc(var(--limb-x) - var(--limb) / 2);
  bottom: calc(var(--limb-y) - var(--limb) / 2);
  pointer-events: none;
}
.earth-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1s ease;
}
.earth-limb.ready .earth-canvas { opacity: 1; }

/* Scattered light just outside the surface — a rim, not a halo.
   The stops sit hard against the silhouette so it reads as
   atmosphere on the limb rather than a glow behind the object. */
.orb-atmo {
  position: absolute; inset: -1.5%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side,
    transparent 0 96.5%, #2e96f533 98.2%, #8fd0ff33 99.3%, transparent 100%);
}

/* The launch site, drawn by earth.js in the same square. */
.earth-fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* The pin has to hold the eye on its own: the countdown sits close to it,
   and the name beside it can be moved away. */
.pad-halo { fill: none; stroke: var(--neon-yellow); stroke-width: .16; opacity: .75; }
.pad-mark { fill: var(--neon-yellow); stroke: #050a18; stroke-width: .12; paint-order: stroke; }
.pad-label {
  fill: #fff; font-family: var(--font-mono); font-size: .66px;
  /* A Latin place name, and start/end anchors have to mean left/right
     regardless of the page direction. */
  direction: ltr;
  letter-spacing: .18em; paint-order: stroke; stroke: #050a18e0; stroke-width: .3px;
}

/* A scrim under the type half only. The planet runs a long way
   across the frame and the copy has to stay the brightest thing
   on it; this darkens what is behind the words and nothing else. */
.origin::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, #050a18b8 0%, #050a1847 26%, transparent 52%);
}

/* ---------- The foreground stack ---------- */
.origin-visual {
  position: relative;
  margin: 0; justify-self: center;
  width: 100%; max-width: var(--orb);
}
/* The square is the stack itself, so the caption can sit under it. */
.orb-stage { position: relative; width: 100%; aspect-ratio: 1; }

/* ---------- The campaign artwork ----------
   Used exactly as supplied — scaled and seated, never redrawn.

   The mark is drawn for a light ground: the wordmark arcs outside
   the helmet circle and the Space Apps lockup sits in the corner
   below it, both in navy. So the white disc it is given has to be
   wide enough to hold the whole square, not just the emblem —
   the artwork's furthest ink is 1.362 of its own half-width, so
   the padding below seats every part of it on white rather than
   dropping the wordmark and the lockup onto the planet. */
/* Sized by inset rather than width + aspect-ratio: an absolutely
   positioned box taking its height from aspect-ratio, inside a parent
   whose own height also comes from aspect-ratio, is a chain Safari
   resolves differently from Chromium — it stretched the disc into an
   ellipse on iOS. Insetting 3% on every side gives the same 94% square
   off the stage, on both axes, with no ratio dependency at all. */
.orb-badge {
  position: absolute; z-index: 3;
  inset: 3%;
  border-radius: 50%; background: #fff; padding: 14%;
  box-shadow:
    0 0 0 1px #ffffff2e,
    0 40px 90px -30px #04102ee6,
    0 0 120px -40px #2e96f5;
}
/* The artwork is square and its ink runs to the corners, so the disc
   is a ground for it and never a crop of it. */
.orb-badge { overflow: visible; }
.orb-badge picture { display: block; height: 100%; }
.orb-badge img { width: 100%; height: 100%; object-fit: contain; }
.badge-ring {
  position: absolute; inset: -4.5%; border-radius: 50%;
  border: 1px solid #ffffff26; pointer-events: none;
}

/* ---------- The trajectory ----------
   One route, not a field of orbits. The whole group is masked
   with a soft hole over the artwork, which is what carries the
   line behind the mark and back out the far side; the ghost is
   the route, the live stroke is the distance flown. */
/* Two copies of one route, one either side of the artwork in z. */
.orb-trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orb-trail-far { z-index: 2; }
.orb-trail-near { z-index: 4; }

/* The whole route, held quiet: it is the path, not the event on it. */
.orbit-ring { fill: none; stroke: #ffffff2b; stroke-width: .3; }

/* The comet is one dash travelling a closed path. Its gap is the rest of
   the path, so the pattern tiles the loop exactly once and the offset can
   run for ever without a seam. Two strokes rather than a gradient: a
   linear ramp cannot follow a curve, but a long soft tail under a short
   bright one falls off the way an exhaust does. */
.orbit-comet {
  fill: none; stroke: #5bb4ff; stroke-width: .95; stroke-linecap: round;
  stroke-dasharray: .26 .74; stroke-dashoffset: -.12; opacity: .55;
}
.orbit-comet-hot {
  fill: none; stroke: #eaf6ff; stroke-width: .42; stroke-linecap: round;
  stroke-dasharray: .105 .895; stroke-dashoffset: -.275;
}

/* The near half is the only one that ever crosses the artwork, and the
   artwork's ground is white — where a pale route and a white vehicle
   both disappear. A dark halo under this layer reads against the white
   and is lost in the sky either side of it, so one rule covers the
   route, the comet and the vehicle without giving any of them a second
   colour to maintain. */
.orb-trail-near .orbit-tilt {
  filter: drop-shadow(0 0 .45px #08183a) drop-shadow(0 .25px 1px #08183a8c);
}

/* ---------- The vehicle ----------
   Drawn inside the route's own SVG, in the same 100-unit space, and
   seated by the route's point and tangent — so it is on the orbit by
   construction and stays there at every size. The comet is its
   exhaust, so it carries no plume of its own. */
/* A hairline edge so the vehicle keeps its silhouette over the white
   holding shape as well as over the sky. */
.orb-craft { filter: drop-shadow(0 .35px 1.1px #04102e73); stroke: #24384f; stroke-width: .2; }
.craft-nose { fill: #fff; }
.craft-body { fill: url(#craftShade); }
.craft-bell { fill: url(#craftBell); }
.craft-fin { fill: #1d6fc0; }
.craft-accent { fill: var(--neon-yellow); }
/* The join between the crew section and the tank: without it the two
   white shapes read as one blob at this size. */
.craft-seam { stroke: #91a7c2; stroke-width: .13; }
.craft-port { fill: #123a63; stroke: #ffffffc4; stroke-width: .17; }

/* ---------- Caption ---------- */
/* ---------- Caption ----------
   The mark sets the campaign name in type at the centre of the frame, so
   a line repeating it underneath was the same words twice. It is kept as
   the figure's caption for assistive technology and taken out of the
   picture rather than deleted. */
.origin-caption {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ============================================================
   T-MINUS — the clock under the visual
   Four readings in cut cells, a status cluster and a segmented
   meter. --launch is the fraction of the final year already
   elapsed; script.js writes it every tick.
   ============================================================ */
.tminus {
  --launch: 0%;
  width: 100%; max-width: 420px; justify-self: center;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.tminus-head {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #cfdaee;
}
html[lang="ar"] .tminus-head { letter-spacing: 0; text-transform: none; }

.tminus-cells {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px; width: 100%;
}
.tm-cell {
  --notch: 9px;
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px 7px;
  background: linear-gradient(#ffffff17, #ffffff07), #0a1330bf;
  box-shadow: inset 0 0 0 1px #ffffff2b;
  clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
}
/* A lit edge along the top of each cell reads as a powered readout. */
.tm-cell::before {
  content: ""; position: absolute; inset-inline: var(--notch) 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #2e96f5, transparent);
}
.tm-cell b {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 8vw, 34px); font-weight: 500; line-height: 1.05;
  letter-spacing: -.02em; color: #fff;
}
.tm-cell small {
  font-family: var(--font); font-size: 8px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim);
}
html[lang="ar"] .tm-cell small { letter-spacing: 0; }
/* A beat on the one cell that changes every tick. It never reaches
   zero: a figure that blanks for a fraction of every second reads as a
   glitch, not as a clock. */
.js-motion [data-cd="secs"].tick { animation: cd-tick .3s cubic-bezier(.2,.8,.3,1); }
@keyframes cd-tick {
  0%   { transform: translateY(-16%); opacity: .5; }
  100% { transform: none; opacity: 1; }
}

.tminus-bar { display: flex; align-items: center; gap: 9px; width: 100%; }
.tminus-lights { display: inline-flex; gap: 4px; flex-shrink: 0; }
.tminus-lights i { width: 5px; height: 5px; border-radius: 50%; background: #ffffff30; }
.tminus-lights i:last-child { background: var(--neon-yellow); box-shadow: 0 0 7px #eafe0790; }
.js-motion .tminus-lights i:last-child { animation: tm-blink 2.4s steps(1, end) infinite; }
@keyframes tm-blink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .25; } }
.tminus-meter {
  position: relative; flex: 1 1 auto; height: 7px; min-width: 70px;
  background: repeating-linear-gradient(to right, #ffffff1f 0 2px, transparent 2px 7px);
}
.tminus-fill {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--launch);
  background: repeating-linear-gradient(to right, var(--sky-blue) 0 2px, transparent 2px 7px);
  box-shadow: 0 0 10px #2e96f56b;
  transition: width 1.2s cubic-bezier(.2, .7, .2, 1);
}
.tminus-stamp { flex-shrink: 0; font-size: 9px; letter-spacing: .1em; color: var(--dim); }

/* ============================================================
   THE FOOT — the three facts under the composition
   ============================================================ */
/* Outside .origin, so it does not inherit that section's white — and the
   band under it is dark. The labels carry their own muted colour; without
   this the values fell back to the page ink and disappeared. */
.origin-foot { flex: 0 0 auto; max-width: none; width: 100%; padding-inline: 0; color: #fff; }
.origin-foot .event-strip {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--rule);
}
.event-detail { padding-block: 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.event-detail + .event-detail { border-top: 1px solid var(--rule); }
.event-detail small {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
html[lang="ar"] .event-detail small { letter-spacing: 0; text-transform: none; }
.event-detail strong { font-size: 14px; font-weight: 500; line-height: 1.5; }

/* ============================================================
   TABLET — the composition opens up but stays stacked
   ============================================================ */
@media (min-width: 640px) {
  .origin {
    --orb: clamp(286px, 39vw, 344px);
    /* Still a corner, not a band across the foot of the frame: the
       centre stays left of the middle as it does on the desktop. */
    --limb: 208vw; --limb-x: 21vw; --limb-y: -60vw;
  }
  .mission-line .coordinates { display: inline; }
  .origin-stage { gap: 24px; padding-block: 34px 40px; }
  .origin-title { font-size: clamp(48px, 6.6vw, 66px); }
  html[lang="en"] .origin-title { font-size: clamp(36px, 5vw, 50px); }
  .frontier-description { font-size: 16px; }
  .tminus { max-width: 460px; }
  .tm-cell { padding: 11px 6px 8px; }
  .tm-cell b { font-size: 38px; }
  .tm-cell small { font-size: 9px; }
  .origin-foot .event-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .event-detail { padding-block: 18px; }
  .event-detail + .event-detail {
    border-top: 0; border-inline-start: 1px solid var(--rule); padding-inline-start: 20px;
  }
}

/* ============================================================
   DESKTOP — two halves
   The stage is laid out left to right whatever the page
   direction, so the visual keeps the left and the type the
   right; the type column alone is handed its direction back.
   ============================================================ */
@media (min-width: 1000px) {
  .origin {
    --orb: min(35vw, 468px);
    /* Off the height, so the arc keeps its shape as the window widens. */
    --limb: 236vh; --limb-x: 9vw; --limb-y: -66vh;
    min-height: calc(100svh - var(--header-h));
  }
  .origin-stage {
    direction: ltr;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: clamp(16px, 2.2vw, 30px) clamp(36px, 5.5vw, 92px);
    align-content: center; flex: 1 1 auto;
    padding-block: clamp(20px, 2.6vw, 40px);
  }
  /* The type block becomes a column again, and takes both rows so it
     centres against the visual and the clock together. */
  .origin-type {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: clamp(14px, 1.8vh, 22px);
    grid-area: 1 / 2 / 3 / 3; align-self: center; direction: rtl;
  }
  html[lang="en"] .origin-type { direction: ltr; }
  .origin-visual { grid-area: 1 / 1; justify-self: center; align-self: end; }
  .tminus { grid-area: 2 / 1; }

  .origin-title { font-size: clamp(52px, 5vw, 84px); }
  html[lang="en"] .origin-title { font-size: clamp(38px, 3.5vw, 60px); }
  .frontier-description { max-width: 42ch; }
  .frontier-actions { gap: 14px; }
  .btn-mission { --notch: 13px; }
  .tminus { max-width: var(--orb); }
  .tm-cell b { font-size: clamp(30px, 2.6vw, 42px); }
}

@media (min-width: 1440px) {
  .origin { --orb: min(32vw, 508px); --limb: 248vh; --limb-x: 8vw; --limb-y: -70vh; }
  .origin-title { font-size: clamp(64px, 4.6vw, 92px); }
  html[lang="en"] .origin-title { font-size: clamp(46px, 3.3vw, 66px); }
}

/* A laptop with 760px of height has to fit the same three parts. */
@media (min-width: 1000px) and (max-height: 820px) {
  .origin { --orb: min(30vw, 410px); --limb: 224vh; --limb-x: 8vw; --limb-y: -62vh; }
  .origin-stage { padding-block: 20px; gap: 16px clamp(32px, 4.5vw, 72px); }
  .origin-title { font-size: min(4.4vw, 7vh); }
  html[lang="en"] .origin-title { font-size: min(3.2vw, 5.6vh); }
  .frontier-description { font-size: 15px; }
  .tm-cell b { font-size: clamp(26px, 3.4vh, 34px); }
}

/* ============================================================
   MOTION OFF — the finished composition, held still
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .tminus-lights i:last-child, [data-cd="secs"].tick { animation: none; }
  .tminus-fill { transition: none; }
  .scene-layer { transform: none !important; will-change: auto; }
}

@media (min-width: 1000px) {
  /* Desktop stacks the type block as a flex column; this is that column's gap. */
  .origin-title .eyebrow { margin-bottom: clamp(14px, 1.8vh, 22px); }
}