/* Quarter Up — Arcade
   Scene: a yellow cabinet under museum lights. Bichromatic — sunbeam yellow is
   the product, electric violet does every interactive job, and nothing else
   gets a colour. Sections are full-bleed and swap palette completely, so the
   page reads like a printed brochure rather than a scroll. */

:root{
  --yellow:#FFC500;
  --violet:#7700FF;
  --carbon:#312F27;
  --slate:#788086;
  --paper:#FFFFFF;
  --sand:#E9E4D9;
  --lime:#F5FF63;

  --font:'Schibsted Grotesk',system-ui,sans-serif;
  --pix:'Silkscreen',monospace;
  --page:1180px;
  --pad:clamp(20px,5vw,64px);
}

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

/* height:auto is required: the width/height attributes on every <img> would
   otherwise beat aspect-ratio and render images at their intrinsic height. */
img{ max-width:100%; height:auto; }

body{
  margin:0; background:var(--sand); color:var(--carbon);
  font-family:var(--font); font-size:clamp(16px,1.1vw,19px); line-height:1.42;
  letter-spacing:-.007em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ margin:0; font-weight:800; line-height:1; letter-spacing:-.035em; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--violet); outline-offset:3px; }

/* pixel face, used only for labels and dates — the 1-bit nod, kept small */
.pix{ font-family:var(--pix); font-weight:400; font-size:12px; letter-spacing:.02em; text-transform:uppercase; margin:0 0 18px; }
.pix.small{ font-size:10px; margin:0; opacity:.7; }

/* violet does all the interactive work, everywhere, always */
.btn{
  display:inline-block; cursor:pointer; text-decoration:none; text-align:center;
  background:var(--violet); color:#fff; border:2px solid var(--violet);
  border-radius:32px; padding:12px 24px;
  font-family:var(--font); font-weight:700; font-size:15px;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  transition:transform .14s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-lg{ padding:15px 30px; font-size:17px; }
.btn-ghost{ background:transparent; color:currentColor; border-color:currentColor; box-shadow:none; }

/* ---- nav */
.nav{ max-width:var(--page); margin:0 auto; padding:18px var(--pad); display:flex; align-items:center; gap:20px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:19px; letter-spacing:-.04em; text-decoration:none; }
.mark{ width:24px; height:24px; color:var(--violet); }
.links{ display:flex; gap:24px; margin-left:auto; }
.links a{ font-weight:500; font-size:15px; text-decoration:none; color:var(--carbon); opacity:.72; }
.links a:hover{ opacity:1; color:var(--violet); }
@media (max-width:880px){ .links{ display:none; } .nav .btn{ margin-left:auto; } }

/* ---- hero on slate */
.hero{
  background:var(--slate); color:var(--paper);
  padding:clamp(40px,6vw,84px) var(--pad);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,60px); align-items:center;
}
.hero{ max-width:none; }
.hero > *{ max-width:calc(var(--page) / 2); }
@media (max-width:900px){ .hero{ grid-template-columns:1fr; } .hero > *{ max-width:none; } }
.hero .pix{ color:var(--lime); }
.hero h1{ font-size:clamp(40px,6.2vw,82px); font-weight:900; margin-bottom:22px; }
.hero .lede{ font-size:clamp(17px,1.4vw,20px); margin:0 0 28px; opacity:.92; max-width:42ch; }
.btns{ display:flex; flex-wrap:wrap; gap:11px; }
.cab svg{ width:100%; max-width:330px; height:auto; display:block; margin-inline:auto; }

/* ---- full-bleed palette swaps */
.bleed{ padding:clamp(48px,6vw,92px) var(--pad); }
.wrap{ max-width:var(--page); margin:0 auto; }
.bleed h2{ font-size:clamp(30px,4.4vw,58px); max-width:20ch; }
.bleed .sub{ margin:18px 0 0; max-width:52ch; opacity:.75; font-size:17px; }

.bleed--yellow{ background:var(--yellow); color:var(--carbon); }
.bleed--yellow .pix{ color:var(--violet); }
.bleed--carbon{ background:var(--carbon); color:var(--sand); }
.bleed--carbon .pix{ color:var(--lime); }
.bleed--paper{ background:var(--paper); color:var(--carbon); }
.bleed--paper .pix{ color:var(--violet); }
.bleed--violet{ background:var(--violet); color:var(--paper); }
.bleed--violet .pix{ color:var(--yellow); }

/* ---- facts */
.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:30px 26px; margin-top:clamp(32px,4vw,54px); }
.fig{ font-size:clamp(46px,6vw,80px); font-weight:900; letter-spacing:-.05em; line-height:.85; margin:0 0 10px; }
.facts p:last-child{ margin:0; font-size:16px; max-width:22ch; opacity:.78; }

/* ---- game cards: near-square, edge-to-edge art, no frame */
.games{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:20px; margin-top:clamp(32px,4vw,52px); }
.game{ background:transparent; }
.screen{ border-radius:3px; overflow:hidden; margin-bottom:14px; }
.screen svg{ width:100%; height:auto; display:block; }
.game h3{ font-size:21px; margin-bottom:6px; }

/* ---- events */
.events{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:32px 30px; margin-top:clamp(30px,3.6vw,48px); }
.when{ font-family:var(--pix); font-size:11px; text-transform:uppercase; color:var(--violet); margin:0 0 14px; }
.events h3{ font-size:24px; margin-bottom:11px; }
.events p:last-child{ margin:0; font-size:16px; opacity:.75; }

/* ---- visit */
.visit{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:start; }
@media (max-width:820px){ .visit{ grid-template-columns:1fr; } }
.visit h2{ line-height:1.04; }
.hours{ display:grid; grid-template-columns:auto 1fr; gap:12px 24px; margin:0; font-size:17px; }
.hours dt{ font-family:var(--pix); font-size:11px; text-transform:uppercase; color:var(--yellow); padding-top:5px; }
.hours dd{ margin:0; }

/* ---- footer */
.foot{ background:var(--carbon); color:var(--sand); padding:clamp(36px,4.5vw,64px) var(--pad); }
.foot p{ max-width:var(--page); margin:0 auto 8px; }
.foot-mark{ font-weight:900; font-size:28px; letter-spacing:-.04em; }
.fine{ margin-top:20px !important; font-size:12.5px; opacity:.55; line-height:1.7; max-width:70ch; }

/* ---- demo tag */
.demo-tag{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:flex; flex-direction:column; gap:1px;
  background:var(--violet); color:#fff;
  padding:11px 18px; border-radius:32px; text-decoration:none; text-align:center;
  font-size:11px; letter-spacing:.04em; line-height:1.5;
  box-shadow:0 8px 22px rgba(119,0,255,.4);
}
.demo-tag span{ font-family:var(--pix); font-size:9px; opacity:.8; text-transform:uppercase; }
.demo-tag strong{ font-weight:700; font-size:12px; }
.demo-tag:hover{ background:var(--yellow); color:var(--carbon); }


/* ---- two photographs, butted edge to edge, no gap and no frame.
   The canvas-flip rule still holds: this band is its own full-bleed section. */
.neon{ display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:700px){ .neon{ grid-template-columns:1fr; } }
.neon img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
@media (max-width:700px){ .neon img{ aspect-ratio:16/9; } }