/* 60 Countdown. A launch sequencer. A vertical ladder of T minus times runs
   down the page, each capability is a sequence event pegged to the rail, and a
   status column calls GO or STANDBY. Black, white and a hot go-green.

   The capabilities are five full-width sequence rows stacked down the page. At
   rest a row is a compact strip: T minus time, event title, status lamp. Hover
   or keyboard focus arms the row and the drawer under the title opens on a
   grid-template-rows transition, revealing the description and the event
   diagram. Because the drawer is a grid track and not an overlay, opening a row
   pushes the rows below it down and nothing is ever covered.

   No script. The open state is the default: if a reader has asked for reduced
   motion, or the viewport is narrow, every drawer renders open and the whole
   sequence reads as a plain document. */

:root {
  --bg: #000000;
  --surface: #0b0d0b;
  --surface-2: #141814;
  --ink: #ffffff;
  --ink-soft: #8a938c;
  --ink-body: #d3d8d4;
  --brand: #00e05a;
  --on-brand: #001b0b;
  --border: #232823;
  --rule: #00e05a;
  --rule-2: #2f362f;
  --ph-ink: #ffd479; --ph-bg: #1d1707; --ph-border: #8a6f24;
  --fig-thin: #4a534b; --fig-traj: #00e05a; --fig-stroke: #ffffff;
  --fig-fill: #000000; --fig-axis: #8a938c; --fig-label: #8a938c;
}

html { scroll-behavior: smooth; }

body { margin: 0; background: var(--bg); color: var(--ink-body);
  font: 15.5px/1.65 Helvetica, Arial, sans-serif; }

.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: baseline;
  gap: 20px; padding: 13px 5vw; background: rgba(0, 0, 0, 0.92);
  border-bottom: 1px solid var(--border); }
.mark { font-size: 12.5px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink); text-decoration: none; }
.mark span { color: var(--ink-soft); }
/* auto margin on the left, so the nav is pushed to the far right of the bar */
.bar nav { margin-left: auto; }
.bar nav a { margin-left: 20px; font-size: 12.5px; color: var(--ink);
  text-decoration: none; }
.bar nav a:hover, .bar nav a:focus-visible { color: var(--brand); }

.hero { max-width: 1100px; margin: 0 auto; padding: 11vh 5vw 6vh; }
.eyebrow { margin: 0 0 16px; font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--brand); }
.hero h1 { margin: 0 0 16px; color: var(--ink); font-size: clamp(32px, 5.2vw, 60px);
  line-height: 1.04; letter-spacing: -0.025em; max-width: 15em; }
.sub { margin: 0 0 36px; max-width: 30em; font-size: 18.5px; color: var(--ink-soft); }

.heads { display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap;
  padding-top: 22px; border-top: 2px solid var(--rule); }
.tbig { margin: 0; font: 700 clamp(24px, 3.6vw, 40px)/1 "Courier New", Courier, monospace;
  letter-spacing: 0.02em; color: var(--brand); }
.hint { margin: 0; font-size: 13px; color: var(--ink-soft); }

.sec { max-width: 1488px; margin: 0 auto; padding: 6vh 5vw; }
.sec.wide { max-width: 1488px; }
.sec h2 { margin: 0 0 20px; color: var(--ink); font-size: 12px;
  letter-spacing: 0.26em; text-transform: uppercase; }
.rung { margin: 0 0 8px; font: 12px/1 "Courier New", Courier, monospace;
  letter-spacing: 0.14em; color: var(--brand); }

.prose { max-width: 52em; }
.prose p { margin: 0 0 14px; ; font-size:15px}

.plate { margin: 34px 0 0; padding: 20px; max-width: 1088px;
  background: var(--surface); border: 1px solid var(--border); }
figcaption { margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); }

svg.fig { display: block; width: 100%; height: auto; }
svg .thin { stroke: var(--fig-thin); stroke-width: 1; }
svg .traj { stroke: var(--fig-traj); stroke-width: 1.5; }
svg .craft { fill: var(--fig-fill); stroke: var(--fig-stroke); stroke-width: 1.5; }
svg .axis { stroke: var(--fig-axis); stroke-width: 1; fill: var(--fig-axis); }
svg .label text { fill: var(--fig-label); stroke: none;
  font: 11px Helvetica, Arial, sans-serif; }

