/* ==========================================================================
   PLEKTRUM x EVERY TASTE A MEMORY - 8 November 2026, Drostdy Theatre
   Gala treatment: obsidian ground, engraved gold, Mediterranean blue accent.
   ========================================================================== */

:root{
  --ink:       #08090C;   /* obsidian */
  --ink-2:     #101218;   /* raised */
  --ink-3:     #171A22;   /* card */
  --bone:      #F2EDE3;   /* programme paper */
  --bone-soft: #C9C2B4;
  --ash:       #8A8577;   /* warm grey, biased to gold */
  --gold:      #C9A227;
  --gold-lt:   #E7C97A;
  --sea:       #3E90B0;   /* Mediterranean blue - the food half only */
  --line:      rgba(201,162,39,.22);
  --line-soft: rgba(242,237,227,.10);

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 68px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:"Spectral", Georgia, "Times New Roman", serif;
  font-size:clamp(16px, .5vw + 15px, 18.5px);
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--gold); color:var(--ink); }

:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:3px; }

/* ------------------------------------------------------------- tipografie */

h1,h2,h3{
  font-family:"Fraunces", "Palatino Linotype", Georgia, serif;
  font-variation-settings:"SOFT" 55, "WONK" 0;
  font-weight:400;
  margin:0;
  line-height:1.06;
  text-wrap:balance;
}

.h1{ font-size:clamp(34px, 6.1vw, 82px); letter-spacing:.005em; }
.h2{ font-size:clamp(30px, 4.4vw, 60px); }
.h3{ font-size:clamp(21px, 2vw, 29px); }

.eyebrow{
  font-family:"Archivo", system-ui, sans-serif;
  font-weight:600;
  font-size:11.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0;
}
.eyebrow--sea{ color:var(--sea); }
.eyebrow--ash{ color:var(--ash); }

.lead{
  font-size:clamp(18px, 1.35vw, 22.5px);
  line-height:1.6;
  color:var(--bone-soft);
  font-weight:300;
}

.prose{ max-width:60ch; }
.prose p{ margin:0 0 1.1em; }
.prose p:last-child{ margin-bottom:0; }

.muted{ color:var(--ash); }

/* ------------------------------------------------------------------ raam */

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ position:relative; padding-block:clamp(84px, 12vh, 156px); }
.section--tight{ padding-block:clamp(56px, 8vh, 100px); }

.hairline{
  border:0; height:1px; margin:0;
  background:linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}

/* ------------------------------------------------------------- vordering */

.progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, #6B5312, var(--gold) 55%, var(--gold-lt));
  z-index:70;
}

/* ------------------------------------------------------------------- nav */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px var(--gut);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(8,9,12,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
  padding-block:11px;
}
.nav__mark{
  font-family:"Fraunces", Georgia, serif;
  font-size:13px; font-weight:500; letter-spacing:.3em; text-transform:uppercase;
  color:var(--bone); text-decoration:none; white-space:nowrap;
}
.nav__mark b{ color:var(--gold); font-weight:400; }
.nav__links{ display:flex; gap:clamp(12px,1.8vw,30px); align-items:center; list-style:none; margin:0; padding:0; }
.nav__links a{
  font-family:"Archivo", system-ui, sans-serif;
  font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--bone-soft); position:relative; padding-block:5px;
  white-space:nowrap;   /* "The afternoon" mag nie oor twee reels breek nie */
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ transform:scaleX(1); }
/* Die nav dun uit van links af, sodat die omskakel-skakels laaste sneuwel. */
@media (max-width:1240px){ .nav__links li:nth-child(-n+2){ display:none; } }
@media (max-width:860px){ .nav__links li:nth-child(-n+4){ display:none; } }
@media (max-width:460px){ .nav__links{ display:none; } }

/* ------------------------------------------------- hamburger op klein skerms
   Onder 900px verdwyn die inlyn-skakels heeltemal en 'n knoppie vou hulle oop.
   Die paneel word deur event.js gebou uit dieselfde <ul>, sodat elke bladsy
   outomaties sy eie skakels kry. */
.nav__burger{
  display:none; position:relative; z-index:2;
  width:42px; height:42px; padding:0; flex:none;
  flex-direction:column; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line); border-radius:9px;
  color:var(--bone); cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.nav__burger:hover{ border-color:var(--gold); color:var(--gold); }
.nav__burger span{
  display:block; width:17px; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .32s var(--ease-out), opacity .2s linear;
}
.nav__burger span + span{ margin-top:4.5px; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav__sheet{
  position:fixed; inset:0 0 auto 0; z-index:55;
  padding:86px var(--gut) 26px;
  background:var(--ink); border-bottom:1px solid var(--line);
  transform:translateY(-101%); visibility:hidden;
  transition:transform .42s var(--ease-out), visibility 0s linear .42s;
  max-height:100dvh; overflow-y:auto;
}
.nav__sheet.is-open{ transform:none; visibility:visible; transition-delay:0s; }
.nav__sheet ul{ list-style:none; margin:0; padding:0; }
.nav__sheet li + li{ border-top:1px solid var(--line-soft); }
.nav__sheet a{
  display:block; padding:15px 2px; text-decoration:none; color:var(--bone);
  font-family:"Archivo", system-ui, sans-serif; font-size:14px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
}
.nav__sheet a:hover, .nav__sheet a:focus-visible{ color:var(--gold); }
.nav__scrim{
  position:fixed; inset:0; z-index:54; background:rgba(8,9,12,.55);
  opacity:0; visibility:hidden; transition:opacity .42s var(--ease), visibility 0s linear .42s;
}
.nav__scrim.is-open{ opacity:1; visibility:visible; transition-delay:0s; }
body.nav-open{ overflow:hidden; }
/* Terwyl die paneel oop is kry die balk 'n vaste agtergrond, anders swem die
   werfnaam bo-oor die skakels. */
body.nav-open .nav{
  background:var(--ink);
  border-bottom-color:var(--line);
}
/* Bo-oor die donker held kry die balk ligte teks. Sodra die paneel oop is,
   staan die balk op papier, so ons gee die gewone bladsykleure terug. */
[data-theme="light"] body.nav-open .nav:not(.is-stuck){
  --bone:      #191A1E;
  --bone-soft: #43464D;
  --ash:       #6B675E;
  --gold:      #8A6A12;
  --line:      rgba(138,106,18,.30);
}

@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__burger{ display:inline-flex; }
}
@media (min-width:901px){
  .nav__sheet, .nav__scrim{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .nav__sheet, .nav__scrim, .nav__burger span{ transition-duration:.01ms; }
}

/* Op 'n foon het die lang werfnaam die taalwisselaar en die temaknoppie van die
   skerm af gestoot. Die naam mag nou krimp; die knoppies bly staan. */
@media (max-width:620px){
  .nav__mark{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
              font-size:11px; letter-spacing:.18em; }
  .nav__right{ flex:0 0 auto; }
  .nav{ gap:12px; }
}

/* ---- taalwisselaar ---- */
.nav__right{ display:flex; align-items:center; gap:clamp(12px,2vw,28px); }
.lang{
  display:flex; align-items:center; gap:7px;
  font-family:"Archivo", system-ui, sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.lang a{
  color:var(--ash); text-decoration:none; padding:3px 1px;
  transition:color .35s var(--ease);
}
.lang a:hover{ color:var(--bone); }
.lang a[aria-current="page"]{ color:var(--gold); }
.lang i{ font-style:normal; color:rgba(242,237,227,.22); }

/* -------------------------------------------------------------- knoppies */

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 24px; border-radius:9px;
  border:1px solid var(--gold); background:var(--gold); color:var(--ink);
  font-family:"Archivo", system-ui, sans-serif;
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:transform .45s var(--ease-out), background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 42px -16px rgba(201,162,39,.7); }
.btn--ghost{
  background:transparent; color:var(--bone); border-color:var(--line);
}
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-lt); box-shadow:none; }
.btn--sm{ padding:9px 18px; font-size:10.5px; border-radius:7px; }
.btn__arrow{ transition:transform .45s var(--ease-out); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

/* ------------------------------------------------------------------ held */

.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  padding-bottom:clamp(30px, 5vh, 68px);
  padding-top:clamp(86px, 12vh, 122px);
}
/* Op 'n hoe, smal skerm laat 'n vol-skerm held met onder-belynde inhoud 'n groot
   leë veld bo. Daar laat ons hom eerder om sy eie inhoud krimp en sentreer. */
@media (max-width:900px), (max-aspect-ratio: 1/1){
  .hero{
    min-height:auto;
    justify-content:center;
    padding-top:clamp(126px, 19vh, 172px);
    padding-bottom:clamp(48px, 8vh, 84px);
  }
}
/* Tipografiese held. Die twee portrette is nooit saam geskiet nie: verskillende
   lig, verskillende agtergrond, en 'n harde naat tussen hulle. Onder genoeg
   sluier om die teks leesbaar te hou, was albei net modder. 'n Gegraveerde
   uitnodiging dra in elk geval nie 'n foto nie. */
.hero__ground{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:radial-gradient(130% 90% at 50% -10%, #191720 0%, #0D0C12 46%, #08090C 100%);
  background-size:cover; background-position:center;
}

/* Karoo-sterre. Die doek is die tussentydse weergawe; sodra 'n regte foto in
   images/karoo-stars.jpg le, sit 'hero--photo' op die <section> en die foto
   neem oor. Die goue veeg bly in albei gevalle. */
.hero__stars{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }

.hero--photo .hero__ground{ background-image:url("images/karoo-stars.jpg"); }
.hero--photo .hero__stars{ display:none; }
.hero--photo .hero__ground::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, #08090C 2%, rgba(8,9,12,.86) 34%, rgba(8,9,12,.55) 100%),
    radial-gradient(90% 70% at 40% 55%, rgba(8,9,12,0) 0%, rgba(8,9,12,.6) 100%);
}

