/* Spicy Cards: the public site (home, game pages, journal).
   One palette that the heat control regrades: data-heat on <html>, 0 (Clean) to 3 (Uncovered). */

:root {
  --sc-canvas: #0d0a0e;  --sc-surface: #17111a;
  --sc-ink: #f4ece6;     --sc-ink-soft: #bcaeb0;
  --sc-accent: #d9bf8c;  --sc-accent-ink: #140d10;
  --sc-font-display: "Playfair Display", Georgia, serif;
  --sc-font-text: "Outfit", system-ui, sans-serif;
  --sc-shadow-color: 330 40% 3%;
  --grade: saturate(.55) brightness(.9);
  --glow: 0;
  --hairline: color-mix(in oklab, var(--sc-ink) 14%, transparent);
  color-scheme: dark;
}
:root[data-heat="1"] { --sc-canvas: #130a11; --sc-surface: #1d1018; --sc-accent: #e9a6ba; --grade: saturate(.85) brightness(.96); --glow: .12; }
:root[data-heat="2"] { --sc-canvas: #19070f; --sc-surface: #250c17; --sc-accent: #ec5a80; --grade: saturate(1.05) brightness(1) sepia(.12); --glow: .24; }
:root[data-heat="3"] { --sc-canvas: #1f040a; --sc-surface: #2e0812; --sc-accent: #ff4d63; --grade: saturate(1.35) brightness(1.03) sepia(.22) hue-rotate(-12deg) contrast(1.06); --glow: .38; }

html, body { background: var(--sc-canvas); color: var(--sc-ink); transition: background-color .9s ease; }
body { font-family: var(--sc-font-text); margin: 0; -webkit-font-smoothing: antialiased; line-height: 1.62; letter-spacing: .005em; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--sc-accent); color: var(--sc-accent-ink); padding: .5rem 1rem; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* Photographs take the heat: one grade for every image on the page, and a warm bloom over it. */
.ph { position: relative; overflow: hidden; margin: 0; background: var(--sc-surface); }
.ph img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade); transition: filter .9s ease; }
.ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(120% 90% at 50% 100%, rgb(255 40 70 / var(--glow)), transparent 70%); transition: opacity .9s; }

/* ---------- chrome ---------- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; justify-content: space-between;
  padding: max(.9rem, env(safe-area-inset-top)) var(--sc-gutter) .9rem; pointer-events: none; }
.bar > * { pointer-events: auto; }
.mark { font-family: var(--sc-font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.mark i { font-weight: 400; color: var(--sc-accent); transition: color .9s; }
.bar__right { display: flex; gap: .5rem; align-items: center; font-size: .92rem; }
.bar__right a { text-decoration: none; padding: .5rem .9rem; border-radius: 999px; }
.bar__right .ghost { border: 1px solid var(--hairline); background: color-mix(in oklab, var(--sc-canvas) 60%, transparent); backdrop-filter: blur(10px); }
.bar__right .solid { background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600; transition: background-color .9s; }

/* The heat: one control, and the whole page answers it. */
.heat { position: fixed; z-index: 45; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); translate: -50% 0;
  display: flex; align-items: center; gap: .6rem; padding: .45rem .45rem .45rem 1rem; border-radius: 999px;
  background: color-mix(in oklab, var(--sc-surface) 82%, transparent); backdrop-filter: blur(14px);
  border: 1px solid var(--hairline); box-shadow: var(--sc-e2), var(--sc-edge); }
.heat__label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); white-space: nowrap; }
.heat__stops { display: flex; position: relative; }
.heat button { appearance: none; border: 0; background: transparent; color: var(--sc-ink-soft); font: 500 .86rem var(--sc-font-text);
  padding: .5rem .8rem; border-radius: 999px; cursor: pointer; position: relative; z-index: 1; transition: color .3s; }
.heat button[aria-checked="true"] { color: var(--sc-accent-ink); }
.heat__thumb { position: absolute; z-index: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--sc-accent);
  transition: left .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1), background-color .9s; }
@media (max-width: 520px) { .heat__label { display: none; } .heat { padding-left: .45rem; } .heat button { padding: .5rem .62rem; font-size: .8rem; } }

