/* hotelvideos.com design system. Bron: design-handoff/.../design/hv.css (Claude Design, 9 okt 2026),
   overgenomen en in de ontwerpronde van 10 okt 2026 afgemaakt tot een systeem: tokens voor type,
   ritme, bedieningsmaten en kleur. Aanvullingen voor de bouw staan onderaan onder 'Bouw'. */
:root{
  /* kleur. Het accent alleen als tekst op wit (4,7:1); op --soft haalt het onder 24 px geen AA. */
  --ink:#1D1D1F; --muted:#6E6E73; --muted-2:#86868B; --line:#D2D2D7; --hair:#E8E8ED; --soft:#F5F5F7; --white:#FFFFFF; --accent:#0071E3; --black:#000000;
  --danger:#D70015; --danger-ring:rgba(215,0,21,.15); --map:#E3EAF1;
  --glass:rgba(255,255,255,.3); --glass-hover:rgba(255,255,255,.45); --glass-dark:rgba(0,0,0,.45);
  --shadow-pop:0 24px 60px rgba(0,0,0,.14); --shadow-ctl:0 4px 16px rgba(0,0,0,.12);
  --r-panel:28px; --r-card:22px; --r-media:18px; --r-thumb:14px; --r-pill:999px;
  --gutter:clamp(16px,4vw,56px); --section:clamp(56px,7vw,110px); --max:1360px;
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Helvetica,sans-serif;
  /* type: één trap; elk niveau een vaste stap onder het vorige, op mobiel 40, 28, 22 */
  --t-d1:clamp(46px,7.4vw,112px);
  --t-h1:clamp(40px,4.8vw,72px);
  --t-h2:clamp(28px,3.6vw,52px);
  --t-h3:clamp(22px,2vw,28px);
  --t-title-l:clamp(22px,1.8vw,26px); /* naam op beeld: plaatskaart, brede hotelkaart */
  --t-intro:clamp(20px,1.8vw,24px);   /* eerste alinea van het hotelverhaal */
  --t-card:21px;                      /* naam onder een hotelkaart */
  --t-title-s:clamp(19px,1.5vw,21px); /* smalle plaatskaart, telling; op desktop gelijk aan de kaartnaam */
  --t-h4:19px;
  --t-lead:clamp(18px,1.5vw,21px);
  --t-body:17px;
  --t-small:15px;                     /* labels, navigatie, chips, footer */
  --t-meta:13px;                      /* eyebrow, kruimelpad, tags, duur */
  /* ritme: een schaal op 4 px en vaste afstanden per relatie */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --gap-eyebrow:var(--s-2);            /* eyebrow naar kop */
  --gap-title:var(--s-4);              /* kop naar lead of subregel */
  --gap-block:clamp(24px,2.5vw,36px);  /* sectiekop of kopregel naar raster, rij, lijst of formulier */
  --page-top:clamp(12px,2vw,28px);     /* kruimelpad naar de eerste kop */
  --section-s:clamp(40px,5vw,72px);    /* kleine sectie */
  /* bedieningsmaten: klein (chip, kleine knop), gewoon (knop, veld), groot (zoekveld op /search/) */
  --ctl-s:44px; --ctl:50px; --ctl-l:64px;
  --hover-zoom:1.05;
}
body{margin:0;background:var(--white)}
.hv{background:var(--white);color:var(--ink);font-family:var(--font);font-size:var(--t-body);line-height:1.47;-webkit-font-smoothing:antialiased}
.hv *{box-sizing:border-box}
/* Basisregels zonder gewicht (:where), zodat een klasse als .chip of .btn altijd wint, ook op een <button>. */
:where(.hv) a{color:inherit;text-decoration:none}
:where(.hv) :where(button,input,select,textarea){font:inherit;color:inherit}
.hv button{cursor:pointer}
.hv em{font-style:normal;color:var(--muted)}
.hv img{display:block;max-width:100%}

/* layout */
/* Vangnet: wat tot de schermrand doorloopt (100vw) mag nooit een horizontale scroll geven,
   ook niet met een klassieke scrollbalk. clip maakt geen scrollcontainer, dus sticky blijft werken. */
#main{overflow-x:clip}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
/* Smalle kolom: 34em tekstbreedte, zo'n 75 tekens per regel bij 17 px. */
.wrap-narrow{max-width:calc(34em + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--section)}
.sec-s{padding-block:var(--section-s)}
.soft{background:var(--soft)}
.row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.between{justify-content:space-between}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.grid-wide{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.split{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,72px);align-items:flex-start}
.split>.main{flex:999 1 480px;min-width:0}
.split>.side{flex:1 1 340px;min-width:0}
.center{text-align:center}

/* type */
.d1{margin:0;font-weight:600;font-size:var(--t-d1);line-height:1.02;letter-spacing:-.045em}
.h1{margin:0;font-weight:600;font-size:var(--t-h1);line-height:1.04;letter-spacing:-.04em}
.h2{margin:0;font-weight:600;font-size:var(--t-h2);line-height:1.06;letter-spacing:-.04em}
.h3{margin:0;font-weight:600;font-size:var(--t-h3);line-height:1.12;letter-spacing:-.03em}
.h4{margin:0;font-weight:600;font-size:var(--t-h4);line-height:1.2;letter-spacing:-.02em}
.lead{margin:0;font-size:var(--t-lead);line-height:1.38;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:var(--t-small)}
.eyebrow{font-size:var(--t-meta);font-weight:600;color:var(--muted)}
.prose p{margin:0 0 var(--s-4)}
.prose h2{margin:var(--s-7) 0 var(--s-3);font-weight:600;font-size:var(--t-h3);letter-spacing:-.03em;line-height:1.12}
.prose>h2:first-child{margin-top:0}
/* Koppen en namen breken in evenwicht, zonder los woord op de laatste regel; lopende tekst zonder wees. */
.d1,.h1,.h2,.h3,.h4,.prose h2,.card-name,.place-name{text-wrap:balance}
.lead,.prose p,.story p,.faq p,.pages-faq p{text-wrap:pretty}
/* Tekstlink, ook naast een kop: altijd een tikvlak van 44 px. */
.link{display:inline-flex;align-items:center;min-height:var(--ctl-s);color:var(--accent);font-size:var(--t-h4)}
/* Kopregel met een link: link en kop op dezelfde basislijn. */
.row.between:has(>:is(.h2,.h3)+.link){align-items:baseline}

