/* ============================================================
   Nine Deals — site styles

   Het palet is dat van het spel zelf (stockpile/scripts/ui/Theme.gd): bijna zwart
   met het groene tafelblad als vlak eronder, en messing als accent. Dezelfde
   familie als de andere twee sites, donkerder van aanslag.

   Het lettertype is ook dat van het spel: Atkinson Hyperlegible, ontworpen door
   het Braille Institute om tekens die op elkaar lijken uit elkaar te houden. Dat
   is geen versiering maar het onderwerp — deze spellen zijn gemaakt voor een
   publiek dat bij de concurrentie steevast klaagt dat het te klein is.

   De monospace is er voor de hashes op /fair. Een SHA-256 die in een proportioneel
   lettertype staat, is niet te vergelijken met wat je zelf uitrekent.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Rechtstreeks uit Theme.gd. */
  --bg:#0B0C0F; --bg-2:#121418; --panel:#14251B; --panel-2:#203228;
  --accent:#B8934F; --accent-dim:rgba(184,147,79,.30);
  --good:#7BE698; --warn:#FAC73E; --bad:#AF1414;
  /* --text en --muted zijn PAPER en MUTED uit Theme.gd. */
  --text:#ECEAE5; --muted:#A29F98; --line:rgba(236,234,229,.16);

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --radius:12px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
/* overflow-x op de wortel en niet op body: één as op body zetten maakt van zijn eigen
   overflow-y "auto", en dan wordt body de scroll-container in plaats van het document. */
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Atkinson Hyperlegible',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:700; line-height:1.2; letter-spacing:-.01em}
.mono,.num,code{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

a{color:var(--accent); text-decoration:none; transition:color .2s var(--ease)}
a:hover{color:#D9B36A}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
img{max-width:100%; display:block}

.wrap{max-width:1080px; margin:0 auto; padding:0 var(--s3)}
.narrow{max-width:760px}
.ta-center{text-align:center}

/* ---------- kop ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(11,12,15,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex; align-items:center; gap:var(--s2); height:64px}
.brand{display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700;
  letter-spacing:.02em; color:var(--text)}
.brand img{width:30px; height:30px; border-radius:7px}
nav.main{margin-left:auto; display:flex; gap:4px; font-size:14px}
/* 44px is de ondergrens voor een aanraakvlak; het label zelf is maar zo'n 23px hoog. */
nav.main a{color:var(--muted); display:inline-flex; align-items:center;
  min-height:44px; padding:0 12px; border-radius:8px}
nav.main a:hover,nav.main a[aria-current]{color:var(--text); background:rgba(184,147,79,.10)}

/* ---------- hero ---------- */
.hero{position:relative; text-align:center; padding:var(--s6) 0 var(--s5);
  border-bottom:1px solid var(--line); overflow:hidden}
.hero:before{
  content:""; position:absolute; inset:-45% 0 auto; height:680px;
  background:radial-gradient(ellipse at 50% 42%, rgba(184,147,79,.13), transparent 62%);
  pointer-events:none;
}
.hero > *{position:relative}
.hero .mark{width:108px; height:108px; border-radius:24px; margin:0 auto;
  box-shadow:0 18px 60px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.6)}
/* De ondergrens van de clamp is wat een scherm van 375px krijgt. */
.hero h1{font-size:clamp(30px,7vw,64px); margin:var(--s3) 0 var(--s1); letter-spacing:-.02em;
  text-wrap:balance}
.hero .tag{font-size:clamp(18px,2.4vw,25px); color:var(--text); margin:0 0 14px; font-weight:400}
.hero .sub{color:var(--muted); max-width:640px; margin:0 auto var(--s4); font-size:17px}

.cta{display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 22px;
  border-radius:10px; background:var(--accent); color:#1A1206; font-weight:700;
  transition:background .2s var(--ease), transform .2s var(--ease)}
.cta:hover{background:#D9B36A; color:#1A1206; transform:translateY(-1px)}
.cta.ghost{background:transparent; color:var(--text); border:1px solid var(--line)}
.cta.ghost:hover{background:rgba(184,147,79,.10); color:var(--text)}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ---------- secties ---------- */
section{padding:var(--s6) 0; border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
.section-head{max-width:720px; margin-bottom:var(--s4)}
.section-head h2{font-size:clamp(26px,4vw,38px); margin:0 0 12px}
.section-head p{color:var(--muted); margin:0; font-size:17px}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 10px}

/* ---------- afbeeldingen ---------- */
figure.shot{margin:0}
figure.shot .frame{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--panel); box-shadow:0 24px 60px rgba(0,0,0,.55);
}
figure.shot figcaption{color:var(--muted); font-size:14px; margin-top:12px}
.shots{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--s3); max-width:1080px; margin:0 auto; padding:0 var(--s3)}

/* ---------- twee kolommen ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:center}
.split.reverse .text{order:2}
@media (max-width:860px){ .split{grid-template-columns:1fr; gap:var(--s4)} .split.reverse .text{order:0} }
.split h2{font-size:clamp(24px,3.4vw,34px); margin:0 0 14px}
.split p{color:var(--muted); margin:0 0 14px}
/* Een telefoonafdruk is hoog en smal; zonder plafond duwt hij de rij uit elkaar. */
.split figure.shot .frame{max-width:340px; margin:0 auto}

