/* ═══════════════════════════════════════════════════════════════════════════
   Red Warden Studios — the front page, below the hero.
   Created 2026-09-04 (session 35). Spec: Manifesto/HOMEPAGE_V2_SPEC.md §3/§3A.

   WHAT THIS REPLACED. Four full-height lore windows: a stranger scrolled past
   the best asset on the site and met four fictional characters before learning
   that Red Warden Studios ships anything. Andrew, 2026-09-04: "Everything
   below [the round table] is wasted potential… This doesn't scream business."

   THE BANDS, IN ORDER
     2  the studio line      what RWS is, plus the four houses as one strip
     3  from the watchtower  the updates carousel — the band this is all for
     4  what we make         products with honest status badges
     5  the arcade           free, playable, and already needs an account
     6  the Keep             what an account actually gets you
     7  work with us         unchanged

   ═══════════════════════════════════════════════════════════════════════════
   🚨 THE HOUSE PALETTE COMES FROM css/houses.css AND IS NOT COPIED HERE.
   ═══════════════════════════════════════════════════════════════════════════
   Manifesto/_prototype-homepage-v2.html duplicated the four ramps into its own
   inline <style> so it would open standalone over file://, and said in a
   comment that doing so in production would be a bug. It would. houses.css now
   declares each ramp on `[data-house="x"]` as well as `body.house-x`, so an
   element carrying data-house wears its house from that element down, and the
   homepage — which wears no house class at all — can show four at once.

   ⚠️ index.html MUST LINK css/houses.css. Without it every var() below falls
      through to its fallback and the whole band renders in flat near-black —
      which looks deliberate, not broken, and is therefore the kind of thing
      that ships. Fallbacks are there so a missing stylesheet degrades to
      legible rather than to invisible, NOT so the link is optional.

   ═══════════════════════════════════════════════════════════════════════════
   🚨 --house-mid IS NOT A TEXT SURFACE. THE CARD SITS ON --house-base.
   ═══════════════════════════════════════════════════════════════════════════
   The prototype backed the card and its rail with `--h-mid`. Measured against
   houses.css's own table (2026-08-14), body copy at white-48 on the spec mid
   is 4.42 / 3.91 / 3.93 for Foundry / MythrilWorks / Athenaeum — three of four
   houses FAIL AA — and Bastion cleared it at 4.77 only by luck of hue, which
   is exactly why the problem does not show up when you look at one card.

   houses.css says it plainly: "the mid is demoted to borders, gradients and
   glow." So the card ground here is --house-base (4.93–4.97 at white-48, and
   Manifesto/_scripts/contrast.py asserts it for every house on every run), and
   --house-mid appears below only inside gradients and borders.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── shared band furniture ──────────────────────────────────────────────── */

.hband {
  padding: clamp(3rem, 7vw, 5rem) 0;
  border-bottom: 1px solid var(--rws-border);
}
.hband h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  line-height: 1.15;
  color: #fff;
  letter-spacing: .03em;
  margin: 0 0 .5rem;
}
.hband-lede {
  color: var(--rws-white-50);
  font-size: .95rem;
  line-height: 1.65;
  max-width: 62ch;
  margin: 0;
}
.hband-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
/* Two-up: prose on the left, an object on the right. Bands 2, 5 and 6. */
.hsplit {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}


/* ── BAND 2 · the studio line ───────────────────────────────────────────── */
/* Absorbs the "the divisions exist" job of the four lore windows at roughly an
   eighth of the height. The emblems already existed; nothing new was drawn. */

