/* ==========================================================================
   DarkSpaceDepot — section pages
   Path: MITD/v5/sites/dsd-home/assets/dsd/css/section.css

   Every section page: Launch, Travel, Explore, Build, Technologies.

   A conventional scrolling page. Nothing here is pinned to artwork, unlike
   home.css -- the content is longer than a screen at every width, so every
   section reflows.

   Page-specific rules belong at the bottom, under a .dsd-<slug> body class,
   not scattered through the shared sections above.

   The :root block duplicates home.css deliberately. Extracting a shared layer
   means refactoring the live homepage's CSS, which is not worth doing until
   two or three section pages exist and the genuinely shared parts are obvious.
   When that happens, this block plus .site-head, .site-foot and .btn are the
   pieces that move.
   ========================================================================== */

:root {
  --void:        #04060B;
  --panel:       #080C14;
  --panel-2:     #0C1320;
  --ice:         #E8EEF6;
  --ash:         #8A94A6;
  --ash-dim:     #5C6675;
  --beacon:      #4FA8FF;
  --violet:      #7A5CFF;

  --hairline:    rgba(180, 205, 240, .16);
  --hairline-lo: rgba(180, 205, 240, .08);

  --gut:  clamp(20px, 4vw, 64px);

  /* The accessibility button is position:fixed at the bottom-left, so it sits
     ON the last line of the page rather than after it. Every page ends with
     this much extra room, which also gives a little scroll past the footer
     instead of the footer being the hard bottom edge.
     env() adds the home-indicator strip on iOS and resolves to 0 elsewhere. */
  --a11y-clear: calc(clamp(58px, 7vh, 88px) + env(safe-area-inset-bottom, 0px));
  --ease: cubic-bezier(.22, .61, .36, 1);

  --lift:
    0 0 6px   rgba(0, 0, 0, .62),
    0 0 16px  rgba(0, 0, 0, .56),
    0 0 34px  rgba(0, 0, 0, .50),
    0 0 62px  rgba(0, 0, 0, .42),
    0 0 100px rgba(0, 0, 0, .34);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.dsd {
  margin: 0;
  background: var(--void);
  color: var(--ice);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-optical-sizing: auto;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
img { display: block; max-width: 100%; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--beacon); outline-offset: 3px; border-radius: 2px; }

/* Inert links carry aria-disabled and no href (see dsd_link_attrs). */
[aria-disabled="true"] { pointer-events: none; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  padding: 12px 18px; background: var(--beacon); color: #00121F; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

.i { width: 20px; height: 20px; fill: none; stroke: currentColor;
     stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   Masthead
   ========================================================================== */
.site-head {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 46px);
  padding: 14px var(--gut);
  background: rgba(4, 6, 11, .86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hairline-lo);
}

.wordmark { flex: 0 0 auto; }
.wordmark__mark {
  display: block; font-size: clamp(18px, 2vw, 23px);
  font-weight: 700; font-stretch: 118%; letter-spacing: -.015em; line-height: 1;
}
.wordmark__mark .is-accent { color: var(--beacon); }
.wordmark__tagline {
  display: block; margin-top: 5px; font-size: 8px;
  letter-spacing: .38em; text-transform: uppercase; color: var(--ash);
}

.site-nav { margin-right: auto; }
.site-nav__list { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px); }
.site-nav__link {
  position: relative; display: block; padding: 10px 0;
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(232, 238, 246, .82); transition: color .25s var(--ease);
}
.site-nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 4px;
  height: 2px; background: var(--beacon); transition: right .3s var(--ease);
}
.site-nav__link:hover { color: var(--ice); }
.site-nav__link:hover::after { right: 0; }
.site-nav__link.is-current { color: var(--ice); }
.site-nav__link.is-current::after { right: 0; }

.site-head__tools { display: flex; align-items: center; gap: 16px; }
.tool { display: grid; place-items: center; width: 34px; height: 34px;
        border-radius: 50%; transition: background-color .25s var(--ease); }
.tool:hover { background: rgba(79, 168, 255, .12); }

.burger { display: none; place-items: center; width: 34px; height: 34px; }
.burger__bar { position: relative; width: 20px; height: 1.5px; background: currentColor; }
.burger__bar::before, .burger__bar::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 1.5px;
  background: currentColor; transition: transform .3s var(--ease);
}
.burger__bar::before { top: -6px; }
.burger__bar::after  { top: 6px; }
.burger[aria-expanded="true"] .burger__bar { background: transparent; }
.burger[aria-expanded="true"] .burger__bar::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar::after  { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--hairline);
  transition: border-color .3s var(--ease), background-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
