/* hatch.css — THE HATCH SITE THEME.
   =========================================================================
   A whole-site look, selected by one manifest key: `web.site.theme: "hatch"`.
   Loaded after terminal.css (the house look) and soundchrome.css, before the
   owner's own overlay. See assemble.py::site_theme for the switch, and
   instrument.css / fracture.css / passage.css / signal.css for the themes
   this one sits beside.

   WHY IT EXISTS (New Age Dinos, 2026-08-23, the owner's own words about his
   live site): "looks far too similar to other server websites. wayyy too
   similar. also background should be more visible for their logo ... make
   websote design different, make it similar to natural selection instead
   kind of."

   The reference he named (nsservers.net) is an APP GATE, not a brochure: a
   single centered column over a soft brand glow, the mark above the title,
   explicit numbered steps, one loud committing button, everything rounded
   and quiet around one warm centre. This sheet ports that SHAPE as a theme
   layer — never that site's colours or its mark (the ported-metaphor law:
   his words named the look, the identity stays this owner's).

   DIRECTION CONTRACT (the one this sheet is audited against)
   ---------------------------------------------------------------------------
   THESIS: the page is a STICKER BOOK AT DUSK. The owner's own painterly
     crest is the world — fully visible, never dimmed to a texture — and
     every region is a rounded sticker plate laid over it.
   OWN-WORLD:
     - THE ART IS VISIBLE. The background plate ships bright on purpose and
       this sheet never veils it whole; text buys its contrast from its OWN
       plate (an egg-shell card with a real rim), not from muting the world.
     - TWO FACES. Display slab caps for names, headings and PRICES; the sans
       for every sentence. The mono face appears nowhere — this is the
       anti-terminal, and that is exactly the distance the owner asked for.
     - EVERYTHING ROUND. The crest is a round badge full of round eggs, so
       radii run pill-and-egg: chips are pills, plates are eggs, the one
       square corner on the whole site is the browser's own scrollbar.
     - STICKER RIMS. Every plate carries a visible 2px rim cut from the
       owner's palette, the way the crest carries its berry outline. Accent
       families rotate per plate (green / sunset / berry) so a card row
       reads as a sticker sheet, not a grid of one card.
     - ONE LOUD BUTTON. The committing action is a big filled pill in the
       owner's accent; everything else is quiet outline. NS's gate has
       exactly one red button — this world has exactly one green one.
   BONES (what makes it structurally unlike every sibling theme):
     - The column NARROWS (~940px) and everything centres: hero, section
       heads, status, footer. Sibling themes are left-ruled wide pages; this
       one is a centred app column.
     - The hero is a BADGE: the owner's mark sits large above the name,
       the name is the biggest thing on the site, the two CTAs sit beneath
       as pills. No side-by-side hero grid survives.
     - The live status is a CHIP STRIP, not a board.
     - Join steps are NUMBERED EGGS (counter pips), not a log.
   MOTION: none of its own. The house look's transitions stay; this sheet
     ships no script (SITE_THEME_SCRIPTS has no entry) — nothing scrambles,
     nothing decodes, nothing types. A heading here says its words plainly.

   THE PRICE OF THE LAYER (test_site_theme.py):
     tokens only — every colour is var()/color-mix over the owner's palette;
     every rule scoped to [data-site-theme="hatch"]; no !important.
   ========================================================================= */

html[data-site-theme="hatch"] {
  /* the sticker vocabulary, cut entirely from the owner's own palette */
  --ht-rim: color-mix(in srgb, var(--accent) 55%, transparent);
  --ht-rim-soft: color-mix(in srgb, var(--accent) 26%, transparent);
  --ht-rim-warm: color-mix(in srgb, var(--warn) 60%, transparent);
  --ht-rim-berry: color-mix(in srgb, var(--bad) 55%, transparent);
  --ht-shell: color-mix(in srgb, var(--bg-2) 86%, transparent);
  --ht-shell-deep: color-mix(in srgb, var(--bg-deep) 90%, transparent);
  --ht-glow: color-mix(in srgb, var(--accent) 22%, transparent);
  --ht-glow-warm: color-mix(in srgb, var(--warn) 18%, transparent);
  --ht-egg: 26px;
  --ht-pill: 999px;
}

/* ---- the world: the crest stays visible ------------------------------- */
html[data-site-theme="hatch"] body {
  background:
    radial-gradient(120% 90% at 50% 0%,
      transparent 0%, var(--ht-shell-deep) 78%),
    var(--art-background) center 12% / cover no-repeat fixed,
    var(--bg-deep);
}
html[data-site-theme="hatch"] .backdrop,
html[data-site-theme="hatch"] .grain {
  display: none;
}