/* Die goue veeg: 'n stadige lig wat oor die nag trek. */
.hero::before{
  content:""; position:absolute; inset:-20%; z-index:2; pointer-events:none;
  background:linear-gradient(102deg, transparent 34%, rgba(201,162,39,.12) 50%, transparent 66%);
  animation:heroSweep 17s ease-in-out infinite alternate;
}
@keyframes heroSweep{
  from{ transform:translateX(-26%); }
  to{ transform:translateX(26%); }
}
.hero__rule{
  position:absolute; left:0; right:0; bottom:0; height:1px; z-index:3;
  background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}

.hero__stage{ position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; z-index:0; }
.hero__half{ position:relative; overflow:hidden; }
.hero__half img{
  width:100%; height:100%; object-fit:cover;
  will-change:transform;
}
.hero__half--l img{ object-position:62% 30%; }
.hero__half--r img{ object-position:44% 34%; }
/* Drie lae: 'n basissluier, 'n vertikale verloop, en 'n vinjet - sodat die
   titel op enige deel van die foto leesbaar bly. */
.hero__stage::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--ink) 3%, rgba(8,9,12,.9) 30%, rgba(8,9,12,.62) 66%, rgba(8,9,12,.8) 100%),
    radial-gradient(78% 62% at 46% 46%, rgba(8,9,12,.1) 0%, rgba(8,9,12,.72) 100%),
    linear-gradient(rgba(8,9,12,.42), rgba(8,9,12,.42));
}
.hero__seam{
  position:absolute; top:0; bottom:0; left:50%; width:1px; z-index:1;
  background:linear-gradient(to bottom, transparent, var(--line) 25%, var(--line) 75%, transparent);
}
@media (max-width:760px){
  .hero__stage{ grid-template-columns:1fr; }
  .hero__half--r{ display:none; }
  .hero__seam{ display:none; }
}

.hero__inner{ position:relative; z-index:5; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

.hero__meta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:clamp(16px,2.6vh,30px);
}
.hero__meta .rule{ height:1px; width:clamp(30px,7vw,110px); background:linear-gradient(90deg,var(--gold),transparent); }

.hero__title{ margin:0; }
.hero__title .ln{ display:block; overflow:hidden; padding-bottom:.05em; }
.hero__title .ln > span{ display:block; transform:translateY(108%); transition:transform 1.2s var(--ease-out); }
.hero__title .ln:nth-child(2) > span{ transition-delay:.09s; }
.hero__title .ln:nth-child(3) > span{ transition-delay:.18s; }
.is-ready .hero__title .ln > span{ transform:translateY(0); }
/* Die kruis kry sy eie reël, maar mag nie 'n vol reëlhoogte opvreet nie. */
.hero__title .ln--x{ line-height:.66; padding-bottom:0; }
.hero__title .x{
  font-size:.34em; color:var(--gold); font-style:normal;
  font-family:"Spectral", Georgia, serif; letter-spacing:.1em;
}

.hero__foot{
  margin-top:clamp(22px,4vh,44px);
  display:flex; flex-wrap:wrap; gap:26px 40px; align-items:flex-end; justify-content:space-between;
  opacity:0; transform:translateY(20px);
  transition:opacity 1s var(--ease) .5s, transform 1s var(--ease-out) .5s;
}
.is-ready .hero__foot{ opacity:1; transform:none; }
.hero__when{ margin:0; font-size:clamp(17px,1.4vw,21px); color:var(--bone); }
.hero__when b{ font-weight:400; font-family:"Fraunces",Georgia,serif; letter-spacing:.04em; }
/* Se in een reel wat die middag is, voor die aftelling. */
.hero__what{
  margin:14px 0 0; max-width:46ch;
  font-size:clamp(16px,1.15vw,18.5px); line-height:1.55; color:var(--bone-soft);
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* ------------------------------------------------------------ aftelling */

.count{
  display:flex; gap:clamp(16px,2.4vw,38px); flex-wrap:wrap;
  margin-top:clamp(20px,3vh,34px);
}
.count__cell{ display:flex; flex-direction:column; gap:6px; min-width:62px; }
.count__n{
  font-family:"Fraunces", Georgia, serif;
  font-size:clamp(26px,3vw,40px); line-height:1; color:var(--gold-lt);
  font-variant-numeric:tabular-nums;
}
.count__l{
  font-family:"Archivo", system-ui, sans-serif;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ash);
}

/* ------------------------------------------------------------- onthulling */

.rv{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1.1s var(--ease-out); }
.rv.is-in{ opacity:1; transform:none; }
.rv[data-d="1"]{ transition-delay:.09s; }
.rv[data-d="2"]{ transition-delay:.18s; }
.rv[data-d="3"]{ transition-delay:.27s; }

/* ------------------------------------------------------------- programme */

.bill{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1px; background:var(--line-soft); border-block:1px solid var(--line-soft);
  margin-top:clamp(34px,5vh,56px);
}
@media (max-width:700px){ .bill{ grid-template-columns:1fr; } }
.bill__item{
  background:var(--ink); padding:clamp(24px,3vw,40px);
  display:flex; flex-direction:column; gap:10px;
}
.bill__t{
  font-family:"Fraunces", Georgia, serif; font-size:clamp(30px,3.4vw,46px);
  color:var(--gold); line-height:1; font-variant-numeric:tabular-nums;
}
.bill__k{
  font-family:"Archivo", system-ui, sans-serif; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ash);
}
/* Die rangorde-etiket ("Hoofvertoning", "Spesiale aanbieding") lig op in goud
   sodat 'n mens die program se vorm sien sonder om te lees. */
.bill__k b{ color:var(--gold); font-weight:600; }
.bill__d{ margin:0; color:var(--bone-soft); font-size:16.5px; }

/* ------------------------------------------------------------------- akte */

.act{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px); align-items:center;
}
@media (max-width:880px){ .act{ grid-template-columns:1fr; } }
.act--flip .act__media{ order:2; }
@media (max-width:880px){ .act--flip .act__media{ order:0; } }

/* Die teks is baie langer as die portret, en 'n gesentreerde beeld het 'n gat bo
   en onder gelos. Die beeld bly nou langs die teks staan terwyl jy lees. */
@media (min-width:881px) and (min-height:760px){
  .act{ align-items:start; }
  .act__media{ position:sticky; top:92px; }
}

.frame{
  position:relative; overflow:hidden;
  border:1px solid var(--line-soft);
  aspect-ratio:4 / 5;
}
.frame img{ width:100%; height:112%; object-fit:cover; will-change:transform; }
/* Fotokrediet onder 'n raam, nie oor die beeld nie. */
.credit{
  margin-top:12px;
  font-family:"Archivo", system-ui, sans-serif;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ash); line-height:1.7;
}

.frame--wide{ aspect-ratio:16 / 10; }
.frame--tall{ aspect-ratio:3 / 4; }
.frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,9,12,.55), rgba(8,9,12,0) 55%);
  pointer-events:none;
}

/* Vir 'n beeld wat bewys lewer: wys dit heel, moenie dit sny vir beweging nie.
   Moet NA '.frame::after' staan, anders wen die verloop weer oor die merkie. */
.frame--proof{ aspect-ratio:auto; }
.frame--proof img{ height:auto; }

/* Die Grammy kry dieselfde hoë raam as die ander portrette, maar sonder die
   parallaks-oorskiet: die gegraveerde plaat is die bewys en mag nie afsny nie. */
.frame--tall.frame--proof{ aspect-ratio:3 / 4; }
.frame--tall.frame--proof img{ height:100%; object-fit:cover; object-position:center bottom; }
.frame--proof::after{ display:none; }

.act__credit{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line-soft);
  font-family:"Archivo", system-ui, sans-serif; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ash); line-height:1.8;
}

.stat-row{ display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,44px); margin:28px 0 0; }
.stat-row div{ display:flex; flex-direction:column; gap:4px; }
.stat-row b{
  font-family:"Fraunces",Georgia,serif; font-weight:400;
  font-size:clamp(24px,2.4vw,34px); color:var(--gold-lt); font-variant-numeric:tabular-nums;
}
.stat-row span{
  font-family:"Archivo",system-ui,sans-serif; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ash);
}

/* ------------------------------------------------------------ breë band */

.band{ position:relative; overflow:hidden; background:var(--ink-2); }
.band__img{ position:absolute; inset:0; }
.band__img img{ width:100%; height:116%; object-fit:cover; object-position:70% 50%; will-change:transform; }
.band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,9,12,.95) 0%, rgba(8,9,12,.86) 38%, rgba(8,9,12,.25) 68%, rgba(8,9,12,.1) 100%);
}
@media (max-width:760px){
  .band::after{ background:linear-gradient(to top, rgba(8,9,12,.96) 34%, rgba(8,9,12,.6)); }
}
.band__inner{ position:relative; z-index:2; }

/* --------------------------------------------------------------- kookboek */

