*{box-sizing:border-box}
:root{color-scheme:light;--ink:#352c27;--rome:#753d2d;--greece:#294858}
body{margin:0;background:#eee9df;color:var(--ink);font-family:"Source Serif 4",Georgia,serif}
.harbor{position:relative;isolation:isolate;min-height:100svh;overflow:hidden}
.world{position:absolute;inset:0;z-index:-2}
.world img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 50%}
[data-palette="quiet"] .world img{filter:saturate(.58) sepia(.10)}
.journey{width:min(740px,100%);margin-inline:auto;padding:clamp(44px,6svh,72px) 24px 80px;text-align:center}
h1{font-family:Fraunces,Georgia,serif;font-weight:560;font-variation-settings:"SOFT" 22,"WONK" 1;font-size:clamp(46px,5.2vw,74px);line-height:1.05;letter-spacing:.045em;margin:0;text-shadow:0 1px 0 #fff9}
.slogan{font-size:clamp(20px,1.9vw,26px);line-height:1.2;margin:9px 0 0;text-shadow:0 1px 0 #fff9}
.description{font-size:clamp(16px,1.55vw,19px);line-height:1.45;max-width:44ch;margin:12px auto 0;text-wrap:balance}
.destinations{margin:clamp(30px,5.5svh,57px) auto 0}
.destinations h2{font-family:"Source Serif 4",Georgia,serif;font-weight:500;font-size:clamp(29px,2.8vw,38px);line-height:1.15;width:66%;margin:0 auto 22px;text-shadow:0 1px 0 #fff9}
.choices{display:flex;flex-direction:column;gap:48px;align-items:center}/* Bens preset-schaduw (36 px omlaag, vervaging 74) hoeft ruimte onder de knop; bij 20 px viel hij als een grijze balk tussen Rome en Greece (gemeten 2026-10-18) */
.destination{position:relative;isolation:isolate;display:grid;grid-template-columns:52px 1fr 52px;align-items:center;width:346px;max-width:100%;height:90px;padding:0 22px;text-decoration:none;-webkit-tap-highlight-color:transparent}
.greece{color:var(--greece)}
.label{font-family:Fraunces,Georgia,serif;font-weight:560;font-variation-settings:"SOFT" 22,"WONK" 1;text-transform:uppercase;font-size:34px;line-height:1;letter-spacing:.025em;text-shadow:0 1px 0 #fff9}
.emblem{width:43px;height:43px;justify-self:start}
.arrow{width:27px;height:27px;justify-self:end;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.destination:hover{transform:translateY(-2px)}
.destination:active{transform:translateY(1px)}


@media(min-aspect-ratio:19/10){.world img{object-position:50% 60%}}
@media(max-width:600px){
  .harbor{min-height:max(760px,100svh)}
  .world img{position:absolute;bottom:0;height:71%;object-fit:cover;object-position:50% 75%;mask-image:linear-gradient(to bottom,transparent,#000 19%)}
  .journey{padding:48px 25px 64px}
  h1{font-size:46px;letter-spacing:.01em}
  .slogan{margin-top:8px;font-size:21px}
  .description{font-size:16px;max-width:29ch;margin-top:13px;line-height:1.45}
  .destinations{margin-top:37px}
  .destinations h2{font-size:31px;margin-bottom:22px}
  .choices{gap:44px}
  .destination{width:292px;height:78px;grid-template-columns:44px 1fr 44px;padding-inline:18px}
  .label{font-size:30px}
  .emblem{width:37px;height:37px}
  .arrow{width:24px;height:24px}
}
@media(max-width:350px){.journey{padding-inline:18px}h1{font-size:41px}.destination{height:74px}.label{font-size:27px}.description{max-width:26ch}}
@media(prefers-reduced-motion:reduce){}
.theme-toggle{position:absolute;right:16px;top:12px;z-index:2;width:44px;height:44px;font:22px Georgia,serif;cursor:pointer}

[data-theme="dark"]{color-scheme:dark;--ink:#fff6e5}
[data-theme="dark"] body{background:#535f70}
[data-theme="dark"] .world img{filter:none}
[data-theme="dark"] .mast,[data-theme="dark"] .destinations h2{text-shadow:0 1px 3px #182431}
[data-theme="dark"] .journey{position:relative}
[data-theme="dark"] .journey::before{content:"";position:absolute;z-index:-1;inset:-50px -90px 28%;background:radial-gradient(ellipse at 50% 35%,#243144c9 0%,#243144aa 34%,#24314400 72%);pointer-events:none}
[data-theme="dark"] h1,[data-theme="dark"] .slogan{text-shadow:0 1px 3px #182431}
[data-theme="dark"] .destinations h2{text-shadow:0 1px 4px #182431,0 0 14px #182431}

@media(max-width:600px){[data-theme="dark"] .journey::before{display:none}}
/* Settings onder 'Set sail to': de drie schilderingen per bestemming, direct bereikbaar (Ben, 2026-10-10). */
.settings{margin:34px auto 0;width:min(560px,100%)}
.settings h3{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:21px;line-height:1.2;margin:0 0 14px;text-shadow:0 1px 0 #fff9}
.setting-group{margin:0 0 14px}
.setting-place{font:12px/1.2 "Geist Mono",monospace;letter-spacing:.2em;text-transform:uppercase;margin:0 0 7px;text-shadow:0 1px 0 #fff9}
.setting-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.setting-tile{position:relative;isolation:isolate;display:flex;align-items:flex-end;justify-content:center;min-height:84px;padding:0 6px 8px;overflow:hidden;text-decoration:none}
.setting-tile::before{content:"";position:absolute;inset:0;z-index:-1}
.setting-tile span{font-family:Fraunces,Georgia,serif;font-weight:560;font-size:18px;line-height:1.1}
.setting-tile.listening{background-image:url('/assets/worlds/listening.webp')}
.setting-tile.watching{background-image:url('/assets/worlds/odeon.webp')}
.setting-tile.reading{background-image:url('/assets/worlds/reading.webp')}



[data-theme="dark"] .settings h3,[data-theme="dark"] .setting-place{text-shadow:0 1px 3px #182431}
@media(max-width:600px){.settings{margin-top:26px}.settings h3{font-size:19px}.setting-tile{min-height:72px}.setting-tile span{font-size:16px}}
/* labels: glazen pil uit components/surfaces.css */
.settings h3,.setting-place{display:inline-block;padding:4px 14px}
[data-theme="dark"] .settings h3,[data-theme="dark"] .setting-place{color:#fff6e5}
/* Ronde 2: geen hoofdletters (eis 23). */
*,*::before,*::after{text-transform:none!important}
/* Ronde 2 (eis 11): zonnig zonder wolken; het schilderij is aan de onderkant uitgesneden zodat de wolkenlucht grotendeels buiten beeld valt. */
.world{overflow:hidden}
.world img{transform:scale(1.32);transform-origin:50% 100%;object-position:50% 100%}
@media(max-width:600px){.world img{transform:none}}
@media(max-width:600px){.world img{height:100%;object-position:50% 78%;mask-image:none}}

.curated,.lovers{font-size:15px;line-height:1.4;margin:6px auto 0;max-width:40ch}
.lovers{font-style:italic;font-size:14px;margin-top:2px}
@media(max-width:600px){.curated{font-size:14px;max-width:30ch}.lovers{font-size:13px}}

/* Liquid glass (2026-10-12): de haven staat vast achter de hele pagina, zodat ook Creators op de aquarel ligt en het
   glas eronder iets te breken heeft. De uitsnede bovenaan blijft die van ronde 2. */
.world{position:fixed}

/* de ene zin onder Rome en Greece (Ben 2026-10-14) */
.tagline{font-size:clamp(15px,1.4vw,18px);line-height:1.45;max-width:44ch;margin:26px auto 0;text-wrap:balance;text-shadow:0 1px 0 #fff9,0 0 12px #fff8}
[data-theme="dark"] .tagline{text-shadow:0 1px 3px #182431,0 0 14px #182431}
@media(max-width:600px){.tagline{font-size:15px;margin-top:22px;max-width:28ch}}