/* The index of the collection: the gallery's nav, and it jumps. */
.index { position: fixed; z-index: 30; left: 50%; top: 1.35rem; translate: -50% 0; list-style: none; margin: 0; padding: 0;
  display: flex; gap: 1.1rem; font-size: .8rem; opacity: 0; pointer-events: none; transition: opacity .5s; }
.index.on { pointer-events: auto; }
.index.on { opacity: 1; }
.index a { text-decoration: none; color: var(--sc-ink-soft); display: flex; gap: .6rem; align-items: center; }
.index a { padding-bottom: .3rem; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.index a.here { color: var(--sc-ink); border-bottom-color: var(--sc-accent); }
@media (max-width: 1180px) { .index { display: none; } }

/* ---------- act 1: object one ---------- */
.lobby { min-height: 100svh; display: flex; align-items: center; }
.lobby__stage { width: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(1.5rem, 4vw, 5rem);
  padding: 6.5rem var(--sc-gutter) 6rem; }
.lobby .ph { aspect-ratio: 16 / 11; border-radius: 4px; box-shadow: var(--sc-e3); }
.lobby .ph img { height: 100%; }
.lobby__label { max-width: 34rem; }
.lobby h1 { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5.2rem); line-height: 1.0; letter-spacing: -.02em; margin: 0 0 1.25rem; text-wrap: balance; }
.lobby h1 em { font-style: italic; color: var(--sc-accent); transition: color .9s; }
.lede { font-size: var(--sc-t-lg); color: var(--sc-ink-soft); margin: 0 0 1.6rem; max-width: 34ch; text-wrap: pretty; line-height: 1.5; }
.tonight { border-top: 1px solid var(--hairline); padding-top: 1rem; font-size: .95rem; color: var(--sc-ink-soft); max-width: 36ch; }
.tonight b { color: var(--sc-ink); font-weight: 600; }
@media (max-width: 860px) {
  .lobby { min-height: 0; }
  .lobby__stage { grid-template-columns: 1fr; padding-top: 5.5rem; align-content: start; gap: 1.25rem; }
  .lobby .ph { aspect-ratio: 16 / 9; order: -1; }
  .lobby .lede { font-size: 1.05rem; margin-bottom: 1rem; }
  .lobby__stage { padding-bottom: 5.5rem; }
  .tonight { font-size: .88rem; }
  .lobby h1 { font-size: var(--sc-t-2xl); }
}

/* ---------- labels (the collection's schema) ---------- */
.lbl__name { font-family: var(--sc-font-display); font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.04; margin: 0 0 .35rem; }
.lbl__spec { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0 0 .8rem; }
.lbl__line { margin: 0 0 1rem; font-size: 1.02rem; }
.sample { border-left: 2px solid var(--sc-accent); padding: .1rem 0 .1rem .9rem; margin: 0 0 1rem; transition: border-color .9s; }
.sample__k { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent); margin-bottom: .2rem; transition: color .9s; }
.sample p { margin: 0; font-family: var(--sc-font-display); font-style: italic; font-size: 1.08rem; line-height: 1.4; }
.lbl__more { font-size: .9rem; color: var(--sc-ink-soft); }

/* ---------- act 2: the collection (pan) ---------- */
.collection [data-sc-stage] { display: flex; align-items: center; overflow: hidden; }
.rail { display: flex; gap: clamp(1.5rem, 3vw, 3.5rem); padding: 0 var(--sc-gutter); align-items: stretch; }
.rail__head { flex: 0 0 min(26rem, 78vw); align-self: center; }
.rail__head h2 { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-3xl); line-height: 1; letter-spacing: -.02em; margin: 0 0 1rem; }
.rail__head p { color: var(--sc-ink-soft); margin: 0; max-width: 30ch; }
.obj { flex: 0 0 min(23rem, 80vw); display: flex; flex-direction: column; scroll-margin-top: 4rem; }
.obj .ph { aspect-ratio: 3 / 4; border-radius: 3px; margin-bottom: 1.1rem; box-shadow: var(--sc-e2); }
.rail__end { flex: 0 0 min(22rem, 76vw); align-self: center; border-left: 1px solid var(--hairline); padding-left: 2rem; }
.rail__end p { font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-xl); line-height: 1.25; margin: 0 0 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .rail .obj:not(:first-of-type) { opacity: calc(.55 + .45 * min(1, var(--sc-p, 1) * 4)); }
}
@media (max-height: 760px) and (min-width: 861px) { .obj .ph { aspect-ratio: 4 / 4; } }