.book{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,72px); align-items:center;
}
@media (max-width:880px){ .book{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------- stemme */
/* 'n Rail wat sywaarts rol. Werk met twee kaarte en werk met agt. Gewone
   oorloop, geen rol-kaping nie, sodat 'n muis, 'n vinger en 'n sleutelbord
   almal werk. */

.voices{
  display:flex; gap:clamp(16px,2vw,26px);
  margin-top:clamp(34px,5vh,54px);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-bottom:18px;
  scrollbar-width:thin;
}
.voice{
  flex:0 0 min(430px, 82vw);
  scroll-snap-align:start;
  border:1px solid var(--line-soft);
  background:var(--ink-2);
  padding:clamp(24px,2.6vw,34px);
  display:flex; flex-direction:column; gap:16px;
}
.voice blockquote{
  margin:0; font-size:clamp(17px,1.35vw,20px); line-height:1.6;
  color:var(--bone); font-style:italic;
}
.voice__who{
  margin:auto 0 0; padding-top:14px; border-top:1px solid var(--line-soft);
  font-family:"Archivo",system-ui,sans-serif;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  line-height:1.7;
}
.voice__who span{ display:block; color:var(--ash); }

/* ------------------------------------------------------------- aanhaling */

.pull{ text-align:center; }
.pull blockquote{
  margin:0 auto; max-width:22ch;
  font-family:"Fraunces", Georgia, serif;
  font-size:clamp(26px,4vw,54px); line-height:1.16; color:var(--bone);
}
.pull figcaption{
  margin-top:26px; font-family:"Archivo",system-ui,sans-serif;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}
.pull__mark{ display:block; font-family:"Fraunces",Georgia,serif; font-size:clamp(56px,7vw,104px); line-height:.55; color:var(--gold); margin-bottom:.16em; }

/* ------------------------------------------------------------------ saak */

.cause{ background:var(--ink-2); border-block:1px solid var(--line-soft); }

/* Een ritme vir die hele blok: 18 binne 'n paar, 30 tussen verwante dele,
   en 'n groter sprong tussen groepe. Voorheen was dit ses los gapings. */
.cause__logo{ width:min(272px, 58vw); height:auto; margin-bottom:38px; }
.cause h2{ margin-top:18px; }
.cause .prose{ margin-top:30px; }
.cause__last{ margin-top:34px; }

/* Die doel-blok het te veel wit regs oorgehad. Die inleiding bly 'n standfirst,
   die lyfteks loop in twee kolomme sodra daar plek is. */
.prose__cols{ display:grid; gap:clamp(20px,2.4vw,40px); }
.prose__cols p{ margin:0 0 1.1em; }
.prose__cols p:last-child{ margin-bottom:0; }
@media (min-width:900px){
  .cause .prose{ max-width:none; }
  .cause .prose > .lead{ max-width:46ch; }
  .prose__cols{ grid-template-columns:1fr 1fr; column-gap:clamp(34px,4.5vw,74px); }
  .prose__cols p{ max-width:52ch; }
}

.cause__chain{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  margin-top:clamp(38px,5vh,52px);
  font-family:"Archivo",system-ui,sans-serif; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone-soft);
}
.cause__chain i{ font-style:normal; color:var(--gold); }
.cause__seed{
  margin-top:34px;
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(22px,2.6vw,36px); color:var(--gold-lt); line-height:1.2;
}

/* --------------------------------------------------------------- kaartjies */

.tiers{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(20px,2.4vw,34px); margin-top:clamp(38px,5vh,62px);
}
@media (max-width:1080px){ .tiers{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:820px){ .tiers{ grid-template-columns:1fr; } }

.tier{
  border:1px solid var(--line-soft); background:var(--ink-2);
  padding:clamp(28px,3.2vw,46px);
  display:flex; flex-direction:column; gap:18px;
  position:relative;
}
.tier--feature{ border-color:var(--gold); background:linear-gradient(165deg, #14131A, var(--ink-2) 60%); }
.tier__flag{
  position:absolute; top:0; right:clamp(20px,3vw,40px); transform:translateY(-50%);
  background:var(--gold); color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif; font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; padding:6px 14px;
}
.tier__price{
  font-family:"Fraunces",Georgia,serif; font-size:clamp(44px,5.4vw,74px);
  line-height:1; color:var(--bone); font-variant-numeric:tabular-nums;
}
.tier--feature .tier__price{ color:var(--gold-lt); }
.tier__per{
  font-family:"Archivo",system-ui,sans-serif; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ash); display:block; margin-top:10px;
}
.tier ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.tier li{ position:relative; padding-left:22px; color:var(--bone-soft); font-size:16.5px; line-height:1.55; }
.tier li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:1px; background:var(--gold);
}
.tier__seats{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line-soft);
  font-family:"Archivo",system-ui,sans-serif; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ash);
}

/* ------------------------------------------------ byvoeging: die kookboek */
/* Doelbewus nie soos 'n derde kaartjievlak nie. Dit is 'n byvoeging by 'n
   bestelling, en dit word deur Harry se span hanteer, nie deur die loket nie. */

.addon{
  margin-top:clamp(20px, 2.4vw, 34px);
  border:1px solid var(--line);
  background:var(--ink-2);
  display:grid;
  grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  gap:clamp(20px, 3vw, 44px);
  align-items:center;
  padding:clamp(22px, 2.6vw, 38px);
}
@media (max-width:760px){
  .addon{ grid-template-columns:1fr; }
  .addon__img{ max-width:220px; }
}
.addon__img{
  margin:0; overflow:hidden; border:1px solid var(--line-soft); border-radius:6px; line-height:0;
}
.addon__img img{ width:100%; height:auto; }

.addon__tick{
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Archivo", system-ui, sans-serif;
  font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
}
.addon__tick::before{
  content:"\2713";              /* 'n regte merkie, nie 'n kruis nie */
  width:16px; height:16px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--gold); border-radius:3px;
  font-family:system-ui, sans-serif; font-size:11px; line-height:1;
}
.addon h3{ margin:12px 0 0; }
.addon p{ margin:12px 0 0; color:var(--bone-soft); font-size:16.5px; }
.addon__price{
  font-family:"Fraunces", Georgia, serif;
  font-size:clamp(26px, 2.6vw, 36px); color:var(--gold-lt); line-height:1;
  font-variant-numeric:tabular-nums;
}

.addon__ways{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap:12px; margin-top:20px;
}
.addon__way{
  border:1px solid var(--line-soft); padding:14px 16px; border-radius:6px;
  background:var(--ink);
}
.addon__way b{
  display:block; font-family:"Archivo", system-ui, sans-serif;
  font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone); margin-bottom:6px;
}
.addon__way span{ color:var(--ash); font-size:15px; line-height:1.5; }

/* 'n Voetnoot, nie 'n aankondiging nie: sinskrif en klein. */
.addon__note{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:15px; color:var(--ash); line-height:1.6;
}

/* ------------------------------------------------------------- bespreking */

.book-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,260px),1fr));
  gap:clamp(24px,3vw,44px); margin-top:clamp(36px,5vh,56px);
}
.book-card{ border-top:1px solid var(--gold); padding-top:22px; display:flex; flex-direction:column; gap:12px; }
.book-card h3{ font-size:clamp(20px,1.9vw,26px); }
.book-card p{ margin:0; color:var(--ash); font-size:16px; }
.book-card a.link{
  color:var(--bone); text-decoration:none;
  border-bottom:1px solid var(--line); align-self:flex-start;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.book-card a.link:hover{ color:var(--gold-lt); border-bottom-color:var(--gold); }

.eft{
  margin-top:clamp(38px,5vh,60px); border:1px solid var(--line);
  padding:clamp(24px,3vw,38px); background:var(--ink-2);
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px 32px;
}
@media (max-width:860px){ .eft{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:480px){ .eft{ grid-template-columns:1fr; } }
.eft dt{
  font-family:"Archivo",system-ui,sans-serif; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ash); margin-bottom:7px;
}
.eft dd{ margin:0; font-size:16.5px; color:var(--bone); font-variant-numeric:tabular-nums; letter-spacing:.01em; }

/* ------------------------------------------------------------- kleefbalk */

.bar{
  position:fixed; left:0; right:0; bottom:0; z-index:65;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px var(--gut);
  background:rgba(8,9,12,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(105%);
  transition:transform .6s var(--ease-out);
}
.bar.is-up{ transform:translateY(0); }
.bar__txt{
  font-family:"Archivo",system-ui,sans-serif; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone-soft);
  line-height:1.5;
}
.bar__txt b{ color:var(--gold); font-weight:600; }
@media (max-width:620px){
  .bar{ justify-content:center; }
  .bar__txt{ display:none; }
}

/* ==========================================================================
   Borgbladsy (sponsor.html / borg.html)
   ========================================================================== */

.subhead{
  position:relative; overflow:hidden;
  padding-top:clamp(126px, 18vh, 184px);
  padding-bottom:clamp(52px, 8vh, 104px);
}
.subhead__img{ position:absolute; inset:0; }
.subhead__img img{ width:100%; height:114%; object-fit:cover; object-position:50% 40%; will-change:transform; }
.subhead::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--ink) 5%, rgba(8,9,12,.92) 42%, rgba(8,9,12,.8) 100%),
    linear-gradient(rgba(8,9,12,.3), rgba(8,9,12,.3));
}
.subhead__inner{ position:relative; z-index:2; }

/* ---- die drie maniere ---- */

