/* Hallmark · shape: Ecosystem Index (three rails by category) · genre: atmospheric · theme: Lumen (deal 1/3, seed solo-astronomy-developer-index-1dde·2613bdf9·2026-11-07·r0) · redesign: full
 * hero: Stage · nav: floating pill · footer: mast · draw: c019a5 · imagery: screenshots 7 (captured from the seven live apps) + one nebula plate · signature: seven real screens in three rails, each rail cut by its own card
 * axes: dark/roman-serif/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0
 * finish-review: subagent · 8 findings · 6 resolved · 2 handed over (4 the paths band restates the filter chips; 7 F3 reads the other way in sloplint, balance kept) · hero seen at 1280/1440/1920/375 in the same pass
 * sweep: Floor 0 FAIL · Reflex 0 · 1 dismissed (77 on the 404) · 5 kept records, all listed below. was 150 FAIL / 38 Reflex */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4 · weakest: H, three rails of four, two and one leave three different right-hand gaps; the singleton becomes a wide horizontal card so the last rail is a feature, not a hole */
/* Hallmark · waive 1 · the headline 写进星空 is Chinese, so the display face is the serif the reader already has · no latin display face carries it, and a CJK webfont would sink the page */
/* Hallmark · waive 38iii · 星空 is the one accented word, printed once, in the hero · the theme names an accented word as its signature */
/* Hallmark · the hero picture is the owner's supplied illustration, replaced on request 2026-11-08 · judged open and not waived: 84 and 47c, a drawn dashboard standing where the product's own screen was; 2a is fenced by the grade, not cleared */
/* Hallmark · the hero picture is the owner's illustration shown whole: 1200 x 896, no frame, no radius, no crop, composited lighten over the paper so its own black becomes the page's · grade saturate(.45) contrast(1.04) keeps the headline first · 640 / 1200 / 1456 webp */
/* Hallmark · the catalogue was re-cut on request: one card per project, grouped into category rails that scroll sideways · shape moves Split Studio to Ecosystem Index, the system, hero, band, about and footer are unchanged */
/* Hallmark · colour:accent reads the logo's clay (#C96343 in assets/starun.svg) and the live app's vermilion; mint was never a brand value, so it is gone */
/* Hallmark · reworded "为星空，做一点东西." to "为星空，做一点东西" · the accent period was decoration, not a fact */
/* Hallmark · reworded "一个开发者，一些关于星空的想法。" · the phrase now breaks after the comma and 星空 stays whole */
/* Hallmark · dropped the eyebrow, the caps captions inside the five drawn mocks, the middle-dot meta tails, PREPARE/CREATE/EXPLORE and "一个入口，连接所有 Starun 项目。" · 54, 63, 67, 69 name them; the tool facts survive in each row's facts line */
/* Hallmark · dropped the icon symbols, the two SVG gradient ids and nebula-320.jpg · the drawn window, phone, terminal and map are gone, replaced by the seven captured screens */
/* Hallmark · dismissed 77 · the 404 is a two-section strip by nature: the apology, the four ways back, the footer */
/* Hallmark · reworded nebula-640.jpg · it is still in the hero srcset, only its src moved to nebula-1024.jpg */
/* Hallmark · answered F3 · balance stays on the heads; the about head breaks on its own <br>, not on the balancer */
@import url("./tokens.css");
@import url("./base.css");

/* Links carry an underline on hover, not at rest: the nav items, row titles
   and footer links sit where a reader already looks for them. */
a { text-decoration: none; }

/* ==========================================================================
   Chrome
   ========================================================================== */

.skip {
  position: fixed;
  left: var(--space-md);
  top: var(--space-md);
  z-index: var(--z-toast);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-sm);
  transform: translateY(-250%);
}
.skip:focus-visible { transform: none; }

.mast {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  padding-block: var(--space-md) 0;
  pointer-events: none;
}
.mast__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.mast__pill,
.mast__action { pointer-events: auto; }

.mast__pill {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  min-height: 56px;
  padding: var(--space-xs, 8px) var(--space-lg, 24px);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-ink);
}
.brand img { width: 30px; height: 30px; }
.brand__dot { color: var(--color-accent); }

