/* ============================================================================
   MANSIO — systeem
   Eén stylesheet voor de hele site. Geen framework, geen build.
   Eén webfont: Newsreader, variabel op de optische as, gesubset tot de tekens
   die deze site gebruikt. 49 KB voor het verschil tussen «een serif» en «deze
   serif» — de rest van de letters komt van het toestel zelf.
   ========================================================================= */

/* --- 1 · de letter ------------------------------------------------------- */
/* Newsreader (Production Type, OFL 1.1 — zie assets/fonts/OFL.txt).
   Variabel op `opsz` 6–72: de vorm VERANDERT met de graad. Groot wordt fijner
   en hoger van contrast, klein wordt steviger. Dat is de hele reden om een
   variabele as te betalen; de gewichts-as is vastgezet op 400 omdat dit
   ontwerp niets anders gebruikt, en dat scheelde 67 KB. */
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader-opsz.woff2') format('woff2-variations');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013, U+2014, U+2018, U+2019, U+201C, U+201D,
                 U+2026, U+2192, U+20AC;
}

/* De vervanger draagt de MATEN van Newsreader, niet die van zichzelf. Zonder
   deze overrides springt de bladspiegel als de webfont binnenkomt: Georgia
   heeft een x-hoogte van .481 em tegen .426 em van Newsreader — 13 % groter.
   size-adjust brengt ze gelijk; ascent/descent zijn omgerekend naar de
   nieuwe em (.735/.885 en .265/.885), zodat ook de regelhoogte klopt. */
@font-face {
  font-family: 'Newsreader vervanger';
  src: local('Georgia'), local('Times New Roman'), local('Liberation Serif');
  size-adjust: 88.5%;
  ascent-override: 83%;
  descent-override: 30%;
  line-gap-override: 0%;
}

/* --- 2 · tokens ---------------------------------------------------------- */
:root {
  color-scheme: light;

  /* inkt & papier */
  --papier:      #faf6ef;
  --perkament:   #f3ede1;
  --zand:        #ebe3d4;
  --lijn:        #e0d6c4;
  --lijn-zacht:  #ece4d6;
  --inkt:        #151310;
  --inkt-zacht:  #3a352d;
  --inkt-stil:   #5f574a;   /* AA op papier, ook bij 15 px */

  /* accenten */
  --brons:       #9a7845;
  --brons-diep:  #7d5f31;
  --groen:       #1d3a32;
  --groen-licht: #2d5749;

  /* ritme — één reeks, overal dezelfde */
  --marge:  clamp(20px, 5.2vw, 52px);
  --breed:  1140px;
  --smal:   660px;
  --lucht:  clamp(64px, 10vw, 150px);

  /* letters */
  --serif: 'Newsreader', 'Newsreader vervanger', Georgia, serif;
  --sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
           'Helvetica Neue', Arial, sans-serif;

  /* DE BOOG ALS VORM. Rond boven, recht onder — de silhouet van het merkteken.
     Alles wat een raam is (beeld, venster, zegel-lijst) krijgt hem; knoppen
     houden hun pil, want een knop is geen raam. Systeem, geen stempel. */
  /* De straal is VLOEIEND, niet vast. Een vaste 220 px is op een scherm van
     1140 px een elegante boog en op 350 px een guillotine: hij at de kop van
     de schermafdruk eraf. Gemeten op 390 px, en daarom staat het hier zo. */
  --boog-groot: clamp(30px, 6.5vw, 84px);
  --boog-mid:   clamp(22px, 4vw, 54px);
  --boog-klein: 20px 20px 3px 3px;

  /* beweging — kort, en met een curve die remt in plaats van te stuiteren */
  --snel:  150ms;
  --mid:   220ms;
  --curve: cubic-bezier(.2, .6, .2, 1);
}

/* --- 3 · basis ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;              /* de sticky kop dekt geen anker af */
  scrollbar-color: var(--lijn) transparent;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (min-width: 900px) { body { font-size: 17.5px; } }

/* De optische as doet haar werk vanzelf: de browser kiest `opsz` naar
   lettergrootte. Dat is precies wat we willen en het staat één keer. */
