@font-face{
  font-family:'Antonio';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/antonio-latin-400-normal.woff2?v=20260912a') format('woff2');
}
@font-face{
  font-family:'Antonio';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/antonio-latin-600-normal.woff2?v=20260912a') format('woff2');
}
@font-face{
  font-family:'Antonio';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/antonio-latin-700-normal.woff2?v=20260912a') format('woff2');
}
@font-face{
  font-family:'Share Tech Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/share-tech-mono-latin-400-normal.woff2?v=20260912a') format('woff2');
}

/* Globale reduced-motion-noodrem (auditrapport-item 11, WCAG 2.3.3): vangt
   elke CSS-transitie/-animatie op de site in één keer af voor wie
   "Verminder beweging" heeft aanstaan in het besturingssysteem — de
   flip-hover-chevrons, pil-hover-helderheid, focus-ring-transities, de
   skip-link-inschuif, dag-sprong-hover, enz. Specifieke, bewust ontworpen
   uitzonderingen (zoals de foto-highlight-gloed verderop, die een zinvol
   eindresultaat behoudt i.p.v. gewoon niets te doen) blijven gewoon
   functioneren omdat CSS die er verderop in dit bestand nog overheen staat. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

:root{
  --black:#000000;
  --void:#160b54;
  --void-raised:#201a68;
  --orange:#FF9C34;
  --orange-dim:#CC7A29;
  --lavender:#CC99CC;
  --periwinkle:#9999FF;
  --peach:#FFCC99;
  --salmon:#CC6666;
  --pale:#FFFF99;
  --ice:#99CCFF;
  --gold:#FFCC33;
  --panel-gap:6px;
  --bar-h:52px;
  --side-w:190px;
}

*{box-sizing:border-box;}
html,body{
  margin:0;
  background:var(--void);
  color:var(--orange);
  font-family:'Antonio', 'Arial Narrow', sans-serif;
  font-weight:600;
}
body{min-height:100vh;}

.mono{font-family:'Share Tech Mono', monospace; letter-spacing:.02em;}

a{color:inherit; text-decoration:none;}

/* Zichtbare focusstijl voor toetsenbord-/schakelaargebruik. Zonder dit viel
   je terug op de browser-standaardrand, die op de felgekleurde pillen
   (oranje/lavendel/periwinkle/...) makkelijk onzichtbaar of inconsistent
   per browser is — hierdoor is nooit te zien waar je bent zonder muis. */
.pill:focus-visible,
.thread-item:focus-visible,
.dest-card:focus-visible,
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible,
.day-jump a:focus-visible,
a.inline-link:focus-visible,
a.alert-link:focus-visible,
.travel-map-row:focus-visible,
.readout-quote:focus-visible,
.pill-row > button.pill:not(.pill-toggle):focus-visible{
  outline:3px solid var(--pale);
  outline-offset:2px;
}

/* Skip-link: eerste focusbare element op de pagina, springt direct naar
   <main> (id="main") zodat een toetsenbord-/schermlezergebruiker niet elke
   keer eerst door de volledige zijbalknavigatie (Hoofdscherm, Overzicht,
   Captain's Log, Stedentrips-flyout, ...) hoeft te tabben om bij de
   werkelijke pagina-inhoud te komen (WCAG 2.4.1 "Bypass Blocks").
   Standaard buiten beeld (links van het scherm), komt pas in zicht zodra
   'ie toetsenbordfocus krijgt. */
.skip-link{
  position:fixed;
  top:0; left:0;
  transform:translateY(-120%);
  z-index:1000;
  background:var(--black);
  color:var(--pale);
  font-family:'Share Tech Mono', monospace;
  font-weight:700;
  letter-spacing:.04em;
  padding:12px 20px;
  border:2px solid var(--pale);
  border-top:none;
  transition:transform .15s ease;
}
.skip-link:focus{
  transform:translateY(0);
  outline:none;
}

/* Alleen-voor-schermlezers-tekst: visueel onzichtbaar maar wel voorgelezen
   en programmatisch gekoppeld (audit-item 9: label voor het zoekveld, dat
   verder alleen een placeholder had). display:none/visibility:hidden zou
   het ook voor een schermlezer laten verdwijnen; deze clip-techniek niet. */
.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;
}

/* ======= FRAME ======= */
.lcars-frame{
  display:grid;
  grid-template-rows:var(--bar-h) 1fr var(--bar-h);
  grid-template-columns:var(--side-w) 1fr;
  height:100vh;
  height:100dvh;
  gap:var(--panel-gap);
  padding:var(--panel-gap);
}

/* elbow: a vertical bar (left border) + horizontal bar (top/bottom border) joined
   by rounding the inner corner. width/height are the "content" box, kept tiny. */
.elbow{
  width:36px;
  height:0;
}
.elbow-tl{
  border-style:solid;
  border-color:var(--orange);
  border-width:var(--bar-h) 0 0 var(--side-w);
  border-top-left-radius:90px 90px;
}
.elbow-bl{
  border-style:solid;
  border-color:var(--orange);
  border-width:0 0 var(--bar-h) var(--side-w);
  border-bottom-left-radius:90px 90px;
}

.bar{
  background:var(--orange);
  height:var(--bar-h);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0 22px;
  color:var(--black);
  font-size:1.05rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
}
.bar-top{grid-column:2; grid-row:1;}
.bar-bottom{grid-column:2; grid-row:3; justify-content:space-between;}
.top-row{grid-column:1; grid-row:1; display:flex;}
.bottom-row{grid-column:1; grid-row:3; display:flex; align-items:flex-end;}

.bar-seg{
  height:100%;
  display:flex;
  align-items:center;
  padding:0 18px;
  color:var(--black);
  text-transform:uppercase;
  font-size:.85rem;
}
.bar-seg.lav{background:var(--lavender); margin-left:var(--panel-gap);}
.bar-seg.per{background:var(--periwinkle); margin-left:var(--panel-gap);}
.bar-seg.ice{background:var(--ice); margin-left:var(--panel-gap);}

/* Taal-switch in de top-bar (punt 99, EN-pilot): twee mini-pillen NL/EN
   binnen één .bar-seg.ice. De actieve taal is donker/gevuld, de andere
   iets gedimd maar duidelijk klikbaar. Alleen zichtbaar op pagina's die
   ook echt een vertaling hebben (lang_switch in build_log_pages.py /
   het EN-page-script) -- op alle andere pagina's blijft de top-bar
   precies zoals hij was. */
.bar-seg.lang-switch{ gap:4px; }
.bar-seg.lang-switch a,
.bar-seg.lang-switch span.active{
  color:var(--black);
  text-decoration:none;
  padding:3px 8px;
  border-radius:10px;
  font-weight:700;
  /* A11y-fix (11 sept 2026, punt 133, auditrapport §3.7/§5 item 5): was
     opacity:.5 op zwart-op-ice = 3.52:1 (faalt 1.4.3's 4.5:1-eis voor
     normale tekst, incl. de 13.6px/11.2px-mobiele variant). .75 geeft
     ≈6.3:1, ruim boven de eis, met behoud van het gedimde "niet actief"-
     gevoel t.o.v. de volle .active-status. */
  opacity:.75;
}
.bar-seg.lang-switch a:hover{ opacity:.8; }
/* De actieve taal is geen link naar zichzelf (audit-item 12: href="#" is
   geen echte bestemming) -- sinds punt 140 een <span>. Dezelfde selectors
   blijven hieronder ook op .active van vóór deze wijziging werken, mocht
   ergens nog een <a class="active"> voorkomen. */
.bar-seg.lang-switch a.active,
.bar-seg.lang-switch span.active{
  opacity:1;
  background:var(--black);
  color:var(--ice);
  cursor:default;
}

/* ======= SIDEBAR ======= */
.lcars-sidebar{
  grid-column:1;
  grid-row:2;
  display:flex;
  flex-direction:column;
  gap:var(--panel-gap);
  /* was overflow:hidden — met genoeg bestemmingen/jaren tegelijk opengeklapt
     liep de zijbalk vol en werd de statusbox (of een deel van het menu)
     gewoon van het scherm geduwd zonder enige indicatie dat er meer was.
     Nu scrolt de zijbalk zelf als het niet meer past, en blijft de
     statusbox (zie .readout) zichtbaar onderaan vastzitten. */
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
}
.pill{
  display:block;
  background:var(--orange);
  color:var(--black);
  border-radius:26px;
  padding:14px 10px 14px 24px;
  font-size:1.15rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  transition:filter .15s ease, transform .1s ease;
}
/* Stedentrips heeft zelf geen hub-pagina en is dus altijd een toggle, geen
   navigatielink (audit-item 12: "href=#" is geen echte bestemming) — nu een
   echt <button>. Kleine reset omdat een <button> anders zijn eigen
   browser-standaardrand/-lettertype/-uitlijning meebrengt; .pill hierboven
   regelt verder alles (kleur, radius, padding, transition). */
.pill-row > button.pill:not(.pill-toggle){
  border:none;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  width:100%;
  -webkit-appearance:none;
  appearance:none;
}
.pill:hover{filter:brightness(1.2);}
.pill.lav{background:var(--lavender);}
.pill.per{background:var(--periwinkle);}
.pill.peach{background:var(--peach);}
.pill.salmon{background:var(--salmon); color:var(--black);}
.pill.ice{background:var(--ice); color:var(--black);}
.pill.gold{background:var(--gold); color:var(--black);}
/* .active moet ná de kleurvarianten staan, anders wint bijv. .salmon altijd
   van .active en verschijnt de "je bent hier"-markering nooit (bug die
   hiervoor al sluimerde op elke gekleurde nav-knop, nu meteen meegefixt) */
