/* landing.css — the playbook-first landing page.
   Builds ON brand.css tokens. The page runs a time-of-day arc:
   night header → GOLDEN HOUR hero (selling the playbook) → sunrise into
   THE MAIN EVENT (the playbook, full spread) → the little game as a
   night-window detour card → day footer. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-display);
  overflow-x: hidden;
}

/* ───────────────────────── top bar ───────────────────────── */
.topbar {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 56px);
}
.topbar .wordmark { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.topbar .wordmark .label { color: var(--brass-hi); font-size: 13px; }
.topbar .wordmark .tag { font-family: var(--font-editorial); font-style: italic; font-size: 13px; color: color-mix(in srgb, var(--paper) 75%, transparent); }
.topnav { display: flex; gap: clamp(14px, 2.5vw, 30px); }
.topnav a { text-decoration: none; }
.topnav .label { color: color-mix(in srgb, var(--paper) 82%, transparent); font-size: 11px; transition: color .2s ease; }
.topnav a:hover .label { color: var(--brass-hi); }

/* ───────────────────────── HERO — golden hour ───────────────────────── */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}

/* the night city, pushed toward golden hour */
.hero-bg { position: absolute; inset: 0; z-index: -6; }
.hero-bg img {
  width: 100%; height: 118%; object-fit: cover; object-position: 50% 82%;
  filter: sepia(.38) saturate(1.45) brightness(1.28) contrast(1.04) hue-rotate(-8deg);
  transform: scale(1.02);
}
/* warm color-grade wash — amber pouring across the streets */
.hero-grade {
  position: absolute; inset: 0; z-index: -5; mix-blend-mode: hard-light;
  background: linear-gradient(196deg,
    rgba(255, 178, 84, .62) 0%,
    rgba(244, 152, 66, .42) 30%,
    rgba(138, 47, 44, .30) 62%,
    rgba(20, 12, 8, .55) 100%);
}
/* the low sun itself — huge, soft, screen-blended */
.hero-sun {
  position: absolute; inset: 0; z-index: -4; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 62% 44% at 74% 6%, rgba(255, 214, 140, .95), rgba(255, 170, 80, .35) 45%, transparent 70%),
    radial-gradient(ellipse 120% 55% at 50% -8%, rgba(255, 150, 60, .35), transparent 65%);
}
/* long light rays, very subtle */
.hero-rays {
  position: absolute; inset: -10% -20%; z-index: -3; mix-blend-mode: soft-light; opacity: .8;
  background: repeating-linear-gradient(112deg,
    rgba(255, 216, 150, .0) 0 90px,
    rgba(255, 216, 150, .5) 120px,
    rgba(255, 216, 150, .0) 210px);
}
/* readability scrim + fade down into the doors section */
.hero-vignette {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(11,10,8,.42) 0%, transparent 26%),
    linear-gradient(180deg, transparent 46%, rgba(11,10,8,.62) 78%, var(--bg) 100%),
    radial-gradient(ellipse 130% 90% at 50% 40%, transparent 55%, rgba(11,10,8,.45) 100%);
}

.hero-content {
  position: relative; z-index: 2;
  padding: 0 clamp(20px, 5vw, 72px);
  margin-top: clamp(96px, 13vh, 150px);
  max-width: 1050px;
}
/* local pocket of shade so type always beats the bright storefronts */
.hero-content::before {
  content: ""; position: absolute; z-index: -1;
  inset: -70px -120px -60px -90px; pointer-events: none;
  background: radial-gradient(ellipse 78% 82% at 32% 52%, rgba(11, 10, 8, .52), rgba(11, 10, 8, .18) 62%, transparent 78%);
  filter: blur(6px);
}
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; color: var(--brass-hi); text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.kicker::before { content: ""; width: 34px; height: 1px; background: var(--brass-hi); opacity: .9; }

.hl { margin: 18px 0 0; line-height: .94; text-wrap: balance; }
.hl .hl-serif {
  display: block; font-family: var(--font-editorial); font-weight: 350;
  font-size: clamp(44px, 7.2vw, 108px); color: var(--cream); letter-spacing: -0.01em;
  text-shadow: 0 2px 30px rgba(11,10,8,.55);
}
.hl .hl-serif em { font-style: italic; color: var(--brass-hi); }
.hl .hl-disp {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(46px, 7.8vw, 118px); letter-spacing: .005em; color: var(--paper);
  text-shadow: 0 2px 30px rgba(11,10,8,.6);
}
.hl .hl-disp .gold { color: var(--brass-hi); }

.dek {
  margin: 22px 0 0; max-width: 560px;
  font-family: var(--font-editorial); font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.5; color: color-mix(in srgb, var(--cream) 92%, transparent);
  text-shadow: 0 1px 16px rgba(11,10,8,.65);
}
.dek em { color: var(--brass-hi); }

