/* ptaanhuis.nl — "Het jaar rond"
   Voorvoegsel j-. Deelt geen enkele klassenaam met de zustersites. */

:root{
  --inkt:#222a31;
  --inkt-diep:#171e24;
  --papier:#f5f3ee;
  --papier-warm:#eae6dd;
  --lijn:#d9d4c8;
  --steen:#585f67;          /* bijschrift op licht */
  --steen-licht:#c2cad1;    /* bijschrift op donker */
  --wit:#ffffff;

  --winter:#3f6480;         /* vlak */
  --winter-tekst:#2f4d63;   /* tekst op licht */
  --winter-licht:#9dc0d8;   /* tekst op donker */
  --lente:#4d7a46;
  --lente-tekst:#3a5f35;
  --lente-licht:#a8cf9f;
  --zomer:#c08a1e;
  --zomer-tekst:#795510;
  --zomer-licht:#e6c078;
  --herfst:#a8502a;
  --herfst-tekst:#8a3f1f;
  --herfst-licht:#e0a47f;

  --kop:Cambria,Constantia,"Hoefler Text",Georgia,serif;
  --tekst:"Trebuchet MS",Tahoma,Verdana,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--inkt);
  font-family:var(--tekst);font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--kop);color:var(--inkt);line-height:1.25;margin:0 0 .5em;font-weight:700}
h1{font-size:2.4rem;letter-spacing:-.005em}
h2{font-size:1.65rem;margin-top:2.3rem}
h3{font-size:1.15rem}
p,li{max-width:64ch}
p{margin:0 0 1.05em}
a{color:var(--winter-tekst)}
a:hover{color:var(--inkt)}
img,video{max-width:100%;height:auto;display:block}

.j-binnen{max-width:1080px;margin:0 auto;padding:0 26px}
.j-smal{max-width:750px}

