/* ==========================================================================
   DarkSpaceDepot — homepage
   Path: public_html/assets/dsd/css/home.css

   Two layouts, one markup.

   BASE (< 1280px)   The art is a hero image and every block stacks under it in
                     document order. Ordinary flow, ordinary units.

   PINNED (>= 1280px) The art becomes the layout. .frame locks to the art's
                     3:2 ratio, sized from the viewport's HEIGHT so the whole
                     composition fits without scrolling, and each block is
                     absolutely positioned at the --x/--y/--w/--h percentages
                     set in home-content.php.

                     Type is sized in cqw against .frame, so 1cqw is 1% of the
                     art's width and a label pinned at 42.5% stays on the
                     feature it names at every viewport size.

   Do not use px or vw for type inside the pinned block. Both desynchronise from
   the art -- px because it does not scale, vw because the frame is not
   full-bleed -- and labels drift off the features they name.
   ========================================================================== */

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

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

  --gut:  clamp(20px, 4.2vw, 72px);
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Lifts pinned text off busy artwork without a visible box. */
  --lift: 0 1px 14px rgba(0, 0, 0, .85), 0 0 34px rgba(0, 0, 0, .6);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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, p { 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 (DSD_LINKS_LIVE = false in inc/dsd/config.php).
   They keep their exact appearance and take up their exact space -- the layout
   must not shift when the real URLs go in. pointer-events suppresses the
   cursor change and every hover state in one declaration, so no hover rule
   below needs an exception. */
[aria-disabled="true"] { pointer-events: none; }

.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; }

/* ==========================================================================
   BASE LAYOUT — stacked
   ========================================================================== */
.stage { position: relative; display: flex; flex-direction: column; }

/* --- Masthead ------------------------------------------------------------ */
.masthead {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px var(--gut);
  transition: background-color .35s var(--ease);
}
.masthead.is-stuck {
  background-color: rgba(4, 6, 11, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline-lo);
}

.wordmark { display: block; }
.wordmark__mark {
  display: block; font-size: clamp(20px, 3.4vw, 26px);
  font-weight: 700; font-stretch: 118%; letter-spacing: -.015em; line-height: 1;
}
.wordmark__part.is-accent { color: var(--beacon); }
.wordmark__tagline {
  display: block; margin-top: 6px; font-size: 9px; font-weight: 400;
  letter-spacing: .46em; text-transform: uppercase; color: var(--ash);
}

.nav { display: flex; align-items: center; gap: 28px; }
.nav__list { display: flex; align-items: center; gap: 26px; }
.nav__link {
  position: relative; font-size: 11px; font-weight: 500; letter-spacing: .19em;
  text-transform: uppercase; padding-block: 6px; transition: color .25s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--beacon); transition: right .3s var(--ease);
}
.nav__link:hover { color: var(--beacon); }
.nav__link:hover::after { right: 0; }

/* --- Pills --------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 24px; border: 1px solid var(--hairline); border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; white-space: nowrap;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.pill:hover { border-color: var(--beacon); background-color: rgba(79, 168, 255, .12); }
.pill--solid { background-color: rgba(8, 12, 20, .72); backdrop-filter: blur(8px); }

.pill__arrow {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s var(--ease);
}
.pill:hover .pill__arrow { transform: translateX(4px); }

/* --- Burger -------------------------------------------------------------- */
.burger {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
.burger__bar { position: relative; width: 22px; height: 1px; background: currentColor; }
.burger__bar::before, .burger__bar::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 1px;
  background: currentColor; transition: transform .3s var(--ease);
}
.burger__bar::before { top: -7px; }
.burger__bar::after  { top: 7px; }
.burger[aria-expanded="true"] .burger__bar { background: transparent; }
.burger[aria-expanded="true"] .burger__bar::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar::after  { transform: translateY(-7px) rotate(-45deg); }

/* --- The art ------------------------------------------------------------- */
/* Declared here, not just in the pinned block, so the containment context is
   established before any cqw is resolved. Harmless in the stacked layout. */
.frame { container-type: inline-size; }

/* The art is 3:2 and a browser viewport is nearer 2:1, so fitting the whole
   composition on screen leaves bars at the sides. They are filled with a
   blurred, darkened enlargement of the art itself -- the frame reads as
   deliberate rather than as dead space. A wider re-export removes the need. */
.stage::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--hero);
  background-size: cover;
  background-position: center;
  filter: blur(70px) saturate(.55) brightness(.38);
  transform: scale(1.15);
  pointer-events: none;
}
.no-hero .stage::before { display: none; }

.frame__art { width: 100%; height: auto; aspect-ratio: 1536 / 1024; object-fit: cover; }

