/* ═══════════════════════════════════════════════════════════
   EDINBURGH 2026 — aquarel & inkt
   Mobile-first. Begin bij 360px, dan pas breder.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Palet, gesampled uit de illustraties */
  --paper:       #FAF6EC;
  --paper-deep:  #F1EADB;
  --paper-edge:  #E3DCC9;
  --ink:         #241A18;
  --ink-soft:    #5B4F49;
  --amber:       #DBA14A;
  --amber-deep:  #BA7634;
  --green:       #6A7151;
  --green-deep:  #59623A;
  --stone:       #9E937D;
  --stone-deep:  #6B6352;
  --heather:     #714D67;
  --tartan:      #7B1D2F;

  --font-hand: "Caveat", "Segoe Print", cursive;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --nav-h: 52px;
  --gut: 18px;                       /* zijmarge, nooit minder */
  --wrap: 680px;

  /* Penseelstreek-hoeken: nooit machinaal recht */
  --brush-a: 16px 22px 14px 20px / 20px 14px 22px 16px;
  --brush-b: 22px 14px 20px 16px / 14px 22px 16px 20px;
  --brush-s: 10px 14px 9px 13px / 13px 9px 14px 10px;
}

*, *::before, *::after{ box-sizing: border-box; }

/* hidden moet ALTIJD verbergen. Zonder !important wint elke eigen
   display-regel hieronder van de browserregel [hidden]{display:none},
   en dan blijft een verborgen knop gewoon staan. */
[hidden]{ display: none !important; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 10px);
}

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;                   /* nooit onder 16px */
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Papierkorrel over de hele pagina, heel licht */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;                       /* over alles heen, onder de lightbox (100) */
  pointer-events: none;
  opacity: .45;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
}

/* Clippen doen we op de inhoud, niet op body: overflow op een voorouder van
   een sticky element breekt de sticky-header in Safari. */
main, .footer, .bleed{ overflow-x: clip; }

img{ max-width: 100%; height: auto; display: block; }
:where(a){ color: var(--ink); text-decoration-color: rgba(186,118,52,.6); text-underline-offset: 3px; }

