/* ═══════════════════════════════════════════════════════════════
   FIELA SE KIND, DIE DRAMA
   Aanlyn werksessie · Lefra Produksies
   ─────────────────────────────────────────────────────────────
   Kleure kom uit die produksie self: die donker Bos, Fiela se
   blou tulband, die geruite rok, en die goud van die plakkaat.
   Die bladsy loop van die Kloof se kant (doek) na die Bos se
   kant (donker) en terug, soos die drama self.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Grondkleure */
  --bos:        #0B1A17;
  --bos-diep:   #061110;
  --mos:        #1F4A3B;
  --doek:       #EFE8DB;
  --ink:        #17201D;

  /* Aksente */
  --sand:       #D6B384;   /* die plakkaat se goud */
  --tulband:    #8FBFDA;   /* Fiela se kopdoek */
  --baksteen:   #B2542F;   /* die geruite rok */
  --lefra:      #D8202B;   /* die maatskappy se rooi */

  /* Tipografie */
  --serif: "Bodoni Moda", "Bodoni MT", Didot, "Times New Roman", serif;
  --sans:  "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Bodoni se optiese-grootte-as maak hare dunner soos die letter groter
     word. Ons pen dit laag vas en dra die gewig op, sodat die stamme en
     hare stewig bly, ook groot en ook op die ligte doekkleur. */
  --serif-hero: 'opsz' 30, 'wght' 560;
  --serif-kop:  'opsz' 12, 'wght' 640;
  --serif-teks: 'opsz' 9,  'wght' 580;

  --t-body: clamp(1rem, .955rem + .22vw, 1.14rem);
  --t-sm:   .9375rem;
  --t-xs:   .70rem;

  --wrap: 1200px;
  --gut: clamp(1.15rem, 4.5vw, 3.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);

  /* Konteksveranderlikes, elke "band" stel dit self */
  --fg: var(--doek);
  --fg-dim: rgba(239,232,219,.62);
  --rule: rgba(239,232,219,.15);
  --paper: rgba(255,255,255,.035);
  --accent: var(--sand);
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bos);
  color:var(--doek);
  font-family:var(--sans);
  font-size:var(--t-body);
  font-variation-settings:'wdth' 100,'wght' 400;
  /* Ons stel opsz self, oral. Sien --serif-hero/-kop/-teks hierbo. */
  font-optical-sizing:none;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
