/* ============================================================================
   UIN-ZINE — "Boutique Zine", landelijke variant voor Uit In Nederland
   ----------------------------------------------------------------------------
   Re-skin van de bestaande hub-markup naar de netwerk-ontwerptaal uit
   ~/projecten/uitgroningen/redesign-zine/docs/DESIGN.md. Puur een stijllaag:
   geen markup-, JS- of functiewijziging. Laadt ná uin-content.css.

   Re-theming volgt de zine-conventie "één tokenblok per site": hier is de
   stadskleur-slot gevuld met het eigen navy van de hub en de accent-slot met
   het eigen koraal, zodat de hub herkenbaar blijft binnen het netwerk.
   Goud komt bewust alleen voor in de hubs-carrousel (eigen katern-palet).

   Eén handtekening: de categorietegels krijgen het ticket-stub-motief
   (perforatierand + inzetlijn). De rest blijft stil — hairlines, crème
   papier, cursieve pull-type. (Chanel-regel: één accessoire eraf.)
   ========================================================================== */

:root{
  /* papier */
  --z-cream:#F4EFE3;
  --z-cream-alt:#ECE6D6;
  --z-cream-line:#ded5bf;
  --z-card:#FFFFFF;
  --z-card-border:#e6ddca;

  /* stadskleur-slot = het navy van de hub */
  --z-brand-950:#0c2616;
  --z-brand-900:#10301F;
  --z-brand-700:#14533A;
  --z-brand-700-h:#0f3f2c;

  /* accent-slot = het koraal van de hub */
  --z-accent:#E0A53A;
  --z-accent-h:#d49a2c;

  /* tekst */
  --z-ink:#1B2A22;
  --z-body:#46524b;
  --z-muted:#8a8170;

  /* op donker */
  --z-on-dark:#FDF9EF;
  --z-on-dark-2:#E4DED0;
  --z-on-dark-3:#B9B2A3;

  --z-container:1260px;
  --z-display:"Cormorant Garamond",Georgia,serif;
  --z-text:"Archivo",system-ui,-apple-system,sans-serif;
  --z-label:"Archivo Narrow","Archivo",system-ui,sans-serif;
  --z-btn:"DM Sans",system-ui,sans-serif;
}

/* ─── papier + basistypografie ─────────────────────────────────────────── */
body.uin,
body{ background:var(--z-cream); color:var(--z-body); font-family:var(--z-text); }
.uin .wrap{ max-width:var(--z-container); }

.uin h1,.uin h2,.uin h3,.uin h4,
.site-footer h2,.site-footer h3{ color:var(--z-ink); font-family:var(--z-text); }

/* de "pull-type": oversized cursieve serif als grafisch element, niet als
   neutrale kopregel. Alleen op h1/h2 — h3 blijft Archivo bold (DESIGN.md). */
.uin h1,.uin .uin-head h2,.uin-news h2,.uin-panel h2{
  font-family:var(--z-display); font-style:italic; font-weight:600;
  letter-spacing:-.005em; line-height:1.06; color:var(--z-ink);
}
.uin h3,.uin-weetje b,.uin-tegel h3{ font-family:var(--z-text); font-weight:600; font-style:normal; }

/* ─── kicker: hairline + getrackt label, NOOIT een gestapelde eyebrow ─────
   DESIGN.md verbiedt het label-boven-kop-patroon. We hergebruiken daarom de
   behandeling die de hubs-carrousel al netwerk-breed toont: streepje + label. */
.uin .eyebrow,.uin .eyebrow--gold{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--z-label); font-weight:600; font-size:.72rem;
  letter-spacing:.20em; text-transform:uppercase; color:var(--z-muted);
  margin:0 0 .55rem;
}
.uin .eyebrow::before,.uin .eyebrow--gold::before{
  content:""; width:34px; height:1px; background:var(--z-accent); flex:none;
}
.uin .uin-head .sub{ color:var(--z-body); font-size:1.02rem; max-width:60ch; }
.uin .uin-head h2{ font-size:clamp(2.1rem,4.2vw,3.35rem); margin:0 0 .35rem; }
.uin .link{ font-family:var(--z-label); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; font-size:.74rem; color:var(--z-brand-700); }
.uin .link:hover{ color:var(--z-accent); }

/* ─── ritme ────────────────────────────────────────────────────────────── */
.uin .uin-band{ padding:76px 0; }
@media(max-width:720px){ .uin .uin-band{ padding:54px 0; } }
.uin .uin-weetjes-band{ background:var(--z-cream-alt); border-block:1px solid var(--z-cream-line); }
.uin .uin-map{ background:var(--z-cream); }
.uin .uin-map--be{ background:var(--z-cream-alt); border-block:1px solid var(--z-cream-line); }