.opts{
  display:flex; flex-direction:column; gap:1px;
  background:var(--line-soft); border-block:1px solid var(--line-soft);
  margin-top:clamp(40px, 6vh, 70px);
}
.opt{
  background:var(--ink);
  padding:clamp(28px, 3.4vw, 52px);
  display:grid;
  grid-template-columns:auto minmax(0,1.15fr) minmax(0,.95fr);
  gap:clamp(18px, 3vw, 48px);
  align-items:start;
}
@media (max-width:940px){
  .opt{ grid-template-columns:auto minmax(0,1fr); }
  .opt__side{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .opt{ grid-template-columns:1fr; }
}
.opt__n{
  font-family:"Fraunces", Georgia, serif;
  font-size:clamp(28px, 3.2vw, 46px); line-height:.95;
  color:var(--gold); font-variant-numeric:tabular-nums;
}
.opt__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 16px; }
.opt__price{
  font-family:"Archivo", system-ui, sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); background:var(--gold); padding:5px 12px; white-space:nowrap;
}
.opt p{ margin:14px 0 0; color:var(--bone-soft); }
.opt__for{
  margin-top:16px;
  font-family:"Archivo", system-ui, sans-serif;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ash);
}

.receive{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.receive li{ position:relative; padding-left:20px; font-size:16px; line-height:1.55; color:var(--bone-soft); }
.receive li::before{ content:"\203A"; position:absolute; left:0; top:-.05em; color:var(--gold); font-size:1.15em; }
.receive__t{
  font-family:"Archivo", system-ui, sans-serif;
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin:0;
}
.receive__t + .receive{ margin-top:12px; }

/* 'n Moontlikheid, nie 'n belofte nie. Hou dit uit die "Jy kry"-lys uit. */
.opt__maybe{
  margin-top:20px; padding-top:14px; border-top:1px dashed var(--line-soft);
  font-size:15px; line-height:1.6; color:var(--ash);
}
.opt__side .receive__t:not(:first-child){ margin-top:24px; }

/* ---- die bewys: dit het al voorheen gewerk ---- */

.encore{
  margin-top:clamp(38px,5vh,54px);
  border:1px solid var(--line);
  border-left-width:3px;
  background:var(--ink);
  padding:clamp(24px,3vw,38px);
}
.encore p{ margin:0; color:var(--bone-soft); max-width:66ch; }
.encore p + p{ margin-top:1em; }
.encore strong{ color:var(--bone); font-weight:400; }
.encore__img{
  margin:0 0 clamp(20px,2.6vw,30px);
  overflow:hidden; border:1px solid var(--line-soft); border-radius:6px; line-height:0;
}
/* Beeldband, nie 'n plakkaat nie: die paneel se woorde moet die werk doen. */
.encore__img img{
  width:100%; height:clamp(200px, 34vh, 400px);
  object-fit:cover; object-position:50% 38%;
}
.encore__img figcaption{
  line-height:1.6; padding:12px 16px;
  background:var(--ink-2); border-top:1px solid var(--line-soft);
  font-family:"Archivo",system-ui,sans-serif;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ash);
}
.encore__hit{
  display:block;
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(20px,2.2vw,30px); line-height:1.25;
  color:var(--gold-lt); margin-bottom:16px;
}

/* Die tweede beat in dieselfde paneel: die storie agter die storie. */
.encore__sub{
  display:block;
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(17px,1.6vw,21px); line-height:1.3;
  color:var(--gold-lt); margin:clamp(26px,3vw,34px) 0 14px;
  padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--line-soft);
}

/* ---- die AGT-paneel se twee kolomme: woorde links, die opname regs ---- */

.encore__cols{ display:grid; gap:clamp(22px,3vw,34px); }
@media (min-width:980px){
  .encore__cols{ grid-template-columns:minmax(0,1fr) 300px; align-items:start; }
}
.encore__cols .encore__hit{ margin-top:0; }

/* Die kyk-kaart. 'n Knoppie, nie 'n skakel nie: dit maak die venster oop
   sonder om die besoeker van die bladsy af weg te vat. */
.vid{
  display:block; width:100%; padding:0; text-align:left; cursor:pointer;
  background:var(--ink-2); color:inherit;
  border:1px solid var(--line-soft); border-radius:6px; overflow:hidden;
  font:inherit; transition:border-color .25s ease, transform .25s ease;
}
.vid:hover, .vid:focus-visible{ border-color:var(--gold); }
.vid:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
@media (hover:hover){ .vid:hover{ transform:translateY(-2px); } }
@media (prefers-reduced-motion:reduce){ .vid{ transition:none } .vid:hover{ transform:none } }

.vid__thumb{ display:block; position:relative; aspect-ratio:16/9; background:#000; line-height:0; }
.vid__thumb img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.82;
                 transition:opacity .25s ease; }
.vid:hover .vid__thumb img, .vid:focus-visible .vid__thumb img{ opacity:1; }
.vid__play{
  position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(12,12,11,.62); border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(2px);
}
.vid__play::before{
  content:""; width:0; height:0; margin-left:4px;
  border-left:15px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent;
}
.vid__meta{ display:block; padding:13px 15px 15px; }
.vid__label{
  display:block; font-family:"Archivo",system-ui,sans-serif; font-size:14px;
  color:var(--bone); line-height:1.35;
}
.vid__sub{
  display:block; margin-top:5px; font-family:"Archivo",system-ui,sans-serif;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ash);
}

/* ---- die venster self ---- */

.vlb{
  position:fixed; inset:0; z-index:120; display:flex; align-items:center;
  justify-content:center; padding:clamp(16px,4vw,44px);
  background:rgba(10,10,9,.9); opacity:0; transition:opacity .2s ease;
}
.vlb.is-open{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .vlb{ transition:none } }
.vlb__box{ width:min(960px,100%); }
.vlb__frame{
  position:relative; aspect-ratio:16/9; background:#000;
  border:1px solid var(--line); border-radius:6px; overflow:hidden;
}
.vlb__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vlb__bar{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-top:12px; font-family:"Archivo",system-ui,sans-serif;
}
.vlb__cap{ font-size:13px; color:var(--bone-soft); }
.vlb__x{
  flex:none; background:none; border:1px solid var(--line); color:var(--bone);
  border-radius:4px; padding:7px 13px; cursor:pointer; font:inherit; font-size:13px;
  transition:border-color .2s ease, color .2s ease;
}
.vlb__x:hover{ border-color:var(--gold); color:var(--gold-lt); }
.vlb__x:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
body.vlb-open{ overflow:hidden; }

/* ---- die vra / belastingnota ---- */

.note{
  margin-top:clamp(38px, 5vh, 62px);
  border:1px solid var(--line); background:var(--ink-2);
  padding:clamp(24px, 3vw, 40px);
}
.note h3{ font-size:clamp(20px, 1.9vw, 26px); }
.note p{ margin:14px 0 0; color:var(--bone-soft); max-width:70ch; }

/* ---- slot-oproep ---- */

.cta-band{ background:var(--ink-2); border-block:1px solid var(--line-soft); text-align:center; }
.cta-band .btn{ margin-top:8px; }
.cta-band__links{
  display:flex; flex-wrap:wrap; gap:12px 30px; justify-content:center;
  margin-top:clamp(24px,3vh,36px);
  font-family:"Archivo", system-ui, sans-serif;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}
.cta-band__links a{
  color:var(--bone-soft); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:2px;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.cta-band__links a:hover{ color:var(--gold-lt); border-bottom-color:var(--gold); }

/* ==========================================================================
   Houbladsy (index.html) - een bladsy, albei tale, geen versinde feite.
   ========================================================================== */

.holding{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(54px, 9vh, 104px);
}
.holding__logo{ width:min(340px, 70vw); height:auto; margin-bottom:clamp(26px, 4vh, 44px); }
.holding__name{ margin:0; }
.holding__cols{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap:clamp(28px, 4vw, 64px);
  margin-top:clamp(30px, 4vh, 48px);
}
.holding__cols h2{
  font-family:"Archivo", system-ui, sans-serif;
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin:0 0 12px;
}
.holding__cols p{ margin:0; color:var(--bone-soft); }

.holding__next{
  margin-top:clamp(44px, 6vh, 72px);
  padding-top:clamp(30px, 4vh, 44px);
  border-top:1px solid var(--line);
}
.holding__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(20px, 3vh, 30px); }

.holding__foot{
  margin-top:clamp(40px, 6vh, 66px);
  padding-top:22px;
  border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:10px 28px;
  font-family:"Archivo", system-ui, sans-serif;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ash);
}
.holding__foot a{ color:var(--bone-soft); text-decoration:none; border-bottom:1px solid var(--line); }
.holding__foot a:hover{ color:var(--gold); border-bottom-color:var(--gold); }

/* ---- die amptelike plakkaat ---- */

.poster{
  margin:0;
  border:1px solid var(--line-soft);
  border-radius:10px;
  overflow:hidden;
  line-height:0;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9);
}
.poster img{ width:100%; height:auto; }
.poster__share{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin:clamp(18px,2.5vh,26px) 0 0;
}
.poster__share .btn{ cursor:pointer; }

.poster figcaption{
  line-height:1.6;
  padding:14px 18px;
  background:var(--ink-2);
  border-top:1px solid var(--line-soft);
  font-family:"Archivo", system-ui, sans-serif;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ash);
}

/* ---- lokval op die geleentheidsblad ---- */

.teaser{
  background:var(--ink-2); border-block:1px solid var(--line-soft);
  padding-block:clamp(44px, 6vh, 76px);
}
.teaser__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:22px 40px;
}
.teaser h2{ font-size:clamp(24px, 2.6vw, 38px); max-width:22ch; }
.teaser p{ margin:12px 0 0; color:var(--ash); max-width:52ch; }