h1, h2, h3, h4, .wordmerk, .cijfer, .prijs, .serif {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-synthesis: none;                  /* liever geen dan nep-cursief */
  margin: 0;
  text-wrap: balance;
}

/* De bovengrens is 4.15rem en niet 5.1rem: op 1440 px werd het een AFFICHE van
   vier regels in een kolom van 420 px, met «blijven –» alleen op regel drie en
   de knop weggedrukt naar de onderrand van het beeld. Gemeten, niet geschat. */
h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.15rem);
  line-height: 1.04;
  letter-spacing: -.025em;
}
h2 {
  font-size: clamp(1.8rem, 4.4vw, 2.85rem);
  line-height: 1.09;
  letter-spacing: -.02em;
}
h3 {
  font-size: clamp(1.16rem, 1.5vw, 1.38rem);
  line-height: 1.28;
  letter-spacing: -.012em;
}

p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--brons-diep); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--inkt); }

img, svg { max-width: 100%; }
img { height: auto; }

/* Het donkere brons, niet het lichte: wit op `--brons` haalde 4.08:1 en dat is
   onder de 4.5 die AA vraagt. Gemeten met meet-contrast.js, niet geschat —
   geselecteerde tekst is nog steeds tekst. */
::selection { background: var(--brons-diep); color: #fff; }

/* De focusring is dezelfde vorm als het element dat hij omsluit, en hij is
   bronzen — zichtbaar op papier, nooit het blauw van de browser. */
:focus-visible {
  outline: 2px solid var(--brons-diep);
  outline-offset: 3px;
  border-radius: 3px;
}
.knop:focus-visible { border-radius: 999px; }
.venster:focus-visible, .lijst-beeld:focus-visible { border-radius: var(--boog-mid); }

.container { width: min(var(--breed), 100% - 2 * var(--marge)); margin-inline: auto; }
.smal { max-width: var(--smal); }

.overslaan {
  position: absolute; left: -9999px; top: 0;
  background: var(--groen); color: #fff; padding: 12px 20px; z-index: 100;
  border-radius: 0 0 6px 0;
}
.overslaan:focus { left: 0; }

/* --- 4 · merk: wordmerk, arcade, zegel ----------------------------------- */
/* HET WORDMERK IS MET DE HAND GESPATIEERD. Één uniforme `letter-spacing` laat
   de I zwemmen tussen de S en de O — die twee zijn breed en rond, de I is een
   streep. De span-jes trekken dat recht. Zonder dit ziet het er «getypt» uit
   in plaats van «gezet». */
.wordmerk {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: clamp(.98rem, 2.6vw, 1.1rem);
  letter-spacing: .3em; text-transform: uppercase;
  text-decoration: none; color: var(--inkt);
  transition: color var(--snel) var(--curve);
}
.wordmerk .letters { padding-right: .3em; }        /* de laatste spatie niet laten hangen */
.wordmerk .k-i { letter-spacing: .34em; }          /* I krijgt lucht rechts */
.wordmerk .k-s { letter-spacing: .26em; }          /* S-I dichter op elkaar */
.wordmerk .boog {
  width: 1.05em; height: 1.3em; color: var(--brons); flex: none;
  transition: color var(--mid) var(--curve), transform var(--mid) var(--curve);
}
.wordmerk:hover .boog { color: var(--groen); transform: translateY(-1px); }

/* DE ARCADE HEEFT EEN VASTE MAAT, GEEN VASTE AANTAL.
   Eerst was dit één SVG met zestien bogen die met de breedte meerekte. Op 1140
   px een galerij, op 350 px een strook geplet kant van drie pixels hoog – het
   motief werd behang. Een echte arcade heeft bogen van een vaste maat en er
   passen er zoveel in als er passen. Vandaar een tegel van 70 × 33 die zich
   herhaalt vanuit het midden, met de vloerlijn als rand eronder. */
.arcade {
  display: block; width: 100%; height: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='38' viewBox='0 0 62 38'%3E%3Cpath d='M.5 38V32a30.5 27 0 0 1 61 0v6' fill='none' stroke='%23e0d6c4' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom center;
  border-bottom: 1px solid var(--lijn);
}
.arcade-blok { padding: clamp(26px, 4.6vw, 54px) 0; }

.zegel { width: 112px; height: 112px; color: var(--brons); flex: none; }

/* --- 5 · kop en navigatie ------------------------------------------------ */
.kop {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--papier) 86%, transparent);
  backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--lijn);
}
.kop-balk {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 20px 0;
}
.kop-rechts { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); }
.kop nav { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 34px); }