/* ─── header ───────────────────────────────────────────────────────────── */
.site-header{ background:var(--z-cream); border-bottom:1px solid var(--z-cream-line); }
.site-wordmark{ font-family:var(--z-display)!important; font-style:italic; font-weight:600;
  color:var(--z-ink); letter-spacing:-.01em; }
.nav-menu a,.site-nav a{ font-family:var(--z-text); font-weight:500; color:var(--z-ink); }
.nav-menu a:hover,.site-nav a:hover{ color:var(--z-accent); }

/* ─── hero ─────────────────────────────────────────────────────────────── */
.uin-hero{ background:var(--z-brand-950); }
.uin-hero h1{ font-size:clamp(2.6rem,6vw,4.6rem); color:var(--z-on-dark); }
.uin-hero h1 span,.uin-hero h1 em{ color:var(--z-accent); font-style:italic; }
.uin-hero .lead,.uin-hero p{ font-family:var(--z-text); color:var(--z-on-dark-2); }
.uin-hero__in .eyebrow{ color:var(--z-on-dark-3); }
.uin-hero__in .eyebrow::before{ background:var(--z-accent); }
.uin-hero input[type=search],.uin-hero input[type=text]{
  font-family:var(--z-text); border-radius:800px; border:1px solid rgba(255,255,255,.22);
  background:rgba(253,249,239,.97); color:var(--z-ink);
}

/* ─── HANDTEKENING: categorietegels als ticket-stub ────────────────────────
   Perforatierand links (radiale "gaatjes") + inzetlijn, zoals het kaartje-
   motief uit DESIGN.md. Radial-gradient op de rand = geen extra markup. */
