/* designated-2026 · case. Overgenomen uit concepten/2026-10-10-case-drentse-hottub.html; base.css staat er niet in. */
#cd-hero { position: relative; min-height: min(100svh, calc(940 * var(--u))); color: var(--ink); background: #0d2230 center / cover no-repeat; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(150 * var(--u)) var(--rand) calc(50 * var(--u)); }
#cd-hero video { z-index: 0 !important; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06) translateY(var(--py, 0px)); }
#cd-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,29,41,.97) 0%, rgba(10,29,41,.84) 30%, rgba(10,29,41,.4) 62%, rgba(10,29,41,.55) 100%), linear-gradient(90deg, rgba(10,29,41,.5), rgba(10,29,41,0) 60%); }
#cd-hero > * { position: relative; z-index: 1; }
#cd-hero .crumb { position: absolute; top: calc(130 * var(--u)); left: var(--rand); font-family: "Fragment Mono", monospace; font-size: calc(11 * var(--u)); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); display: flex; gap: calc(10 * var(--u)); }
#cd-hero .crumb a:hover { color: var(--ink); }
#cd-hero .crumb span { opacity: .5; }
#cd-hero .tags { display: flex; gap: calc(6 * var(--u)); flex-wrap: wrap; }
#cd-hero .tags span { font-family: "Fragment Mono", monospace; font-size: calc(10.5 * var(--u)); letter-spacing: .08em; text-transform: uppercase; padding: calc(7 * var(--u)) calc(11 * var(--u)); border-radius: calc(999 * var(--u)); border: 1px solid rgba(255,255,255,.2); background: rgba(10,29,41,.4); backdrop-filter: blur(calc(12 * var(--u))); -webkit-backdrop-filter: blur(calc(12 * var(--u))); }
#cd-hero .tags .doel { background: var(--lime); color: var(--navy); border-color: var(--lime); }
#cd-hero .row { display: grid; grid-template-columns: 1.3fr .7fr; gap: calc(40 * var(--u)); align-items: end; margin-top: calc(22 * var(--u)); }
#cd-hero h1 { font-size: clamp(calc(50 * var(--u)), min(6.6vw, calc(95.04 * var(--u))), calc(120 * var(--u))); max-width: 13ch; }
#cd-hero h1 em { color: var(--lime); }
#cd-hero .lede { margin-top: calc(24 * var(--u)); font-size: clamp(calc(17 * var(--u)), min(1.3vw, calc(18.72 * var(--u))), calc(20 * var(--u))); line-height: 1.5; color: var(--soft); max-width: 50ch; }
#cd-hero .lede b { color: var(--ink); font-weight: 600; }
#cd-hero .facts { border-radius: var(--r); padding: calc(8 * var(--u)) calc(22 * var(--u)); background: linear-gradient(135deg, rgba(10,29,41,.66), rgba(10,29,41,.44)); }
#cd-hero .facts div { display: flex; justify-content: space-between; gap: calc(18 * var(--u)); padding: calc(13 * var(--u)) 0; border-bottom: 1px solid var(--line); font-size: calc(14.5 * var(--u)); }
#cd-hero .facts div:last-child { border-bottom: 0; }
#cd-hero .facts dt { color: var(--soft); }
#cd-hero .facts dd { margin: 0; text-align: right; font-weight: 600; }
#cd-hero .play { position: absolute; z-index: 2; right: var(--rand); top: calc(120 * var(--u)); display: inline-flex; gap: calc(10 * var(--u)); align-items: center; font: inherit; font-size: calc(13 * var(--u)); font-weight: 600; color: var(--ink); padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); border-radius: calc(999 * var(--u)); cursor: pointer; }
#cd-hero .play i { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: var(--lime); color: var(--navy); display: grid; place-items: center; font-style: normal; font-size: calc(10 * var(--u)); }
@media (max-width: 960px) {
  #cd-hero .row { grid-template-columns: 1fr; }
  #cd-hero .play { display: none; }
}
#cd-nums { background: var(--navy); color: var(--ink); padding: 0 var(--rand) calc(90 * var(--u) * var(--sy-b)); }
#cd-nums .band { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
#cd-nums .n { padding: calc(34 * var(--u)) calc(28 * var(--u)) 0 0; }
#cd-nums .n + .n { padding-left: calc(28 * var(--u)); border-left: 1px solid var(--line); }
#cd-nums .n small { font-family: "Fragment Mono", monospace; font-size: calc(10.5 * var(--u)); letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
#cd-nums .n b { display: block; margin-top: calc(14 * var(--u)); font-size: clamp(calc(56 * var(--u)), min(6vw, calc(86.4 * var(--u))), calc(104 * var(--u))); font-weight: 700; letter-spacing: -.07em; line-height: .85; font-variant-numeric: tabular-nums; }
#cd-nums .n p { margin-top: calc(14 * var(--u)); font-size: calc(15.5 * var(--u)); line-height: 1.45; color: var(--soft); max-width: 30ch; }
@media (max-width: 860px) {
  #cd-nums .band { grid-template-columns: 1fr; }
  #cd-nums .n + .n { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: calc(30 * var(--u)); }
}
#cd-start { background: var(--light); color: var(--ink-dark); padding: calc(130 * var(--u) * var(--sy-t)) var(--rand) calc(130 * var(--u) * var(--sy-b)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--pad) * 2); align-items: start; }
#cd-start .h em { color: var(--navy); }
#cd-start .prose { margin-top: calc(30 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.6; max-width: 54ch; }
#cd-start .knel { margin-top: calc(30 * var(--u)); display: grid; gap: calc(10 * var(--u)); }
#cd-start .knel div { display: grid; grid-template-columns: calc(34 * var(--u)) 1fr; gap: calc(14 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)); border-radius: calc(16 * var(--u)); background: #fff; border: 1px solid var(--line-light); font-size: calc(15.5 * var(--u)); line-height: 1.45; }
#cd-start .knel i { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(255,138,122,.16); color: #c8432f; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: calc(14 * var(--u)); }
#cd-start .knel b { display: block; font-size: calc(16.5 * var(--u)); letter-spacing: -.02em; }
#cd-start .im { position: sticky; top: calc(120 * var(--u)); border-radius: calc(var(--r) * 1.2); overflow: hidden; aspect-ratio: 4 / 5; background: #dfe4e7; }
#cd-start .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 960px) {
  #cd-start { grid-template-columns: 1fr; }
  #cd-start .im { position: static; aspect-ratio: 4 / 3; }
}
#cd-aanpak { background: var(--navy); color: var(--ink); padding: calc(130 * var(--u) * var(--sy-t)) var(--rand) calc(130 * var(--u) * var(--sy-b)); display: grid; grid-template-columns: .8fr 1.2fr; gap: calc(var(--pad) * 2); }
#cd-aanpak .stick { position: sticky; top: calc(130 * var(--u)); align-self: start; }
#cd-aanpak .h em { color: var(--lime); }
#cd-aanpak .stick p { margin-top: calc(22 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.5; color: var(--soft); max-width: 36ch; }
#cd-aanpak ol { list-style: none; padding: 0; position: relative; }
#cd-aanpak ol::before { content: ""; position: absolute; left: calc(21 * var(--u)); top: calc(10 * var(--u)); bottom: calc(10 * var(--u)); width: 1px; background: var(--line); }
#cd-aanpak ol .fill { position: absolute; left: calc(21 * var(--u)); top: calc(10 * var(--u)); width: 1px; height: calc(100% - calc(20 * var(--u))); background: var(--lime); transform: scaleY(var(--p, 0)); transform-origin: 50% 0; }
#cd-aanpak ol > li { position: relative; display: grid; grid-template-columns: calc(44 * var(--u)) 1fr; gap: calc(26 * var(--u)); padding-bottom: calc(44 * var(--u)); }
#cd-aanpak ol > li:last-child { padding-bottom: 0; }
#cd-aanpak ol > li .dot { position: relative; z-index: 1; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; display: grid; place-items: center; font-family: "Fragment Mono", monospace; font-size: calc(12 * var(--u)); background: var(--navy-2); border: 1px solid var(--line); color: var(--soft); transition: background .5s, color .5s, border-color .5s; }
#cd-aanpak ol > li.on .dot { background: var(--lime); color: var(--navy); border-color: var(--lime); }
#cd-aanpak ol > li h3 { font-size: clamp(calc(24 * var(--u)), min(2.2vw, calc(31.68 * var(--u))), calc(34 * var(--u))); font-weight: 700; letter-spacing: -.05em; line-height: 1.05; padding-top: calc(6 * var(--u)); }
#cd-aanpak ol > li p { margin-top: calc(10 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.55; color: var(--soft); max-width: 52ch; }
#cd-aanpak ol > li ul { margin-top: calc(14 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
#cd-aanpak ol > li ul li { display: block; padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(999 * var(--u)); background: rgba(255,255,255,.07); font-size: calc(12.5 * var(--u)); color: var(--soft); }
#cd-aanpak ol > li ul li::before { display: none; }
@media (max-width: 960px) {
  #cd-aanpak { grid-template-columns: 1fr; }
  #cd-aanpak .stick { position: static; }
}
#cd-vn { background: var(--light); color: var(--ink-dark); padding: calc(130 * var(--u) * var(--sy-t)) var(--rand) calc(130 * var(--u) * var(--sy-b)); }
#cd-vn .sec-top { display: flex; justify-content: space-between; align-items: end; gap: calc(24 * var(--u)); flex-wrap: wrap; margin-bottom: calc(40 * var(--u)); }
#cd-vn .h em { color: var(--navy); }
#cd-vn .tbl { border-radius: var(--r); background: #fff; border: 1px solid var(--line-light); overflow: hidden; }
#cd-vn .tr { display: grid; grid-template-columns: .55fr 1fr 1fr; gap: calc(32 * var(--u)); padding: calc(24 * var(--u)) calc(28 * var(--u)); border-bottom: 1px solid var(--line-light); align-items: center; }
#cd-vn .tr:last-child { border-bottom: 0; }
#cd-vn .tr > span { font-family: "Fragment Mono", monospace; font-size: calc(11 * var(--u)); letter-spacing: .08em; text-transform: uppercase; color: var(--soft-dark); }
#cd-vn .tr.th { padding-top: calc(18 * var(--u)); padding-bottom: calc(18 * var(--u)); background: var(--light); }
#cd-vn .tr.th span:last-child { color: var(--navy); }
#cd-vn .cell { display: contents; }
#cd-vn .cell em { font-style: normal; display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: clamp(calc(16 * var(--u)), min(1.25vw, calc(19 * var(--u))), calc(19 * var(--u))); letter-spacing: -.02em; line-height: 1.3; }
#cd-vn .cell .v { color: var(--soft-dark); font-weight: 500; }
#cd-vn .cell .n { font-weight: 600; opacity: 0; transform: translateX(calc(-14 * var(--u))); transition: opacity .5s ease, transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 120ms + 300ms); }
#cd-vn.in .cell .n { opacity: 1; transform: none; }
#cd-vn .cell .n::before { content: "\2713"; flex: none; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: var(--lime); color: var(--navy); display: grid; place-items: center; font-size: calc(12 * var(--u)); font-weight: 700; }
#cd-vn .cell .v::before { content: "\00d7"; flex: none; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: rgba(255,138,122,.16); color: #c8432f; display: grid; place-items: center; font-size: calc(14 * var(--u)); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { #cd-vn .cell .n { opacity: 1; transform: none; transition: none; } }
@media (max-width: 760px) {
  #cd-vn .tr { grid-template-columns: 1fr; gap: calc(10 * var(--u)); }
  #cd-vn .tr.th { display: none; }
  #cd-vn .cell .n { transform: translateY(calc(8 * var(--u))); }
}
#cd-stem { background: var(--navy); color: var(--ink); padding: calc(120 * var(--u) * var(--sy-t)) var(--rand) calc(120 * var(--u) * var(--sy-b)); display: grid; grid-template-columns: auto 1fr; gap: calc(50 * var(--u)); align-items: center; position: relative; overflow: hidden; }
#cd-stem > * { position: relative; z-index: 1; }
#cd-stem .mark { position: absolute; z-index: 0; width: 50vw; max-width: calc(760 * var(--u)); left: -16vw; top: -40%; color: rgba(255,255,255,.035); pointer-events: none; }
#cd-stem .av { width: clamp(calc(140 * var(--u)), min(16vw, calc(230.4 * var(--u))), calc(230 * var(--u))); aspect-ratio: 1; border-radius: 50%; background: center / cover no-repeat; box-shadow: 0 0 0 calc(8 * var(--u)) rgba(200,245,96,.12); }
#cd-stem blockquote { font-size: clamp(calc(26 * var(--u)), min(2.8vw, calc(40.32 * var(--u))), calc(46 * var(--u))); font-weight: 700; letter-spacing: -.045em; line-height: 1.15; max-width: 30ch; }
#cd-stem blockquote em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; color: var(--lime); letter-spacing: -.01em; }
#cd-stem figcaption { margin-top: calc(24 * var(--u)); font-size: calc(15 * var(--u)); color: var(--soft); }
#cd-stem figcaption b { color: var(--ink); font-size: calc(17 * var(--u)); display: block; }
@media (max-width: 760px) {
  #cd-stem { grid-template-columns: 1fr; gap: calc(28 * var(--u)); }
}
#cd-next { background: var(--light); color: var(--ink-dark); padding: calc(100 * var(--u) * var(--sy-t)) var(--rand) calc(120 * var(--u) * var(--sy-b)); }
#cd-next .top { display: flex; justify-content: space-between; align-items: end; gap: calc(20 * var(--u)); margin-bottom: calc(26 * var(--u)); flex-wrap: wrap; }
#cd-next .top a { font-size: calc(15 * var(--u)); font-weight: 500; border-bottom: 1px solid var(--line-light); padding-bottom: calc(3 * var(--u)); }
#cd-next .nxt { position: relative; display: block; border-radius: calc(var(--r) * 1.2); overflow: hidden; min-height: calc(440 * var(--u)); color: var(--ink); background: #0d2230; }
#cd-next .nxt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
#cd-next .nxt:hover img { transform: scale(1.05); }
#cd-next .nxt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(20deg, rgba(10,29,41,.92), rgba(10,29,41,.3) 55%, rgba(10,29,41,0)); }
#cd-next .nxt .tx { position: absolute; z-index: 1; left: calc(34 * var(--u)); right: calc(34 * var(--u)); bottom: calc(34 * var(--u)); display: flex; justify-content: space-between; align-items: end; gap: calc(24 * var(--u)); }
#cd-next .nxt small { font-family: "Fragment Mono", monospace; font-size: calc(11 * var(--u)); letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
#cd-next .nxt h3 { margin-top: calc(12 * var(--u)); font-size: clamp(calc(32 * var(--u)), min(4vw, calc(57.6 * var(--u))), calc(64 * var(--u))); font-weight: 700; letter-spacing: -.05em; line-height: .95; max-width: 16ch; }
#cd-next .nxt h3 em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; letter-spacing: -.015em; }
#cd-next .nxt .go { flex: none; width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%; background: var(--lime); color: var(--navy); display: grid; place-items: center; transition: transform .5s var(--ease); }
#cd-next .nxt .go .ico { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
#cd-next .nxt:hover .go { transform: rotate(-45deg); }
#cd-hero .bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06) translateY(var(--py, 0px)); }
/* 03-11: tijdens de paginaovergang groeit het stilstaande beeld (.bg) door; de video erboven vloeit pas daarna in (overgangen.js) */
#cd-hero video { transition: opacity .6s ease; }
html.vt-hero #cd-hero video { opacity: 0; }
#cd-hero .vid { position: absolute; inset: 0; z-index: 0; overflow: hidden; container-type: size; pointer-events: none; }
#cd-hero .vid iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); border: 0; transform: translate(-50%, calc(-50% + var(--py, 0px))) scale(1.2); }
.sp .ph--leeg { position: absolute; inset: 0; display: grid; place-content: center; gap: calc(6 * var(--u)); text-align: center; padding: calc(20 * var(--u)); background: repeating-linear-gradient(135deg, #e6eaec 0 calc(14 * var(--u)), #edf0f2 calc(14 * var(--u)) calc(28 * var(--u))); color: var(--soft-dark); }
.sp .ph--leeg .ph__ontbreekt { font-family: "Fragment Mono", monospace; font-size: calc(10.5 * var(--u)); letter-spacing: .08em; text-transform: uppercase; }
.sp .ph--leeg .ph__wat { font-size: calc(15 * var(--u)); font-weight: 600; color: var(--ink-dark); }
.sp .ph--leeg .ph__meta { font-family: "Fragment Mono", monospace; font-size: calc(10 * var(--u)); }
#cd-start .im .ph--leeg { position: relative; height: 100%; }
#cd-stem .av.ph--leeg { position: relative; inset: auto; padding: calc(18 * var(--u)); border-radius: 50%; background: repeating-linear-gradient(135deg, #e6eaec 0 calc(14 * var(--u)), #edf0f2 calc(14 * var(--u)) calc(28 * var(--u))); }
#cd-stem .av.ph--leeg .ph__wat { font-size: calc(13 * var(--u)); }
.sp [data-ph] { text-decoration: underline dashed rgba(200,245,96,.55); text-decoration-thickness: 2px; text-underline-offset: .12em; }
.sp.lt [data-ph] { text-decoration-color: rgba(10,29,41,.3); }
#cd-next .nxt .ph--leeg { place-content: start end; text-align: right; padding: calc(30 * var(--u)) calc(34 * var(--u)); }
#cd-hero .ph--leeg { display: none; position: absolute; z-index: 2; inset: calc(120 * var(--u)) var(--rand) auto auto; width: min(calc(340 * var(--u)), calc(100% - 2 * var(--pad))); border-radius: calc(16 * var(--u)); }
#cd-hero.novid .ph--leeg { display: grid; }
#cd-hero.novid .play { display: none; }
@media (max-width: 960px) {
  #cd-hero.novid .ph--leeg { display: none; }
}
#sp-door { background: var(--navy); color: var(--ink); position: relative; overflow: hidden; padding: calc(110 * var(--u)) var(--rand); display: grid; grid-template-columns: 1.2fr .8fr; gap: calc(40 * var(--u)); align-items: end; }
#sp-door > * { position: relative; z-index: 1; }
#sp-door .mark { position: absolute; z-index: 0; width: 56vw; max-width: calc(860 * var(--u)); right: -14vw; bottom: -40%; color: rgba(255,255,255,.04); pointer-events: none; }
#sp-door .h { font-size: clamp(calc(42 * var(--u)), min(5.2vw, calc(74.88 * var(--u))), calc(92 * var(--u))); margin-top: calc(18 * var(--u)); }
#sp-door .h em { color: var(--lime); }
#sp-door p { font-size: calc(18 * var(--u)); line-height: 1.5; color: var(--soft); max-width: 40ch; }
#sp-door .acts { margin-top: calc(26 * var(--u)); display: flex; gap: calc(20 * var(--u)); align-items: center; flex-wrap: wrap; }
#sp-door .acts .ghost { font-size: calc(15 * var(--u)); border-bottom: 1px solid var(--line); padding-bottom: calc(3 * var(--u)); }
@media (max-width: 900px) {
  #sp-door { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sp .h .ln > span, .sp .rise, #footer .rise { opacity: 1 !important; transform: none !important; }
}