/* ---------- act 3: the rule (peak) ---------- */
.rule [data-sc-stage] { display: grid; place-items: center; padding: 5rem var(--sc-gutter) 5rem; }
.heat { transition: opacity .4s, translate .4s; }
.heat.docked { opacity: 0; pointer-events: none; translate: -50% 1rem; }
.rule__bg { position: absolute; inset: 0; border-radius: 0; }
.rule__bg img { height: 100%; }
.rule__fade { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 55%, color-mix(in oklab, var(--sc-canvas) 82%, transparent), color-mix(in oklab, var(--sc-canvas) 35%, transparent) 70%, var(--sc-canvas)); }
.rule__copy { position: relative; text-align: center; max-width: 46rem; }
.rule__copy h2 { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(2.1rem, 1.5rem + 2.6vw, 4rem); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 1rem; text-wrap: balance; }
.rule__copy p { color: var(--sc-ink); margin: 0 auto 1rem; max-width: 40ch; font-size: var(--sc-t-lg); line-height: 1.45; }
.ballots { display: flex; justify-content: center; gap: .7rem; margin: 1.6rem 0 1.2rem; flex-wrap: wrap; }
.ballot { width: 5.6rem; aspect-ratio: 3 / 4; border-radius: 6px; background: var(--sc-surface); border: 1px solid var(--hairline);
  display: grid; place-items: center; text-align: center; padding: .4rem; font-size: .8rem; line-height: 1.25; box-shadow: var(--sc-e2), var(--sc-edge); }
.ballot b { display: block; font-family: var(--sc-font-display); font-size: 1rem; font-weight: 600; margin-top: .2rem; }
.ballot--low { border-color: var(--sc-accent); }
.verdict { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); }
.verdict b { color: var(--sc-accent); transition: color .9s; }
.big-heat { display: inline-flex; gap: .4rem; margin-top: 1.5rem; padding: .4rem; border-radius: 999px; border: 1px solid var(--hairline); background: color-mix(in oklab, var(--sc-surface) 70%, transparent); }
.big-heat button { appearance: none; border: 0; cursor: pointer; border-radius: 999px; padding: .75rem 1.2rem; font: 600 1rem var(--sc-font-text); color: var(--sc-ink-soft); background: transparent; transition: background-color .4s, color .4s; }
.big-heat button[aria-checked="true"] { background: var(--sc-accent); color: var(--sc-accent-ink); }
@media (max-width: 560px) { .big-heat button { padding: .6rem .7rem; font-size: .85rem; } .ballot { width: 4.6rem; font-size: .7rem; } .ballot b { font-size: .78rem; } }

/* ---------- act 4: membership ---------- */
.plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hairline); }
.plate { padding: 1.6rem 1.6rem 1.8rem 0; border-bottom: 1px solid var(--hairline); }
.plate + .plate { padding-left: 1.6rem; border-left: 1px solid var(--hairline); }
.plate__k { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0 0 .5rem; }
.plate__v { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: 1; margin: 0 0 .7rem; }
.plate p { margin: 0; color: var(--sc-ink-soft); }
.plate--hero .plate__v { color: var(--sc-accent); transition: color .9s; }
.facts { display: flex; gap: clamp(1.5rem, 5vw, 4rem); flex-wrap: wrap; margin-top: 2.5rem; }
.fact b { display: block; font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); font-weight: 500; line-height: 1; }
.fact span { font-size: .85rem; color: var(--sc-ink-soft); }
.h2 { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-2xl); line-height: 1.05; letter-spacing: -.015em; margin: 0 0 .9rem; text-wrap: balance; }
.intro { color: var(--sc-ink-soft); max-width: 52ch; margin: 0 0 2.2rem; }
@media (max-width: 860px) { .plates { grid-template-columns: 1fr; } .plate + .plate { padding-left: 0; border-left: 0; } }