:where(button, a, input, textarea):focus-visible{
  outline: 2px solid var(--amber-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip{
  position: absolute; left: -9999px;
  background: var(--paper-deep); padding: 12px 16px; z-index: 60;
}
.skip:focus{ left: 8px; top: 8px; }

.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left:  max(var(--gut), env(safe-area-inset-left));
  padding-right: max(var(--gut), env(safe-area-inset-right));
}

/* ─────────────── NAVIGATIE ─────────────── */
.nav{
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  /* Met viewport-fit=cover loopt de pagina door tot onder de statusbalk. */
  padding-top: env(safe-area-inset-top);
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  border-bottom: 1px solid var(--paper-edge);
}
/* Papierstrook die boven de balk uitsteekt. Staat de balk netjes tegen de
   bovenkant, dan valt deze buiten beeld en zie je hem niet. Blijft er een
   strook over — safe area, of Safari dat zijn adresbalk in- en uitklapt —
   dan is die strook papier in plaats van doorscrollende inhoud. */
.nav::before{
  content:"";
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: 160px;
  background: var(--paper);
  pointer-events: none;
}
/* handgetekend lijntje onder de nav */
.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='4'%3E%3Cpath d='M0 2.4C40 .8 70 3.4 110 2 150 .6 186 3.6 240 1.8' fill='none' stroke='%235B4F49' stroke-width='1' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E") repeat-x;
  pointer-events:none;
}
.nav__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: var(--nav-h);
  padding-left:  max(var(--gut), 0px);
  padding-right: 6px;
}
.nav__here{
  font-family: var(--font-hand);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: rotate(-1deg);
}
.nav__actions{ flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.nav__fx{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid rgba(36,26,24,.38);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-hand);
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  transform: rotate(-1deg);
  -webkit-tap-highlight-color: transparent;
}
.nav__fx:active{ transform: rotate(-1deg) scale(.93); }
.nav__toggle{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(36,26,24,.38);
  border-radius: var(--brush-s);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav__burger{ width: 22px; height: 22px; display: block; }
.nav__toggle[aria-expanded="true"]{
  border-color: var(--ink);
  background:
    radial-gradient(66% 74% at 40% 44%, rgba(219,161,74,.5), rgba(219,161,74,0) 74%),
    radial-gradient(60% 66% at 72% 62%, rgba(186,118,52,.34), rgba(186,118,52,0) 76%);
}

.nav__panel{
  border-top: 1px solid var(--paper-edge);
  background: var(--paper);
  max-height: calc(100dvh - var(--nav-h) - 20px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav__list{
  margin: 0;
  padding: 6px max(var(--gut), 0px) 10px;
  list-style: none;
}
.nav__list li + li{ border-top: 1px dashed rgba(91,79,73,.28); }
.nav__list a{
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;                  /* ruim tikvlak */
  padding: 6px 10px;
  font-family: var(--font-hand);
  font-size: 26px;
  color: var(--ink);
  text-decoration: none;
}
.nav__list a.is-active{ font-weight: 700; }
.nav__list a.is-active::before{     /* zacht amber vlekje, geen strak blokje */
  content:""; position:absolute; left:0; right:0; top:5px; bottom:5px; z-index:-1;
  border-radius: var(--brush-a);
  background:
    radial-gradient(52% 74% at 24% 44%, rgba(219,161,74,.42), rgba(219,161,74,0) 74%),
    radial-gradient(58% 68% at 70% 60%, rgba(186,118,52,.26), rgba(186,118,52,0) 76%);
}

/* ─────────────── SECTIES ─────────────── */
.sec{
  position: relative;
  padding: 34px 0 30px;
}
/* zachte aquarelvlekken achter de secties */
.sec::before{
  content:""; position:absolute; inset:-20px 0 0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(46% 30% at 12% 12%, rgba(106,113,81,.13), rgba(106,113,81,0) 70%),
    radial-gradient(40% 26% at 92% 62%, rgba(219,161,74,.14), rgba(219,161,74,0) 72%);
}
#weer::before{
  background:
    radial-gradient(52% 32% at 84% 10%, rgba(158,147,125,.18), rgba(158,147,125,0) 70%),
    radial-gradient(42% 28% at 6% 74%, rgba(113,77,103,.10), rgba(113,77,103,0) 72%);
}
#sneuvel::before{
  background:
    radial-gradient(50% 30% at 20% 86%, rgba(113,77,103,.12), rgba(113,77,103,0) 70%),
    radial-gradient(44% 26% at 88% 14%, rgba(106,113,81,.14), rgba(106,113,81,0) 72%);
}
#mannen::before{
  background:
    radial-gradient(55% 26% at 50% 4%, rgba(219,161,74,.16), rgba(219,161,74,0) 72%),
    radial-gradient(46% 30% at 10% 66%, rgba(158,147,125,.15), rgba(158,147,125,0) 72%);
}

.sec__title{
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(34px, 10vw, 48px);
  line-height: 1.05;
  margin: 0 0 10px;
  transform: rotate(-1.1deg);
  transform-origin: left center;
}
.sec__title--tilt-a{ transform: rotate(.8deg); }
.sec__title--tilt-b{ transform: rotate(-.5deg) translateX(3px); }

.sub__title{
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 30px;
  margin: 30px 0 4px;
  transform: rotate(-.6deg);
  transform-origin: left center;
}
.lede{ margin: 0 0 18px; color: var(--ink-soft); font-size: 16px; }
.ph{ color: var(--ink-soft); font-size: 16px; font-style: italic; }
.ph--block{ display: block; margin: 0 0 16px; }
code{ font-size: .95em; background: var(--paper-deep); padding: 1px 5px; border-radius: 4px; }

/* golvende scheidingslijn */
.divider{ color: var(--ink-soft); opacity: .55; line-height: 0; }
.divider svg{ width: 100%; height: 22px; display: block; }