/* Legibility veil. Hidden here -- in the stacked layout the text sits on solid
   void and darkening the picture would only spoil it. See the pinned block. */
.frame__veil { display: none; }
.frame__art--placeholder {
  background:
    radial-gradient(58% 46% at 16% 74%, rgba(255, 138, 61, .30), transparent 68%),
    radial-gradient(52% 42% at 74% 16%, rgba(79, 168, 255, .22), transparent 70%),
    radial-gradient(90% 70% at 50% 0%,  #10192B, transparent 72%), var(--void);
}

/* --- Stacked content ----------------------------------------------------- */
.hero, .path, .systems, .sig, .immersive, .tiles, .baseline {
  padding-inline: var(--gut);
}
.hero { padding-top: clamp(28px, 6vw, 52px); }

.hero__title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .24em;
  font-size: clamp(40px, 12vw, 78px); line-height: .92;
  letter-spacing: -.03em; text-transform: uppercase;
}
.hero__word:nth-child(1), .hero__word:nth-child(2) { flex: 0 0 100%; }
/* Sizes are relative to .hero__title, so changing that one value rescales the
   whole lockup and keeps these proportions. Matches the concept: FROM reads
   quieter than HERE, and `to` is a small outline rather than a third shout. */
.hero__word--light { font-size: .62em; font-weight: 250; font-stretch: 96%; }
.hero__word--heavy { font-size: 1em;   font-weight: 750; font-stretch: 104%; }
.hero__word--ghost {
  font-size: .42em; font-weight: 300; font-stretch: 96%;
  color: transparent; -webkit-text-stroke: 1px rgba(232, 238, 246, .72);
}
@supports not (-webkit-text-stroke: 1px #000) {
  .hero__word--ghost { color: rgba(232, 238, 246, .62); }
}

.hero__lede {
  margin-top: 22px; max-width: 44ch; font-size: 12px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; line-height: 1.85;
}
.hero__lede-line { display: block; }

.path {
  margin-top: clamp(32px, 7vw, 56px);
  display: grid; border-left: 1px solid var(--hairline-lo);
  margin-left: var(--gut); padding-left: 22px; padding-right: var(--gut);
}
.way { padding: 16px 0; border-bottom: 1px solid var(--hairline-lo); }
.way:last-child { border-bottom: 0; }

.way__btn { display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 14px; width: 100%; text-align: left; }
.way__dot {
  grid-row: 1; margin-left: -27px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--beacon);
  box-shadow: 0 0 0 4px rgba(79, 168, 255, .18), 0 0 16px 2px rgba(79, 168, 255, .5);
}
.way:first-child .way__dot {
  background: var(--ember);
  box-shadow: 0 0 0 4px rgba(255, 138, 61, .18), 0 0 16px 2px rgba(255, 138, 61, .45);
}
.way__index { font-size: 17px; font-weight: 300; font-stretch: 118%; letter-spacing: .12em; color: var(--ash); }
.way__title { justify-self: start; font-size: 17px; font-weight: 600; font-stretch: 108%; letter-spacing: .1em; text-transform: uppercase; }
.way__body { margin-top: 12px; }
.way__line { display: block; font-size: 10px; letter-spacing: .17em; text-transform: uppercase; line-height: 1.8; color: var(--ash); }
.way__btn[aria-expanded="false"] + .way__body { display: none; }

.systems { margin-top: clamp(40px, 9vw, 72px); }
.systems__title { font-size: 19px; font-weight: 600; font-stretch: 106%; letter-spacing: .11em; text-transform: uppercase; }
.systems__title .is-accent { color: var(--beacon); }
.systems__lede { margin-top: 11px; font-size: 11px; letter-spacing: .17em; text-transform: uppercase; color: var(--ash); }