ul,ol,dl,dd{ margin:0; padding:0; }
li{ list-style:none; }
a{ color:inherit; }
table{ border-collapse:collapse; width:100%; }
::selection{ background:var(--sand); color:#1A1208; }

:focus-visible{
  outline:2px solid var(--tulband);
  outline-offset:3px;
  border-radius:2px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:.75rem; top:-4rem; z-index:200;
  background:var(--sand); color:#1A1208; padding:.7rem 1.1rem;
  font-size:var(--t-sm); font-variation-settings:'wght' 600;
  transition:top .18s var(--ease);
}
.skip:focus{ top:.75rem; }

/* ── Basiese bousels ───────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.band{
  position:relative;
  padding-block:clamp(4.25rem, 8.5vw, 8rem);
  background:var(--bos);
  color:var(--fg);
}
.band--tight{ padding-block:clamp(2.75rem, 5vw, 4.25rem); }

.band--bos{
  background:var(--bos);
  --fg:#EFE8DB; --fg-dim:rgba(239,232,219,.62);
  --rule:rgba(239,232,219,.15); --paper:rgba(255,255,255,.035);
  --accent:var(--sand);
}
.band--diep{
  background:var(--bos-diep);
  --fg:#EFE8DB; --fg-dim:rgba(239,232,219,.58);
  --rule:rgba(239,232,219,.12); --paper:rgba(255,255,255,.03);
  --accent:var(--sand);
}
.band--kloof{
  background:var(--doek);
  --fg:#17201D; --fg-dim:rgba(23,32,29,.68);
  --rule:rgba(23,32,29,.16); --paper:rgba(23,32,29,.035);
  --accent:#8A5226;
}
/* Fyn horisontale skeiding tussen bande van dieselfde grond */
.band + .band{ border-top:1px solid transparent; }
.band--bos + .band--diep,
.band--diep + .band--bos{ border-top-color:rgba(239,232,219,.09); }

.eyebrow{
  font-family:var(--sans);
  font-variation-settings:'wdth' 122,'wght' 650;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:var(--t-xs);
  line-height:1.4;
  color:var(--accent);
  margin:0 0 1.1rem;
}
.eyebrow.center{ text-align:center; }
.display{
  font-family:var(--serif);
  font-optical-sizing:none;
  font-variation-settings:var(--serif-kop);
  line-height:1.06;
  letter-spacing:-.006em;
}
.center{ text-align:center; }
.pad-t{ margin-top:clamp(2.5rem,5vw,3.75rem); }

.kop{ max-width:56ch; margin-bottom:clamp(2.5rem,5vw,4rem); }
.kop__titel{
  font-size:clamp(2rem, 4.4vw, 3.5rem);
  margin-bottom:1.1rem;
}
.kop__lead{
  color:var(--fg-dim);
  font-size:clamp(1.02rem,1.6vw,1.2rem);
  max-width:52ch;
}
.sub{
  font-family:var(--sans);
  font-variation-settings:'wdth' 118,'wght' 650;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.74rem;
  color:var(--fg-dim);
  padding-bottom:.85rem;
  border-bottom:1px solid var(--rule);
  margin-bottom:2.25rem;
}
.sub--gap{ margin-top:clamp(3.5rem,7vw,5.5rem); }

/* ── Knoppies ──────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem;
  padding:.95rem 1.7rem;
  font-family:var(--sans);
  font-size:.9rem;
  font-variation-settings:'wdth' 108,'wght' 620;
  letter-spacing:.03em;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:2px;
  transition:transform .2s var(--ease), background-color .2s var(--ease),
             color .2s var(--ease), border-color .2s var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn--sm{ padding:.62rem 1.1rem; font-size:.8rem; }
.btn--primary{ background:var(--sand); color:#1A1208; }
.btn--primary:hover{ background:#E7CBA3; }
.btn--ghost{ border-color:var(--rule); color:var(--fg); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn--rooi{ background:var(--lefra); color:#fff; }
.btn--rooi:hover{ background:#EE3540; }
.btn--ink{ background:var(--ink); color:var(--doek); }
.btn--ink:hover{ background:#2B3833; }

/* ═══════════════ NAVIGASIE ═══════════════ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(6,17,16,0);
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
  backdrop-filter:blur(0px);
}
.nav.is-vas{
  background:rgba(6,17,16,.9);
  border-bottom-color:rgba(239,232,219,.12);
  backdrop-filter:blur(14px) saturate(1.3);
}
.nav__in{
  max-width:var(--wrap); margin-inline:auto;
  padding:.7rem var(--gut);
  display:flex; align-items:center; gap:1.5rem;
}
.nav__brand{ flex:none; line-height:0; }
/* Die logo is 'n eie lig-weergawe: room letters, Lefra se rooi bly rooi. */
.nav__brand img{
  width:104px; height:auto;
  transition:opacity .2s var(--ease);
  opacity:.94;
}
.nav__brand:hover img{ opacity:1; }
.nav__links{
  display:flex; gap:1.65rem; margin-left:auto;
  font-size:.82rem;
  font-variation-settings:'wdth' 108,'wght' 520;
  letter-spacing:.05em;
}
.nav__links a{
  color:rgba(239,232,219,.78);
  text-decoration:none;
  padding-block:.35rem;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.nav__links a:hover{ color:var(--sand); border-bottom-color:var(--sand); }
.nav__cta{ flex:none; }
@media (max-width:920px){
  .nav__links{ display:none; }
  .nav__cta{ margin-left:auto; }
}

/* ═══════════════ HERO, DIE BERG ═══════════════ */
.berg{
  position:relative;
  min-height:clamp(640px, 100svh, 1040px);
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  background:#07100F;
  isolation:isolate;
}
.berg__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:0;
}
/* Statiese terugval as WebGL nie beskikbaar is nie */
.berg.is-plat .berg__canvas{ display:none; }
.berg.is-plat{
  background:
    radial-gradient(70% 55% at 20% 52%, rgba(214,179,132,.42), transparent 62%),
    linear-gradient(100deg, #7E6647 0%, #35443C 42%, #0B1A17 78%);
}
.berg__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, var(--bos) 1%, rgba(11,26,23,.72) 15%, rgba(11,26,23,.3) 40%, rgba(11,26,23,.06) 64%, transparent 86%),
    linear-gradient(to right, rgba(5,13,12,.58), rgba(5,13,12,.24) 40%, transparent 66%);
}
.berg__body{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap);
  margin-inline:auto;
  padding:7rem var(--gut) clamp(3.5rem,6vw,5.5rem);
}
.berg__eyebrow{ color:var(--sand); margin-bottom:1.25rem; }
.berg__author{
  font-family:var(--sans);
  font-variation-settings:'wdth' 116,'wght' 500;
  text-transform:uppercase; letter-spacing:.24em;
  font-size:clamp(.72rem,1.5vw,.86rem);
  color:rgba(239,232,219,.8);
  margin:0 0 .35rem;
}
.berg__title{
  font-family:var(--serif);
  font-optical-sizing:none;
  font-variation-settings:var(--serif-hero);
  color:var(--sand);
  line-height:.85;
  letter-spacing:-.028em;
  font-size:clamp(3.6rem, 12.2vw, 10.5rem);
  margin:0 0 1.15rem;
  text-shadow:0 2px 40px rgba(4,10,9,.55);
}
.berg__w1{ display:block; }
.berg__w2{ display:block; padding-left:.06em; }
.berg__se{
  font-style:italic;
  font-variation-settings:'opsz' 24,'wght' 480;
  font-size:.4em;
  letter-spacing:-.01em;
  color:rgba(239,232,219,.9);
  margin-right:-.06em;
  vertical-align:.34em;
}
.berg__credit{
  font-size:clamp(.8rem,1.5vw,.94rem);
  color:rgba(239,232,219,.72);
  letter-spacing:.045em;
  margin:0 0 1.7rem;
}
.berg__credit b{ font-variation-settings:'wght' 620; color:rgba(239,232,219,.95); }