/* losse illustraties: geen kader, geen rand, geen radius.
   De randen vloeien zacht uit in het papier, zodat je nergens ziet
   waar het JPEG-bestand ophoudt en de pagina begint. */
.feather,
.illu img,
.bleed img{
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-composite: intersect;
}

.illu{ margin: 0 0 22px; }
.illu img{ width: 100%; }
.illu--pub img,
.illu--whisky img{ aspect-ratio: 900 / 672; object-fit: cover; }

/* full-bleed illustraties */
.bleed{ margin: 0; }
.bleed img{ width: 100%; }
.bleed--skyline img{ aspect-ratio: 2000 / 848; object-fit: cover; }
.bleed--hills img{ aspect-ratio: 1024 / 434; object-fit: cover; margin-top: 18px; }

/* ─────────────── 1. HERO ─────────────── */
.hero{
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding-top: 26px;
  position: relative;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(42% 22% at 88% 26%, rgba(113,77,103,.09), rgba(113,77,103,0) 72%),
    radial-gradient(46% 24% at 8% 40%, rgba(219,161,74,.14), rgba(219,161,74,0) 74%);
}
.hero__text{ text-align: center; margin-top: auto; }
.bleed--skyline{ margin-top: auto; }
.hero__kicker{
  font-family: var(--font-hand);
  font-size: 24px;
  color: var(--ink-soft);
  margin: 0 0 -2px;
  transform: rotate(-2deg);
  letter-spacing: .04em;
}
.hero__title{
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(58px, 20vw, 116px);
  line-height: .9;
  margin: 0 0 6px;
  letter-spacing: .01em;
  transform: rotate(-1.4deg);
}
.hero__sub{
  margin: 0;
  font-size: clamp(16px, 4.4vw, 20px);
  font-weight: 600;
}
.hero__count{
  margin: 2px 0 0;
  font-family: var(--font-hand);
  font-size: 26px;
  color: var(--ink-soft);
  transform: rotate(1deg);
}