/* ritme: vaste afstanden per relatie (tokens in :root); templates zetten geen eigen marges.
   Elke relatieregel weegt één klasse: hij wint van de basisregel (.h1, .lead: margin 0), en een
   componentregel in een latere stylesheet (home.css, lists.css, pages.css) wint weer van hem. */
:where(.hv) p{margin:0}
.crumb{margin-top:var(--s-2)}
:where(.crumb)+:is(.d1,.h1,.h2,.row,.split,.lst-title){margin-top:var(--page-top)}
:where(.eyebrow)+:is(.d1,.h1,.h2,.h3,.h4){margin-top:var(--gap-eyebrow)}
:where(.d1,.h1,.h2)+:is(.lead,.prose,p){margin-top:var(--gap-title)}
:where(.h3,.h4)+:is(.prose,.muted,p){margin-top:var(--s-2)}
:where(.lead,.prose)+:is(.lead,.prose){margin-top:var(--s-4)}
:where(.lead,.prose)+.row{margin-top:var(--s-5)}
:where(.row.between,.h2)+:is(.grid,.grid-wide,.lst-grid,.lst-wide-grid,.gallery,.lst-az,.lst-hits,.facts,.faq){margin-top:var(--gap-block)}
:where(.h3,.row.between:has(>.h3))+:is(.grid,.grid-wide,.lst-grid,.lst-wide-grid,.gallery,.lst-az,.lst-hits,.facts,.faq){margin-top:var(--s-5)}
.prose>:last-child{margin-bottom:0}
:where(.media,.player)+.h4{margin-top:var(--s-3)}
.empty>p{max-width:440px;margin-inline:auto}
.empty>p+*{margin-top:var(--s-5)}
.empty .row{justify-content:center}
.row-tight{gap:var(--s-2)}
.sec-end{padding-bottom:var(--section)}
.sec-end-s{padding-bottom:var(--section-s)}
.page-head{padding-top:var(--page-top)}   /* titelblok na een los kruimelpad (hotelpagina) */
.page-open{padding-top:var(--section-s)}  /* pagina zonder kruimelpad: eerste blok onder de header */
.media-l{border-radius:var(--r-panel)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ctl);padding:0 var(--s-5);border-radius:var(--r-pill);border:1px solid transparent;font-weight:500;font-size:var(--t-body);white-space:nowrap;transition:background .2s,color .2s,transform .2s}
.btn-ink{background:var(--ink);color:var(--white)}
.btn-ink:hover{background:var(--black)}
.btn-line{border-color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:var(--white)}
.btn-white{background:var(--white);color:var(--ink)}
.btn-soft{background:var(--soft)}
.btn-glass{background:var(--glass);backdrop-filter:blur(20px);color:var(--white)}
.btn-deal{background:#12372F;color:var(--white)}
.btn-s{min-height:var(--ctl-s);padding:0 20px;font-size:var(--t-small)}
.btn-block{display:flex;width:100%}
.icon-btn{width:var(--ctl-s);height:var(--ctl-s);border-radius:50%;border:0;background:var(--soft);display:inline-flex;align-items:center;justify-content:center;flex:none}

/* chips, tags, badges */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:var(--ctl-s);padding:0 var(--s-4);border-radius:var(--r-pill);border:0;background:var(--soft);font-size:var(--t-small);font-weight:500;white-space:nowrap;transition:background .2s,color .2s,transform .2s}
.soft .chip,.ftr .chip{background:var(--white)}
.chip.on{background:var(--ink);color:var(--white)}
/* Indrukken: een korte veer op knop en chip; hover op een chip alleen met een muis. */
.btn:active,.chip:active{transform:scale(.98)}
@media (hover:hover){.chip:not(.on):hover{background:var(--hair)}}
.tag{display:inline-flex;align-items:center;gap:6px;padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-pill);font-size:var(--t-meta)}
.glass{padding:6px 12px;background:var(--glass);backdrop-filter:blur(16px);border-radius:var(--r-pill);font-size:var(--t-meta);font-weight:600;color:var(--white)}
.len{padding:5px 10px;background:rgba(0,0,0,.6);color:var(--white);border-radius:8px;font-size:var(--t-meta);font-weight:500}
.pick{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 9px;background:var(--white);color:var(--ink);border-radius:var(--r-pill);font-size:var(--t-meta);font-weight:600}

