/* ===========================================================================
   URBAN GAMEZ -- het enige stijlblad van de site.

   HET PALET IS GEMETEN EN NIET BEDACHT. Elke kleur hieronder met "gemeten"
   erbij is met Pillow uit de winkelvellen in
   amsterdam-godot/uitgave/winkelbeelden/appstore/iphone-69/ gehaald:
   een vakje van 24 bij 24 beeldpunten, de vaakst voorkomende kleur.
   Daarmee staat de site in dezelfde kleuren als het spel, en niet in de
   kleuren die een sjabloon toevallig meebracht.

   ER WORDT NIETS VAN BUITEN GELADEN. Geen Google Fonts, geen statistieken,
   geen cookiemelding -- want er zijn geen cookies. Dat is geen gemakzucht:
   het spel verzamelt niets, en dan hoort de site dat ook niet te doen.
   =========================================================================== */

:root {
  /* --- uit het spel gemeten ------------------------------------------- */
  --gracht:        #3b5373;  /* gemeten: het water van de Prinsengracht     */
  --gracht-licht:  #4e6686;  /* gemeten: hetzelfde water in de zon          */
  --baksteen:      #c8744f;  /* gemeten: de pannendaken van de Jordaan      */
  --kade:          #b58570;  /* gemeten: de bakstenen kade bij daglicht     */
  --kade-schaduw:  #3d2824;  /* gemeten: dezelfde kade in de schaduw        */
  --straat:        #5f6066;  /* gemeten: het asfalt                         */
  --nacht:         #171c35;  /* gemeten: het water op het nachtvel          */
  --band:          #202834;  /* gemeten: de bijschriftband van de vellen    */

  /* --- daarvan afgeleid, voor leesbaarheid bijgetrokken ---------------- */
  --accent:        #2a5878;  /* de gracht, donkerder: 7,5 : 1 op wit        */
  --vlam:          #9d4f31;  /* het dakrood, donkerder: 5,8 : 1 op wit      */

  /* --- lichte stand ----------------------------------------------------- */
  --grond:         #f6f2ed;
  --vel:           #fffdfb;
  --vel-dieper:    #f0eae3;
  --inkt:          #1a1e26;
  --zacht:         #5c6472;
  --lijn:          #e4dbd2;
  --schaduw:       0 1px 2px rgba(26, 30, 38, .05), 0 6px 18px rgba(26, 30, 38, .05);

  /* --- letters ---------------------------------------------------------- */
  /* Geen webletter: elk extern lettertype is een verzoek naar buiten.
     Twee stapels die op Mac, Windows, iOS en Android allemaal iets echts
     vinden, en die duidelijk van elkaar verschillen. */
  --kop: "Avenir Next", Avenir, "Segoe UI Variable Display", "Segoe UI",
         "Noto Sans", Roboto, system-ui, -apple-system, "Helvetica Neue",
         Arial, sans-serif;
  --brood: Charter, "Bitstream Charter", "Iowan Old Style", "Palatino Linotype",
           Palatino, "Noto Serif", "Source Serif 4", Georgia, "Times New Roman",
           serif;

  --breed: 62rem;
  --smal:  44rem;
}

/* De donkere stand. Twee keer, want de voorkeur van het toestel en een
   eventuele eigen keuze moeten allebei werken. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --grond:      #10141b;
    --vel:        #171c25;
    --vel-dieper: #1d232e;
    --inkt:       #e8eaef;
    --zacht:      #99a3b2;
    --lijn:       #262d39;
    --accent:     #8bb9d8;
    --vlam:       #e39167;
    --schaduw:    0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .3);
  }
}
:root[data-thema="donker"] {
  --grond:      #10141b;
  --vel:        #171c25;
  --vel-dieper: #1d232e;
  --inkt:       #e8eaef;
  --zacht:      #99a3b2;
  --lijn:       #262d39;
  --accent:     #8bb9d8;
  --vlam:       #e39167;
  --schaduw:    0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .3);
}

/* --------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font-family: var(--brood);
  font-size: 1.0625rem;      /* 17 px */
  line-height: 1.7;
  overflow-x: hidden;        /* geen horizontale schuifbalk, nooit */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* Toetsenbordbediening moet te zien zijn. Dit is de enige focusstijl en hij
   staat op alles -- geen enkele regel haalt hem ergens weg. */