.countdown{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  margin: 18px auto 0;
  max-width: 340px;
}
.cd__unit{ flex: 1 1 0; min-width: 0; }
.cd__num{
  display: block;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(34px, 11vw, 52px);
  line-height: 1;
  white-space: nowrap;
}
.cd__lab{
  display: block;
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cd__sep{ font-size: 26px; color: var(--stone); line-height: 1.2; }
.cd__note{
  text-align: center;
  margin: 6px 0 0;
  font-size: 16px;
  color: var(--ink-soft);
}
.cd__unit:nth-child(1) .cd__num{ transform: rotate(-2deg); }
.cd__unit:nth-child(3) .cd__num{ transform: rotate(1.5deg); }
.cd__unit:nth-child(5) .cd__num{ transform: rotate(-1deg); }

/* ─────────────── 2. INGEPLAKT BRIEFJE ─────────────── */
.note-paper{
  position: relative;
  background: var(--paper-deep);
  border: 1px solid rgba(36,26,24,.35);
  border-radius: var(--brush-a);
  padding: 20px 18px 18px;
  transform: rotate(-.9deg);
  box-shadow: 0 6px 18px -8px rgba(36,26,24,.28);   /* warm en heel zacht */
}
.note-paper__label{
  font-family: var(--font-hand);
  font-size: 21px;
  color: var(--ink-soft);
  margin: 0 0 10px;
  transform: rotate(.7deg);
  border-bottom: 1px dashed rgba(91,79,73,.4);
  padding-bottom: 8px;
}
.note-paper__body p{
  margin: 0 0 13px;
  font-size: 16.5px;
  line-height: 1.66;
}
.note-paper__body p:last-child{ margin-bottom: 0; font-family: var(--font-hand); font-size: 22px; }

/* ─────────────── 3. WEER ─────────────── */
.weather__now{
  display: block;
  margin: 0 0 14px;
  font-size: 16px;
  color: var(--ink-soft);
}
.weather__now b{ color: var(--ink); }
.skeleton{
  min-height: 132px;
  border-radius: var(--brush-a);
  background: var(--paper-deep);
  opacity: .7;
}
.wx-climate{
  border: 1px solid rgba(36,26,24,.3);
  border-radius: var(--brush-b);
  background: var(--paper-deep);
  padding: 16px 16px 14px;
}
.wx-climate h3{
  font-family: var(--font-hand); font-size: 25px; margin: 0 0 8px; font-weight: 700;
}
.wx-climate ul{ margin: 0 0 10px; padding-left: 20px; }
.wx-climate li{ margin-bottom: 4px; font-size: 16px; }
.wx-climate .soon{ margin: 0; font-size: 16px; color: var(--ink-soft); font-style: italic; }

.wx-cards{ display: grid; gap: 12px; }
.wx-card{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(36,26,24,.3);
  border-radius: var(--brush-a);
  background: rgba(241,234,219,.55);
  padding: 12px 14px;
  min-height: 92px;
}
.wx-card:nth-child(2){ border-radius: var(--brush-b); }
.wx-card__day{
  font-family: var(--font-hand); font-size: 23px; margin: 0 0 2px; line-height: 1.1;
}
.wx-card__temp{ font-size: 17px; font-weight: 700; margin: 0; }
.wx-card__temp .min{ font-weight: 400; color: var(--ink-soft); }
.wx-card__meta{ margin: 2px 0 0; font-size: 16px; color: var(--ink-soft); }
.wx-icon{ width: 56px; height: 56px; }
.dry{
  margin: 16px 0 0;
  font-family: var(--font-hand);
  font-size: 21px;
  color: var(--ink-soft);
  transform: rotate(-.6deg);
}

/* ─────────────── 4. PROGRAMMA ─────────────── */
.tabs{
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
}
.tab{
  position: relative;
  flex: 1 1 0;
  min-height: 52px;
  padding: 8px 6px;
  border: 1px solid rgba(36,26,24,.4);
  border-radius: var(--brush-s);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-hand);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tab:nth-child(2){ border-radius: var(--brush-b); }
.tab .tab__date{ display: block; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.tab::before{                       /* aquarelvlekje ipv gevuld blokje */
  content:""; position:absolute; inset:3px; z-index:-1; opacity:0;
  border-radius: var(--brush-a);
  background:
    radial-gradient(66% 74% at 38% 42%, rgba(219,161,74,.62), rgba(219,161,74,0) 72%),
    radial-gradient(60% 66% at 72% 62%, rgba(186,118,52,.46), rgba(186,118,52,0) 74%),
    radial-gradient(78% 58% at 52% 78%, rgba(219,161,74,.34), rgba(219,161,74,0) 76%);
  transition: opacity .22s ease;
}
.tab[aria-selected="true"]{ border-color: var(--ink); }
.tab[aria-selected="true"]::before{ opacity: 1; }
.tab:active{ transform: translateY(1px); }


.timeline{ position: relative; list-style: none; margin: 0; padding: 0; }
.timeline__line{
  position: absolute;
  left: 62px; top: 6px; bottom: 6px;
  width: 14px;
  color: var(--ink-soft);
  opacity: .55;
  pointer-events: none;
}
.timeline__line svg{ width: 14px; height: 100%; display: block; }

.item{
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr;
  column-gap: 26px;
  padding: 10px 8px 10px 0;
  border-radius: var(--brush-a);
}
.item__time{
  font-family: var(--font-hand);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
}
.item__icon{
  position: absolute;
  left: 58px; top: 13px;
  width: 24px; height: 24px;
  color: var(--ink);
}
.item__icon::before{               /* zacht vlekje achter het icoon */
  content:""; position:absolute; inset:-6px; z-index:-1; border-radius:50%;
  background: radial-gradient(circle at 44% 44%, rgba(158,147,125,.34), rgba(158,147,125,0) 70%);
}
.item__icon svg{ width: 24px; height: 24px; display: block; }
.item__body{ padding-left: 18px; min-width: 0; }
.item__title{ margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; }
.item__desc{ margin: 1px 0 0; font-size: 16px; color: var(--ink-soft); }

.item.is-now{ }
.item.is-now::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius: var(--brush-b);
  background:
    radial-gradient(58% 80% at 30% 40%, rgba(219,161,74,.34), rgba(219,161,74,0) 74%),
    radial-gradient(64% 72% at 76% 62%, rgba(186,118,52,.26), rgba(186,118,52,0) 76%);
}
.item.is-now .item__title::after{
  content: "nu";
  font-family: var(--font-hand);
  font-size: 19px;
  font-weight: 700;
  color: var(--amber-deep);
  margin-left: 8px;
}

.binnenkort{
  border: 1px solid rgba(36,26,24,.32);
  border-radius: var(--brush-b);
  background: rgba(241,234,219,.5);
  padding: 18px 16px 16px;
  transform: rotate(-.6deg);
}
.binnenkort__icoon{
  display: block;
  width: 30px; height: 30px;
  color: var(--ink);
  margin: 0 0 8px;
}
.binnenkort__icoon svg{ width: 100%; height: 100%; display: block; }
.binnenkort__kop{
  font-family: var(--font-hand);
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 8px;
  transform: rotate(.8deg);
  transform-origin: left center;
}
.binnenkort p{ margin: 0 0 10px; font-size: 16.5px; }
.binnenkort p:last-child{ margin-bottom: 0; }
.binnenkort__klein{ color: var(--ink-soft); font-style: italic; }

/* ─────────────── 5a. CLANPORTRET (polaroid) ─────────────── */
.polaroid{ margin: 0 0 6px; }
.polaroid__btn{
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: rotate(-1.4deg);
  -webkit-tap-highlight-color: transparent;
}
.polaroid__frame{
  display: block;
  background: #FDFBF5;
  padding: 10px 10px 34px;
  border: 1px solid rgba(36,26,24,.18);
  box-shadow: 0 10px 24px -12px rgba(36,26,24,.5), 0 2px 6px -3px rgba(36,26,24,.3);
}
.polaroid__frame img{
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}
.polaroid__btn:active .polaroid__frame{ transform: scale(.995); }
/* geschilderde plakbandhoekjes */
.tape{
  position: absolute; z-index: 2;
  width: 74px; height: 26px;
  background: linear-gradient(100deg, rgba(219,161,74,.34), rgba(186,118,52,.24));
  border-radius: 3px 5px 4px 6px;
}
.tape--l{ top: -11px; left: -8px; transform: rotate(-24deg); }
.tape--r{ top: -11px; right: -8px; transform: rotate(21deg); }
.polaroid__cap{
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--ink-soft);
  text-align: center;
  margin: 16px 0 0;
  transform: rotate(-.8deg);
  line-height: 1.3;
}
.polaroid__cap .ph{ font-size: 16px; }

