/* oszostere.nl: de banner en de inkt.

   De banner van de stichting is een magenta lucht met roze wolken, het
   silhouet van Susteren in diep bessenrood en de gele sticker met de naam.
   Die banner is de hero, en de rest van de pagina volgt hem: magenta is de
   actiekleur en het accent op wit, het silhouet is de voet en de donkere
   stand, het geel is de kop in de hero en de knop op donker. Verder niets,
   want dit is een pagina in aanbouw en niet de site zelf.

   Kleuren komen uit tokens.css (gegenereerd uit tools/tokens.py). Hier staan
   rollen, geen kleuren: de primitieven --oz-* alleen waar de reden erbij
   staat. */

:root {
  --wrap: 68rem;
  --sectie: clamp(3.5rem, 7vw, 6.5rem);
  --display: clamp(2.5rem, 1.2rem + 4.8vw, 4.75rem);
  /* De hero is het magenta van de banner, in beide standen: het vlak loopt
     onder de banner door, dus het moet precies die kleur zijn. */
  --lucht: var(--oz-magenta);
  --lucht-tekst: var(--oz-room);
  --lucht-kop: var(--oz-geel);
  --lucht-lijn: rgb(255 248 232 / .35);
}
:root[data-theme="dark"] { color-scheme: dark; }

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-text);
  background: var(--color-surface);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-text-accent); text-underline-offset: .18em; }
@media (hover: hover) { a:hover { text-decoration-thickness: 2px; } }
.wrap { width: min(100% - var(--space-8), var(--wrap)); margin-inline: auto; }

/* Toetsenbordgebruikers eerst. */
.skip { position: absolute; left: -9999px; background: var(--color-surface);
        color: var(--color-text); padding: var(--space-3) var(--space-4); z-index: 10; }
.skip:focus { left: var(--space-4); top: var(--space-4); }

/* Typografie: een familie, twee gewichten, de maat doet het werk. */
h1, h2, h3 { text-wrap: balance; margin: 0 0 var(--space-3); font-weight: 600; }
h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-line); letter-spacing: var(--text-h1-tracking); }
h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-line); letter-spacing: var(--text-h2-tracking); }
h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-line); }
p  { margin: 0 0 var(--space-4); }
.lead { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line); }
.eyebrow { font-size: 1rem; font-weight: 600; color: var(--color-text-accent);
           margin: 0 0 var(--space-4); }
.prose p, .prose li, .lead, .evenement p, .evenement li { hyphens: auto; -webkit-hyphens: auto; }
h1, h2, h3 { hyphens: manual; }

/* ---------------------------------------------------------------
   De kop. Dun, inkt op wit, de naam als woordmerk. De pay-off staat er
   klein naast en valt op een telefoon weg, want daar staat hij groot in
   de hero eronder.
   --------------------------------------------------------------- */
.kop { border-bottom: 1px solid var(--color-border); }
.kop-in { display: flex; align-items: center; justify-content: space-between;
          gap: var(--space-6); padding-block: var(--space-4); }
.merk { display: flex; align-items: center; gap: var(--space-3);
        color: var(--color-text); text-decoration: none; }
/* De sticker op 44 px: de maat waarop hij nog als sticker leest en de kop
   niet hoger wordt dan de themaknop. */
.merk-beeld { width: 44px; height: 44px; }
.merk-naam { font-weight: 600; font-size: var(--text-h3-size); letter-spacing: -0.01em; }
.kop-thema { display: flex; align-items: center; }
.kop-thema:has(> .thema[hidden]) { display: none; }

/* De themaknop van de kit: een icoon, de naam weggeklipt maar aanwezig. */
.thema { flex: 0 0 auto; display: grid; place-items: center;
         inline-size: 2.75rem; block-size: 2.75rem; padding: 0; cursor: pointer;
         color: var(--color-text-muted); background: transparent; border: 0;
         border-radius: var(--radius-md);
         transition: background-color var(--motion-fast) var(--motion-ease),
                     color var(--motion-fast) var(--motion-ease),
                     transform var(--motion-fast) var(--motion-ease); }
