/* fusel.nl, de stijl van de site. Kleuren, letters en maten komen uit
   tokens.css; hier staan alleen rollen en plaatsing.

   Twee materialen, allebei van het etiket en het kaartje:
     navy   de grond van de pagina, de fles: hero, feiten, voet
     geel   het kaartje: de band met de drie kenmerken, navy erop
   Het ene ding dat opvalt is het medaillon in de hero: de zilveren schijf
   van het etiket met de tagline eromheen en het beeldmerk dat langzaam
   draait. Al het andere is rustig. */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap;
             src: url(/assets/fonts/Barlow-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap;
             src: url(/assets/fonts/Barlow-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap;
             src: url(/assets/fonts/Barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap;
             src: url(/assets/fonts/BarlowCondensed-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap;
             src: url(/assets/fonts/BarlowCondensed-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap;
             src: url(/assets/fonts/BarlowCondensed-700.woff2) format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--tekst);
  background: var(--grond);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--inkt); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wrap { width: min(100% - var(--s-6), var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--accent-inkt);
  padding: var(--s-3) var(--s-4); z-index: 10;
}
.skip:focus { left: var(--s-4); top: var(--s-4); }

/* ------------------------------------------------------------- letters
   Barlow Condensed voor koppen, in kapitalen zoals INFUSED LIMONCELLO op het
   etiket; Barlow voor alles wat gelezen wordt. */
h1, h2, h3 { font-family: var(--font-display); color: var(--inkt); margin: 0 0 var(--s-3);
             text-wrap: balance; line-height: 1.02; }
h1 { font-size: var(--t-display); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: var(--t-h2); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
h3 { font-size: var(--t-h3); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; line-height: 1.1; }
p { margin: 0 0 var(--s-4); }
.lead { font-size: var(--t-lead); line-height: 1.5; max-width: 34em; }
.prose { max-width: 38em; }
.prose h2 { margin-top: var(--s-7); }
.prose a { color: var(--accent); }

/* ------------------------------------------------------------- knoppen */
.knop {
  display: inline-block; padding: var(--s-3) var(--s-5);
  font-family: var(--font-display); font-weight: 600; font-size: 1.125rem;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  border-radius: var(--rond); border: 2px solid transparent;
}
.knop-primair { background: var(--accent); color: var(--accent-inkt); border-color: var(--accent); }
.knop-primair:hover { background: var(--inkt); border-color: var(--inkt); }
.knop-stil { color: var(--inkt); border-color: var(--lijn); }
.knop-stil:hover { border-color: var(--inkt); }
.acties { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* ------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; padding-block: var(--s-7) var(--sectie); }
.hero-in {
  display: grid; gap: var(--s-7);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
}
.hero-merk { width: clamp(10rem, 22vw, 16rem); margin-bottom: var(--s-7); }
.hero-merk-link { display: inline-block; }
.hero-merk-link .hero-merk { margin-bottom: var(--s-6); }
.hero-label {
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--accent);
  margin-bottom: var(--s-3);
}
.hero h1 { max-width: 12em; }
.hero-eenvoudig .hero-in { grid-template-columns: 1fr; }

/* Het medaillon: een zilveren schijf (svg) met de twee bogen van de
   tagline, en het witte beeldmerk erop, dat in twee minuten een keer rond
   draait. De schijf is iets groter dan zijn kolom en loopt rechts van de
   pagina af, zoals het medaillon over de rand van de banderol op het
   etiket hangt. */
.medaillon {
  position: relative; justify-self: end;
  width: min(34rem, 100%); aspect-ratio: 1;
  margin-right: clamp(-6rem, -8vw, -2rem);
}
.medaillon-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.medaillon-schijf { fill: var(--fs-zilver); }
.medaillon-tekst {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: .18em; fill: var(--fs-navy);
}
.medaillon-citroen {
  position: absolute; inset: 19%; width: 62%; height: 62%;
  animation: draai 120s linear infinite;
}
@keyframes draai { to { transform: rotate(1turn); } }

/* ------------------------------------------------------------- de gele band */
.band { background: var(--band); color: var(--band-tekst); padding-block: var(--sectie); }
.band h2, .band h3 { color: var(--band-inkt); }
.band-kop { max-width: 14em; margin-bottom: var(--s-7); }
.kenmerken {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.kenmerken li { padding-top: var(--s-4); border-top: 2px solid var(--band-lijn); }
.kenmerken p { margin: 0; max-width: 28em; }

/* ------------------------------------------------------------- feiten
   Wat op het etiket staat, als naam en waarde. */
.feiten-vlak { padding-block: var(--sectie) var(--s-8); }
.feiten-kop { margin-bottom: var(--s-6); }
.feiten {
  margin: 0; display: grid; gap: var(--s-5) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.feiten div { border-top: 1px solid var(--lijn); padding-top: var(--s-3); }
.feiten dt { font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
             letter-spacing: .08em; font-size: .9375rem; color: var(--tekst-stil); }
.feiten dd { margin: var(--s-1) 0 0; color: var(--inkt); font-size: 1.25rem; font-weight: 500; }

/* ------------------------------------------------------------- formulier
   Het reserveringsformulier van de kit (partials/formulier): links de
   velden, rechts wat de bezoeker wil weten voordat hij reserveert. */
.formulier { padding-block: var(--sectie); border-top: 1px solid var(--lijn); }
.formulier-in { display: grid; gap: var(--s-8); grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); align-items: start; }
.formulier-hoofd { grid-column: 1; grid-row: 1 / span 2; }
.formulier-naast { grid-column: 2; grid-row: 1; }
.formulier-onder { grid-column: 2; grid-row: 2; }
.formulier-naast h2, .formulier-hoofd h2 { margin-bottom: var(--s-5); }
.formulier-naast h2 { font-size: var(--t-h3); }
.formulier-naast ul { padding-left: 1.1em; }
.formulier-naast li { margin-bottom: var(--s-2); }
.veld { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); }
.veld label { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; color: var(--inkt); }
.veld .optioneel { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--tekst-stil); }
.veld input, .veld textarea {
  font: inherit; color: var(--inkt); background: var(--grond-diep);
  border: 1px solid var(--lijn); border-radius: var(--rond); padding: var(--s-3) var(--s-4);
  width: 100%;
}
.veld input:focus, .veld textarea:focus { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--accent); }
.veld textarea { min-height: 8rem; resize: vertical; }
.veld [aria-invalid="true"] { border-color: var(--accent); }
.veldfout { color: var(--accent); font-size: var(--t-klein); }
.veld-uitleg, .veld-hint { font-size: var(--t-klein); color: var(--tekst-stil); }
.veld-verplicht-uitleg { font-size: var(--t-klein); color: var(--tekst-stil); margin-bottom: var(--s-5); }
.form-belofte { font-weight: 500; margin-bottom: var(--s-4); }
.honeypot { position: absolute; left: -9999px; }
.melding { padding: var(--s-4) var(--s-5); border-radius: var(--rond); margin-bottom: var(--s-5); border: 1px solid var(--lijn); }
.melding-goed { background: var(--band); color: var(--band-inkt); border-color: var(--band); }
.melding-fout { border-color: var(--accent); }
.gerust-vlak { font-size: var(--t-klein); color: var(--tekst-stil); }
@media (max-width: 52rem) {
  .formulier-in { grid-template-columns: 1fr; }
  .formulier-hoofd, .formulier-naast, .formulier-onder { grid-column: 1; grid-row: auto; }
}

/* ------------------------------------------------------------- lopende tekst */
main > .wrap { padding-block: var(--s-6) var(--sectie); }

/* ------------------------------------------------------------- voet */
.voet { background: var(--grond-diep); padding-block: var(--s-8) var(--s-7); border-top: 1px solid var(--lijn); }
.voet-in { display: grid; gap: var(--s-6); grid-template-columns: auto 1fr; align-items: start; }
.voet-merk { width: 11rem; }
.voet-tekst { font-size: var(--t-klein); color: var(--tekst-stil); max-width: 40em; }
.voet-tekst p { margin-bottom: var(--s-2); }
.voet-tekst a { color: var(--tekst); }
.voet-alcohol { margin-top: var(--s-5); }
.voet-alcohol img { width: 9rem; }
.voet-alcohol a { display: inline-block; }
.poort-nix18 { width: 8rem; margin: var(--s-6) auto 0; }
.voet-juridisch { list-style: none; margin: var(--s-4) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-4); }
.voet-klein { margin-top: var(--s-5); }
.voet-leden { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: flex; gap: var(--s-4); }
.voet-leden img { width: 10rem; }