/* ---------- act 5: journal ---------- */
.journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.5rem); }
.post { text-decoration: none; display: block; }
.post .ph { aspect-ratio: 4 / 3; border-radius: 3px; margin-bottom: .9rem; }
.post__date { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.post h3 { font-family: var(--sc-font-display); font-weight: 500; font-size: 1.35rem; line-height: 1.2; margin: .3rem 0 .4rem; }
.post p { margin: 0; color: var(--sc-ink-soft); font-size: .95rem; }
@media (max-width: 860px) { .journal-grid { grid-template-columns: 1fr; } }

/* ---------- act 6: the invitation ---------- */
.close [data-sc-stage] { display: grid; place-items: center; padding: 6rem var(--sc-gutter) 8rem; }
.invite { max-width: 34rem; width: 100%; border: 1px solid var(--hairline); padding: clamp(1.6rem, 4vw, 3rem); background: color-mix(in oklab, var(--sc-surface) 75%, transparent); box-shadow: var(--sc-e3), var(--sc-edge); }
.invite .lbl__name { font-size: var(--sc-t-3xl); }
.invite__cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; }
.btn { display: inline-block; text-decoration: none; padding: .9rem 1.4rem; border-radius: 999px; font-weight: 600; }
.btn--solid { background: var(--sc-accent); color: var(--sc-accent-ink); transition: background-color .9s; }
.btn--line { border: 1px solid var(--hairline); }
.foot { padding: 3rem var(--sc-gutter) 7rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; font-size: .85rem; color: var(--sc-ink-soft); border-top: 1px solid var(--hairline); }
.foot nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.foot a { text-decoration: none; }

/* ---------- inner pages (game pages, journal) ---------- */
.page { padding: 7rem var(--sc-gutter) 6rem; max-width: 72rem; margin: 0 auto; }
.page__hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; margin-bottom: 3.5rem; }
.page__hero .ph { aspect-ratio: 3 / 4; border-radius: 3px; box-shadow: var(--sc-e3); }
.page h1 { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-3xl); line-height: 1.02; letter-spacing: -.02em; margin: .2rem 0 1rem; text-wrap: balance; }
.crumbs { font-size: .8rem; color: var(--sc-ink-soft); }
.crumbs a { text-decoration: none; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 4rem; margin-bottom: 3rem; }
.cols h2, .page h2 { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xl); margin: 0 0 .8rem; }
.cols ol, .cols ul { padding-left: 1.2rem; margin: 0; color: var(--sc-ink-soft); }
.cols li { margin-bottom: .45rem; }
.levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); margin-bottom: 3rem; }
.levels > div { background: var(--sc-canvas); padding: 1.2rem; transition: background-color .9s; }
.levels .sample { border-left: 0; padding: 0; }
@media (max-width: 860px) { .page__hero, .cols { grid-template-columns: 1fr; } .levels { grid-template-columns: 1fr 1fr; } .page__hero .ph { aspect-ratio: 4 / 3; order: -1; } }
.prose { max-width: 68ch; }
.prose h2 { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xl); margin: 2.4rem 0 .7rem; }
.prose h3 { font-size: 1.15rem; margin: 1.8rem 0 .5rem; }
.prose p, .prose li { color: color-mix(in oklab, var(--sc-ink) 88%, var(--sc-ink-soft)); }
.prose blockquote { border-left: 2px solid var(--sc-accent); margin: 1.5rem 0; padding-left: 1rem; font-family: var(--sc-font-display); font-style: italic; }
.faq { margin-top: 3rem; border-top: 1px solid var(--hairline); padding-top: 1.5rem; }
.faq details { border-bottom: 1px solid var(--hairline); padding: .9rem 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.cta-band { margin-top: 3rem; padding: 1.8rem; border: 1px solid var(--hairline); background: var(--sc-surface); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.cta-band p { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); }