/* DE TALENKIEZER. Drie afkortingen in de kapitalen van het huis, gescheiden
   door een haarlijn — geen vlaggen. Een vlag is een land en geen taal, en
   Mansio verkoopt straks in landen die dezelfde taal delen; een Mexicaanse
   bezoeker hoort niet op een Spaanse vlag te moeten klikken. */
.talen { display: flex; align-items: center; gap: 0; flex: none; }
/* Het RAAKVLAK is 44 px hoog en minstens 24 px breed, ook al is de letter maar
   18 px. Lighthouse mat 18,6 × 32 op de telefoon en had gelijk: drie kleine
   afkortingen naast elkaar zijn met een duim niet te raken zonder de verkeerde
   te pakken. De letters blijven precies even klein; alleen het gebied groeit. */
.talen a {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--inkt-stil); text-decoration: none;
  padding: 12px 4px; min-width: 24px; text-align: center;
  transition: color var(--snel) var(--curve);
}
/* Een punt tussen de talen, niet een streep: de streep las als een tabelrand
   en trok meer aandacht dan de talen zelf. De punt is hetzelfde teken dat de
   opschriften al gebruiken («Websites voor hotels · wereldwijd»). */
.talen a + a::before {
  content: "·"; margin: 0 .3em 0 .16em; color: var(--lijn); letter-spacing: 0;
}
.talen a:hover { color: var(--inkt); }
.talen a[aria-current] { color: var(--brons-diep); }
.kop nav a {
  font-size: .94rem; color: var(--inkt-stil); text-decoration: none;
  padding: 5px 0; position: relative;
  transition: color var(--snel) var(--curve);
}
.kop nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--brons);
  transition: right var(--mid) var(--curve);
}
.kop nav a:hover, .kop nav a[aria-current="page"] { color: var(--inkt); }
.kop nav a:hover::after, .kop nav a[aria-current="page"]::after { right: 0; }

/* MOBIEL: twee regels, maar ONTWORPEN. De navigatie loopt van rand tot rand
   met een haarlijn erboven — dat leest als een krantenkop, niet als een menu
   dat niet paste. Scheelt bovendien 18 px hoogte, en op 844 px telt elke px. */
@media (max-width: 760px) {
  .kop-balk { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  /* Op de telefoon staat het wordmerk links en de talenkiezer rechts op
     dezelfde regel: die drie afkortingen kosten 90 px en de regel was leeg. */
  .kop .wordmerk { padding: 14px 0 12px; }
  .kop-balk > .wordmerk { order: -1; }
  .kop-rechts { flex-direction: column; align-items: stretch; gap: 0; }
  .kop nav {
    justify-content: space-between; gap: 8px;
    border-top: 1px solid var(--lijn-zacht); padding: 9px 0 10px;
  }
  .kop nav a { font-size: .82rem; letter-spacing: .02em; }
  .talen { position: absolute; top: 6px; right: calc(var(--marge) - 4px); }
  html { scroll-padding-top: 84px; }
}
.kop-balk { position: relative; }

/* --- 6 · knoppen --------------------------------------------------------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  background: var(--groen); color: #fff;
  padding: 15px 32px; border-radius: 999px;
  font-family: var(--sans); font-size: .97rem; line-height: 1.2;
  text-decoration: none; border: 1px solid var(--groen); cursor: pointer;
  transition: background var(--mid) var(--curve), border-color var(--mid) var(--curve),
              transform var(--snel) var(--curve), box-shadow var(--mid) var(--curve);
}
.knop:hover {
  background: var(--groen-licht); border-color: var(--groen-licht); color: #fff;
  transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(21, 19, 16, .6);
}
.knop:active { transform: translateY(0); box-shadow: none; }
.knop-stil { background: transparent; color: var(--inkt); border-color: var(--lijn); }
.knop-stil:hover { background: var(--perkament); color: var(--inkt); border-color: var(--brons); }
.knoppen { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* De tekstlink met pijl: lichter dan een tweede knop, en de pijl beweegt mee. */
.pijl {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--sans); font-size: .97rem; color: var(--inkt);
  text-decoration: none; padding: 4px 0; position: relative;
}
.pijl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--lijn); transition: background var(--mid) var(--curve);
}
.pijl:hover::after { background: var(--brons); }
.pijl .punt { transition: transform var(--mid) var(--curve); }
.pijl:hover .punt { transform: translateX(4px); }