/* ---- the column narrows and centres ----------------------------------- */
html[data-site-theme="hatch"] .wrap {
  max-width: 960px;
}
html[data-site-theme="hatch"] main {
  padding-top: 24px;
}

/* ---- nav: a floating pill bar ----------------------------------------- */
html[data-site-theme="hatch"] .nav {
  background: var(--ht-shell-deep);
  border-bottom: 0;
  backdrop-filter: blur(14px) saturate(1.15);
}
html[data-site-theme="hatch"] .nav-in {
  /* 960 wrapped the tab row onto two lines the day the owner's site grew to
     five tabs plus a two-currency chip (2026-08-24); 1080 keeps one row at
     desktop widths and is still a centred app column, not a wide page. */
  max-width: 1080px;
}
html[data-site-theme="hatch"] .nav-links a {
  border-radius: var(--ht-pill);
  padding: 8px 13px;
  font-family: var(--font-ui);
  letter-spacing: .03em;
}
/* ---- the player hub's records wear the egg (2026-08-24) ------------------ */
html[data-site-theme="hatch"] .hub-plate,
html[data-site-theme="hatch"] .hub-hero,
html[data-site-theme="hatch"] .hub-sheet-in {
  border-radius: var(--ht-egg);
  border: 2px solid var(--ht-rim-soft);
  background: var(--ht-shell);
}
html[data-site-theme="hatch"] .hub-hero .lvc-specimen {
  border-radius: calc(var(--ht-egg) - 2px) 0 0 calc(var(--ht-egg) - 2px);
  border: 0;
}
html[data-site-theme="hatch"] .hub-tile,
html[data-site-theme="hatch"] .hub-gauge,
html[data-site-theme="hatch"] .hub-say,
html[data-site-theme="hatch"] .hub-slot,
html[data-site-theme="hatch"] .hub-item,
html[data-site-theme="hatch"] .hub-stat,
html[data-site-theme="hatch"] .hub-empty,
html[data-site-theme="hatch"] .hub-design,
html[data-site-theme="hatch"] .hub-pick,
html[data-site-theme="hatch"] .hub-sheet-row,
html[data-site-theme="hatch"] .hub-ledger-row {
  border-radius: calc(var(--ht-egg) * .6);
}
html[data-site-theme="hatch"] .hub-slot-act .btn,
html[data-site-theme="hatch"] .hub-tab {
  border-radius: var(--ht-pill);
}
html[data-site-theme="hatch"] .nav-links a[aria-current="page"],
html[data-site-theme="hatch"] .nav-links a.active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid var(--ht-rim-soft);
  color: var(--accent-hi);
}

/* ---- the hero badge: mark above the name, everything centred ---------- */
html[data-site-theme="hatch"] .hero {
  padding-top: 44px;
}
html[data-site-theme="hatch"] .hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
}
html[data-site-theme="hatch"] .hero-copy {
  text-align: center;
  max-width: 660px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* the owner's mark, LARGE, above the name — the logo-forward ask */
html[data-site-theme="hatch"] .hero-copy::before {
  content: "";
  width: clamp(150px, 22vw, 210px);
  aspect-ratio: 1;
  background: var(--art-mark) center / contain no-repeat;
  filter: drop-shadow(0 14px 34px var(--ht-glow))
          drop-shadow(0 4px 12px var(--ht-shell-deep));
  margin-bottom: 14px;
}
html[data-site-theme="hatch"] .hero-art {
  display: none;   /* the mark IS the hero art; a second picture would fight it */
}
html[data-site-theme="hatch"] .hero-copy .kicker {
  order: 1;
  border: 1px solid var(--ht-rim-warm);
  border-radius: var(--ht-pill);
  padding: 5px 14px;
  color: var(--warn);
  background: var(--ht-shell-deep);
  font-family: var(--font-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
}
html[data-site-theme="hatch"] .hero-copy h1 {
  order: 2;
  font-family: var(--font-display);
  font-size: clamp(46px, 8vw, 84px);
  line-height: .96;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--fg);
  text-shadow: 0 4px 26px var(--ht-shell-deep),
               0 1px 0 var(--ht-shell-deep);
  margin: 10px 0 6px;
}
html[data-site-theme="hatch"] .hero-copy .lede {
  order: 3;
  color: var(--fg-dim);
  background: var(--ht-shell-deep);
  border-radius: var(--ht-egg);
  padding: 8px 18px;
}
html[data-site-theme="hatch"] .hero-cta {
  order: 4;
  justify-content: center;
  margin-top: 18px;
  gap: 12px;
}

/* ---- buttons: one loud pill, quiet outlines --------------------------- */
html[data-site-theme="hatch"] .btn {
  border-radius: var(--ht-pill);
  font-family: var(--font-ui);
  letter-spacing: .06em;
  padding: 12px 26px;
  border: 1px solid var(--ht-rim-soft);
  background: var(--ht-shell-deep);
}
html[data-site-theme="hatch"] .btn-primary {
  /* the house law: the brand accent never fills a control RAW - the fill is
     a mixed plate so mark and control can never be confused */
  background: color-mix(in srgb, var(--accent) 82%, var(--bg-deep));
  color: var(--on-primary);
  border-color: transparent;
  box-shadow: 0 8px 26px var(--ht-glow);
}
html[data-site-theme="hatch"] .btn-primary:hover {
  background: color-mix(in srgb, var(--accent-hi) 82%, var(--bg-deep));
  color: var(--on-primary);
}

/* ---- section heads centre, eyebrows become chips ---------------------- */
html[data-site-theme="hatch"] .sec-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
}
html[data-site-theme="hatch"] .sec-head .eyebrow {
  border: 1px solid var(--ht-rim-soft);
  border-radius: var(--ht-pill);
  padding: 4px 14px;
  background: var(--ht-shell-deep);
  color: var(--accent);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-family: var(--font-ui);
}
html[data-site-theme="hatch"] .sec-head h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(26px, 4vw, 40px);
  color: var(--fg);
  text-shadow: 0 2px 18px var(--ht-shell-deep);
}