.berg__date{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
  font-variation-settings:'wdth' 112,'wght' 620;
  text-transform:uppercase; letter-spacing:.11em;
  font-size:clamp(.74rem,1.45vw,.88rem);
  color:var(--doek);
  padding:.85rem 0;
  border-top:1px solid rgba(214,179,132,.42);
  border-bottom:1px solid rgba(214,179,132,.42);
  margin:0 0 1.35rem;
  max-width:42rem;
}
.berg__dot{
  width:4px; height:4px; border-radius:50%;
  background:var(--sand); flex:none;
}
.berg__lead{
  max-width:46ch;
  color:rgba(239,232,219,.82);
  font-size:clamp(1rem,1.7vw,1.14rem);
  margin-bottom:1.75rem;
}
.berg__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:1.2rem; }
.berg__micro{
  font-size:.85rem; color:rgba(239,232,219,.6); letter-spacing:.03em;
}
.berg__micro a{ color:rgba(239,232,219,.85); text-decoration:none; border-bottom:1px solid rgba(239,232,219,.28); }
.berg__micro a:hover{ color:var(--sand); border-bottom-color:var(--sand); }

.berg__hint{
  position:absolute; right:var(--gut); bottom:2rem; z-index:2;
  margin:0;
  writing-mode:vertical-rl;
  font-size:.66rem; letter-spacing:.34em; text-transform:uppercase;
  font-variation-settings:'wdth' 118,'wght' 500;
  color:rgba(239,232,219,.38);
}
.berg__hint span{ display:block; padding-bottom:3.5rem; position:relative; }
.berg__hint span::after{
  content:''; position:absolute; left:50%; bottom:0;
  width:1px; height:2.75rem;
  background:linear-gradient(to bottom, rgba(239,232,219,.45), transparent);
}
@media (max-width:820px){ .berg__hint{ display:none; } }

/* Bladsy-laai volgorde */
.berg__eyebrow,.berg__author,.berg__title,.berg__credit,
.berg__date,.berg__lead,.berg__cta,.berg__micro{
  opacity:0; transform:translateY(18px);
  animation:opkom .95s var(--ease) forwards;
}
.berg__eyebrow{ animation-delay:.15s }
.berg__author { animation-delay:.28s }
.berg__title  { animation-delay:.36s }
.berg__credit { animation-delay:.52s }
.berg__date   { animation-delay:.60s }
.berg__lead   { animation-delay:.68s }
.berg__cta    { animation-delay:.76s }
.berg__micro  { animation-delay:.84s }
@keyframes opkom{ to{ opacity:1; transform:none; } }

/* ═══════════════ DIE VERHAAL ═══════════════ */
.verhaal{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:start;
}
@media (max-width:900px){ .verhaal{ grid-template-columns:1fr; } }
.verhaal__quote{
  margin:0 0 1.9rem;
  font-family:var(--serif);
  font-optical-sizing:none;
  font-variation-settings:'opsz' 18,'wght' 520;
  font-style:italic;
  font-size:clamp(1.85rem,4.3vw,3.35rem);
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--sand);
  text-indent:-.42em;
}
.verhaal__quote p{ margin:0; }
.verhaal__lead{
  font-family:var(--serif);
  font-variation-settings:var(--serif-teks);
  font-size:clamp(1.15rem,2vw,1.42rem);
  line-height:1.42;
  color:var(--doek);
  padding-bottom:1.5rem;
  margin-bottom:1.5rem;
  border-bottom:1px solid var(--rule);
}
.verhaal__text p{ color:var(--fg-dim); max-width:56ch; }
.verhaal__text .verhaal__lead{ color:var(--doek); }
.verhaal__text .verhaal__src{
  font-size:.85rem; letter-spacing:.02em;
  padding-top:1.4rem; margin-top:1.9rem;
  border-top:1px solid var(--rule);
  color:rgba(239,232,219,.58);
}
.verhaal__fig{ margin:0; position:relative; }
.verhaal__fig img{
  width:100%;
  filter:saturate(.94) contrast(1.03);
}
.verhaal__fig figcaption{
  margin-top:1rem;
  font-size:.82rem; letter-spacing:.02em;
  color:var(--fg-dim);
  padding-left:1rem;
  border-left:2px solid var(--sand);
}

