/* Shared site chrome: tokens, topbar, header/nav, masthead, search, Next Launch, footer. Extracted from the per-page inline <style> blocks (source: pages/article.html). */
:root{
  --navy:#0b2342;--navy-700:#0f2c52;--navy-deep:#07182e;--red:#7d1d2c;--red-soft:#a23446;
  --bg:#eef1f4;--surface:#ffffff;--surface-2:#f7f9fb;--border:#e3e7ed;--border-2:#d4dae3;
  --ink:#131a24;--ink-soft:#515c6b;--ink-faint:#8b95a4;--info:#1f5c99;
  --shell:1180px;--rail:320px;--gap:40px;
  --go:#1b7a48;
  /* ---- shared sizes (identical in both themes): use these instead of new literal values ---- */
  --r-sm:8px;--r-md:10px;--r-lg:12px;   /* corner radius: buttons/inputs/thumbnails, cards/panels, large panels */
  --page-top:34px;                       /* space between the Next Launch strip and a page's title */
  --section-gap:40px;                    /* space above a section heading (LABEL ———) */
  --fs-page-title:clamp(1.9rem,1.4rem + 1.8vw,2.3rem);   /* every page's H1 except articles */
  /* ---- theme hooks: light values here, dark values in the block below. Components use these, never raw navy/red for text or active states. ---- */
  --navy-ink:var(--navy);            /* navy used as TEXT / hover borders (headings, links) */
  --red-ink:var(--red);              /* crimson used as TEXT */
  --red-soft-ink:var(--red-soft);
  --tagline:var(--red);              /* logo tagline: the red line under the SFN mark */
  --hairline:var(--border);          /* thin divider between the header and the Next Launch strip */
  --active-bg:var(--navy);           /* selected / hovered chips, pills, menu rows */
  --active-fg:#fff;
  --btn-bg:var(--navy);              /* primary buttons */
  --btn-bg-hover:var(--navy-700);
  --btn-fg:#fff;
  --bg-from:var(--bg);               /* page background runs left to right, from -> to (same colour in light) */
  --bg-to:var(--bg);
  --flap-top-a:#1a2440;--flap-top-b:#0e1428;--flap-bot-a:#0c1124;--flap-bot-b:#060a18;   /* countdown digit tiles */
  color-scheme:light;
}


/* Wide page: opt-in from the settings gear (Display > Page width), html[data-wide] set before first paint by header.php. Off = the 1180px shell
   everywhere. On big monitors the shell (header, top bar, content, footer all share --shell) grows in steps; layouts inside are fluid
   (main column + fixed rail), so the extra width goes to the main column. "Wide" is the gentle step, "Wider" the full one. */
@media (min-width:1600px){html[data-wide="wide"]{--shell:1360px}html[data-wide="wider"]{--shell:1440px}}
@media (min-width:1920px){html[data-wide="wide"]{--shell:1480px}html[data-wide="wider"]{--shell:1680px;--rail:340px}}
@media (min-width:2400px){html[data-wide="wide"]{--shell:1600px}html[data-wide="wider"]{--shell:1960px;--rail:360px}}

/* Wide page, header: the wordmark is sized to the nav (header-alt.js), so a bigger nav means a bigger wordmark, and the Next Launch + search block
   keeps a card's proportions at the right edge instead of stretching into a long strip with the countdown stranded at its far end. */
@media (min-width:1600px){
  html[data-wide] .site-nav a{font-size:16px}
  html[data-wide].hdr-alt .hdr-side{justify-self:end;width:100%;max-width:600px}
}
@media (min-width:1920px){
  html[data-wide="wider"] .site-nav a{font-size:18px}
  html[data-wide="wider"].hdr-alt .hdr-side{max-width:680px}
}

/* =====================================================================================================================
   DARK THEME: "console graphite". Turned on by <html data-theme="dark"> (set before first paint by header.php, from the reader's
   choice in the settings gear: Auto follows the device). To retune the whole look, edit ONLY the values in this block.
   Matte graphite panels, bright platinum text, hairline borders; crimson only as fills; a barely-there blue drift across the page.
   ===================================================================================================================== */
html[data-theme="dark"]{
  --bg-from:#10151d;                 /* page, left edge: graphite blue (keep this subtle) */
  --bg-to:#0c0d0f;                   /* page, right edge: graphite black */
  --bg:#0c0d0f;
  --surface:#141518;                 /* panels / cards */
  --surface-2:#1b1d21;               /* raised / hover */
  --border:#26282c;                  /* hairline */
  --border-2:#33363c;                /* stronger hairline */
  --ink:#f2f3f5;                     /* platinum white */
  --ink-soft:#b8bbc2;
  --ink-faint:#8e929b;
  --info:#dfe3ea;                    /* links + focus: bright platinum, no accent hue */
  --navy:#141518;                    /* brand strips (masthead, footer nav, hero, banners) become graphite panels */
  --navy-700:#1b1d21;
  --navy-deep:#070808;               /* darkest: topbar, footer base */
  --navy-ink:#f2f3f5;                /* headings that were navy */
  --red-ink:#f2f3f5;                 /* labels that were crimson text (crimson stays for fills; no pinks on dark) */
  --red-soft-ink:#b8bbc2;
  --tagline:var(--red);              /* same crimson as the rules and buttons (deliberately not lifted: it should match the red line under the logo). To brighten it for legibility, set e.g. #a23446 here. */
  --active-bg:#f2f3f5;               /* selected chips: solid platinum, dark text */
  --active-fg:#0c0d0f;
  --btn-bg:#7d1d2c;                  /* primary buttons: crimson */
  --btn-bg-hover:#94283a;
  --btn-fg:#fff;
  --go:#4fd08a;
  --flap-top-a:#26292e;--flap-top-b:#16181b;--flap-bot-a:#14161a;--flap-bot-b:#0a0b0d;
  --hairline:#dfe1e6;                /* platinum-white hairline under the masthead */
  --hairline-fade:linear-gradient(90deg,transparent 0,var(--hairline) 20%,var(--hairline) 80%,transparent 100%);   /* the same hairline, fading out at both ends */
  color-scheme:dark;
}
/* Dark: header and masthead sit on the page itself (no separate bar colour) and end in one platinum hairline; crimson is used for accent rules (section headings, sidebar titles). */
html[data-theme="dark"] .site-header{background:transparent;border-bottom-color:transparent}   /* keep the 1px border so the box is the same size as light */
html[data-theme="dark"] .site-topbar{background:transparent}   /* the page gradient runs unbroken from the very top */
html[data-theme="dark"] .masthead{border-bottom:3px solid transparent;background-color:transparent;background-image:var(--hairline-fade);background-repeat:no-repeat;background-position:0 calc(100% - 2px);background-size:100% 1px;background-origin:border-box;background-clip:border-box}   /* one platinum hairline closes the header block, fading out at both ends; crimson goes to the section rules */
html[data-theme="dark"] .section-rule{background:var(--red)}
/* Dark: navy panels (light: navy fill, white text) would be the same graphite as the page, so lift them a step and outline them. Inset outline = same size as light. Masthead/footer bands are left alone. */
html[data-theme="dark"] :is(.cta-card:not(.cta-shop):not(.cta-card--red),.support-card.is-navy,.lb-banner,.featured-video,.paywall){background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border-2)}
/* Dark, phones/tablets: the open menu is the page (same gradient) and its search row ends in the same fading hairline instead of the crimson bar. */
@media (max-width:980px){
html[data-theme="dark"] .site-nav{background-color:var(--bg);background-image:linear-gradient(90deg,var(--bg-from),var(--bg-to))}
html[data-theme="dark"] body.is-nav-open .nav-search-form{background-color:transparent;border-bottom:3px solid transparent;background-image:var(--hairline-fade);background-repeat:no-repeat;background-position:0 calc(100% - 2px);background-size:100% 1px;background-origin:border-box;background-clip:border-box}
}