/* ── hero CTA row — the playbook leads, the game tags along ── */
.hero-cta { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-cta .btn { font-size: 16px; padding: 14px 32px; }
.hero-cta .btn .arrow, .pb-cta .btn .arrow, .gc-cta .btn .arrow { display: inline-block; transition: transform .25s ease; }
.hero-cta .btn:hover .arrow { transform: translateX(4px); }
.hero-cta .also {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .18em;
  color: color-mix(in srgb, var(--paper) 72%, transparent); text-decoration: none;
  padding: 10px 16px; border: 1px solid color-mix(in srgb, var(--brass) 32%, transparent);
  border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 45%, transparent);
  backdrop-filter: blur(3px); transition: color .2s ease, border-color .2s ease;
}
.hero-cta .also:hover { color: var(--brass-hi); border-color: color-mix(in srgb, var(--brass) 60%, transparent); }

/* ── the cast, standing in the long light ── */
.cast {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(26px, 6vw, 96px);
  padding: clamp(28px, 5vh, 56px) 20px clamp(56px, 9vh, 92px);
}
.hero-char { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; }
.hero-char img {
  height: clamp(150px, 24vh, 268px); width: auto; display: block; position: relative; z-index: 1;
  filter: sepia(.18) saturate(1.12) brightness(1.05)
          drop-shadow(0 4px 10px rgba(15, 8, 4, .45));
}
.hero-char:nth-child(2) img { height: clamp(168px, 27vh, 300px); }
/* golden-hour long shadows, all thrown the same direction */
.hero-char::before {
  content: ""; position: absolute; bottom: 34px; left: 50%; z-index: 0;
  width: 190%; height: 26px;
  background: radial-gradient(ellipse at 30% 50%, rgba(15, 8, 4, .5), transparent 68%);
  transform: translateX(-78%) rotate(-4deg); filter: blur(4px);
}
.hero-char .plate {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brass-hi);
  padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--brass-hi) 45%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter: blur(3px);
}
.hero-char .plate small { font-size: 9px; color: color-mix(in srgb, var(--paper) 65%, transparent); letter-spacing: .14em; }

.scroll-cue {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .26em;
  color: color-mix(in srgb, var(--brass-hi) 80%, transparent); text-decoration: none;
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: translate(-50%, 0);} 50% { transform: translate(-50%, 5px);} }

/* ───────────────────────── THE MAIN EVENT — the playbook ─────────────────────────
   Night breaks into sunrise right here: the page steps into daylight,
   because daylight is where the real product lives. */
.main-event {
  position: relative;
  padding: clamp(150px, 22vh, 230px) clamp(20px, 4.5vw, 64px) clamp(56px, 8vh, 96px);
  background: linear-gradient(180deg,
    #0b0a08 0%, #2a1c0e 5%, #4b3316 8%, #8a6234 12%, #c69d5e 17%,
    #e0c48f 22%, #ead9b4 27%, var(--paper) 34%, var(--cream) 100%);
}
.me-head { text-align: center; margin-bottom: clamp(30px, 4.5vh, 52px); }
.me-head .label { color: var(--ox); font-size: 12px; text-shadow: 0 1px 8px rgba(246, 239, 224, .35); }
.me-head h2 {
  margin: 12px 0 0; font-family: var(--font-editorial); font-weight: 380;
  font-size: clamp(30px, 4vw, 54px); color: var(--ink); line-height: 1.08; text-wrap: balance;
}
.me-head h2 em { font-style: italic; color: var(--ox); }

/* the big card — full editorial spread, unmistakably the headliner */
.playbook-card {
  position: relative; display: grid; grid-template-columns: 1.05fr 1fr;
  max-width: 1180px; margin: 0 auto;
  background: #fbf6ea;
  border: 1px solid var(--hair); border-radius: var(--r-card); overflow: hidden;
  text-decoration: none; isolation: isolate;
  box-shadow: 0 24px 80px rgba(46, 30, 12, .30);
  transition: transform .28s cubic-bezier(.2,.9,.3,1.2), box-shadow .28s ease;
}
.playbook-card:hover { transform: translateY(-7px); box-shadow: 0 30px 90px rgba(46, 30, 12, .38), 0 0 54px color-mix(in srgb, var(--brass) 32%, transparent); }

.pb-art { position: relative; min-height: clamp(340px, 30vw, 440px); overflow: hidden; }
.pb-art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block; object-position: 50% 82%;
  filter: sepia(.52) brightness(1.72) saturate(.95) contrast(.9) hue-rotate(-12deg);
  transition: transform .6s ease;
}
.playbook-card:hover .pb-art img { transform: scale(1.04); }
.pb-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 28% 0%, rgba(255, 232, 178, .70), transparent 60%),
    linear-gradient(90deg, transparent 55%, rgba(251, 246, 234, .95) 100%);
}