/* hotel card */
.card{display:block}
.card-media{position:relative;aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;background:var(--hair)}
.card-media>img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card-top{position:absolute;left:14px;right:14px;top:14px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.card-play{position:absolute;left:14px;bottom:14px;width:50px;height:50px;border-radius:50%;background:var(--glass);backdrop-filter:blur(20px);color:var(--white);display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s,transform .25s}
.card-body{padding:var(--s-3) var(--s-1) 0}
.card-name{font-size:var(--t-card);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.card-place{margin-top:var(--s-1)}
.card-cat{margin-top:var(--s-2)}
/* Hover alleen met een muis: op touch blijft een hover na een tik anders hangen. */
.card.is-hover .card-media>img{transform:scale(var(--hover-zoom))}
.card.is-hover .card-play{background:var(--white);color:var(--ink);transform:scale(1.08)}
.card.is-hover .card-name{color:var(--accent)}
@media (hover:hover){
  .card:hover .card-media>img{transform:scale(var(--hover-zoom))}
  .card:hover .card-play{background:var(--white);color:var(--ink);transform:scale(1.08)}
  .card:hover .card-name{color:var(--accent)}
}

/* panels, facts, stats, forms */
.panel{background:var(--white);border-radius:var(--r-panel);padding:clamp(20px,2.4vw,32px)}
.panel-soft{background:var(--soft);border-radius:var(--r-panel);padding:clamp(20px,2.4vw,32px)}
.facts>div{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid var(--hair);font-size:var(--t-small)}
.facts>div>span:first-child{color:var(--muted)}
.facts>div>span:last-child{font-weight:500;text-align:right}
.stat{background:var(--soft);border-radius:16px;padding:var(--s-4)}
.stat b{display:block;margin-top:6px;font-size:var(--t-title-s);font-weight:600;letter-spacing:-.03em}
.field{display:block}
:where(.field)>span{display:block;margin-bottom:6px;font-size:var(--t-small);font-weight:500}
.input{width:100%;min-height:var(--ctl);padding:0 18px;border:1px solid var(--muted-2);border-radius:16px;background:var(--white);outline:0}
/* Focus: één zachte ring om het veld (inktrand plus een lichte rand erbuiten), niet ook de blauwe
   ring van de site; bij een fout wordt de ring rood (pages.css). De rand haalt 3:1 op --soft. */
.input:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--line)}
.hv .input:focus-visible{outline:0}
textarea.input{padding:14px 18px;min-height:120px;resize:vertical}
.search{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;background:var(--soft);border-radius:var(--r-pill);color:var(--muted)}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink)}
.media{position:relative;border-radius:var(--r-media);overflow:hidden;background:var(--hair)}
.media>img{width:100%;height:100%;object-fit:cover}
.round-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:var(--glass);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;color:var(--white)}
.scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 50%,rgba(0,0,0,.7) 100%)}

