/* oddsprout.games — one stylesheet, no build step, no external requests.
   ---------------------------------------------------------------------------
   THE PALETTE IS NOT INVENTED, and deliberately contains no orange.

   The two greys the page is built on are THE GAME'S OWN DARK FLOOR, measured off
   Steam/Created/Real_Capsule_v2.png rather than picked by eye: the factory floor
   is a checker of #242830 and #2a2f38, and those are the two most common dark
   values in the whole capsule. So the site's ground and its panels are the same
   two squares the machines stand on, in the same order.

   The accents are named colours out of docs/ART_STYLE_INKWORKS.md, from the Hub
   Core's console — the one part of the game that is already a dark UI:

     --cream   HUB_CREAM        #fff0d2  the sanctioned cream, on glass
     --green   HUB_READOUT      #57c493  a VALUE the machine is reporting
     --teal    HUB_TEAL_LT      #5f9b93  every lit rule and highlight
     --line    HUB_PLATE_NIGHT  #3a414c  riveted label plates at night

   --teal-lt is the one derived value: HUB_TEAL_LT itself lands at about 4.5:1 on
   this ground, which is too thin for 12 px uppercase eyebrows, so labels and
   links use the lightened step and --teal keeps the rules and bullets.
   --------------------------------------------------------------------------- */

:root {
  --bg:        #242830;
  --bg-2:      #2a2f38;
  --bg-3:      #333945;
  --line:      #3f4753;
  --line-soft: #323844;

  --text:      #e4e9ef;
  --muted:     #9daab7;
  --cream:     #fff0d2;

  --green:     #57c493;
  --green-lt:  #74d6a9;
  --teal:      #5f9b93;
  --teal-lt:   #7fb8b0;
  --paper:     #efeee7;

  --wrap:      1120px;
  --radius:    14px;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--teal-lt); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #9ad0c8; }

h1, h2, h3 { line-height: 1.15; margin: 0; text-wrap: balance; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.narrow { max-width: 720px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- eyebrow / section labels ---------- */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-lt);
  margin: 0 0 14px;
}
.eyebrow.blue { color: var(--green); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 16px; font-weight: 700; letter-spacing: .01em;
  text-decoration: none;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--green); color: #08120d; }
.btn-primary:hover { background: var(--green-lt); color: #08120d; }

.btn-ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--teal); color: var(--text); }

.btn-sm { padding: 9px 16px; font-size: 14px; border-radius: 8px; }

.btn svg { flex: none; }

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 15px;
}
.pill b { color: var(--text); font-weight: 700; }

/* ---------- site header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 18px;
  min-height: 62px;
}
.brandlink {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}
.brandlink img { width: 22px; height: auto; image-rendering: pixelated; }
.brandlink:hover { color: var(--cream); }
.site-head .spacer { flex: 1; }
.site-head nav { display: flex; align-items: center; gap: 8px; }
.site-head .sep { color: var(--line); }

/* ---------- landing page (oddsprout.games) ---------- */
.landing {
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding: 48px 0 40px;
}
.landing-main {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: 56px;
  padding-block: 40px;
}
.studio-mark {
  width: min(360px, 74vw);
  image-rendering: pixelated;
  margin-inline: auto;
}
.studio-line {
  text-align: center;
  color: var(--muted);
  font-size: 17px;
  margin: 26px auto 0;
  max-width: 40ch;
}

.game-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 52px);
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(20px, 3vw, 30px);
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.game-card:hover { border-color: var(--line); transform: translateY(-2px); color: inherit; }
.game-card img { border-radius: 8px; }
.game-card h2 {
  font-size: clamp(19px, 2.4vw, 23px);
  margin-bottom: 10px;
}
.game-card p { color: var(--muted); margin: 0 0 16px; font-size: 15.5px; }
.game-card .go { color: var(--green); font-weight: 700; font-size: 15px; }