/* ═══════════════ TWEE WÊRELDS ═══════════════ */
.wereld{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:stretch;
}
.wereld__kant{ padding:clamp(1.75rem,3vw,2.5rem); }
.wereld__kant--kloof{
  background:rgba(214,179,132,.14);
  border-top:2px solid var(--baksteen);
}
.wereld__kant--bos{
  background:var(--bos);
  color:var(--doek);
  border-top:2px solid var(--mos);
}
.wereld__naam{
  font-family:var(--serif);
  font-variation-settings:var(--serif-kop);
  font-size:clamp(1.7rem,3.2vw,2.4rem);
  line-height:1.05; letter-spacing:-.02em;
  margin-bottom:.15rem;
}
.wereld__plek{
  font-variation-settings:'wdth' 118,'wght' 600;
  text-transform:uppercase; letter-spacing:.19em;
  font-size:.68rem;
  opacity:.6;
  margin-bottom:1.35rem;
}
.wereld__kant p{ font-size:.98rem; }
.wereld__kant--bos p{ color:rgba(239,232,219,.72); }
.wereld__mense{
  margin-top:1.5rem; padding-top:1.2rem;
  border-top:1px solid currentColor;
  border-top-color:color-mix(in srgb, currentColor 22%, transparent);
  display:flex; flex-wrap:wrap; gap:.4rem .55rem;
}
.wereld__mense li{
  font-size:.76rem; letter-spacing:.05em;
  font-variation-settings:'wdth' 106,'wght' 560;
  padding:.28rem .6rem;
  border:1px solid currentColor;
  border-color:color-mix(in srgb, currentColor 26%, transparent);
  border-radius:100px;
}
.wereld__berg{
  position:relative;
  width:clamp(46px,6vw,86px);
  display:flex; align-items:center; justify-content:center;
}
.wereld__berg::before{
  content:''; position:absolute; top:0; bottom:0; left:50%;
  width:1px;
  background:linear-gradient(to bottom, transparent, var(--rule) 12%, var(--rule) 88%, transparent);
}
.wereld__bergwoord{
  position:relative;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-variation-settings:'wdth' 122,'wght' 600;
  text-transform:uppercase; letter-spacing:.42em;
  font-size:.66rem;
  color:var(--fg-dim);
  background:var(--doek);
  padding-block:1.1rem;
}
.wereld__vraag{
  margin:clamp(2.75rem,5vw,4rem) auto 0;
  max-width:20ch;
  text-align:center;
  font-family:var(--serif);
  font-variation-settings:'opsz' 14,'wght' 560;
  font-style:italic;
  font-size:clamp(1.6rem,4.2vw,3rem);
  line-height:1.1; letter-spacing:-.02em;
}
@media (max-width:800px){
  .wereld{ grid-template-columns:1fr; }
  .wereld__berg{ width:auto; height:64px; }
  .wereld__berg::before{ inset:auto 0 auto 0; top:50%; left:0; width:auto; height:1px;
    background:linear-gradient(to right, transparent, var(--rule) 12%, var(--rule) 88%, transparent); }
  .wereld__bergwoord{ writing-mode:horizontal-tb; padding:0 1.1rem; letter-spacing:.34em; }
}