:focus-visible {
  outline: 3px solid var(--vlam);
  outline-offset: 3px;
  border-radius: 3px;
}

a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

.overslaan {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--grond);
  padding: .7rem 1rem; z-index: 50; font-family: var(--kop);
}
.overslaan:focus { left: 0; }

/* ---------- raamwerk --------------------------------------------------- */

.binnen { width: 100%; max-width: var(--breed); margin: 0 auto; padding: 0 16px; }
.binnen--smal { max-width: var(--smal); }

/* ---------- kop en navigatie ------------------------------------------ */

.kopbalk {
  border-bottom: 1px solid var(--lijn);
  background: var(--vel);
}
.kopbalk .binnen {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem;
  padding-top: .85rem; padding-bottom: .85rem;
}

.merk {
  font-family: var(--kop);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--inkt);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .55rem;
  margin-right: auto;
}
.merk:hover { color: var(--vlam); }
.merk .ruit {
  width: .62rem; height: .62rem;
  background: var(--baksteen);
  transform: rotate(45deg);
  flex: none;
}

.navigatie { display: flex; flex-wrap: wrap; gap: .15rem .3rem; align-items: center; }
.navigatie a {
  font-family: var(--kop);
  font-size: .9rem;
  font-weight: 600;
  color: var(--zacht);
  text-decoration: none;
  padding: .35rem .55rem;
  border-radius: 5px;
}
.navigatie a:hover { color: var(--inkt); background: var(--vel-dieper); }
.navigatie a[aria-current="page"] {
  color: var(--inkt);
  box-shadow: inset 0 -2px 0 var(--baksteen);
}

.taal {
  font-family: var(--kop); font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--zacht); text-decoration: none;
  border: 1px solid var(--lijn); border-radius: 999px;
  padding: .28rem .7rem; white-space: nowrap;
}
.taal:hover { color: var(--inkt); border-color: var(--zacht); }

/* ---------- koppen ----------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--kop);
  line-height: 1.15;
  letter-spacing: -.018em;
  text-wrap: balance;
  margin: 0 0 .5rem;
}
h1 { font-size: clamp(2rem, 6.5vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3.6vw, 1.85rem); font-weight: 800; margin-top: 3rem; }
h3 { font-size: 1.1rem; font-weight: 700; margin-top: 2rem; }

.opschrift {
  font-family: var(--kop);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--vlam);
  margin: 0 0 .7rem;
}

p { margin: 0 0 1.1rem; }
.lood { font-size: 1.2rem; line-height: 1.6; color: var(--inkt); }
.zacht { color: var(--zacht); }
.klein { font-size: .93rem; }

/* ---------- de kop van een pagina -------------------------------------- */

.vlag { padding: 3.2rem 0 1rem; }
.vlag p.lood { max-width: 38rem; }

/* De ene zin, groot. Staat op de voorpagina en op de spelpagina, en is
   woordelijk dezelfde zin als in MARKETING.md hoofdstuk 2. */
.ene-zin {
  font-family: var(--kop);
  font-weight: 800;
  font-size: clamp(1.65rem, 5.4vw, 2.6rem);
  line-height: 1.16;
  letter-spacing: -.022em;
  text-wrap: balance;
  margin: 0 0 1.2rem;
}
.ene-zin em { font-style: normal; color: var(--vlam); }

/* ---------- kaarten ----------------------------------------------------- */

.kaart {
  background: var(--vel);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  padding: 1.35rem 1.5rem;
  margin: 1.4rem 0;
  box-shadow: var(--schaduw);
}
.kaart > :first-child { margin-top: 0; }
.kaart > :last-child { margin-bottom: 0; }
.kaart h2, .kaart h3 { margin-top: 1.6rem; }

.kaart--let-op { border-left: 4px solid var(--vlam); }

/* ---------- de getallenstrook ------------------------------------------ */

