/* ==========================================================================
   Run up the Sky – site stylesheet
   One dark page built around the Sky logomark.
   Display type: Wonderglast (Ikiiko Type, licensed). Copy and controls: Instrument Sans (OFL).
   Plain CSS, sectioned for easy editing:
   1. Tokens  2. Fonts  3. Base  4. Layout  5. Hero and lockup  6. Collective
   7. Now and Next  8. Connect  9. Footer  10. Forms and buttons
   11. Utility pages  12. Motion and print
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------------ */
:root {
  color-scheme: dark;
  --bg: #0a0c0d;          /* near-black */
  --surface: #14181a;     /* secondary surface */
  --rule: #2a3033;
  --rule-strong: #3f484c;
  --text: #f4f6f5;        /* off-white, also the logomark colour */
  --text-2: #bbc2c0;      /* secondary text, 10.6:1 on bg */
  --text-3: #8f9997;      /* muted, 6.6:1 on bg */
  --accent: #00f3dc;      /* electric turquoise: Watch, links, small labels, focus */
  --accent-ink: #062422;  /* text on turquoise */
  --error: #ff8a80;
  --field-border: #667175; /* 3.9:1 on bg, for input boundaries */

  --display: "Wonderglast", "Wonderglast Fallback Optima", "Wonderglast Fallback Arial", "Optima", "Gill Sans", sans-serif;
  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --text-body: 1.125rem;
  --text-meta: 1rem;
  --text-small: 0.9375rem;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section: clamp(5rem, 11vw, 10rem);
  --block: clamp(2rem, 4.5vw, 3.5rem);
  --wrap: 82rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. Fonts (self-hosted) -------------------------------------------------------
   Wonderglast has one weight and covers Basic Latin and Latin-1 only. Characters
   outside that range (for example Romanian ș, ț, ă) fall back to the next family,
   so keep display headings within it or expect a mixed word. */
@font-face { font-family: "Wonderglast"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/wonderglast-latin.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122; }
/* Metric-matched system fallbacks so headings do not jump when Wonderglast arrives. */
@font-face { font-family: "Wonderglast Fallback Optima"; src: local("Optima Regular"), local("Optima"); size-adjust: 96.5%; ascent-override: 93.5%; descent-override: 12.4%; line-gap-override: 0%; }
@font-face { font-family: "Wonderglast Fallback Arial"; src: local("Arial"); size-adjust: 93.8%; ascent-override: 96.2%; descent-override: 12.8%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/instrument-sans-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/instrument-sans-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* 3. Base ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: var(--text-body); font-weight: 400; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-weight: 400; }
/* Display headings: Wonderglast, regular weight only, never synthesised bold or italic. */
.display, .lockup__lead, .now__title, .next__title, .connect h2, .page-head h1 { font-family: var(--display); font-weight: 400; font-style: normal; font-synthesis: none; font-kerning: normal; font-variant-ligatures: common-ligatures; letter-spacing: 0; line-height: 1; color: var(--text); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--accent-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-link { position: absolute; left: var(--gutter); top: -4rem; background: var(--accent); color: var(--accent-ink); padding: 0.5rem 0.875rem; font-weight: 600; z-index: 100; }
.skip-link:focus { top: 0.75rem; text-decoration: none; }
.label { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); line-height: 1.2; }
.meta { font-size: var(--text-meta); color: var(--text-3); }
.meta a { color: var(--text-2); }
.external::after { content: "\2197"; display: inline-block; margin-left: 0.3em; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 0.8em; transform: translateY(-0.08em); }

/* 4. Layout ----------------------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.grid { display: grid; grid-template-columns: 1fr; column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: var(--block); }
@media (min-width: 60em) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .col-1-7 { grid-column: 1 / 8; }
  .col-1-8 { grid-column: 1 / 9; }
  .col-4-13 { grid-column: 4 / 13; }
  .col-9-13 { grid-column: 9 / 13; }
}
.actions { display: flex; flex-wrap: wrap; gap: 0.875rem 1.75rem; align-items: center; }

/* 5. Hero and lockup ------------------------------------------------------------------
   A full-width header photograph with the identity laid over its lower left, at every screen size.
   The lockup is the words "Run up the" in Wonderglast above the Sky logomark (inline SVG from the
   supplied vector); the heading still reads "Run up the Sky" as text. The lead line is sized from the
   mark's width so that "Run up the" reads as wide as "Sk" whatever the size: its ink spans 63% of the
   mark, a touch short of the thin foot of the k's leg at 66.24%, which Thomas approved on a phone
   rendering (the lead's ink measures 4.549 em; 0.63 / 4.549 = 0.1385). A scrim darkens the
   picture under the text; if the image fails to load, the text stays readable on the dark ground. */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: min(100svh, 60rem); background: var(--bg); }