.pill.active{background:var(--pale); color:var(--black);}
/* Als de hoofd-pil in een .pill-row (Stedentrips-achtig toggle-koppel)
   toevallig ook de huidige pagina is -- zoals "Zomervakanties" met zijn
   ene sub-pagina Kroatie 2026 -- kleurt tot dusver alleen de hoofd-pil
   geel (.active), terwijl het losse >-knopje ernaast salmon blijft. Omdat
   beide onderdelen samen oogen als EEN pil (zelfde afgeronde vorm, alleen
   in het midden doorgeknipt), zag dat eruit als een kleurfout in plaats
   van een bewuste "je bent hier"-markering (gemeld door Marc, 11 sept
   2026 avond). Het knopje kleurt daarom voortaan gewoon mee. */
.pill-row > .pill.active ~ .pill-toggle{
  background:var(--pale);
  color:var(--black);
}
/* Subtielere "je zit in deze sectie"-ring voor de hub-pil (bijv. "Rome")
   wanneer je op één van zijn jaar-subpagina's zit — bewust géén volle
   .active-vulling, want die betekent hier letterlijk "dit IS de huidige
   pagina" (zie nav_gen.py voor de logica). Werkt via box-shadow i.p.v.
   background, dus botst niet met de kleurvarianten hierboven. */
.pill.group-active{ box-shadow:inset 0 0 0 3px var(--pale); }
/* Zelfde verhaal als hierboven bij .active, maar dan voor de dunnere
   "je-zit-in-deze-sectie"-ring: als de hoofd-pil in een .pill-row deze
   ring krijgt (bijv. "Stedentrips" wanneer je op rome.html/londen.html/...
   zit), stopte de ring tot dusver abrupt bij het losse >-knopje ernaast --
   zag eruit als een afgebroken randje in plaats van een nette ring om de
   hele pil (gemeld door Marc, 11 sept 2026 avond, direct na de .active-fix
   hierboven). */
.pill-row > .pill.group-active ~ .pill-toggle{
  box-shadow:inset 0 0 0 3px var(--pale);
}

/* Londen-uitklapmenu: Log 2025 en Missie 2026 hangen onder de Londen-knop
   en klappen open bij hover (of bij focus, voor toetsenbordgebruik), zodat
   de zijbalk niet met 6 losse knoppen vol staat. */
.pill-group{ position:relative; }
/* A11y-herziening (11 sept 2026, stap 6/8 auditrapport item 4): de
   toggle-knop was een <span role="button"> GENEST in de <a class="pill">
   (4.1.2 -- interactief-in-interactief, een klik erop bubbelde over de
   link heen). js/lcars.js wikkelt de link nu in een nieuwe <div
   class="pill-row"> en voegt de knop toe als BROER van de link daarin
   (i.p.v. een kind ervan) -- deze wrapper, niet .pill-group zelf, is nu de
   flex-rij. Dat is bewust: op mobiel staat .pill-group op display:contents
   (zie media query verderop) zodat de rij + het submenu los in de zijbalk
   stromen; had de knop rechtstreeks als kind van .pill-group gezeten, dan
   was hij op mobiel zelf ook "los" komen te staan (een eigen volle-breedte
   rij i.p.v. netjes naast de pil) i.p.v. binnen deze rij te blijven. */
.pill-row{
  display:flex;
  align-items:stretch;
}
/* 11 sept 2026 (avond) -- Marc's feedback op de eerste versie hierboven
   (los rond knopje met een gat ernaast): "ik vind dit visueel niet een
   mooie verbetering". Herzien naar een AANGESLOTEN split-pil i.p.v. twee
   losse vormen: de link en de toggle delen dezelfde volle kleur en
   pil-afronding, alleen de kant waar ze samenkomen is recht i.p.v. rond,
   met een dun streepje als scheiding tussen de twee klikzones. Oogt als
   één doorlopende pil met een uitklap-vakje aan het eind, i.p.v. een pil
   plus een op zichzelf staand knopje. */