/* time-of-day chip pinned on the art */
.when {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill);
}
.pb-art .when { color: var(--ox); background: rgba(246, 239, 224, .82); border: 1px solid color-mix(in srgb, var(--ox) 30%, transparent); }
.gc-art .when { color: var(--brass-hi); background: rgba(11, 10, 8, .72); border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent); }

.pb-body { display: flex; flex-direction: column; gap: 13px; padding: clamp(26px, 3vw, 46px) clamp(24px, 3vw, 46px) clamp(28px, 3vw, 46px); }
.pb-body > .label { color: var(--brass-lo); font-size: 11px; }
.pb-title {
  margin: 0; line-height: 1; font-family: var(--font-editorial); font-weight: 420;
  font-size: clamp(42px, 4.6vw, 68px); color: var(--ink);
}
.pb-title em { font-style: italic; color: var(--ox); }
.pb-copy { margin: 0; font-family: var(--font-editorial); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; color: #4c4130; max-width: 50ch; }
.pb-copy em { color: var(--ox); }

.pb-points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pb-points li {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-editorial); font-size: 14px; color: #5b4f3a;
  padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--brass) 40%, transparent);
}
.pb-points li .label { font-size: 10px; color: var(--brass-lo); min-width: 46px; }

.pb-cta { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pb-cta .btn {
  font-size: 17px; padding: 15px 34px;
  background: var(--ox); color: var(--cream);
  box-shadow: 0 6px 26px color-mix(in srgb, var(--ox) 45%, transparent);
}
.playbook-card:hover .pb-cta .arrow { transform: translateX(4px); }
.pb-cta .side, .gc-cta .side { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.pb-cta .side { color: #8a7a5c; }

/* ───────────────────────── THE DETOUR — the little game ─────────────────────────
   A night-window snapshot pinned to the daylight page. Smaller on purpose. */
.aside-game {
  background: var(--cream);
  padding: clamp(24px, 4vh, 44px) clamp(20px, 4.5vw, 64px) clamp(84px, 12vh, 130px);
}
.ag-head { max-width: 880px; margin: 0 auto clamp(20px, 3vh, 30px); }
.ag-head .label { color: var(--brass-lo); font-size: 11px; }
.ag-head h2 {
  margin: 8px 0 0; font-family: var(--font-editorial); font-weight: 380;
  font-size: clamp(22px, 2.4vw, 32px); color: var(--ink); line-height: 1.1;
}
.ag-head h2 em { font-style: italic; color: var(--ox); }

.game-card {
  position: relative; display: grid; grid-template-columns: 250px 1fr;
  max-width: 880px; margin: 0 auto;
  background: #0d0b08;
  border: 1px solid color-mix(in srgb, var(--brass) 30%, transparent);
  border-radius: var(--r-card); overflow: hidden; text-decoration: none; isolation: isolate;
  box-shadow: 0 14px 44px rgba(15, 8, 4, .35);
  transform: rotate(-.6deg);
  transition: transform .28s cubic-bezier(.2,.9,.3,1.2), box-shadow .28s ease;
}
.game-card:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 18px 54px rgba(15, 8, 4, .45), 0 0 38px color-mix(in srgb, var(--brass) 26%, transparent); }

.gc-art { position: relative; min-height: 220px; overflow: hidden; }
.gc-art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block; object-position: 50% 6%;
  filter: saturate(1.18) contrast(1.06) brightness(.96);
  transition: transform .6s ease;
}
.game-card:hover .gc-art img { transform: scale(1.05); }
.gc-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(23, 12, 48, .18), transparent 40%, rgba(13, 11, 8, .92) 100%);
}