/* The ladder. Four columns: the clock, the rail with its node lamp, the event
   itself, and the status call. The drawer takes a second row under the event
   and runs out to the right edge. */
.lhead, .evt { display: grid; grid-template-columns: 150px 30px 1fr 120px;
  gap: 0 11px; align-items: start; }
.lhead { padding-bottom: 10px; border-bottom: 1px solid var(--rule-2);
  font: 10.5px/1 "Courier New", Courier, monospace; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 4px; }
.lhead .lh-mid { grid-column: 3; }

.evt { position: relative; padding: 22px 0 24px;
  border-bottom: 1px solid var(--border); outline-offset: 4px; }
.evt:hover, .evt:focus-within { background: var(--surface); }
.evt:focus-visible { outline: 2px solid var(--brand); }

/* The rail, drawn at the centre line of the node column. */
.evt::before { content: ""; position: absolute; top: 0; bottom: 0; left: 186px;
  width: 2px; background: var(--rule-2); }
.evt:first-of-type::before { top: 22px; }
.evt:last-of-type::before { bottom: auto; height: 56px; }

.t { grid-column: 1; grid-row: 1; margin: 0; text-align: right;
  font: 11px/1.4 "Courier New", Courier, monospace; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft); }
.t b { font-size: 24px; line-height: 1.3; letter-spacing: 0.01em; color: var(--ink); }
.evt:hover .t b, .evt:focus-within .t b { color: var(--brand); }

.node { grid-column: 2; grid-row: 1; position: relative; z-index: 1;
  justify-self: center; width: 16px; height: 16px; margin-top: 14px;
  border: 2px solid var(--rule-2); border-radius: 50%; background: var(--bg); }
.evt:hover .node, .evt:focus-within .node {
  border-color: var(--brand); background: var(--brand); }

.body { grid-column: 3; grid-row: 1; }
.num { margin: 0 0 8px; font: 11px/1 "Courier New", Courier, monospace;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand); }
.body h3 { margin: 0; color: var(--ink); font-size: 21px; line-height: 1.25; }

.st { grid-column: 4; grid-row: 1; margin: 0; justify-self: end; align-self: start;
  padding: 7px 14px; font: 700 13.5px/1.3 "Courier New", Courier, monospace;
  letter-spacing: 0.18em; }
.st.go { color: var(--on-brand); background: var(--brand); }
.st.hold { color: var(--ink-soft); border: 1px solid var(--rule-2); }

/* The drawer. Open by default, so nothing here depends on animation being
   available. The inner wrapper carries the clip, which is what lets the outer
   track animate from 0fr to 1fr. */
.drawer { grid-column: 3 / -1; grid-row: 2; display: grid; grid-template-rows: 1fr; }
.drawer-in { min-height: 0; overflow: hidden; }

.desc { margin: 14px 0 0; max-width: 52em; font-size: 15.5px; line-height: 1.7;
  color: var(--ink-body); }
.evt .capfig { display: block; width:100%; max-width: none;
  margin: 18px 0 6px 0; }

.placeholder { display: inline-block; color: var(--ph-ink); background: var(--ph-bg);
  border: 1px dashed var(--ph-border); padding: 5px 10px; font-size: 14px; }

.pair { display: flex; gap: 16px; align-items: center; }
.pair > span:first-child { flex: 0 0 110px; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft); }

/* Contact. The booking button borrows the GO lamp's vocabulary, so the
   invitation reads as part of the sequence rather than a bolted-on widget.

   Link colour is declared before .cta and at lower specificity on purpose:
   a bare `.prose a` rule would otherwise paint the button's label brand green
   on a brand green ground and make it vanish. */
.prose a { color: var(--brand); }
.prose a.cta { color: var(--on-brand); }

.cta { display: inline-block; padding: 9px 18px; background: var(--brand);
  text-decoration: none; font: 700 13.5px/1.3 "Courier New", Courier, monospace;
  letter-spacing: 0.18em; text-transform: uppercase; }