.uin .uin-tegels{ gap:18px; }
.uin .uin-tegel{
  position:relative; background:var(--z-card); border:1px solid var(--z-card-border);
  border-radius:14px; padding:26px 26px 26px 40px; overflow:hidden;
  box-shadow:0 1px 0 rgba(11,42,71,.03);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.uin .uin-tegel::before{ /* perforatie */
  content:""; position:absolute; left:14px; top:12px; bottom:12px; width:2px;
  background-image:radial-gradient(circle at 1px 3px, var(--z-cream-line) 1.5px, transparent 1.6px);
  background-size:2px 9px; opacity:.95;
}
.uin .uin-tegel::after{ /* inzetlijn */
  content:""; position:absolute; inset:7px 7px 7px 24px; border:1px solid var(--z-cream-line);
  border-radius:9px; pointer-events:none; opacity:.55;
}
.uin .uin-tegel:hover{ transform:translateY(-3px); border-color:var(--z-accent);
  box-shadow:0 16px 30px rgba(11,42,71,.10); }
.uin .uin-tegel h3{ color:var(--z-brand-700); font-size:1.12rem; }
.uin .uin-tegel__ic .uin-ic,.uin .uin-tegel__ic svg{ color:var(--z-accent); }
.uin .uin-tegel:focus-visible{ outline:3px solid var(--z-accent); outline-offset:3px; }

/* ─── artikelkaarten ───────────────────────────────────────────────────── */
.uin .uin-art{ border-radius:16px; border:1px solid transparent; }
.uin .uin-art--noimg{
  background:linear-gradient(152deg,var(--z-brand-950) 0%,var(--z-brand-900) 55%,var(--z-brand-700) 100%);
}
.uin .uin-art--noimg .uin-art__grad{
  background:radial-gradient(115% 85% at 88% 4%,rgba(244,112,58,.30),transparent 56%);
}
.uin .uin-art h3{ font-family:var(--z-display); font-style:italic; font-weight:600;
  font-size:1.5rem; line-height:1.12; color:var(--z-on-dark); }
.uin .uin-art.feature h3{ font-size:clamp(1.9rem,3.4vw,2.7rem); }
.uin .uin-art .cat{ font-family:var(--z-label); font-weight:600; letter-spacing:.16em;
  background:var(--z-accent); border-radius:800px; }
.uin .uin-art p{ font-family:var(--z-text); color:var(--z-on-dark-2); }

/* ─── weetjes ──────────────────────────────────────────────────────────── */
.uin .uin-weetje{ background:var(--z-card); border:1px solid var(--z-card-border); border-radius:14px; }
.uin .uin-weetje b{ color:var(--z-brand-700); font-size:1.06rem; }
.uin .uin-weetje .ic .uin-ic{ color:var(--z-accent); }
.uin .uin-weetje p{ color:var(--z-body); }

/* ─── kaart + plaatsenlijst (Leaflet zelf niet aanraken) ───────────────── */
.uin .uin-map__canvas{ border-radius:16px; overflow:hidden; border:1px solid var(--z-card-border);
  box-shadow:0 10px 30px rgba(11,42,71,.08); }
.uin .uin-citysign{ background:var(--z-card); border:1px solid var(--z-card-border); border-radius:12px; }
.uin .uin-citysign:hover{ border-color:var(--z-accent); }
.uin .uin-citysign b,.uin .uin-citysign strong{ font-family:var(--z-text); color:var(--z-ink); }
.uin .uin-cities__all{ font-family:var(--z-label); letter-spacing:.12em; text-transform:uppercase; }

/* ─── nieuwsbrief ──────────────────────────────────────────────────────── */
.uin .uin-news{ background:var(--z-brand-900); color:var(--z-on-dark); }
.uin .uin-news h2{ color:var(--z-on-dark); font-size:clamp(1.8rem,3vw,2.5rem); }
.uin .uin-news p{ color:var(--z-on-dark-2); }
.uin .uin-news input[type=email]{ font-family:var(--z-text); border-radius:800px; border:0;
  background:var(--z-on-dark); color:var(--z-ink); }
.uin .uin-news button,.uin .uin-news input[type=submit]{
  font-family:var(--z-btn); font-weight:500; border-radius:800px;
  background:var(--z-accent); color:var(--z-ink); border:0; }
.uin .uin-news button:hover{ background:var(--z-accent-h); }

/* ─── panelen + knoppen ────────────────────────────────────────────────── */
.uin .uin-panel{ border-radius:18px; }
.uin .uin-panel.blauw{ background:linear-gradient(150deg,var(--z-brand-900),var(--z-brand-700)); color:var(--z-on-dark); }
.uin .uin-panel.blauw h2{ color:var(--z-on-dark); }
.uin .uin-panel.blauw p{ color:var(--z-on-dark-2); }
.uin .uin-panel.zand{ background:var(--z-cream-alt); border:1px solid var(--z-cream-line); }
.uin .uin-btn{ font-family:var(--z-btn); font-weight:500; border-radius:800px;
  background:var(--z-accent); color:var(--z-ink); border:0; }
.uin .uin-btn:hover{ background:var(--z-accent-h); color:var(--z-ink); }
.uin .uin-btn.ghost{ background:transparent; color:var(--z-on-dark);
  border:1px solid rgba(253,249,239,.45); }
.uin .uin-btn.ghost:hover{ background:rgba(253,249,239,.12); color:var(--z-on-dark); }

/* ─── footer ───────────────────────────────────────────────────────────── */
.site-footer{ background:var(--z-brand-950); color:var(--z-on-dark-2); }
.uin-foot__brand .b,.uin-foot__col b,.uin-foot__biz b{
  font-family:var(--z-display)!important; font-style:italic; font-weight:600; color:var(--z-on-dark); }
.site-footer a{ color:var(--z-on-dark-2); }
.site-footer a:hover{ color:var(--z-accent); }

/* ─── kwaliteitsvloer ──────────────────────────────────────────────────── */
.uin a:focus-visible,.uin button:focus-visible,.uin input:focus-visible{
  outline:3px solid var(--z-accent); outline-offset:2px; }
@media(prefers-reduced-motion:reduce){
  .uin *,.uin *::before,.uin *::after{
    animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* ============================================================================
   VERFIJNING 2 — na visuele review van de eerste preview
   ========================================================================== */

/* ─── ticket-stub: leesbaarder maken ───────────────────────────────────────
   De eerste versie had perforatie én een inzetkader; samen werd dat een
   rommelig dubbel randje. Kader eruit (één accessoire minder), perforatie
   groter en met een echte "afscheurstrook" links. */
.uin .uin-tegel::after{ content:none; }
.uin .uin-tegel{ padding:26px 26px 26px 46px; }
.uin .uin-tegel::before{
  left:20px; top:16px; bottom:16px; width:3px;
  background-image:radial-gradient(circle at 1.5px 5px, var(--z-cream-line) 2.6px, transparent 2.7px);
  background-size:3px 14px; opacity:1;
}
/* de strook zelf krijgt een zweem crème, zodat 'ie als afgescheurd deel leest */
.uin .uin-tegel{
  background-image:linear-gradient(90deg,var(--z-cream-alt) 0 34px, var(--z-card) 34px);
}

/* ─── uitgaan-banner: uit het paars/oranje, in de huisstijl ────────────────
   Plugin-CSS (class-banner.php) staat inline; daarom hier overschrijven. */
.uitgaan-banner__inner{
  background:linear-gradient(135deg,var(--z-brand-900) 0%,var(--z-brand-700) 100%)!important;
  border:1px solid rgba(253,249,239,.14)!important; border-radius:16px!important;
}
.uitgaan-banner__kicker{ font-family:var(--z-label)!important; letter-spacing:.20em!important;
  text-transform:uppercase!important; color:var(--z-on-dark-3)!important; }
.uitgaan-banner__title{ font-family:var(--z-display)!important; font-style:italic!important;
  font-weight:600!important; color:var(--z-on-dark)!important; }
.uitgaan-banner__sub{ font-family:var(--z-text)!important; color:var(--z-on-dark-2)!important; }
.uitgaan-banner__cta{ background:var(--z-accent)!important; color:var(--z-ink)!important;
  font-family:var(--z-btn)!important; font-weight:500!important; border-radius:800px!important; }
.uitgaan-banner__icon i{ color:var(--z-accent)!important; }

/* ─── weerstrip: rustiger, hoort niet te schreeuwen ───────────────────────── */
.uin-weer{ background:var(--z-brand-950)!important; border-block:1px solid rgba(253,249,239,.10); }
.uin-weer__label{ font-family:var(--z-label)!important; letter-spacing:.16em; text-transform:uppercase; }

/* ─── kaartsectie: gat linksonder dichten ──────────────────────────────────
   De kaart is korter dan de plaatsenlijst ernaast, waardoor er een groot leeg
   vlak onder de kaart ontstond. Kolommen boven uitlijnen + de kaart mag
   meegroeien met de lijst. */
@media(min-width:901px){
  .uin .uin-map__grid{ align-items:start; }
  .uin .uin-map__canvas{ position:sticky; top:24px; }
}

/* ─── adverteerdersbanner (4 onderdelen) ───────────────────────────────────
   Zelfde kolomritme als de hubs-carrousel: hairline-scheidingen, geen kaartjes. */
.uin .uin-adv{ background:var(--z-cream-alt); border-block:1px solid var(--z-cream-line); }
.uin .uin-adv__grid{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--z-cream-line);
}
.uin .uin-adv__item{ padding:26px 26px 22px 0; border-right:1px solid var(--z-cream-line); }
.uin .uin-adv__item:last-child{ border-right:0; }
.uin .uin-adv__item + .uin-adv__item{ padding-left:26px; }
.uin .uin-adv__item h3{
  font-family:var(--z-text); font-weight:600; font-size:1.06rem;
  color:var(--z-brand-700); margin:0 0 .45rem;
}
.uin .uin-adv__item p{ margin:0; color:var(--z-body); font-size:.95rem; line-height:1.55; }
.uin .uin-adv__cta{ margin:30px 0 0; }
@media(max-width:900px){
  .uin .uin-adv__grid{ grid-template-columns:repeat(2,1fr); }
  .uin .uin-adv__item{ padding:22px 20px 20px 0; }
  .uin .uin-adv__item:nth-child(2n){ border-right:0; }
  .uin .uin-adv__item:nth-child(n+3){ border-top:1px solid var(--z-cream-line); }
  .uin .uin-adv__item + .uin-adv__item{ padding-left:0; }
  .uin .uin-adv__item:nth-child(2n){ padding-left:20px; }
}
@media(max-width:560px){
  .uin .uin-adv__grid{ grid-template-columns:1fr; }
  .uin .uin-adv__item{ border-right:0; padding:20px 0; }
  .uin .uin-adv__item + .uin-adv__item{ border-top:1px solid var(--z-cream-line); padding-left:0; }
}

/* ─── hero: kortere regellengte, rustiger blok ────────────────────────────── */
.uin-hero h1{ max-width:14ch; }
@media(max-width:720px){ .uin-hero h1{ max-width:none; font-size:clamp(2.2rem,9vw,3rem); } }

/* ============================================================================
   ZINE-LAYOUT — hero-collage, ticket-stub, pills, trust-strip
   Overgenomen van de live zine-stadssites (referentie: uitgroningen.com).
   ========================================================================== */

/* de oude full-bleed fotohero is vervangen door de collage */
.uin-hero--zine{ background:var(--z-cream); padding:54px 0 64px; }
.uin-hero--zine .uin-hero__bg,.uin-hero--zine .uin-hero__video{ display:none; }
.uin-hero__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:56px; align-items:center;
}
.uin-hero__kolom{ position:relative; z-index:2; }

/* ticket-stub: gouden kaartje met perforatierand */
.uin-ticket{
  display:inline-block; position:relative; margin:0 0 14px;
  background:var(--z-accent); color:var(--z-ink);
  font-family:var(--z-label); font-weight:700; font-size:.78rem;
  letter-spacing:.10em; text-transform:none; padding:7px 16px 7px 26px;
  border-radius:5px; box-shadow:0 2px 0 rgba(27,42,34,.16);
}
.uin-ticket::before{
  content:""; position:absolute; left:9px; top:6px; bottom:6px; width:3px;
  background-image:radial-gradient(circle at 1.5px 4px, rgba(27,42,34,.42) 1.7px, transparent 1.8px);
  background-size:3px 9px;
}

/* kop in twee delen: vet Archivo + cursief Cormorant eronder */
.uin-hero--zine h1{ margin:0 0 14px; font-size:clamp(2.5rem,4.6vw,4rem); line-height:1.02; max-width:none; }
.uin-h1__vet{
  display:block; font-family:var(--z-text); font-style:normal; font-weight:700;
  letter-spacing:-.02em; color:var(--z-ink);
}
.uin-hero--zine h1 em{
  display:block; font-family:var(--z-display); font-style:italic; font-weight:600;
  color:var(--z-ink);
}
.uin-hero--zine .lead{ color:var(--z-body); font-size:1.06rem; max-width:46ch; margin:0 0 22px; }

/* zoekconsole: wit kaartje met gouden knop-gevoel */
.uin-hero--zine .zoek-sectie{ max-width:560px; }
.uin-hero--zine .zoek-input{
  width:100%; background:var(--z-card); border:1px solid var(--z-card-border);
  border-radius:800px; padding:17px 24px; font-family:var(--z-text); font-size:1rem;
  color:var(--z-ink); box-shadow:0 6px 20px rgba(16,48,31,.07);
}
.uin-hero--zine .zoek-input::placeholder{ color:var(--z-muted); }

/* outline-pills onder het zoekveld */
.uin-hero__pills{ margin:18px 0 0; display:flex; gap:10px; flex-wrap:wrap; }
.uin-pill{
  display:inline-block; padding:9px 20px; border-radius:800px;
  border:1px solid var(--z-brand-700); color:var(--z-brand-700);
  font-family:var(--z-btn); font-weight:500; font-size:.93rem; text-decoration:none;
  transition:background .16s,color .16s;
}
.uin-pill:hover{ background:var(--z-brand-700); color:var(--z-on-dark); }

/* ── fotocollage met snijtekens ─────────────────────────────────────────── */
.uin-hero__collage{ position:relative; min-height:430px; }
.uin-collage{ margin:0; overflow:hidden; background:var(--z-cream-alt); }
.uin-collage img,.uin-collage__video{ width:100%; height:100%; object-fit:cover; display:block; }
.uin-collage--groot{
  position:relative; height:352px; border:7px solid var(--z-card);
  box-shadow:0 16px 40px rgba(16,48,31,.16);
}
.uin-collage--klein{
  position:absolute; right:-6px; bottom:-34px; width:56%; height:210px;
  border:7px solid var(--z-card); transform:rotate(3.2deg);
  box-shadow:0 16px 36px rgba(16,48,31,.20);
}
/* stempel op de grote tegel */
.uin-stamp{
  position:absolute; left:-14px; top:20px; z-index:3;
  background:var(--z-cream); color:var(--z-brand-700);
  font-family:var(--z-label); font-weight:700; font-size:.76rem; letter-spacing:.10em;
  padding:7px 14px; border:1px solid var(--z-brand-700); border-radius:4px;
  transform:rotate(-2.2deg); box-shadow:0 3px 0 rgba(16,48,31,.14);
}
/* snijtekens (drukwerk-registratie) */
.uin-snij{ position:absolute; width:16px; height:16px; opacity:.55; }
.uin-snij::before,.uin-snij::after{ content:""; position:absolute; background:var(--z-accent); }
.uin-snij::before{ left:0; top:0; width:16px; height:1px; }
.uin-snij::after{ left:0; top:0; width:1px; height:16px; }
.uin-snij--lb{ left:-26px; top:-20px; }
.uin-snij--rb{ right:-26px; bottom:-46px; transform:rotate(180deg); }

/* ── trust-strip ───────────────────────────────────────────────────────── */
.uin-trust{ background:var(--z-brand-900); color:var(--z-on-dark-2); }
.uin-trust__in{
  display:flex; flex-wrap:wrap; gap:10px 38px; justify-content:center;
  padding:15px 24px; font-family:var(--z-label); font-weight:600;
  font-size:.79rem; letter-spacing:.10em; text-transform:uppercase;
}
.uin-trust__item{ position:relative; }
.uin-trust__item + .uin-trust__item::before{
  content:""; position:absolute; left:-19px; top:50%; width:3px; height:3px;
  border-radius:50%; background:var(--z-accent); transform:translateY(-50%);
}

/* ── secties: geen label-boven-kop meer (verboden in DESIGN.md) ─────────── */
.uin .uin-band .eyebrow,.uin .uin-band .eyebrow--gold{ display:none; }
.uin .uin-head h2{ font-size:clamp(2.2rem,4.2vw,3.2rem); }

@media(max-width:980px){
  .uin-hero__grid{ grid-template-columns:1fr; gap:44px; }
  .uin-hero__collage{ min-height:0; margin-bottom:44px; }
  .uin-collage--groot{ height:300px; }
  .uin-collage--klein{ width:52%; height:170px; bottom:-30px; }
}
@media(max-width:600px){
  .uin-hero--zine{ padding:34px 0 44px; }
  .uin-collage--groot{ height:230px; border-width:5px; }
  .uin-collage--klein{ height:130px; border-width:5px; right:-2px; bottom:-24px; }
  .uin-snij{ display:none; }
  .uin-hero--zine h1{ font-size:clamp(2rem,8.4vw,2.7rem); }
}

/* ── hero-erfenis uitschakelen ─────────────────────────────────────────────
   uin-landing.css geeft .uin-hero een donkere achtergrond (#0b2540), een
   ::after-sluier en lichte teksten — bedoeld voor de oude full-bleed fotohero.
   In de zine-collage staat de tekst op crème, dus die erfenis moet weg. */
.uin-hero--zine{
  min-height:0; display:block; align-items:initial; overflow:visible;
  background:var(--z-cream)!important; color:var(--z-ink);
}
.uin-hero--zine::after{ content:none!important; }
.uin-hero--zine .lead{ color:var(--z-body)!important; text-shadow:none!important; font-size:1.06rem; }
.uin-hero--zine h1{ text-shadow:none!important; max-width:none; }
.uin-hero--zine h1 em{ font-style:italic!important; color:var(--z-ink)!important; }
.uin-hero--zine .uin-h1__vet{ color:var(--z-ink)!important; }
.uin-hero--zine .zoek-input{ color:var(--z-ink); }

/* ── legacy-tokens omleiden ────────────────────────────────────────────────
   uin-tokens.css/uin-chrome.css/uin-landing.css verwijzen overal naar
   --uin-blauw / --uin-koraal enz. In plaats van elke oude regel apart te
   overschrijven (en er onvermijdelijk een paar te missen: nav-item, chevron,
   hover-randen) leiden we de tokens zélf om. Dit bestand laadt alleen als de
   zine-skin actief is, dus buiten de skin verandert er niets. */
:root{
  --uin-blauw:#14533A;
  --uin-blauw-diep:#10301F;
  --uin-blauw-licht:#1F6B4A;
  --uin-koraal:#E0A53A;
  --uin-groen:#2E7D6B;
  --uin-porselein:#F4EFE3;
  --uin-mist:#ECE6D6;
  --uin-inkt:#1B2A22;
  --uin-lijn:rgba(20,83,58,.16);
}
/* iconen in de tegels stonden op een hardgecodeerd blauw */
.uin .uin-tegel__ic{ color:var(--z-accent)!important; }
.uin .uin-tegel:hover{ border-color:var(--z-brand-700)!important; }

/* pills: expliciet, want .uin-hero a erft anders een lichte kleur */
.uin-hero--zine .uin-hero__pills .uin-pill{
  color:var(--z-brand-700)!important; border-color:var(--z-brand-700)!important;
  text-decoration:none; background:transparent;
}
.uin-hero--zine .uin-hero__pills .uin-pill:hover{
  background:var(--z-brand-700)!important; color:var(--z-on-dark)!important;
}
/* actief nav-item + laatste item niet meer koraal/blauw uit het oude palet */
.nav-menu .current-menu-item>a{ color:var(--z-brand-700)!important; }
.nav-menu li:last-child a{ color:var(--z-brand-700)!important; }

/* mobiel: de gekantelde tegel steekt onder de collage uit; ruimte daarop afstemmen
   i.p.v. de royale desktop-marge laten staan */
@media(max-width:600px){
  .uin-hero__collage{ margin-bottom:26px; }
  .uin-hero--zine{ padding-bottom:26px; }
}

/* ── artikelkaarten in zine-kleur ──────────────────────────────────────────
   De no-image-gradient stond nog op het oude navy; vier grote blauwe blokken
   midden in een crème/groen/gouden pagina. Nu diepgroen, in lijn met de rest. */
.uin .uin-art--noimg{
  background:linear-gradient(152deg,#0c2616 0%,#10301F 55%,#1a4a30 100%);
}
.uin .uin-art--noimg .uin-art__grad{
  background:radial-gradient(115% 85% at 88% 4%,rgba(224,165,58,.26),transparent 56%);
}
.uin .uin-art__grad{
  background:linear-gradient(180deg,rgba(12,38,22,.10) 0%,rgba(12,38,22,.38) 45%,rgba(12,38,22,.93) 100%);
}
/* de twee donkere balken onder de hero (trust + weer) plakten aan elkaar */
.uin-trust + .uin-weer, .uin-weer{ border-top:1px solid rgba(224,165,58,.22); }

/* ── lucht boven het expertblok ────────────────────────────────────────────
   De portretfoto plakte op mobiel direct tegen de weerstrip erboven; het blok
   heeft van zichzelf geen bovenmarge omdat het op een stadssite ná een sectie
   met eigen ruimte staat. Hier expliciet zetten. */
.uitxp{ padding-top:44px; }
@media(max-width:720px){ .uitxp{ padding-top:30px; } }

/* ── knop expertblok leesbaar houden ───────────────────────────────────────
   uin-landing.css zet `.uin a{color:inherit}` — specificiteit (0,1,1). De knop
   uit de netwerk-mu-plugin is `.uitxp__cta`, dus (0,1,0), en verloor: donkere
   tekst op donkergroen. Met `a.uitxp__cta` komen we op (0,2,1) en wint de
   bedoelde witte tekst weer, zonder !important en zonder de plugin te wijzigen.
   Zelfde patroon geldt voor elke plugin-knop die maar één class gebruikt. */
.uin a.uitxp__cta{ color:var(--z-on-dark); }
.uin a.uitxp__cta:hover,.uin a.uitxp__cta:focus-visible{ color:var(--z-on-dark); }

/* ── nieuwsbriefbalk: ruimte en uitlijning ────────────────────────────────
   Het invoerveld plakte tegen de onderrand van de groene balk en de knop liep
   verder door dan de tekstkolom erboven. Expliciete padding + een vaste
   veld/knop-verhouding lossen beide op. */
.uin .uin-news__in{ padding:52px 24px; gap:24px; align-items:center; }
.uin .uin-news__form{ display:flex; gap:10px; align-items:stretch; }
.uin .uin-news__form input[type=email]{ flex:1 1 auto; min-width:0; padding:15px 22px; }
.uin .uin-news__form .uin-btn{ flex:0 0 auto; padding:15px 26px; white-space:nowrap; }
@media(max-width:900px){
  .uin .uin-news__in{ padding:40px 22px 44px; }
  .uin .uin-news__form{ width:100%; }
}
@media(max-width:420px){
  .uin .uin-news__form{ flex-direction:column; }
  .uin .uin-news__form .uin-btn{ width:100%; }
}

/* ── weetjes: op een telefoon zijn twee kolommen te smal ─────────────────── */
@media(max-width:600px){
  .uin .uin-weetjes{ grid-template-columns:1fr; gap:12px; }
}

/* ── contrast naar WCAG AA ────────────────────────────────────────────────
   Gemeten op crème #F4EFE3: archiefdatums #9a917e = 2,72:1 en de kickers
   #8a8170 = 3,36:1. Beide te laag voor kleine tekst (AA vraagt 4,5:1).
   Donkerder gezet tot boven de norm, kleurindruk blijft hetzelfde. */
:root{ --z-muted:#6f6858; }
.uin .eyebrow,.uin .eyebrow--gold{ color:#6f6858; }
.uitxp__eerder-datum,.uitxp__datum,.uitxp__eerder time,
.uin .uitxp__eerder-kop{ color:#6f6858 !important; }

/* footer: juridische links naast de copyright-regel */
.uin-foot__legal{ display:inline-flex; gap:8px; align-items:center; }
.uin-foot__legal a{ color:var(--z-on-dark-2); text-decoration:none; }
.uin-foot__legal a:hover{ color:var(--z-accent); text-decoration:underline; }
@media(max-width:720px){ .uin-foot__legal{ display:flex; margin:6px 0; } }

/* ── typografie-tokens gelijktrekken ──────────────────────────────────────
   uin-landing.css definieert --display (Fraunces) en --body (Instrument Sans) en
   gebruikt die 22×. De zine-skin overschrijft de grote elementen al expliciet, maar
   een handvol kleintjes (pijl in de plaatsenlijst, temperatuur in de weerstrip) bleef
   in het oude lettertype staan — zichtbaar inconsistent. Tokens hier omleiden dekt de
   rest af zonder elk selector apart te hoeven benoemen.
   NB: de Google-Fonts-request voor Fraunces blijft bewust staan; uin-artikel.css
   gebruikt dat lettertype nog letterlijk voor de kop op de columnpagina's. Die
   consolideren is een designbeslissing, geen opruimactie. */
.uin{ --display:"Cormorant Garamond",Georgia,serif; --body:"Archivo",system-ui,sans-serif; }
.uin .uin-weer__list .t,.uin .uin-citysign .arrow{ font-family:var(--z-text); }

/* ── Uitgaan overdag & 's avonds ──────────────────────────────────────────
   Eigen classes (.uin-tent) i.p.v. de oude .uin-topper: die stijlen staan nog in
   uin-landing.css met het oude navy-palet en zouden hier doorwerken.
   Foto-eerst: staat er een werkende foto, dan vult die de tegel; valt hij weg
   (onerror), dan blijft de ontworpen tegel met het categorie-icoon staan. */
.uin .uin-tenten-band{ background:var(--z-cream-alt); border-block:1px solid var(--z-cream-line); }
.uin .uin-tenten__kop{
  font-family:var(--z-label); font-weight:700; font-size:.78rem; letter-spacing:.20em;
  text-transform:uppercase; color:var(--z-brand-700); margin:30px 0 14px;
  display:flex; align-items:center; gap:.7rem;
}
.uin .uin-tenten__kop::after{ content:""; flex:1; height:1px; background:var(--z-cream-line); }
.uin .uin-tenten{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }

.uin a.uin-tent{
  display:flex; flex-direction:column; background:var(--z-card);
  border:1px solid var(--z-card-border); border-radius:14px; overflow:hidden;
  text-decoration:none; color:var(--z-ink);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.uin a.uin-tent:hover{ transform:translateY(-3px); border-color:var(--z-brand-700);
  box-shadow:0 16px 30px rgba(16,48,31,.12); }
.uin a.uin-tent:focus-visible{ outline:3px solid var(--z-accent); outline-offset:3px; }

.uin .uin-tent__beeld{
  position:relative; display:block; height:132px; overflow:hidden;
  background:linear-gradient(150deg,#0c2616 0%,#10301F 58%,#1a4a30 100%);
}
.uin .uin-tent__beeld img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; }
/* het icoon staat eronder: verdwijnt de foto, dan is dit de tegel */
.uin .uin-tent__ic{ position:absolute; right:12px; bottom:10px; line-height:0; opacity:.85; }
.uin .uin-tent__ic .uin-ic{ width:40px; height:40px; color:var(--z-accent); }
.uin .uin-tent__beeld::after{ /* gouden zweem, geeft de lege tegel diepte */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 82% 6%, rgba(224,165,58,.22), transparent 58%);
}
.uin .uin-tent__beeld img ~ .uin-tent__ic{ opacity:.95; }

.uin .uin-tent__body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:3px; }
.uin .uin-tent__lbl{
  font-family:var(--z-label); font-weight:600; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--z-muted);
}
.uin .uin-tent__naam{
  font-family:var(--z-display); font-style:italic; font-weight:600; font-size:1.24rem;
  line-height:1.15; color:var(--z-ink);
}
.uin .uin-tent__stad{
  display:flex; align-items:center; gap:5px; font-size:.88rem; color:var(--z-body); margin-top:2px;
}
.uin .uin-tent__stad .uin-ic{ width:15px; height:15px; color:var(--z-brand-700); }

@media(max-width:900px){ .uin .uin-tenten{ grid-template-columns:repeat(2,1fr); gap:14px; } }
@media(max-width:520px){
  .uin .uin-tenten{ grid-template-columns:1fr; }
  .uin .uin-tent__beeld{ height:112px; }
}

/* ── tegel zonder foto: bedoeld, niet leeg ────────────────────────────────
   De beginletter van de zaak groot in de zine-serif, plus een fijne lijnstructuur.
   Elke kaart wordt daarmee uniek. Laadt er wél een foto, dan dekt die alles af. */
.uin .uin-tent__beeld{
  background:
    repeating-linear-gradient(115deg, rgba(224,165,58,.05) 0 2px, transparent 2px 9px),
    linear-gradient(150deg,#0c2616 0%,#10301F 58%,#1a4a30 100%);
}
.uin .uin-tent__initiaal{
  position:absolute; left:14px; top:50%; transform:translateY(-52%);
  font-family:var(--z-display); font-style:italic; font-weight:600;
  font-size:5.4rem; line-height:1; color:rgba(253,249,239,.14);
  letter-spacing:-.03em; user-select:none; pointer-events:none;
}
.uin .uin-tent__beeld img{ z-index:2; }
.uin .uin-tent__ic{ z-index:3; }
.uin .uin-tent__beeld::after{ z-index:1; }
@media(max-width:520px){ .uin .uin-tent__initiaal{ font-size:4.2rem; } }

/* ── UitSterren op de tentkaarten ────────────────────────────────────────── */
.uin .uin-tent__meta{ display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:3px; flex-wrap:wrap; }
.uin .uin-tent__score{ display:inline-flex; align-items:center; gap:6px; }
.uin .uin-tent__score .uin-stars{ --sterkleur:var(--z-accent); }
.uin .uin-tent__score .uin-stars__n{ font-family:var(--z-text); font-weight:600;
  font-size:.86rem; color:var(--z-brand-700); }

/* ── Veelgestelde vragen ─────────────────────────────────────────────────── */
.uin .uin-faq{ background:var(--z-cream); }
.uin .uin-faq__lijst{ margin:26px 0 0; display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  border-top:1px solid var(--z-cream-line); }
.uin .uin-faq__item{ padding:24px 28px 22px 0; border-bottom:1px solid var(--z-cream-line); }
.uin .uin-faq__item:nth-child(2n){ padding-left:28px; border-left:1px solid var(--z-cream-line); }
.uin .uin-faq__item dt{
  font-family:var(--z-display); font-style:italic; font-weight:600; font-size:1.34rem;
  line-height:1.18; color:var(--z-ink); margin:0 0 .5rem;
}
.uin .uin-faq__item dd{ margin:0; color:var(--z-body); font-size:.97rem; line-height:1.6; max-width:56ch; }
@media(max-width:760px){
  .uin .uin-faq__lijst{ grid-template-columns:1fr; }
  .uin .uin-faq__item{ padding:20px 0; }
  .uin .uin-faq__item:nth-child(2n){ padding-left:0; border-left:0; }
}