/* ==========================================================================
   WAARHEEN GAAN DIE GELD  ·  impact.html / impak.html
   Groen balke. Die groen is spekboom, nie 'n skerp fondsinsamelingsgroen nie,
   sodat dit langs die goud kan sit.
   ========================================================================== */

:root{
  --grow:    #6F9A55;
  --grow-lt: #8CBA6E;
  --track:   rgba(242,237,227,.10);
}
:root[data-theme="light"]{
  --grow:    #4E7A3A;
  --grow-lt: #3E6630;
  --track:   rgba(25,26,30,.10);
}

.goal{
  border-top:1px solid var(--line-soft);
  padding-block:clamp(22px,2.6vw,30px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:6px clamp(20px,3vw,44px);
  align-items:baseline;
}
.goal:last-of-type{ border-bottom:1px solid var(--line-soft); }
.goal__name{ font-family:"Fraunces",Georgia,serif; font-size:clamp(19px,1.9vw,25px); color:var(--bone); }
.goal__what{ grid-column:1; margin:0; color:var(--ash); font-size:16px; max-width:54ch; }
.goal__fig{
  grid-row:1; grid-column:2; text-align:right; white-space:nowrap;
  font-family:"Archivo",system-ui,sans-serif;
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ash);
  font-variant-numeric:tabular-nums;
}
.goal__fig b{ color:var(--grow-lt); font-weight:600; }

.goal__track{
  grid-column:1 / -1; margin-top:14px;
  height:8px; border-radius:99px; background:var(--track); overflow:hidden;
}
.goal__bar{
  display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--grow), var(--grow-lt));
  transition:width 1.4s var(--ease-out);
}

.goal__total{
  margin-top:clamp(34px,5vh,52px);
  border:1px solid var(--line); background:var(--ink-2);
  padding:clamp(24px,3vw,38px);
  display:flex; flex-wrap:wrap; gap:18px 40px; align-items:flex-end;
  justify-content:space-between;
}
.goal__total .big{
  font-family:"Fraunces",Georgia,serif; line-height:1;
  font-size:clamp(34px,4.6vw,58px); color:var(--grow-lt);
  font-variant-numeric:tabular-nums; display:block;
}
.goal__total span.lbl{
  display:block; margin-top:10px;
  font-family:"Archivo",system-ui,sans-serif; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ash);
}

/* ---- WhatsApp-knoppie ---- */

.wa{
  position:fixed; right:clamp(14px,2.4vw,26px); z-index:66;
  bottom:calc(clamp(14px,2.4vw,26px) + 62px);   /* bo die kleefbalk */
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 17px 11px 13px; border-radius:99px;
  background:#25D366; color:#06301A; text-decoration:none;
  font-family:"Archivo",system-ui,sans-serif;
  font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.6);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
.wa:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(37,211,102,.55); }
.wa svg{ width:19px; height:19px; flex:0 0 auto; }
@media (max-width:620px){
  .wa span{ display:none; }
  .wa{ padding:13px; }
}

/* --------------------------------------------------------------- voetskrif */

.footer{
  border-top:1px solid var(--line-soft); padding-block:34px;
  display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center; justify-content:space-between;
  font-family:"Archivo",system-ui,sans-serif; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ash);
}
.footer a{ text-decoration:none; }
.footer a:hover{ color:var(--gold-lt); }

body{ padding-bottom:0; }

/* ==========================================================================
   LIGTE TEMA  ·  data-theme="light" op <html>
   --------------------------------------------------------------------------
   Warm papier in plaas van obsidiaan. Die foto-panele bly donker eilande:
   hulle is beelde met 'n sluier oor, en dit werk op enige bladsykleur.
   ========================================================================== */

:root[data-theme="light"]{
  --ink:       #FBF9F5;   /* warm papier */
  --ink-2:     #F2EEE5;
  --ink-3:     #E9E3D6;
  --bone:      #191A1E;   /* ink-teks */
  --bone-soft: #43464D;
  --ash:       #6B675E;
  --gold:      #8A6A12;   /* donker genoeg om op papier te lees */
  --gold-lt:   #6E5410;
  --sea:       #245F7C;
  --line:      rgba(138,106,18,.30);
  --line-soft: rgba(25,26,30,.13);
}

/* ---- donker eilande: die tokens word plaaslik teruggedraai ---- */