.prose a.cta:hover, .prose a.cta:focus-visible { background: var(--ink);
  color: var(--bg); }

.formhead { margin: 38px 0 16px; color: var(--ink); font-size: 12px;
  letter-spacing: 0.26em; text-transform: uppercase; }

.reach { max-width: 34em; }
.fld { display: block; margin: 0 0 14px; }
.fld > span { display: block; margin-bottom: 6px; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.fld input, .fld textarea { width: 100%; box-sizing: border-box; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink);
  font: 15px/1.5 Helvetica, Arial, sans-serif; }
.fld textarea { resize: vertical; }
.fld input:focus, .fld textarea:focus { border-color: var(--brand);
  outline: 2px solid var(--brand); outline-offset: 1px; }

.send { margin-top: 4px; padding: 10px 22px; background: var(--brand);
  color: var(--on-brand); border: 0; cursor: pointer;
  font: 700 13.5px/1.3 "Courier New", Courier, monospace; letter-spacing: 0.18em;
  text-transform: uppercase; }
.send:hover, .send:focus-visible { background: var(--ink); color: var(--bg); }

/* Honeypot. Off-screen rather than display:none, since some bots skip fields
   that are not rendered. Kept out of the tab order and the accessibility tree
   by tabindex and aria-hidden on the markup. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; }

footer { display: flex; justify-content: space-between; max-width: 1100px;
  margin: 0 auto; padding: 18px 5vw 40px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--ink-soft); }
footer p { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* Closed at rest, opening on hover and equally on keyboard focus. */
  .drawer { grid-template-rows: 0fr;
    transition: grid-template-rows 0.26s cubic-bezier(0.32, 0, 0.24, 1); }
  .evt:hover .drawer, .evt:focus-within .drawer { grid-template-rows: 1fr; }

  .evt { transition: background 0.26s linear; }
  .t b { transition: color 0.26s linear; }
  .node { transition: background 0.26s linear, border-color 0.26s linear; }

  .node { animation: fp-arm 6s steps(1, end) infinite; }
  .evt:nth-of-type(2) .node { animation-delay: 0.5s; }
  .evt:nth-of-type(3) .node { animation-delay: 1s; }
  .evt:nth-of-type(4) .node { animation-delay: 1.5s; }
  .evt:nth-of-type(5) .node { animation-delay: 2s; }
  /* The armed row holds its lamp lit rather than blinking with the ladder. */
  .evt:hover .node, .evt:focus-within .node { animation: none; }

  .st.go, .tbig { animation: fp-lamp 2.4s ease-in-out infinite; }
}
@keyframes fp-arm {
  0%, 45% { border-color: var(--brand); background: var(--brand); }
  46%, 100% { border-color: var(--rule-2); background: var(--bg); }
}
@keyframes fp-lamp { 0%, 100% { opacity: 1; } 55% { opacity: 0.6; } }

/* Narrow screens: one column, every row open, no expansion at all. This block
   is last so it wins over the closed state above. */
@media (max-width: 700px) {
  .bar { flex-wrap: wrap; gap: 6px 16px; }
  /* the bar wraps here, so drop the auto margin that right-aligns the nav on
     one line; left-aligned under the wordmark reads better on a phone */
  .bar nav { margin-left: 0; }
  .bar nav a { margin: 0 14px 0 0; }
  .hero { padding: 7vh 20px 4vh; }
  .sec, footer { padding-left: 20px; padding-right: 20px; }
  .lhead { display: none; }
  .evt { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .evt::before { display: none; }
  .t, .node, .body, .st, .drawer { grid-column: 1; grid-row: auto; }
  .t { text-align: left; }
  .t b { display: inline; margin-left: 10px; }
  .t br { display: none; }
  .node { justify-self: start; margin: 0; }
  .st { justify-self: start; }
  .drawer, .evt:hover .drawer, .evt:focus-within .drawer { grid-template-rows: 1fr; }
  .evt .capfig { max-width: 100%; }
  .pair { display: block; }
  .pair > span:first-child { display: block; margin-bottom: 4px; }
  footer { flex-direction: column; gap: 4px; }
}