@media (hover: hover) and (pointer: fine) {
  .thema:hover { background: var(--color-surface-raised); color: var(--color-text); }
}
.thema:active { transform: scale(.94); }
.thema-tekst { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
               overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.thema .thema-zon, .thema .thema-maan { display: none; }
.thema .thema-maan { display: block; }
:root[data-theme="dark"] .thema .thema-maan { display: none; }
:root[data-theme="dark"] .thema .thema-zon { display: block; }

/* ---------------------------------------------------------------
   Knoppen. Bessenrood met wit op licht; in de donkere stand geel met inkt
   (uit de tokens). In de hero, op geel, is de primaire knop inkt met geel
   erop: een rode knop op geel is kermis.
   --------------------------------------------------------------- */
.knop { display: inline-block; padding: var(--space-3) var(--space-6);
        border-radius: var(--radius-md); text-decoration: none;
        font-weight: 600; font-size: 1rem; white-space: nowrap;
        transition: background-color var(--motion-fast) var(--motion-ease),
                    border-color var(--motion-fast) var(--motion-ease),
                    color var(--motion-fast) var(--motion-ease),
                    transform var(--motion-fast) var(--motion-ease); }
.knop:active { transform: scale(.97); }
.knop-primair { background: var(--button-primary-bg); color: var(--button-primary-fg); }
@media (hover: hover) {
  .knop-primair:hover { background: var(--button-primary-bg-hover); color: var(--button-primary-fg-hover); }
}
.knop-stil { background: var(--button-quiet-bg); color: var(--button-quiet-fg);
             border: 1px solid var(--button-quiet-border); }
@media (hover: hover) { .knop-stil:hover { background: var(--button-quiet-bg-hover); } }
.acties { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }

/* ---------------------------------------------------------------
   De hero: de banner op volle breedte, en daaronder op hetzelfde magenta
   de spreuk in geel (6,0:1) en de tekst in roomwit (10,6:1). De knop is
   geel met inkt, de stille knop een lijn in roomwit.
   --------------------------------------------------------------- */
.hero { background: var(--lucht); color: var(--lucht-tekst);
        --color-focus-ring: var(--oz-geel);
        --color-text-accent: var(--oz-geellicht);
        --button-primary-bg: var(--oz-geel);
        --button-primary-fg: var(--oz-inkt);
        --button-primary-bg-hover: var(--oz-geellicht);
        --button-primary-fg-hover: var(--oz-inkt);
        --button-quiet-bg: transparent;
        --button-quiet-fg: var(--lucht-tekst);
        --button-quiet-border: var(--lucht-lijn);
        --button-quiet-bg-hover: rgb(255 248 232 / .1); }
/* De banner is 1708 bij 750. Op een breed scherm staat hij heel; op een
   smal scherm houdt hij een minimumhoogte en snijdt hij van links, zodat
   de sticker rechts in beeld blijft. Geen ruimte eromheen: het magenta
   van de banner loopt door in het vlak eronder. */
.hero-banner { display: block; margin: 0; }
.hero-banner img { width: 100%; height: clamp(15rem, 44vw, 46rem);
                   object-fit: cover; object-position: right center; }
.hero-in { padding-block: var(--space-10) var(--sectie); }
.hero-in > * { max-width: 46rem; }
.hero .eyebrow { color: var(--lucht-kop); }
.hero h1 { font-size: var(--display); line-height: 1.02; letter-spacing: -0.03em;
           color: var(--lucht-kop); margin-bottom: var(--space-6); }
.hero .lead { max-width: 44ch; margin-bottom: var(--space-8); }
.hero-eenvoudig .hero-in { padding-block: var(--space-12); }
.hero-eenvoudig h1 { font-size: var(--text-h1-size); margin-bottom: 0; }

/* ---------------------------------------------------------------
   In aanbouw: een smalle mededeling in het roze van de wolken, direct
   onder het magenta.
   Niet groter dan nodig, want het is een tussenstand en niet de boodschap.
   --------------------------------------------------------------- */
.status { background: var(--oz-rozesoft); border-bottom: 1px solid var(--color-border); }
:root[data-theme="dark"] .status { background: var(--color-surface-raised); }
.status-in { padding-block: var(--space-8); display: grid; gap: var(--space-2);
             grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: baseline; }
.status h2 { font-size: var(--text-h3-size); margin: 0; }
.status p { margin: 0; max-width: 60ch; }
@media (max-width: 48rem) { .status-in { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Het evenement: links wanneer en waar, rechts wat. Een lijn in bessenrood
   boven de kop, dezelfde als onder de sectiekoppen in de prose.
   --------------------------------------------------------------- */
.evenement { padding-block: var(--sectie); scroll-margin-top: var(--space-6); }
.evenement-in { display: grid; gap: var(--space-10);
                grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
@media (max-width: 48rem) { .evenement-in { grid-template-columns: 1fr; gap: var(--space-6); } }
.evenement h2 { font-size: var(--text-h1-size); line-height: var(--text-h1-line);
                letter-spacing: var(--text-h1-tracking); margin-bottom: var(--space-6); }
.evenement h2::before, .prose h2::before {
  content: ""; display: block; width: 3rem; height: 4px; border-radius: var(--radius-full);
  background: var(--color-graphic-accent); margin-bottom: var(--space-5);
}
.evenement dl { margin: 0; display: grid; grid-template-columns: auto 1fr;
                gap: var(--space-2) var(--space-5); }
.evenement dt { color: var(--color-text-muted); font-size: var(--text-body-sm-size);
                padding-top: .2em; }
.evenement dd { margin: 0; font-weight: 600; }
.evenement-wat p { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line); }
.evenement-punten { margin: 0; padding: 0; list-style: none; display: grid;
                    gap: var(--space-2); }
.evenement-punten li { padding-left: var(--space-6); position: relative; }
.evenement-punten li::before { content: ""; position: absolute; left: 0; top: .62em;
                               width: .75rem; height: .75rem; border-radius: 50%;
                               background: var(--oz-geel); outline: 2px solid var(--color-graphic-accent);
                               outline-offset: -2px; }

/* ---------------------------------------------------------------
   Lopende tekst. Smal, want tekst leest smal.
   --------------------------------------------------------------- */
.prose { max-width: 60ch; padding-block: var(--space-4) var(--sectie); }
.hero-eenvoudig + .wrap .prose { padding-top: var(--space-8); }
.prose h2 { margin-top: var(--space-10); }
.prose h2:first-child { margin-top: 0; }

/* ---------------------------------------------------------------
   De voet: het silhouet van de banner met roomwit erop, het geel als link.
   In de donkere stand is de pagina al het silhouet; dan zakt de voet een
   laag dieper zodat de naad blijft.
   --------------------------------------------------------------- */
.voet { background: var(--oz-silhouet); color: var(--oz-room);
        --color-text-accent: var(--oz-geellicht); --color-focus-ring: var(--oz-geel); }
:root[data-theme="dark"] .voet { background: var(--color-surface-sunken); }
.voet-in { display: grid; gap: var(--space-8); grid-template-columns: 2fr 1fr;
           padding-block: var(--sectie) var(--space-8); }
@media (max-width: 48rem) { .voet-in { grid-template-columns: 1fr; } }
.voet h2 { font-size: var(--text-overline-size); line-height: var(--text-overline-line);
           letter-spacing: var(--text-overline-tracking); text-transform: uppercase;
           color: var(--oz-mutedopdonker); margin-bottom: var(--space-3); }
.voet address { font-style: normal; line-height: 1.7; }
.voet ul { list-style: none; margin: 0; padding: 0; line-height: 1.7; }
.voet a { color: var(--color-text-accent); }
.voet-onder { padding-block: var(--space-5); border-top: 1px solid rgb(255 248 232 / .14);
              color: var(--oz-mutedopdonker); font-size: var(--text-body-sm-size); }
.voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between;
              align-items: center; gap: var(--space-4); }
.voet-onder p { margin: 0; }
/* Het keurmerk op de maat van het bestand: de badge van internet.nl is
   38 px hoog en heeft zijn eigen witte vlak. */
.voet-leden { display: flex; gap: var(--space-6); align-items: center;
              list-style: none; margin: 0; padding: 0; }
.voet-leden li a { display: block; line-height: 0; }
.voet-leden img { display: block; height: 38px; width: auto; }