/* ------------------------------------------------------------- leeftijdspoort
   Een navy vlak over de hele pagina, het logo, de vraag en twee knoppen.
   Zonder script staat de dialoog open bovenaan de pagina; met script is hij
   modaal en bedekt zijn backdrop de rest. */
.poort {
  border: 0; padding: 0; margin: 0; max-width: none; max-height: none;
  width: 100%; min-height: 100vh; min-height: 100dvh;
  background: var(--grond); color: var(--tekst);
  display: grid; place-items: center;
}
.poort:not([open]) { display: none; }
.poort::backdrop { background: var(--fs-navy); }
.poort-in { width: min(100% - var(--s-6), 34rem); padding-block: var(--s-8); text-align: center; }
.poort-merk { width: 12rem; margin: 0 auto var(--s-6); }
.poort h2 { text-transform: none; letter-spacing: 0; font-size: var(--t-h2); }
.poort p { max-width: 36em; margin-inline: auto; }
.poort-knoppen { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-5); }
.poort-klein { font-size: var(--t-klein); color: var(--tekst-stil); margin-top: var(--s-5); }
html.poort-dicht { overflow: hidden; }

/* ------------------------------------------------------------- telefoon */
@media (max-width: 52rem) {
  .hero-in { grid-template-columns: 1fr; }
  .medaillon { justify-self: center; width: min(22rem, 86vw); margin-right: 0; }
  .voet-in { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- rust */
@media (prefers-reduced-motion: reduce) {
  .medaillon-citroen { animation: none; }
}