@media (max-width: 560px) {
  .knoppen { gap: 12px; }
  .knoppen .knop { width: 100%; }        /* gelijke breedte, geen rafelrand */
}

/* --- 7 · secties en typografische onderdelen ----------------------------- */
.sectie { padding-block: var(--lucht); }
.sectie-krap { padding-block: clamp(44px, 6.6vw, 96px); }

/* DE NAAD NA DE HERO. Twee blokken die elk hun eigen lucht meebrengen stapelen
   die op: op 1440 stond er 143 px niets tussen de inleiding en het eerste blok.
   Eén regel, en het ritme klopt op alle vijf de pagina's. */
.hero + .sectie-krap, .hero + .sectie, .hero + .arcade-blok {
  padding-top: clamp(22px, 2.8vw, 42px);
}

.opschrift {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brons-diep); margin: 0 0 16px;
}
.lead {
  font-size: clamp(1.14rem, .55vw + 1rem, 1.32rem);
  line-height: 1.56; color: var(--inkt-zacht); max-width: 42ch;
}
.stil { color: var(--inkt-stil); }
.klein { font-size: .89rem; }
.streep { border: 0; border-top: 1px solid var(--lijn); margin: 0; }

.duo { display: grid; gap: clamp(26px, 4.6vw, 72px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .duo { grid-template-columns: .92fr 1.08fr; } .duo-strak { grid-template-columns: 1fr 1fr; } }

.raster { display: grid; gap: clamp(22px, 3.2vw, 46px); grid-template-columns: repeat(auto-fit, minmax(244px, 1fr)); }

/* --- DE WEG (diensten) ---------------------------------------------------
   Vier poorten op één doorlopende weg. De weg is een echte, ononderbroken lijn:
   daarom staan de kolommen tegen elkaar (`column-gap: 0`) en zit de ruimte in
   de padding van elke cel — met een gat tussen de kolommen zou de weg vier
   losse streepjes worden. Op smal scherm kantelt hij: de lijn wordt de linker
   rand en de poorten worden mijlpalen onderweg. */
.weg { list-style: none; margin: clamp(34px, 4.4vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.weg li { position: relative; padding: 0 0 0 clamp(72px, 18vw, 84px); margin-bottom: 30px; }
.weg li:last-child { margin-bottom: 0; }
.weg li::before {                       /* de weg, verticaal */
  content: ""; position: absolute; left: clamp(27px, 6.8vw, 32px); top: 6px; bottom: -30px;
  width: 1px; background: var(--lijn);
}
.weg li:last-child::before { bottom: auto; height: 50px; }
/* Op de telefoon is de poort breder dan hij «hoeft»: met 44 px kwam het
   Romeinse cijfer op nog geen 10 px uit en was het decoratie in plaats van een
   nummer. Gemeten op 390 px. */
.weg-poort { position: absolute; left: 0; top: 0; width: clamp(56px, 14vw, 64px); }
.weg-poort svg { display: block; width: 100%; height: auto; color: var(--brons); background: var(--papier); }
.weg h3 { margin-bottom: 8px; }
.weg .aankomst .weg-poort svg { color: var(--groen); }
.weg .aankomst h3 { color: var(--groen); }

/* DE VIERDE POORT GAAT OPEN. Twee deurhelften die uit elkaar schuiven zodra
   de poort in beeld komt: de site die live gaat. Eén beweging, 600 ms, en
   dan is het klaar — geen lus, want een deur die blijft open- en dichtgaan is
   een spookhuis, geen oplevering. */
.js .weg .aankomst .deur-l,
.js .weg .aankomst .deur-r { transition: transform 600ms var(--curve); }
.js .weg .aankomst.in-beeld .deur-l { transform: translateX(-28px); }
.js .weg .aankomst.in-beeld .deur-r { transform: translateX(28px); }
@media (prefers-reduced-motion: reduce) {
  .js .weg .aankomst .deur-l { transform: translateX(-28px); transition: none; }
  .js .weg .aankomst .deur-r { transform: translateX(28px); transition: none; }
}
.weg .aankomst .weg-poort svg { overflow: hidden; }

@media (min-width: 860px) {
  .weg { grid-template-columns: repeat(4, 1fr); column-gap: 0; }
  .weg li { padding: 0 clamp(18px, 2.2vw, 30px) 0 0; margin-bottom: 0; }
  .weg li::before {                     /* de weg, horizontaal en doorlopend */
    left: 0; right: 0; top: auto; bottom: auto; width: auto; height: 1px;
    /* de voet van de poort: hoogte van de svg binnen de cel */
    inset-block-start: calc(clamp(72px, 8.4vw, 96px) - 1px);
  }
  /* De weg HOUDT OP bij de laatste poort. Doorlopen tot de rand van de cel zou
     zeggen dat er nog iets komt; er komt niets meer, u bent er. */
  .weg li:last-child::before { height: 1px; right: auto; width: clamp(72px, 8.4vw, 96px); }
  .weg-poort { position: static; width: clamp(72px, 8.4vw, 96px); margin-bottom: 22px; }
}

.stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(24px, 3vw, 34px); }
.stappen li { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; }
.cijfer { font-size: 1.9rem; color: var(--brons); line-height: 1; min-width: 1.7ch; }

/* DE OPSOMMING DRAAGT DE BOOG. Geen bolletje, geen streepje, geen vinkje: het
   merkteken zelf, 10 px hoog, in brons. Dit is de plek waar het motief het
   hardst werkt, want het staat naast elke belofte die we doen. */
.lijst { list-style: none; margin: 0; padding: 0; }
.lijst li {
  padding: 13px 0 13px 28px; border-top: 1px solid var(--lijn-zacht); position: relative;
}
.lijst li:first-child { border-top: 0; }
.lijst li::before {
  content: ""; position: absolute; left: 0; top: 1.42em;
  width: 13px; height: 9px;
  border: 1px solid var(--brons); border-bottom: 0;
  border-radius: 7px 7px 0 0;
}

.kaart {
  position: relative;
  background: var(--papier); border: 1px solid var(--lijn);
  padding: clamp(24px, 2.8vw, 38px); border-radius: var(--boog-klein);
}
.kaart h3 { margin-bottom: 10px; }
.op-perkament { background: var(--perkament); }
.kaart.op-perkament { border-color: var(--zand); }

/* De uitspraak over Rome: geen cursief (die hebben we niet), maar een boog
   als citaatteken links. */
.uitspraak { position: relative; padding-left: 26px; }
.uitspraak::before {
  content: ""; position: absolute; left: 0; top: .34em; bottom: .34em;
  width: 12px; border: 1px solid var(--brons); border-right: 0;
  border-radius: 8px 0 0 8px;
}
.gezet { letter-spacing: .06em; color: var(--brons-diep); }

/* --- 8 · hero ------------------------------------------------------------ */
.hero { padding-top: clamp(30px, 5vw, 76px); padding-bottom: clamp(26px, 3.4vw, 48px); }
.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: clamp(18px, 2vw, 26px); max-width: 38ch; }
.hero .knoppen { margin-top: clamp(24px, 3vw, 36px); }

/* OP BREED SCHERM STAAT HET PRODUCT NAAST DE BELOFTE, NIET ERONDER.
   Hier stond een grote sierboog: mooi, en 50 % van het eerste beeld waarop
   niets te zien was. Wie in drie seconden wil weten wat Mansio verkoopt, moet
   een site zien die reserveert — dus staat het venster nu in het eerste beeld.
   Op smal scherm valt alles terug op één kolom en komt het venster eronder,
   precies zoals het al werkte. */
.hero-raster { display: grid; gap: clamp(30px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .hero-raster { grid-template-columns: 1fr 1.04fr; align-items: center; }
}
.hero-venster .opschrift { margin-bottom: 12px; }

/* --- 9 · het voorbeeld dat ademt ---------------------------------------- */
.venster {
  border: 1px solid var(--lijn); border-radius: var(--boog-mid); overflow: hidden;
  background: #fff; box-shadow: 0 30px 80px -34px rgba(21, 19, 16, .5);
  animation: ademen 9s ease-in-out infinite;
}
@keyframes ademen {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-5px) scale(1.003); }
}
.venster-balk {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 16px; background: var(--perkament); border-bottom: 1px solid var(--lijn);
}
.venster-balk .stip { width: 8px; height: 8px; border-radius: 50%; background: var(--zand); flex: none; }
.venster-balk .adres {
  margin-left: 8px; font-size: .72rem; color: var(--inkt-stil);
  background: var(--papier); border: 1px solid var(--lijn-zacht);
  padding: 4px 13px; border-radius: 999px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* HET VENSTER IS EEN CONTAINER, EN DAT IS GEEN DETAIL.
   De widget stond op een maat die van de VIEWPORT afhing, terwijl de site
   eronder een SVG is die met het VENSTER meeschaalt. Gevolg, gemeten op 1440:
   de tekst in het reserveergesprek was anderhalf keer zo groot als de tekst van
   de site zelf — de hiërarchie op zijn kop, en het geheel las als een chat-app
   met een website erachter in plaats van andersom. Met `cqw` hangt alles aan
   dezelfde maat: de breedte van het venster. */
/* DE KLOK. Drie uur 's nachts, in de balk van het venster. Eén getal, en het
   hele verhaal staat er: de balie is leeg en er komt toch een boeking binnen.
   Hij springt één minuut verder op het moment van de bevestiging — de enige
   beweging die hij maakt, en precies daarom valt hij op. */
.venster-balk .klok {
  margin-left: auto; flex: none;
  font-size: .72rem; letter-spacing: .1em; color: var(--inkt-stil);
  font-variant-numeric: tabular-nums;
  transition: color var(--mid) var(--curve);
}
.venster-balk .klok.tikt { color: var(--brons-diep); }

/* Eén raam dat aangaat als de bevestiging binnen is: de nachtportier die
   wakker wordt van een e-mail. Traag, want zo gaat dat om drie uur 's nachts. */
.venster-doek .raam-wakker { transition: opacity 1.6s var(--curve); }
.venster-doek.geboekt .raam-wakker { opacity: .9; }

.venster-doek {
  position: relative; aspect-ratio: 16 / 11.4; background: #0f1a1e;
  container-type: inline-size;
}
.venster-doek > svg { display: block; width: 100%; height: 100%; }

.widget {
  position: absolute; right: 3.2%; bottom: 4.4%;
  /* De ondergrenzen zijn er voor de telefoon: op een venster van 350 px zou
     42cqw op 147 px uitkomen en de tekst op 7 px — een maquette die klopt maar
     die niemand leest. Op die breedte wint leesbaarheid van schaalgetrouwheid. */
  width: clamp(168px, 42cqw, 272px);
  background: var(--papier); border: 1px solid var(--lijn);
  border-radius: 13px 13px 11px 11px;
  box-shadow: 0 16px 38px -18px rgba(0, 0, 0, .5);
  overflow: hidden; font-size: clamp(9.5px, 2cqw, 12.5px); line-height: 1.5;
}
.widget-kop {
  display: flex; align-items: center; gap: 7px;
  background: var(--groen); color: #fff; padding: 8px 12px;
  font-size: .95em; letter-spacing: .05em;
}
.widget-kop .punt { width: 6px; height: 6px; border-radius: 50%; background: #7fd7b0; flex: none; animation: pols 2.6s ease-in-out infinite; }
@keyframes pols { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* VASTE HOOGTE, en dat is opzet. Met een meegroeiende draad werd het venster
   tijdens het gesprek steeds hoger en dekte het op het eind de kamerkaarten
   eronder af — precies de kaarten die moeten laten zien dat dit een hótelsite
   is. Nu schuiven oude regels er bovenlangs uit, zoals in een echt gesprek,
   en blijft de maat constant. */
.widget-draad {
  padding: 11px; display: flex; flex-direction: column; gap: 7px;
  height: 8.4em; overflow: hidden; justify-content: flex-end;
}
@media (prefers-reduced-motion: reduce) {
  .widget-draad { height: auto; min-height: 8.4em; }
}

.bel {
  max-width: 88%; padding: 7px 11px; border-radius: 12px;
  background: var(--perkament); color: var(--inkt-zacht); align-self: flex-start;
  animation: bel-op var(--mid) var(--curve) both;
}
@keyframes bel-op { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bel.gast { background: var(--groen); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; }
.bel.huis { border-bottom-left-radius: 3px; }
.bel.tikt { letter-spacing: .16em; color: var(--inkt-stil); }
/* De bevestiging is geen gewone bel: hij krijgt het groen van het huis en een
   vinkje. Dat is het moment waar het hele gebaar naartoe werkt. */
.bel.klaar {
  color: var(--groen); background: #e4ede7;
  display: inline-flex; align-items: baseline; gap: .45em;
}
.bel.klaar .vink { flex: none; align-self: center; }

/* Dezelfde bellen, maar stilstaand — op de dienstenpagina, waar het gesprek
   gelezen wordt in plaats van bekeken. */
.gesprek-stil { display: flex; flex-direction: column; gap: 9px; font-size: .94rem; }
.gesprek-stil .bel { max-width: 84%; animation: none; }

.bijschrift {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px;
  margin-top: 18px; font-size: .87rem; color: var(--inkt-stil);
}

@media (prefers-reduced-motion: reduce) {
  .venster { animation: none; }
  .widget-kop .punt { animation: none; }
  .bel { animation: none; }
  .venster-doek .drijft { animation: none !important; }
}

.venster-doek .drijft { animation: weerspiegeling 7s ease-in-out infinite; transform-origin: center top; }
@keyframes weerspiegeling {
  0%, 100% { opacity: .2;  transform: scaleY(1); }
  50%      { opacity: .34; transform: scaleY(1.16); }
}

/* --- 10 · beeld in een boog --------------------------------------------- */
/* Echte schermafdrukken van het echte project, in het raam van het huis. */
/* HET PASSE-PARTOUT. De boog zit in het LIJSTJE, met een smalle rand perkament
   eromheen; de afdruk zelf krijgt dezelfde boog een maat kleiner. Zo snijdt het
   motief nooit door de inhoud die het moet tonen — de eerste versie deed dat
   wél en onthoofdde de schermafdruk. */
.lijst-beeld {
  display: block; margin: 0; border: 1px solid var(--lijn);
  border-radius: calc(var(--boog-groot) + 10px) calc(var(--boog-groot) + 10px) 6px 6px;
  background: var(--perkament); padding: clamp(9px, 1.1vw, 14px);
  box-shadow: 0 26px 64px -38px rgba(21, 19, 16, .55);
}
.lijst-beeld img {
  display: block; width: 100%;
  border-radius: var(--boog-groot) var(--boog-groot) 3px 3px;
}
.lijst-beeld figcaption {
  padding: 14px 10px 4px; font-size: .84rem; color: var(--inkt-stil);
}
.beeld-telefoon {
  border-radius: 46px 46px 22px 22px; max-width: 288px; padding: 10px;
  margin-inline: auto;
}
.beeld-telefoon img { border-radius: 36px 36px 14px 14px; }
.beeld-duo { display: grid; gap: clamp(22px, 3vw, 40px); align-items: end; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .beeld-duo { grid-template-columns: 1.9fr 1fr; } }

/* --- 11 · prijzen -------------------------------------------------------- */
.prijs { font-size: clamp(1.75rem, 2.6vw, 2.2rem); line-height: 1; letter-spacing: -.02em; }
.prijs .vanaf {
  display: block; font-family: var(--sans); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brons-diep); margin-bottom: 9px;
}
.prijs .per { font-family: var(--sans); font-size: .82rem; color: var(--inkt-stil); letter-spacing: 0; }
.uitgelicht { border-color: var(--brons); }
/* Gecentreerd, niet links uitgelijnd: links botste het vaantje op 768 px tegen
   de ronding van de bovenhoek en las het als een ongelukje. Midden op de rand
   is bovendien wat een vaantje hoort te doen. */
.vlag {
  position: absolute; top: -.85em; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--sans); font-size: .69rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brons-diep); background: var(--papier);
  border: 1px solid var(--brons); border-radius: 999px; padding: 3px 12px;
}

/* --- 12 · formulier ------------------------------------------------------ */
.veld { display: block; margin-bottom: 19px; }
.veld > span {
  display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--inkt-stil); margin-bottom: 7px;
}
.veld input, .veld textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--inkt);
  background: var(--papier); border: 1px solid var(--lijn); border-radius: 3px;
  padding: 12px 14px;
  transition: border-color var(--snel) var(--curve), box-shadow var(--snel) var(--curve);
}
.veld input:hover, .veld textarea:hover { border-color: var(--brons); }
.veld input:focus, .veld textarea:focus {
  outline: none; border-color: var(--groen);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--groen) 14%, transparent);
}
.veld textarea { min-height: 132px; resize: vertical; }
.veld input:user-invalid, .veld textarea:user-invalid { border-color: #a4442f; }
.veld .hulp { display: block; margin-top: 6px; font-size: .8rem; color: #8a3a28; }
.veld input:user-invalid ~ .hulp { display: block; }

.melding {
  margin-top: 18px; padding: 14px 18px;
  border: 1px solid var(--groen); border-radius: var(--boog-klein);
  background: #e7efe9; color: var(--groen); font-size: .9rem;
}
.melding.fout { border-color: #a4442f; background: #f7e9e4; color: #7d2d1c; }

/* --- 13 · voet ----------------------------------------------------------- */
.voet { background: var(--perkament); border-top: 1px solid var(--lijn); padding-block: clamp(44px, 5.6vw, 78px); }
.voet-raster { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .voet-raster { grid-template-columns: auto 1fr auto; align-items: start; } }
.voet h3 {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brons-diep); margin: 0 0 12px; font-weight: 600;
}
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.voet a { color: var(--inkt-zacht); text-decoration: none; transition: color var(--snel) var(--curve); }
.voet a:hover { color: var(--inkt); text-decoration: underline; text-underline-offset: .2em; }
.voet-slot {
  margin-top: clamp(30px, 3.6vw, 52px); padding-top: 22px; border-top: 1px solid var(--lijn);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: .83rem; color: var(--inkt-stil);
}

/* --- 13bis · 404 --------------------------------------------------------- */
.vierhonderdvier { display: grid; gap: clamp(30px, 5vw, 70px); grid-template-columns: minmax(0, 1fr); align-items: center; }
.vierhonderdvier .poort { width: min(230px, 62vw); color: var(--brons); opacity: .75; justify-self: start; }
.vierhonderdvier h1 { max-width: 13ch; }
.vierhonderdvier .lijst li { padding-left: 28px; }
.vierhonderdvier .lijst a { color: var(--inkt); text-decoration: none; }
.vierhonderdvier .lijst a:hover { color: var(--brons-diep); text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 820px) { .vierhonderdvier { grid-template-columns: auto 1fr; } }

/* --- 14 · zachte binnenkomst -------------------------------------------- */
/* De `.js`-haak: verbergen gebeurt ALLEEN als er javascript draait. Zonder die
   haak bleven hele secties op opacity 0 staan als het script niet laadde. */
.js .komt-op { opacity: 0; transform: translateY(12px); transition: opacity 700ms var(--curve), transform 700ms var(--curve); }
.js .komt-op.in-beeld { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .komt-op { opacity: 1; transform: none; transition: none; } }