*{box-sizing:border-box}
html{background:var(--bg-from)}
/* Home Screen web app (html.is-webapp, header.php): iOS paints the status bar area, and the soft fade below it, from the page's
   background colour. Light grey faded over the navy top bar, so in the app the background is the top bar's colour (the page's own grey
   is body's). Ordinary Safari tabs keep grey: there the same colour also tints the fade behind Safari's bottom toolbar. */
html.is-webapp{background:var(--navy-deep)}
html.is-webapp[data-theme="dark"]{background:#0c0d0f}   /* dark: iOS paints the status bar strip in this one colour (no gradient possible there); the page runs #10151d -> #0c0d0f left to right, so use its darkest end */
/* iOS draws a soft fade under the status bar over whatever sits at the top edge, unless that is a pinned (fixed/sticky), full-width,
   opaque element. So while the page is at the very top (html.at-top, header.php), the top bar is sticky and opaque: no fade over the
   date row. From the first scroll it is an ordinary bar again and scrolls away under the fade. At the top a sticky bar sits exactly
   where it would anyway, so nothing jumps. */
html.is-webapp .site-topbar{padding-top:env(safe-area-inset-top,0px)}
html.is-webapp.at-top .site-topbar{position:sticky;top:0;z-index:150}
html.is-webapp.at-top[data-theme="dark"] .site-topbar{background:linear-gradient(180deg,#0c0d0f,rgba(12,13,15,0)),linear-gradient(90deg,var(--bg-from),var(--bg-to)) var(--bg-from)}   /* dark: pinned it must be opaque; it starts in the status bar strip's colour and blends down into the page's slate gradient, so strip, bar and page read as one */
/* iOS 27 decides about its own status bar fade once, at load; with the bar pinned then, it never draws it, even after scrolling. So the
   app draws its own: a soft fade under the status bar that shows only once the page is scrolled (not .at-top). */
.webapp-fade{display:none}
/* Eased, not linear: it starts fading right at the edge and trails off over ~56px, like iOS's own (a straight 32px ramp read as artificial). */
html.is-webapp .webapp-fade{display:block;position:fixed;top:0;left:0;right:0;height:calc(env(safe-area-inset-top,0px) + 72px);z-index:160;pointer-events:none;
  background:linear-gradient(rgba(7,24,46,.97) 0%,rgba(7,24,46,.88) 12%,rgba(7,24,46,.7) 26%,rgba(7,24,46,.5) 42%,rgba(7,24,46,.3) 60%,rgba(7,24,46,.13) 80%,rgba(7,24,46,0) 100%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(#000 0%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.25) 70%,transparent 100%);
  mask-image:linear-gradient(#000 0%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.25) 70%,transparent 100%);opacity:1;transition:opacity .25s ease}
html.is-webapp[data-theme="dark"] .webapp-fade{background:linear-gradient(rgba(12,13,15,.97) 0%,rgba(12,13,15,.88) 12%,rgba(12,13,15,.7) 26%,rgba(12,13,15,.5) 42%,rgba(12,13,15,.3) 60%,rgba(12,13,15,.13) 80%,rgba(12,13,15,0) 100%)}
html.is-webapp.at-top .webapp-fade{opacity:0}
@media (prefers-reduced-motion:reduce){html.is-webapp .webapp-fade{transition:none}}
html,body{margin:0;color:var(--ink);font-family:"usual","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{padding:0;background:linear-gradient(90deg,var(--bg-from),var(--bg-to))}
a{color:var(--info);text-decoration:none}
a:hover{color:var(--red-ink)}
.headline{font-family:"Hanken Grotesk",sans-serif;font-weight:700}
.shell{width:min(calc(100% - 40px),var(--shell));margin:0 auto}
.site-topbar{background:var(--navy-deep);color:rgba(255,255,255,0.62);font-size:0.72rem;letter-spacing:0.06em}
/* viewport-fit=cover (header.php): the page may run under the status bar (Home Screen web app) and the notch (landscape). The insets are
   0 wherever nothing covers the page, so this only moves things on those screens: the bar's colour runs under the status bar while its
   contents start below it, and nothing sits under the notch. */
.site-topbar{padding-top:calc(env(safe-area-inset-top,0px) + min(env(safe-area-inset-top,0px),8px))}   /* + up to 8px, only when there is a status bar: iOS's soft fade reaches a little below it */
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.site-topbar-inner{width:min(calc(100% - 40px),var(--shell));margin:0 auto;height:34px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-topbar .date{text-transform:uppercase;letter-spacing:0.1em}
.topbar-now{display:inline-flex;align-items:center;gap:16px;white-space:nowrap;flex:0 0 auto}   /* the date and clock never wrap (they spilled out of the bar on iPad portrait) */
@media (max-width:980px){.topbar-links>a{display:none}}   /* tablet: About/Contact/Donate/Shop/Subscribe are in the menu (util-link), so the bar keeps date, clock, settings and social */
.topbar-clock{color:inherit;letter-spacing:0.1em;text-transform:uppercase;font-variant-numeric:tabular-nums;padding-left:16px;border-left:1px solid rgba(255,255,255,0.18)}
.topbar-settings{position:relative;display:inline-flex;align-items:center;gap:4px}
.topbar-gear{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:none;border-radius:50%;background:transparent;color:inherit;cursor:pointer;opacity:.8}
.topbar-gear[aria-expanded="true"]{opacity:1;color:#fff}
@media (hover:hover){.topbar-gear:hover{opacity:1;color:#fff}}
.topbar-gear:focus-visible{outline:2px solid #fff;outline-offset:2px}
.topbar-gear svg{width:15px;height:15px}
.sfn-settings-pop{position:absolute;top:calc(100% + 10px);left:0;z-index:120;width:300px;max-width:calc(100vw - 32px);padding:14px 16px 16px;background:var(--surface);color:var(--ink);border:1px solid var(--border-2);border-radius:11px;box-shadow:0 22px 46px -18px rgba(7,24,46,0.5);letter-spacing:normal;text-transform:none;white-space:normal;font-size:0.8rem}
.sfn-settings-pop{max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain}
.sfn-settings-pop[hidden]{display:none}
.ssp-title{font-family:"handel-gothic",sans-serif;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--navy-ink);margin-bottom:10px}
.ssp-row{display:block;margin-top:12px}
.ssp-label{display:block;font-weight:700;color:var(--navy-ink);margin-bottom:5px}
.ssp-group{margin:16px 0 -4px;padding-top:12px;border-top:1px solid var(--border);font-family:"handel-gothic",sans-serif;font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-faint)}
.ssp-title+.ssp-group{margin-top:4px;padding-top:0;border-top:0}
/* "Next Launch follows" is the one several-at-once list: the shared menu look (.sfn-menu.is-inline), rows are tick boxes */
.ssp-multi-list label{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:var(--r-sm);cursor:pointer;font-size:0.92rem;font-weight:700;color:var(--ink)}
.ssp-multi-list label:hover{background:var(--surface-2)}
.ssp-multi-list label:first-child{margin-bottom:7px;position:relative}
.ssp-multi-list label:first-child::after{content:"";position:absolute;left:6px;right:6px;bottom:-4px;height:1px;background:var(--border)}
.ssp-multi-list input{width:17px;height:17px;margin:0;accent-color:var(--active-bg)}
.ssp-hint{display:block;margin-top:5px;font-size:0.72rem;line-height:1.35;color:var(--ink-faint)}
/* =====================================================================================================================
   THE SITE'S DROPDOWN MENU (assets/js/menu.js). Every pick-from-a-list control uses these: time zone (gear + Launch Schedule),
   archive topics, Launch Schedule earlier years, contact topic, Next Launch follows. Each place only sets where its menu sits.
   ===================================================================================================================== */
.sfn-menu{position:absolute;left:0;top:calc(100% + 8px);z-index:60;width:290px;max-width:calc(100vw - 48px);box-sizing:border-box;padding:6px;background:var(--surface);border:1px solid var(--border-2);border-radius:11px;box-shadow:0 26px 54px -22px rgba(7,24,46,0.55);text-align:left;letter-spacing:normal;text-transform:none;white-space:normal;font-family:"Hanken Grotesk",sans-serif}
.sfn-menu[hidden]{display:none}
.sfn-menu.is-inline{position:static;width:auto;max-width:none;margin-top:6px;border-radius:var(--r-sm);box-shadow:none}
.sfn-menu-list{position:relative;max-height:316px;overflow-y:auto;overscroll-behavior:contain}
.sfn-menu.is-inline .sfn-menu-list{max-height:264px}
.sfn-menu-search{position:relative;margin:0 0 4px}
.sfn-menu-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-faint);pointer-events:none}
.sfn-menu-search input{display:block;width:100%;box-sizing:border-box;height:34px;margin:0;padding:0 10px 0 32px;border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);font:600 16px/normal "Hanken Grotesk",sans-serif;-webkit-appearance:none;appearance:none}   /* 16px: iOS doesn't zoom in on focus */
.sfn-menu-search input::placeholder{color:var(--ink-faint)}
.sfn-menu-search input:focus{outline:none;border-color:var(--navy-ink);background:var(--surface)}
.sfn-mh{font-family:"handel-gothic",sans-serif;font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint);padding:11px 10px 6px}
.sfn-mh:first-child{padding-top:5px}
.sfn-mdiv{height:1px;background:var(--border);margin:7px 6px}
.sfn-mo{display:flex;flex-direction:column;gap:2px;width:100%;box-sizing:border-box;margin:0;padding:8px 11px;border:none;border-radius:var(--r-sm);background:transparent;color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background .1s}
.sfn-mo:hover,.sfn-mo.is-active{background:var(--surface-2)}
.sfn-mo:focus-visible{outline:2px solid var(--info);outline-offset:-2px}
.sfn-mo-main{font-size:0.92rem;font-weight:700;line-height:1.3;color:var(--ink)}
.sfn-mo-site{color:var(--ink-faint);font-weight:600}
.sfn-mo-sub{margin-top:1px;font-size:0.74rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.sfn-mo[aria-selected="true"],.sfn-mo[aria-selected="true"]:hover{background:var(--active-bg)}
.sfn-mo[aria-selected="true"] .sfn-mo-main{color:var(--active-fg)}
.sfn-mo[aria-selected="true"] .sfn-mo-site{color:var(--active-fg);opacity:.65}
.sfn-mo[aria-selected="true"] .sfn-mo-sub{color:var(--active-fg);opacity:.75}
.sfn-mo[hidden],.sfn-mh[hidden],.sfn-mdiv[hidden],.sfn-menu-empty[hidden]{display:none}
.sfn-menu-empty{padding:12px 11px;font-size:0.85rem;color:var(--ink-soft)}
/* Field-style trigger (settings panel, forms): looks like an input, with a caret */
.sfn-select-wrap{position:relative}
.sfn-select{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:36px;box-sizing:border-box;margin:0;padding:0 10px;border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:0.88rem;font-weight:600;text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sfn-select::after{content:"";flex:0 0 auto;width:7px;height:7px;margin:-3px 4px 0 0;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .2s;color:var(--ink-faint)}
.sfn-select[aria-expanded="true"]{border-color:var(--navy-ink)}
.sfn-select[aria-expanded="true"]::after{transform:rotate(225deg);margin-top:3px}
.sfn-select:focus-visible{outline:2px solid var(--info);outline-offset:2px}
.sfn-select .sfn-select-text{overflow:hidden;text-overflow:ellipsis}
.sfn-select--field{height:auto;min-height:42px;padding:10px 12px;background:var(--surface-2);font-size:0.92rem;font-weight:400}   /* in a form: matches the text inputs beside it */
.sfn-select--field[aria-expanded="true"]{border-color:var(--info);background:var(--surface)}
.sfn-select-wrap .sfn-menu{width:100%;max-width:none}
.ssp-seg{display:inline-flex;border:1px solid var(--border-2);border-radius:var(--r-sm);overflow:hidden}
.ssp-seg button{height:32px;padding:0 16px;border:none;background:var(--surface);color:var(--ink);cursor:pointer;font-size:0.8rem}
.ssp-seg button+button{border-left:1px solid var(--border-2)}
.ssp-seg button[aria-pressed="true"]{background:var(--active-bg);color:var(--active-fg)}
.ssp-seg button:disabled{color:var(--ink-faint);cursor:not-allowed}
@media (max-width:640px){.site-topbar{position:relative}.topbar-settings{position:static}.sfn-settings-pop{left:16px;right:16px;top:calc(100% + 6px);width:auto;max-width:none}}
.topbar-links{display:flex;align-items:center;gap:20px}
.topbar-links a{color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:0.1em;font-size:0.7rem}
.topbar-links a:hover{color:#fff}
.topbar-social{display:flex;align-items:center;gap:12px}
.topbar-social a{display:inline-flex;color:rgba(255,255,255,0.6)}
.topbar-social a:hover{color:var(--red-soft-ink)}
.topbar-social svg{width:15px;height:15px}

.site-header{background:var(--surface);border-bottom:1px solid var(--border);position:relative}
.site-header-inner{width:min(calc(100% - 40px),var(--shell));margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:6px 0}
.logo-lockup{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;text-decoration:none;flex:0 0 auto}
.logo-fallback{display:flex;flex-direction:column;gap:1px}
.logo-fallback .wm{font-family:"handel-gothic",sans-serif;font-size:1.9rem;line-height:0.95;color:var(--navy-ink);letter-spacing:0.01em;text-transform:uppercase;white-space:nowrap}
/* line-height:1 here on purpose: the tagline's own font-size is tiny (clamp down to ~6.5px), so it inherits
   the page's normal (much taller) line-height by default, which reads as extra gap above the wordmark. */
.logo-fallback .tag{font-size:0.66rem;line-height:1;letter-spacing:0.26em;text-transform:uppercase;color:var(--tagline)}
/* the red rule sits above the tagline, the width of the wordmark */
.logo-fallback .tag{display:block;white-space:nowrap;border-top:2px solid var(--tagline);padding-top:0.4em;margin-top:-3px}
.site-nav{display:flex;align-items:center;gap:22px}
.site-nav-inner{display:contents}
.site-nav a{font-family:"handel-gothic",sans-serif;font-size:15px;letter-spacing:0.1em;text-transform:uppercase;color:var(--navy-ink);position:relative;padding:6px 0;white-space:nowrap}
.site-nav a.is-active{color:var(--red-ink)}
.site-nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--red)}
.site-nav .live-picker>a.is-current{color:var(--red-ink);box-shadow:0 2px 0 var(--red)}/* the caret owns this link's ::after, so its active underline is a shadow */
.site-nav a:hover{color:var(--red-ink)}
.site-nav a.has-caret::after{content:"";display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor}
.site-nav a.has-caret{display:inline-flex;align-items:center}.members-picker{position:relative}.members-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:190px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:0 22px 46px -18px rgba(7,24,46,0.55);padding:6px;display:none;flex-direction:column;gap:2px}.members-menu.is-open{display:flex}.members-menu a{display:block;padding:9px 12px;border-radius:var(--r-sm);font-family:"handel-gothic",sans-serif;font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--navy-ink);white-space:nowrap}.members-menu a:hover{background:var(--surface-2);color:var(--red-ink)}@media (max-width:980px){.members-picker{position:static;width:100%}.members-menu{position:static;box-shadow:none;border:none;border-radius:0;padding:0;min-width:0;background:var(--surface-2)}.members-menu a{padding:11px 20px 11px 48px;border-bottom:1px solid var(--border);font-size:14px;white-space:normal}}
.nav-search-form{display:none;position:relative}
.nav-toggle{display:none}
.nav-toggle svg[hidden]{display:none}
.nav-toggle-search{display:none}
.site-nav a.util-link{display:none}
@media (min-width:981px){.members-menu.is-flipped{left:auto;right:0}}   /* nav.js fitMenu: the Live menu at the end of the bar would spill off a narrow window */
@media (min-width:981px) and (max-width:1199px){.site-header-inner{gap:14px}.site-nav{gap:13px}.site-nav a{font-size:13px;letter-spacing:0.05em}}   /* iPad landscape / small laptops: the full-size menu ran ~140px past the edge and the whole page scrolled sideways */
@media (max-width:980px){
.site-nav{display:block;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 16px 28px -14px rgba(7,24,46,0.3);z-index:60;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .65s ease-out,visibility 0s linear .68s}
.site-nav-inner{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0 0 18px}
.site-nav-inner>*{opacity:0;transition:opacity .38s ease-in-out}
.site-nav-inner>*:nth-last-child(1){transition-delay:0s}
.site-nav-inner>*:nth-last-child(2){transition-delay:.03s}
.site-nav-inner>*:nth-last-child(3){transition-delay:.06s}
.site-nav-inner>*:nth-last-child(4){transition-delay:.09s}
.site-nav-inner>*:nth-last-child(5){transition-delay:.12s}
.site-nav-inner>*:nth-last-child(6){transition-delay:.15s}
.site-nav-inner>*:nth-last-child(7){transition-delay:.18s}
.site-nav-inner>*:nth-last-child(8){transition-delay:.21s}
.site-nav-inner>*:nth-last-child(9){transition-delay:.24s}
.site-nav-inner>*:nth-last-child(10){transition-delay:.27s}
.site-nav a{padding:13px 20px;border-bottom:1px solid var(--border);width:100%}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--surface);color:var(--navy-ink);cursor:pointer;flex:0 0 40px}
.nav-toggle svg{width:20px;height:20px}
body.is-nav-open .site-nav{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .4s ease-in,visibility 0s linear 0s}
body.is-nav-open .site-nav-inner>*{opacity:1}
body.is-nav-open .site-nav-inner>*:nth-child(1){transition-delay:0s}
body.is-nav-open .site-nav-inner>*:nth-child(2){transition-delay:.03s}
body.is-nav-open .site-nav-inner>*:nth-child(3){transition-delay:.06s}
body.is-nav-open .site-nav-inner>*:nth-child(4){transition-delay:.09s}
body.is-nav-open .site-nav-inner>*:nth-child(5){transition-delay:.12s}
body.is-nav-open .site-nav-inner>*:nth-child(6){transition-delay:.15s}
body.is-nav-open .site-nav-inner>*:nth-child(7){transition-delay:.18s}
body.is-nav-open .site-nav-inner>*:nth-child(8){transition-delay:.21s}
body.is-nav-open .site-nav-inner>*:nth-child(9){transition-delay:.24s}
body.is-nav-open .site-nav-inner>*:nth-child(10){transition-delay:.27s}
body.is-nav-open .site-nav a.util-link{display:block}
body.is-nav-open .nav-search-form{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:0 20px;height:48px;box-sizing:border-box;width:100%;background:var(--navy);border-bottom:3px solid var(--red)}
.nav-search-form .msr-field-wrap{position:relative;flex:1;display:flex}.nav-search-form input{width:100%;height:38px;padding:0 34px 0 14px;border:1px solid rgba(255,255,255,0.25);border-radius:var(--r-sm);background:rgba(255,255,255,0.1);color:#fff;font-size:16px}.nav-search-form .msr-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border:none;background:transparent;color:rgba(255,255,255,0.75);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.nav-search-form .msr-clear:hover{color:#fff}.nav-search-form .msr-clear svg{width:14px;height:14px}.nav-search-form .msr-clear[hidden]{display:none}
.nav-search-form input::placeholder{color:rgba(255,255,255,0.55)}
.nav-search-form input:focus{outline:none;border-color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.16)}
.nav-search-form button{width:38px;height:38px;flex:0 0 38px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.1);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.nav-search-form button:hover{background:rgba(255,255,255,0.22)}
.nav-search-form svg{width:16px;height:16px}
.nav-search-form .msr-panel{left:20px;right:20px}
}

.masthead{background:var(--navy);border-bottom:3px solid var(--red)}
.masthead-inner{width:min(calc(100% - 40px),var(--shell));margin:0 auto;padding:0;display:flex;align-items:stretch;justify-content:space-between;gap:24px;color:#fff}
/* ============ SITE FOOTER ============ */
.site-footer{margin-top:56px}
.footer-nav{background:var(--navy);border-top:3px solid var(--red)}
.footer-nav-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px;padding:18px 0}
.footer-nav a{font-family:"handel-gothic",sans-serif;font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;color:#fff;position:relative;white-space:nowrap}
.footer-nav a:hover{color:var(--red-soft-ink)}
.footer-nav a.has-caret{display:inline-flex;align-items:center}
.footer-nav a.has-caret::after{content:"";display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor}
.footer-bottom{background:var(--navy-deep);color:rgba(255,255,255,0.55)}
/* Copyright (with the site credit tucked under it, dimmer and smaller) on the left, legal links on the right. */
.footer-bottom-inner{padding:14px 0;font-size:0.78rem;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 16px}
.footer-credit{display:block;margin-top:3px;font-size:0.7rem;color:rgba(255,255,255,0.32)}
.footer-credit a{color:inherit}
.footer-credit a:hover{color:#fff}
.footer-legal{display:flex;align-items:center;justify-self:end;gap:14px}
.footer-legal a{color:inherit}
@media (max-width:620px){.footer-bottom-inner{grid-template-columns:1fr;justify-items:center;text-align:center}.footer-legal{justify-self:center}}
.footer-legal a:hover{color:#fff}
.back-to-top{position:fixed;right:24px;bottom:24px;width:44px;height:44px;border-radius:var(--r-sm);border:none;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 24px -10px rgba(7,24,46,0.5);opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .18s,transform .18s;z-index:80}
.back-to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-to-top:hover{background:var(--red-soft)}
.back-to-top.is-left{right:auto;left:24px}
.back-to-top{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.back-to-top.is-visible.is-idle{opacity:.22;transition:opacity .9s ease,transform .18s}   /* scrolling stopped: dim slowly; coming back is the quick .18s fade-in from the base rule */
.back-to-top.is-armed{transform:scale(.94)}
.back-to-top.is-dragging{transition:none;transform:scale(1.12);box-shadow:0 14px 30px -8px rgba(7,24,46,0.6);cursor:grabbing}
.back-to-top svg{width:18px;height:18px}
@media (max-width:620px){.footer-nav-inner{gap:14px 18px}}

.masthead-search{display:flex;align-items:center;flex:1 1 320px;max-width:380px;position:relative}
.masthead-search .msr-field-wrap{position:relative;flex:1;display:flex}.masthead-search input{width:100%;height:34px;padding:0 62px 0 14px;border-radius:999px;border:1px solid rgba(255,255,255,0.22);background:rgba(255,255,255,0.08);color:#fff;font-size:16px;-webkit-appearance:none;appearance:none}.masthead-search input::-webkit-search-cancel-button,.masthead-search input::-webkit-search-decoration,.nav-search-form input::-webkit-search-cancel-button,.nav-search-form input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.masthead-search .msr-clear{position:absolute;right:34px;top:50%;transform:translateY(-50%);width:20px;height:20px;border:none;background:transparent;color:rgba(255,255,255,0.7);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.masthead-search .msr-clear:hover{color:#fff}.masthead-search .msr-clear svg{width:14px;height:14px}.masthead-search .msr-clear[hidden]{display:none}
.masthead-search input::placeholder{color:rgba(255,255,255,0.5)}
.masthead-search input:focus{outline:none;border-color:rgba(255,255,255,0.45);background:rgba(255,255,255,0.13)}
.masthead-search button{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;border:none;background:transparent;color:rgba(255,255,255,0.7);display:flex;align-items:center;justify-content:center;cursor:pointer}
.masthead-search button:hover{color:#fff}
.masthead-search svg{width:14px;height:14px;display:block}
/* The results panel is wider than the 380px box (up to 680px, never past the page gutter): the box sits at the shell's left edge, so it grows rightwards. */
.masthead-search .msr-panel{right:auto;width:min(680px,calc(100vw - 40px))}
.msr-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:70;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:0 22px 46px -18px rgba(7,24,46,0.5);max-height:min(460px,70vh);overflow-x:hidden;overflow-y:auto;padding:6px}
.msr-group{padding:4px 0}
.msr-group-label{font-family:"handel-gothic",sans-serif;font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);padding:8px 10px 4px}
a.msr-item{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:var(--r-sm);color:var(--ink);font-family:"usual","Helvetica Neue",Arial,sans-serif;text-transform:none;letter-spacing:normal;font-weight:400}
a.msr-item:hover{background:var(--surface-2);color:var(--ink)}
.msr-item-title{flex:1;min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.35;font-size:0.84rem}   /* long headlines wrap to a second line instead of being cut off */
.msr-tag{flex:0 0 auto;font-size:0.56rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:3px 7px;border-radius:999px;color:#fff}
.msr-tag-article{background:var(--info);color:var(--surface)}
/* Clear (x) for the in-page search boxes (News Archive, Launch Schedule); added by nav.js. Its icon opts out of the .search-wrap svg
   rule that places the magnifier on the left. */
.sfn-search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:none;border-radius:50%;background:transparent;color:var(--ink-faint);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.sfn-search-clear:hover{color:var(--ink);background:var(--surface-2)}
.search-wrap .sfn-search-clear svg{position:static;transform:none;width:14px;height:14px;color:inherit;pointer-events:none}
.sfn-search-clear[hidden]{display:none}
.msr-tag-video{background:var(--red);color:#fff}   /* an article with a video player in it */
.msr-tag-upcoming{background:var(--active-bg);color:var(--active-fg)}
.msr-tag-completed{background:var(--ink-soft);color:var(--surface)}
.msr-tag-log{border:1px solid var(--border-2);color:var(--ink-soft);padding:2px 6px}
.msr-tag-page,.msr-tag-topic,.msr-tag-author,.msr-tag-tag{border:1px solid var(--border-2);background:var(--surface-2);color:var(--ink);padding:2px 6px}
.msr-item-meta{flex:0 0 auto;font-size:0.68rem;color:var(--ink-faint);white-space:nowrap}
a.msr-item.is-active{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border-2)}
.msr-notice{padding:8px 10px 4px;font-size:0.8rem;color:var(--ink-soft)}
.msr-notice a{color:var(--info);font-weight:700;text-decoration:underline;text-transform:none;letter-spacing:normal}
a.msr-all{display:flex;justify-content:space-between;gap:8px;margin-top:2px;padding:9px 10px;border-top:1px solid var(--border);font-size:0.78rem;font-weight:700;color:var(--info);text-transform:none;letter-spacing:normal}
a.msr-all:hover,a.msr-all.is-active{background:var(--surface-2)}
a.msr-more{display:block;padding:6px 10px 8px;font-size:0.76rem;font-weight:700;color:var(--info);text-transform:none;letter-spacing:normal}
a.msr-more:hover{text-decoration:underline}
.msr-empty{padding:14px 10px;color:var(--ink-faint);font-size:0.82rem}

/* ============ MOBILE REFINEMENTS (phone widths) ============ */
.masthead-next-launch{display:flex;align-items:center;gap:18px;padding:6px 4px;color:#fff;text-decoration:none;min-width:0}
.mnl-info{display:flex;flex-direction:column;gap:1px;min-width:0;overflow:hidden}
.mnl-top{display:flex;align-items:baseline;gap:6px;min-width:0}
.mnl-label{flex:0 0 auto;font-size:0.72rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:#f2f3f5}
.mnl-mission{font-family:"Hanken Grotesk",sans-serif;font-weight:700;font-size:0.94rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mnl-meta{font-size:0.72rem;color:rgba(255,255,255,0.78);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mnl-meta b{color:#fff;font-weight:600}
.mnl-pad{display:none}
.mnl-cta{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,0.32);color:#fff}
.mnl-cta svg{width:16px;height:16px;display:block}
.mnl-cd{display:none;align-items:center;gap:7px;margin:0 4px}
.mnl-cd-seg{position:relative}
.mnl-cd-cells{display:inline-flex;gap:2px}
.mnl-cd-cell{position:relative;width:16px;height:24px;font-family:"handel-gothic",sans-serif;font-size:17px;font-variant-numeric:tabular-nums;line-height:24px;border-radius:3px;overflow:hidden;background:#03060f;box-shadow:0 2px 6px rgba(0,0,0,0.45),inset 0 0 0 1px rgba(255,255,255,0.05);transform:translateZ(0)}
.mnl-cd-half{position:absolute;left:0;right:0;height:50%;overflow:hidden}
.mnl-cd-half.mnl-top{top:0;background:linear-gradient(180deg,var(--flap-top-a),var(--flap-top-b))}
.mnl-cd-half.mnl-bot{bottom:0;background:linear-gradient(180deg,var(--flap-bot-a),var(--flap-bot-b))}
.mnl-cd-half span,.mnl-cd-flap span{position:absolute;left:0;right:0;height:24px;display:flex;align-items:center;justify-content:center;color:#fff}
.mnl-cd-half.mnl-top span{top:0}
.mnl-cd-half.mnl-bot span{bottom:0}
.mnl-cd-flap{position:absolute;left:0;right:0;height:50%;overflow:hidden;backface-visibility:hidden;z-index:5}
.mnl-cd-flap.mnl-flap-top{top:0;background:linear-gradient(180deg,var(--flap-top-a),var(--flap-top-b));transform-origin:bottom;transform:rotateX(0);animation:mnlCdFlipTop 0.28s cubic-bezier(0.55,0,0.8,0.35) forwards}
.mnl-cd-flap.mnl-flap-bot{bottom:0;background:linear-gradient(180deg,var(--flap-bot-a),var(--flap-bot-b));transform-origin:top;transform:rotateX(90deg);animation:mnlCdFlipBot 0.24s cubic-bezier(0.2,0.65,0.4,1) 0.26s forwards}
.mnl-cd-flap.mnl-flap-top span{top:0}
.mnl-cd-flap.mnl-flap-bot span{bottom:0}
@keyframes mnlCdFlipTop{0%{transform:rotateX(0)}100%{transform:rotateX(-90deg)}}
@keyframes mnlCdFlipBot{0%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.mnl-cd-label{position:absolute;top:100%;left:0;right:0;margin-top:3px;text-align:center;font-size:0.42rem;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.5);white-space:nowrap}
.mnl-cd-colon{font-family:"handel-gothic",sans-serif;font-size:0.85rem;color:rgba(255,255,255,0.3);line-height:1}
.mnl-cd.no-days>:nth-child(-n+2){display:none}   /* under a day to go: the DAYS tiles and their colon drop out (next-launch.js) */
@media (min-width:980px){.mnl-cd{display:inline-flex;padding-bottom:11px}}   /* room under the countdown's DAYS/HRS/MIN/SEC labels, which hang below the digit tiles. It lives inside the countdown's own box (not as padding on the strip) so the strip's other items (search, mission text, arrow) centre on the full banner height, not on the digit tiles. 11px here (+6px on the strip itself) makes the space below the labels equal the space above the tiles, about 9.8px each, measured to the top of the rule; same in both themes */
.masthead-next-launch:hover .mnl-cta{background:#fff;color:var(--navy)}
@media (max-width:640px){
.site-topbar-inner{height:auto;min-height:28px;padding:4px 0;flex-wrap:wrap;row-gap:4px}
.topbar-now{font-size:0.6rem;gap:8px;white-space:nowrap}
.topbar-clock{display:none}
.topbar-social{gap:9px}
.topbar-social svg{width:13px;height:13px}
.topbar-links>a{display:none}
.masthead-inner{justify-content:center}
.masthead-search{display:none}
.nav-toggle{position:relative}
.nav-toggle-search{display:flex;align-items:center;justify-content:center;position:absolute;right:-7px;bottom:-7px;width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;box-shadow:0 0 0 2px var(--surface)}   /* phones: the masthead search is hidden; this badge says the search is in the menu */
.nav-toggle-search svg{width:11px;height:11px}
body.is-nav-open .nav-toggle-search{display:none}
.msr-panel{padding:4px}
a.msr-item{padding:7px 10px 7px 8px;gap:6px}
.msr-item-title{font-size:0.8rem}
.msr-tag{font-size:0.5rem;padding:2px 6px}
.msr-group-label{font-size:0.54rem;padding:6px 8px 3px}
.footer-nav-inner{display:grid;grid-template-columns:repeat(2,1fr);align-items:center;justify-items:center;text-align:center;gap:16px 10px;padding:22px 0}
}

/* Shared page layout + image placeholder base (article + home). */
.layout{display:grid;grid-template-columns:minmax(0,1fr) var(--rail);gap:var(--gap);align-items:start;margin-top:30px}
.main{min-width:0}
.rail{min-width:0;position:sticky;top:24px}
/* Rail and main column start on the SAME line. A heading's or headline's top margin is for spacing BETWEEN blocks, so the first block of the
   main column carries none, and the layout supplies the gap above both columns (52px; 74px on the home page, under the lead story). */
.layout--flush{margin-top:52px}
body.home .layout--flush{margin-top:74px}
.layout--flush > .main > :first-child{margin-top:0}
/* Section heading (LABEL + rule + optional count), shared by every page. Pages override only the margin, and only where the layout needs it. */
.section-head{display:flex;align-items:baseline;gap:14px;margin:var(--section-gap) 0 20px}
.section-title{font-weight:700;font-size:0.9rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--navy-ink);margin:0}
.section-rule{flex:1;height:2px;background:var(--border-2)}
.section-count{font-size:0.74rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
/* Page titles: one size and face on every page (articles have their own, larger headline in sfn-single.css). Margins stay with each page. */
.mr-hero h1,.mr-topic-hero h1,.about-intro-body h1,.subscribe-hero h1,.contact-hero h1,.membership-hero h1,.donate-hero h1,.legal-hero h1,.lb-hero h1{font-family:"Hanken Grotesk",sans-serif;font-weight:800;font-size:var(--fs-page-title);line-height:1.12;letter-spacing:normal;text-transform:none;color:var(--ink)}
/* Visually hidden, still read by screen readers and search engines (page titles on pages whose design has no visible H1). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.art{position:relative;background:repeating-linear-gradient(135deg,#dde3ea 0 10px,#e6eaf0 10px 20px);border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;font-family:monospace;overflow:hidden;text-align:center}
.art.has-photo{background-size:cover;background-position:center}
@media (max-width:920px){.layout{grid-template-columns:1fr}.rail{order:2;position:static}}
/* form controls inherit the page font (the static pages set this globally) */
button,input,select,textarea{font:inherit;color:inherit}
.display{font-family:"handel-gothic","Arial Narrow",sans-serif}

/* Next Launch bar: while the browser's cached copy is being painted in, hide the "Loading..." placeholder (flag set in <head>, removed by next-launch.js) */
.nl-cached #mnl-mission{visibility:hidden}

/* Theme switch sweep (assets/js/settings.js), side to side. Dark: the old (light) view is masked away from the right, so dark arrives from the right edge.
   Either way the NEW look spreads out from the button that was clicked as a very soft radial fade. --sfn-x/--sfn-y (set by JS) is the origin, --sfn-r the radius, --sfn-f the soft-edge width. */
@property --sfn-r{syntax:"<length>";inherits:false;initial-value:0px}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.vt-to-dark::view-transition-new(root),html.vt-to-light::view-transition-new(root){z-index:2;-webkit-mask-image:radial-gradient(circle at var(--sfn-x,100%) var(--sfn-y,0),#000 calc(var(--sfn-r) - var(--sfn-f,300px)),transparent var(--sfn-r));mask-image:radial-gradient(circle at var(--sfn-x,100%) var(--sfn-y,0),#000 calc(var(--sfn-r) - var(--sfn-f,300px)),transparent var(--sfn-r))}
html.vt-to-dark::view-transition-old(root),html.vt-to-light::view-transition-old(root){z-index:1}

/* =====================================================================================================================
   CLICK-TO-LOAD EMBEDS (wordpress/theme/sfn-embeds.php + assets/js/embeds.js): article videos, live blogs and posts from X/Instagram
   wait for a click, so nothing third-party loads (or sets cookies) on page load. Same look in both themes.
   ===================================================================================================================== */
.embed-facade{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;max-width:100%;margin:18px 0;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;cursor:pointer;background:#0b2342 center/cover no-repeat;color:#fff;text-align:center;isolation:isolate}
.embed-facade::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,24,46,0.15),rgba(7,24,46,0.65))}
.embed-facade.is-generic,.embed-facade.is-liveblog{background:linear-gradient(135deg,#0b2342,#07182e)}
.embed-facade.is-liveblog{aspect-ratio:auto;min-height:150px;padding:24px}
.embed-facade:focus-visible{outline:3px solid var(--info);outline-offset:3px}
.embed-facade .ef-play{width:68px;height:48px;border-radius:12px;background:rgba(0,0,0,0.72);position:relative;transition:background .15s,transform .15s}
.embed-facade .ef-play::after{content:"";position:absolute;left:27px;top:14px;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.embed-facade:hover .ef-play{background:var(--red);transform:scale(1.05)}
.embed-facade .ef-title{max-width:86%;font-weight:700;font-size:1rem;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,0.6)}
.embed-facade .ef-note{font-size:0.74rem;letter-spacing:0.06em;color:rgba(255,255,255,0.8);text-shadow:0 1px 2px rgba(0,0,0,0.6)}
.embed-facade.is-loaded{cursor:auto;background:#000}
.embed-facade.is-loaded::before{display:none}
.embed-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed-post{margin:18px 0}
.embed-post blockquote{margin:0}
.embed-post .ef-load-post{margin-top:8px;padding:7px 12px;border:1px solid var(--border-2);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:0.8rem;font-weight:700;cursor:pointer}
.embed-post .ef-load-post:hover{border-color:var(--navy-ink)}
.embed-post .ef-load-post:disabled{opacity:.6;cursor:default}

/* Big-logo header (html.hdr-alt, desktop >=981px; set in header.php, ?hdr=std turns it off per browser): a big SPACEFLIGHT NOW over a red rule like the splash page, the nav where the
   tagline was, and the Next Launch + search moved up from the navy strip into a larger block on the right. header-alt.js sizes the
   wordmark to the nav's width so both edges line up, and moves the masthead pieces in and out at the 981px line. */
@media (min-width:981px){
html.hdr-alt .masthead{display:none}
html.hdr-alt .site-header{border-bottom:3px solid var(--red)}
html.hdr-alt[data-theme="dark"] .site-header{border-bottom:3px solid transparent;background-image:var(--hairline-fade);background-repeat:no-repeat;background-position:0 calc(100% - 2px);background-size:100% 1px;background-origin:border-box}
html.hdr-alt .site-header-inner{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;row-gap:0;column-gap:clamp(14px,1.6vw,22px);align-items:end;padding:6px 0 11px}
html.hdr-alt .site-topbar-inner{height:40px}
html.hdr-alt .logo-lockup{grid-column:1;grid-row:1}
html.hdr-alt .logo-fallback .wm{font-size:var(--hdr-wm,3.6rem)!important;line-height:.84;margin:0;letter-spacing:-.02em}
html.hdr-alt .logo-fallback .tag{display:none}
/* the nav takes the tagline's place: under the red rule, spread to the wordmark's width */
html.hdr-alt .site-nav{grid-column:1;grid-row:2;justify-content:space-between;gap:0;border-top:5px solid var(--tagline);margin-top:-3px;padding-top:2px}
html.hdr-alt .site-nav a{font-size:var(--hdr-nav,14px);letter-spacing:.12em;padding:5px 0 5px}
html.hdr-alt .site-nav a.is-active::after{bottom:-1px}
html.hdr-alt .nav-toggle{display:none}

/* right-hand block: the bigger Next Launch on top, search below it on the nav row */
html.hdr-alt .hdr-side{grid-column:2;padding-top:6px;min-width:var(--hdr-side-min,0);grid-row:1/3;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:4px;min-width:0}
html.hdr-alt .hdr-side .masthead-search{order:2;flex:0 0 auto;max-width:none;width:100%}
html.hdr-alt .hdr-side .masthead-search input{height:28px;border-color:var(--border-2);background:var(--surface-2);color:var(--ink);font-size:14px}
html.hdr-alt .hdr-side .masthead-search input::placeholder{color:var(--ink-faint)}
html.hdr-alt .hdr-side .masthead-search input:focus{border-color:var(--navy-ink);background:var(--surface)}
html.hdr-alt .hdr-side .masthead-search button,html.hdr-alt .hdr-side .masthead-search .msr-clear{color:var(--ink-soft)}
html.hdr-alt .hdr-side .masthead-search .msr-panel{left:auto;right:0}

html.hdr-alt .hdr-side .masthead-next-launch{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1px 14px;position:relative;min-height:59px;padding:3px 12px 1px 14px;border:1px solid var(--navy);border-radius:var(--r-md);background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22124.71%22 height=%22144%22 viewBox=%220 0 124.71 144%22%3E%3Cg stroke=%22%23fff%22 stroke-opacity=%220.085%22 stroke-width=%221%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20.78 1.68 L40.11 12.84 L40.11 35.16 L20.78 46.32 L1.45 35.16 L1.45 12.84Z%22 fill=%22%23fff%22 fill-opacity=%220.021%22/%3E%3Cpath d=%22M62.35 1.68 L81.68 12.84 L81.68 35.16 L62.35 46.32 L43.02 35.16 L43.02 12.84Z%22 fill=%22%23fff%22 fill-opacity=%220.013%22/%3E%3Cpath d=%22M103.92 1.68 L123.25 12.84 L123.25 35.16 L103.92 46.32 L84.59 35.16 L84.59 12.84Z%22 fill=%22%23fff%22 fill-opacity=%220.009%22/%3E%3Cpath d=%22M0.00 37.68 L19.33 48.84 L19.33 71.16 L0.00 82.32 L-19.33 71.16 L-19.33 48.84Z%22 fill=%22%23fff%22 fill-opacity=%220.05%22/%3E%3Cpath d=%22M41.57 37.68 L60.90 48.84 L60.90 71.16 L41.57 82.32 L22.24 71.16 L22.24 48.84Z%22 fill=%22%23fff%22 fill-opacity=%220.032%22/%3E%3Cpath d=%22M83.14 37.68 L102.47 48.84 L102.47 71.16 L83.14 82.32 L63.81 71.16 L63.81 48.84Z%22 fill=%22%23fff%22 fill-opacity=%220.038%22/%3E%3Cpath d=%22M124.71 37.68 L144.04 48.84 L144.04 71.16 L124.71 82.32 L105.38 71.16 L105.38 48.84Z%22 fill=%22%23fff%22 fill-opacity=%220.05%22/%3E%3Cpath d=%22M20.78 73.68 L40.11 84.84 L40.11 107.16 L20.78 118.32 L1.45 107.16 L1.45 84.84Z%22 fill=%22%23fff%22 fill-opacity=%220.03%22/%3E%3Cpath d=%22M62.35 73.68 L81.68 84.84 L81.68 107.16 L62.35 118.32 L43.02 107.16 L43.02 84.84Z%22 fill=%22%23fff%22 fill-opacity=%220.021%22/%3E%3Cpath d=%22M103.92 73.68 L123.25 84.84 L123.25 107.16 L103.92 118.32 L84.59 107.16 L84.59 84.84Z%22 fill=%22%23fff%22 fill-opacity=%220.04%22/%3E%3Cpath d=%22M0.00 109.68 L19.33 120.84 L19.33 143.16 L0.00 154.32 L-19.33 143.16 L-19.33 120.84Z%22 fill=%22%23fff%22 fill-opacity=%220.032%22/%3E%3Cpath d=%22M41.57 109.68 L60.90 120.84 L60.90 143.16 L41.57 154.32 L22.24 143.16 L22.24 120.84Z%22 fill=%22%23fff%22 fill-opacity=%220.043%22/%3E%3Cpath d=%22M83.14 109.68 L102.47 120.84 L102.47 143.16 L83.14 154.32 L63.81 143.16 L63.81 120.84Z%22 fill=%22%23fff%22 fill-opacity=%220.036%22/%3E%3Cpath d=%22M124.71 109.68 L144.04 120.84 L144.04 143.16 L124.71 154.32 L105.38 143.16 L105.38 120.84Z%22 fill=%22%23fff%22 fill-opacity=%220.032%22/%3E%3Cpath d=%22M0.00 -34.32 L19.33 -23.16 L19.33 -0.84 L0.00 10.32 L-19.33 -0.84 L-19.33 -23.16Z%22 fill=%22%23fff%22 fill-opacity=%220.032%22/%3E%3Cpath d=%22M41.57 -34.32 L60.90 -23.16 L60.90 -0.84 L41.57 10.32 L22.24 -0.84 L22.24 -23.16Z%22 fill=%22%23fff%22 fill-opacity=%220.043%22/%3E%3Cpath d=%22M83.14 -34.32 L102.47 -23.16 L102.47 -0.84 L83.14 10.32 L63.81 -0.84 L63.81 -23.16Z%22 fill=%22%23fff%22 fill-opacity=%220.036%22/%3E%3Cpath d=%22M124.71 -34.32 L144.04 -23.16 L144.04 -0.84 L124.71 10.32 L105.38 -0.84 L105.38 -23.16Z%22 fill=%22%23fff%22 fill-opacity=%220.032%22/%3E%3C/g%3E%3C/svg%3E") 0 0/83px 96px,linear-gradient(180deg,var(--navy-700),var(--navy-deep));color:#fff}
html.hdr-alt .hdr-side .masthead-next-launch{background-color:var(--navy-deep)}   /* solid fallback: if a browser skips the pattern/gradient, the white text still has navy under it */
html.hdr-alt[data-theme="dark"] .hdr-side .masthead-next-launch{border-color:var(--border-2)}
html.hdr-alt .hdr-side .masthead-next-launch:hover{border-color:rgba(255,255,255,.35)}
html.hdr-alt .hdr-side .mnl-info{display:contents}
html.hdr-alt .hdr-side .mnl-info>.mnl-top{grid-column:1;grid-row:1;overflow:hidden}
html.hdr-alt .hdr-side .mnl-meta{grid-column:1;grid-row:2}
html.hdr-alt .hdr-side .mnl-cd{grid-column:2;grid-row:1/3;align-self:center}
html.hdr-alt .hdr-side .mnl-label{color:#f2f3f5;font-size:.7rem}
html.hdr-alt .hdr-side .mnl-info>.mnl-top{color:#fff;font-size:.74rem}
html.hdr-alt .hdr-side .mnl-info>.mnl-top .mnl-mission{font-family:inherit;font-size:.74rem;font-weight:600;color:#fff}
/* mission on line 2, spaceport on its own tight line 3 (no " · " run-on) */
html.hdr-alt .hdr-side #mnl-site-sep{display:none}
html.hdr-alt .hdr-side .mnl-meta{display:flex;flex-direction:column;min-width:0;color:rgba(255,255,255,.72);font-size:.7rem;line-height:1.15}
html.hdr-alt .hdr-side .mnl-meta b{color:#fff;font-family:"Hanken Grotesk",sans-serif;font-weight:700;font-size:1.18rem;line-height:1.15;display:block;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.hdr-alt .hdr-side #mnl-site{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:3px}
html.hdr-alt .hdr-side #mnl-site:empty{display:none}
html.hdr-alt .hdr-side .mnl-pad:not([hidden]){display:inline;color:#fff;font-weight:600;letter-spacing:.02em}
html.hdr-alt .hdr-side .mnl-pad-sep{color:rgba(255,255,255,.5);font-weight:400}
html.hdr-alt .hdr-side .mnl-cta{display:none}
html.hdr-alt .hdr-side .mnl-cd-cells{gap:2px}
html.hdr-alt .hdr-side .mnl-cd{display:inline-flex;margin:0;gap:4px;padding-bottom:10px;flex:0 0 auto}
html.hdr-alt .hdr-side .mnl-cd-cell{width:.66em;height:1em;line-height:1em;font-size:var(--hdr-cd,25px);border-radius:4px}
html.hdr-alt .hdr-side .mnl-cd-half span,html.hdr-alt .hdr-side .mnl-cd-flap span{height:1em}
html.hdr-alt .hdr-side .mnl-cd-label{color:rgba(255,255,255,.5);font-size:.46rem}
html.hdr-alt .hdr-side .mnl-cd-colon{color:rgba(255,255,255,.3)}
}
@media (min-width:981px) and (max-width:1199px){
html.hdr-alt{--hdr-cd:21px}
html.hdr-alt .site-nav a{letter-spacing:.08em}
html.hdr-alt .hdr-side .mnl-cd-cell{width:.66em;height:1em;line-height:1em;font-size:var(--hdr-cd,25px);border-radius:4px}
html.hdr-alt .hdr-side .mnl-cd-half span,html.hdr-alt .hdr-side .mnl-cd-flap span{height:1em}
html.hdr-alt .hdr-side .mnl-meta b{font-size:1.02rem}
}