/* ---------- hero ---------- */
.hero { padding: clamp(48px, 7vw, 92px) 0 clamp(28px, 4vw, 48px); }
.hero-logo { width: min(600px, 88%); margin: 0 0 clamp(22px, 3vw, 30px); }
.hero h1 {
  font-size: clamp(28px, 4.4vw, 46px);
  font-weight: 800;
  letter-spacing: -.02em;
  max-width: 17ch;
  margin-bottom: 20px;
}
.hero .lede {
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--muted);
  max-width: 60ch;
  margin: 0 0 30px;
}
.hero .lede strong { color: var(--text); font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- media frames ---------- */
.frame {
  margin: clamp(30px, 5vw, 54px) 0 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  line-height: 0;
}
.frame video, .frame img { width: 100%; }
.caption {
  margin: 12px 2px 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* Play button for the reduced-motion / failed-autoplay case. */
.videoholder { position: relative; }
.videoholder .playbtn {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  border: 0; background: rgba(10, 14, 18, .34); cursor: pointer;
  width: 100%; height: 100%; padding: 0;
}
.videoholder.paused .playbtn { display: flex; }
.videoholder .playbtn span {
  display: grid; place-items: center;
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--green); color: #08120d;
  font-size: 22px; line-height: 1; padding-left: 5px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

/* ---------- facts strip ---------- */
.facts {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-top: clamp(40px, 6vw, 70px);
}
.facts ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 34px;
  padding-block: 18px;
  font-size: 14.5px; color: var(--muted);
}
.facts li { display: flex; align-items: center; gap: 9px; }
.facts li::before {
  content: ""; width: 6px; height: 6px; border-radius: 2px;
  background: var(--teal); flex: none;
}

/* ---------- beats ---------- */
.beats { padding: clamp(20px, 4vw, 40px) 0; }
.beat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(44px, 6vw, 76px);
  border-bottom: 1px solid var(--line-soft);
}
.beat:last-child { border-bottom: 0; }
/* The media column keeps the wider track whichever side it is on. Flipping only the
   order leaves every other clip rendered a hundred-odd pixels narrower than its
   neighbours, which reads down the page as a wobble rather than as a rhythm. */
.beat.flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.beat.flip .beat-media { order: -1; }
.beat h2 {
  font-size: clamp(23px, 2.9vw, 31px);
  font-weight: 800;
  letter-spacing: -.015em;
  margin-bottom: 16px;
}
.beat p { color: var(--muted); margin: 0 0 14px; }
.beat p:last-of-type { margin-bottom: 0; }
.beat p strong { color: var(--text); font-weight: 600; }
.beat .frame { margin-top: 0; }

.machine-list {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--bg-2);
  border-left: 2px solid var(--teal);
  border-radius: 0 8px 8px 0;
  color: var(--text);
  font-size: 15.5px;
}

/* ---------- gallery ---------- */
.gallery { padding: clamp(50px, 7vw, 86px) 0; border-top: 1px solid var(--line-soft); }
.gallery h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; margin-bottom: 26px; }
.shots { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shots .frame { margin: 0; }
.shots figure { margin: 0; }
.shots figure.wide { grid-column: 1 / -1; }

/* ---------- editions ---------- */
.editions { padding: clamp(50px, 7vw, 86px) 0; border-top: 1px solid var(--line-soft); }
.editions-grid { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.edition {
  padding: clamp(22px, 3vw, 32px);
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.edition h3 { font-size: 21px; font-weight: 800; margin-bottom: 6px; }
.edition .when { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin: 0 0 16px; }
.edition .when.blue { color: var(--teal); }
.edition p { color: var(--muted); margin: 0 0 14px; font-size: 16px; }
.edition ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 16px; }
.edition li { margin-bottom: 9px; }
.edition li b { color: var(--text); font-weight: 600; }

/* ---------- closing call ---------- */
.closing {
  padding: clamp(56px, 8vw, 96px) 0;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.closing h2 { font-size: clamp(25px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }
.closing p { color: var(--muted); max-width: 54ch; margin: 0 auto 28px; }
.closing .cta-row { justify-content: center; }

/* ---------- footer ---------- */
.site-foot {
  border-top: 1px solid var(--line-soft);
  padding: 42px 0 56px;
  font-size: 14.5px;
  color: var(--muted);
}
.site-foot .cols { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-start; }
.site-foot .note { max-width: 52ch; margin: 0; }
.site-foot .meta { margin-left: auto; text-align: right; }
.site-foot .meta p { margin: 0 0 6px; }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--text); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  /* .beat.flip is listed by name: it sets its own two-track template above, and a
     bare `.beat` here loses to it on specificity no matter which comes last. */
  .beat, .beat.flip, .editions-grid, .game-card { grid-template-columns: minmax(0, 1fr); }
  .beat.flip .beat-media { order: 0; }
  .shots { grid-template-columns: minmax(0, 1fr); }
  .shots figure.wide { grid-column: auto; }
  .game-card { text-align: left; }
  .site-foot .meta { margin-left: 0; text-align: left; }
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .wrap { padding-inline: 18px; }
  .cta-row .btn, .cta-row .pill { width: 100%; justify-content: center; }
  .site-head .brandlink span.long { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .game-card:hover { transform: none; }
}