/* ---------- seizoenschip: het handschrift van deze site ---------- */
.j-chip{
  display:inline-block;font-family:var(--tekst);font-size:.76rem;font-weight:bold;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;
}
.j-chip--winter{background:#dbe6ee;color:var(--winter-tekst)}
.j-chip--lente{background:#dfeadc;color:var(--lente-tekst)}
.j-chip--zomer{background:#f2e6c9;color:var(--zomer-tekst)}
.j-chip--herfst{background:#f2dbcf;color:var(--herfst-tekst)}
.j-chip--inkt{background:var(--papier-warm);color:var(--steen)}

/* ---------- de maandenband ---------- */
.j-band{display:flex;width:100%;border:1px solid var(--lijn);background:var(--wit);overflow:hidden}
.j-maand{
  flex:1 1 0;min-width:0;text-align:center;padding:10px 2px;
  font-size:.78rem;font-weight:bold;letter-spacing:.03em;
  border-right:1px solid rgba(255,255,255,.6);color:var(--inkt);
}
.j-maand:last-child{border-right:0}
.j-maand--winter{background:#dbe6ee}
.j-maand--lente{background:#dfeadc}
.j-maand--zomer{background:#f2e6c9}
.j-maand--herfst{background:#f2dbcf}
.j-maand[aria-pressed="true"]{outline:2px solid var(--inkt);outline-offset:-2px}
button.j-maand{cursor:pointer;font-family:var(--tekst);border-top:0;border-bottom:0;border-left:0}

/* ---------- lagen ---------- */
.j-laag{padding:54px 0}
.j-laag--warm{background:var(--papier-warm)}
.j-laag--diep{background:var(--inkt);color:var(--papier)}
.j-laag--diep h2,.j-laag--diep h3,.j-laag--diep h4{color:var(--papier)}
.j-laag--diep p,.j-laag--diep li{color:#dde3e8}
.j-laag--diep a{color:var(--winter-licht)}
.j-laag__kop{display:flex;align-items:baseline;gap:14px;margin-bottom:1.3rem;flex-wrap:wrap}
.j-laag__kop h2{margin:0}

/* ---------- vakken ---------- */
.j-net{display:grid;gap:22px}
.j-net--2{grid-template-columns:repeat(2,1fr)}
.j-net--3{grid-template-columns:repeat(3,1fr)}
.j-net--4{grid-template-columns:repeat(4,1fr)}
.j-vak{background:var(--wit);border:1px solid var(--lijn);border-top:3px solid var(--lijn);padding:22px 20px}
.j-vak--winter{border-top-color:var(--winter)}
.j-vak--lente{border-top-color:var(--lente)}
.j-vak--zomer{border-top-color:var(--zomer)}
.j-vak--herfst{border-top-color:var(--herfst)}
.j-vak h3{margin-top:.3em}
.j-vak p:last-child,.j-vak ul:last-child{margin-bottom:0}
.j-net--2 > .j-vak{align-self:start}
/* witte vakken in een donkere laag houden hun eigen kleuren */
.j-laag--diep .j-vak{background:var(--wit);border-color:var(--lijn)}
.j-laag--diep .j-vak h3,.j-laag--diep .j-vak h4{color:var(--inkt)}
.j-laag--diep .j-vak p,.j-laag--diep .j-vak li{color:var(--inkt)}
.j-laag--diep .j-vak a{color:var(--winter-tekst)}

/* ---------- knoppen ---------- */
.j-gaan{
  display:inline-block;font-family:var(--tekst);font-weight:bold;font-size:.95rem;
  background:var(--inkt);color:var(--wit);text-decoration:none;padding:12px 22px;border:1px solid var(--inkt);
}
.j-gaan:hover{background:var(--winter-tekst);border-color:var(--winter-tekst);color:var(--wit)}
.j-gaan--leeg{background:transparent;color:var(--inkt);border-color:var(--inkt)}
.j-gaan--leeg:hover{background:var(--inkt);color:var(--wit)}
.j-laag--diep .j-gaan--leeg{color:var(--papier);border-color:rgba(245,243,238,.6)}
.j-laag--diep .j-gaan--leeg:hover{background:var(--papier);color:var(--inkt)}
.j-laag--diep .j-vak .j-gaan{color:var(--wit)}

/* ---------- beeld ---------- */
.j-beeld{margin:0}
.j-beeld img{width:100%;aspect-ratio:4/3;object-fit:cover;height:auto}
.j-beeld figcaption{
  margin-top:9px;padding-left:12px;border-left:3px solid var(--lijn);
  font-size:.86rem;color:var(--steen);
}
.j-beeld--winter figcaption{border-left-color:var(--winter)}
.j-beeld--lente figcaption{border-left-color:var(--lente)}
.j-beeld--zomer figcaption{border-left-color:var(--zomer)}
.j-beeld--herfst figcaption{border-left-color:var(--herfst)}
.j-laag--diep .j-beeld figcaption{color:var(--steen-licht)}

/* ---------- opening ---------- */
.j-opening{padding:54px 0 8px}
.j-opening__net{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center}
.j-opening h1{font-size:2.7rem}
.j-inleiding{font-size:1.08rem;color:#2c353d}
.j-film video{width:100%;background:var(--inkt-diep);border:1px solid var(--lijn)}
.j-film__bij{margin-top:10px;font-size:.85rem;color:var(--steen);max-width:46ch}

/* ---------- lijstjes ---------- */
.j-lijst{list-style:none;padding:0;margin:1rem 0}
.j-lijst li{position:relative;padding-left:20px;margin-bottom:.55em}
.j-lijst li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:8px;background:var(--lijn)}
.j-lijst--winter li::before{background:var(--winter)}
.j-lijst--lente li::before{background:var(--lente)}
.j-lijst--zomer li::before{background:var(--zomer)}
.j-lijst--herfst li::before{background:var(--herfst)}

/* ---------- aanbieders ---------- */
.j-partij{background:var(--wit);border:1px solid var(--lijn);padding:24px 22px;display:flex;flex-direction:column}
.j-partij h3{color:var(--inkt);margin-bottom:.25em}
.j-partij p,.j-partij li{color:var(--inkt)}
.j-partij__vlag{display:inline-block;font-size:.74rem;font-weight:bold;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 10px;margin-bottom:13px;align-self:flex-start}
.j-partij__vlag--yh{background:#f3e2d0;color:#8a4708}
.j-partij__vlag--jp{background:#d8e8de;color:#12603c}
.j-partij__vlag--ldi{background:#efe6cc;color:#6f5713}
.j-partij .j-gaan{margin-top:auto;align-self:flex-start}
.j-laag--diep .j-partij h3{color:var(--inkt)}
.j-laag--diep .j-partij p,.j-laag--diep .j-partij li{color:var(--inkt)}
.j-laag--diep .j-partij a.j-gaan{color:var(--wit)}

/* ---------- de maandkiezer (interactief) ---------- */
.j-kiezer{background:var(--wit);border:1px solid var(--lijn);padding:24px 22px}
.j-kiezer__uitleg{margin-top:20px;border-top:1px solid var(--lijn);padding-top:18px;min-height:190px}
.j-kiezer__uitleg h3{margin-bottom:.35em}
.j-kiezer__uitleg p:last-child{margin-bottom:0}
.j-cijfers{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 14px}
.j-cijfer{font-size:.88rem;color:var(--steen)}
.j-cijfer b{display:block;font-family:var(--kop);font-size:1.2rem;color:var(--inkt);font-weight:700}
.j-val{border-left:3px solid var(--herfst);padding-left:13px;margin-top:14px;font-size:.95rem}

/* ---------- kleine dingen ---------- */
.j-kruimel{font-size:.86rem;color:var(--steen);padding:16px 0 0}
.j-kruimel a{color:var(--steen)}
.j-noot{font-size:.93rem;color:var(--steen);border-left:3px solid var(--lijn);padding-left:14px;margin:1.6rem 0}
.j-laag--diep .j-noot{color:var(--steen-licht);border-left-color:#3a454e}
.j-verder{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:2.1rem}
.j-verder a{display:block;background:var(--wit);border:1px solid var(--lijn);padding:19px;text-decoration:none;color:var(--inkt)}
.j-verder a:hover{border-color:var(--inkt)}
.j-verder strong{font-family:var(--kop);color:var(--inkt);display:block;margin:.35em 0;font-size:1.05rem}

/* ---------- voet ---------- */
.j-voet{background:var(--inkt-diep);color:#d3dae0;padding:42px 0 28px}
.j-voet h4{color:var(--papier);font-size:.95rem;margin-bottom:.6em}
.j-voet a{color:var(--winter-licht);text-decoration:none}
.j-voet a:hover{text-decoration:underline}
.j-voet__net{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.j-voet ul{list-style:none;padding:0;margin:0}
.j-voet li{margin-bottom:.4em;font-size:.93rem}
.j-voet p{color:#d3dae0}
.j-voet__streep{border-top:1px solid #2c363e;margin-top:28px;padding-top:15px;font-size:.85rem;color:#a7b2bb}

@media (max-width:900px){
  .j-opening__net{grid-template-columns:1fr;gap:28px}
  .j-net--2,.j-net--3,.j-net--4,.j-voet__net,.j-verder{grid-template-columns:1fr}
  h1{font-size:1.9rem}
  .j-opening h1{font-size:2rem}
  .j-maand{font-size:0;padding:14px 1px}
  .j-maand[aria-pressed="true"]{font-size:.72rem}
  button.j-maand{font-size:.62rem;padding:12px 1px}
  .j-laag__kop{gap:6px 12px}
}