/* Draaimolen 2026, naar de campagne op draaimolen.nu: teal-groen dat oplost
   in olijfgoud, gebroken wit (#EEE), brede vette grotesk (Archivo Expanded als
   vrije stand-in voor Druk Wide) met Inter als bodytekst. Eigen indeling:
   dagbanden in plaats van kolommen, één meteogram, dennen-skyline onderin.
   Vult de semantische slots van shared/poster.css in. */
:root {
  --nacht: #071110;
  --licht: #EEEEEE;       /* gebroken wit van draaimolen.nu */
  --donker: #0E2B26;      /* teal-zwartgroen uit de campagne */
  --accent: #8FD0AC;      /* chrome-mint van het logo */
  --accent2: #E8C96A;     /* goudgele streaks uit het campagnebeeld */
  --signaal: #C2472E;     /* rood uit de orb-beelden */
  --band: #2E4A3F;
  --ink: #16261F;
  --f-pix: 'Archivo', 'Arial Black', sans-serif;
  --f-label: 'Inter', Arial, sans-serif;
  --f-body: 'Inter', Arial, sans-serif;
  --gradient: linear-gradient(180deg,
    #071110 0%, #0C201C 11%, #123129 24%, #1C4A3E 35%, #2E6152 42%,
    #5D8168 50%, #93997B 58%, #B7AF7E 68%, #D2C58B 78%, #E1D6A0 88%, #EDE4B6 100%);
}

/* Archivo als variabele font: overal de brede (Druk Wide-achtige) instantie */
* { font-stretch: 125%; }

/* groot outline-wordmark met per-letter jitter, zoals op de campagnebanner */
.merk { font-size: 54px; letter-spacing: 0; line-height: 1.14; }
.merk .rij i {
  display: inline-block; font-style: normal;
  -webkit-text-stroke: 1.8px var(--licht);
  color: color-mix(in srgb, var(--licht) 34%, transparent);
}
.merk .rij i:nth-child(5n+1) { transform: translateY(-2px) rotate(-2deg); }
.merk .rij i:nth-child(5n+2) { transform: translateY(1.5px); }
.merk .rij i:nth-child(5n+3) { transform: translateY(-1px) rotate(1.5deg); }
.merk .rij i:nth-child(5n+4) { transform: translateY(2.5px) rotate(-1deg); }
.merk .rij i:nth-child(5n+5) { transform: translateY(-1.5px) rotate(2deg); }
.merk .jaar { font-size: 34px; margin-top: 8px; }
.kop-info { padding-top: 8px; }
.kop-info .onderwerp { font-size: 15px; }
.kop-info .regels { font-size: 9.5px; letter-spacing: 0.5px; }

/* het verdict rechts in de kop, onder de infregels */
.kop-info #verdictKop { font-family: var(--f-pix); font-weight: 900; font-size: 14.5px; color: var(--accent2); margin: 20px 0 7px; }
.kop-info #verdictTekst { margin: 0 0 0 auto; max-width: 345px; font-size: 11px; line-height: 1.6; color: var(--licht); }

.grafieken h2 { font-size: 11px; }
.grafiekkop { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.buienregel { font-family: var(--f-pix); font-weight: 900; font-size: 9px; color: var(--donker); letter-spacing: 0.5px; }
footer .site { font-size: 8.5px; }

/* ---------- de twee festivaldagen als brede banden ---------- */
.dagen { margin-top: 20px; padding: 0 30px; }
.band {
  display: grid; grid-template-columns: 185px 108px 165px 1fr;
  align-items: center; column-gap: 24px; padding: 22px 8px;
}
.band + .band { border-top: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.band .dagnaam { font-family: var(--f-pix); font-weight: 900; font-size: 24px; color: var(--accent); }
.band .datum { font-family: var(--f-pix); font-weight: 500; font-size: 11px; color: var(--licht); letter-spacing: 1px; margin-top: 5px; }
.band .icon { width: 104px; height: 104px; object-fit: contain; }
.band .temp { font-family: var(--f-pix); font-weight: 900; font-size: 60px; line-height: 1; color: var(--licht); }
.band .temp .gr { font-family: var(--f-body); font-weight: 700; font-size: 34px; vertical-align: 15px; }
.band .nacht { font-size: 11px; color: color-mix(in srgb, var(--licht) 80%, transparent); margin-top: 5px; }
.band .kans { font-size: 13px; font-weight: 700; color: var(--licht); }
.band .conditie { font-family: var(--f-pix); font-weight: 900; font-size: 10px; color: var(--accent2); margin-top: 8px; letter-spacing: 0.5px; }

/* ---------- één meteogram over de volle breedte ---------- */
.grafieken { grid-template-columns: 1fr; margin-top: 38px; }

/* ---------- staart: dennen-skyline over de volle breedte ---------- */
.staart { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
#silhouet { display: block; width: 100%; height: auto; }

/* de korrel iets terug voor de leesbaarheid op de shader-achtergrond */
.grain { opacity: 0.16; }

/* de orb als merkteken in plaats van een pixel-glyph */
.hoeksticker svg { width: 20px; height: 20px; }
footer .glyph { width: 15px; height: 15px; }

/* ---------- mobiel ---------- */
@media (max-width: 680px) {
  .dagen { padding: 0 16px; }
  .band { grid-template-columns: 1fr 1fr; row-gap: 10px; padding: 20px 4px; }
  .band .dagnaam { font-size: 17px; }
  .band .icon { width: 108px; height: 108px; justify-self: end; }
  .band .temp { font-size: 58px; }
  .band .nacht, .band .kans { font-size: 13px; }
  .band .conditie { font-size: 10px; }
  .kop { flex-direction: column; gap: 18px; }
  .merk { font-size: 40px; }
  .kop-info { text-align: left; padding: 0; }
  .kop-info #verdictTekst { margin: 0; max-width: none; }
  .grafiekkop { flex-direction: column; gap: 4px; }
}