.pill-row > a.pill{
  flex:1 1 auto;
  min-width:0;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
.pill-group .pill-toggle{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  padding:0 12px;
  font-size:.85rem;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  border:none;
  border-left:2px solid rgba(0,0,0,.18);
  cursor:pointer;
  font-family:inherit;
  transition:transform .2s ease, filter .15s ease;
}
.pill-group .pill-toggle:hover{
  filter:brightness(1.2);
}
.pill-group .pill-toggle:focus-visible{
  /* A11y-fix (2.4.7/2.4.11, 11 sept 2026): was uitsluitend een subtiele
     achtergrondkleur (1.25:1 contrast op salmon) met outline:none -- voor
     een toetsenbordgebruiker onzichtbaar. */
  outline:3px solid var(--pale);
  outline-offset:2px;
}
.pill-group:hover .pill-toggle,
.pill-group.open .pill-toggle{
  transform:rotate(180deg);
}
.pill-sub{
  display:flex;
  flex-direction:column;
  gap:var(--panel-gap);
  max-height:0;
  margin-top:0;
  overflow:hidden;
  opacity:.9;
  transition:max-height .28s ease, margin-top .28s ease;
}
.pill-group:hover .pill-sub,
.pill-group.open .pill-sub,
.pill-group:focus-within .pill-sub{
  /* was 160px — precies genoeg voor 4 subpagina's, te krap zodra een
     bestemming een 5e/6e jaar krijgt (dan werd het menu simpelweg afgekapt).
     Ruim boven het praktische maximum gezet; de zijbalk scrolt nu toch al
     zelf (zie .lcars-sidebar) als het geheel niet meer past. */
  max-height:420px;
  margin-top:var(--panel-gap);
}
/* .js-toggled (gezet door js/lcars.js bij een klik op .pill-toggle) keert
   de standaardstatus hierboven om. Voor een sectie die van serverwege al
   openstaat (.open) betekent dit: dichtklikken, en dicht blijven ook als de
   muis er toevallig overheen hovert. Voor een andere sectie betekent het:
   openklikken zonder te hoeven hoveren. Hogere selector-specificiteit dan
   de regels hierboven, dus wint altijd, ongeacht hover/focus. */
.pill-group.open.js-toggled .pill-sub{
  max-height:0;
  margin-top:0;
}
.pill-group.open.js-toggled .pill-toggle{
  transform:rotate(0deg);
}
.pill-group:not(.open).js-toggled .pill-sub{
  max-height:420px;
  margin-top:var(--panel-gap);
}
.pill-group:not(.open).js-toggled .pill-toggle{
  transform:rotate(180deg);
}
.pill-sub .pill{
  font-size:.85rem;
  padding:9px 10px 9px 34px;
  border-radius:20px;
}

/* ======= Flyout-menu i.p.v. naar-beneden-uitklappen, 9 sept 2026 =======
   Marc: "de submenu's klappen nu naar onderen open [...] kan dat niet naar
   rechts openklappen en daar een 2de rij openen?" — de max-height-accordeon
   hierboven duwde bij een langere lijst (of meerdere tegelijk open) de rest
   van de zijbalk omlaag, wat zowel scroll-ellende gaf als (na de Star
   Trek-quote, punt 84/85) een overlappende readout-box. Een flyout die als
   los paneel over de content heen zweeft (i.p.v. de content-kolom smaller
   te maken — Marc: "het menu mag over de content heen anders wordt dat te
   smal") lost dat structureel op: de content-breedte blijft altijd
   constant, ongeacht welk menu open staat.
   Alleen voor desktop (>640px) — op mobiel (zie mediaquery verderop) valt
   dit terug op precies dezelfde in-flow .pill-sub-weergave als voorheen,
   want de losse linker-kolom-layout bestaat daar toch al niet; een aparte
   mobiele redesign-ronde volgt later apart.
   Hergebruikt bewust hetzelfde hover+klik-toggle-mechanisme als hierboven
   (.open/.js-toggled/:hover/:focus-within, punt 76) — alleen de
   eigenschappen die het openen/sluiten animeren zijn anders
   (opacity/positie i.p.v. max-height), omdat het paneel nu
   position:absolute staat en dus geen ruimte in de flow-layout meer
   inneemt. De HTML-klasse blijft ook gewoon "pill-sub" dragen (naast de
   nieuwe "flyout-panel") zodat de bestaande mobiele CSS ongewijzigd blijft
   werken. */
@media (min-width:641px){
  /* position:fixed i.p.v. absolute, met top/left die js/lcars.js bij het
     openen berekent (op basis van de positie van de bestemmingsknop op het
     scherm) — .lcars-sidebar staat bewust op overflow-x:hidden (zie
     hierboven, tegen een horizontale scrollbar), en dat knipt een
     position:absolute-paneel gewoon af zodra het over de rand van de
     zijbalk heen zou moeten steken. position:fixed ontsnapt aan die
     overflow-clipping van een voorouder-element. */
  .pill-group.flyout > .flyout-panel{
    position:fixed;
    left:0;
    top:0;
    margin-left:0;
    margin-top:0;
    width:206px;
    max-height:none;
    background:var(--void-raised);
    border-radius:14px;
    padding:10px;
    box-shadow:0 10px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
    opacity:0;
    visibility:hidden;
    transform:translateX(-8px);
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index:60;
  }
  /* Was ook :hover en :focus-within — Marc, 9 sept 2026: "haal het hoveren
     maar weg, dat zit nu alleen nog maar in de weg." Puur klik-gestuurd nu:
     alleen .open (serverwege, als je al in die sectie/subpagina zit) opent
     het paneel zonder klik; verder bepaalt uitsluitend een klik (via
     .js-open/.js-closed hieronder, met !important) of het paneel zichtbaar
     is. Dat maakt de eerdere sluit-bugfix (punt 87) ook meteen overbodig
     complex: er is nu geen hover-status meer die een klik kan overrulen. */
  .pill-group.flyout.open > .flyout-panel{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
    transition:opacity .18s ease, transform .18s ease;
  }
  /* .js-toggled zelf bestaat nog (js/lcars.js zet 'm nog steeds, puur voor
     het draaiende pijltje-icoon — ongewijzigd) maar bepaalt de zichtbaarheid
     van het paneel zelf niet meer: sinds hover weg is (zie hierboven) zijn
     .js-open/.js-closed hieronder de enige, ondubbelzinnige klik-status.
     Die twee vervingen oorspronkelijk alleen de :hover-vs-klik-botsing
     (punt 87), maar zijn na het weghalen van hover simpelweg de volledige
     regeling geworden — dus bewust geen aparte .js-toggled-regels meer
     hier, dat zou nu twee routes naar hetzelfde resultaat zijn. */
  .pill-group.flyout.js-closed > .flyout-panel{
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateX(-8px);
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .pill-group.flyout.js-open > .flyout-panel{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateX(0);
    transition:opacity .18s ease, transform .18s ease;
  }
}
/* Binnen het flyout-paneel: "steden"-overzicht (met een chevron per stad om
   door te klikken naar de jaren/logs) en per-stad-pagina's die dat overzicht
   vervangen i.p.v. er cascaderend naast te openen — op advies besproken met
   Marc, zodat het paneel op een gewoon laptopscherm niet te breed wordt. */
.flyout-page{
  display:flex;
  flex-direction:column;
  gap:var(--panel-gap);
}
.flyout-page[hidden]{ display:none; }
.flyout-item{
  display:flex;
  align-items:stretch;
}
.flyout-item > a.pill{
  flex:1 1 auto;
  min-width:0;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
/* A11y-herziening (11 sept 2026, stap 6/8 auditrapport item 4): was een
   <span role="button"> GENEST in de <a class="pill ... flyout-item">
   (4.1.2); nav_gen.py rendert de link en het pijltje nu als BROERS binnen
   een omringende <div class="flyout-item"> (zie hierboven) i.p.v. het
   pijltje genest in de link. Het pijltje draagt zelf ook .pill + dezelfde
   kleurklasse als de link ernaast, dus de achtergrondkleur komt
   automatisch mee. Zelfde aangesloten split-pil-behandeling als
   .pill-toggle hierboven (herzien na Marc's feedback, 11 sept 2026 avond,
   op de eerste, losse versie) i.p.v. een apart rond knopje met een gat
   ernaast. */
.flyout-item > .flyout-chevron{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  padding:0 10px;
  font-size:.85rem;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  border:none;
  border-left:2px solid rgba(0,0,0,.18);
  cursor:pointer;
  font-family:inherit;
  transition:filter .15s ease, transform .2s ease;
}
.flyout-item > .flyout-chevron:hover{
  filter:brightness(1.2);
}
.flyout-item > .flyout-chevron:focus-visible{
  outline:3px solid var(--pale);
  outline-offset:2px;
}
/* Zelfde "flip"-hover als .pill-toggle hierboven (Marc, 11 sept 2026 avond:
   "het gele vierkant laat de pil zien die omklapt, dat is leuk [...] dan
   dat daar ook?" over de stad-chevrons in het jaren-paneel) — hover op de
   hele rij (niet alleen het knopje zelf) laat het pijltje 180° draaien,
   voor dezelfde speelse hint als bij de hoofdtoggle. */
.flyout-item:hover > .flyout-chevron{
  transform:rotate(180deg);
}
/* Herzien van plat, gedimd tekstje naar een echte gekleurde pil (Marc, 11
   sept 2026 avond: "kan dat [het gele-vierkant-effect] hier ook ipv het
   woord steden om terug te gaan" over deze terugknop) — draagt nu net als
   de stad-pillen zelf .pill + dest["color"] (zie nav_gen.py), dus erft de
   kleur/vorm/hover-helderheid van de gewone .pill-regels + de kleinere
   maat van .pill-sub .pill hieronder. Alleen layout/uitlijning blijft
   hier eigen. */
.flyout-back{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  border:none;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  padding:9px 14px;
}
.flyout-back-arrow{
  display:inline-flex;
  transition:transform .2s ease;
}
/* Zelfde flip-hover als de hoofdtoggle/stad-chevrons hierboven — alleen het
   pijltje draait om (niet de hele knoptekst), zodat "Steden"/"Cities"
   leesbaar blijft. */
.flyout-back:hover .flyout-back-arrow{
  transform:rotate(180deg);
}
.flyout-back:focus-visible{
  outline:3px solid var(--pale);
  outline-offset:2px;
}

/* Decoratieve opvulling onder de navigatieknoppen, puur om de "readout"-box
   naar de onderkant van de zijbalk te duwen. Stond eerst als een effen
   rechthoek, die voor een nieuwe bezoeker gemakkelijk leest als een kapot of
   leeg element. Een gestreept motief bleek in de praktijk juist te technisch
   en te hard afsteken tegen de zachte, vlakke pillen eromheen — daarom nu een
   zachte kleurverloop-vulling: zelfde volle ronde pil-vorm als de knoppen
   erboven (geen rand, geen harde lijnen), die geleidelijk wegvloeit naar de
   achtergrondkleur. Dat oogt als een bewust "uitdovend" lichtaccent i.p.v.
   ontbrekende inhoud, zonder een vreemde textuur te introduceren. */
.pill-fill{
  flex:1;
  min-height:24px;
  border-radius:26px;
  background:linear-gradient(180deg, var(--orange-dim) 0%, var(--orange-dim) 35%, var(--void-raised) 100%);
  opacity:.6;
}
.readout{
  background:#1a1200;
  border-radius:10px;
  padding:10px 14px;
  color:var(--pale);
  font-size:.74rem;
  line-height:1.5;
  /* blijft nu vastzitten onderaan de (scrollbare) zijbalk, in plaats van
     ergens halverwege weg te scrollen zodra er meer navigatie open staat
     dan er in beeld past. */
  position:sticky;
  bottom:0;
  flex-shrink:0;
}
/* Roterende Star Trek-quote onderaan de readout, 9 sept 2026 — los blokje
   dat js/lcars.js erin zet, met een subtiele scheidingslijn boven de
   bestaande crew-info en een eigen kleur zodat het als "los berichtje"
   leest, niet als nog een statusregel. */
.readout-quote{
  display:block;
  margin-top:8px;
  padding-top:8px;
  border:none;
  border-top:1px solid rgba(153,153,255,.3);
  cursor:pointer;
  /* was een <div>, nu een <button> (audit-item 12) */
  background:transparent;
  font:inherit;
  text-align:left;
  width:100%;
  color:inherit;
}
/* Vaste, beperkte hoogte i.p.v. "zo lang als de quote toevallig is" — anders
   verschilt de hoogte van de readout-box per willekeurige quote, en omdat
   die box sticky onderaan de zijbalk staat (punt 65) gaat een langere quote
   dan zichtbaar over de navigatiepillen erboven heen liggen (gemeld door
   Marc, 9 sept 2026). Lange quotes worden na 2 regels afgekapt met "…". */
.readout-quote .rq-text{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  min-height:3em;
  font-style:italic;
  color:var(--periwinkle);
}
.readout-quote .rq-source{
  display:block;
  margin-top:3px;
  font-size:.66rem;
  color:var(--pale);
  opacity:.65;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.readout-quote:hover .rq-text{opacity:.8;}

/* ======= CONTENT ======= */
.lcars-content{
  grid-column:2;
  grid-row:2;
  background:var(--void);
  border:2px solid #1a1200;
  padding:28px 34px;
  overflow:auto;
  color:#e8d9b8;
}
.lcars-content h1{
  color:var(--orange);
  font-size:2.6rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:0 0 4px;
}
.lcars-content .subtitle{
  color:var(--periwinkle);
  text-transform:uppercase;
  font-size:.9rem;
  letter-spacing:.08em;
  margin-bottom:24px;
}
.lcars-content p{
  font-family:system-ui, sans-serif;
  font-weight:400;
  line-height:1.7;
  max-width:680px;
  color:#d8cbb0;
}
.lcars-content a.inline-link{
  color:var(--periwinkle);
  border-bottom:1px solid var(--periwinkle);
}

/* Viewscreen (hero / slider frame) */
.viewscreen{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:3px solid var(--orange);
  height:56vh;
  min-height:340px;
  margin-bottom:28px;
  background:#000;
}
.vs-slide{
  position:absolute; inset:0;
  display:block;
  opacity:0;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  pointer-events:none;
  transition:opacity 1.1s ease-in-out;
}
.vs-slide.active{opacity:1; pointer-events:auto;}
.vs-slide .bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(1.05) contrast(1.05);
  transition:filter .4s ease, transform .4s ease;
}
.vs-slide:hover .bg{
  filter:saturate(1.15) contrast(1.08) brightness(1.08);
  transform:scale(1.02);
}
.vs-slide .bg-overlay{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.05) 45%, transparent 70%);
  pointer-events:none;
}
.vs-caption{
  position:absolute; left:26px; bottom:22px;
  color:var(--pale);
  z-index:2;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .8s ease .2s, transform .8s ease .2s;
}
.vs-slide.active .vs-caption{opacity:1; transform:translateY(0);}
.vs-caption .designation{
  font-family:'Share Tech Mono', monospace;
  color:var(--periwinkle);
  font-size:.75rem;
  letter-spacing:.1em;
  margin-bottom:4px;
}
.vs-caption h2{
  margin:0;
  font-size:1.9rem;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.vs-slide:focus-visible{
  /* Viewscreen heeft overflow:hidden (nodig om de andere slides te
     verbergen) -- een gewone outline zou daardoor grotendeels wegvallen.
     Negatieve offset trekt de ring naar binnen, ruim binnen de clip. */
  outline:3px solid var(--pale);
  outline-offset:-6px;
}
.vs-pause{
  position:absolute; top:14px; right:14px; z-index:3;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  border:2px solid var(--orange-dim);
  background:rgba(0,0,0,.35);
  color:var(--orange);
  font-size:.85rem;
  cursor:pointer;
  line-height:1;
}
.vs-pause:hover{border-color:var(--orange); color:var(--pale);}
.vs-pause:focus-visible{outline:3px solid var(--pale); outline-offset:2px;}
.vs-dots{
  position:absolute; right:22px; bottom:22px; z-index:3;
  display:flex; gap:8px;
}
.vs-dots button{
  /* A11y-fix (2.5.8, 11 sept 2026): was 26x10px, ruim onder het minimale
     24x24px-tikdoel. De zichtbare "pil" blijft 10px hoog (via ::after),
     de knop zelf krijgt een volle 24px hoge tik-/focuszone eromheen. */
  width:26px; height:24px;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
}
.vs-dots button::after{
  content:"";
  display:block;
  width:26px; height:10px;
  border-radius:6px;
  background:rgba(255,156,52,.35);
}
.vs-dots button.active::after{background:var(--orange);}
.vs-dots button:focus-visible{outline:3px solid var(--pale); outline-offset:2px;}

.vs-frame-label{
  position:absolute; top:14px; left:18px; z-index:3;
  font-family:'Share Tech Mono', monospace;
  color:var(--orange);
  font-size:.72rem;
  letter-spacing:.08em;
  background:rgba(0,0,0,.5);
  padding:3px 8px;
  border-radius:4px;
}

/* Destination grid */
.dest-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:var(--panel-gap);
  margin-top:8px;
}
.dest-card{
  position:relative;
  display:block;
  aspect-ratio:4/3;
  border-radius:12px;
  overflow:hidden;
  border:2px solid var(--orange-dim);
}
.dest-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease;
}
.dest-card:hover img{transform:scale(1.05);}
.dest-card .tag{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(to top, rgba(0,0,0,.85), transparent);
  color:var(--orange);
  padding:10px 14px 8px;
  font-size:1.05rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* ======= OVERZICHT (overzicht.html): alle bestemmingen x jaren op een rij
   met een zoekveld erboven, zie gen_overzicht.py. Audit-bevinding "Geen
   manier om iets te vinden zonder te weten waar het zat", 8 sept 2026. ======= */
.overzicht-search{ margin:4px 0 26px; }
.overzicht-search input{
  width:100%;
  max-width:440px;
  background:var(--void-raised);
  border:2px solid var(--orange-dim);
  border-radius:999px;
  padding:12px 20px;
  font-family:'Share Tech Mono', monospace;
  font-size:.9rem;
  color:var(--pale);
}
.overzicht-search input::placeholder{ color:#a39ab8; } /* was #8b7f9e, 3.99:1 op --void-raised; #a39ab8 geeft 5.59:1 (audit-item 8) */
.overzicht-search input:focus{ outline:none; border-color:var(--orange); }
.overzicht-count{
  font-family:'Share Tech Mono', monospace;
  font-size:.72rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#a39ab8; /* was #8b7f9e, audit-item 8 contrastfix */
  margin:8px 0 0;
}

.overzicht-groups{ display:flex; flex-direction:column; gap:28px; }
.overzicht-group-label{
  font-size:1.1rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin:0 0 10px;
}
.overzicht-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:10px;
}
.overzicht-card{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:14px 16px;
  border-radius:8px;
  background:var(--void-raised);
  border-left:5px solid var(--orange-dim);
  transition:transform .12s ease, filter .12s ease;
}
.overzicht-card:hover{ transform:translateX(3px); filter:brightness(1.2); }
.overzicht-card .oc-label{
  font-size:1.05rem;
  color:var(--pale);
}
.overzicht-card.gold{ border-left-color:var(--gold); }
.overzicht-card.peach{ border-left-color:var(--peach); }
.overzicht-card.ice{ border-left-color:var(--ice); }
.overzicht-card.salmon{ border-left-color:var(--salmon); }
.overzicht-card[hidden]{ display:none; }
.overzicht-group[hidden]{ display:none; }
.overzicht-empty{
  font-family:'Share Tech Mono', monospace;
  color:#a39ab8; /* was #8b7f9e, audit-item 8 contrastfix */
  margin-top:8px;
}
.overzicht-empty[hidden]{ display:none; }

.log-entry{
  border-top:2px solid #241a05;
  margin-top:32px;
  padding-top:20px;
  /* geeft wat lucht boven de kop als je hier via een dag-sprong-link (zie
     .day-jump) naartoe springt, i.p.v. dat de titel strak tegen de rand
     van het scrollgebied aan komt te staan. */
  scroll-margin-top:16px;
}
/* Elke dag opent nu met een kleuraccent boven de kop, in dezelfde kleur die
   verderop toch al de kaartjes/routelijn van die dag kleurt (audit-bevinding
   "Elke dag opent visueel identiek", 8 sept 2026) — i.p.v. dat elke dag met
   exact dezelfde donkere lijn begint. */
.log-entry[data-color="1"]{ border-top-color:var(--orange); }
.log-entry[data-color="2"]{ border-top-color:var(--lavender); }
.log-entry[data-color="3"]{ border-top-color:var(--periwinkle); }
.log-entry[data-color="4"]{ border-top-color:var(--peach); }
.log-entry[data-color="5"]{ border-top-color:var(--salmon); }
.log-entry[data-color="6"]{ border-top-color:var(--ice); }

/* Dag-sprong-navigatie: een rij ankerlinks direct onder de intro-tekst van
   een reisverslag, zodat je bij een lange reis (meerdere dagen, tientallen
   foto's) niet blind hoeft te scrollen om bij een specifieke dag te komen.
   Alleen aanwezig op pagina's met meer dan 1 dag (zie gen_from_manifest.py
   / de handmatige toevoeging bij Kroatië 2026). Elke link krijgt dezelfde
   kleur als de dag zelf (kaartrand/routelijn), zodat je 'm meteen herkent
   zodra je er middenin zit. */
.day-jump{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:-8px 0 30px;
}
.day-jump a{
  padding:6px 14px;
  border-radius:999px;
  font-size:.72rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  background:var(--void-raised);
  border:1px solid var(--orange-dim);
  color:var(--orange);
  transition:filter .15s ease, transform .1s ease;
}
.day-jump a:hover{filter:brightness(1.3);}
.day-jump a[data-color="1"]{border-color:var(--orange); color:var(--orange);}
.day-jump a[data-color="2"]{border-color:var(--lavender); color:var(--lavender);}
.day-jump a[data-color="3"]{border-color:var(--periwinkle); color:var(--periwinkle);}
.day-jump a[data-color="4"]{border-color:var(--peach); color:var(--peach);}
.day-jump a[data-color="5"]{border-color:#e08080; color:#e08080;} /* was var(--salmon) #CC6666, 4.02:1 op --void-raised; #e08080 geeft 5.37:1 (WCAG 1.4.3, audit-item 8) */
.day-jump a[data-color="6"]{border-color:var(--ice); color:var(--ice);}
.log-entry .stardate{
  font-family:'Share Tech Mono', monospace;
  color:var(--periwinkle);
  font-size:.8rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.log-entry h2{
  color:var(--pale);
  font-size:1.5rem;
  text-transform:uppercase;
  margin:0 0 10px;
}

.lcars-content ul{
  font-family:system-ui, sans-serif;
  font-weight:400;
  line-height:1.7;
  max-width:680px;
  color:#d8cbb0;
  margin:0 0 16px;
  padding-left:22px;
}
.lcars-content ul li{margin-bottom:8px;}
.lcars-content ul li strong{color:var(--pale);}

.alert-panel{
  background:var(--void-raised);
  border:2px solid var(--gold);
  border-left-width:14px;
  border-radius:0 12px 12px 0;
  padding:18px 24px;
  margin-bottom:28px;
  max-width:680px;
}
.alert-panel .alert-label{
  font-family:'Share Tech Mono', monospace;
  color:var(--gold);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.alert-panel p{margin:0 0 10px;}
.alert-panel p:last-child{margin-bottom:0;}
.alert-panel a.alert-link{
  color:var(--gold);
  font-weight:700;
  font-size:1.08em;
  text-decoration:underline;
  text-underline-offset:3px;
}
.alert-panel a.alert-link:hover{color:var(--pale);}

.countdown-panel{
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  background:var(--void-raised);
  border:2px solid var(--ice);
  border-left-width:14px;
  border-radius:0 12px 12px 0;
  padding:16px 22px;
  margin-bottom:22px;
}
.countdown-panel #countdown-value{
  font-family:'Antonio', sans-serif;
  font-size:2.4rem;
  font-weight:700;
  color:var(--orange);
  letter-spacing:.02em;
}
.countdown-panel .countdown-label{
  font-size:.85rem;
  color:var(--periwinkle);
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* Weersvoorspelling bij een aankomende missie, 9 sept 2026 — live opgehaald bij
   elk paginabezoek via Open-Meteo (geen API-key nodig), dus altijd actueel
   zonder dat dit handmatig bijgehouden hoeft te worden. Weerdiensten voorspellen
   doorgaans zo'n 16 dagen vooruit; ligt de vertrekdatum verder weg, dan toont
   het paneel een nette "nog even geduld"-tekst i.p.v. te gokken. */
.weather-panel{
  background:var(--void-raised);
  border:2px solid var(--periwinkle);
  border-left-width:14px;
  border-radius:0 12px 12px 0;
  padding:14px 22px 16px;
  margin-bottom:22px;
}
.weather-panel-label{
  font-size:.8rem;
  color:var(--periwinkle);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0 0 8px; /* was een div, nu een <h2> (audit-item 9) — expliciete
    margin overschrijft de browser-standaard kop-marges, zodat het uiterlijk
    ongewijzigd blijft */
}
.weather-days{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
}
.weather-day{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:84px;
}
.weather-day .wd-date{
  font-size:.72rem;
  color:var(--pale);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.weather-day .wd-desc{
  font-size:.85rem;
  color:var(--ice);
}
.weather-day .wd-temp{
  font-family:'Antonio', sans-serif;
  font-size:1.3rem;
  font-weight:700;
  color:var(--orange);
}
.weather-days.weather-pending{
  font-size:.85rem;
  color:var(--periwinkle);
  text-transform:none;
  letter-spacing:normal;
}

@media (max-width:760px){
  :root{--side-w:110px; --bar-h:40px;}
  .lcars-content{padding:18px 16px;}
  .lcars-content h1{font-size:1.7rem;}
  .pill{font-size:.85rem; padding:10px 6px 10px 14px;}
  .vs-caption h2{font-size:1.3rem;}
  .bar{font-size:.8rem; height:auto; min-height:var(--bar-h); flex-wrap:wrap; white-space:normal; overflow:visible; padding:8px 14px;}
  .bar-seg{font-size:.75rem;}
}

/* Phones: the fixed left sidebar + elbow corners don't work in a narrow column,
   so below this width the frame drops to a single column. The nav pills become
   a horizontal, wrapping row above the content instead of a tall left rail. */
@media (max-width:640px){
  .lcars-frame{
    grid-template-columns:1fr;
    grid-template-rows:auto auto 1fr auto;
    height:auto;
    min-height:100vh;
    min-height:100dvh;
    padding:4px;
    gap:4px;
  }
  .top-row, .bottom-row{display:none;}
  .bar-top, .bar-bottom{
    grid-column:1;
    height:auto;
    min-height:var(--bar-h);
    flex-wrap:wrap;
    white-space:normal;
    overflow:visible;
    padding:8px 12px;
    gap:4px;
  }
  .bar-top{grid-row:1;}
  .bar-bottom{grid-row:4;}
  .bar-seg{font-size:.7rem; padding:5px 12px; height:auto;}

  .lcars-sidebar{
    grid-column:1;
    grid-row:2;
    flex-direction:row;
    flex-wrap:wrap;
  }
  .pill{
    flex:0 0 auto;
    /* verticale padding omhoog (was 9px) zodat het tikgebied de comfortabele
       ~44px duimregel haalt i.p.v. de ~34px van hiervoor. */
    padding:13px 16px;
    font-size:.8rem;
    border-radius:16px;
  }
  /* De hoofd-pil in een .pill-row (Stedentrips/Zomervakanties naast hun
     losse >-knopje) deelt de rijbreedte met dat knopje. Bij de Engelse
     tweewoordslabel "Summer Holidays" meldde Marc een regelbreuk op zijn
     telefoon die in geen van onze eigen testbreedtes (320-375px) te
     reproduceren was -- vermoedelijk een klein verschil in hoe Safari de
     letterbreedte van het Antonio-lettertype meet t.o.v. onze testbrowser.
     Iets minder zijpadding hier geeft in elk geval wat marge terug, zonder
     het duim-tikgebied merkbaar kleiner te maken (verticale padding blijft
     gelijk). */
  .pill-row > a.pill, .pill-row > button.pill:not(.pill-toggle){
    padding-left:12px;
    padding-right:8px;
  }
  .pill-fill{display:none;}
  /* de statusbox (missie/bemanning) is pure sfeer — op mobiel kostte die
     bijna een heel scherm aan scrollen vóórdat je bij de eigenlijke inhoud
     van de pagina kwam. */
  .readout{display:none;}

  /* Hover bestaat niet op een telefoon, en met 5 bestemmingen + 8 subpagina's
     werd "altijd alles plat tonen" al snel bijna een kwart van het scherm.
     Op mobiel tonen we daarom alleen de 5 hoofdknoppen, plus de subpagina's
     van de bestemming waar je nu al op zit (dezelfde .open-status die de
     server al meegeeft) — tik je op een andere bestemming, dan land je op
     die hub-pagina en zie je daar meteen haar eigen subpagina's. */
  .pill-group{ display:contents; }
  .pill-group .pill-toggle{ padding:8px 10px; font-size:.75rem; }
  .pill-group:not(.open) .pill-sub{ display:none; }
  .pill-group.open .pill-sub{
    display:contents;
    max-height:none;
    margin-top:0;
    overflow:visible;
  }
  /* Zelfde .js-toggled-omkering als op desktop, maar dan met display i.p.v.
     max-height (mobiel toont/verbergt het submenu ineens, geen animatie). */
  .pill-group.open.js-toggled .pill-sub{ display:none; }
  .pill-group:not(.open).js-toggled .pill-sub{
    display:contents;
    max-height:none;
    margin-top:0;
    overflow:visible;
  }
  .pill-sub .pill{
    padding:13px 16px;
    font-size:.8rem;
    border-radius:16px;
  }
  /* Flyout-paneel bestaat hier niet (dat is puur desktop, zie hierboven) —
     het blijft gewoon de bestaande .pill-sub-weergave hierboven. De twee
     "pagina's" erbinnen (steden-overzicht en per-stad-jaren) moeten zelf
     ook plat geklapt worden, anders blijven ze als aparte flex-kolommetjes
     binnen de al platgeklapte .pill-sub staan i.p.v. mee te vloeien met de
     rest van de pillen. Verborgen pagina's (het [hidden]-attribuut) blijven
     via de UA-stylesheet + de regel hierboven gewoon volledig weg. */
  .flyout-page{ display:contents; }
  .flyout-item > .flyout-chevron{ padding:8px 10px; font-size:.75rem; }
  .flyout-back{ font-size:.75rem; padding:8px 4px 8px 34px; }

  .lcars-content{grid-column:1; grid-row:3; padding:16px 14px;}
  .lcars-content h1{font-size:1.5rem;}
  /* aspect-ratio i.p.v. vh: anders knalt de breedte uit de kaart zodra een
     pagina zelf al een inline aspect-ratio zet (vh + aspect-ratio botsen). */
  .viewscreen{aspect-ratio:1.4/1 !important; height:auto !important; min-height:200px;}
  .vs-caption h2{font-size:1.1rem;}
  .countdown-panel{padding:12px 16px;}
  .countdown-panel #countdown-value{font-size:1.6rem;}
}

/* ======= LOG THREAD (LCARS-spine met kleursegmenten) =======
   Twee-koloms indeling i.p.v. de oude volle-breedte-zigzag: ieder kaartje nam
   voorheen een eigen volle-breedte "rij" in, ook al vulde het maar de helft
   van die breedte — dus zodra de linker- en rechterkant van opeenvolgende
   kaartjes flink in hoogte verschilden, stond er structureel veel lege
   ruimte naast het kortere kaartje.
   Bijgesteld (5 sept 2026, na Marc's melding over de tijdsvolgorde bij
   Londen 2023): dit was eerst een CSS `column-count:2`-mozaïek, maar die
   vult eerst de hele linkerkolom van boven naar beneden en pas dáárna de
   rechterkolom — met wisselende kaarthoogtes kon de rechterkolom daardoor
   ruim een half etmaal "voorlopen" op de linkerkolom, waardoor kaartjes die
   naast elkaar staan qua tijdstip juist ver uit elkaar liggen (bijv. 11:37
   naast 16:21). Nu een echte CSS-grid met 2 kolommen die van links naar
   rechts, rij voor rij vult — kaartje 1 linksboven, kaartje 2 rechtsboven,
   kaartje 3 linksonder-eronder, enz. — zodat de volgorde altijd links→rechts
   en top→bottom chronologisch klopt, net als bij een leesrichting.
   De kleur van spine/pill is gekoppeld aan de reisdag (zie data-color op
   .log-thread, één per dag) i.p.v. een willekeurige teller per kaartje —
   zo vertelt de kleur je voortaan welke dag je bekijkt in plaats van niets. */
.log-thread{
  position:relative;
  margin-top:26px;
  padding:12px 0 6px;
}
@media (min-width:761px){
  .log-thread{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:56px;
    align-items:start;
  }
}
.thread-item{
  position:relative;
  display:block;
  width:100%;
  margin:0 0 32px;
  padding-left:24px;
  cursor:zoom-in;
}

/* spine-segment: een gekleurde rand langs de linkerkant van het kaartje, in
   dezelfde kleur als zijn pill — elk kaartje "bezit" zijn eigen stukje spine.
   Vanaf 761px breed vervangen door de kronkelende .thread-route-lijn
   hieronder (op verzoek van Marc, geïnspireerd op een KLM-advertentie met
   een speelse route-lijn met ronde hoeken en bolletjes aan begin/eind) —
   op mobiel (waar die lijn niet getekend wordt) blijft dit rechte streepje
   gewoon staan, dat gaf al een prima, simpele indicatie per kaartje. */
.thread-item::before{
  content:'';
  position:absolute;
  top:0; bottom:0; left:0;
  width:10px;
  border-radius:6px;
  box-shadow:0 0 10px rgba(255,156,52,.25);
}
@media (min-width:761px){
  .thread-item::before{ display:none; }
}

/* titel-pill: hergebruikt de .pill-look van de navigatie als "naamplaatje"
   boven de kaart */
.thread-pill{
  display:inline-block;
  max-width:100%;
  margin:0 0 8px;
  padding:8px 18px;
  background:var(--orange);
  color:var(--black);
  border-radius:999px;
  font-size:.68rem;
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:.03em;
  white-space:normal;
  box-shadow:0 3px 10px rgba(0,0,0,.55);
}

.thread-card{
  display:block;
  overflow:hidden;
  border:2px solid var(--orange-dim);
  border-radius:6px 22px 6px 22px;
  background:var(--void-raised);
  transition:transform .25s ease, filter .25s ease;
}
.thread-item:hover .thread-card{
  transform:translateY(-4px);
  filter:brightness(1.15);
}
.thread-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}
/* Staande foto's en screenshots (audit-bevinding "Vaste kaarthoogte knipt
   compositie weg", 8 sept 2026): met object-fit:cover in een liggende
   220px-hoge doos gaat bij een staand beeld het grootste deel van de
   BREEDTE verloren, ongeacht crop_y hierboven — dat lost alleen een
   verticaal probleem op (gezicht net binnen beeld), niet dit horizontale.
   Bijna de helft van alle foto's op de site staat inmiddels rechtop
   (instapkaarten, menukaarten, portretfoto's), dus dit raakt geen
   uitzondering meer maar een groot deel van de kaartjes.
   Voor deze foto's toont het kaartje daarom de HELE afbeelding in zijn
   eigen verhouding (object-fit:contain) op een donkere ondergrond i.p.v.
   een stuk van de compositie af te snijden — dezelfde aanpak die de audit
   zelf voorstelde. Welke foto's dit betreft wordt bij het bouwen automatisch
   bepaald uit de echte pixel-afmetingen (zie gen_from_manifest.py en
   apply_portrait_class.py) — geen handmatige beoordeling per foto nodig, en
   dus ook geen crop_y meer relevant (die regelt alleen de gewone
   cover-uitsnede hierboven). */
.thread-card img.portrait{
  height:340px;
  object-fit:contain;
  background:var(--black);
}
/* Zonder dit vult een staande foto alleen het middelste stripje van de
   volle liggende kaartbreedte, met brede zwarte balken links/rechts erbij —
   het kaartje zelf mag dus smaller worden zodat het om de foto "past"
   i.p.v. een half-lege liggende doos te blijven. De rest van het grid
   (2 kolommen, zie .log-thread) blijft ongemoeid: alleen déze kaartjes
   krimpen en centreren zich in hun eigen kolom. */
.thread-item:has(img.portrait) .thread-card{ max-width:280px; margin-left:auto; margin-right:auto; }
@media (max-width:640px){
  .thread-card img.portrait{ height:280px; }
  .thread-item:has(img.portrait) .thread-card{ max-width:230px; }
}
.thread-body{
  padding:10px 14px 14px;
}
.thread-time{
  color:var(--periwinkle);
  font-size:.75rem;
  letter-spacing:.05em;
}
/* .thread-story kreeg via de gedeelde .mono-class ongewild het smalle
   systeemlettertype + volle oranje kleur mee — prima voor een label, maar
   zwaar leesbaar voor een verhaaltje van een paar zinnen. Dit blok wint van
   .mono dankzij de hogere specificiteit (twee classes i.p.v. één) en zet de
   tekst terug op dezelfde gedempte leesstijl als de rest van de lopende
   tekst op de site (.lcars-content p). */
.thread-card .thread-story{
  font-family:system-ui, sans-serif;
  font-weight:400;
  letter-spacing:normal;
  color:#d8cbb0;
  opacity:1;
  font-size:.85rem;
  line-height:1.55;
}

/* kleuraccent per reisdag: elke .log-thread (= 1 dag) krijgt een vaste kleur
   uit het LCARS-palet, cyclisch na 6 dagen. Kaart, pill, spine-segment (mobiel)
   én de .thread-route-lijn (desktop, zie hieronder) van alle kaartjes binnen
   die dag delen dezelfde kleur — vandaar ook de --route-color-variabele. */
.log-thread[data-color="1"] .thread-item::before,
.log-thread[data-color="1"] .thread-pill{ background:var(--orange); }
/* was var(--orange-dim) — een CSS-toeval, geen ontwerpkeuze: dit was de
   enige van de 6 dagkleuren die een gedimde in plaats van de volle,
   verzadigde tint gebruikte voor de kaartrand (audit-bevinding "Dag 1 oogt
   structureel doffer dan de andere dagen", 8 sept 2026). */
.log-thread[data-color="1"] .thread-card{ border-color:var(--orange); }
.log-thread[data-color="1"]{ --route-color:var(--orange); }

.log-thread[data-color="2"] .thread-item::before,
.log-thread[data-color="2"] .thread-pill{ background:var(--lavender); }
.log-thread[data-color="2"] .thread-card{ border-color:var(--lavender); }
.log-thread[data-color="2"]{ --route-color:var(--lavender); }

.log-thread[data-color="3"] .thread-item::before,
.log-thread[data-color="3"] .thread-pill{ background:var(--periwinkle); }
.log-thread[data-color="3"] .thread-card{ border-color:var(--periwinkle); }
.log-thread[data-color="3"]{ --route-color:var(--periwinkle); }

.log-thread[data-color="4"] .thread-item::before,
.log-thread[data-color="4"] .thread-pill{ background:var(--peach); }
.log-thread[data-color="4"] .thread-card{ border-color:var(--peach); }
.log-thread[data-color="4"]{ --route-color:var(--peach); }

.log-thread[data-color="5"] .thread-item::before,
.log-thread[data-color="5"] .thread-pill{ background:var(--salmon); }
.log-thread[data-color="5"] .thread-card{ border-color:var(--salmon); }
.log-thread[data-color="5"]{ --route-color:var(--salmon); }

.log-thread[data-color="6"] .thread-item::before,
.log-thread[data-color="6"] .thread-pill{ background:var(--ice); }
.log-thread[data-color="6"] .thread-card{ border-color:var(--ice); }
.log-thread[data-color="6"]{ --route-color:var(--ice); }

/* ======= THREAD ROUTE (kronkelende verbindingslijn, desktop) =======
   Op verzoek van Marc, naar aanleiding van een KLM-advertentie: een speelse,
   kronkelende lijn met ronde hoeken en een bolletje aan begin en eind, die
   de foto's van één dag met elkaar verbindt — in de eigen dagkleur i.p.v.
   wit. De lijn wordt door js/lcars.js als SVG ingevoegd (vóór de kaartjes in
   de DOM, dus er visueel áchter) en loopt via de middens van de kaartjes;
   omdat elk kaartje een eigen ondoorzichtige achtergrond heeft, "duikt" de
   lijn zichtbaar onder elk kaartje weg en komt hij er weer uit — precies het
   effect van een route die van foto naar foto slingert. Alleen vanaf 761px
   breed (de 2-koloms indeling); op mobiel (1 kolom) voegt de lijn weinig toe
   en blijft het rechte spine-streepje hierboven gewoon staan. */
.thread-route{
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  pointer-events:none;
  overflow:visible;
}
.thread-item{ z-index:1; }
.thread-route path{
  fill:none;
  stroke:var(--route-color, var(--orange));
  stroke-width:4px;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.8;
}
.thread-route circle{
  fill:var(--route-color, var(--orange));
  opacity:.9;
}
/* contactbolletje: klein bolletje op de rand van élk kaartje, precies waar
   de route-lijn 'm raakt (i.p.v. alleen aan begin/eind van de hele dag) —
   met een dunne rand in de kaartkleur zodat het los van de lijn zelf blijft
   afsteken. */
.thread-route circle.thread-route-contact{
  stroke:var(--void-raised);
  stroke-width:1.5px;
  opacity:.95;
}

@media (max-width:640px){
  .thread-card img{ height:180px; }
  /* geen eigen kleinere font-size hier meer — mobiel is al de moeilijkste
     leesomgeving, dus het bijschrift mag er niet nóg kleiner worden dan op
     desktop (zie .thread-card .thread-story hierboven). */
}

/* ======= LIGHTBOX (foto's openen in overlay i.p.v. nieuwe pagina) ======= */
.lightbox-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.92);
  display:flex; align-items:center; justify-content:center;
  z-index:1000;
  padding:32px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
/* A11y-fix (11 sept 2026): [hidden] moet hier winnen van display:flex
   hierboven -- zelfde specificiteit (1 klasse vs 1 attribuut), dus zonder
   deze regel zou de browser 'm gewoon laten staan op display:flex ook als
   het hidden-attribuut aanwezig is. js/lcars.js zet dit attribuut nu in
   gesloten toestand, zodat de 3 knoppen dan ook echt niet meer tabbaar
   zijn (voorheen bleven ze dat, ook met opacity:0/pointer-events:none). */
.lightbox-overlay[hidden]{ display:none; }
.lightbox-overlay.open{opacity:1; pointer-events:auto;}
.lightbox-overlay img{
  max-width:100%; max-height:100%;
  border:2px solid var(--orange);
  border-radius:8px;
  box-shadow:0 0 40px rgba(0,0,0,.6);
}
.lightbox-close{
  position:absolute; top:18px; right:24px;
  color:var(--orange);
  font-family:'Share Tech Mono', monospace;
  font-size:1.6rem;
  background:none;
  border:2px solid var(--orange-dim);
  border-radius:6px;
  width:40px; height:40px;
  cursor:pointer;
  line-height:1;
}
.lightbox-close:hover{border-color:var(--orange); color:var(--pale);}

/* vorige/volgende-knoppen: bladeren door de foto's van dezelfde reisdag
   zonder de lightbox te hoeven sluiten. lcars.js verbergt ze automatisch
   als een dag maar 1 foto heeft. */
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  color:var(--orange);
  font-family:'Share Tech Mono', monospace;
  font-size:2.2rem;
  background:none;
  border:2px solid var(--orange-dim);
  border-radius:8px;
  width:48px; height:64px;
  cursor:pointer;
  line-height:1;
}
.lightbox-nav:hover{border-color:var(--orange); color:var(--pale);}
.lightbox-prev{left:18px;}
.lightbox-next{right:18px;}

.lightbox-caption{
  position:absolute; bottom:18px; left:0; right:0;
  text-align:center;
  color:var(--periwinkle);
  font-size:.85rem;
  padding:0 60px;
}

@media (max-width:640px){
  .lightbox-overlay{padding:16px;}
  /* sluitknop op de comfortabele ~44px duimgrootte i.p.v. de vorige 34px —
     dit is bovendien het kleinste én meest foutgevoelige tikdoel op de hele
     site (vlak bij de rand, waar per ongeluk scrollen het snelst gebeurt). */
  .lightbox-close{top:6px; right:6px; width:44px; height:44px; font-size:1.5rem;}
  .lightbox-nav{width:42px; height:56px; font-size:1.7rem;}
  .lightbox-prev{left:6px;}
  .lightbox-next{right:6px;}
}

/* ======= Willekeurige herinnering: een random foto uit een afgeronde reis op
   het hoofdscherm, met een knop om er een andere bij te pakken. Idee van Marc,
   9 sept 2026 — data komt uit js/random-foto-data.js (alle foto's van de 11
   afgeronde reisverslagen), logica in js/lcars.js. Foto-link hergebruikt de
   #foto=-diepe-link + oplicht-animatie uit punt 76/77. ======= */
.memory-panel{
  border-radius:16px;
  border:2px solid var(--periwinkle);
  overflow:hidden;
  margin:28px 0;
  background:var(--void-raised);
  padding:18px 22px 22px;
}
.memory-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-bottom:14px;
}
.memory-header h2{margin:0;}
.memory-shuffle{
  background:transparent;
  border:2px solid var(--periwinkle);
  color:var(--periwinkle);
  border-radius:20px;
  padding:8px 16px;
  font-family:'Share Tech Mono', monospace;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.memory-shuffle:hover{background:var(--periwinkle); color:var(--void);}
.memory-shuffle:focus-visible{outline:2px solid var(--pale); outline-offset:2px;}
.memory-photo{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:18px;
  align-items:stretch;
  text-decoration:none;
  color:inherit;
}
.memory-photo img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:10px;
  display:block;
  background:var(--black);
}
.memory-caption{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}
.memory-title{
  font-size:1.1rem;
  color:var(--pale);
}
.memory-source{
  font-size:.8rem;
  color:var(--periwinkle);
  text-transform:uppercase;
  letter-spacing:.05em;
}
@media (max-width:760px){
  .memory-photo{grid-template-columns:1fr;}
  .memory-photo img{height:200px;}
}

/* ======= Reiskaart: interactieve kaart met foto-locaties op het hoofdscherm.
   Idee van Marc, 9 september 2026 — coördinaten komen uit de Google Takeout-
   GPS-sidecars (zie het logboek), MapTiler Basic Dark als tegelstijl. ======= */
.travel-map-panel{
  border-radius:16px;
  border:2px solid var(--orange-dim);
  overflow:hidden;
  margin:28px 0;
  background:var(--void-raised);
}
.travel-map-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  padding:18px 22px 4px;
}
.travel-map-header h2{
  margin:0;
  color:var(--pale);
  font-size:1.5rem;
  text-transform:uppercase;
}
.travel-map-stat{
  font-family:'Share Tech Mono', monospace;
  font-size:.7rem;
  color:var(--periwinkle);
  letter-spacing:.05em;
}
.travel-map-body{
  display:flex;
  gap:8px;
  padding:8px 8px 14px;
  min-height:480px;
}
.travel-map-mapwrap{ flex:1; min-width:0; position:relative; }
#travel-map{
  height:100%;
  min-height:460px;
  border-radius:12px;
  background:#0a0620;
}
.travel-map-back{
  position:absolute; top:16px; left:16px; z-index:1000;
  background:var(--orange); color:var(--black);
  font-family:'Share Tech Mono', monospace;
  font-size:.68rem; font-weight:700; letter-spacing:.05em;
  padding:8px 14px; border-radius:999px;
  border:none; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
  display:none;
}
.travel-map-back.visible{ display:inline-flex; align-items:center; gap:6px; }
.travel-map-back:hover{ background:var(--gold); }