.gc-body { display: flex; flex-direction: column; gap: 9px; padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 30px) clamp(22px, 2.6vw, 30px); }
.gc-body > .label { font-size: 10px; }
.gc-title {
  margin: 0; line-height: 1; font-family: var(--font-display); font-weight: 800; letter-spacing: .01em;
  font-size: clamp(24px, 2.4vw, 32px); color: var(--paper);
}
.gc-title em { font-style: normal; color: var(--brass-hi); }
.gc-copy { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 14px; line-height: 1.55; color: #b8ac92; max-width: 52ch; }

.gc-cta { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gc-cta .btn.mini {
  font-size: 13px; padding: 10px 20px;
  background: transparent; color: var(--brass-hi);
  border: 1px solid color-mix(in srgb, var(--brass) 50%, transparent);
  box-shadow: none;
}
.game-card:hover .gc-cta .arrow { transform: translateX(4px); }
.gc-cta .side { color: #6f6650; }

/* ───────────────────────── THROUGHLINE — day mode ───────────────────────── */
.throughline {
  padding: clamp(56px, 8vh, 96px) clamp(20px, 4.5vw, 64px) clamp(60px, 9vh, 110px);
  background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
  border-top: 1px solid var(--hair);
}
.throughline-inner { max-width: 980px; margin: 0 auto; text-align: center; }
.throughline .label { color: var(--brass-lo); }
.throughline h2 {
  margin: 16px 0 0; font-family: var(--font-editorial); font-weight: 380;
  font-size: clamp(26px, 3.4vw, 44px); color: var(--ink); line-height: 1.15; text-wrap: balance;
}
.throughline h2 em { font-style: italic; color: var(--ox); }
.constants {
  margin-top: clamp(30px, 4.5vh, 48px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left;
}
.constant { --accent: var(--brass); }
.constant .chip { width: 100%; height: 8px; border-radius: 6px; margin-bottom: 14px; }
.constant.c-brass .chip { background: linear-gradient(90deg, var(--brass-lo), var(--brass), var(--brass-hi)); }
.constant.c-ox { --accent: var(--ox-hi); }
.constant.c-ox .chip { background: linear-gradient(90deg, var(--ox-lo), var(--ox), var(--ox-hi)); }
.constant.c-mono .chip { background: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 16px); opacity: .8; }
.constant h3 { margin: 0 0 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.constant p { margin: 0; font-family: var(--font-editorial); font-size: 14px; line-height: 1.5; color: #5b4f3a; }
.constant p em { color: var(--ox); }

/* ───────────────────────── footer ───────────────────────── */
.foot {
  padding: 34px clamp(20px, 4.5vw, 64px) 44px;
  background: var(--cream);
  border-top: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.foot .label { color: var(--brass-lo); font-size: 10px; }
.foot .sig { font-family: var(--font-editorial); font-style: italic; font-size: 13px; color: #6b5f49; }
.foot nav { display: flex; gap: 22px; }
.foot nav a { text-decoration: none; }

/* ───────────────────────── responsive ───────────────────────── */
@media (max-width: 860px) {
  .topbar { padding: 18px 20px; }
  .topnav { display: none; }
  .hero-content { margin-top: 96px; }
  .hero-bg img { object-position: 50% 84%; }
  .dek { max-width: 92%; }
  .cast { gap: 12px; padding-bottom: 64px; }
  .hero-char img { height: clamp(128px, 19vh, 180px); }
  .hero-char:nth-child(2) img { height: clamp(142px, 21vh, 200px); }
  .hero-char .plate { font-size: 9px; padding: 3px 8px; letter-spacing: .16em; }
  .hero-char .plate small { display: none; }
  .hero-cta { margin-top: 22px; gap: 10px; }
  .hero-cta .btn { font-size: 14px; padding: 12px 22px; }
  .hero-cta .also { font-size: 9px; padding: 9px 12px; letter-spacing: .14em; }
  .main-event { padding-top: clamp(120px, 18vh, 170px); }
  .me-head { text-align: left; }
  .playbook-card { grid-template-columns: 1fr; }
  .pb-art { min-height: 0; height: 230px; }
  .pb-art::after {
    background:
      radial-gradient(ellipse 80% 55% at 28% 0%, rgba(255, 232, 178, .70), transparent 60%),
      linear-gradient(180deg, rgba(255, 240, 205, .25), transparent 40%, rgba(251, 246, 234, .96) 98%);
  }
  .pb-body { margin-top: -40px; position: relative; z-index: 2; }
  .pb-cta .btn { font-size: 14px; padding: 12px 22px; white-space: nowrap; }
  .game-card { grid-template-columns: 1fr; transform: rotate(0); }
  .gc-art { min-height: 0; height: 170px; }
  .gc-art::after { background: linear-gradient(180deg, rgba(23, 12, 48, .22), transparent 40%, rgba(13, 11, 8, .94) 98%); }
  .gc-body { margin-top: -34px; position: relative; z-index: 2; }
  .gc-cta .btn.mini { font-size: 12px; padding: 9px 16px; white-space: nowrap; }
  .kicker {
    font-size: 10px; letter-spacing: .14em; line-height: 1.7;
    padding: 6px 12px; border-radius: 10px;
    background: rgba(11, 10, 8, .58); backdrop-filter: blur(4px);
    border: 1px solid color-mix(in srgb, var(--brass) 30%, transparent);
  }
  .kicker::before { display: none; }
  .constants { grid-template-columns: 1fr; gap: 20px; }
  .throughline-inner { text-align: left; }
  .foot { flex-direction: column; align-items: flex-start; }
}