/* breadcrumb: meta-maat; op mobiel één regel zonder het huidige item, want de kop staat eronder */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--t-meta);color:var(--muted)}
.crumb a{display:inline-flex;align-items:center;min-height:var(--ctl-s);padding:0 2px}
.crumb a:hover{color:var(--ink)}
.crumb b{font-weight:500;color:var(--ink)}
@media (max-width:560px){
  .crumb{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
  .crumb>*{flex:none}
  .crumb>b,.crumb>span:has(+ b){display:none}
  .crumb>a:last-of-type{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;display:block;line-height:var(--ctl-s)}
}

/* header */
.hdr{position:relative;z-index:10;background:rgba(255,255,255,.86);backdrop-filter:blur(20px);border-bottom:1px solid var(--hair)}
.hdr-in{display:flex;align-items:center;gap:8px 20px;min-height:68px}
/* Het logo is een svg (Logo.tsx) op de maat van de oude tekst: de letters zo hoog als de stok van
   een letter op 21 px, en de breedte volgt. De font-size blijft de knop om de maat te zetten. */
.logo{display:flex;align-items:center;font-size:21px;flex:none}
.logo svg{display:block;height:.78em;width:auto}
/* Intro bij de eerste pagina van een sessie (page-motion.ts zet html[data-hv-intro]): de naam
   staat er, de afspeelknop springt erin, daarna komt com. Zonder de markering staat alles stil. */
html[data-hv-intro] .hdr .logo-play{transform-box:fill-box;transform-origin:center;animation:hv-intro-pop .6s cubic-bezier(.2,.8,.25,1.3) .7s both}
html[data-hv-intro] .hdr .logo-com{transform-box:fill-box;animation:hv-intro-com .7s cubic-bezier(.2,.7,.2,1) 1.35s both}
@keyframes hv-intro-pop{0%{transform:scale(0)}60%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes hv-intro-com{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.hdr-search{flex:1 1 220px;max-width:420px;margin-left:auto}
.hdr-menu{display:none}
@media (max-width:900px){
  .hdr-cta{display:none!important}
  .hdr-menu{display:inline-flex}
  .hdr-search{max-width:none}
}

/* player */
.player{position:relative;aspect-ratio:16/9;border-radius:var(--r-panel);overflow:hidden;background:var(--black);color:var(--white)}
.player>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player-bar{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--glass-dark);backdrop-filter:blur(20px);border-radius:var(--r-pill);font-size:var(--t-meta)}
.player-track{flex:1;height:4px;border-radius:2px;background:var(--glass)}
.player-track>span{display:block;height:4px;border-radius:2px;background:var(--white)}
@keyframes hvSpin{to{transform:rotate(360deg)}}
.spinner{width:44px;height:44px;border-radius:50%;border:3px solid var(--glass);border-top-color:var(--white);animation:hvSpin 1s linear infinite}

/* footer: kolommen als krantenkolommen (vier op desktop, twee op mobiel), zodat geen groep op een
   eigen rij valt; copyright op de lijn */
.ftr{background:var(--soft);padding:var(--section) 0 0;overflow:hidden}
.ftr-intro{flex:1 1 380px;min-width:0;max-width:520px}
.ftr-social{gap:var(--s-2);margin-top:var(--s-5)}
.ftr-cols{flex:2 1 560px;min-width:0;columns:4 130px;column-gap:var(--s-5);margin-bottom:calc(-1 * var(--s-6));font-size:var(--t-small)}
.ftr-cols>div{break-inside:avoid;padding-bottom:var(--s-6)}
.ftr-cols .eyebrow{margin-bottom:var(--s-2)}
.ftr-cols a{display:block;padding:var(--s-2) 0}
.ftr-cols a:hover{color:var(--accent)}
.ftr-base{margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid var(--line)}
.ftr-base>.row{gap:0 var(--s-5)}
.ftr-base :is(a,span){display:inline-flex;align-items:center;min-height:var(--ctl-s)}
.ftr-base a:hover{color:var(--ink)}
@media (max-width:700px){.ftr-cols a{display:flex;align-items:center;min-height:var(--ctl-s);padding:0}}
/* Het grote woordmerk onderaan: zo breed als de pagina, met de onderste vijfde achter de rand van
   de pagina (de hoogte is kleiner dan de svg, de rest wordt afgeknipt), zoals de tekst vroeger
   onder de regel uitstak. 763.57 bij 77.45 is de viewBox van het woordmerk (logo-paths.ts). */
.ftr-word{width:min(92vw,1560px);aspect-ratio:763.57/63;margin:28px auto 0;overflow:clip;color:var(--ink)}
.ftr-word svg{display:block;width:100%;height:auto}
.ftr-word .logo-com{color:var(--muted-2)}
/* Het afgesneden deel van het woordmerk, als laag direct onder het scherm: zichtbaar als de
   bezoeker voorbij het einde trekt (FooterTail.tsx). In rust buiten beeld, dus niets verandert. */
.ftr-tail{position:fixed;left:0;right:0;top:100%;height:100vh;overflow:hidden;background:var(--soft);pointer-events:none;visibility:hidden}
.ftr-tail.is-on{visibility:visible}
.ftr-tail>.ftr-word{position:absolute;left:0;right:0;top:0;margin:0 auto;aspect-ratio:auto;overflow:visible}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq button{display:flex;width:100%;justify-content:space-between;align-items:center;gap:var(--s-4);padding:var(--s-5) 0;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;font-size:var(--t-h4);font-weight:600;letter-spacing:-.02em}
.faq p{margin:0;padding:var(--s-4) 0 var(--s-5);border-bottom:1px solid var(--line);color:var(--muted);max-width:720px}
@media (prefers-reduced-motion:reduce){.hv *{animation:none!important;transition:none!important}}

/* place card */
.place{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;color:var(--white);background:var(--hair)}
.place>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.place:hover>img{transform:scale(var(--hover-zoom))}}
.place-body{position:absolute;left:20px;right:20px;bottom:20px;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-3)}
.place-name{font-size:var(--t-title-l);font-weight:600;letter-spacing:-.035em;line-height:1.05}
.place-go{flex:none;width:40px;height:40px;border-radius:50%;background:var(--glass);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center}
.ph{display:inline-block;padding:2px 8px;border:1px dashed var(--line);border-radius:6px;font-size:var(--t-meta);font-weight:500;color:var(--muted);vertical-align:middle}
.poster{position:relative;width:100%;aspect-ratio:21/9;min-height:300px;max-height:760px;overflow:hidden;background:var(--black)}
.poster>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pp{position:absolute;right:14px;bottom:14px;width:var(--ctl-s);height:var(--ctl-s);border-radius:50%;border:0;background:var(--glass-dark);backdrop-filter:blur(16px);color:var(--white);display:flex;align-items:center;justify-content:center}
.guest{position:relative;display:block;width:230px;aspect-ratio:9/16;border-radius:var(--r-card);overflow:hidden;color:var(--white);background:var(--hair)}
.guest>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.empty{border:1px dashed var(--line);border-radius:var(--r-panel);padding:clamp(32px,5vw,64px) var(--s-5);text-align:center}

