/* ============================================================
   Fair Backgammon — site styles

   Het palet is dat van het spel zelf (backgammon/scripts/ui/Theme.gd): hetzelfde
   donkere grijs met noten en messing. Waar de cribbage-site viltgroen is, is deze
   het hout van het bord — dezelfde familie, ander spel.

   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:#101012; --bg-2:#1B1B1D; --panel:#2E2116; --panel-2:#372314;
  --accent:#B8934F; --accent-dim:rgba(184,147,79,.30);
  --good:#7BE698; --warn:#FAC73E; --bad:#E57349;
  /* --text en --muted zijn PAPER en MUTED uit Theme.gd. */
  --text:#ECE7DB; --muted:#A5A399; --line:rgba(236,231,219,.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(16,16,18,.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}
}