@font-face {
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-weight:600 800;
  font-display:swap;
  src:url("/fonts/bricolage-grotesque-latin-600-800.woff2") format("woff2");
}
@font-face {
  font-family:"Instrument Sans";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("/fonts/instrument-sans-latin-400-600.woff2") format("woff2");
}
@font-face {
  font-family:"Space Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/space-mono-latin-400.woff2") format("woff2");
}
@font-face {
  font-family:"Space Mono";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/fonts/space-mono-latin-700.woff2") format("woff2");
}
/* Social Table: shared brand type and controls; game worlds keep their own identity. */
:root {
  --paper:#fffdf7;
  --ink:#14121a;
  --ink-soft:#575163;
  --pink:#ff4d8d;
  --blue:#2e5bff;
  --sun:#ffd23f;
  --aqua:#00c2cb;
  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"Space Mono",monospace
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.55 var(--body)
}
[hidden] {
  display:none!important
}
html {
  scroll-behavior:smooth
}
button,input {
  font:inherit
}
button,a {
  touch-action:manipulation
}
a {
  color:var(--blue)
}
:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:5px
}
button {
  cursor:pointer
}
button:disabled {
  cursor:default
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}
.skip-link:focus {
  position:fixed;
  z-index:100;
  width:auto;
  height:auto;
  clip:auto;
  top:10px;
  left:10px;
  background:var(--paper);
  padding:12px
}
.site-head,.band-inner,.front-hero {
  max-width:1280px;
  margin:auto;
  padding-inline:clamp(22px,4.5vw,56px)
}
.site-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block:26px
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font:800 22px/1 var(--disp);
  color:var(--ink);
  text-decoration:none
}
.site-nav a {
  font-weight:600;
  color:var(--ink);
  text-underline-offset:5px;
  display:inline-block;
  padding:10px 0
}
.front-hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  align-items:center;
  gap:20px;
  padding-block:20px 72px
}
h1,h2,h3 {
  font-family:var(--disp)
}
h1 {
  font-size:clamp(52px,6.4vw,84px);
  line-height:.98;
  letter-spacing:-.055em;
  margin:0 0 28px;
  font-weight:800
}
h1 .punch {
  text-decoration:underline;
  text-decoration-color:var(--pink);
  text-decoration-thickness:.15em;
  text-underline-offset:-.04em;
  text-decoration-skip-ink:none
}
.lede {
  font-size:20px;
  line-height:1.5;
  max-width:39ch;
  margin:0 0 26px
}
.hero-ctas {
  display:flex;
  flex-wrap:wrap;
  gap:14px
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:15px 24px;
  border:2px solid var(--ink);
  border-radius:12px;
  box-shadow:3px 3px 0 var(--ink);
  font-weight:600;
  color:var(--ink);
  background:var(--paper);
  text-decoration:none;
  transition:transform .15s,box-shadow .15s
}
.btn:hover {
  transform:translateY(-2px)
}
.btn:active {
  transform:translate(2px,2px);
  box-shadow:none
}
.btn-pink {
  background:var(--pink)
}
.btn:disabled {
  background:#ded8cf;
  color:#605965;
  box-shadow:none;
  transform:none
}
.hero-note {
  font-size:14px;
  color:var(--ink-soft);
  max-width:45ch;
  min-height:2em;
  margin:20px 0 0
}
.host-error,.join-error {
  color:#8b163d;
  font-weight:600
}
.host-error:empty,.join-error:empty {
  display:none
}
.catalog-retry {
  min-height:44px;
  background:none;
  border:0;
  text-decoration:underline;
  color:var(--blue);
  font-weight:600
}
.hero-illustration {
  position:relative;
  align-self:center
}
.hero-illustration img {
  display:block;
  width:100%;
  height:auto
}
.art-caption {
  text-align:center;
  font-weight:600;
  font-size:15px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:8px 0
}
.band-how {
  padding:62px 0 70px;
  border-top:1px solid #e5ded3
}
.sec-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:34px
}
.sec-head h2 {
  font-size:clamp(34px,4vw,52px);
  line-height:1.03;
  letter-spacing:-.04em;
  margin:0
}
.sec-badge {
  font-size:13px;
  font-weight:600;
  letter-spacing:.09em
}
.steps {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:30px;
  list-style:none;
  margin:0;
  padding:0
}
.stepnum {
  display:inline-block;
  font:800 28px/1 var(--disp);
  color:var(--blue);
  margin-bottom:12px
}
.stepcard h3 {
  font-size:22px;
  line-height:1.15;
  margin:0 0 12px
}
.stepcard p {
  margin:0;
  color:var(--ink-soft);
  font-size:16px
}
.band-secrets {
  padding:64px 0;
  background:#f8f1e5
}
.secrets-grid {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center
}
.secrets-copy p {
  max-width:43ch;
  font-size:18px
}
.secrets-legend {
  padding:0;
  list-style:none
}
.secrets-legend li {
  display:flex;
  gap:18px;
  margin:18px 0
}
.secrets-legend b {
  width:40px;
  color:var(--blue)
}
.flip-stand {
  text-align:center
}
.bigflip {
  display:block;
  width:240px;
  height:280px;
  margin:auto;
  padding:0;
  border:0;
  border-radius:18px;
  background:var(--ink);
  color:var(--paper);
  perspective:900px
}
.bigflip-inner {
  position:relative;
  display:block;
  height:100%;
  transition:transform .35s;
  transform-style:preserve-3d
}
.flipped .bigflip-inner {
  transform:rotateY(180deg)
}
.bigflip-face {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:22px;
  padding:28px;
  backface-visibility:hidden;
  border:2px solid var(--ink);
  border-radius:18px
}
.fb {
  background:var(--blue)
}
.fb i {
  font-style:normal;
  font-weight:600
}
.ff {
  transform:rotateY(180deg);
  background:var(--paper);
  color:var(--ink)
}
.df-eyebrow,.df-note {
  font-size:12px
}
.df-role {
  font:800 27px/1.2 var(--disp)
}
.flip-cap {
  font-size:14px;
  color:var(--ink-soft);
  max-width:35ch;
  margin:22px auto 0
}
.band-join {
  padding:64px 0;
  background:var(--blue);
  color:var(--paper)
}
.join-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center
}
.join-copy h2 {
  font-size:48px;
  line-height:1.05;
  letter-spacing:-.04em
}
.join-copy p {
  max-width:35ch
}
.seatcard {
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:16px;
  padding:28px;
  color:var(--ink)
}
.field {
  display:block;
  margin-bottom:20px
}
.field span {
  display:block;
  font-weight:600;
  margin-bottom:8px
}
.field input {
  width:100%;
  min-height:54px;
  border:2px solid #777080;
  border-radius:8px;
  padding:12px;
  font-size:18px
}
.seat-actions {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center
}
.join-note {
  font-size:13px
}
.seat-stamp {
  display:none
}
.band-join :focus-visible {
  outline-color:var(--sun)
}
.site-foot {
  padding:38px 0
}
.foot-brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800
}
.foot-grid {
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:40px;
  margin-top:20px
}
.foot-grid p {
  max-width:55ch;
  margin:0;
  color:var(--ink-soft);
  font-size:14px
}
.foot-grid nav {
  display:flex;
  gap:20px;
  flex-wrap:wrap
}
.foot-grid a {
  font-size:14px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  color:var(--ink)
}
/* Catalog is owned by the API and intentionally not a front-door decision. */
.gamecards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.gcard {
  border:1px solid #ddd;
  border-radius:12px;
  overflow:hidden
}
.cover-image {
  width:100%;
  display:block
}
.gmeta {
  padding:20px
}
.game-dialog {
  max-width:540px;
  border:2px solid var(--ink);
  border-radius:16px;
  padding:24px
}
.game-dialog::backdrop {
  background:#14121a99
}
.dialog-close-form {
  text-align:right
}
.dialog-close {
  min-width:44px;
  min-height:44px
}
.dialog-cover {
  max-height:250px;
  overflow:hidden
}
@media(max-width:860px) {
  .front-hero {
    grid-template-columns:1fr;
    gap:28px;
    padding-top:30px
  }
  .hero-copy {
    max-width:620px
  }
  .hero-illustration {
    width:min(100%,580px);
    margin:auto
  }
  h1 {
    font-size:70px
  }
  .steps {
    grid-template-columns:1fr 1fr
  }
  .secrets-grid,.join-grid {
    grid-template-columns:1fr;
    gap:40px
  }
  .foot-grid {
    flex-direction:column
  }
}
@media(max-width:480px) {
  .site-head {
    padding-block:20px
  }
  .brand {
    font-size:17px;
    gap:8px
  }
  .brand img {
    width:26px;
    height:26px
  }
  .site-nav a {
    font-size:13px
  }
  .front-hero {
    padding-top:20px;
    padding-bottom:44px
  }
  h1 {
    font-size:55px;
    margin-bottom:24px
  }
  .lede {
    font-size:17px
  }
  .hero-ctas {
    display:grid;
    grid-template-columns:1fr
  }
  .btn {
    width:100%
  }
  .hero-note {
    font-size:13px
  }
  .hero-illustration {
    margin-top:8px
  }
  .sec-head {
    display:block
  }
  .sec-badge {
    display:block;
    margin-top:18px
  }
  .steps {
    gap:28px 20px
  }
  .stepcard h3 {
    font-size:21px
  }
  .stepcard p {
    font-size:15px
  }
  .band-how,.band-secrets {
    padding-block:44px
  }
  .secrets-copy p {
    font-size:17px
  }
  .join-copy h2 {
    font-size:38px
  }
  .seatcard {
    padding:22px
  }
  .gamecards {
    grid-template-columns:1fr
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}