/* logo */
.logo .logo-com{color:#86868B}
/* mobile menu */
.mnav{position:absolute;left:0;right:0;top:100%;z-index:20;background:#FFFFFF;border-bottom:1px solid var(--hair);padding:8px var(--gutter) 28px;box-shadow:0 30px 60px rgba(0,0,0,.12)}
.mnav>a{display:flex;justify-content:space-between;align-items:center;padding:17px 0;border-bottom:1px solid var(--hair);font-size:24px;font-weight:600;letter-spacing:-.035em}
.mnav>a>span{color:var(--muted);font-weight:400}
.mnav-sub{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 18px;border-bottom:1px solid var(--hair)}
/* reviews */
.stars{display:inline-flex;gap:2px;color:var(--ink)}
.rev-bar{display:flex;align-items:center;gap:10px;font-size:var(--t-meta);color:var(--muted)}
.rev-bar>i{flex:1;height:6px;border-radius:3px;background:var(--hair);overflow:hidden}
.rev-bar>i>b{display:block;height:6px;border-radius:3px;background:var(--ink)}
.rev-av{width:44px;height:44px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;font-weight:600;flex:none}

/* Bouw: aanvullingen die het ontwerp niet als klasse had */
html{-webkit-text-size-adjust:100%}
.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:-9999px;top:8px;z-index:100;padding:12px 18px;background:var(--ink);color:var(--white);border-radius:var(--r-pill)}
.skip:focus{left:8px}
.hv :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.poster iframe,.media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.round-play{cursor:pointer}
.round-play:hover{background:var(--glass-hover)}
.story p:first-child{font-size:var(--t-intro);line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.story p{color:var(--muted)}
.story p:first-child{color:var(--ink)}
/* Lopende tekst na de intro op leesbare maat: 34em, zo'n 75 tekens per regel. */
.story p:not(:first-child){max-width:34em}
.story a{color:var(--accent)}
/* "Waarom dit hotel" onder de naam op een hotelkaart in lijsten (plan 2026-10-20). */
.card-reason{margin:var(--s-2) 0 0;color:var(--muted);line-height:1.4;max-width:34em;text-wrap:pretty}
/* Hotelpagina: boekpaneel en bestemmingspaneel (knop onderaan het paneel) */
.hotel-promo{margin-top:var(--s-5);font-weight:500}
.hotel-book{margin-top:var(--s-5)}
.hotel-book-note{margin-top:var(--s-3)}
.hotel-dest{display:flex;flex-direction:column}
.hotel-dest>.prose+.facts{margin-top:var(--s-4)}
.hotel-dest>.btn{align-self:flex-start;margin-top:auto}
.hotel-dest>:nth-last-child(2){margin-bottom:var(--s-5)}
/* Galerij (HotelGallery.tsx): een groot beeld over twee kolommen en twee rijen, ernaast zoveel
   beelden dat de rijen vol zijn. Vanaf 1100 px kiest de galerij zijn kolommen (--g-cols, 3 tot 5),
   daaronder 3 kolommen; wat niet past (.g-w breed, .g-m smaller) staat achter "Show all". */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.gallery>.media{aspect-ratio:4/3;min-width:0}
.gallery>.media:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gallery.is-few{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery.is-few>.media:first-child{grid-column:auto;grid-row:auto;aspect-ratio:4/3}
.gallery-more{display:none;justify-content:center;margin-top:var(--s-6)}
@media (min-width:561px) and (max-width:1099px){
  .gallery:not(.is-all)>.g-m{display:none}
  .gallery-more.need-m{display:flex}
}
@media (min-width:1100px){
  .gallery:not(.is-few){grid-template-columns:repeat(var(--g-cols),minmax(0,1fr))}
  .gallery:not(.is-all)>.g-w{display:none}
  .gallery-more.need-w{display:flex}
}
/* Op mobiel een horizontale galerij die tot de schermrand loopt, met alle beelden; het volgende piept erin. */
@media (max-width:560px){
  .gallery{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .gallery>.media,.gallery>.media:first-child{flex:0 0 84%;grid-column:auto;grid-row:auto;aspect-ratio:4/3;scroll-snap-align:start}
}
/* Elke tegel is een knop die de foto groot opent (GalleryLightbox.tsx); bij hover zoomt het beeld
   iets in, zoals op plaatskaarten. In de veegbare rij op mobiel snijdt de rij een focusring buiten
   de tegel af, daar ligt hij erbinnen. */
.gallery>button.media{display:block;width:100%;padding:0;border:0;cursor:zoom-in}
.gallery>button.media>img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.gallery>button.media:hover>img{transform:scale(var(--hover-zoom))}}
@media (max-width:560px){.hv .gallery>button.media:focus-visible{outline-offset:-2px}}
.hdr-drop{padding:13px 12px;border:0;background:transparent;font-size:14px}
.hdr-drop:hover,.hdr-drop[aria-expanded=true]{color:var(--accent)}
.hdr-search{min-width:0;position:relative}
/* Op smalle schermen past "Search hotels and places" niet in het veld: dan alleen "Search". */
.hdr-search-short{display:none;position:absolute;left:45px;top:50%;transform:translateY(-50%);color:inherit;pointer-events:none}
@media (max-width:560px){
  .hdr-search input::placeholder{color:transparent!important}
  .hdr-search input:placeholder-shown+.hdr-search-short{display:block}
}

/* Hotelpagina en paginaovergangen (ontwerpronde, spoor hotel) */
/* Play-knop op de poster: massief wit met een inktkleurige driehoek, los van elk beeld; bij hover
   iets groter in plaats van doorschijnend. */
.poster .round-play{background:var(--white);box-shadow:0 10px 30px rgba(0,0,0,.22);transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s}
.poster .round-play svg{fill:var(--ink);margin-left:3px}
.poster .round-play:hover{background:var(--white);transform:translate(-50%,-50%) scale(1.06);box-shadow:0 14px 36px rgba(0,0,0,.26)}
.poster .round-play:active{transform:translate(-50%,-50%) scale(.98)}
/* Play-knop op hotelkaarten: donker glas in plaats van licht, zodat de witte driehoek ook op een
   licht beeld 3:1 haalt (licht glas: 1,4:1 op Shelborne). */
.card-play{background:var(--glass-dark)}
/* Titelrij: de deelknop naast de naam, op de hoogte van de eerste regel (regelhoogte .h1 is 1,04). */
.hotel-head{flex-wrap:nowrap;align-items:flex-start;gap:var(--s-5)}
.hotel-head-text{min-width:0}
.hotel-head>.icon-btn{margin-top:max(0px,calc((1.04 * var(--t-h1) - var(--ctl-s)) / 2))}
/* Boekpaneel: zonder facts begint het paneel met de knop. Gestapeld (smaller dan de twee
   kolommen naast elkaar) staat het boven het verhaal, zodat Book direct vroeg komt. */
.hotel-side .panel-soft>:first-child{margin-top:0}
@media (max-width:920px){.hotel-side{order:-1}}
/* Een verhaal van één alinea is geen intro: gewone leesmaat, net boven de lopende tekst. */
.story p:only-child{font-size:19px;line-height:1.47;letter-spacing:normal}
/* Meer hotels en meer video's: op een smal scherm een veegbare strook in plaats van een stapel. */
@media (max-width:700px){
  .hotel-strip{display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .hotel-strip::-webkit-scrollbar{display:none}
  .hotel-strip>*{flex:0 0 min(72%,340px);min-width:0;scroll-snap-align:start}
}
/* Externe link in lopende tekst (ExternalLink.tsx): de credit onder de galerij, de scores bij What
   guests say. De kleur van de tekst eromheen met het teken ↗ erachter, zoals Book direct:
   het accent haalt op --soft geen AA (zie :root). Tikvlak van 44 px zonder de regel hoger te maken. */
:is(.ext-link,.tel-link){display:inline-block;padding-block:calc((var(--ctl-s) - 1lh) / 2);margin-block:calc((1lh - var(--ctl-s)) / 2)}
:is(.ext-link,.tel-link):hover{color:var(--accent)}
/* Credit onder de galerij (PhotoCredit.tsx): klein en rustig, op de lijn van de foto's. */
.gallery-credit{margin-top:var(--s-3);font-size:var(--t-meta);color:var(--muted)}
/* Social wall (SocialWall.tsx): de rij Guest videos uit het ontwerp als strook (.strip, onderaan bij
   Stroken), elke tegel in de vorm van .guest (230 px, 9:16), met de platformpil (merkje en naam)
   rechtsboven, de play-knop van de hotelkaart in het midden en maker en titel onderaan. TikTok en
   YouTube zijn een knop (lichtbak); Instagram is een link naar buiten (.is-out) met ↗ in de knop. De focusring ligt binnen de
   tegel. Naast de kop de intro en de knoppen vorige en volgende. */
.sw-head{align-items:baseline}
.sw-tools{gap:var(--s-4);flex-wrap:nowrap}
.sw-head+.sw-list{margin-top:calc(var(--gap-block) - var(--s-2))}
.sw-tile{padding:0;border:0;text-align:left}
.hv .sw-tile:focus-visible{outline-offset:-2px}
.sw-tile>img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.sw-plat{position:absolute;right:var(--s-3);top:var(--s-3);display:inline-flex;align-items:center;gap:6px}
.sw-plat>svg{flex:none}
.sw-pp{top:50%;left:50%;right:auto;bottom:auto;width:var(--ctl);height:var(--ctl);transform:translate(-50%,-50%);transition:background .25s,color .25s,transform .25s}
.sw-meta{position:absolute;left:14px;right:14px;bottom:14px;display:grid;gap:2px}
.sw-author{font-size:var(--t-small);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-title{font-size:var(--t-meta);opacity:.9;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
/* Zonder beeld (TikTok of Instagram zonder eigen beeld, of een beeld dat niet laadt): een donkere tegel
   met dezelfde opbouw; pil en knop in licht glas, zoals de knoppen op het donker van de lichtbak. Een
   zacht licht van boven geeft het vlak diepte, zodat het een tegel is en geen gat. */
.sw-tile.is-dark{background:radial-gradient(130% 75% at 50% 0%,#3A3A3C 0%,#2C2C2E 38%,var(--ink) 78%)}
.sw-tile.is-dark .sw-plat{background:var(--glass)}
/* Op het donker een massief witte knop met een inktkleurig teken, zoals de play-knop op de poster: het
   ene heldere punt van de tegel. */
.sw-tile.is-dark .sw-pp{background:var(--white);color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.sw-tile:focus-visible .sw-pp{background:var(--white);color:var(--ink)}
@media (hover:hover){
  .sw-tile:hover>img{transform:scale(var(--hover-zoom))}
  .sw-tile:hover .sw-pp{background:var(--white);color:var(--ink);transform:translate(-50%,-50%) scale(1.08)}
}
/* Detailblok in het boekpaneel (HotelDetails.tsx, ronde 3): vier groepen in plaats van een tabel, met
   een haarlijn ertussen. Kopje klein en grijs boven de waarde, alles links uitgelijnd, zodat een lange
   waarde (adres, luchthaven) netjes onder zichzelf breekt. Oordeel en verblijf delen één raster van drie
   kolommen, zodat een kamer onder een score staat; contact staat direct boven Book direct. Een container:
   gestapeld boven het verhaal (tablet) staan adres en luchthaven naast elkaar. */
.hd{container-type:inline-size}
/* Ruimte tussen de groepen: 24 px op het paneel naast het verhaal, kleiner op een telefoon. */
.hd-group{margin:0;padding-block:clamp(var(--s-4),6cqi,var(--s-5))}
.hd-group:first-child{padding-top:0}
.hd-group+.hd-group{border-top:1px solid var(--hair)}
.hd-group:last-child{padding-bottom:0}
.hd+:is(.hotel-promo,.hotel-book){margin-top:var(--s-6)}
.hd dt{font-size:var(--t-meta);line-height:1.3;color:var(--muted)}
.hd dd{margin:var(--s-1) 0 0;font-size:var(--t-small);font-weight:500;line-height:1.4}
.hd-scores,.hd-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
/* Oordeel: de klasse van het hotel als zin, de scores groot met schaal en bron. De hele score is de
   link (tikvlak vanaf 44 px); de bron kleurt bij hover, zoals een externe link. */
.hd-stars{display:flex;align-items:center;gap:var(--s-2);margin:0;font-size:var(--t-small);color:var(--muted)}
.hd-stars>span:first-child{display:inline-flex}
.hd-scores{list-style:none;margin:0;padding:0}
.hd-stars+.hd-scores{margin-top:var(--s-4)}
.hd-score{display:grid;align-content:start;gap:var(--s-1);min-height:var(--ctl-s)}
.hd-num{font-size:var(--t-h3);font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hd-num>span{margin-left:2px;font-size:var(--t-meta);font-weight:500;letter-spacing:0;color:var(--muted)}
.hd-src{font-size:var(--t-meta);color:var(--muted);transition:color .2s}
a.hd-score:hover .hd-src{color:var(--accent)}
.hv a.hd-score:focus-visible{outline-offset:4px;border-radius:var(--r-thumb)}
/* Verblijf: kamers, check-in, check-out; de waarde iets groter, met cijfers van gelijke breedte. */
.hd-strip dd{font-size:var(--t-h4);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* Plek: onder elkaar, op een breed paneel naast elkaar. */
.hd-stack{display:grid;gap:var(--s-4)}
.hd-stack dd{text-wrap:pretty}
@container (min-width:560px){.hd-stack{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6)}}
/* Contact: telefoon en de iconen naast elkaar, zo breed als ze zijn. */
.hd-contact{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-7)}
.hd-contact dd{font-size:var(--t-small);font-weight:500;letter-spacing:0}
/* Smal paneel (telefoon, boven het verhaal): dichter op elkaar en een maat kleiner, zodat Book direct
   vroeg in beeld komt. */
@container (max-width:420px){
  .hd-group{padding-block:var(--s-3)}
  .hd-stars+.hd-scores{margin-top:var(--s-2)}
  .hd-num{font-size:var(--t-h4)}
  .hd-strip dd{font-size:var(--t-small)}
  .hd-stack{gap:var(--s-3)}
  .hd dd{margin-top:2px}
  .hd-contact{column-gap:var(--s-5)}
}
/* Social-iconen (HotelSocials.tsx): tikvlak van 44 px; de rij wordt er niet hoger van, het eerste
   icoon staat met zijn tekening op de lijn van het kopje erboven en het tikvlak van het laatste telt
   niet mee voor de breedte (zo past de rij naast de telefoon, ook op een telefoon). */
.social-icons{display:flex;flex-wrap:wrap;margin-inline:calc((20px - var(--ctl-s)) / 2)}
.social-icons>a{display:inline-flex;align-items:center;justify-content:center;width:var(--ctl-s);height:var(--ctl-s);margin-block:calc((1lh - var(--ctl-s)) / 2);color:var(--ink);transition:color .2s}
.social-icons>a:hover{color:var(--accent)}
.hv .social-icons>a:focus-visible{outline-offset:-4px;border-radius:var(--r-thumb)}
/* Sterren (RatingStars.tsx): vijf in lijnkleur, daarover dezelfde in inkt tot de score. */
.rating-stars{position:relative;vertical-align:middle;color:var(--line)}
.rating-stars-on{position:absolute;left:0;top:0;bottom:0;display:inline-flex;gap:2px;overflow:hidden;color:var(--ink)}
.rating-stars-on>svg{flex:none}
/* What guests say (GuestReviews.tsx), zoals de sectie Reviews in Hotel.dc.html: de scores groot in een
   zijkolom, ernaast de samenvatting en de citaten als kaarten. Op het grijze vlak wordt de zijkolom wit. */
.rev-head{align-items:baseline}
.rev-body{margin-top:var(--gap-block)}
.split>.rev-scores{flex:1 1 340px;max-width:420px;display:grid;align-content:start}
.soft .rev-scores{background:var(--white)}
.rev-score{display:flex;align-items:flex-end;gap:var(--s-4);padding-block:var(--s-5);border-bottom:1px solid var(--hair)}
.rev-score:first-child{padding-top:0}
.rev-score:last-child{padding-bottom:0;border-bottom:0}
.rev-num{flex:none;font-size:var(--t-h2);font-weight:600;line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.rev-num>span{margin-left:var(--s-1);font-size:var(--t-h4);font-weight:500;letter-spacing:-.01em;color:var(--muted)}
.rev-src{display:grid;justify-items:start;gap:2px;min-width:0}
.rev-name{font-weight:600}
.rev-main{display:grid;align-content:start;gap:var(--s-6)}
.rev-summary{font-size:var(--t-lead);line-height:1.42;max-width:34em;text-wrap:pretty}
.rev-quotes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s-4)}
.rev-quote{margin:0;border:1px solid var(--hair);display:flex;flex-direction:column;gap:var(--s-4)}
.rev-who{display:flex;align-items:center;gap:var(--s-3)}
.rev-who>span:last-child{display:grid;min-width:0}
.rev-who b{font-weight:600;letter-spacing:-.01em}
.rev-quote blockquote{margin:0}
.rev-quote blockquote p{color:var(--muted);text-wrap:pretty}
.rev-link{display:inline-flex;align-items:center;align-self:flex-start;min-height:var(--ctl-s);margin:auto 0 calc(-1 * var(--s-3));font-size:var(--t-small);color:var(--accent)}
/* Bestemming op het witte vlak (als het ritme dat vraagt): het paneel wordt grijs in plaats van wit. */
section:not(.soft)>.wrap>.hotel-dest{background:var(--soft)}
/* More videos (MoreVideos.tsx): tegels van 16:9 met de duur links en de play-knop rechts onder, de
   titel eronder en bij een video van een ander de maker. Zes in beeld, de rest achter de knop; op mobiel
   de veegbare strook met alles. Hover zoals op een hotelkaart. */
.mv-tile{display:block;width:100%;aspect-ratio:16/9;padding:0;border:0}
.mv-tile>img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.mv-len{position:absolute;left:var(--s-3);bottom:var(--s-3)}
.mv-tile>.pp{transition:background .25s,color .25s,transform .25s}
.mv-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.mv-credit{margin-top:var(--s-1)}
.mv-more{display:flex;justify-content:center;margin-top:var(--s-6)}
@media (min-width:701px){.more-videos:not(.is-all)>.mv-extra{display:none}}
@media (max-width:700px){.mv-more{display:none}.hv .mv-tile:focus-visible{outline-offset:-2px}}
@media (hover:hover){
  .mv-tile:hover>img{transform:scale(var(--hover-zoom))}
  .mv-tile:hover>.pp{background:var(--white);color:var(--ink);transform:scale(1.08)}
}
/* Paginaovergangen (cross-document View Transitions): elke link is een volledige paginalading. Oud
   vervaagt, nieuw komt een paar pixels omhoog in beeld; de header blijft staan en de poster van de
   aangeklikte hotelkaart groeit door naar de poster van de hotelpagina. De namen zet page-motion.ts
   alleen tijdens de overgang. Niet bij prefers-reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
::view-transition-old(root){animation:hv-vt-out .18s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:hv-vt-in .26s cubic-bezier(.2,.7,.2,1) both}
[data-hv-vt] .hdr{view-transition-name:hv-header}
::view-transition-group(hv-header),::view-transition-new(hv-header){animation:none}
::view-transition-old(hv-header){display:none}
.poster,[data-vt]{view-transition-class:hv-poster}
::view-transition-group(*.hv-poster){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.7,.2,1);overflow:hidden}
::view-transition-old(*.hv-poster),::view-transition-new(*.hv-poster){height:100%;object-fit:cover;animation-duration:.42s}
@keyframes hv-vt-out{to{opacity:0}}
@keyframes hv-vt-in{from{opacity:0;transform:translateY(8px)}}
/* Een ankerdoel krijgt de focus (page-motion.ts) maar geen focusring: het is geen bediening. */
.hv [tabindex="-1"]:focus{outline:0}

/* Lijsten, zoeken en formulieren (ontwerpronde, spoor lijsten) */
/* Keuzelijst: overal dezelfde eigen pijl (filterbalk, formulieren), niet die van de browser. */
.select{-webkit-appearance:none;appearance:none;padding-right:44px;text-overflow:ellipsis;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231D1D1F' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center}
/* Zoekveld: de focusring volgt de pil, niet het invoerveld erin, en de x van de browser is uit;
   elk zoekveld heeft dezelfde eigen wisknop (ClearButton). Het zoekveld in de header regelt dit zelf. */
.search:not(.hdr-search):has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.hv .search:not(.hdr-search) input:focus-visible{outline:0}
.search:not(.hdr-search) input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* Wisknop: een wit rondje rechts in de pil, met een tikvlak van 44 px. */
.search-clear{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:calc(var(--ctl-s) - var(--s-2));height:calc(var(--ctl-s) - var(--s-2));margin-right:calc(-1 * var(--s-3));border:0;border-radius:50%;background:var(--white);color:var(--ink)}
.search-clear::before{content:'';position:absolute;inset:calc(-1 * var(--s-1))}

/* Stroken (spoor kaarten, 11 okt 2026). Een horizontale rij die van schermrand tot schermrand loopt:
   in rust staat de eerste kaart op de lijn van de kop (de goot van de inhoudskolom, ook naast --max),
   bij scrollen verdwijnt hij links over de schermrand, net als rechts. Geen scrollbalk: op desktop
   met een muis vorige en volgende bij de kop (StripNav.tsx), op touch vegen; shift met het wiel en een
   trackpad scrollen native, Lenis laat de strook horizontaal met rust (SmoothScroll.tsx).
   Gebruik: .strip als eigen element buiten .wrap (volle breedte), met een id voor StripNav; de kaarten
   zijn de kinderen. 100% is dan de breedte van het scherm zonder scrollbalk, dus de lijn klopt ook met
   een vaste scrollbalk. Ruimte boven en onder voor de focusring, zonder dat de rij verschuift. */
.strip{--strip-in:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)));display:flex;gap:var(--s-4);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:var(--s-2) var(--strip-in);margin-block:calc(-1 * var(--s-2));scroll-padding-inline:var(--strip-in);scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip>*{flex:none;scroll-snap-align:start}
.strip-head+.strip{margin-top:calc(var(--s-5) - var(--s-2))}
/* Knoppen: de ronde grijze icon-btn, uitgeschakeld licht; onzichtbaar (met behoud van plek) als alles
   past, weg op touch en smalle schermen. */
.strip-nav{display:flex;gap:var(--s-2);flex:none}
.soft .strip-nav .icon-btn{background:var(--white)}
.strip-nav .icon-btn{color:var(--ink);transition:background .2s,color .2s}
@media (hover:hover){.strip-nav .icon-btn:not([aria-disabled=true]):hover{background:var(--hair)}}
.strip-nav .icon-btn[aria-disabled=true]{color:var(--line);cursor:default}
.strip-nav[data-fits]{visibility:hidden}
@media (hover:none),(max-width:700px){.strip-nav{display:none}}

/* Scrollen zonder haperen (spoor kaarten, 11 okt 2026). Matglas (backdrop-filter) laat de GPU bij
   elk beeld van het scrollen het beeld eronder opnieuw vervagen, per element. Gemeten op de homepage
   tijdens wielscrollen: zonder het glas op knoppen en labels op kaartbeelden een derde minder GPU-tijd
   en minder trage beelden. In rust draagt het glas de vorm van de knop op een druk beeld (zonder leest
   hij als een vlek), dus het gaat alleen uit zolang de pagina met het wiel scrolt (Lenis zet dan
   html.lenis-scrolling) en vloeit daarna terug. De header houdt zijn glas. */
:is(.card-play,.round-play,.glass,.place-go,.pp,.home-strip-play,.home-globe-count,.home-globe-badge){transition-property:background,color,transform,box-shadow,backdrop-filter;transition-duration:.25s}
.lenis-scrolling :is(.card-play,.round-play,.glass,.place-go,.pp,.home-strip-play,.home-globe-count,.home-globe-badge){-webkit-backdrop-filter:none;backdrop-filter:none}