@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Manrope:wght@400;500;600;700&display=swap');
:root{--title-font:'Cinzel',Georgia,serif;--story-font:'Cormorant Garamond',Georgia,serif;--glass-border:#e9d3a333;--glass-shadow:0 20px 65px #000c162e,inset 0 1px 0 #fff1d51a}
body{font-family:Manrope,system-ui,sans-serif}h1,h2,h3{font-family:var(--title-font)!important;font-weight:500;letter-spacing:-.025em;text-shadow:0 2px 20px #00131f77}h1 em,h2 em,h3 em{font-style:normal;color:#eed7a9}h1,h2{text-wrap:balance}.eyebrow,.island-name,.echo-tag,.brand-subtitle{font-family:var(--title-font);font-weight:500}
.logo-mark{position:relative;display:inline-block;line-height:0;isolation:isolate;vertical-align:middle;width:100%}.logo-mark img{width:100%;height:auto;display:block;max-width:none!important;object-fit:contain;transform:none!important;animation:none!important}.logo-mark::after{content:'';position:absolute;left:62.4%;top:51%;width:5%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,#e8ffffbd 0%,#78e3ff80 15%,#35aaff60 35%,#087fff00 75%);box-shadow:0 0 18px #46b9ff44;border-radius:50%;mix-blend-mode:screen;animation:echo-core 3.8s ease-in-out infinite;pointer-events:none}.brand>.logo-mark{width:210px}.brand .brand-subtitle{display:block;font-size:7px;letter-spacing:2.8px;text-align:center;margin-top:5px;color:#eddcb9}.site-header{align-items:center}.site-header .brand{line-height:1;margin-left:-15px}.hero-logo{width:430px;max-width:100%;margin:0 0 26px -12px;filter:drop-shadow(0 3px 12px #00131c88)}.intro .copy{top:19svh}.intro .copy h1{font-size:clamp(38px,4.3vw,72px);line-height:1.12;letter-spacing:-.035em;margin-bottom:22px}.intro .copy .eyebrow{margin-bottom:13px}.intro .copy .intro-line{font:21px/1.5 var(--story-font);color:#fbefdbdd}.copy h2{font-size:clamp(32px,4vw,67px);line-height:1.16;overflow-wrap:normal}.copy .description{font:20px/1.5 var(--story-font);color:#f7ecd7dd;max-width:420px}.copy .island-name{letter-spacing:1.8px}
.chapter:not(.intro) .copy{padding:30px 33px 29px;background:linear-gradient(135deg,#0e2633a8,#09212c66 65%,#48667826);border:1px solid var(--glass-border);border-radius:28px;box-shadow:var(--glass-shadow);backdrop-filter:blur(15px) saturate(125%);-webkit-backdrop-filter:blur(15px) saturate(125%);overflow:hidden}.chapter:not(.intro) .copy::before{content:'';position:absolute;inset:0;border-radius:inherit;border-top:1px solid #fff1cf44;background:linear-gradient(120deg,#e7f4ff0d,transparent 42%,#fff5da08);pointer-events:none}.chapter:not(.intro) .copy::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#e4f7ff0c 48%,transparent 65%);background-size:240% 100%;animation:glass-light 16s ease-in-out infinite}.chapter .copy .eyebrow{line-height:1.7}.chapter:not(.intro) .echo-tag{border-radius:12px;background:#e8c58b09}.begin{font-family:var(--title-font);font-size:10px}.epilogue h2{font-size:clamp(32px,4.3vw,64px);line-height:1.2}.epilogue>p:not(.eyebrow){font:21px/1.6 var(--story-font)}
.map-peek{border-radius:17px;background:#0a26349e;backdrop-filter:blur(20px);box-shadow:var(--glass-shadow);overflow:hidden;transition:border-color .4s,box-shadow .4s}.map-peek img{border-radius:12px}.map-peek:hover{border-color:#f4d49c99;box-shadow:0 8px 35px #00111b55,0 0 30px #84cbea1a}dialog{border-radius:28px;background:linear-gradient(135deg,#133545d9,#081f2ee8);backdrop-filter:blur(30px) saturate(125%);-webkit-backdrop-filter:blur(30px) saturate(125%);box-shadow:0 30px 100px #0009,inset 0 1px 0 #e5f6ff33}dialog .map-heading h2{font-size:29px}.interactive-map>img{border-radius:18px}.map-pin{backdrop-filter:blur(12px);border-radius:18px;background:#09232cbd;box-shadow:0 7px 18px #00141d66;transition:background .3s,box-shadow .3s}.map-pin:hover{box-shadow:0 0 25px #efd59755}.island-links{border-radius:24px;overflow:hidden;box-shadow:var(--glass-shadow)}.island-links a{background:#122e3b9e;backdrop-filter:blur(12px);transition:background .35s}.island-links a:hover{background:#244b58c9}
.brumille-foreground{position:fixed;z-index:2;right:-4vw;top:20svh;width:71vw;max-width:1100px;pointer-events:none;filter:drop-shadow(0 18px 28px #03101f80) drop-shadow(0 0 20px #9ce8ff26);will-change:opacity;transition:opacity .12s linear}.brumille-foreground img{display:block;width:100%;height:auto}.brumille-foreground.unavailable{display:none}
/* The illustrated carnet uses the same rounded glass vocabulary. */
.story-art,.island-explorer,.principle-grid article,.companion-copy,.gallery-item,.project details,.world-preview{border-radius:24px;overflow:hidden;border:1px solid var(--glass-border);background:linear-gradient(130deg,#1633428c,#0c223357);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);box-shadow:var(--glass-shadow)}.principle-grid article,.companion-copy{padding:28px}.story-art img{border-radius:22px}.gallery-item img{transition:transform 1.5s cubic-bezier(.15,.6,.3,1),filter 1s}.gallery-item:hover img{transform:scale(1.04);filter:brightness(1.08)}.gallery-item{transition:box-shadow .5s,border-color .5s}.gallery-item:hover{border-color:#efd7a66b;box-shadow:0 20px 60px #0005,0 0 25px #a7e5ff12}.project details{margin-bottom:12px;padding:5px 20px}.project summary{font-family:var(--title-font);font-size:12px}.world-window{display:grid;grid-template-columns:.85fr 1.15fr;gap:65px;align-items:center}.world-window h2{font-size:clamp(30px,3vw,48px);line-height:1.25}.world-window p{font-size:12px}.world-preview{display:block;position:relative;aspect-ratio:16/10}.world-preview img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s}.world-preview:hover img{transform:scale(1.035)}.world-preview>span{position:absolute;inset:auto 16px 16px;padding:16px 20px;border-radius:16px;background:#0b2434a8;backdrop-filter:blur(20px);border:1px solid #e9d3a333;font:11px var(--title-font);display:flex;justify-content:space-between}.hero h1>.logo-mark{width:min(570px,43vw)}.footer-logo>.logo-mark{width:210px}
body:has(.caption) header .brand .logo-mark{width:190px}body:has(.caption) header .brand-subtitle{font-size:7px;letter-spacing:1.5px}body:has(.caption) header{background:#0c2331a6;backdrop-filter:blur(20px);border-bottom:1px solid #efd7a622}body:has(.caption) .caption{background:linear-gradient(120deg,#1836448c,#0a1e2b77);border:1px solid #e9d3a326;border-radius:24px;margin:18px 3vw;padding:24px 28px;box-shadow:var(--glass-shadow);backdrop-filter:blur(20px)}body:has(.caption) nav button{border-radius:20px;background:#122b3899;border:1px solid #e9d3a329;backdrop-filter:blur(12px);transition:box-shadow .5s,transform .5s,border-color .5s}body:has(.caption) nav button:hover{transform:translateY(-4px);box-shadow:0 15px 35px #0005;border-color:#e9d3a366}body:has(.caption) h1{font-size:clamp(23px,3vw,34px)}
@keyframes echo-core{0%,100%{opacity:.35;filter:brightness(1);scale:.9}50%{opacity:1;filter:brightness(1.45);scale:1.16}}@keyframes glass-light{0%,100%{background-position:100% 0;opacity:.3}50%{background-position:0 0;opacity:.8}}
html[data-motion-paused=true] .logo-mark::after,html[data-motion-paused=true] .copy::after{animation-play-state:paused}
@media(max-width:850px){.brand>.logo-mark{width:160px}.site-header .brand{margin-left:-15px}.brand .brand-subtitle{font-size:5px;letter-spacing:1.8px;margin-top:2px}.site-header{gap:8px;padding-top:13px}.site-header nav{margin-left:auto;gap:8px}.site-header nav button{font-size:8px}.site-header nav span{padding-left:5px}.motion-toggle{flex-shrink:0;width:28px;height:28px}.hero-logo{width:min(330px,84vw);margin:0 0 18px -8px}.intro .copy{top:50svh;max-width:86vw}.intro .copy h1{font-size:clamp(29px,7.3vw,48px);line-height:1.18;margin-bottom:15px}.intro .copy .eyebrow{font-size:7px;margin-bottom:8px}.intro .copy .intro-line{font-size:18px;line-height:1.3}.intro .copy .begin{font-size:9px;padding:10px 0;margin-top:9px}.intro .copy .development{margin-top:18px}.brumille-foreground{right:auto;left:50%;transform:translateX(-50%);width:146vw;max-width:none;top:10svh}.chapter:not(.intro) .copy{width:88vw;margin-left:6vw;padding:22px 23px;border-radius:23px;top:54svh}.copy h2{font-size:clamp(25px,6.8vw,42px);line-height:1.22}.copy .description{font-size:18px;line-height:1.4;max-width:100%}.copy .eyebrow{font-size:6.5px;margin-bottom:9px;letter-spacing:1.5px}.copy .island-name{font-size:7px}.copy .echo-tag{font-size:6px;letter-spacing:1px;padding:6px 8px}.copy .echo-detail{margin-top:12px;font-size:8px}.epilogue h2{font-size:clamp(29px,7vw,43px)}.epilogue>p:not(.eyebrow){font-size:20px}.map-peek{border-radius:12px}.map-peek img{border-radius:8px}.world-window{grid-template-columns:1fr;gap:24px}.world-window h2{font-size:32px}.world-preview{aspect-ratio:16/10}.hero h1>.logo-mark{width:85vw}.companion-copy{padding:23px}body:has(.caption) header .brand .logo-mark{width:155px}body:has(.caption) header .brand-subtitle{font-size:6px}body:has(.caption) .caption{padding:20px;margin:15px 3vw}body:has(.caption) header{gap:10px}body:has(.caption) header button{font-size:10px;padding:8px 12px}}
@media(max-width:850px) and (max-height:850px){.intro .copy{top:43svh}.hero-logo{width:245px;margin-bottom:12px}.intro .copy h1{font-size:29px}.intro .copy .eyebrow,.intro .copy .development{display:none}.intro .copy .intro-line{font-size:16px}.brumille-foreground{top:6svh;width:126vw}.chapter:not(.intro) .copy{top:47svh}.copy .description{font-size:16px}.copy h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){.logo-mark::after,.chapter:not(.intro) .copy::after{animation:none!important}.brumille-foreground{transition:none}.gallery-item img,.world-preview img{transition:none}}
.logo-mark img{width:100%!important;height:auto!important}
.intro .copy .intro-line{margin:0}.intro .copy .development{margin-top:18px}@media(min-width:851px){.intro .copy{top:18svh}.hero-logo{margin-bottom:18px}.intro .copy .begin{margin-top:15px}.intro .copy .intro-line{font-size:20px;line-height:1.45}}

/* Keep the transparent image on its own inexpensive compositing plane. */
.brumille-foreground img{height:auto;aspect-ratio:16/9}.brumille-foreground{transition:none}@media(max-width:850px){.brumille-foreground{filter:drop-shadow(0 10px 16px #03101f55)}}


/* Compact scene-specific captions leave room for every animated face. */
@media(min-width:851px){
 .chapter[data-echo] .copy{width:32vw;max-width:440px;margin-left:6vw;margin-right:0;top:32svh;padding:25px 27px;}
 .chapter[data-echo] .copy h2{font-size:clamp(28px,2.8vw,44px);margin-bottom:17px;}
 .chapter[data-echo] .copy .description{font-size:18px;}
 .chapter[data-echo] .copy .eyebrow{margin-bottom:15px;}
 .chapter[data-echo] .copy .echo-tag{margin-top:12px;}
 .chapter:is([data-echo="153-thalassence"],[data-echo="175-solenime"],[data-echo="199-aube-fendue"]) .copy{margin-left:auto;margin-right:5vw;top:max(110px,calc(100svh - 355px));}
 body:has(.chapter:is([data-echo="153-thalassence"],[data-echo="175-solenime"],[data-echo="199-aube-fendue"]) .copy[aria-hidden="false"]) .map-peek{opacity:0;pointer-events:none;}
}
@media(max-width:850px){
 .chapter[data-echo] .copy{top:65svh;width:88vw;margin-left:6vw;padding:14px 17px;border-radius:21px;}
 .chapter[data-echo] .copy h2{font-size:clamp(22px,6vw,30px);line-height:1.15;letter-spacing:-.5px;max-width:100%;margin:0 0 9px;}
 .chapter[data-echo] .copy .description{font-size:16px;line-height:1.32;margin:0;max-width:100%;}
 .chapter[data-echo] .copy .eyebrow{font-size:6.5px;line-height:1.4;letter-spacing:1.2px;margin:0 0 6px;}
 .chapter[data-echo] .copy .island-name{font-size:6.5px;line-height:1.4;margin:0 0 5px;}
 .chapter[data-echo] .copy .echo-tag{font-size:6px;line-height:1.4;letter-spacing:.8px;padding:5px 7px;margin-top:8px;}
 body:has(.chapter[data-echo] .copy[aria-hidden="false"]) :is(.map-peek,.coordinates){opacity:0;pointer-events:none;}
 body:has(.chapter[data-echo] .copy[aria-hidden="false"]) #sound{bottom:10px;}
}
@media(max-width:850px) and (max-height:700px){
 .chapter[data-echo] .copy{padding:12px 15px;}
 .chapter[data-echo] .copy h2{font-size:22px;margin-bottom:7px;}
 .chapter[data-echo] .copy .description{font-size:14px;}
 .chapter[data-echo] .copy .eyebrow{font-size:6px;}
 .chapter[data-echo] .copy .island-name{font-size:6px;}
}
@media(max-width:850px) and (orientation:landscape){
 .chapter[data-echo] .copy{width:34vw;margin-left:5vw;top:25svh;padding:12px 15px;}
 .chapter[data-echo] .copy h2{font-size:22px;}
 .chapter[data-echo] .copy .description{font-size:14px;}
 .chapter:is([data-echo="153-thalassence"],[data-echo="175-solenime"],[data-echo="199-aube-fendue"]) .copy{margin-left:auto;margin-right:5vw;top:40svh;}
}

/* Smaller portrait captions let the artwork breathe on phones. */
@media(max-width:850px) and (orientation:portrait){
 .chapter[data-echo] .copy{width:82vw;margin-left:9vw;padding:12px 14px;border-radius:18px;}
 .chapter[data-echo] .copy h2{font-size:clamp(20px,5.6vw,25px);line-height:1.12;margin-bottom:7px;}
 .chapter[data-echo] .copy .description{font-size:15px;line-height:1.25;}
 .chapter[data-echo] .copy .eyebrow{font-size:6px;letter-spacing:1px;margin-bottom:4px;}
 .chapter[data-echo] .copy .island-name{font-size:6px;margin-bottom:4px;}
 .chapter[data-echo] .copy .echo-tag{font-size:5.5px;letter-spacing:.6px;padding:4px 6px;margin-top:6px;}
}
@media(max-width:850px) and (orientation:portrait) and (max-height:700px){
 .chapter[data-echo] .copy{padding:10px 13px;}
 .chapter[data-echo] .copy .description{font-size:14px;}
}