/* fallback als clan.jpg ontbreekt */
.clan-fallback{
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--paper-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ink-soft);
}
.clan-fallback svg{ width: 68%; max-width: 260px; height: auto; }
.clan-fallback span{ font-family: var(--font-hand); font-size: 24px; }

/* ─────────────── 5b. PORTRETTEN ─────────────── */
.portraits{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;          /* centreert ook de laatste rij */
  gap: 18px 10px;
}
.portrait{
  flex: 0 0 auto;
  width: calc((100% - 20px) / 3);   /* 3 kolommen op mobiel */
  text-align: center;
}
.portrait__art{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.portrait__blob{
  position: absolute; inset: -6%;
  border-radius: 50%;
  z-index: 0;
}
.portrait__art img,
.portrait__letter{
  position: absolute;
  inset: 6%;
  z-index: 1;
  width: 88%; height: 88%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}
.portrait__letter{
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(30px, 11vw, 44px);
  color: var(--ink);
  line-height: 1;
}
.portrait__ring{
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  color: var(--ink);
  pointer-events: none;
}

/* ─────────────── 6. DE SNEUVELKONING ─────────────── */
.ranking{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  counter-reset: rang;
}
.rank{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
  gap: 12px;
  padding: 6px 10px 6px 6px;
  border-bottom: 1px dashed rgba(91,79,73,.32);
}
.rank:last-child{ border-bottom: 0; }
.rank__pos{
  flex: 0 0 34px;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 1;
}
.rank__crown{ width: 30px; height: 30px; color: var(--amber-deep); display: block; margin: 0 auto; }
.rank__naam{
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-hand);
  font-size: 27px;
  line-height: 1.2;
  word-break: break-word;
}
.rank__titel{
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.3;
}
.rank__punten{
  flex: 0 0 auto;
  font-family: var(--font-hand);
  font-size: 19px;
  color: var(--amber-deep);
  white-space: nowrap;
}
.rank__knoppen{ flex: 0 0 auto; display: flex; gap: 2px; margin-left: auto; }
.rank__btn{
  width: 46px; height: 46px;          /* tikvlak */
  min-width: 44px; min-height: 44px;
  padding: 11px;
  border: 0; background: none; cursor: pointer;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.rank__btn svg{ width: 100%; height: 100%; display: block; }
.rank__btn[disabled]{ opacity: .22; cursor: default; }
.rank__btn:active:not([disabled]){ transform: scale(.9); }
.rank__btn--plus{ color: var(--amber-deep); }
.rank__btn--min{ color: var(--ink-soft); padding: 14px; }

/* de koploper krijgt een aquarelvlekje, geen gevuld blok */
.rank--koning{ position: relative; }
.rank--koning::before{
  content:""; position:absolute; inset:-2px -8px; z-index:-1;
  border-radius: var(--brush-b);
  background:
    radial-gradient(56% 78% at 26% 42%, rgba(219,161,74,.40), rgba(219,161,74,0) 74%),
    radial-gradient(62% 70% at 74% 62%, rgba(186,118,52,.28), rgba(186,118,52,0) 76%);
}
.rank--koning .rank__naam{ font-weight: 700; }

.rank__status{
  margin: 0 0 12px;
  font-size: 16px;
  font-style: italic;
  color: var(--ink-soft);
  min-height: 24px;
}
.rank__bar{ display: flex; flex-wrap: wrap; gap: 10px; }

/* ── meldingen: iedereen kan een pintje aanvragen, de scheidsrechter beslist ── */
.meld{
  margin: 22px 0 0;
  padding: 14px 14px 12px;
  border: 1px solid rgba(36,26,24,.32);
  border-radius: var(--brush-a);
  background: rgba(241,234,219,.5);
}
.meld__title{
  font-family: var(--font-hand);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px;
  transform: rotate(-.6deg);
  transform-origin: left center;
}
.meld__lede{ margin: 0 0 14px; font-size: 15px; color: var(--ink-soft); }
.meld__form{ display: flex; flex-direction: column; gap: 10px; }
.meld__field{ display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-soft); }
.meld__field select,
.meld__field input{
  min-height: 48px;                  /* ruim boven 16px lettergrootte: iOS zoomt niet in */
  padding: 0 12px;
  border: 1px solid rgba(36,26,24,.45);
  border-radius: var(--brush-s);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
}
.meld__field select:focus,
.meld__field input:focus{ outline: none; border-color: var(--amber-deep); }
.meld__form .btn{ align-self: flex-start; }
.meld__gelukt{ margin: 10px 0 0; font-size: 15px; font-style: italic; color: var(--amber-deep); }