[data-theme="light"] .hero,
[data-theme="light"] .band,
[data-theme="light"] .subhead{
  --bone:      #F2EDE3;
  --bone-soft: #C9C2B4;
  --ash:       #9A9488;
  --gold:      #C9A227;
  --gold-lt:   #E7C97A;
  --sea:       #6FBBD8;
  --line:      rgba(201,162,39,.24);
  --line-soft: rgba(242,237,227,.12);
  background:#08090C;
  color:#F2EDE3;
}
[data-theme="light"] .hero__stage::after,
[data-theme="light"] .subhead::after{
  background:
    linear-gradient(to top, #08090C 3%, rgba(8,9,12,.9) 34%, rgba(8,9,12,.62) 70%, rgba(8,9,12,.8) 100%),
    radial-gradient(78% 62% at 46% 46%, rgba(8,9,12,.1) 0%, rgba(8,9,12,.72) 100%),
    linear-gradient(rgba(8,9,12,.42), rgba(8,9,12,.42));
}
/* Die held loop in die wit bladsy in, nie in swart nie. */
[data-theme="light"] .hero{ border-bottom:1px solid var(--line-soft); }

/* ---- komponente met vasgeboude kleure ---- */

/* Voor jy rol, sweef die nav oor die donker foto-held: dan moet sy teks lig
   bly. Sodra hy vasklou teen die wit bladsy, draai hy om na ink. */
[data-theme="light"] .nav:not(.is-stuck){
  --bone:      #F2EDE3;
  --bone-soft: #D5CEC0;
  --ash:       #A9A296;
  --gold:      #E7C97A;
  --line:      rgba(231,201,122,.34);
}
[data-theme="light"] .nav.is-stuck{
  background:rgba(251,249,245,.88);
  border-bottom-color:var(--line);
}
[data-theme="light"] .bar{
  background:rgba(251,249,245,.94);
  border-top-color:var(--line);
}
[data-theme="light"] .btn{
  background:var(--gold); border-color:var(--gold); color:#FFFDF7;
}
[data-theme="light"] .btn:hover{ box-shadow:0 14px 34px -18px rgba(138,106,18,.75); }
[data-theme="light"] .btn--ghost{
  background:transparent; color:var(--bone); border-color:var(--line);
}
[data-theme="light"] .btn--ghost:hover{ color:var(--gold); border-color:var(--gold); }
[data-theme="light"] .hero .btn--ghost,
[data-theme="light"] .subhead .btn--ghost{ color:#F2EDE3; }
[data-theme="light"] .tier--feature{
  background:linear-gradient(165deg, #FFFDF8, var(--ink-2) 65%);
  border-color:var(--gold);
}
[data-theme="light"] .tier__flag,
[data-theme="light"] .opt__price{ color:#FFFDF7; }
[data-theme="light"] .poster{ box-shadow:0 26px 60px -34px rgba(25,26,30,.45); }
[data-theme="light"] .progress{
  background:linear-gradient(90deg, #D8BE72, var(--gold) 55%, #6E5410);
}
[data-theme="light"] ::selection{ background:var(--gold); color:#FFFDF7; }

/* ---- die wisselaar self ---- */

.theme-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0;
  border:1px solid var(--line); border-radius:8px;
  background:transparent; color:var(--ash);
  cursor:pointer; flex:0 0 auto;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.theme-btn:hover{ color:var(--gold); border-color:var(--gold); }
.theme-btn svg{ width:15px; height:15px; display:block; }
.theme-btn .sun{ display:none; }
[data-theme="light"] .theme-btn .sun{ display:block; }
[data-theme="light"] .theme-btn .moon{ display:none; }

/* ------------------------------------------------- navraagvorm  ·  enquiry form
   Slegs tokens word gebruik, sodat die ligte tema outomaties reg is.
   ---------------------------------------------------------------------------- */

.enq{ max-width:750px; margin:40px auto 0; text-align:left; }

.enq__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px 22px;
}
.enq__f{ margin:0; display:flex; flex-direction:column; gap:7px; min-width:0; }
.enq__f--wide{ grid-column:1 / -1; }

.enq__f label{
  font-family:"Archivo", system-ui, sans-serif;
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash);
}
.enq__req{ font-style:normal; color:var(--gold); }

.enq input,
.enq select,
.enq textarea{
  width:100%;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid var(--line-soft);
  background:var(--ink);
  color:var(--bone);
  font-family:"Spectral", Georgia, serif;
  font-size:16.5px;              /* 16px+ keer dat iOS inzoem by fokus */
  line-height:1.5;
  /* Net box-shadow: die randkleur moet onmiddellik wees sodat 'n ongeldige
     veld dadelik lees. Vir die temawissel self sorg .is-theming hieronder. */
  transition:box-shadow .3s var(--ease);
}
.enq textarea{ resize:vertical; min-height:104px; }

.enq input:focus,
.enq select:focus,
.enq textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,39,.16);
}
.enq [aria-invalid="true"]{ border-color:#C2554A; }

/* heuningpot: net vir bots, nooit vir 'n mens nie */
.enq__hp{
  position:absolute; left:-9999px;
  width:1px; height:1px; overflow:hidden;
}

.enq__act{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:14px 20px;
  margin:26px 0 0;
}
.enq__note{
  color:var(--ash); font-size:14px; line-height:1.5; max-width:36ch;
}

.enq__msg{ margin:18px 0 0; font-size:16.5px; line-height:1.6; color:var(--gold-lt); }
.enq__msg:empty{ display:none; }
.enq__msg--bad{ color:#D97B6C; }

.enq.is-sent .enq__grid,
.enq.is-sent .enq__act{ display:none; }

/* die direkte skakels bly staan, onder die vorm */
.cta-band__or{
  margin:30px 0 0;
  font-family:"Archivo", system-ui, sans-serif;
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash);
}

@media (max-width:640px){
  .enq__grid{ grid-template-columns:minmax(0,1fr); }
}

/* ------------------------------------------- temawissel sonder na-beeld
   Terwyl .is-theming op <html> is, word elke oorgang doodgemaak. Sonder dit
   bly 'n oorgang op kleur of randkleur wat uit 'n custom property kom by die
   OU waarde vassteek wanneer die tema wissel: dan bly beenwit teks op wit
   papier staan. Die klas is net een raam lank daar. */

html.is-theming *,
html.is-theming *::before,
html.is-theming *::after{
  transition:none !important;
}

/* ---------------------------------------------------------- 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;
  }
  .rv{ opacity:1; transform:none; }
  .hero__title .ln > span{ transform:none; }
  .hero__foot{ opacity:1; transform:none; }
  .frame img,.band__img img,.hero__half img{ transform:none !important; height:100%; }
}

/* ---------------------------------------------------- WhatsApp-deelknoppie --
   Heel laaste, want die ligte tema herskryf .btn later in die lêer en sou
   andersins die groen oorverf. */
.btn--wa,
[data-theme="light"] .btn--wa{ background:#25D366; border-color:#25D366; color:#04310f; }
.btn--wa:hover,
[data-theme="light"] .btn--wa:hover{ background:#1FBF59; border-color:#1FBF59; color:#04310f;
  box-shadow:0 14px 34px -18px rgba(37,211,102,.75); }
.btn--wa svg{ flex:none; }

/* ===========================================================================
   NUUS  ·  mediadekking
   Kaarte wat 'n venster oopmaak in plaas daarvan om die besoeker weg te vat.
   =========================================================================== */

.nw{ position:relative; }
.nw__lang{
  position:absolute; top:0; right:0;
  font-family:"Archivo",system-ui,sans-serif; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash); text-decoration:none;
  border:1px solid var(--line); border-radius:4px; padding:6px 11px;
}
.nw__lang:hover{ color:var(--gold); border-color:var(--gold); }
.nw__lead{ color:var(--bone-soft); max-width:62ch; line-height:1.7; margin:0 0 clamp(28px,4vh,44px); }
.nw__empty{
  color:var(--ash); border:1px dashed var(--line); border-radius:6px;
  padding:clamp(28px,5vw,48px); text-align:center; line-height:1.7;
}

.nw__grid{
  display:grid; gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.nwc{ display:flex; }
.nwc__hit{
  display:flex; flex-direction:column; width:100%; padding:0; text-align:left;
  cursor:pointer; font:inherit; color:inherit; background:var(--ink-2);
  border:1px solid var(--line-soft); border-radius:6px; overflow:hidden;
  transition:border-color .25s ease, transform .25s ease;
}
.nwc__hit:hover, .nwc__hit:focus-visible{ border-color:var(--gold); }
.nwc__hit:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
@media (hover:hover){ .nwc__hit:hover{ transform:translateY(-2px); } }
@media (prefers-reduced-motion:reduce){ .nwc__hit{ transition:none } .nwc__hit:hover{ transform:none } }

.nwc__img{ display:block; aspect-ratio:16/9; background:var(--ink); line-height:0; }
.nwc__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.nwc__body{ display:flex; flex-direction:column; gap:9px; padding:16px 17px 18px; flex:1; }
.nwc__meta{
  font-family:"Archivo",system-ui,sans-serif; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ash);
}
.nwc__head{
  font-family:"Fraunces",Georgia,serif; font-size:18px; line-height:1.3; color:var(--bone);
}
.nwc__more{
  margin-top:auto; font-family:"Archivo",system-ui,sans-serif; font-size:12.5px;
  color:var(--gold-lt);
}

/* ---- die venster se inhoud ---- */

.vlb__read{
  width:min(660px,100%); max-height:86vh; overflow-y:auto;
  background:var(--ink-2); border:1px solid var(--line); border-radius:6px;
  padding:clamp(24px,4vw,40px);
}
.nwd__img{ width:100%; border-radius:4px; margin-bottom:22px; display:block; }
.nwd__meta{
  font-family:"Archivo",system-ui,sans-serif; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ash); margin:0 0 12px;
}
.nwd__head{
  font-family:"Fraunces",Georgia,serif; font-size:clamp(21px,2.4vw,28px); line-height:1.25;
  color:var(--bone); margin:0 0 18px;
}
.nwd__sum{ color:var(--bone-soft); line-height:1.72; margin:0; }
.nwd__quote{
  margin:22px 0 0; padding:14px 0 14px 18px; border-left:2px solid var(--gold);
  color:var(--bone); font-family:"Fraunces",Georgia,serif; font-size:17px; line-height:1.55;
}
.nwd__quote cite{
  display:block; margin-top:9px; font-family:"Archivo",system-ui,sans-serif;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ash); font-style:normal;
}
.nwd__link{ margin:22px 0 0; }
.nwd__link a{ color:var(--gold-lt); font-size:14px; }
.nwd__cta{
  margin-top:clamp(24px,3vw,32px); padding-top:22px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px;
}
.nwd__ctasub{
  font-family:"Archivo",system-ui,sans-serif; font-size:12.5px; color:var(--ash);
}

/* Video binne 'n nuus-venster. */
.nwd__embed{
  position:relative; aspect-ratio:16/9; background:#000; margin-bottom:22px;
  border-radius:4px; overflow:hidden;
}
.nwd__embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Kaart-uitbreiding: prentjie, voorsmakie, en 'n duidelike pad terug. */
.nwc__play{
  position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(12,12,11,.6); border:1px solid rgba(255,255,255,.5);
}
.nwc__play::before{
  content:""; width:0; height:0; margin-left:4px;
  border-left:13px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent;
}
.nwc__img{ position:relative; }
.nwc__teaser{
  color:var(--bone-soft); font-size:14.5px; line-height:1.55;
}
.nw__back{
  margin-top:clamp(40px,6vh,64px); padding-top:clamp(26px,3vw,34px);
  border-top:1px solid var(--line-soft);
}

/* Bron-erkenning, heel onder in die venster. */
.nwd__src{
  margin-top:clamp(22px,3vw,28px); padding-top:16px; border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:5px;
}
.nwd__srclab{
  font-family:"Archivo",system-ui,sans-serif; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash);
}
.nwd__src a{ color:var(--gold-lt); font-size:14px; }
.nwd__ctasub{ display:flex; flex-direction:column; gap:4px; }
.nwd__ctasub .link{ font-size:13px; }

/* Fotobyskrif en krediet in die nuus-venster. */
.nwd__fig{ margin:0 0 22px; }
.nwd__fig figcaption{
  margin-top:9px; font-family:"Archivo",system-ui,sans-serif;
  font-size:12.5px; line-height:1.55; color:var(--ash);
}
.nwd__credit{ display:block; margin-top:3px; color:var(--ash); opacity:.85; }

/* ===========================================================================
   NUUS  ·  een berig se eie blad
   =========================================================================== */

.nwa__meta{
  font-family:"Archivo",system-ui,sans-serif; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin:0 0 12px;
}
.nwa__head{
  font-family:"Fraunces",Georgia,serif; font-weight:400;
  font-size:clamp(28px,4.2vw,44px); line-height:1.15; color:var(--bone);
  margin:0 0 clamp(24px,3vw,32px); letter-spacing:-.01em;
}
.nwa__fig{ margin:0 0 clamp(26px,3vw,34px); }
.nwa__fig img{ width:100%; display:block; border-radius:5px; }
.nwa__fig figcaption{
  margin-top:10px; font-family:"Archivo",system-ui,sans-serif;
  font-size:12.5px; line-height:1.55; color:var(--ash);
}
.nwa__credit{ display:block; margin-top:3px; opacity:.85; }

/* Die speler: 'n stilfoto tot iemand druk, dan eers laai die iframe. */
.nwa__player{
  position:relative; aspect-ratio:16/9; background:#000; overflow:hidden;
  border-radius:5px; margin:0 0 clamp(26px,3vw,34px);
}
.nwa__player img{ width:100%; height:100%; object-fit:cover; opacity:.8; display:block; }
.nwa__player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.nwa__playbtn{
  position:absolute; inset:0; width:100%; height:100%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:transparent; border:0; color:#fff; font:500 14px/1 Archivo,sans-serif;
  letter-spacing:.14em; text-transform:uppercase; text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.nwa__playbtn span{
  width:52px; height:52px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(12,12,11,.62); border:1px solid rgba(255,255,255,.55);
}
.nwa__playbtn span::before{
  content:""; width:0; height:0; margin-left:4px;
  border-left:15px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent;
}
.nwa__playbtn:hover span{ background:rgba(12,12,11,.8); }
.nwa__playbtn:focus-visible{ outline:2px solid var(--gold); outline-offset:-4px; }

.nwa__body{
  font-family:"Spectral",Georgia,serif; font-size:clamp(17px,1.5vw,19px);
  line-height:1.78; color:var(--bone-soft); max-width:62ch;
}
.nwa__quote{
  margin:clamp(26px,3vw,34px) 0 0; padding:16px 0 16px 22px;
  border-left:2px solid var(--gold); max-width:56ch;
  font-family:"Fraunces",Georgia,serif; font-size:clamp(18px,1.8vw,22px);
  line-height:1.5; color:var(--bone);
}
.nwa__quote cite{
  display:block; margin-top:11px; font-family:"Archivo",system-ui,sans-serif;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ash); font-style:normal;
}
.nwa__src{
  margin-top:clamp(30px,4vw,40px); padding-top:18px; border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:5px;
}
.nwa__srclab{
  font-family:"Archivo",system-ui,sans-serif; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash);
}
.nwa__src a{ color:var(--gold-lt); font-size:14.5px; }