.hero__figure, .hero__text { grid-area: 1 / 1; }
.hero__figure { position: relative; overflow: hidden; background: var(--surface); }
.hero__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero__figure::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 12, 13, 0.97) 0%, rgba(10, 12, 13, 0.92) 28%, rgba(10, 12, 13, 0.62) 46%, rgba(10, 12, 13, 0.22) 60%, rgba(10, 12, 13, 0) 72%); }
.hero__text { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(1.5rem, 4vw, 2.25rem); width: 100%; max-width: var(--wrap); margin-inline: auto; padding: clamp(2rem, 5vw, 3rem) var(--gutter) clamp(2.25rem, 6vw, 4rem); }
/* On short phone screens the lockup shrinks with the height so it stays clear of the conductor's head. */
.lockup { --lockup-w: clamp(13rem, min(64vw, 32svh), 26rem); color: var(--text); }
.lockup__lead { display: block; font-size: calc(var(--lockup-w) * 0.1385); margin-left: -0.03em; }
.lockup__mark { display: block; width: var(--lockup-w); margin-top: calc(var(--lockup-w) * 0.045); }
.lockup__mark svg { width: 100%; height: auto; fill: currentColor; overflow: visible; }
.hero__line { font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); font-weight: 400; line-height: 1.4; color: var(--text); max-width: 26rem; margin: 0; text-wrap: balance; }
.hero__actions { margin-top: clamp(1.5rem, 2.2vw, 2rem); }
@media (min-width: 60em) {
  /* The picture keeps its 16:9 shape as the window widens, never taller than the window. */
  .hero { min-height: clamp(34rem, 56.25vw, min(100svh, 72rem)); }
  .hero__figure img { object-position: 50% 40%; }
  /* Scrim concentrated in the lower left, so the players' faces stay clear. */
  .hero__figure::after {
    background:
      radial-gradient(125% 108% at 0% 100%, rgba(10, 12, 13, 0.97) 0%, rgba(10, 12, 13, 0.93) 30%, rgba(10, 12, 13, 0.78) 46%, rgba(10, 12, 13, 0.42) 60%, rgba(10, 12, 13, 0.12) 72%, rgba(10, 12, 13, 0) 82%),
      linear-gradient(to top, rgba(10, 12, 13, 0.6) 0%, rgba(10, 12, 13, 0) 32%); }
  .hero__text { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
  .lockup { --lockup-w: clamp(15rem, 23vw, 24rem); }
}

/* 6. The Collective -------------------------------------------------------------------- */
.collective .label { margin-bottom: 1.75rem; }
.mission { font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--text); max-width: 46rem; margin: 0; text-wrap: pretty; }
.collective .actions { margin-top: 2rem; }

