/* Voa Heerenveen -- een klein lifestyleblog: negen berichten, vijf rubrieken, elf beelden
   waarvan EEN bruikbaar als groot beeld. Er is dus geen fotografie om op te bouwen; wat er is
   moet gedragen worden door TEKST. Daarom een grote schreefkop in de opening, berichten als
   genummerde leeslijst en rubrieken als woorden op een regel. Palet uit de weinige beelden:
   warm zand (#b7a07a, #c6a36b) en donker leer (#6e432a) op gebroken wit. Klein, rustig,
   leesbaar -- een blad met negen stukken doet niet alsof het er negentig heeft. */
:root{
  --papier:#fbf8f3; --papier-2:#f3ede3; --vlak:#ffffff;
  --ink:#231e18; --ink-2:#564d43; --ink-3:#8a8073;
  --lijn:#e6dccd; --lijn-2:#cdbfaa;
  --leer:#7a4a2e; --leer-2:#5f381f; --leer-zacht:#f1e6da;
  --zand:#b7a07a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --maxw:920px; --meet:64ch;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:#171411; --papier-2:#1f1b16; --vlak:#1c1814;
    --ink:#f2ede5; --ink-2:#bfb4a5; --ink-3:#8b8172;
    --lijn:#302a22; --lijn-2:#443c31;
    --leer:#d39a6f; --leer-2:#e1ad86; --leer-zacht:#2c2118;
    --zand:#c9b28c;
  }
}
:root[data-theme="dark"]{
  --papier:#171411; --papier-2:#1f1b16; --vlak:#1c1814;
  --ink:#f2ede5; --ink-2:#bfb4a5; --ink-3:#8b8172;
  --lijn:#302a22; --lijn-2:#443c31;
  --leer:#d39a6f; --leer-2:#e1ad86; --leer-zacht:#2c2118;
  --zand:#c9b28c;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.7}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--leer);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ph{background:var(--papier-2);position:relative;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover}

.top{padding-block:30px 0;text-align:center}
.merk__naam{font-family:var(--serif);font-size:clamp(30px,5vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1}
.merk__tag{display:block;font-size:12px;color:var(--ink-3);letter-spacing:.18em;text-transform:uppercase;margin-top:8px}
.nav{margin-top:20px;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.nav__list{display:flex;justify-content:center;gap:26px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.nav__list::-webkit-scrollbar{display:none}
.nav__list a{display:block;padding:11px 0;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;border-bottom:2px solid transparent}
.nav__list a:hover{color:var(--leer)}
.nav__list a[aria-current="page"]{color:var(--leer);border-bottom-color:var(--leer)}

/* opening: alleen woorden, met een smalle zandstreep als enige versiering */
.opening{padding-block:54px 42px;text-align:center}
.opening__streep{width:56px;height:3px;background:var(--zand);margin:0 auto 22px}
.opening h1{font-family:var(--serif);font-size:clamp(28px,4.6vw,46px);line-height:1.12;letter-spacing:-.015em;margin:0 auto 14px;font-weight:600;max-width:22ch;text-wrap:balance}
.opening p{margin:0 auto;color:var(--ink-2);max-width:50ch;font-size:18px}
.rubrieken{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;list-style:none;margin:26px 0 0;padding:0}
.rubrieken a{font-family:var(--serif);font-size:17px;font-style:italic;color:var(--leer)}
.rubrieken a:hover{text-decoration:underline;text-underline-offset:3px}
.opening__beeld{aspect-ratio:21/9;margin-top:40px}

.sec{padding-block:38px}
.sec--lijn{border-top:1px solid var(--lijn)}
.sec__kop{margin-bottom:20px}
.sec__kop h1,.sec__kop h2{font-family:var(--serif);margin:0;font-size:clamp(21px,2.6vw,26px);font-weight:600;letter-spacing:-.01em}
.sec__intro{color:var(--ink-2);margin:-8px 0 22px;max-width:60ch}

/* leeslijst: genummerd, want een blad met negen stukken IS een lijst van negen */
.raster{list-style:none;margin:0;padding:0;counter-reset:n;display:grid;gap:0}
.kaart{counter-increment:n;display:grid;grid-template-columns:44px 1fr 120px;gap:18px;align-items:start;padding-block:20px;border-bottom:1px solid var(--lijn)}
.kaart::before{content:counter(n,decimal-leading-zero);font-family:var(--serif);font-size:22px;color:var(--zand);line-height:1.15;font-variant-numeric:tabular-nums}
.kaart:hover .kaart__titel{color:var(--leer)}
.kaart__img{aspect-ratio:4/3;order:3}
.kaart__body{display:flex;flex-direction:column;gap:5px;min-width:0}
.kaart__meta{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--leer);margin:0}
.kaart__titel{font-family:var(--serif);font-size:21px;line-height:1.25;font-weight:600}
.kaart__sam{margin:0;font-size:15px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kaart__datum{font-size:12.5px;color:var(--ink-3);margin:0}

.lijst{list-style:none;margin:0;padding:0}
.lijst__rij{display:flex;gap:14px;align-items:baseline;padding-block:10px;border-bottom:1px dotted var(--lijn-2)}
.lijst__rij:hover .lijst__titel{color:var(--leer)}
.lijst__duim{display:none}
.lijst__titel{font-family:var(--serif);font-size:17.5px;line-height:1.3}
.lijst__datum{margin-left:auto;font-size:12.5px;color:var(--ink-3);white-space:nowrap}

.btn{display:inline-flex;align-items:center;gap:8px;border:0;padding:11px 20px;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;background:var(--leer);color:#fff}
.btn:hover{background:var(--leer-2)}

.stuk{max-width:var(--meet);margin:0 auto}
.stuk__titel{font-family:var(--serif);font-size:clamp(28px,4.6vw,44px);line-height:1.12;letter-spacing:-.015em;margin:0 0 10px;font-weight:600;text-wrap:balance}
.stuk__datum{color:var(--ink-3);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 24px}
.stuk__beeld{margin:0 0 26px}
.stuk__body{font-size:18px;line-height:1.85}
.stuk__body h2{font-family:var(--serif);font-size:26px;margin:34px 0 10px;font-weight:600}
.stuk__body h3{font-family:var(--serif);font-size:22px;margin:28px 0 8px;font-weight:600}
.stuk__body p{margin:0 0 20px}
.stuk__body ul,.stuk__body ol{margin:0 0 20px;padding-left:24px}
.stuk__body li{margin-bottom:8px}
.stuk__body a{color:var(--leer);text-decoration:underline;text-underline-offset:2px}
.stuk__body figure{margin:0 0 22px}
.stuk__body figcaption{font-size:13px;color:var(--ink-3);margin-top:6px}

.voet{border-top:1px solid var(--lijn);padding-block:32px 22px;margin-top:46px;text-align:center}
.voet__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;text-align:left;max-width:640px;margin:0 auto}
.voet h3{margin:0 0 10px;font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3)}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14.5px}
.voet a:hover{color:var(--leer)}
.voet__slot{margin-top:26px;padding-top:14px;border-top:1px solid var(--lijn);font-size:13px;color:var(--ink-3)}

@media(max-width:560px){
  .voet__grid{grid-template-columns:1fr}
  .kaart{grid-template-columns:36px 1fr}
  .kaart__img{grid-column:2;order:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.paginering{display:flex;gap:18px;align-items:baseline;justify-content:center;padding:26px 20px;font-size:14px}.paginering a{text-decoration:underline;text-underline-offset:3px}.paginering__stand{opacity:.6;font-variant-numeric:tabular-nums}