/* ---- plates: egg-shell stickers with real rims ------------------------ */
html[data-site-theme="hatch"] .card,
html[data-site-theme="hatch"] .status,
html[data-site-theme="hatch"] .gate,
html[data-site-theme="hatch"] .tier-card,
html[data-site-theme="hatch"] .notice {
  border-radius: var(--ht-egg);
  background: var(--ht-shell);
  border: 2px solid var(--ht-rim-soft);
  box-shadow: 0 14px 40px var(--ht-shell-deep);
  backdrop-filter: blur(10px) saturate(1.1);
}

/* the sticker sheet: rims rotate through the crest's families */
html[data-site-theme="hatch"] .grid > .card:nth-of-type(3n+2),
html[data-site-theme="hatch"] .grid > .tier-card:nth-of-type(4n+2) {
  border-color: var(--ht-rim-warm);
}
html[data-site-theme="hatch"] .grid > .card:nth-of-type(3n),
html[data-site-theme="hatch"] .grid > .tier-card:nth-of-type(4n) {
  border-color: var(--ht-rim-berry);
}
html[data-site-theme="hatch"] .grid > .tier-card:nth-of-type(4n+3) {
  border-color: var(--ht-rim);
}

/* ---- live status: a centred chip strip -------------------------------- */
html[data-site-theme="hatch"] .status {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
html[data-site-theme="hatch"] .status-top {
  justify-content: center;
}
html[data-site-theme="hatch"] .status-figs {
  justify-content: center;
  gap: 10px;
}
html[data-site-theme="hatch"] .status-figs .fig {
  border: 1px solid var(--ht-rim-soft);
  border-radius: var(--ht-pill);
  padding: 8px 18px;
  background: var(--ht-shell-deep);
}
html[data-site-theme="hatch"] .status-figs .fig b {
  font-family: var(--font-display);
  letter-spacing: .03em;
}

/* ---- join steps: numbered eggs ---------------------------------------- */
html[data-site-theme="hatch"] .steps {
  counter-reset: hatchstep;
}
html[data-site-theme="hatch"] .steps li {
  counter-increment: hatchstep;
  border: 0;
  padding-left: 54px;
  position: relative;
}
html[data-site-theme="hatch"] .steps li::before {
  content: counter(hatchstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 40px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;   /* an egg */
  border: 2px solid var(--ht-rim-warm);
  background: var(--ht-shell-deep);
  color: var(--warn);
  font-family: var(--font-display);
  letter-spacing: .04em;
}
html[data-site-theme="hatch"] .steps li .num {
  display: none;   /* the egg pip replaces the house look's index chip */
}

/* ---- tier cards: the shop window -------------------------------------- */
html[data-site-theme="hatch"] .tier-card {
  text-align: center;
  padding-top: 26px;
}
html[data-site-theme="hatch"] .tier-top {
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
html[data-site-theme="hatch"] .tier-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--fs-4);
}
html[data-site-theme="hatch"] .tier-price {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  color: var(--accent-hi);
  letter-spacing: .02em;
}
html[data-site-theme="hatch"] .tier-benefits {
  text-align: left;
}
html[data-site-theme="hatch"] .tier-benefits li::marker {
  color: var(--accent);
}
html[data-site-theme="hatch"] .tier-card .btn {
  width: 100%;
  justify-content: center;
}
html[data-site-theme="hatch"] .tier-card.is-current {
  border-color: var(--ht-rim);
  box-shadow: 0 0 0 4px var(--ht-glow), 0 14px 40px var(--ht-shell-deep);
}

/* ---- gates (sign in / supporters only): the NS card ------------------- */
html[data-site-theme="hatch"] .gate {
  max-width: 560px;
  margin-inline: auto;
  padding: 34px 26px;
}
html[data-site-theme="hatch"] .gate-ico {
  color: var(--accent);
}
html[data-site-theme="hatch"] .gate h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: var(--fs-4);
}