.house-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
}
.house-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  padding: 1rem .5rem;
  border: 1px solid var(--rws-border);
  border-radius: 10px;
  background: var(--house-base, #0D0D0F);
  transition: border-color .2s, transform .2s;
  min-height: 44px;
}
.house-chip:hover,
.house-chip:focus-visible {
  border-color: var(--house-accent, var(--rws-crimson));
  transform: translateY(-2px);
}
.house-chip img { width: 44px; height: 44px; object-fit: contain; }
/* ⚠️ EVERY SIZE IN THIS FILE IS WRITTEN AS `font-size:`, NEVER INSIDE A `font:`
   SHORTHAND, AND THAT IS NOT A STYLE PREFERENCE.
   Manifesto/_scripts/preflight.py enforces the 0.72rem site floor with the
   regex `font-size\s*:\s*([\d.]+)rem`. A size inside a `font:` shorthand does
   not match it — so the first draft of this file shipped four labels at
   0.60–0.68rem and preflight reported the page CLEAN. A gate that cannot see
   a value is worse than no gate, because it is quoted as proof. preflight now
   reads the shorthand too (fixed the same day), and this file stays longhand
   so the two can never disagree again. */
.house-chip span {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .72rem;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--house-light, #fff);
  text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BAND 3 · THE UPDATES CAROUSEL
   Steam's "Featured & Recommended" shape: one card at a time with the next one
   peeking, arrows over the peek, dots beneath, slow auto-advance.
   ═══════════════════════════════════════════════════════════════════════════ */

.uc { position: relative; }

.uc-viewport { overflow: hidden; border-radius: 12px; }
.uc-track {
  display: flex;
  gap: 1rem;                      /* js/home-updates.js hard-codes 16 to match */
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* THE PEEK IS THE AFFORDANCE. 88px of the next card stays visible, and that
   sliver is the entire difference between "a carousel" and "a banner that
   moves on its own". Do not widen the card to 100% to tidy up the edge. */
.uc-card {
  flex: 0 0 calc(100% - 88px);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  border: 1px solid var(--rws-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--house-base, #0D0D0F);   /* NOT --house-mid. See the header. */
  min-height: 340px;
}

/* ── the art half ───────────────────────────────────────────────────────── */
.uc-art { position: relative; overflow: hidden; background: var(--house-base, #0D0D0F); }
.uc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 🚨 THE DIVISION PLATE — THE HALF THAT DECIDES WHETHER THIS BAND LOOKS
   INTENTIONAL OR LOOKS BROKEN, AND THE REASON THE POSTING HABIT SURVIVES.
   Steam's shelf is ~90% image; `notice_events` had no image column at all
   until sql/017, and that column is deliberately optional. If announcing
   required artwork, the rational response would be to announce less — and the
   habit is worth more than any individual slide. Every notice already carries
   a division, every division owns an emblem and a locked palette, so a notice
   with no image renders as a house plate: emblem, house colours, house glow.
   A carousel that is never blank and never ugly beats one that is
   occasionally beautiful. */
.uc-plate {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* --house-mid earns its keep here: a gradient stop, not a text ground. */
  background:
    radial-gradient(120% 90% at 30% 20%, var(--house-glow, rgba(255,255,255,.10)) 0%, transparent 62%),
    linear-gradient(145deg, var(--house-mid, #16161A) 0%, var(--house-base, #0D0D0F) 72%);
}
/* Faint diagonal hatch so the plate reads as a surface rather than a fill. */
.uc-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image: repeating-linear-gradient(115deg,
    transparent 0 22px, rgba(255,255,255,.14) 22px 23px);
}
.uc-plate img {
  width: min(52%, 180px);
  height: auto;
  object-fit: contain;
  opacity: .92;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.55));
  position: relative;
}

/* ── the reading half ───────────────────────────────────────────────────── */
.uc-rail {
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  background: var(--house-base, #0D0D0F);
}
.uc-metarow { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }

/* The chip in Steam's badge position. Accent FILL, so the text on it is
   --house-on-accent and not --house-accent-lit — see the note on that token in
   houses.css. Four houses take near-black; CDR's geranium is a dark accent and
   takes his light instead. Measured, not guessed. */
.uc-kind {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .72rem;        /* the site floor — see the note on .house-chip span */
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .42rem .7rem;
  border-radius: 4px;
  background: var(--house-accent, var(--rws-crimson));
  color: var(--house-on-accent, #08080A);
}

/* THE MOBILE WARDEN. Andrew, 2026-09-04: "No warden box, but have a mobile
   avatar." The 190px portrait column that was prototyped is CUT at every
   width; this 34px crop is the only place a warden appears in this band, and
   it earns its pixels by being a division indicator rather than decoration.
   Revealed by the ≤640px query at the bottom of this file. */
.uc-mini { display: none; align-items: center; gap: .45rem; }
.uc-mini img {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 14%;
  border: 1px solid var(--house-accent, var(--rws-crimson));
  display: block;
}
.uc-mini b {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .72rem;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--house-light, #fff);
}

.uc-date {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .74rem;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--rws-white-30);
}
.uc-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  line-height: 1.25;
  color: var(--house-light, #fff);
  margin: 0;
}
.uc-body {
  font-size: .88rem;
  line-height: 1.65;
  color: var(--rws-white-50);
  margin: 0;
}
.uc-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  align-items: flex-start;
}

/* House-tinted outline button. 44px minimum, and the min-height is on the
   element that actually renders — not inferred from padding. */
.uc-go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .6rem 1.1rem;
  border-radius: 6px;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .8rem;
  line-height: 1;
  letter-spacing: .06em;
  border: 1px solid var(--house-accent, var(--rws-crimson));
  color: var(--house-accent-lit, #fff);
  background: transparent;
  transition: background .2s, color .2s;
}
.uc-go:hover,
.uc-go:focus-visible {
  background: var(--house-glow, rgba(255,255,255,.10));
  color: var(--house-light, #fff);
}

/* ── the signup trigger ─────────────────────────────────────────────────── */
/* THE ASK ALWAYS COMES AFTER THE VALUE. Andrew's rule, 2026-09-04: "Right now
   people have no idea why they need to create an account. Subtle hints after
   showing people the cool and fun things happening in the studio would be
   IDEAL." So this sits at the BOTTOM of a card someone has just read, one per
   band, never as a modal or a gate. If a visitor has scrolled past three of
   these, a fourth does not change their mind — it just makes the studio look
   desperate. */
.uc-follow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .74rem;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--rws-white-50);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.uc-follow:hover,
.uc-follow:focus-visible { color: var(--house-light, #fff); }

/* ── controls ───────────────────────────────────────────────────────────── */
/* ⚠️ 44px MINIMUM, MEASURED ON THE RENDERED PAGE. Session 33 shipped a 34px
      control in the same commit as an explicit 44px rule, because the rule was
      checked against the CSS instead of against the box. */
.uc-arrow {
  position: absolute;
  top: calc(50% - 28px);
  z-index: 5;
  width: 48px;
  height: 56px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 1px solid var(--rws-border);
  border-radius: 8px;
  background: rgba(8, 8, 10, .78);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  transition: background .2s, border-color .2s;
}
.uc-arrow:hover,
.uc-arrow:focus-visible {
  background: rgba(8, 8, 10, .95);
  border-color: var(--rws-white-30);
}
.uc-arrow[data-dir="prev"] { left: -10px; }
.uc-arrow[data-dir="next"] { right: -10px; }

.uc-dots { display: flex; justify-content: center; gap: .4rem; margin-top: 1.4rem; }
/* The BUTTON is 44px; the dot drawn inside it is 9px. Hit area and ink are two
   different measurements and only one of them has a floor. */
.uc-dot {
  width: 44px; height: 44px;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  display: grid; place-items: center;
}
.uc-dot::after {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  transition: background .25s, transform .25s;
}
.uc-dot[aria-selected="true"]::after { background: #fff; transform: scale(1.25); }
.uc-dot:focus-visible {
  outline: 2px solid var(--rws-crimson);
  outline-offset: -6px;
  border-radius: 6px;
}

/* Screen-reader running commentary: "<title> — 3 of 6". */
.uc-live {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* No-JS floor. The carousel is built by script, so without it this band would
   be a heading over nothing. */
.uc-noscript {
  border: 1px solid var(--rws-border);
  border-radius: 12px;
  padding: 1.5rem;
  color: var(--rws-white-50);
  font-size: .9rem;
  line-height: 1.7;
}


/* ── BAND 4 · what we make ──────────────────────────────────────────────── */

.make-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
.make {
  border: 1px solid var(--rws-border);
  border-radius: 10px;
  padding: 1.5rem;
  background: var(--house-base, #0D0D0F);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  text-decoration: none;
  transition: border-color .2s;
}
.make:hover,
.make:focus-visible { border-color: var(--house-accent, var(--rws-crimson)); }
/* HONEST STATUS BADGES. "In development" means in development. A front page
   that calls an unbuilt thing Live is the one lie a visitor can check. */
.make-status {
  align-self: flex-start;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .72rem;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .35rem .6rem;
  border-radius: 3px;
  border: 1px solid var(--house-accent, var(--rws-crimson));
  color: var(--house-light, #fff);
}
.make h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--house-light, #fff);
  margin: .2rem 0 0;
}
.make p { font-size: .85rem; line-height: 1.6; color: var(--rws-white-50); margin: 0; }
.make-price {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .8rem;
  line-height: 1;
  color: var(--rws-white-80);
  margin-top: auto;
  padding-top: .6rem;
}


/* ── BAND 5 · the arcade ────────────────────────────────────────────────── */
/* Its own band because it is the best reason a stranger has to come back: four
   cabinets, free, no download — and putting a name on the board ALREADY
   requires an account. The homepage never mentioned it existed. */

.hband--arcade {
  background:
    radial-gradient(90% 120% at 80% 10%, rgba(34, 224, 255, .10) 0%, transparent 60%),
    var(--rws-black);
}
.arcade-emblem {
  border: 1px solid var(--rws-border);
  border-radius: 12px;
  overflow: hidden;
}
.arcade-emblem img {
  width: 100%;
  height: auto;          /* explicit: width-without-height is a preflight warning
                            and a real stretch bug at narrow viewports */
  display: block;
  padding: 2.5rem;
  box-sizing: border-box;
  opacity: .9;
}
.hrow { display: flex; gap: .9rem; flex-wrap: wrap; margin: 1.5rem 0 0; }


/* ── BAND 6 · the Keep ──────────────────────────────────────────────────── */
/* Plain and honest. No promised newsletter we will not write. */

.keep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.keep-list li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--rws-white-50);
}
.keep-list b { color: #fff; font-weight: 600; }
.keep-mark { color: var(--rws-crimson); flex: 0 0 auto; font-size: 1rem; line-height: 1.4; }


/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hsplit { grid-template-columns: 1fr; }
  .uc-card { grid-template-columns: 1fr; min-height: 0; }
  .uc-art { min-height: 190px; }
}

@media (max-width: 640px) {
  /* The peek narrows but does not disappear — it is the affordance. */
  .uc-card { flex: 0 0 calc(100% - 34px); }
  .uc-mini { display: flex; }        /* the 34px warden, mobile only */
  .uc-arrow { width: 44px; height: 44px; font-size: 1.1rem; }
  .uc-arrow[data-dir="prev"] { left: -4px; }
  .uc-arrow[data-dir="next"] { right: -4px; }
  .house-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ⚠️ REDUCED MOTION KILLS THE SLIDE ANIMATION ONLY. The carousel still works:
      arrows, dots and keyboard all navigate, they just jump instead of gliding.
      js/home-updates.js separately refuses to auto-advance at all under this
      setting — that is the half that matters, and it is not expressible here. */
@media (prefers-reduced-motion: reduce) {
  .uc-track { transition: none; }
  .house-chip { transition: none; }
  .house-chip:hover, .house-chip:focus-visible { transform: none; }
}