.caps { margin-top: 28px; display: grid; gap: 20px; max-width: 320px; }
.cap { display: flex; align-items: center; gap: 18px; }
.cap__glyph {
  flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--hairline); border-radius: 50%; background: rgba(79, 168, 255, .06);
}
.cap__glyph svg { width: 18px; height: 18px; fill: none; stroke: var(--beacon); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cap__title { display: block; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.cap__note { display: block; margin-top: 3px; font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ash-dim); }

.sig { margin-top: 40px; }
.sig__mark { display: block; font-size: 32px; font-weight: 300; font-stretch: 118%; letter-spacing: .06em; line-height: 1; }
.sig__mark .is-accent { color: var(--beacon); }
.sig__line { display: block; margin-top: 7px; font-size: 10px; letter-spacing: .17em; text-transform: uppercase; color: var(--ash); }
.sig__line:first-of-type { margin-top: 15px; }

.immersive { margin-top: clamp(40px, 9vw, 72px); padding-top: clamp(32px, 6vw, 52px); border-top: 1px solid var(--hairline-lo); }
.immersive__title { font-size: 19px; font-weight: 600; font-stretch: 106%; letter-spacing: .13em; text-transform: uppercase; }
.immersive__lede { margin-top: 11px; font-size: 11px; letter-spacing: .17em; text-transform: uppercase; color: var(--ash); }

.tiles { margin-top: 26px; display: grid; gap: 16px; }
.tile {
  position: relative; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--hairline-lo); background: rgba(12, 19, 32, .55);
  transition: border-color .3s var(--ease);
}
.tile:hover { border-color: rgba(79, 168, 255, .4); }
.tile__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* A painted tile has no image of its own -- the artwork supplies the picture.
   In stacked mode there is no artwork behind it, so it gets a stand-in. */