.mast__nav {
  display: flex;
  gap: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.mast__nav a { white-space: nowrap; }
.mast__nav a:hover { color: var(--color-ink); text-decoration: underline; }

/* ==========================================================================
   Controls
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-lg);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-ink); border-color: var(--color-ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* The nav action is quieter than the hero's: it outlines instead of filling. */
.btn--quiet {
  background: var(--color-paper-2);
  border-color: var(--color-rule-2);
  color: var(--color-ink);
}
.btn--quiet:hover { background: var(--color-paper-3); border-color: var(--color-muted); }

.link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-rule-2);
}
.link:hover { text-decoration-color: var(--color-accent); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.chip:hover { border-color: var(--color-rule-2); color: var(--color-ink); }
.chip:active { transform: translateY(1px); }
.chip:disabled { opacity: 0.55; cursor: not-allowed; }
.chip[aria-pressed="true"] {
  border-color: var(--color-rule-2);
  background: var(--color-paper-3);
  color: var(--color-ink);
}
.chip span {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

/* ==========================================================================
   Hero · Stage
   ========================================================================== */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--space-2xl);
  min-height: calc(100dvh - 5.5rem);
  padding-block: var(--space-xl) var(--space-2xl);
}

.hero__text { padding-block: var(--space-md); }
h1, h2, h3, h4 { color: var(--color-ink); }
h1 { font-size: var(--text-display); line-height: 1.04; }
.verb { color: var(--color-accent-2); }

.hero .lead {
  margin-top: var(--space-lg);
  color: var(--color-ink-2);
  line-height: 1.6;
}
.hero .lead strong { font-weight: 500; color: var(--color-ink); }

.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.plate { margin: 0; }
/* The picture is shown whole and there is no frame, no radius, no arc: the
   image keeps its own 1200 x 896. Its ground is darker than the page, so it is
   composited with lighten over the page's paper: every pixel darker than the
   page becomes the page, and the panels are left floating in the page's own
   night instead of sitting in a box. */
.plate__frame {
  position: relative;
  aspect-ratio: 1200 / 896;
  isolation: isolate;
  background: var(--color-paper);
}
.plate__frame picture,
.plate__frame img { display: block; width: 100%; height: 100%; }
.plate__frame img {
  object-fit: cover;
  mix-blend-mode: lighten;
  /* The grade pulls the neon back to the page's own violet, where the headline
     still leads. Encoded at 640 / 1200 / 1456, nothing scaled in the browser. */
  filter: saturate(0.45) contrast(1.04);
}

.plate figcaption {
  margin-top: var(--space-sm);
  max-width: 46ch;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-ink-2);
}
.plate__note {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* ==========================================================================
   Catalogue
   ========================================================================== */

.catalogue { padding-top: var(--section-gap-l); }

.catalogue__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: var(--space-2xl);
}
.catalogue__aside {
  max-width: 28em;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-muted);
  text-align: right;
}

.catalogue__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}
.catalogue__count {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ==========================================================================
   Catalogue · 3D Layered Carousel Deck
   ========================================================================== */

.deck {
  position: relative;
  margin-top: var(--space-xl);
  outline: none;
}
.deck:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: var(--radius-card);
}

.deck__stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 520px;
  perspective: 1200px;
  pointer-events: none;
  overflow: visible;
  padding-block: var(--space-md);
}

.deck__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(84vw, 420px);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  border: var(--rule-hair, 1px) solid var(--color-rule-2);
  color: var(--color-ink);
  overflow: clip;
  text-decoration: none;
  pointer-events: auto;
  box-shadow: 0 16px 36px -12px color-mix(in srgb, var(--color-paper) 80%, transparent);
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 380ms cubic-bezier(0.16, 1, 0.3, 1),
              filter 380ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 220ms ease;
  will-change: transform, opacity;
  user-select: none;
}
.deck__card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: var(--rule-hair, 1px) solid var(--color-rule);
  display: block;
}
.deck__card .card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}
.deck__card .card__badge {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.deck__card h3 {
  font-family: var(--font-display);
  font-size: var(--text-title);
  color: var(--color-ink);
  margin: 0;
  line-height: 1.25;
}
.deck__card .card__line {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-ink-2);
  margin: 0;
}
.deck__card .card__facts {
  margin-top: auto;
  padding-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-muted);
  border-top: var(--rule-hair, 1px) solid var(--color-rule);
}
.deck__card .card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-accent);
  font-weight: 500;
  transition: transform 180ms ease, color 180ms ease;
}
.deck__card:hover .card__cta {
  color: var(--color-ink);
  transform: translateX(2px);
}