.cijfers {
  list-style: none; margin: 2rem 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  background: var(--lijn);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  overflow: hidden;
}
.cijfers li { background: var(--vel); padding: 1.1rem 1.1rem 1.2rem; }
.cijfers b {
  display: block;
  font-family: var(--kop); font-weight: 800;
  font-size: 1.6rem; letter-spacing: -.02em;
  color: var(--inkt);
  line-height: 1.1; margin-bottom: .2rem;
}
.cijfers span { font-size: .9rem; color: var(--zacht); line-height: 1.4; display: block; }

/* ---------- schermafbeeldingen ------------------------------------------ */

.vel-beeld { margin: 2rem 0 2.4rem; }
.vel-beeld img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--lijn);
  background: var(--band);
}
.vel-beeld figcaption {
  margin-top: .6rem;
  font-size: .92rem;
  color: var(--zacht);
  line-height: 1.55;
}

/* Twee naast elkaar waar het past. */
.beeldpaar {
  display: grid; gap: 1.6rem;
  grid-template-columns: 1fr;
  margin: 2rem 0 2.4rem;
}
@media (min-width: 46rem) {
  .beeldpaar { grid-template-columns: 1fr 1fr; }
}
.beeldpaar .vel-beeld { margin: 0; }

/* ---------- lijsten ----------------------------------------------------- */

ul, ol { padding-left: 1.25rem; margin: 0 0 1.1rem; }
li { margin: .35rem 0; }

dl.gegevens { margin: 0; }
dl.gegevens div {
  display: grid; grid-template-columns: 11rem 1fr;
  gap: .2rem .8rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--lijn);
}
dl.gegevens div:last-child { border-bottom: 0; }
dl.gegevens dt {
  font-family: var(--kop); font-size: .85rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--zacht); padding-top: .15rem;
}
dl.gegevens dd { margin: 0; }
@media (max-width: 34rem) {
  dl.gegevens div { grid-template-columns: 1fr; }
}

/* ---------- knoppen ------------------------------------------------------ */

.knoppen { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.4rem 0; }

.knop {
  font-family: var(--kop); font-weight: 700; font-size: .98rem;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.25rem;
  border-radius: 9px;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--grond);
}
.knop:hover { background: var(--inkt); }
.knop--rustig {
  background: transparent; color: var(--accent); border-color: var(--lijn);
}
.knop--rustig:hover { background: var(--vel-dieper); color: var(--inkt); }

/* ---------- prijsblok ---------------------------------------------------- */

.prijs {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem 1rem;
  margin-bottom: .6rem;
}
.prijs b {
  font-family: var(--kop); font-weight: 800;
  font-size: 2.3rem; letter-spacing: -.02em; line-height: 1;
  color: var(--inkt);
}
.prijs span { color: var(--zacht); }

/* ---------- code en citaat ----------------------------------------------- */

code {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas,
               "Roboto Mono", "DejaVu Sans Mono", monospace;
  font-size: .9em;
  background: var(--vel-dieper);
  border: 1px solid var(--lijn);
  border-radius: 4px;
  padding: .08em .35em;
  word-break: break-word;
}

/* ---------- voet ---------------------------------------------------------- */

.voet {
  margin-top: 4rem;
  border-top: 1px solid var(--lijn);
  background: var(--vel);
  padding: 2.2rem 0 3rem;
  font-size: .93rem;
  color: var(--zacht);
}
.voet a { color: var(--zacht); }
.voet a:hover { color: var(--inkt); }
.voet nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: 1.1rem; }
.voet nav a { font-family: var(--kop); font-weight: 600; text-decoration: none; }
.voet nav a:hover { text-decoration: underline; }
.voet p { margin: 0 0 .6rem; max-width: 46rem; }

/* ---------- afstand onderaan de inhoud ------------------------------------ */

main { padding-bottom: 1rem; display: block; }

/* ---------- beweging --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- papier --------------------------------------------------- */

@media print {
  .kopbalk, .voet nav, .overslaan { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .kaart { border: 1px solid #999; box-shadow: none; }
}