/* ---------- kaarten ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s3)}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s3)}
.card h3{margin:0 0 8px; font-size:18px}
.card p{margin:0; color:var(--muted); font-size:15px}

/* ---------- de cijferstrook ---------- */
.figures{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--s3);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:var(--s4) 0}
.figure{text-align:center}
.figure .n{font-family:'IBM Plex Mono',monospace; font-size:clamp(26px,4vw,38px);
  color:var(--accent); font-weight:500; line-height:1.1}
.figure .l{color:var(--muted); font-size:14px; margin-top:6px}

/* ---------- de eerlijke lijst ---------- */
.honest{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s4)}
.honest ul{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}
.honest li{display:flex; align-items:flex-start; gap:10px; color:var(--text); font-size:15px}
.honest li svg{width:18px; height:18px; color:var(--good); flex:0 0 18px; margin-top:4px}
.honest .kicker{margin:var(--s3) 0 0; color:var(--muted); font-size:15px}
/* Deze twee stonden eerst als style="" in de HTML. Een strikte CSP laat inline stijl
   vallen zonder een woord te zeggen, dus check_site.py weigert het en dat is terecht. */
.honest-head{margin:0 0 20px}
.tail{height:64px}

/* ---------- tekstpagina's ---------- */
.prose{max-width:760px; margin:0 auto; padding:var(--s5) var(--s3)}
.prose h1{font-size:clamp(30px,5vw,42px); margin:0 0 8px}
.prose .lede{color:var(--muted); font-size:18px; margin:0 0 var(--s4)}
.prose h2{font-size:24px; margin:var(--s5) 0 var(--s2); padding-top:var(--s2);
  border-top:1px solid var(--line)}
.prose h3{font-size:18px; margin:var(--s4) 0 8px}
.prose p,.prose li{color:var(--muted)}
.prose strong{color:var(--text); font-weight:700}
.prose ul{padding-left:20px}
.prose li{margin-bottom:8px}
.prose table{width:100%; border-collapse:collapse; margin:var(--s3) 0; font-size:15px}
.prose th,.prose td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);
  vertical-align:top}
.prose th{color:var(--text); font-weight:700}
.prose td{color:var(--muted)}
.prose code{font-size:14px; background:var(--panel);
  border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--text)}
/* Een hash is lang en mag niet buiten beeld lopen. */
.prose code.hash{word-break:break-all; display:inline-block; max-width:100%}
.note{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--warn);
  border-radius:8px; padding:var(--s2) var(--s3); margin:var(--s3) 0}
.note p{margin:0}
.note.accent{border-left-color:var(--accent)}

/* ---------- voet ---------- */
footer{border-top:1px solid var(--line); padding:var(--s4) 0; color:var(--muted); font-size:14px}
footer .wrap{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
footer nav{margin-left:auto; display:flex; gap:var(--s2)}
footer a{color:var(--muted)}
footer a:hover{color:var(--text)}

/* ---------- verschijnen bij scrollen ----------
   De inhoud is standaard zichtbaar. reveal.js kiest de animatie erbij door .js-reveal op
   <html> te zetten, dus een geblokkeerd of mislukt script kan nooit een lege pagina
   achterlaten. */
.js-reveal .reveal{opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease)}
.js-reveal .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-reveal .reveal{opacity:1; transform:none; transition:none}
  .cta:hover{transform:none}
}

/* ---------- smalle schermen ----------
   De koprij is het krapste op de pagina: het woordmerk plus vier links is ongeveer 500px
   aan onbreekbare inhoud, breder dan een telefoon. Daaronder wordt het twee rijen in plaats
   van dat het overloopt. */
@media (max-width:680px){
  header.site .wrap{flex-wrap:wrap; height:auto; padding-top:10px; padding-bottom:6px; gap:0}
  .brand{font-size:14px}
  nav.main{
    margin-left:0; width:100%; justify-content:flex-start;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{padding:0 10px; white-space:nowrap; min-height:40px}

  .hero h1 br{display:none}
  .hero{padding:var(--s5) 0 var(--s4)}
  .hero .mark{width:84px; height:84px; border-radius:19px}
  section{padding:var(--s5) 0}
  .split{gap:var(--s3)}
  .honest{padding:var(--s3)}
  .prose{padding:var(--s4) var(--s3)}
  /* Een tabel kan onder een zekere breedte niet meer herschikken; laat hem dan schuiven in
     plaats van de pagina breder te maken. */
  .prose table{display:block; overflow-x:auto; white-space:nowrap}
  .prose th,.prose td{white-space:normal; min-width:150px}
}
@media (max-width:400px){
  /* Alleen het icoon blijft over. `display:none` haalt de naam ook uit de
     toegankelijkheidsboom, dus draagt de link zelf een aria-label — zonder dat wordt dit
     een link zonder naam. */
  .brand span{display:none}
  footer .wrap{flex-direction:column; align-items:flex-start; gap:10px}
  footer nav{margin-left:0; flex-wrap:wrap}
}