.btn .i { width: 15px; height: 15px; }
.btn:hover { border-color: var(--beacon); }

/* The violet belongs to actions, not to surfaces. It is the one place on this
   page the palette leaves blue, so it marks the primary path and nothing else. */
.btn--primary {
  border-color: transparent;
  background-image: linear-gradient(100deg, var(--violet), var(--beacon));
  color: #04060B;
  font-weight: 700;
}
.btn--primary:hover { box-shadow: 0 0 26px rgba(122, 92, 255, .45); }

.btn--play { background: rgba(8, 12, 20, .5); backdrop-filter: blur(6px); }
.btn--play .i { width: 22px; height: 22px; stroke-width: 1.2; }

.btn--outline { background: rgba(8, 12, 20, .5); }

.chip {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--hairline);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.chip .i { width: 15px; height: 15px; }
.chip:hover { border-color: var(--beacon); background: rgba(79, 168, 255, .12); }

/* ==========================================================================
   Hero
   ========================================================================== */
.lhero {
  position: relative; isolation: isolate;
  display: flex; align-items: center;
  min-height: min(84svh, 760px);
  padding: clamp(40px, 7vw, 96px) var(--gut) clamp(32px, 5vw, 64px);
  overflow: hidden;
}
.lhero__art {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%;
}
.lhero.is-empty {
  background:
    radial-gradient(60% 60% at 72% 40%, rgba(122, 92, 255, .22), transparent 70%),
    radial-gradient(70% 70% at 30% 70%, rgba(255, 138, 61, .16), transparent 72%),
    linear-gradient(160deg, #0B1220, var(--void));
}

/* Copy sits on the left, so the veil is directional: heavy at the left edge,
   gone by mid-frame, with a floor so the feature row stays legible. */
.lhero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(4, 6, 11, .94) 0%, rgba(4, 6, 11, .72) 26%,
                              rgba(4, 6, 11, .18) 52%, rgba(4, 6, 11, 0) 70%),
    linear-gradient(to top,   rgba(4, 6, 11, .80) 0%, rgba(4, 6, 11, 0) 34%);
}

.lhero__copy { position: relative; z-index: 2; max-width: 620px; }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
}
.eyebrow__index { color: var(--beacon); }
.eyebrow__slash { color: var(--ash-dim); }

.lhero__title {
  margin-top: 18px;
  font-size: clamp(38px, 5.6vw, 76px);
  font-weight: 800; font-stretch: 104%;
  line-height: .98; letter-spacing: -.025em; text-transform: uppercase;
  text-shadow: var(--lift);
}
.lhero__line { display: block; }

.lhero__lede {
  margin-top: clamp(18px, 2vw, 26px);
  font-size: clamp(13px, 1.05vw, 15px); line-height: 1.85;
  color: rgba(232, 238, 246, .88);
  text-shadow: var(--lift);
}
.lhero__lede-line { display: block; }

.lhero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 3vw, 34px); }

/* The feature row under the hero CTAs. Three items on Launch, four on Travel,
   Explore and Build, and the labels are multi-word -- so the two things that
   matter are the space BETWEEN items and the guarantee that a label can never
   spill out of its own column.

   SPACING is one value used twice: --hfeat-gap is the row's column-gap AND
   each item's left padding. The divider rule sits between the two, so the
   whitespace is even on both sides of it rather than the label crowding it.

   OVERFLOW is prevented by min-width:0 plus overflow-wrap. A flex item
   defaults to min-width:auto, which refuses to shrink below its longest
   unbreakable word -- that is what pushed "OPPORTUNITIES" sideways into
   "RESOURCES" instead of wrapping inside its own column. */