.nwa__cta{
  margin-top:clamp(36px,5vw,52px); border:1px solid var(--line);
  border-left:3px solid var(--gold); background:var(--ink-2);
  padding:clamp(24px,3vw,34px);
}
.nwa__cta h2{
  font-family:"Fraunces",Georgia,serif; font-weight:400;
  font-size:clamp(21px,2.2vw,27px); color:var(--bone); margin:0 0 8px;
}
.nwa__cta p{ margin:0; color:var(--bone-soft); max-width:52ch; line-height:1.65; }
.nwa__btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px !important; }

.nwa__thanks{
  margin-top:clamp(30px,4vw,40px); padding-top:24px; border-top:1px solid var(--line-soft);
  text-align:center;
}
.nwa__thankslab{
  font-family:"Archivo",system-ui,sans-serif; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ash); margin:0 0 12px;
}
.nwa__names{
  font-family:"Fraunces",Georgia,serif; font-size:clamp(16px,1.6vw,19px);
  line-height:1.7; color:var(--bone); margin:0;
}
.nwa__names i{ color:var(--gold); font-style:normal; padding:0 6px; }
.nwa__thankssub{
  margin:10px 0 0; font-family:"Archivo",system-ui,sans-serif;
  font-size:12.5px; color:var(--ash);
}

/* Die kaart se voetjie: publikasie links, datum regs. */
.nwc__foot{
  margin-top:auto; padding-top:12px; display:flex; align-items:baseline;
  justify-content:space-between; gap:12px;
  font-family:"Archivo",system-ui,sans-serif; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
}
.nwc__tag{ color:var(--gold); }
.nwc__date{ color:var(--ash); white-space:nowrap; }
a.nwc__hit{ text-decoration:none; }

/* Die taalwenk: klein, regs bo, en dit gaan self weer weg. */
.langtip{
  position:fixed; z-index:95; top:74px; right:clamp(14px,3vw,30px);
  display:flex; align-items:stretch; overflow:hidden;
  background:var(--ink-2); border:1px solid var(--gold);
  border-radius:999px; box-shadow:0 6px 22px rgba(0,0,0,.3);
  opacity:0; transform:translateY(-8px);
  transition:opacity .3s ease, transform .3s ease;
}
.langtip.is-in{ opacity:1; transform:none; }
.langtip a{
  display:flex; align-items:center; padding:10px 8px 10px 18px;
  font:500 13px/1 Archivo,system-ui,sans-serif; letter-spacing:.04em;
  color:var(--gold-lt); text-decoration:none; white-space:nowrap;
}
.langtip a:hover{ color:var(--bone); }
.langtip__x{
  flex:none; width:34px; border:0; background:none; cursor:pointer;
  color:var(--ash); position:relative;
}
.langtip__x::before, .langtip__x::after{
  content:""; position:absolute; left:50%; top:50%; width:11px; height:1.5px;
  background:currentColor; transform-origin:center;
}
.langtip__x::before{ transform:translate(-50%,-50%) rotate(45deg); }
.langtip__x::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.langtip__x:hover{ color:var(--bone); }
.langtip__x:focus-visible, .langtip a:focus-visible{ outline:2px solid var(--gold); outline-offset:-3px; }
@media (prefers-reduced-motion:reduce){
  .langtip{ transition:none; transform:none; }
}
@media (max-width:640px){
  .langtip{ top:66px; }
  .langtip a{ padding:9px 6px 9px 15px; font-size:12.5px; }
}

/* Elke kaart kry 'n duidelike knoppie, al is die hele kaart klikbaar. */
.nwc__btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  align-self:flex-start; padding:9px 16px; border-radius:3px;
  border:1px solid var(--gold); color:var(--gold-lt);
  font:500 12px/1 Archivo,system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase;
  transition:background .2s ease, color .2s ease;
}
.nwc__btn i{ font-style:normal; transition:transform .2s ease; }
.nwc__hit:hover .nwc__btn{ background:var(--gold); color:var(--ink); }
.nwc__hit:hover .nwc__btn i{ transform:translateX(3px); }
@media (prefers-reduced-motion:reduce){
  .nwc__btn, .nwc__btn i{ transition:none } .nwc__hit:hover .nwc__btn i{ transform:none }
}

/* Die terug-knoppie bo-aan die video-venster. */
.vlb__back{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:14px;
  background:none; border:1px solid var(--line); border-radius:999px;
  padding:9px 18px 9px 15px; cursor:pointer; color:var(--bone);
  font:500 12.5px/1 Archivo,system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase;
  transition:border-color .2s ease, color .2s ease;
}
.vlb__back i{ font-style:normal; }
.vlb__back:hover{ border-color:var(--gold); color:var(--gold-lt); }
.vlb__back:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---- tafelkaptein: die deposito-reël op die tafelkaart ---- */

.tier__captain{
  margin:0; padding:14px 16px;
  border:1px dashed var(--gold); border-radius:2px;
  background:rgba(160,131,60,.07);
  font-size:15px; line-height:1.5; color:var(--bone-soft);
}
.tier__captain b{
  display:block; margin-bottom:3px;
  font-family:"Archivo",system-ui,sans-serif; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  font-weight:600;
}

/* ===========================================================================
   BORGE  ·  sponsors
   Elke logo kry dieselfde teël, sodat 'n vierkantige en 'n breë logo ewe
   swaar lees. Ligte logo's sit op 'n donker teël (--dark), en 'n logo met sy
   eie agtergrond vul die teël (--fill).
   =========================================================================== */