.meld__lijst{ list-style: none; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px dashed rgba(91,79,73,.32); }
.meld__lijst:empty{ margin: 0; padding: 0; border: 0; }
.meld__item{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 7px 0;
}
.meld__tekst{ flex: 1 1 160px; min-width: 0; font-size: 15px; }
.meld__status{ flex: 0 0 auto; font-size: 13px; font-style: italic; color: var(--ink-soft); }
.meld__acties{ flex: 0 0 auto; display: flex; gap: 2px; margin-left: auto; }

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--brush-s);
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.btn::before{
  content:""; position:absolute; inset:-2px -4px -5px; z-index:-1; opacity:0;
  border-radius: var(--brush-a);
  background: radial-gradient(60% 80% at 50% 60%, rgba(219,161,74,.6), rgba(219,161,74,0) 74%);
  transition: opacity .18s ease;
}
.btn:active::before{ opacity: 1; }
.btn--ghost{ border-color: var(--ink-soft); color: var(--ink-soft); font-weight: 600; }

/* ─────────────── 7. KAART ─────────────── */
.mapframe{
  position: relative;
  border: 1px solid var(--ink);
  border-radius: var(--brush-a);
  overflow: hidden;
  background: var(--paper-deep);
}
.map{ width: 100%; height: 340px; background: var(--paper-deep); }
.leaflet-tile-pane{ filter: sepia(.55) saturate(.45) brightness(1.08) contrast(.86); }
.leaflet-container{ font-family: var(--font-body); background: var(--paper-deep); }
.leaflet-popup-content-wrapper{
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--brush-s);
  box-shadow: 0 6px 16px -10px rgba(36,26,24,.5);
}
.leaflet-popup-tip{ background: var(--paper); border: 1px solid var(--ink); }
.leaflet-popup-content{ margin: 10px 12px; font-size: 16px; line-height: 1.45; }
.leaflet-popup-content b{ font-family: var(--font-hand); font-size: 21px; font-weight: 700; }
.leaflet-popup-content a{ display: inline-block; min-height: 30px; padding-top: 6px; font-weight: 700; }
.leaflet-control-attribution{ background: rgba(250,246,236,.8) !important; font-size: 10px; }
.leaflet-bar a{ min-width: 44px !important; min-height: 44px !important; line-height: 44px !important; }