.travel-map-legend{
  width:250px; flex:none;
  display:flex; flex-direction:column; gap:12px;
  padding:6px 8px 6px 2px;
}
.travel-map-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:10px;
  border:none;
  border-left:4px solid var(--dot, var(--gold));
  background:rgba(0,0,0,.22); cursor:pointer;
  transition:background .15s ease, transform .1s ease;
  /* was een <div>, nu een echt <button> (audit-item 10) — reset de
     browser-standaard knopopmaak zodat het uiterlijk ongewijzigd blijft */
  font:inherit; text-align:left; width:100%; color:inherit;
}
.travel-map-row:hover, .travel-map-row.is-active{
  background:rgba(255,255,255,.08); transform:translateX(2px);
}
.travel-map-dot{
  width:13px; height:13px; border-radius:50%;
  background:var(--dot, var(--gold));
  box-shadow:0 0 8px var(--dot, var(--gold));
  flex:none;
}
.travel-map-row .name{ font-size:1rem; color:#f2efff; line-height:1.1; }
.travel-map-row .meta{
  font-family:'Share Tech Mono', monospace; font-size:.62rem;
  color:#a79fe0; margin-top:2px;
}
.travel-map-footer{
  margin-top:auto;
  font-family:'Share Tech Mono', monospace; font-size:.62rem;
  line-height:1.5; color:#a79fe0;
  border-top:1px solid var(--orange-dim); padding-top:10px;
}

.travel-map-mapwrap .leaflet-container{ background:#0a0620; font-family:'Share Tech Mono', monospace; }
.travel-map-mapwrap .leaflet-tile-pane{ filter:saturate(0.85) brightness(0.95); }
.travel-map-mapwrap .leaflet-control-attribution{
  background:rgba(10,6,32,.75) !important; color:#8a82c4 !important; font-size:.55rem !important;
}
.travel-map-mapwrap .leaflet-control-attribution a{ color:var(--ice) !important; }
.travel-map-mapwrap .leaflet-control-zoom a{
  background:var(--void-raised) !important; color:var(--pale) !important; border-color:var(--orange-dim) !important;
}
.travel-map-mapwrap .leaflet-control-zoom a:hover{ background:var(--orange-dim) !important; }

.pl-pin{ width:26px; height:26px; border-radius:50%; position:relative; display:flex; align-items:center; justify-content:center; }
.pl-pin .core{ width:12px; height:12px; border-radius:50%; background:var(--dot); box-shadow:0 0 10px 2px var(--dot); border:2px solid rgba(0,0,0,.6); }
.pl-pin .ring{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--dot); opacity:.6; animation:pl-pulse 2.6s ease-out infinite; }
@keyframes pl-pulse{ 0%{ transform:scale(.35); opacity:.75; } 80%{ transform:scale(1.6); opacity:0; } 100%{ transform:scale(1.6); opacity:0; } }

.pl-photo-pin{ width:14px; height:14px; border-radius:50%; background:var(--dot); border:2px solid rgba(10,6,32,.85); box-shadow:0 0 6px var(--dot); }

.marker-cluster-pl{ background:transparent; }
.marker-cluster-pl div{
  width:34px; height:34px; margin-left:3px; margin-top:3px; border-radius:50%;
  background:var(--dot, var(--gold)); border:2px solid rgba(10,6,32,.85);
  display:flex; align-items:center; justify-content:center;
  font-family:'Share Tech Mono', monospace; font-weight:700; font-size:.72rem; color:var(--black);
  box-shadow:0 0 10px var(--dot, var(--gold));
}

.pl-popup .leaflet-popup-content-wrapper{
  background:var(--void-raised); color:#f2efff; border-radius:14px;
  border-left:5px solid var(--dot, var(--gold)); box-shadow:0 4px 24px rgba(0,0,0,.5);
}
.pl-popup .leaflet-popup-tip{ background:var(--void-raised); }
.pl-popup-body .eyebrow{ font-family:'Share Tech Mono', monospace; font-size:.6rem; letter-spacing:.12em; color:var(--orange); }
.pl-popup-body h3{ margin:2px 0 6px 0; font-family:'Antonio', sans-serif; font-size:1.2rem; color:var(--pale); }
.pl-popup-body .hub{
  margin-top:8px; display:inline-block; font-family:'Share Tech Mono', monospace; font-size:.64rem;
  color:var(--black); background:var(--dot, var(--gold)); padding:4px 10px; border-radius:999px;
  text-decoration:none;
}

@media (max-width:760px){
  .travel-map-body{ flex-direction:column; min-height:0; }
  .travel-map-legend{ width:auto; order:2; }
  #travel-map{ min-height:380px; }
}

/* Diepe link vanaf de reiskaart: tijdelijke gloed rond de aangewezen foto, 9 sept 2026.
   Aangepast 9 sept 2026: langer + pulserend, want de eerste versie (2,6s, één keer
   uitdovend) viel te weinig op. */
.thread-item.foto-highlight .thread-card{
  animation: pl-foto-glow 4.8s ease-in-out;
}
@keyframes pl-foto-glow{
  0%{   box-shadow:0 0 0 3px var(--gold), 0 0 32px 9px rgba(255,204,51,.75); }
  15%{  box-shadow:0 0 0 3px var(--gold), 0 0 32px 9px rgba(255,204,51,.75); }
  32%{  box-shadow:0 0 0 2px var(--gold), 0 0 12px 3px rgba(255,204,51,.25); }
  48%{  box-shadow:0 0 0 3px var(--gold), 0 0 32px 9px rgba(255,204,51,.75); }
  65%{  box-shadow:0 0 0 2px var(--gold), 0 0 12px 3px rgba(255,204,51,.25); }
  82%{  box-shadow:0 0 0 3px var(--gold), 0 0 32px 9px rgba(255,204,51,.75); }
  100%{ box-shadow:none; }
}
@media (prefers-reduced-motion: reduce){
  .thread-item.foto-highlight .thread-card{ animation:none; box-shadow:0 0 0 3px var(--gold); }
}

/* ======= Captain's Log: chronologisch overzicht van alle missies, met
   kerncijfers per reis. Idee van Marc, 9 sept 2026 — data in
   gen_captains_log.py, rechtstreeks geverifieerd tegen de live pagina's. ======= */
.captainslog-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin:22px 0 30px;
}
.captainslog-stat{
  background:var(--void-raised);
  border:2px solid var(--orange-dim);
  border-radius:12px;
  padding:16px 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:center;
}
.captainslog-stat .cls-value{
  font-family:'Antonio', sans-serif;
  font-size:2.1rem;
  font-weight:700;
  color:var(--orange);
}
.captainslog-stat .cls-label{
  font-size:.72rem;
  color:var(--periwinkle);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.captainslog-timeline{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:8px;
}
.captainslog-entry{
  display:grid;
  grid-template-columns:150px 1fr auto auto;
  align-items:baseline;
  gap:6px 18px;
  background:var(--void-raised);
  border-left:8px solid var(--orange);
  border-radius:0 10px 10px 0;
  padding:12px 18px;
  text-decoration:none;
  color:inherit;
  transition:background .15s;
}
.captainslog-entry:hover{background:rgba(255,255,255,.06);}
.captainslog-entry:focus-visible{outline:2px solid var(--pale); outline-offset:2px;}
.captainslog-entry.lav{border-left-color:var(--lavender);}
.captainslog-entry.per{border-left-color:var(--periwinkle);}
.captainslog-entry.peach{border-left-color:var(--peach);}
.captainslog-entry.ice{border-left-color:var(--ice);}
.captainslog-entry.salmon{border-left-color:var(--salmon);}
.captainslog-entry .cle-stardate{
  font-size:.68rem;
  color:var(--periwinkle);
  letter-spacing:.03em;
}
.captainslog-entry .cle-label{
  font-family:'Antonio', sans-serif;
  font-size:1.15rem;
  font-weight:700;
  color:var(--pale);
}
.captainslog-entry .cle-dates{
  font-size:.78rem;
  color:var(--ice);
}
.captainslog-entry .cle-stats{
  font-size:.78rem;
  color:var(--orange);
  white-space:nowrap;
}
.captainslog-upcoming-heading{
  margin-top:30px;
  font-size:1.3rem;
}
.captainslog-entry.pending{
  border-left-style:dashed;
  grid-template-columns:1fr auto auto;
} /* opacity:.82 hier weggehaald, audit-item 8: verlaagde de cle-stats-tekst
     (periwinkle-italic) naar 4.46:1, net onder de 4.5:1-eis. De gestippelde
     rand blijft als visueel onderscheid tussen "gepland" en "afgerond". */
.captainslog-entry.pending .cle-stats{
  color:var(--periwinkle);
  font-style:italic;
}
@media (max-width:760px){
  .captainslog-stats{grid-template-columns:repeat(2, 1fr);}
  .captainslog-entry{grid-template-columns:1fr; gap:4px;}
  .captainslog-entry.pending{grid-template-columns:1fr;}
}

/* ======= "B'Elana door de jaren heen": dezelfde soort moment naast elkaar
   over meerdere jaren. Idee van Marc, 9 sept 2026. ======= */
.jaren-section{
  margin:26px 0 34px;
}
.jaren-section h2{margin-bottom:4px;}
.jaren-intro{
  font-size:.82rem;
  color:var(--periwinkle);
  margin-bottom:14px;
}
.jaren-strip{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding-bottom:10px;
}
.jaren-card{
  flex:0 0 210px;
  display:flex;
  flex-direction:column;
  gap:6px;
  text-decoration:none;
  color:inherit;
}
.jaren-card img{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:10px;
  background:var(--black);
  transition:transform .15s;
}
.jaren-card:hover img{transform:scale(1.02);}
.jaren-card:focus-visible{outline:2px solid var(--pale); outline-offset:2px;}
.jaren-year{
  font-family:'Antonio', sans-serif;
  font-size:1.4rem;
  font-weight:700;
  color:var(--orange);
}
.jaren-caption{
  font-size:.76rem;
  color:var(--ice);
  line-height:1.4;
}
@media (max-width:760px){
  .jaren-card{flex-basis:170px;}
  .jaren-card img{height:210px;}
}

/* ======= Missie-insignes (reis-badges per bestemming), 10 sept 2026 ======= */
.insignes-panel{
  border-radius:16px;
  border:2px solid var(--orange-dim);
  margin:28px 0;
  background:var(--void-raised);
  padding:18px 22px 22px;
}
.insignes-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
.insignes-header h2{ margin:0; }
.insignes-stat{ color:var(--orange); font-size:.72rem; letter-spacing:.04em; }
.insignes-grid{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  justify-content:center;
}
.badge-card{
  width:104px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease;
}
.badge-card:hover, .badge-card:focus-visible{ transform:translateY(-3px); }
.badge-card:focus-visible{ outline:2px solid var(--pale); outline-offset:3px; border-radius:50%; }
.badge-ring{ width:92px; height:92px; flex-shrink:0; }
.badge-label{
  font-size:.68rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--orange);
  text-align:center;
}
@media (max-width:640px){
  .badge-card{ width:84px; }
  .badge-ring{ width:76px; height:76px; }
}


/* ============================================================
   Print-stylesheet (audit-restpunt, 12 sept 2026). De LCARS-chrome
   (zijbalk, top/bottom-bars, elbows, skip-link, readout-decoratie) heeft op
   papier geen functie en verspilt inkt/ruimte -- verborgen bij afdrukken,
   content blijft leesbaar op wit.
   ============================================================ */
@media print {
  .lcars-sidebar, .top-row, .bottom-row, header .bar, footer .bar,
  .skip-link, .readout, .pill-fill, .viewscreen .vs-frame-label,
  .lang-switch, .flyout-back { display: none !important; }
  body, .lcars-frame { background: #fff !important; color: #000 !important; }
  .lcars-content { margin: 0 !important; padding: 0 !important; }
  a { color: #000 !important; text-decoration: underline; }
  .viewscreen { aspect-ratio: auto !important; height: auto !important; page-break-inside: avoid; }
}