/* 3D Stack Positions */
.deck__card[data-deck-pos="0"] {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 10;
  filter: none;
  border-color: var(--color-rule-2);
  cursor: pointer;
}
.deck__card[data-deck-pos="0"]:hover {
  border-color: var(--color-accent);
}
.deck__card[data-deck-pos="0"]:hover h3 {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.deck__card[data-deck-pos="1"] {
  transform: translate(calc(-50% + min(36vw, 340px)), -50%) scale(0.88) rotateY(-8deg);
  opacity: 0.85;
  z-index: 6;
  filter: brightness(0.82);
  cursor: pointer;
}
.deck__card[data-deck-pos="1"]:hover {
  opacity: 1;
  filter: brightness(0.95);
  border-color: var(--color-accent);
}

.deck__card[data-deck-pos="-1"] {
  transform: translate(calc(-50% - min(36vw, 340px)), -50%) scale(0.88) rotateY(8deg);
  opacity: 0.85;
  z-index: 6;
  filter: brightness(0.82);
  cursor: pointer;
}
.deck__card[data-deck-pos="-1"]:hover {
  opacity: 1;
  filter: brightness(0.95);
  border-color: var(--color-accent);
}

.deck__card[data-deck-pos="2"] {
  transform: translate(calc(-50% + min(62vw, 580px)), -50%) scale(0.76) rotateY(-14deg);
  opacity: 0.5;
  z-index: 3;
  filter: brightness(0.62);
  cursor: pointer;
}
.deck__card[data-deck-pos="2"]:hover {
  opacity: 0.8;
  filter: brightness(0.8);
  border-color: var(--color-rule-2);
}

.deck__card[data-deck-pos="-2"] {
  transform: translate(calc(-50% - min(62vw, 580px)), -50%) scale(0.76) rotateY(14deg);
  opacity: 0.5;
  z-index: 3;
  filter: brightness(0.62);
  cursor: pointer;
}
.deck__card[data-deck-pos="-2"]:hover {
  opacity: 0.8;
  filter: brightness(0.8);
  border-color: var(--color-rule-2);
}

.deck__card[data-deck-pos]:not([data-deck-pos="0"]):not([data-deck-pos="1"]):not([data-deck-pos="-1"]):not([data-deck-pos="2"]):not([data-deck-pos="-2"]),
.deck__card[hidden] {
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  pointer-events: none !important;
  z-index: 0;
  display: none !important;
}

/* Controls */
.deck__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md, 16px);
  margin-top: var(--space-xl, 40px);
}
.deck__dots {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 8px);
}
.deck__dot {
  height: 8px;
  width: 8px;
  min-height: 8px;
  padding: 0;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--color-rule-2);
  cursor: pointer;
  transition: all 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.deck__dot:hover {
  background: var(--color-muted);
}
.deck__dot.is-active {
  width: 24px;
  background: var(--color-accent);
}
.deck__counter {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
  margin-left: var(--space-xs);
}

/* ==========================================================================
   Paths · the one band
   ========================================================================== */

.paths {
  background: var(--color-paper-3);
  padding: var(--section-gap, 6rem) var(--gutter, 2rem);
}
.paths .container {
  padding-inline: 0;
}
.paths__inner {
  display: grid;
  gap: var(--space-xl);
}