/* ---- the supporter portal wears the same stickers --------------------- */
html[data-site-theme="hatch"] .spp-stat {
  text-align: center;
}
html[data-site-theme="hatch"] .spp-stat-value {
  font-family: var(--font-display);
  color: var(--accent-hi);
}
html[data-site-theme="hatch"] .spp-action .btn {
  width: 100%;
  justify-content: center;
}

/* ---- footer: centred, quiet ------------------------------------------- */
html[data-site-theme="hatch"] .footer {
  border-top: 0;
  background: var(--ht-shell-deep);
  text-align: center;
}
html[data-site-theme="hatch"] .footer-in {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* ---- THE TERMINAL IS DELETED HERE, NOT RESTYLED ------------------------
   The house look is a terminal kit and its four tells are exactly what
   "wayyy too similar" points at (the instrument theme paid for this list
   first - same selectors, same specificity war, hatch scope):
   (a) the `domain:~$` shell prompt on the hero kicker AND on every interior
       page head, (b) the typewriter H1 + its blinking block, (c) the
       registration diamond opening every label, (d) the bracketed nav and
       (e) the wordmark's block cursor. Every word survives; the voice goes. */
html[data-site-theme="hatch"] .hero .kicker::before { content: none; }
html[data-site-theme="hatch"]
  :is(.page-head, .sec-head:has(> .page-h1)) .eyebrow::before {
  content: none;
}
html[data-site-theme="hatch"] .eyebrow::before { content: none; }
html[data-site-theme="hatch"] .hero h1::after { content: none; }
html[data-site-theme="hatch"][data-wc-motion="on"] .hero .kicker,
html[data-site-theme="hatch"][data-wc-motion="on"] .hero h1 {
  animation: none;
}
html[data-site-theme="hatch"] .nav .nav-links a::before,
html[data-site-theme="hatch"] .nav .nav-links.grouped a::before,
html[data-site-theme="hatch"] .nav-links a::before,
html[data-site-theme="hatch"] .nav-links.grouped a::before,
html[data-site-theme="hatch"] .nav .nav-links a::after,
html[data-site-theme="hatch"] .nav .nav-links.grouped a::after,
html[data-site-theme="hatch"] .nav-links a::after,
html[data-site-theme="hatch"] .nav-links.grouped a::after,
html[data-site-theme="hatch"]
  .nav .nav-links a[aria-current="page"]::before,
html[data-site-theme="hatch"]
  .nav .nav-links.grouped a[aria-current="page"]::before,
html[data-site-theme="hatch"]
  .nav .nav-in:has(.nav-lang:not([hidden]):not(:empty))
  .nav-links.grouped a[aria-current="page"]::before {
  content: none;
}
html[data-site-theme="hatch"] .brand-cursor { display: none; }

/* the page heads join the display voice (Supporters / My Benefits) */
html[data-site-theme="hatch"] .page-h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  text-shadow: 0 2px 18px var(--ht-shell-deep);
}
html[data-site-theme="hatch"] .page-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
}
html[data-site-theme="hatch"] .page-head .eyebrow {
  border: 1px solid var(--ht-rim-soft);
  border-radius: var(--ht-pill);
  padding: 4px 14px;
  background: var(--ht-shell-deep);
  color: var(--accent);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-family: var(--font-ui);
}

/* ---- small screens ----------------------------------------------------- */
@media (max-width: 640px) {
  html[data-site-theme="hatch"] .hero-copy h1 {
    font-size: clamp(38px, 12vw, 52px);
  }
  html[data-site-theme="hatch"] .status-figs {
    flex-wrap: wrap;
  }
}