@font-face { font-family: "Young Serif"; src: url(fonts/young-serif.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Karla"; src: url(fonts/karla.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Karla"; src: url(fonts/karla-italic.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

/* Colours from Pim's treatment room: the dark botanical wallpaper, its coral
   flowers, the pink wall, the striped table cloth and the paper lamp. */
:root {
  --behang: #131a16;
  --behang-2: #1b241f;
  --koraal: #ec8c8f;
  --muur: #dcaa9f;
  --lamp: #fff1d2;
  --lamp-rand: #f1c27d;
  --doek: #2c322e;
  --doek-streep: #363d38;
  --tekst: #f3eadc;
  --tekst-2: #c8bead;
  --lijn: #34443a;
  --rand: clamp(20px, 4vw, 56px);
  --maat: min(1200px, 100% - 2 * var(--rand));
  --gap: clamp(28px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { background: var(--behang); color: var(--tekst); }
body { margin: 0; position: relative; overflow-x: hidden; font: 400 1.125rem/1.6 "Karla", system-ui, sans-serif; }
h1, h2, h3 { font-family: "Young Serif", Georgia, serif; font-weight: 400; line-height: 1.1; margin: 0; }
a { color: var(--koraal); text-underline-offset: 3px; }
a:hover { color: var(--lamp); }
:focus-visible { outline: 3px solid var(--lamp-rand); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 .8em; }

/* ---------- the long stroke ---------- */
.streek { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; overflow: visible; }
.no-js .streek { display: none; }
.streek path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.streek-spoor { stroke: var(--lijn); stroke-width: 1.5; stroke-dasharray: 2 9; }
.streek-lijn { stroke: var(--lamp-rand); stroke-width: 3.5; filter: drop-shadow(0 0 6px rgb(241 194 125 / .5)); }
.streek-kop { transition: opacity .6s; mix-blend-mode: screen; }
/* text sits above the stroke, photos and the body below it */
.kop, .keuze, .details, .halte > *:not(.pim-foto):not(.anker), .einde > *:not(.anker), .top { position: relative; z-index: 3; }
.anker, .anker-los { position: absolute; width: 2px; height: 2px; }

/* ---------- top ---------- */
.top { width: var(--maat); margin: 0 auto; padding: 22px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.mark { display: inline-flex; gap: 10px; align-items: center; color: var(--tekst); text-decoration: none; font-weight: 700; }
.mark svg { width: 26px; height: 26px; color: var(--koraal); }
.top nav { display: flex; gap: 24px; font-size: .95rem; }
.top nav a { color: var(--tekst-2); }

/* ---------- on the table ---------- */
.tafel { position: relative; width: var(--maat); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "kop kop" "lichaam keuze" "details keuze"; gap: 0 var(--gap); align-items: start; padding-bottom: 40px; }
.kop { grid-area: kop; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 48px; padding: clamp(18px, 4vh, 44px) 0 clamp(14px, 2.5vh, 24px); }
.kop h1 { font-size: clamp(3rem, 7vw, 5.6rem); color: var(--lamp); }
.lede { max-width: 44ch; color: var(--tekst-2); margin: 0 0 .5em; }

.lichaam { grid-area: lichaam; margin: 0; position: relative; z-index: 1; }
.tafel-svg { width: 100%; height: auto; display: block; overflow: visible; }
.kussen { fill: var(--doek-streep); }
.ankers circle { fill: none; }
.z { fill: var(--behang-2); stroke: #7d8c81; stroke-width: 1.5; transition: fill .7s ease, stroke .7s ease, filter .7s ease; }
.z.aan { fill: url(#gloed); stroke: var(--lamp-rand); filter: drop-shadow(0 0 14px rgb(241 194 125 / .4)); }

.keuze { grid-area: keuze; border: 0; margin: 0; padding: 0; min-width: 0; }
.keuze legend { font-family: "Young Serif", serif; font-size: 1.35rem; color: var(--lamp); padding: 0; margin-bottom: 10px; }
.schaal { display: flex; justify-content: space-between; font-size: .8rem; color: var(--tekst-2); border-bottom: 1px solid var(--lijn); padding-bottom: 4px; margin-bottom: 4px; }
.keuze label { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 12px; padding: 10px 0 12px; cursor: pointer; color: var(--tekst-2); border-bottom: 1px solid var(--lijn); }
.keuze input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.keuze .naam { font-family: "Young Serif", serif; font-size: 1.12rem; }
.keuze .meta { font-size: .92rem; white-space: nowrap; }
.keuze .balk { grid-column: 1 / -1; order: 3; height: 8px; margin-top: 8px; width: calc(var(--min) / 120 * 100%); background: color-mix(in srgb, var(--muur) 30%, transparent); border-radius: 1px; transition: background .4s; }
.keuze label:hover { color: var(--tekst); }
.keuze label:hover .balk { background: color-mix(in srgb, var(--muur) 55%, transparent); }
.keuze label:has(input:checked) { color: var(--lamp); }
.keuze label:has(input:checked) .balk { background: linear-gradient(90deg, var(--lamp-rand), var(--lamp)); }
.keuze label.ceremonie:has(input:checked) .balk { background: linear-gradient(90deg, var(--muur) 0 12%, var(--lamp-rand) 12%, var(--lamp) 88%, var(--muur) 88%); }
.keuze label:has(input:focus-visible) { outline: 3px solid var(--lamp-rand); outline-offset: 2px; }

.details { grid-area: details; padding: 26px 48px 0 0; max-width: 62ch; }
.detail h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--lamp); }
.detail .waar { color: var(--muur); font-weight: 700; margin: .6em 0 .5em; }
.ff { color: var(--tekst-2); font-size: .97rem; }
.boek { display: inline-block; margin-top: 10px; padding: 15px 24px; background: var(--koraal); color: #22100f; font-weight: 700; text-decoration: none; border-radius: 4px; }
.boek:hover { background: var(--lamp); color: #22100f; }
.na-boeken { color: var(--tekst-2); font-size: .95rem; margin-top: 14px; }
.no-js .detail { margin-bottom: 40px; }
.anker-los { bottom: 0; left: calc((100% - var(--gap)) * 7 / 12 + var(--gap) / 2); }

/* ---------- stops along the stroke ---------- */
.halte { position: relative; width: var(--maat); margin: 0 auto; }
.halte h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); color: var(--lamp); margin-bottom: .55em; max-width: 18ch; }
.halte h2 small { display: block; font: 400 1.05rem/1.4 "Karla", sans-serif; color: var(--koraal); margin-bottom: .45em; }
.halte p, .halte dl { max-width: 54ch; }
.halte-links { padding-right: 45%; }
.halte-links .anker { left: 72%; top: 1.2em; }
.halte-rechts { padding-left: 46%; }
.halte-rechts .anker { left: 22%; top: 1.2em; }
.halte .anker-onder { top: auto; bottom: -24px; }

/* the tempo slows: every stop is further from the last */
#voor { margin-top: clamp(90px, 14vh, 150px); }
#na { margin-top: clamp(110px, 18vh, 190px); }
#na h2 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); max-width: 14ch; }
.halte-pim { margin-top: clamp(130px, 22vh, 230px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: center; }
/* the stroke runs down the seam between photo and text */
.halte-pim .anker { left: calc((100% - var(--gap)) * 5 / 12 + var(--gap) / 2); top: -60px; }
.halte-pim .anker-onder { top: auto; bottom: -90px; }
.pim-foto { border-radius: 4px; position: relative; z-index: 1; }
.pim-tekst > p { max-width: 50ch; }
.pim-tekst blockquote { margin: 28px 0 0; padding-left: 22px; border-left: 3px solid var(--koraal); max-width: 50ch; }
.pim-tekst blockquote p { font-family: "Young Serif", serif; font-size: 1.22rem; line-height: 1.45; margin: 0; }
.pim-tekst blockquote footer { margin-top: 10px; color: var(--tekst-2); font-size: .95rem; }

.kamer { position: relative; width: var(--maat); margin: clamp(120px, 20vh, 210px) auto 0; }
.kamer img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: 50% 62%; border-radius: 4px; position: relative; z-index: 1; }
.kamer figcaption { position: relative; z-index: 3; margin: 16px 0 0; max-width: 34ch; font-family: "Young Serif", serif; font-size: 1.15rem; line-height: 1.4; color: var(--tekst-2); }
.kamer-beeld { position: relative; }
/* the stroke passes through the paper lamp */
.kamer .anker { left: 88%; top: 72%; }
.kamer .anker-kamer-onder { top: auto; bottom: -50px; left: 88%; }
@media (max-width: 900px) { .kamer .anker-kamer-onder { left: auto; right: 12px; } }

.weten { margin-top: clamp(150px, 24vh, 260px); }
.weten dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0 24px; }
.weten dt { font-weight: 700; color: var(--muur); padding: 12px 0; border-top: 1px solid var(--lijn); }
.weten dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--lijn); }
.samen { margin-top: clamp(170px, 26vh, 290px); }

.einde { position: relative; width: var(--maat); margin: clamp(190px, 30vh, 320px) auto 0; padding-bottom: 56px; text-align: center; }
/* the stroke comes to rest: it lies down, flat, above the last line */
.einde .anker { left: 22%; top: -70px; }
.einde .anker-eind { left: 100%; top: -70px; }
.tot-zo { font-family: "Young Serif", serif; font-size: clamp(2.2rem, 5vw, 4rem); color: var(--lamp); margin: 0 0 .4em; }
.contact { margin-top: 140px; color: var(--tekst-2); font-size: .97rem; text-align: left; border-top: 1px solid var(--lijn); padding-top: 22px; }
.contact p { margin: .3em 0; }

/* ---------- narrow screens: the stroke runs down the right margin ---------- */
@media (max-width: 900px) {
  .tafel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kop" "lichaam" "keuze" "details"; }
  .keuze, .details { padding-right: 34px; }
  .keuze { margin-top: 18px; }
  .anker-los { left: auto; right: 12px; }
  /* the stroke still waves: the text steps aside, left and right in turn, and the line crosses between stops */
  #voor, .weten { padding: 0 0 0 38px; }
  #voor .anker, .weten .anker { left: 10px; right: auto; }
  #na, .samen { padding: 0 38px 0 0; }
  #na .anker, .samen .anker { left: auto; right: 12px; }
  .halte-pim { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 38px; }
  .halte-pim .anker { left: 14px; }
  .halte-pim .anker-onder { left: 10px; right: auto; }
  .pim-foto { max-width: min(420px, 100%); }
  .kamer figcaption { margin-left: 0; padding-right: 38px; }
  .einde { text-align: left; }
  .einde .anker { left: auto; right: 14px; top: -90px; }
  .einde .anker-eind { left: 0; top: -40px; }
}
@media (max-width: 560px) {
  .top nav { display: none; }
  .weten dl { grid-template-columns: 1fr; }
  .weten dd { border-top: 0; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .z, .keuze .balk, .streek-kop { transition: none; }
}