*{box-sizing:border-box}:root{color-scheme:light;--ink:#314750}html,body{width:100%;height:100%;overflow:hidden}body{margin:0;background:#e9eae3;color:var(--ink);font-family:'Source Serif 4',Georgia,serif}
.garden{height:100dvh;min-height:100svh;max-height:100dvh;position:relative;isolation:isolate;overflow:hidden;text-align:center}
.setting{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3}
.garden:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(to bottom,#f2f0e9eb 0%,#f2f0e9d6 19%,#f2f0e910 40%,transparent 70%)}
.identity{padding:46px 24px 0}.brand{font-family:Fraunces,Georgia,serif;font-size:clamp(40px,4.1vw,58px);letter-spacing:.025em;color:inherit;text-decoration:none;font-weight:560;line-height:1.08}
.slogan{margin:7px 0 0;font-size:21px}.intro{font-size:17px;margin:15px auto 0;max-width:36ch;line-height:1.45}
.decision{position:absolute;left:50%;top:38%;transform:translateX(-50%);width:min(430px,calc(100% - 40px))}
.place{font:12px 'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.22em;margin:0 0 8px;color:#344b51}
h1{font-family:Fraunces,Georgia,serif;font-size:43px;font-weight:500;margin:0 0 22px;line-height:1.1;text-shadow:0 1px #fff9}
.decision:before{content:'';position:absolute;inset:-24px -60px -35px;z-index:-1;background:radial-gradient(ellipse,#eef0e4a0 0%,#eef0e488 45%,transparent 73%);pointer-events:none}
.media{display:grid;gap:14px;width:100%}.media a{display:grid;grid-template-columns:58px 1fr 58px;align-items:center;height:91px;padding:0 24px;text-decoration:none}
.media strong{font-size:30px}
.symbol{width:35px;height:35px;display:block}.symbol svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.direction{width:25px;height:25px;justify-self:end;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linejoin:round}
.back{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);font-size:16px;text-decoration:none;padding:9px 18px}
@media(max-width:600px){.setting{object-position:53% center}.identity{padding:35px 18px 0}.brand{font-size:43px}.slogan{font-size:19px}.intro{font-size:16px;max-width:27ch;margin-top:13px}.decision{top:34%;width:calc(100% - 44px);max-width:360px}h1{font-size:36px;margin-bottom:20px}.media{gap:14px}.media a{height:83px;padding:0 18px;grid-template-columns:42px 1fr 42px}.media strong{font-size:28px}.symbol{width:30px;height:30px}.direction{width:23px}.back{bottom:28px}.garden:before{background:linear-gradient(#f2f0e9f2,#f2f0e9c9 24%,#f2f0e933 41%,transparent 73%)}}
@media(max-height:740px){.identity{padding-top:18px}.brand{font-size:36px}.slogan{font-size:16px;margin-top:3px}.intro{font-size:14px;line-height:1.3;margin-top:6px}.decision{top:27%}.place{margin-bottom:4px}h1{font-size:30px;margin-bottom:10px}.media{gap:8px}.media a{height:67px}.media strong{font-size:24px}.symbol{width:27px;height:27px}.direction{width:21px}.utilities{bottom:10px}.back{bottom:10px}}
.utilities{position:absolute;bottom:25px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:3}.utilities>*{pointer-events:auto}.utilities summary{display:grid;place-items:center;min-width:44px;min-height:44px;padding:8px 14px;font:16px 'Source Serif 4',serif;cursor:pointer}.utilities button{display:grid;place-items:center;min-width:44px;min-height:44px;padding:8px;font:16px 'Source Serif 4',serif;cursor:pointer}.utilities summary{list-style:none}.utilities summary::-webkit-details-marker{display:none}.section-menu nav{position:absolute;bottom:55px;left:0;display:grid;gap:3px;background:#f5f1e4fa;padding:10px;border:1px solid #71808455;border-radius:6px;max-height:60svh;overflow:auto;min-width:180px}.section-menu nav a{display:flex;align-items:center;min-height:44px;color:#30434b;padding:7px 12px;text-decoration:none}.section-menu nav a:hover{background:#dce3db}.utilities :focus-visible{outline:2px solid #365768;outline-offset:3px}
html[data-theme="dark"]{color-scheme:dark;--ink:#f1e9d7}html[data-theme="dark"] body{background:#26313a}html[data-theme="dark"] .garden:before{background:linear-gradient(#1b2832cb,#1b283277 25%,transparent 65%)}html[data-theme="dark"] .place{color:#eee4d0}html[data-theme="dark"] h1{text-shadow:0 1px #16232a}html[data-theme="dark"] .decision:before{background:radial-gradient(ellipse,#18293644,transparent 73%)}html[data-theme="dark"] .media a{color:#e6eef0}html[data-theme="dark"] .media a:nth-child(2){color:#f2cdbb}html[data-theme="dark"] .media a:nth-child(3){color:#d4e2c4}

/* Speler vast onderin: de knoppenrij en 'Set sail to' staan erboven, nooit eronder (Ben, 2026-10-10). */
.utilities{bottom:calc(25px + var(--player-reserve,0px))}
.back{bottom:calc(25px + var(--player-reserve,0px))}
@media(max-width:600px){.back{bottom:calc(28px + var(--player-reserve,0px))}}
@media(max-height:740px){.utilities{bottom:calc(10px + var(--player-reserve,0px))}.back{bottom:calc(10px + var(--player-reserve,0px))}}
/* Liggend telefoonscherm: de drie keuzes naast elkaar, zodat Menu en 'Set sail to' vrij blijven (Ben, 2026-10-10). */
@media(max-height:520px) and (min-aspect-ratio:3/2){
 .identity{padding:10px 18px 0}.brand{font-size:30px}.slogan{font-size:14px;margin-top:2px}.intro{display:none}
 .decision{top:84px;width:min(760px,calc(100% - 40px));max-width:none}
 .place{margin-bottom:2px}h1{font-size:26px;margin-bottom:10px}
 .media{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .media a{height:74px;grid-template-columns:30px 1fr;padding:0 14px}.direction{display:none}.media strong{font-size:22px}.symbol{width:26px;height:26px}
}
/* Ronde 2: geen hoofdletters en de knoppen in papier/aquarel-stijl (eis 23, 25). */
*,*::before,*::after{text-transform:none!important}

html[data-theme="dark"] .section-menu nav a{color:var(--tr-btn-ink)}
.section-menu nav{background:#f5f1e4fa var(--tr-surface-card) center/100% 100%}
/* Met een speler onderin verschuift de beslissing omhoog, zodat Set sail to nooit op een keuze ligt. */
.decision{transform:translate(-50%,calc(var(--player-reserve,0px) * -.45))}
/* Ronde 2: Menu, Set sail to en de themaknop zijn één balk onderin (eis 75), niet drie losse knoppen. */
.utilities{left:0;right:0;bottom:var(--player-reserve,0px)!important;padding:6px max(14px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom,0px));gap:10px;align-items:center;background:#f5f1e4e8 var(--tr-surface-card) center/100% 200%;border-top:1px solid #8d9a984a;pointer-events:auto}
.utilities .back{position:static!important;transform:none!important;bottom:auto!important;left:auto;display:grid;place-items:center;min-height:44px;padding:8px 14px;font:16px 'Source Serif 4',serif;text-decoration:none}
html[data-theme="dark"] .utilities{background-color:#d9d6c8}
.utilities .section-menu nav{bottom:calc(100% + 6px)}
@media(max-height:740px){.utilities{bottom:var(--player-reserve,0px)!important}}
/* Ronde 4: liggend schuift de beslissing niet in de kop. */
@media(max-height:520px) and (min-aspect-ratio:3/2){.decision{transform:translate(-50%,0)!important}}

/* Ronde 5: de speler op de keuzepagina is inklapbaar via een knop in de balk. */
.player-tucked .titus-player{display:none!important}
#player-toggle[hidden]{display:none}
.utilities #player-toggle{display:grid;place-items:center;min-height:44px;min-width:44px;padding:8px 12px;font:15px 'Source Serif 4',serif;cursor:pointer}

/* Harbour links, menu rechts, één balk bovenaan (Ben, 2026-10-11, eis 95 en 75). */
.utilities{top:0!important;bottom:auto!important;border-top:0;border-bottom:1px solid #8d9a984a;justify-content:flex-start;gap:8px;z-index:20}
.utilities .back{display:flex!important;align-items:center;gap:8px}
.utilities .back svg{flex:none}
.utilities #media-theme{margin-left:auto}
.utilities .section-menu{margin-left:0}
.utilities .section-menu nav{top:calc(100% + 6px)!important;bottom:auto!important;left:auto;right:0}
.identity{padding-top:calc(56px + 46px)}
@media(max-width:600px){.identity{padding-top:calc(56px + 35px)}}
@media(max-height:740px){.identity{padding-top:calc(56px + 18px)}}
@media(max-height:520px) and (min-aspect-ratio:3/2){.identity{padding:60px 18px 0}.decision{top:128px}}
/* Het sectiemenu hangt vast aan het scherm en schuift de compositie niet. */
.utilities .section-menu nav{position:fixed!important;top:62px!important;right:8px!important;left:auto!important;bottom:auto!important;max-height:calc(100dvh - 76px)!important;overflow:auto;width:min(260px,calc(100vw - 16px));z-index:40}
.utilities{z-index:100!important}
/* Een open sectiemenu ligt boven de speler: de speler schuilt zolang het menu open staat. */
body:has(.section-menu[open]) .titus-player{visibility:hidden}