@font-face{font-family:EB;src:url('assets/eb-garamond-medium.ttf') format('truetype');font-weight:500;font-display:swap}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#050505;color:#f5f2eb;font-family:EB,Georgia,serif;font-weight:500}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:7px}button{cursor:pointer}h1,h2,p{margin:0;font-weight:500}#stage{position:fixed;inset:0;overflow:hidden}#landscape{position:absolute;inset:0;opacity:0;background:#8ba9bb}#world{position:absolute;inset:0;width:100%;height:100%}.landscape-fallback,.empty-dune{position:absolute;inset:0;background-image:url('assets/dune.jpg');background-size:241% auto;background-position:0 36%;background-repeat:no-repeat;background-color:#b8a78a}.scene{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;will-change:opacity,transform;overflow:hidden}.scene.active{visibility:visible;pointer-events:auto}.intro{background:#000;display:grid;place-items:center}.identity{width:clamp(220px,20.14vw,320px);text-align:center;transform:translateY(-2vh)}.leaf{width:50.3%;aspect-ratio:146/123;overflow:hidden;margin:0 auto 24px;position:relative}.leaf img{width:198.6%;max-width:none;position:absolute;top:0;left:-59.6%}.wordmark{width:100%;display:block;mix-blend-mode:multiply}.wordmark.light{filter:invert(1);mix-blend-mode:screen}.begin{position:absolute;bottom:8.2%;color:inherit;text-decoration:none;font-size:16px;letter-spacing:.025em}.begin span{display:block;text-align:center;margin-top:11px;font-size:20px;opacity:.65}.journey-line{position:absolute;bottom:11%;left:0;width:100%;text-align:center;font-size:16px;text-shadow:0 1px 12px #423522}.full-image{position:absolute;width:100%;height:100%;object-fit:cover}.chapter-title{position:absolute;left:6.67%;top:50%;transform:translateY(-50%);text-shadow:0 1px 15px #65503d30}.chapter-title h1{font-size:clamp(40px,3.61vw,68px);line-height:1.08}.chapter-title p{font-size:clamp(20px,1.53vw,28px);margin-top:12px}.memories h2{position:absolute;top:14.3%;left:0;right:0;text-align:center;font-size:clamp(28px,2.57vw,46px);text-shadow:0 1px 12px #34475540}.fragment{position:absolute;object-fit:cover;box-shadow:0 12px 50px #121a1112}.fragment-one{left:6.6%;top:31.3%;width:38.9%;height:46.2%}.fragment-two{right:6.94%;bottom:9.1%;width:26.8%;height:31.7%}.hero{display:grid;grid-template-columns:61.8% 38.2%;background:#d5d0c7;color:#302b25}.hero-photo{height:100%;overflow:hidden}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:75% center}.hero-type{padding:0 9.3% 0 11.8%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.hero-type .wordmark{width:80%;max-width:320px;margin-bottom:45px}.hero h2{font-size:clamp(72px,8.06vw,160px);line-height:.92;letter-spacing:-.025em;white-space:nowrap}.chapter-label{font-size:18px;margin-top:36px}.hero-actions{display:flex;gap:clamp(36px,6.3vw,95px);margin-top:clamp(65px,17vh,150px)}.hero-actions button{color:inherit;border:0;border-bottom:1px solid #786e62;padding:4px 0;background:none;font-size:19px;transition:opacity .2s}.hero-actions button:hover{opacity:.6}.walking img{object-position:50% 48%;transform-origin:48% 40%}.shade{position:absolute;inset:0;background:#090b0aa3}.ending h2{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-size:clamp(30px,2.5vw,48px)}#scroll-track>div{height:130svh}#scroll-track>div:last-child{height:100svh}.chapter-nav{position:fixed;bottom:3.9%;left:3.33%;display:flex;gap:4px;z-index:10;transition:opacity .4s;color:#fff}.chapter-nav a{width:24px;height:24px;display:grid;place-items:center}.chapter-nav a:after{content:'';width:18px;height:1px;background:currentColor;opacity:.32;transition:opacity .25s,transform .25s}.chapter-nav a[aria-current]:after{opacity:1;transform:scaleY(2)}.chapter-nav.dark{color:#302b25}.chapter-nav.hidden{opacity:0;pointer-events:none}#motion{position:fixed;right:3.3%;bottom:4.5%;z-index:10;border:0;background:none;color:#f6f2e9;font-size:14px;opacity:.7;padding:8px;mix-blend-mode:difference}#motion:hover{opacity:1}.skip{position:fixed;z-index:40;top:10px;left:10px;transform:translateY(-150%);color:#302b25;background:#f5f2eb;padding:10px 20px}.skip:focus{transform:none}dialog{border:0;background:#e4dfd6;color:#302b25;width:min(460px,calc(100% - 40px));padding:65px 48px 60px;text-align:center}dialog::backdrop{background:#080909aa;backdrop-filter:blur(9px)}dialog .wordmark{width:220px;margin:0 auto 34px}dialog h2{font-size:70px;line-height:1}dialog p{font-size:20px;margin-top:22px}.availability{opacity:.65;font-size:17px!important}.close{position:absolute;right:18px;top:10px;border:0;background:none;color:inherit;font-size:32px;width:40px;height:40px}.reduced #stage{position:relative;overflow:visible}.reduced .scene{position:relative;height:100svh;visibility:visible!important;opacity:1!important;transform:none!important;pointer-events:auto}.reduced #scroll-track,.reduced #landscape,.reduced .chapter-nav{display:none}.reduced .reveal{background:url('assets/dune.jpg') left center/cover}.reduced .fragment,.reduced .walking img{transform:none!important}.reduced .begin{display:none}
@media(min-aspect-ratio:2/1){.empty-dune,.landscape-fallback{background-size:241% auto;background-position:0 40%}}@media(max-width:700px){.identity{width:235px}.leaf{margin-bottom:18px}.hero{grid-template-columns:1fr;grid-template-rows:59% 41%}.hero-photo img{object-position:68% 37%}.hero-type{position:relative;padding:22px 8%;justify-content:flex-start}.hero-type .wordmark{width:170px;margin-bottom:16px}.hero h2{font-size:clamp(62px,18vw,90px)}.chapter-label{position:absolute;right:8%;top:24px;font-size:14px;margin:0}.hero-actions{position:absolute;right:8%;bottom:24%;gap:26px;margin:0}.hero-actions button{font-size:17px}.candle .full-image{object-position:29% center}.chapter-title{left:7%;top:56%}.chapter-title h1{font-size:42px}.chapter-title p{font-size:20px;margin-top:7px}.memories .full-image{object-position:50% center}.memories h2{top:14%;font-size:31px}.fragment-one{width:64%;height:30%;left:5%;top:31%}.fragment-two{width:49%;height:25%;right:5%;bottom:8%}.walking .full-image{object-position:50% center}.empty-dune,.landscape-fallback{background-size:auto 190%;background-position:5% 38%}.chapter-nav{left:5%;bottom:2%}.chapter-nav a{width:20px}#motion{bottom:2.6%;right:4%;font-size:13px}.journey-line{font-size:16px}.ending h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.chapter-nav a{color:inherit;text-decoration:none}
/* Approved combined identity and a shared optical left edge in the hero. */
.combined-logo{display:block;width:100%;height:auto}
.journey-line{left:50%;top:58%;bottom:auto;width:max-content;max-width:none;white-space:nowrap;transform:translate(-50%,-50%);transform-origin:center;font-size:clamp(22px,2.1vw,32px);line-height:1.1;text-shadow:0 1px 10px #56472c55;will-change:transform}
.brand-mark{position:relative;overflow:hidden;width:80%;max-width:320px;aspect-ratio:910/59;margin-bottom:55px}
.hero-type .brand-mark .wordmark{position:absolute;left:-8.242%;top:-145.763%;width:113.077%;height:auto;max-width:none;margin:0}
.hero-actions{width:100%;justify-content:space-between;gap:18px}
.reduced .journey-line{left:50%!important;top:58%!important;transform:translate(-50%,-50%)!important}
@media(max-width:700px){.hero-type{padding-top:20px}.brand-mark{width:170px;margin-bottom:15px}.hero h2{font-size:clamp(58px,17vw,82px)}.chapter-label{position:static;align-self:flex-start;font-size:14px;margin-top:10px}.hero-actions{position:static;margin-top:20px;width:100%;gap:20px}.hero-actions button{font-size:17px}}

.journey-line{color:#302b25;text-shadow:none}
.memories > .full-image{max-width:none;object-fit:fill}
dialog #media-title{margin-top:30px;display:inline-block;border-bottom:1px solid #786e62;padding-bottom:5px}

.empty-dune{background-image:url('assets/dune-smooth.png');background-size:cover;background-position:center}

/* One photographic landscape continues through the closing scenes. */
.hero-photo img{object-position:50% 40%}
.memories h2{z-index:3}
.walking .full-image{object-position:50% 48%}
.continuity-frame{position:absolute;inset:0;transform-origin:48% 40%}
.continuity-landscape{position:absolute}
.continuity-landscape>img{width:100%;height:100%;display:block}
.erase-patch{position:absolute;left:43%;top:50%;width:14%;height:29%;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
.erase-patch img{position:absolute;width:714.2857%;height:344.8276%;max-width:none;left:-307.1429%;top:-172.4138%}
.reduced .continuity-frame{transform:none!important}

/* Phone composition uses a stable viewport while browser chrome expands. */
html{overflow-x:clip}
dialog.unavailable #media-title{border:0;opacity:.65}
@media(max-width:700px){
 #stage{height:100svh;bottom:auto}
 .identity{width:clamp(210px,62vw,280px)}
 .begin{bottom:calc(8% + env(safe-area-inset-bottom,0px));min-height:44px}
 .journey-line{font-size:clamp(19px,5vw,25px)}
 .candle .full-image{object-position:25% center}
 .chapter-title{left:7%;top:50%;text-shadow:0 1px 12px #5b4a3740}
 .chapter-title h1{font-size:clamp(34px,9.2vw,44px)}
 .chapter-title p{font-size:21px;margin-top:8px}
 .memories h2{font-size:clamp(28px,7.4vw,36px)}
 .fragment-one{left:5%;top:43%;width:57%;height:26%}
 .fragment-two{right:5%;bottom:9%;width:43%;height:23%}
 .hero{grid-template-rows:58% 42%}
 .hero-photo img{object-position:50% 39%}
 .hero-type{padding:clamp(18px,3svh,28px) 8% calc(58px + env(safe-area-inset-bottom,0px));justify-content:flex-start}
 .brand-mark{width:clamp(152px,43vw,190px);margin-bottom:clamp(16px,2.6svh,24px);flex-shrink:0}
 .hero h2{font-size:clamp(66px,19vw,88px);line-height:.9}
 .chapter-label{font-size:14px;margin-top:14px}
 .hero-actions{margin-top:auto;gap:20px;flex-shrink:0}
 .hero-actions button{font-size:17px;min-height:44px;padding:10px 0 5px}
 .chapter-nav{left:5%;bottom:calc(7px + env(safe-area-inset-bottom,0px));gap:0}
 .chapter-nav a{width:29px;height:44px}
 .chapter-nav a:after{width:18px}
 #motion{right:4%;bottom:calc(7px + env(safe-area-inset-bottom,0px));font-size:12px;min-height:44px;padding:10px 6px}
 .ending h2{font-size:clamp(29px,8vw,38px)}
 dialog{width:calc(100% - 40px);max-height:calc(100svh - 48px);padding:64px 28px 52px;overflow:auto}
 dialog .wordmark{width:min(220px,100%)}
 .close{width:48px;height:48px;right:8px;top:8px}
}
@media(max-width:700px) and (max-height:700px){
 .hero{grid-template-rows:53% 47%}
 .hero-type{padding-top:16px;padding-bottom:54px}
 .brand-mark{margin-bottom:15px;width:150px}
 .hero h2{font-size:64px}
 .chapter-label{margin-top:10px}
 .hero-actions{margin-top:12px}
}
@media(max-height:500px) and (orientation:landscape){
 .hero{grid-template-columns:56% 44%;grid-template-rows:1fr}
 .hero-type{padding:22px 10% 58px;justify-content:center}
 .brand-mark{width:160px;margin-bottom:20px}
 .hero h2{font-size:64px}
 .chapter-label{margin-top:16px;font-size:14px}
 .hero-actions{margin-top:22px;gap:16px}
 .hero-actions button{min-height:44px;font-size:16px}
 .chapter-title h1{font-size:38px}
}

dialog #media-title{color:inherit;text-decoration:none;font-size:22px;min-height:44px;padding:8px 0}dialog #media-title[href]:hover{opacity:.7}

@media(max-width:700px) and (max-height:700px){.hero-photo img{object-position:50% 26%}}

/* Keep the mobile zoom anchored to the centre of the visible scene. */
@media(max-width:700px){.reveal .journey-line{left:50%!important;top:50%!important;transform-origin:center}}

.ending h2{padding-inline:7%;text-wrap:balance}
@media(max-width:700px){.ending h2{font-size:clamp(28px,7.5vw,36px);line-height:1.25}}