.tile.is-painted::before {
  content: ""; display: block; aspect-ratio: 16 / 10;
  background:
    radial-gradient(70% 70% at 30% 30%, rgba(79, 168, 255, .26), transparent 70%),
    linear-gradient(140deg, #101B2E, #060A12);
}
.tile__text { display: block; padding: 14px 16px 16px; }
.tile__title { display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; }
.tile__note { display: block; margin-top: 6px; font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; line-height: 1.6; color: var(--ash-dim); }

.baseline {
  margin-top: clamp(40px, 9vw, 72px);
  display: grid; gap: 24px; justify-items: start;
}
.baseline__stack-line { display: block; font-size: 13px; font-weight: 300; letter-spacing: .42em; text-transform: uppercase; line-height: 1.85; color: rgba(232, 238, 246, .72); }
.baseline__rule { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.baseline__mark { font-size: 12px; font-weight: 600; font-stretch: 112%; letter-spacing: .26em; text-transform: uppercase; }
.baseline__strap { font-size: 10px; letter-spacing: .19em; text-transform: uppercase; color: var(--ash); }

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

/* --- Mobile nav drawer (base layout only) -------------------------------- */
.nav {
  position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; align-items: stretch; gap: 0;
  padding: 8px var(--gut) 26px;
  background: rgba(4, 6, 11, .96); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hairline-lo);
  display: none;
}
.nav.is-open { display: flex; }
.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.nav__item { border-bottom: 1px solid var(--hairline-lo); }
.nav__link { display: block; padding: 16px 0; }
.nav__link::after { display: none; }
.pill--nav { margin-top: 20px; justify-content: center; }

/* ==========================================================================
   PINNED LAYOUT — the art is the layout
   ========================================================================== */
@media (min-width: 1280px) {

  .frame > .masthead {
    position: absolute; top: 0; left: 0; right: 0; z-index: 10;
    padding: 1.95cqw 2.9cqw;
    background: none; backdrop-filter: none; border-bottom: 0;
  }
  .masthead.is-stuck { background: none; }

  .burger { display: none; }

  .nav {
    position: static; display: flex; flex-direction: row; align-items: center;
    gap: 2.6cqw; padding: 0; background: none; backdrop-filter: none; border-bottom: 0;
  }
  .nav__list { flex-direction: row; align-items: center; gap: 2.3cqw; }
  .nav__item { border-bottom: 0; }
  .nav__link { display: inline-block; padding-block: .4cqw; font-size: .72cqw; }
  .nav__link::after { display: block; }
  .pill--nav { margin-top: 0; }

  .wordmark__mark { font-size: 2.2cqw; }
  .wordmark__tagline { margin-top: .46cqw; font-size: .62cqw; letter-spacing: .46em; }

  .pill { gap: .78cqw; padding: .91cqw 1.69cqw; font-size: .68cqw; border-radius: 999px; }
  .pill__arrow { width: .98cqw; height: .98cqw; }

  /* --- The frame --------------------------------------------------------- */
  /* Sized from the viewport's HEIGHT, not its width, so the whole composition
     fits on screen without scrolling. width = min(everything available,
     whatever 100svh implies at 3:2) and aspect-ratio derives the rest.

     container-type is load-bearing, not decoration: it makes 1cqw equal 1% of
     THIS box. Since the frame is no longer full-bleed, vw would desynchronise
     the type from the art and every label would drift off its feature. */
  .frame {
    position: relative;
    width: min(100vw, calc(100svh * 1.5));
    aspect-ratio: 1536 / 1024;
    margin-inline: auto;
  }
  /* Three explicit layers inside .frame, bottom to top:
       0  .frame__art   the picture
       1  .frame__veil  the legibility grade
       2  every pinned block
      10  .masthead
     None of these may be left at z-index:auto. A positioned element with
     an explicit z-index paints above every positioned auto sibling no
     matter where it sits in the DOM -- which is what put the veil on top
     of the text instead of under it. */
  .frame__art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }

  /* Every pinned block. --w/--h are optional; blocks without them size to
     content. Nothing here sets a background -- the art shows through. */
  .frame > .hero,
  .frame > .systems,
  .frame > .sig,
  .frame > .immersive,
  .frame > .path > .way,
  .frame > .tiles > .tile,
  .frame > .baseline {
    position: absolute;
    z-index: 2;
    left: var(--x, 0);
    top: var(--y, 0);
    width: var(--w, auto);
    margin: 0;
    padding: 0;
  }
  /* Deliberately NOT `border: 0` here. This rule is (0,2,0) and would outrank
     .tile / .tile:hover at (0,1,0) and (0,2,0), zeroing the border width so the
     hover outline could never show. Borders are cleared per element instead. */

  .frame > .path,
  .frame > .tiles {
    position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; display: block;
    border: 0; pointer-events: none;
  }
  .frame > .path > .way { border-bottom: 0; }
  .frame > .path > .way,
  .frame > .tiles > .tile { pointer-events: auto; }

  /* --- Legibility veil ---------------------------------------------------
     ONE full-frame layer, not a scrim per block.

     Per-block scrims were tried and abandoned: a gradient confined to a text
     block's own box gets clipped at that box's edges before it reaches
     transparent, and a clipped gradient has a visible edge -- it reads as a
     slab behind the words. Sizing each box large enough to complete the fade
     meant boxes roughly 2.5x the text width, which then overlapped each other
     and stacked into darker patches.

     A single frame-wide layer cannot clip, because its box IS the frame.

     Two parts:
       - a directional grade (left, top, bottom) that also pushes the artwork
         toward the moodier balance of the original concept, where the left
         side was considerably darker than this render;
       - two soft pools, for the only two labels that land on genuinely lit
         artwork rather than sky or panel.

     THE POOLS ARE TIED TO PIN COORDINATES. Their centres track 02 TRAVEL and
     the MITD signature. Move either pin in home-content.php and move the
     matching pool here, or the label walks out of its own pool.

     Every gradient is sized and centred so it reaches full transparency before
     any frame edge. Keep it that way -- a gradient that meets an edge mid-fade
     is exactly what produced the visible slabs.
     ---------------------------------------------------------------------- */
  .frame__veil {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      /* pool: 02 TRAVEL, over sunlit cloud and the spacecraft */
      radial-gradient(ellipse 26% 22% at 33% 40%,
        rgba(3, 6, 12, .74) 0%, rgba(3, 6, 12, .34) 46%, rgba(3, 6, 12, 0) 74%),
      /* pool: MITD signature, over the android's lit torso */
      radial-gradient(ellipse 20% 19% at 70% 81%,
        rgba(3, 6, 12, .66) 0%, rgba(3, 6, 12, .30) 48%, rgba(3, 6, 12, 0) 76%),
      /* grade: left -- carries the headline, the lede and 01 LAUNCH */
      linear-gradient(to right,
        rgba(3, 6, 12, .88) 0%, rgba(3, 6, 12, .62) 14%,
        rgba(3, 6, 12, .24) 28%, rgba(3, 6, 12, 0) 42%),
      /* grade: top -- carries the masthead */
      linear-gradient(to bottom,
        rgba(3, 6, 12, .74) 0%, rgba(3, 6, 12, .22) 13%, rgba(3, 6, 12, 0) 22%),
      /* grade: bottom -- carries the baseline */
      linear-gradient(to top,
        rgba(3, 6, 12, .80) 0%, rgba(3, 6, 12, .34) 11%, rgba(3, 6, 12, 0) 20%);
  }

  /* --- Hero -------------------------------------------------------------- */
  .hero { text-shadow: var(--lift); }
  /* Base size for the heavy words. The light and ghost words take their size
     from this via em, so the whole lockup scales from one number. */
  .hero__title { font-size: 5.6cqw; gap: 0 .24em; }
  .hero__lede { margin-top: 1.7cqw; max-width: none; font-size: .91cqw; line-height: 1.9; }

  /* --- Waypoints --------------------------------------------------------- */
  /* The flight arc and its marker dots are painted into the art, so the CSS
     dots and the connecting rule are both suppressed here. */
  .path { border-left: 0; }
  .way { padding: 0; border-bottom: 0; text-shadow: var(--lift); }
  .way__dot { display: none; }
  .way__btn { grid-template-columns: auto; row-gap: 0; column-gap: 0; }
  .way__index { grid-row: 1; font-size: 1.37cqw; }
  .way__title { grid-row: 2; font-size: 1.37cqw; }
  .way__body { margin-top: .72cqw; }
  .way__line { font-size: .72cqw; line-height: 1.75; color: rgba(232, 238, 246, .88); }
  .way__btn[aria-expanded="false"] + .way__body { display: block; }

  .way__btn:hover ~ .way__body .way__line { color: var(--ice); }
  .way__btn:hover .way__title { color: var(--beacon); }

  /* --- Systems ----------------------------------------------------------- */
  .systems { text-shadow: var(--lift); }
  .systems__title { font-size: 1.56cqw; }
  .systems__lede { margin-top: .78cqw; font-size: .78cqw; color: rgba(232, 238, 246, .82); }
  .caps { margin-top: 2.3cqw; gap: 1.37cqw; max-width: none; }
  .cap { gap: 1.17cqw; }
  .cap__glyph { width: 2.73cqw; height: 2.73cqw; }
  .cap__glyph svg { width: 1.17cqw; height: 1.17cqw; stroke-width: 1.2; }
  .cap__title { font-size: .91cqw; }
  .cap__note { margin-top: .2cqw; font-size: .65cqw; color: rgba(232, 238, 246, .74); }

  .sig { text-shadow: var(--lift); }
  .sig__mark { font-size: 2.73cqw; }
  .sig__line { margin-top: .46cqw; font-size: .72cqw; color: rgba(232, 238, 246, .82); }
  .sig__line:first-of-type { margin-top: .98cqw; }

  /* --- Immersive --------------------------------------------------------- */
  .immersive { margin: 0; padding: 0; border-top: 0; text-shadow: var(--lift); }
  .immersive__title { font-size: 1.16cqw; white-space: nowrap; }
  .immersive__lede { margin-top: .78cqw; font-size: .78cqw; color: rgba(232, 238, 246, .82); }

  .tiles { gap: 0; }

  .tile {
    height: var(--h, auto);
    display: flex; align-items: flex-end;
    border-radius: .78cqw; background: none;
    border-color: transparent;
  }

  /* A painted tile gets no hover outline. The screens in the artwork are drawn
     in perspective, so an axis-aligned rounded rect cannot be made to sit on
     one -- nudging coordinates only moves the misalignment around. The outline
     returns automatically once real card images land, because then the card IS
     the frame and alignment is exact by construction. */
  .tile.is-imaged { transition: border-color .3s var(--ease); }
  .tile.is-imaged:hover { border-color: rgba(79, 168, 255, .55); }

  /* Painted: the screen is in the artwork. No stand-in, no background --
     just a scrim so the label stays legible over whatever is beneath it. */
  .tile.is-painted::before {
    content: ""; position: absolute; inset: auto 0 0 0; height: 62%;
    aspect-ratio: auto; display: block; border-radius: 0 0 .78cqw .78cqw;
    background: linear-gradient(to top, rgba(4, 6, 11, .92), rgba(4, 6, 11, 0));
  }

  /* Imaged: a real render replaces the painted screen. */
  .tile.is-imaged .tile__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    aspect-ratio: auto; object-fit: cover;
  }
  .tile.is-imaged::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 62%;
    background: linear-gradient(to top, rgba(4, 6, 11, .92), rgba(4, 6, 11, 0));
  }

  .tile__text { position: relative; z-index: 2; padding: .78cqw .98cqw .85cqw; }
  .tile__title { font-size: .85cqw; }
  .tile__note { margin-top: .33cqw; font-size: .65cqw; color: rgba(232, 238, 246, .78); }

  /* --- Baseline ---------------------------------------------------------- */
  .frame > .baseline {
    left: 0; width: 100%; padding: 0 2.9cqw;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; gap: 2.6cqw;
    text-shadow: var(--lift);
  }
  .baseline__stack-line { font-size: .98cqw; }
  .baseline__rule { justify-self: center; flex-wrap: nowrap; gap: 1.17cqw; }
  .baseline__rule::before {
    content: ""; width: 5.7cqw; height: 1px;
    background: linear-gradient(to right, transparent, var(--hairline));
  }
  .baseline__mark { font-size: .85cqw; }
  .baseline__strap { font-size: .72cqw; color: rgba(232, 238, 246, .80); }
  .baseline .pill--solid { justify-self: end; }
}

/* ==========================================================================
   Motion — one orchestrated arrival, nothing else
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .lift { opacity: 0; transform: translateY(14px); }
  .js .lift.is-in {
    opacity: 1; transform: none;
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: var(--delay, 0ms);
  }
}

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