.hfeat {
  /* 24px is not a taste call. .lhero__copy is 620px wide, and four columns at
     this gap leave 119px of content each -- against OPPORTUNITIES, the longest
     unbreakable word on any of these pages, at 96px. The previous value topped
     out at 40px, which needed 658px in that 620px box and wrapped the fourth
     item onto a row of its own. */
  /* SYMMETRIC padding, not a column-gap, because the content is centred.
     Every item now has the same box -- same padding both sides, same width.

     It used to be padding on the left only, with the first item unpadded so
     the row started flush with the headline. flex: 1 1 0 gives every item the
     same OUTER width, so that unpadded first item had a wider content box and
     its centre sat about 12px off the rhythm the other three shared.
     Left-aligned text hid it; centred text would not.

     The negative margin below cancels the first item's left padding, so the
     icons still start flush with the headline and lede while every centre
     falls on an even rhythm.

     20px each side leaves 120px of content per column against a 620px
     .lhero__copy -- OPPORTUNITIES, the longest unbreakable word on any of
     these pages, is 96px. */
  --hfeat-pad: clamp(10px, 1.3vw, 20px);

  /* nowrap is the guarantee. A wrapped item still carries the padding and
     divider that only mean anything mid-row, so it reads as indented rather
     than aligned -- there is no tidy way to wrap this row, so it doesn't. */
  display: flex; flex-wrap: nowrap; align-items: stretch;
  margin-top: clamp(28px, 4vw, 48px);
  margin-left: calc(var(--hfeat-pad) * -1);
}
.hfeat__item {
  display: flex; flex-direction: column; gap: 10px;

  /* Icon above a centred label. align-items centres the icon and the title
     box in the column; text-align centres the wrapped lines inside the title,
     which matters because most of these labels are two lines. */
  align-items: center;
  text-align: center;

  /* Equal columns, not content-sized. Two reasons: the row can be measured
     against a fixed width instead of hoping the labels stay short, and the
     dividers land on a regular rhythm instead of one set by how long each
     label happens to be. */
  flex: 1 1 0;
  min-width: 0;

  padding-inline: var(--hfeat-pad);
  border-left: 1px solid var(--hairline-lo);
}
.hfeat__item:first-child { border-left: 0; }
.hfeat__item .i { width: 26px; height: 26px; stroke-width: 1.1; color: rgba(232, 238, 246, .9); }
.hfeat__title {
  /* em, not ch. ch measures a "0" glyph and ignores letter-spacing, so the old
     9ch was about 40% narrower than the tracked text it was holding. At 11em a
     13-character word like OPPORTUNITIES fits on one line with room to spare;
     anything longer wraps inside the column instead of escaping it. */
  max-width: 11em;
  font-size: 9.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; line-height: 1.55;
  overflow-wrap: break-word;
}

/* ==========================================================================
   Section rail
   ========================================================================== */
.rail { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); }
.rail__label,
.rail__strap {
  font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  white-space: nowrap;
}
.rail__label { color: rgba(232, 238, 246, .9); }
.rail__strap { color: var(--beacon); }
.rail__line { flex: 1 1 auto; height: 1px; background: var(--hairline-lo); }

/* ==========================================================================
   The Launch Path
   ========================================================================== */
.path { padding: clamp(44px, 6vw, 84px) var(--gut); }

.pcards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(26px, 3vw, 40px);
}

.pcard {
  /* position: relative is the containing block for the stretched link at the
     bottom of this section. It is unconditional ON PURPOSE: hang it off
     :has() and a browser without :has() leaves the card static, the overlay
     resolves against the initial containing block instead, and one card's
     arrow becomes an anchor stretched over the entire page. */
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline-lo); border-radius: 14px;
  background: linear-gradient(165deg, rgba(20, 32, 54, .5), rgba(8, 12, 20, .8));
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.pcard:hover { border-color: rgba(79, 168, 255, .4); transform: translateY(-3px); }

.pcard__head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 16px 18px 12px;
}
.pcard__index {
  font-size: 15px; font-weight: 700; font-stretch: 112%;
  letter-spacing: .06em; color: var(--beacon);
}
.pcard__title {
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}

.pcard__media { display: block; margin: 0 14px; border-radius: 10px; overflow: hidden; }
.pcard__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pcard.is-empty .pcard__media {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(72% 72% at 32% 28%, rgba(122, 92, 255, .3), transparent 70%),
    linear-gradient(140deg, #101B2E, #060A12);
}

.pcard__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  padding: 16px 18px 18px; margin-top: auto;
}
.pcard__line {
  display: block;
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  line-height: 1.7; color: rgba(232, 238, 246, .74);
}

/* --- the whole card is the link ---------------------------------------- */
/* The card already lifts and lights its border on hover, so it reads as one
   control; until now only the 34px arrow actually took the click. The chip's
   ::after is stretched over the card, which keeps ONE anchor in the document
   and in the accessibility tree -- the chip's own <span class="sr"> is still
   what names it -- rather than wrapping the card in a second link that would
   announce every card twice.

   ONLY WHEN THERE IS SOMEWHERE TO GO. dsd_link_attrs() emits an inert chip
   with aria-disabled and NO href, so [href] is the test for a card that leads
   anywhere. Stretching a dead chip over a whole card would turn a small piece
   of furniture that does nothing into a large one that does nothing -- the
   exact complaint this work started from.

   Most path cards on the section pages are inert today and should be: their
   hrefs are like '/launch.php#preparation', and there is no id="preparation"
   on that page to land on. They start stretching the moment there is
   somewhere to land -- an in-page anchor is live by definition in
   dsd_is_live() -- with no edit here. */