.map__veil{
  /* moet boven Leaflets eigen panes (z-index 800 en 1000) liggen,
     anders vang je met een tik linksboven de zoomknop in plaats van de overlay */
  position: absolute; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  background: rgba(250,246,236,.55);
  backdrop-filter: blur(1px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.map__veiltext{
  font-family: var(--font-hand);
  font-size: 24px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--brush-s);
  padding: 10px 18px;
  min-height: 44px;
  display: flex; align-items: center;
  text-align: center;
}
.map__lock{
  position: absolute; z-index: 1200; right: 8px; bottom: 8px;
  min-height: 44px; padding: 8px 14px;
  font-family: var(--font-body); font-size: 16px; font-weight: 700;
  color: var(--ink);
  background: rgba(250,246,236,.94);
  border: 1px solid var(--ink);
  border-radius: var(--brush-s);
  cursor: pointer;
}
/* ─────────────── 8. PRAKTISCH ─────────────── */

/* pond naar euro — groot genoeg om met een duim te bedienen */
.fx{
  border: 1px solid rgba(36,26,24,.32);
  border-radius: var(--brush-a);
  background: rgba(241,234,219,.5);
  padding: 14px 14px 12px;
  margin: 0 0 18px;
}
.fx__title{
  font-family: var(--font-hand);
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 10px;
  transform: rotate(-.7deg);
  transform-origin: left center;
}
.fx__row{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}
.fx__field{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 52px;
  padding: 0 10px;
  border: 1px solid rgba(36,26,24,.45);
  border-radius: var(--brush-s);
  background: var(--paper);
}
.fx__cur{
  font-family: var(--font-hand);
  font-size: 26px;
  color: var(--ink-soft);
  line-height: 1;
}
.fx__field input{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 22px;                   /* ruim boven 16px: iOS zoomt niet in */
  font-weight: 700;
  padding: 10px 0;
}
.fx__field input:focus{ outline: none; }
.fx__field:focus-within{ border-color: var(--amber-deep); }
.fx__eq{ font-size: 20px; color: var(--stone); }
.fx__out{
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-hand);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  text-align: right;
  word-break: break-word;
}
.fx__rate{
  margin: 0;
  font-size: 16px;
  color: var(--ink-soft);
  font-style: italic;
}