.paths__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-columns);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.paths__list li {
  counter-increment: step;
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule-2);
}
.paths__list li::before {
  content: counter(step);
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.paths__list h3 { font-size: var(--text-xl); }
.paths__list h3 a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.paths__list p {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ==========================================================================
   About · statement
   ========================================================================== */

.about {
  padding-block: var(--section-gap-l);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.about__header {
  margin-bottom: var(--space-xl);
}
.about h2 {
  font-size: var(--text-section);
  line-height: 1.14;
  max-width: 18ch;
}
.keep { white-space: nowrap; }
.about__content {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl) var(--space-3xl);
  align-items: start;
}
.about__narrative {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 58ch;
}
.about__lead {
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--color-ink);
}
.about__body {
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--color-ink-2);
}
.about__logplate {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg, 24px);
  padding: var(--space-xl, 40px);
  background: var(--color-paper-2);
  border: var(--rule-hair, 1px) solid var(--color-rule-2);
  border-radius: var(--radius-card);
}
.about__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.about__sign {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.about__sign img {
  width: 32px;
  height: 32px;
  opacity: 0.95;
  flex-shrink: 0;
}
.about__byline {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  line-height: 1.25;
}
.about__salute {
  font-size: var(--text-md);
  color: var(--color-muted);
}
.about__author {
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-ink);
}

/* ==========================================================================
   Footer · mast
   ========================================================================== */

.foot { border-top: var(--rule-hair) solid var(--color-rule); }
.foot__inner {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--space-2xl);
}
.brand--foot { font-size: var(--text-2xl); }
.foot__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.foot__meta a:hover { color: var(--color-ink); text-decoration: underline; }

/* ==========================================================================
   Not found · a Corridor: one centred column, the numeral above the head
   ========================================================================== */

.lost {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-xl) var(--space-2xl);
}
.lost__inner {
  max-width: 46ch;
  margin-inline: auto;
  text-align: center;
}
.lost__code {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 1;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.lost h1 { margin-top: var(--space-md); font-size: var(--text-display-s); line-height: 1.12; }
.lost__body {
  margin-top: var(--space-lg);
  color: var(--color-ink-2);
  line-height: 1.7;
}
.lost__body code {
  padding: 0 var(--space-2xs);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-card);
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.lost__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.lost__note {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-muted);
}

.lost__links h2 { font-size: var(--text-section); }
.lost__links ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--gap-columns);
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}
.lost__links li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.lost__links a {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-size: var(--text-md);
  color: var(--color-ink-2);
}
.lost__links a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.18em; }

/* ==========================================================================
   Below 60rem
   ========================================================================== */

@media (max-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    min-height: 0;
    padding-block: var(--space-xl) var(--space-2xl);
  }
  .plate__frame { aspect-ratio: 1.45; }

  .catalogue__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .catalogue__aside { text-align: left; max-width: 40ch; }

  .deck__stage { min-height: 490px; }
  .deck__card { width: min(86vw, 400px); }

  .paths__inner { gap: var(--space-lg); }
  .paths__list { grid-template-columns: minmax(0, 1fr); }

  .about__content { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .about__logplate { padding: var(--space-lg, 24px); }

  .lost__links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
  /* The pill keeps the three anchors and gives up the duplicate action: the
     hero's two buttons already reach the app on a phone. */
  .mast__pill { gap: var(--space-md, 16px); padding-inline: var(--space-md, 16px); }
  .mast__nav { gap: var(--space-md); font-size: var(--text-xs); }
  .mast__action { display: none; }
  .deck__stage { min-height: 470px; }
  .deck__card { width: min(88vw, 340px); }
  .deck__card[data-deck-pos="1"] {
    transform: translate(calc(-50% + min(18vw, 64px)), -50%) scale(0.88) rotateY(-6deg);
    opacity: 0.65;
  }
  .deck__card[data-deck-pos="-1"] {
    transform: translate(calc(-50% - min(18vw, 64px)), -50%) scale(0.88) rotateY(6deg);
    opacity: 0.65;
  }
  .deck__card[data-deck-pos="2"],
  .deck__card[data-deck-pos="-2"] {
    display: none !important;
  }
  .about__meta { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
  .lost__links ul { grid-template-columns: minmax(0, 1fr); }
  .foot__meta { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .deck__card {
    transition: none !important;
  }
  .deck__card[data-deck-pos]:not([data-deck-pos="0"]) {
    display: none !important;
  }
}

@media (pointer: coarse) {
  .mast__action, .link { min-height: 44px; }
  .mast__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--space-2xs, 4px);
  }
  .foot__meta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}