.spons__groups{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  gap:clamp(26px,3.4vw,40px) clamp(30px,4vw,56px);
  margin-top:clamp(30px,4.5vh,52px);
}
.spons__group{ min-width:0; }
.spons__lab{
  margin:0 0 14px;
  font-family:"Archivo",system-ui,sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ash);
}
.spons__row{ display:flex; flex-wrap:wrap; gap:12px; }
.spons__tile{
  margin:0; width:160px; height:104px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  padding:14px 16px; overflow:hidden;
  background:#fff; border:1px solid var(--line-soft); border-radius:8px;
}
.spons__tile img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.spons__tile--dark{ background:#000; border-color:rgba(201,162,39,.22); }
.spons__tile--fill{ background:#424F3D; padding:6px; }
@media (max-width:520px){
  .spons__group{ width:100%; }
  .spons__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .spons__tile{ width:auto; }
}

/* ===========================================================================
   LUISTER  ·  die RSG-dokumentêr
   'n Kaart soos die AGT-videokaart, maar vir klank. Maak 'n venster oop.
   =========================================================================== */

.lsn{
  display:flex; align-items:center; gap:16px; width:100%; max-width:460px;
  margin-top:26px; padding:14px 16px 14px 14px; text-align:left; cursor:pointer;
  background:var(--ink-2); color:inherit; font:inherit;
  border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:6px;
  transition:border-color .25s ease, transform .25s ease;
}
.lsn:hover, .lsn:focus-visible{ border-color:var(--gold); }
.lsn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
@media (hover:hover){ .lsn:hover{ transform:translateY(-2px); } }
.lsn__logo{
  flex:0 0 auto; width:84px; height:64px; border-radius:4px; background:#fff;
  display:flex; align-items:center; justify-content:center; padding:8px;
}
.lsn__logo img{ max-width:100%; max-height:100%; }
.lsn__meta{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.lsn__label{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Archivo",system-ui,sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.lsn__play{
  width:18px; height:18px; border-radius:50%; flex:none; position:relative;
  border:1px solid var(--gold);
}
.lsn__play::before{
  content:""; position:absolute; left:6px; top:4px;
  border-left:7px solid var(--gold); border-top:4.5px solid transparent; border-bottom:4.5px solid transparent;
}
.lsn__title{ font-family:"Fraunces",Georgia,serif; font-size:17px; line-height:1.3; color:var(--bone); }
.lsn__sub{
  font-family:"Archivo",system-ui,sans-serif; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ash);
}
@media (prefers-reduced-motion:reduce){ .lsn{ transition:none } .lsn:hover{ transform:none } }

.vlb__box--audio{ width:min(560px,100%); }
.vlb__listen{
  background:var(--ink-2); border:1px solid var(--line); border-radius:6px;
  padding:clamp(22px,4vw,34px);
}
.vlb__listenlogo{ width:110px; height:auto; background:#fff; border-radius:4px; padding:8px; margin-bottom:18px; }
.vlb__listenhead{
  margin:0; font-family:"Fraunces",Georgia,serif; font-size:clamp(20px,2.4vw,26px);
  line-height:1.25; color:var(--bone);
}
.vlb__listensub{ margin:12px 0 0; color:var(--bone-soft); font-size:16px; line-height:1.6; }
.vlb__audio{ display:block; width:100%; margin-top:22px; }
.vlb__listensrc{ margin:16px 0 0; }
.vlb__listensrc a{ color:var(--gold-lt); font-family:"Archivo",system-ui,sans-serif; font-size:13px; }

/* Die dankie-strook bo-aan die borgblad sit tussen twee donker panele. */
.spons--thanks{ border-bottom:1px solid var(--line-soft); }

/* Die toemaak-knoppie staan op die donker sluier, ook in die ligte tema. */
[data-theme="light"] .vlb__x{ color:#F2EDE3; border-color:rgba(231,201,122,.45); }
[data-theme="light"] .vlb__x:hover{ color:#E7C97A; border-color:#E7C97A; }

.vlb__listenmeta{
  margin:0 0 8px; font-family:"Archivo",system-ui,sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}

/* Drive se klankspeler in 'n iframe. Sluit by die venster se eie gloed aan. */
.vlb__audioframe{
  margin-top:22px; height:96px; border-radius:8px; overflow:hidden;
  background:#000; border:1px solid var(--line-soft);
}
.vlb__audioframe iframe{ display:block; width:100%; height:100%; border:0; }

/* ===========================================================================
   SPYSKAART  ·  'n rak kosfoto's wat sywaarts rol
   =========================================================================== */
.menu-strip{ padding-top:0; }
.dishes{
  display:flex; gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(22px,3vh,32px);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; padding-bottom:14px; scrollbar-width:thin;
}
.dish{ margin:0; flex:0 0 clamp(150px,15vw,190px); scroll-snap-align:start; }
.dish img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:6px; border:1px solid var(--line-soft);
}
.dish figcaption{
  margin-top:10px; font-family:"Fraunces",Georgia,serif; font-size:16px; line-height:1.3; color:var(--bone);
}
.dish figcaption span{
  display:block; margin-bottom:4px;
  font-family:"Archivo",system-ui,sans-serif; font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sea);
}
/* 'n Teël sonder foto, totdat die regte kosfoto daar is. */
.dish__ph{
  aspect-ratio:1/1; border-radius:6px; border:1px solid var(--line);
  background:radial-gradient(120% 90% at 30% 20%, #F6EBD3 0%, #EAD9B4 60%, #DCC596 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.dish__ph span{ font-family:"Fraunces",Georgia,serif; font-size:28px; color:#5A4410; }
.dish__ph i{
  font-style:normal; font-family:"Archivo",system-ui,sans-serif; font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:#8A6A12;
}

/* Die terug-knoppie bo die video staan ook op die donker sluier. */
[data-theme="light"] .vlb__back{ color:#F2EDE3; border-color:rgba(231,201,122,.45); }
[data-theme="light"] .vlb__back:hover{ color:#E7C97A; border-color:#E7C97A; }

/* Borglogo's is skakels na hul webwerwe. */
a.spons__tile{ transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
a.spons__tile:hover, a.spons__tile:focus-visible{
  border-color:var(--gold); transform:translateY(-2px);
  box-shadow:0 10px 24px -14px rgba(0,0,0,.35);
}
a.spons__tile:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ a.spons__tile{ transition:none } a.spons__tile:hover{ transform:none } }


/* ===========================================================================
   LUISTER-VENSTER  ·  Mauritz en RSG links, die plakkaat in die middel,
   Harry regs, die borge onder. Die klank bly die hoofsaak.
   =========================================================================== */
.vlb__box--duo{ width:min(1200px,100%); }
.vlb__duo{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr) minmax(0,.8fr);
  grid-template-rows:1fr auto;
  border-radius:6px; overflow:hidden; border:1px solid var(--line); background:#000;
  max-height:calc(100vh - 110px); max-height:calc(100dvh - 110px);
}
.vlb__duo .vlb__listen{ border:0; border-radius:0; overflow-y:auto; grid-row:1; }
.vlb__mid{
  grid-row:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:28px 22px; background:#000; color:#F2EDE3;
  font-family:"Jost","Archivo",system-ui,sans-serif; font-weight:300;
}
.vlb__date{ margin:0; display:flex; flex-direction:column; line-height:.98; text-transform:uppercase; color:#E7C97A; }
.vlb__date span{ font-size:clamp(26px,2.6vw,36px); font-weight:300; }
.vlb__date b{ font-weight:600; }
.vlb__date .vlb__month{ font-size:clamp(32px,3.3vw,46px); font-weight:600; color:#D9B45A; }
.vlb__venue{ margin:12px 0 0; font-size:16px; color:#F2EDE3; }
.vlb__dot{
  position:relative; width:100%; max-width:240px; height:1px; margin:18px 0;
  background:linear-gradient(90deg,transparent,#B88A2E 18%,#B88A2E 82%,transparent);
}
.vlb__dot::after{ content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px; border-radius:50%; background:#F6DE9C; }
.vlb__item{ margin:0 0 12px; font-size:19px; line-height:1.2; color:#F2EDE3; }
.vlb__item small{ display:block; margin-top:3px; font-size:14px; font-weight:600; color:#F2EDE3; }
.vlb__rule{ width:120px; height:1px; margin:8px 0 14px; background:rgba(231,201,122,.45); }
.vlb__price{ margin:0; font-size:15px; line-height:1.5; color:#E7C97A; }
.vlb__price b{ font-weight:600; }
.vlb__promocta{ margin-top:18px; width:100%; max-width:280px; justify-content:center; }
.vlb__proceeds{ margin:12px 0 0; font-size:12.5px; color:#C9C2B4; }
.vlb__harry{ grid-row:1; position:relative; margin:0; background:#000; overflow:hidden; min-height:100%; }
.vlb__harry img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% 6%; }
.vlb__harry::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.92) 88%); }
.vlb__harry figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:1; padding:18px 20px 22px;
  font-family:"Jost","Archivo",system-ui,sans-serif; font-weight:300; color:#F2EDE3;
}
.vlb__harry figcaption b{ display:block; font-size:20px; font-weight:600; color:#D9B45A; }
.vlb__harry figcaption span{ display:block; margin-top:3px; font-size:13px; line-height:1.35; }
.vlb__harry figcaption i{ display:block; margin-top:5px; font-size:13.5px; font-weight:400; color:#E7C97A; }
.vlb__strip{
  grid-column:1 / -1; grid-row:2; background:#000; border-top:1px solid rgba(231,201,122,.35);
  padding:12px clamp(14px,2vw,24px);
}
.vlb__strip img{ display:block; width:100%; max-width:1100px; height:auto; margin:0 auto; }
@media (max-width:820px){
  .vlb__duo{ grid-template-columns:1fr; grid-template-rows:none; overflow-y:auto; }
  .vlb__duo .vlb__listen,.vlb__mid,.vlb__harry,.vlb__strip{ grid-row:auto; grid-column:auto; }
  .vlb__duo .vlb__listen{ overflow:visible; }
  .vlb__duo .vlb__listensub{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
  .vlb__harry{ min-height:0; height:340px; }
  .vlb__harry::after{ background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.95) 82%); }
  .vlb__harry img{ object-position:70% 0%; height:78%; }
  .vlb__strip img{ max-width:420px; }
}

/* Mauritz bo-aan die linkerkant, soos Harry regs. */
.vlb__listen--img{ position:relative; padding-top:0; }
.vlb__listenimg{
  position:relative; height:clamp(200px,30vh,280px);
  margin:0 calc(-1 * clamp(22px,4vw,34px)) 0; overflow:hidden; background:#000;
}
.vlb__listenimg img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 14%; }
.vlb__listenimg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 68%,var(--ink-2) 100%);
}
.vlb__listen--img .vlb__listenlogo{ position:relative; margin-top:-34px; z-index:1; box-shadow:0 4px 14px rgba(0,0,0,.25); }
@media (max-width:820px){ .vlb__listenimg{ height:170px; } }

/* In die drie-kolom-venster kom die speler reg onder die titel: die klank is die hoofsaak. */
.vlb__duo .vlb__listen{ display:flex; flex-direction:column; }
.vlb__duo .vlb__listen > *{ flex:none; }
.vlb__duo .vlb__listenlogo{ align-self:flex-start; }
.vlb__duo .vlb__listensub{ order:1; font-size:15px; line-height:1.55; }
.vlb__duo .vlb__listensrc{ order:2; }
.vlb__duo .vlb__audio{ margin-top:16px; }
.vlb__duo .vlb__listenimg{ height:clamp(150px,22vh,220px); }
.vlb__duo .vlb__listenimg img{ object-position:50% 0; }

/* Harry heel: die foto word nie meer gesny nie, net onder in swart laat vervaag. */
.vlb__harry{ display:flex; flex-direction:column; justify-content:center; }
.vlb__harry::after{ content:none; }
.vlb__harry img{
  position:static; width:100%; height:auto; object-fit:initial;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
}
.vlb__harry figcaption{ position:relative; margin-top:-34px; padding:0 20px 22px; }
@media (max-width:820px){
  .vlb__harry{ height:auto; }
  .vlb__harry img{ height:auto; max-width:420px; margin:0 auto; }
}

/* Harry groter: 'n nouer uitsnede wat die kolom vol maak, en 'n effe breër kolom. */
@media (min-width:821px){
  .vlb__duo{ grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr) minmax(0,.95fr); grid-template-rows:minmax(0,1fr) auto; }
  .vlb__mid{ overflow-y:auto; }
}
.vlb__harry{ justify-content:flex-start; }
.vlb__harry img{ flex:1 1 auto; min-height:0; height:100%; object-fit:cover; object-position:62% 12%; }
.vlb__harry figcaption{ flex:none; margin-top:-40px; }
@media (max-width:820px){
  .vlb__harry img{ flex:none; height:auto; object-fit:initial; }
}