.notepad{
  border: 1px solid rgba(36,26,24,.32);
  border-radius: var(--brush-b);
  padding: 6px 16px 14px;
  background-color: var(--paper-deep);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 31px,
    rgba(91,79,73,.18) 31px 32px
  );
  background-position: 0 10px;
}
.notepad dl{ margin: 0; }
.notepad dt{
  font-family: var(--font-hand);
  font-size: 21px;
  font-weight: 700;
  line-height: 32px;
  margin-top: 8px;
}
.notepad dd{
  margin: 0;
  font-size: 16px;
  line-height: 32px;
}
.notepad dd a{ font-weight: 700; }
.np__act{
  display: flex;                     /* block-level: 44px knop + 2x10px marge
                                        = 64px, precies 2 liniaallijnen */
  width: fit-content;
  align-items: center;
  height: 44px;                      /* tikvlak */
  margin: 10px 0;
  padding: 0 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--amber-deep);
  text-decoration: none;
  border: 1px solid rgba(186,118,52,.65);
  border-radius: var(--brush-s);
  background: rgba(250,246,236,.7);
}

/* ─────────────── 9. FOOTER ─────────────── */
.footer{
  text-align: center;
  padding: 8px var(--gut) calc(26px + env(safe-area-inset-bottom));
  padding-left:  max(var(--gut), env(safe-area-inset-left));
  padding-right: max(var(--gut), env(safe-area-inset-right));
}
.footer__title{
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 34px;
  margin: 0;
  transform: rotate(-1deg);
}
.footer__motto{
  font-family: var(--font-hand);
  font-size: 21px;
  color: var(--ink-soft);
  margin: 2px 0 0;
  transform: rotate(.5deg);
}

/* ─────────────── LIGHTBOX ─────────────── */
.lightbox{
  position: fixed; inset: 0; z-index: 100;
  background: rgba(36,26,24,.93);
  display: flex; align-items: center; justify-content: center;
  padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
}
.lightbox__stage{
  max-width: 100%; max-height: 100%;
  overflow: auto;
  touch-action: pinch-zoom pan-x pan-y;   /* pinch-to-zoom mag */
  -webkit-overflow-scrolling: touch;
}
.lightbox__stage img{
  max-width: 100%;
  max-height: calc(100dvh - 48px);
  width: auto; height: auto;
  object-fit: contain;
}
.lightbox__close{
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  z-index: 2;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
  background: rgba(36,26,24,.6);
  border: 1px solid rgba(250,246,236,.6);
  border-radius: var(--brush-s);
  cursor: pointer;
}
.lightbox__close svg{ width: 24px; height: 24px; }
body.is-locked{ overflow: hidden; }

/* ═══════════ TABLET ═══════════ */
@media (min-width: 600px){
  :root{ --gut: 26px; }
  .wx-cards{ grid-template-columns: repeat(3, 1fr); }
  .wx-card{ grid-template-columns: 1fr; text-align: center; justify-items: center; min-height: 190px; }
  .wx-icon{ width: 64px; height: 64px; }
  .portrait{ width: calc((100% - 45px) / 4); }
  .map{ height: 420px; }
  .illu--pub, .illu--whisky{ max-width: 460px; margin-left: auto; margin-right: auto; }
  .item{ grid-template-columns: 66px 1fr; }
  .timeline__line{ left: 76px; }
  .item__icon{ left: 72px; }
}

/* ═══════════ DESKTOP ═══════════ */
@media (min-width: 900px){
  :root{ --wrap: 820px; }
  body{ font-size: 17.5px; }
  .sec{ padding: 52px 0 46px; }
  .portrait{ width: calc((100% - 70px) / 6); }
  .bleed--skyline img{ max-height: 62vh; }
  .map{ height: 480px; }
}

/* ═══════════ MINDER BEWEGING ═══════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .confetti{ display: none; }
}