/* ═══════════════ DIE FEITE ═══════════════ */
.feite{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.feite__item{
  background:var(--bos-diep);
  padding:1.5rem 1.35rem;
}
.feite dt{
  font-variation-settings:'wdth' 120,'wght' 620;
  text-transform:uppercase; letter-spacing:.17em;
  font-size:.64rem;
  color:var(--sand);
  margin-bottom:.6rem;
}
.feite dd{
  font-family:var(--serif);
  font-variation-settings:var(--serif-teks);
  font-size:1.14rem; line-height:1.24;
  letter-spacing:-.01em;
}
.feite dd span{
  display:block;
  font-family:var(--sans);
  font-size:.76rem; line-height:1.4;
  letter-spacing:.03em;
  color:var(--fg-dim);
  margin-top:.4rem;
}

/* ═══════════════ DIE DRAMATIESE BOOG ═══════════════ */
/* Etikette steek bo en onder die kurwe uit, die marge gee hulle plek. */
.arc{ position:relative; margin:3.25rem 0 2.5rem; }
.arc__svg{
  display:block; width:100%; height:auto;
  aspect-ratio:1000/320;
  overflow:visible;
}
.arc__path{
  fill:none;
  stroke:var(--accent);
  stroke-width:1.75;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-dasharray:var(--len,1600);
  stroke-dashoffset:var(--len,1600);
}
.arc.is-in .arc__path{
  transition:stroke-dashoffset 2.4s var(--ease);
  stroke-dashoffset:0;
}
.arc__steps{
  position:absolute; inset:0;
}
.arc__step{
  position:absolute;
  left:var(--x); top:var(--y);
  width:0; height:0;
}
.arc__dot{
  position:absolute; left:0; top:0;
  width:11px; height:11px;
  margin:-5.5px 0 0 -5.5px;
  border-radius:50%;
  background:var(--doek);
  border:2px solid var(--accent);
  box-shadow:0 0 0 5px var(--doek);
  opacity:0; transform:scale(.4);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.arc__step--top .arc__dot{
  width:15px; height:15px; margin:-7.5px 0 0 -7.5px;
  background:var(--accent);
}
.arc__label{
  position:absolute; left:0;
  width:9.4em;
  transform:translateX(-50%);
  font-size:.76rem; line-height:1.28;
  font-variation-settings:'wdth' 104,'wght' 640;
  letter-spacing:.01em;
  text-align:center;
  opacity:0;
  transition:opacity .6s var(--ease);
}
.arc__label em{
  display:block;
  font-style:normal;
  font-variation-settings:'wdth' 100,'wght' 400;
  font-size:.72rem;
  color:var(--fg-dim);
  margin-top:.15rem;
}
.arc__step--bo .arc__label{ bottom:16px; }
.arc__step--onder .arc__label{ top:16px; }
.arc__step--start .arc__label{ transform:translateX(-14%); text-align:left; }
.arc__step--end   .arc__label{ transform:translateX(-86%); text-align:right; }
/* fyn draadjie van kolletjie na etiket */
.arc__step--bo .arc__label::after,
.arc__step--onder .arc__label::after{
  content:''; position:absolute; left:50%;
  width:1px; height:9px;
  background:var(--rule);
}
.arc__step--bo .arc__label::after{ bottom:-11px; }
.arc__step--onder .arc__label::after{ top:-11px; }
.arc__step--start .arc__label::after{ left:14%; }
.arc__step--end   .arc__label::after{ left:86%; }

.arc.is-in .arc__dot{ opacity:1; transform:scale(1); }
.arc.is-in .arc__label{ opacity:1; }
.arc.is-in .arc__step:nth-child(1) .arc__dot,.arc.is-in .arc__step:nth-child(1) .arc__label{ transition-delay:.30s }
.arc.is-in .arc__step:nth-child(2) .arc__dot,.arc.is-in .arc__step:nth-child(2) .arc__label{ transition-delay:.62s }
.arc.is-in .arc__step:nth-child(3) .arc__dot,.arc.is-in .arc__step:nth-child(3) .arc__label{ transition-delay:.94s }
.arc.is-in .arc__step:nth-child(4) .arc__dot,.arc.is-in .arc__step:nth-child(4) .arc__label{ transition-delay:1.26s }
.arc.is-in .arc__step:nth-child(5) .arc__dot,.arc.is-in .arc__step:nth-child(5) .arc__label{ transition-delay:1.58s }
.arc.is-in .arc__step:nth-child(6) .arc__dot,.arc.is-in .arc__step:nth-child(6) .arc__label{ transition-delay:1.90s }
.arc.is-in .arc__step:nth-child(7) .arc__dot,.arc.is-in .arc__step:nth-child(7) .arc__label{ transition-delay:2.22s }

/* Op klein skerms word die boog 'n genommerde lys, die volgorde
   is die inligting, nie die kurwe nie. */
@media (max-width:900px){
  .arc__svg{ display:none; }
  .arc__steps{ position:static; counter-reset:fase; }
  .arc__step{
    position:relative; left:auto; top:auto; width:auto; height:auto;
    display:flex; gap:1rem; align-items:baseline;
    padding:.95rem 0 .95rem 0;
    border-bottom:1px solid var(--rule);
    counter-increment:fase;
  }
  .arc__step::before{
    content:counter(fase,decimal-leading-zero);
    font-variation-settings:'wdth' 116,'wght' 620;
    font-size:.7rem; letter-spacing:.1em;
    color:var(--accent);
    flex:none; width:2rem; padding-top:.15rem;
  }
  .arc__dot{ display:none; }
  .arc__label{
    position:static; width:auto; transform:none !important;
    text-align:left !important; opacity:1;
    font-size:1rem;
  }
  .arc__label::after{ display:none !important; }
  .arc__label em{ font-size:.85rem; }
}

/* ═══════════════ TEMAS ═══════════════ */
.temas{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0 clamp(2rem,4vw,3.5rem);
}
.temas li{
  padding:.95rem 0 .95rem 1.6rem;
  border-bottom:1px solid var(--rule);
  font-size:1rem;
  position:relative;
}
.temas li::before{
  content:''; position:absolute; left:0; top:1.5rem;
  width:7px; height:1px; background:var(--accent);
}

/* ═══════════════ PANEEL ═══════════════ */
/* Vyf paneellede, die rooster laat vyf toe sodat daar nie een
   verlore kaart op 'n tweede ry oorbly nie. */
.paneel{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(198px,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.paneel__kaart{
  background:var(--bos);
  padding:1.9rem 1.35rem 1.8rem;
  display:flex; flex-direction:column;
}
.paneel__mono{
  font-family:var(--serif);
  font-variation-settings:var(--serif-kop);
  font-size:2.5rem; line-height:1;
  color:var(--sand);
  opacity:.45;
  margin-bottom:1.4rem;
  letter-spacing:-.03em;
}
.paneel__naam{
  font-family:var(--serif);
  font-variation-settings:var(--serif-teks);
  font-size:1.22rem; line-height:1.16;
  letter-spacing:-.018em;
  margin-bottom:.4rem;
  hyphens:auto;
}
.paneel__rol{
  font-variation-settings:'wdth' 116,'wght' 600;
  text-transform:uppercase; letter-spacing:.15em;
  font-size:.63rem;
  color:var(--sand);
  margin-bottom:1rem;
}
.paneel__kaart > p:last-child{
  font-size:.9rem; line-height:1.55;
  color:var(--fg-dim);
}

/* ═══════════════ GALERY ═══════════════ */
.galery{ columns:3; column-gap:clamp(.85rem,1.6vw,1.4rem); }
@media (max-width:1000px){ .galery{ columns:2; } }
@media (max-width:600px){ .galery{ columns:1; } }
.galery figure{
  margin:0 0 clamp(.85rem,1.6vw,1.4rem);
  break-inside:avoid;
  position:relative;
  overflow:hidden;
}
.galery img{
  width:100%;
  filter:saturate(.92) contrast(1.04);
  transition:transform .8s var(--ease), filter .8s var(--ease);
}
.galery figure:hover img{ transform:scale(1.035); filter:saturate(1) contrast(1.02); }
.galery figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:2.75rem 1.1rem .95rem;
  font-size:.8rem; line-height:1.35;
  letter-spacing:.01em;
  color:#F4EFE6;
  background:linear-gradient(to top, rgba(4,10,9,.9), rgba(4,10,9,.55) 45%, transparent);
}

/* ═══════════════ STAPPE ═══════════════ */
/* Vyf stappe, vyf kolomme, die ry ís die volgorde. */
.stappe{
  counter-reset:stap;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:clamp(1.25rem,2.4vw,1.9rem);
  margin-bottom:clamp(3rem,6vw,4.5rem);
}
.stappe__item{
  counter-increment:stap;
  padding-top:1.1rem;
  border-top:2px solid var(--accent);
}
.stappe__item::before{
  content:counter(stap,decimal-leading-zero);
  display:block;
  font-variation-settings:'wdth' 120,'wght' 620;
  font-size:.7rem; letter-spacing:.14em;
  color:var(--accent);
  margin-bottom:.85rem;
}
.stappe__item h3{
  font-family:var(--serif);
  font-variation-settings:var(--serif-teks);
  font-size:1.2rem; line-height:1.2;
  letter-spacing:-.01em;
  margin-bottom:.5rem;
}
.stappe__item p{ font-size:.92rem; color:var(--fg-dim); }

.benodig{ max-width:62ch; }
.tik li{
  position:relative;
  padding:.85rem 0 .85rem 2rem;
  border-bottom:1px solid var(--rule);
  font-size:.98rem;
}
.tik li::before{
  content:''; position:absolute; left:.15rem; top:1.35rem;
  width:9px; height:5px;
  border-left:1.5px solid var(--accent);
  border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg);
}

/* ═══════════════ KOSTE ═══════════════ */
.skaal{ margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.skaal thead th{
  text-align:left;
  font-variation-settings:'wdth' 118,'wght' 620;
  text-transform:uppercase; letter-spacing:.16em;
  font-size:.64rem;
  color:var(--fg-dim);
  padding:0 1rem .9rem 0;
  border-bottom:1px solid var(--rule);
}
.skaal tbody th{
  text-align:left;
  font-family:var(--sans);
  font-variation-settings:'wdth' 104,'wght' 520;
  font-size:1rem;
  padding:1.05rem 1rem 1.05rem 0;
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
.skaal td{
  padding:1.05rem 1rem 1.05rem 0;
  border-bottom:1px solid var(--rule);
  vertical-align:middle;
}
.skaal td:last-child{ width:56%; padding-right:0; }
.skaal__prys{
  font-family:var(--serif);
  font-variation-settings:var(--serif-kop);
  font-size:clamp(1.3rem,2.6vw,1.85rem);
  color:var(--sand);
  letter-spacing:-.015em;
  white-space:nowrap;
}
.skaal__balk{
  display:block; height:6px;
  width:var(--p);
  max-width:100%;
  background:linear-gradient(to right, var(--sand), rgba(214,179,132,.35));
  transform-origin:left center;
  transform:scaleX(0);
}
.skaal.is-in .skaal__balk{ transition:transform 1.1s var(--ease); transform:scaleX(1); }
.skaal.is-in tr:nth-child(1) .skaal__balk{ transition-delay:.05s }
.skaal.is-in tr:nth-child(2) .skaal__balk{ transition-delay:.14s }
.skaal.is-in tr:nth-child(3) .skaal__balk{ transition-delay:.23s }
.skaal.is-in tr:nth-child(4) .skaal__balk{ transition-delay:.32s }
.skaal.is-in tr:nth-child(5) .skaal__balk{ transition-delay:.41s }
.skaal.is-in tr:nth-child(6) .skaal__balk{ transition-delay:.50s }
@media (max-width:640px){
  .skaal td:last-child{ display:none; }
  .skaal thead th:last-child{ display:none; }
}

.nota{
  padding:1.7rem clamp(1.4rem,3vw,2.1rem);
  background:var(--paper);
  border-left:2px solid var(--accent);
  max-width:64ch;
}
.nota h3{
  font-family:var(--serif);
  font-variation-settings:var(--serif-teks);
  font-size:1.16rem; letter-spacing:-.01em;
  margin-bottom:.55rem;
}
.nota p{ font-size:.94rem; color:var(--fg-dim); }
.nota a{ color:var(--accent); text-decoration:none; border-bottom:1px solid currentColor; }
.nota--lig{ margin-top:2.5rem; }

/* ═══════════════ KOMPETISIE ═══════════════ */
.band--kompetisie{
  background:var(--lefra);
  --fg:#fff; --fg-dim:rgba(255,255,255,.82);
  --rule:rgba(255,255,255,.28); --accent:#fff;
  color:#fff;
  overflow:hidden;
}
.band--kompetisie::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 90% at 88% 12%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(50% 80% at 6% 100%, rgba(0,0,0,.2), transparent 62%);
}
.kompetisie{ position:relative; text-align:center; max-width:60ch; }
.kompetisie__eyebrow{ color:rgba(255,255,255,.85); }
.kompetisie__titel{
  font-family:var(--serif);
  font-optical-sizing:none;
  font-variation-settings:'opsz' 18,'wght' 600;
  font-size:clamp(2rem,5.2vw,4rem);
  line-height:1.05; letter-spacing:-.008em;
  margin-bottom:1.15rem;
  text-wrap:balance;
}
.kompetisie__lead{
  font-size:clamp(1.02rem,1.8vw,1.2rem);
  color:#fff;
  margin-bottom:2rem;
}
.kompetisie__cta .btn{
  background:#fff; color:var(--lefra);
  padding:1.05rem 2.1rem; font-size:.95rem;
}
.kompetisie__cta .btn:hover{ background:#FFF3F3; }
.kompetisie__fyn{
  margin-top:1.6rem;
  font-size:.85rem; color:rgba(255,255,255,.94);
}
.kompetisie__fyn a{ color:#fff; }

/* ═══════════════ BESPREEK ═══════════════ */
.bespreek{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:start;
}
@media (max-width:900px){ .bespreek{ grid-template-columns:1fr; } }
.bespreek__text > p{ max-width:52ch; color:var(--fg-dim); }
.bespreek__text a{ color:var(--accent); }
.bespreek__knop{ margin:2rem 0 2.5rem; }

.bank{
  padding:1.7rem clamp(1.4rem,3vw,2rem);
  background:var(--ink);
  color:var(--doek);
}
.bank h3{
  font-variation-settings:'wdth' 120,'wght' 620;
  text-transform:uppercase; letter-spacing:.17em;
  font-size:.64rem;
  color:var(--sand);
  margin-bottom:1.15rem;
}
.bank dl{ display:grid; gap:.15rem; }
.bank dl > div{
  display:flex; flex-wrap:wrap; gap:.35rem 1rem;
  justify-content:space-between; align-items:baseline;
  padding:.6rem 0;
  border-bottom:1px solid rgba(239,232,219,.12);
}
.bank dl > div:last-child{ border-bottom:0; }
.bank dt{
  font-size:.78rem; letter-spacing:.05em;
  color:rgba(239,232,219,.58);
}
.bank dd{
  font-family:var(--serif);
  font-variation-settings:var(--serif-teks);
  font-size:1.06rem; letter-spacing:.01em;
}
.bank__waarsku{
  margin-top:1.2rem; padding-top:1.1rem;
  border-top:1px solid rgba(239,232,219,.12);
  font-size:.78rem; line-height:1.5;
  color:rgba(239,232,219,.6);
}

.plakkaat{ margin:0; position:sticky; top:5.5rem; }
.plakkaat img{ width:100%; box-shadow:0 22px 60px -28px rgba(11,26,23,.6); }
.plakkaat figcaption{
  margin-top:1rem;
  font-size:.82rem; color:var(--fg-dim);
  padding-left:1rem; border-left:2px solid var(--accent);
}
@media (max-width:900px){ .plakkaat{ position:static; } }

/* ═══════════════ TERUGVOER ═══════════════ */
.stemme{ columns:2; column-gap:clamp(1.5rem,3vw,2.5rem); }
@media (max-width:820px){ .stemme{ columns:1; } }
.stem{
  break-inside:avoid;
  margin:0 0 clamp(1.5rem,3vw,2.5rem);
  padding:1.6rem 1.5rem;
  background:var(--paper);
  border-top:1px solid var(--rule);
}
.stem blockquote{ margin:0 0 1.1rem; }
.stem blockquote p{
  font-family:var(--serif);
  font-variation-settings:var(--serif-teks);
  font-size:1.05rem; line-height:1.48;
  letter-spacing:-.005em;
}
.stem blockquote p::before{ content:'\201C'; }
.stem blockquote p::after{ content:'\201D'; }
.stem figcaption{
  font-variation-settings:'wdth' 108,'wght' 620;
  font-size:.82rem; letter-spacing:.03em;
}
.stem figcaption span{
  display:block;
  font-variation-settings:'wdth' 100,'wght' 400;
  font-size:.76rem;
  color:var(--fg-dim);
  margin-top:.15rem;
}

/* ═══════════════ STUDIEGIDS ═══════════════ */
.gids{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:center;
}
@media (max-width:760px){ .gids{ grid-template-columns:1fr; } }
.gids__titel{
  font-size:clamp(1.5rem,3vw,2.2rem);
  margin-bottom:.85rem;
}
.gids p{ color:var(--fg-dim); max-width:54ch; }
.gids__knop{ margin:0; }

/* ═══════════════ AANSTUUR ═══════════════ */
.aanstuur{ max-width:56ch; }
.aanstuur__titel{ font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:.85rem; }
.aanstuur p{ color:var(--fg-dim); }
.aanstuur a{ color:var(--accent); }
.aanstuur__deel{ margin-top:1.6rem; }
.aanstuur__deel a{ text-decoration:none; }

/* ═══════════════ VOETSTUK ═══════════════ */
.voet{
  background:#040C0B;
  color:rgba(239,232,219,.72);
  padding-block:clamp(3.5rem,7vw,5.5rem) 0;
  border-top:1px solid rgba(239,232,219,.1);
  font-size:.9rem;
}
.voet__in{
  display:grid;
  grid-template-columns:1.6fr repeat(3, minmax(0,1fr));
  gap:clamp(2rem,4vw,3rem);
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
}
@media (max-width:900px){ .voet__in{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .voet__in{ grid-template-columns:1fr; } }
.voet__merk img{
  width:150px; height:auto;
  margin-bottom:1.2rem;
}
.voet__merk p{ max-width:34ch; font-size:.86rem; color:rgba(239,232,219,.6); }
.voet__kol h2{
  font-variation-settings:'wdth' 120,'wght' 620;
  text-transform:uppercase; letter-spacing:.17em;
  font-size:.63rem;
  color:var(--sand);
  margin-bottom:1rem;
}
.voet__kol li{ padding:.25rem 0; }
.voet__kol a{
  color:rgba(239,232,219,.78); text-decoration:none;
  border-bottom:1px solid rgba(239,232,219,.2);
}
.voet__kol a:hover{ color:var(--sand); border-bottom-color:var(--sand); }
.voet__fyn{
  display:flex; flex-wrap:wrap; gap:.5rem 2rem;
  justify-content:space-between;
  padding-block:1.5rem;
  border-top:1px solid rgba(239,232,219,.1);
  font-size:.78rem;
  color:rgba(239,232,219,.6);
}
.voet__fyn p{ margin:0; }

/* ═══════════════ ONTHULLING BY ROL ═══════════════ */
.reveal{ opacity:0; transform:translateY(24px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}

/* ═══════════════ MINDER BEWEGING ═══════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .berg__eyebrow,.berg__author,.berg__title,.berg__credit,
  .berg__date,.berg__lead,.berg__cta,.berg__micro{ opacity:1; transform:none; }
  .reveal{ opacity:1; transform:none; }
  .arc__path{ stroke-dashoffset:0; }
  .arc__dot{ opacity:1; transform:scale(1); }
  .arc__label{ opacity:1; }
  .skaal__balk{ transform:scaleX(1); }
  .btn:hover{ transform:none; }
  .galery figure:hover img{ transform:none; }
}

/* ═══════════════ DRUK ═══════════════ */
@media print{
  .nav,.berg__canvas,.berg__scrim,.berg__hint,.aanstuur__deel{ display:none !important; }
  body{ background:#fff; color:#000; }
  .band{ background:#fff !important; color:#000 !important; padding-block:1.5rem; --fg:#000; --fg-dim:#444; --rule:#ccc; --accent:#7a4a1e; }
  .berg{ min-height:auto; background:#fff; }
  .berg__title,.verhaal__quote,.skaal__prys{ color:#000; }
  a{ text-decoration:underline; }
}