.pcard .chip[href]::after { content: ""; position: absolute; inset: 0; }

/* Text inside a stretched card cannot be selected -- the overlay is over it.
   That is the accepted cost of the pattern, and these cards hold three
   uppercase fragments nobody copies. */

/* The focus ring belongs on what the key press will activate, which is now the
   card. Where :has() is unsupported the chip keeps its own global ring, so
   this degrades to exactly the previous behaviour rather than to none. */
.pcard:has(.chip[href]:focus-visible) {
  outline: 2px solid var(--beacon); outline-offset: 3px;
}
.pcard:has(.chip[href]:focus-visible) .chip:focus-visible { outline: none; }

/* ==========================================================================
   Built for what's next + MITD Threads
   ========================================================================== */
.built {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  padding: 0 var(--gut) clamp(44px, 6vw, 84px);
}

.built__panel {
  position: relative; isolation: isolate;
  display: flex; align-items: center;
  min-height: clamp(260px, 26vw, 380px);
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--hairline-lo);
}
.built__art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.built__panel.is-empty {
  background:
    radial-gradient(70% 90% at 78% 50%, rgba(79, 168, 255, .26), transparent 72%),
    linear-gradient(150deg, #0A1524, #05080F);
}
.built__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(4, 6, 11, .9) 0%, rgba(4, 6, 11, .55) 46%,
                                        rgba(4, 6, 11, .1) 78%, rgba(4, 6, 11, 0) 100%);
}
.built__copy { position: relative; z-index: 2; padding: clamp(24px, 3vw, 44px); }

.built__title {
  font-size: clamp(20px, 2.2vw, 30px); font-weight: 700; font-stretch: 104%;
  line-height: 1.08; letter-spacing: -.015em; text-transform: uppercase;
  text-shadow: var(--lift);
}
.built__title span { display: block; }

.built__list { margin-top: clamp(16px, 2vw, 26px); display: grid; gap: 11px; }
.built__list li {
  display: flex; align-items: center; gap: 14px;
  font-size: 10px; letter-spacing: .17em; text-transform: uppercase;
  color: rgba(232, 238, 246, .84);
  text-shadow: var(--lift);
}
.built__arrow {
  flex: 0 0 auto; position: relative; width: 26px; height: 1px;
  background: linear-gradient(to right, var(--hairline), var(--beacon));
}
.built__arrow::after {
  content: ""; position: absolute; right: 0; top: -2.5px;
  border: 3px solid transparent; border-left-color: var(--beacon);
}

/* --- MITD Threads ------------------------------------------------------- */
.threads {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(0, .8fr);
  align-items: center; gap: clamp(16px, 2vw, 30px);
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--hairline-lo); border-radius: 14px;
  background: linear-gradient(140deg, rgba(20, 32, 54, .55), rgba(8, 12, 20, .85));
}
.threads__media { border-radius: 10px; overflow: hidden; }
.threads__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.threads.is-empty .threads__media {
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(122, 92, 255, .38), transparent 72%),
    linear-gradient(150deg, #141024, #06070E);
}

.threads__title {
  font-size: clamp(15px, 1.5vw, 20px); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.threads__lines { margin-top: 12px; }
.threads__lines span {
  display: block;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1.7; color: rgba(232, 238, 246, .78);
}
.threads__copy .btn { margin-top: clamp(16px, 2vw, 24px); }

.threads__specs { display: grid; gap: 12px; }
.threads__specs li {
  font-size: 9px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ash); padding-left: 14px; position: relative;
}
.threads__specs li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 6px; height: 1px; background: var(--beacon);
}

/* ==========================================================================
   Travel band — image, copy, destination list
   ========================================================================== */
.tband {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .62fr);
  align-items: center;
  gap: clamp(18px, 2.4vw, 40px);
  margin: 0 var(--gut) clamp(44px, 6vw, 84px);
  padding: clamp(14px, 1.6vw, 20px);
  border: 1px solid var(--hairline-lo); border-radius: 14px;
  background: linear-gradient(140deg, rgba(20, 32, 54, .5), rgba(8, 12, 20, .85));
}