/* 7. Now and Next ------------------------------------------------------------------------ */
.now { background: var(--surface); }
.now__head { display: grid; grid-template-columns: 1fr; gap: 1.5rem 3rem; align-items: end; margin-bottom: var(--block); scroll-margin-top: clamp(2rem, 5vw, 4rem); }
@media (min-width: 60em) { .now__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.now__head .label { margin-bottom: 1.25rem; }
.now__title { font-size: clamp(2.75rem, 6.4vw, 5.75rem); line-height: 0.98; text-wrap: balance; }
.now__title .subtitle { display: block; font-family: var(--sans); font-weight: 400; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.4; letter-spacing: 0; color: var(--text-2); margin-top: 1rem; font-variant-ligatures: normal; }
.now__copy { color: var(--text-2); max-width: 32rem; font-weight: 400; line-height: 1.6; }
.now__copy .credit { color: var(--text-3); font-size: var(--text-meta); font-weight: 400; margin-top: 0.75rem; }
.media { position: relative; background: #000; aspect-ratio: 16 / 9; overflow: hidden; scroll-margin-top: 1.5rem; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media__play { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; color: var(--text); }
.media__play-mark { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.01em; line-height: 1; padding: 1.0625rem 1.625rem; border-radius: 2px; background: var(--accent); color: var(--accent-ink); transition: transform 200ms var(--ease-out); }
.media__play-mark::before { content: ""; width: 0; height: 0; border-left: 0.6rem solid currentColor; border-top: 0.38rem solid transparent; border-bottom: 0.38rem solid transparent; }
.media__play:hover .media__play-mark { transform: scale(1.04); }
.media__play:focus-visible { outline-offset: -4px; }
.media-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; margin-top: 1rem; }
.media-foot p { margin: 0; }
.media-foot .links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.next { padding-block: var(--block); border-bottom: 1px solid var(--rule); }
.next__inner { display: grid; grid-template-columns: 1fr; gap: 0.75rem 2rem; align-items: baseline; }
.next__inner p { margin: 0; }
@media (min-width: 48em) { .next__inner { grid-template-columns: 6rem 1fr auto; } }
.next__title { font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.05; }
.next__title a { color: var(--text); }
.next__status { display: block; font-family: var(--sans); font-weight: 400; font-size: var(--text-meta); line-height: 1.4; color: var(--text-3); margin-top: 0.5rem; font-variant-ligatures: normal; }
.next__action { justify-self: start; }
@media (min-width: 48em) { .next__action { justify-self: end; } }

/* 8. Connect ----------------------------------------------------------------------------- */
.connect { scroll-margin-top: 2rem; }
.connect h2 { font-size: clamp(3rem, 7.4vw, 6.5rem); line-height: 0.98; }
.connect__copy { color: var(--text-2); font-weight: 400; max-width: 34rem; margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.45; }
.connect__form { margin-top: 1.75rem; }
.connect__side h3 { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.75rem; }
.connect__side ul { list-style: none; }
.connect__side li + li { margin-top: 0.5rem; }
.connect__side a { font-size: 1.125rem; }
.connect__side + .connect__side { margin-top: 2rem; }
@media (min-width: 60em) { .connect__sides { padding-top: clamp(1rem, 2vw, 1.75rem); } }

/* 9. Footer ------------------------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--rule); padding-block: 2rem; font-size: var(--text-meta); color: var(--text-3); }
.site-footer .row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.site-footer p { margin: 0; display: flex; align-items: center; gap: 1rem; }
.site-footer .mark { width: 3rem; height: auto; opacity: 0.9; }
.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-footer a { color: var(--text-2); }
.site-footer a:hover { color: var(--text); }

/* 10. Forms and buttons -------------------------------------------------------------------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; font-family: var(--sans); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.01em; line-height: 1; text-decoration: none; padding: 1.0625rem 1.75rem; border-radius: 2px; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); transition: transform 200ms var(--ease-out); white-space: nowrap; }
.button:hover { text-decoration: none; transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button--watch::before { content: ""; width: 0; height: 0; border-left: 0.6rem solid currentColor; border-top: 0.38rem solid transparent; border-bottom: 0.38rem solid transparent; }
.text-link { font-weight: 600; }

.email-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; max-width: 32rem; }
.email-row label { flex: 1 1 14rem; display: grid; gap: 0.4rem; font-size: var(--text-small); color: var(--text-3); }
.email-row input { width: 100%; padding: 0.875rem 0.9375rem; font-size: 1.0625rem; background: var(--surface); border: 1px solid var(--field-border); border-radius: 2px; color: var(--text); }
.email-row input::placeholder { color: var(--text-3); }
.email-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.email-row input[aria-invalid="true"] { border-color: var(--error); }
.email-row .button { align-self: end; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 1rem; margin-top: 1.25rem; padding: 0.875rem 1rem; border-left: 2px solid var(--rule-strong); background: var(--surface); color: var(--text-2); max-width: 32rem; }
.form-status:empty { display: none; }
.form-status.is-error { border-left-color: var(--error); }
.form-status.is-success { border-left-color: var(--accent); color: var(--text); }
.form-note { font-size: var(--text-small); color: var(--text-3); margin-top: 0.875rem; }
.form-note a { color: var(--text-2); }

/* 11. Utility pages -------------------------------------------------------------------------- */
.page-head { padding-top: clamp(2rem, 4.5vw, 3.75rem); padding-bottom: var(--block); }
.page-head .home { display: inline-block; width: 5.5rem; color: var(--text); margin-bottom: clamp(3rem, 8vw, 5rem); }
.page-head .home svg { width: 100%; height: auto; fill: currentColor; overflow: visible; }
.page-head h1 { font-size: clamp(2.75rem, 6.4vw, 5rem); }
.prose { max-width: 40rem; color: var(--text-2); font-weight: 400; padding-bottom: var(--section); }
.prose > :first-child { margin-top: 0; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); margin-top: 2.75em; }
.prose ul { padding-left: 1.25em; }
.prose li + li { margin-top: 0.35em; }
.prose strong { color: var(--text); font-weight: 500; }
.simple-links { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem 2rem; font-size: 1.0625rem; font-weight: 400; margin-top: 2rem; padding-left: 0 !important; }
.simple-links li + li { margin-top: 0; }

/* 12. Motion and print ------------------------------------------------------------------------
   With JavaScript, the hero text waits briefly for Wonderglast so the identity does not flash in a
   fallback face. The script adds .fonts-ready when the font arrives, or after 0.9 s. If the script
   never runs, the animation below reveals the text after 1.5 s, so nothing can stay hidden. */
@keyframes reveal { to { opacity: 1; transform: none; } }
.js .hero__text > * { opacity: 0; transform: translateY(10px); animation: reveal 600ms var(--ease-out) 1500ms forwards; }
.js.fonts-ready .hero__text > * { opacity: 1; transform: none; animation: none; transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); }
.js.fonts-ready .hero__text > *:nth-child(2) { transition-delay: 140ms; }
.js .hero__figure img { opacity: 0; transform: scale(1.03); transition: opacity 900ms var(--ease-out), transform 1400ms var(--ease-out); }
.js .hero__figure img.is-loaded { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; }
  .js .hero__text > *, .js .hero__figure img, .js .reveal { opacity: 1; transform: none; animation: none; }
}
@media print {
  :root { --bg: #fff; --surface: #fff; --text: #000; --text-2: #222; --text-3: #444; --accent: #000; --accent-ink: #fff; --rule: #bbb; }
  html, body { background: #fff; color: #000; }
  .hero__figure, .media__play, .button, form, .site-footer ul { display: none !important; }
  .js .hero__text > * { opacity: 1; transform: none; animation: none; }
  a { color: inherit; text-decoration: none; }
}