.tband__media { border-radius: 10px; overflow: hidden; }
.tband__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tband.is-empty .tband__media {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(70% 80% at 60% 45%, rgba(79, 168, 255, .3), transparent 72%),
    linear-gradient(150deg, #0C1728, #06090F);
}

.tband__title {
  font-size: clamp(19px, 2vw, 27px); font-weight: 700; font-stretch: 104%;
  line-height: 1.1; letter-spacing: -.015em; text-transform: uppercase;
}
.tband__title span { display: block; }

.tband__lede { margin-top: clamp(12px, 1.4vw, 18px); }
.tband__lede span {
  display: block;
  font-size: clamp(12px, 1vw, 14px); line-height: 1.75;
  color: rgba(232, 238, 246, .82);
}
.tband__copy .btn { margin-top: clamp(16px, 2vw, 26px); }

/* The list is a column of rules, not bullets -- same language as the arrows in
   the Launch band, one step quieter because these are destinations, not claims. */
.tband__list { display: grid; gap: 14px; }
.tband__list li {
  position: relative; padding-left: 26px;
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ash);
}
.tband__list li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 16px; height: 1px;
  background: linear-gradient(to right, var(--hairline), var(--beacon));
}

/* ==========================================================================
   Closing banner
   ========================================================================== */
.banner {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(20px, 4vw, 60px);
  min-height: clamp(230px, 24vw, 340px);
  padding: clamp(28px, 4vw, 56px) var(--gut);
  overflow: hidden;
}
.banner__art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
               object-fit: cover; object-position: 50% 60%; }
.banner.is-empty {
  background:
    radial-gradient(60% 90% at 42% 80%, rgba(255, 138, 61, .2), transparent 70%),
    linear-gradient(160deg, #0A1220, #05070D);
}
.banner__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(4, 6, 11, .84) 0%, rgba(4, 6, 11, .3) 42%, rgba(4, 6, 11, 0) 70%),
    linear-gradient(to top,   rgba(4, 6, 11, .7) 0%, rgba(4, 6, 11, 0) 46%);
}

.banner__title {
  position: relative; z-index: 2;
  font-size: clamp(22px, 2.6vw, 36px); font-weight: 700; font-stretch: 104%;
  line-height: 1.1; letter-spacing: -.015em; text-transform: uppercase;
  text-shadow: var(--lift);
}
.banner__title span { display: block; }

.banner__cta {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap; text-shadow: var(--lift);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.banner__cta .i { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.banner__cta:hover { border-color: var(--beacon); color: var(--beacon); }
.banner__cta:hover .i { transform: translateX(4px); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot {
  padding: clamp(32px, 4vw, 56px) var(--gut) var(--a11y-clear);
  border-top: 1px solid var(--hairline-lo);
}

.site-foot__top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
}

.site-foot__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-top: clamp(26px, 3.4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--hairline-lo);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ash-dim);
}
.site-foot__links { display: flex; flex-wrap: wrap; gap: 22px; }
.site-foot__links a { transition: color .25s var(--ease); }
.site-foot__links a:hover { color: var(--beacon); }

.quote { max-width: 46ch; }
.quote p span {
  display: block;
  font-size: clamp(13px, 1.1vw, 16px); font-style: italic; line-height: 1.6;
  color: rgba(232, 238, 246, .9);
}
.quote cite {
  display: block; margin-top: 14px; padding-top: 16px;
  border-top: 1px solid var(--beacon);
  font-size: 9.5px; font-style: normal; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ash);
}

.pillars { display: flex; flex-wrap: wrap; align-items: stretch; }
.pillar {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 0 clamp(18px, 2.4vw, 40px);
  border-left: 1px solid var(--hairline-lo);
}
.pillar:first-child { border-left: 0; }
.pillar .i { width: 26px; height: 26px; stroke-width: 1; color: var(--beacon); }
.pillar__label {
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ash);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tband { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tband__list {
    grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 6px; border-top: 1px solid var(--hairline-lo);
  }
  .built { grid-template-columns: minmax(0, 1fr); }
  .threads { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); }
  .threads__specs { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr));
                    padding-top: 4px; border-top: 1px solid var(--hairline-lo); }
}

/* THE LAST 40px BEFORE THE BURGER TAKES OVER.

   A seventh nav item (Scrolls) is about 70px wide, and between 861 and 884 the
   row ran out of space and wrapped to a second line -- the header grew from 66
   to 82px and the nav sat under the wordmark. Measured with and without that
   item: six fitted at 861, seven did not until 885.

   The gap is where the room is. It is clamp(14px, 1.9vw, 30px), which is
   16.4px at 861 across six gaps; tightening it in this band alone buys back
   about 32px, which is more than the ~24px the row was short.

   SCOPED TO THIS BAND ON PURPOSE. Lowering the clamp instead would have
   tightened the nav on every window narrower than 1579px -- every common
   laptop -- to fix a 24px strip. And this block sits ABOVE the 860 block
   deliberately: that one turns the list into a stacked burger menu with gap 0,
   and a media query placed after it would win and put the gap back. */
@media (max-width: 900px) {
  .site-nav__list { gap: 11px; }
  .site-nav__link { letter-spacing: .13em; }
}

@media (max-width: 860px) {
  .site-head { flex-wrap: wrap; gap: 12px; }
  .burger { display: grid; }

  .site-nav {
    order: 3; flex-basis: 100%; margin-right: 0;
    display: none; padding-top: 6px; border-top: 1px solid var(--hairline-lo);
  }
  .site-nav.is-open { display: block; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list li { border-bottom: 1px solid var(--hairline-lo); }
  .site-nav__list li:last-child { border-bottom: 0; }
  .site-nav__link { padding: 14px 0; }
  .site-nav__link::after { display: none; }
  .site-nav__link.is-current { color: var(--beacon); }

  .site-head__tools { margin-left: auto; }

  .lhero { min-height: 0; align-items: flex-start; }
  .lhero__art { object-position: 70% 40%; }
  .lhero__veil {
    background:
      linear-gradient(to right, rgba(4, 6, 11, .92) 0%, rgba(4, 6, 11, .66) 60%,
                                rgba(4, 6, 11, .4) 100%),
      linear-gradient(to top,   rgba(4, 6, 11, .86) 0%, rgba(4, 6, 11, 0) 46%);
  }

  .banner { flex-direction: column; align-items: flex-start; }

  /* Four columns cannot hold a readable label at this width. Two, then, with
     no dividers -- a rule at the start of a row points at nothing.

     Grid, not wrapped flex: grid rows are top-aligned by construction, so the
     icons in a row always share a baseline and the block cannot stagger. */
  .hfeat {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(14px, 3vw, 24px);
    row-gap: 20px;
    /* No first-item padding to cancel here -- the grid's own gap does the
       spacing, so the negative margin from the flex row would just pull the
       whole block off the left gutter. */
    margin-left: 0;
  }
  .hfeat__item { padding-inline: 0; border-left: 0; }
  .hfeat__title { max-width: none; }
}

@media (max-width: 620px) {
  .pcards { grid-template-columns: minmax(0, 1fr); }
  .tband { grid-template-columns: minmax(0, 1fr); }
  .tband__list { grid-template-columns: minmax(0, 1fr); }
  .threads { grid-template-columns: minmax(0, 1fr); }
  .threads__specs { grid-template-columns: minmax(0, 1fr); }
  .pillars { width: 100%; }
  .pillar { flex: 1 1 0; padding: 0 10px; }
}

/* ==========================================================================
   rail-wrap — the section rail on a phone                     (added 2026-10-08)

   .rail__label and .rail__strap both carried white-space:nowrap, which is right
   on a laptop and impossible on a phone: "Build Your Path" and "Ideas today.
   Impact tomorrow." cannot share 390px on one line, so the strap ran off the
   side and took the document's width with it. Every section page did it --
   measured at 390px, document.scrollWidth was 532 on Launch, 504 on Travel and
   Explore, 457 on Build, 548 on SPACE Mall, 681 on Scrolls, 677 on Open a
   Store. All seven are 390 with this block.

   Nothing was visibly broken, which is why it survived: body carries
   overflow-x:hidden, so the page could not be dragged sideways on a desktop
   browser. On a phone that rule is far weaker -- scroll right, or pinch out,
   and the layout sits in a third of the screen with black beside it.

   The strap takes a row of its own rather than being truncated: it is the one
   line on these pages that says what the section is for.
   ========================================================================== */
@media (max-width: 760px) {
  .rail { flex-wrap: wrap; row-gap: 10px; }
  .rail__label, .rail__strap { white-space: normal; }
  .rail__label   { flex: 0 1 auto; order: 1; }
  .rail__line    { flex: 1 1 24px; order: 2; }
  .scroller__nav { order: 3; }   /* mall pages only; harmless where absent */
  .rail__strap   { flex: 1 1 100%; order: 4; }
}