:root{color-scheme:dark;--gold:#dfbd70;--cream:#f5edda;--ink:#14252b;--red:#aa222b;--wind-duration:3.2s;--cloud-speed:70s}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#101c23}
body{margin:0;background:#101c23;color:var(--cream);font:16px/1.55 Georgia,"Times New Roman",serif}
button,a{font:inherit}
button{color:inherit}
.scene{position:relative;display:block;min-height:100svh;overflow:hidden;isolation:isolate;background:#12212b;--celestial-x:72%;--celestial-y:19%}
.world-art{position:absolute;inset:-1.5%;z-index:0;width:103%;height:103%;overflow:visible;transform-origin:center;animation:landscape-breathe 58s ease-in-out infinite alternate}
.landscape-day,.landscape-night{transition:opacity 4.5s ease,filter 4.5s ease}
.landscape-day{opacity:1;filter:brightness(1.02) saturate(1.08)}
.landscape-night{opacity:0;filter:brightness(1.04) saturate(1.08)}
.scene[data-phase=dawn] .landscape-day{filter:brightness(.94) saturate(1.03) sepia(.07)}
.scene[data-phase=dusk] .landscape-day{filter:brightness(.9) saturate(1.05)}
.scene[data-phase=night] .landscape-day{opacity:0;filter:brightness(.6) saturate(.7)}
.scene[data-phase=night] .landscape-night{opacity:1;filter:none}
@keyframes landscape-breathe{from{transform:scale(1.015) translate3d(-.25%,0,0)}to{transform:scale(1.055) translate3d(.45%,-.35%,0)}}
.color-wash{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(9,18,25,.68) 0%,rgba(9,18,25,.43) 25%,rgba(9,18,25,.08) 53%,transparent 75%),linear-gradient(0deg,rgba(7,16,19,.83) 0%,rgba(7,16,19,.2) 23%,transparent 60%);transition:background 3s ease}
.scene[data-phase=day] .color-wash{background:linear-gradient(90deg,rgba(12,25,31,.53),rgba(12,25,31,.3) 28%,transparent 69%),linear-gradient(0deg,rgba(9,25,26,.72),transparent 54%)}
.scene[data-phase=night] .color-wash{background:linear-gradient(90deg,rgba(4,12,24,.72),rgba(6,15,29,.52) 30%,rgba(8,18,34,.1) 70%),linear-gradient(0deg,rgba(3,12,17,.9),rgba(4,12,22,.12) 56%)}
.scene::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 55% 45%,transparent 30%,rgba(5,11,16,.24) 100%)}
.sky-layer{position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none}
.celestial{position:absolute;left:var(--celestial-x);top:var(--celestial-y);width:clamp(30px,4vw,68px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 34% 32%,#fff9dc,#f4d28a 56%,#e3a85a 100%);box-shadow:0 0 36px 12px rgba(255,213,138,.32),0 0 110px 40px rgba(248,192,123,.12);transition:left 16s linear,top 16s linear,background 3s,box-shadow 3s,width 3s;opacity:.92}
.scene[data-weather=cloudy] .celestial,.scene[data-weather=fog] .celestial{opacity:.43}
.scene[data-phase=night] .celestial{width:clamp(30px,3.3vw,52px);background:radial-gradient(circle at 35% 30%,#fff,#e1e1e8 70%);box-shadow:inset -9px -3px 0 rgba(53,62,82,.62),0 0 42px 10px rgba(220,230,255,.2);opacity:.96}
.starfield{position:absolute;inset:0;opacity:0;transition:opacity 3s;background-image:radial-gradient(1.6px 1.6px at 11% 18%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 32%,#fff 60%,transparent),radial-gradient(2px 2px at 39% 14%,#fff 60%,transparent),radial-gradient(1px 1px at 51% 28%,#fff 60%,transparent),radial-gradient(1.6px 1.6px at 69% 11%,#fff 60%,transparent),radial-gradient(1px 1px at 92% 35%,#fff 60%,transparent),radial-gradient(1px 1px at 82% 42%,#fff 60%,transparent);animation:twinkle 5s ease-in-out infinite alternate}
.scene[data-phase=night] .starfield{opacity:.34}
@keyframes twinkle{to{filter:brightness(.48);transform:translateY(1px)}}
.drift-cloud{position:absolute;width:clamp(180px,27vw,480px);height:72px;border-radius:50%;filter:blur(25px);background:rgba(252,226,196,.17);opacity:.48;animation:cloud-drift var(--cloud-speed) linear infinite alternate;transition:opacity 4s}
.drift-cloud::before,.drift-cloud::after{content:"";position:absolute;background:inherit;border-radius:50%;filter:blur(4px)}
.drift-cloud::before{width:50%;height:75%;left:17%;top:-28%}
.drift-cloud::after{width:38%;height:65%;right:12%;top:-14%}
.cloud-one{left:-5%;top:18%;animation-duration:92s}
.cloud-two{left:48%;top:28%;width:clamp(240px,34vw,580px);animation-duration:112s;animation-direction:alternate-reverse;opacity:.28}
.cloud-three{left:20%;top:43%;width:clamp(160px,22vw,370px);height:42px;animation-duration:82s;opacity:.24}
.scene[data-phase=night] .drift-cloud{background:rgba(175,194,216,.11);opacity:.3}
.scene[data-weather=cloudy] .drift-cloud,.scene[data-weather=rain] .drift-cloud,.scene[data-weather=storm] .drift-cloud{opacity:.82;background:rgba(111,133,151,.24)}
.scene[data-weather=fog] .drift-cloud{opacity:.82;background:rgba(216,224,218,.28);filter:blur(33px)}
@keyframes cloud-drift{from{transform:translate3d(-6vw,0,0) scale(1)}to{transform:translate3d(8vw,2vh,0) scale(1.08)}}
.valley-mist{animation:mist-breath 26s ease-in-out infinite alternate;transform-origin:center}
.valley-mist path{transition:opacity 4s}
.scene[data-weather=fog] .valley-mist path{opacity:.55!important}
@keyframes mist-breath{from{transform:translateX(-.5%)}to{transform:translateX(1.2%)}}
.sky-birds{transform-box:fill-box;transform-origin:center;animation:flock-cross 48s linear infinite;opacity:0;transition:opacity 2s}
.scene[data-phase=day] .sky-birds,.scene[data-phase=dawn] .sky-birds,.scene[data-phase=dusk] .sky-birds{opacity:.82}
.sky-birds path{animation:wing-flick 1.2s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 55%}
.sky-birds path:nth-child(2){animation-delay:-.35s}
.sky-birds path:nth-child(3){animation-delay:-.7s}
@keyframes wing-flick{to{transform:scaleY(.55)}}
@keyframes flock-cross{0%{transform:translate(-130px,20px)}35%{transform:translate(430px,-14px)}70%{transform:translate(1080px,12px)}100%{transform:translate(1900px,-30px)}}
.door-standard{transform-box:view-box;transform-origin:24px 0;transition:filter 2s}
.standard-cloth{transform-box:fill-box;transform-origin:0 6%;animation:standard-wave var(--wind-duration) ease-in-out infinite alternate}
.standard-right .standard-cloth{animation-delay:-1.2s;animation-direction:alternate-reverse}
.standard-iron{filter:drop-shadow(1px 2px 2px #241d18)}
@keyframes standard-wave{0%{transform:skewY(1deg) scaleX(1)}55%{transform:skewY(-3deg) scaleX(.94)}100%{transform:skewY(2deg) scaleX(1.015)}}
.weather-canvas{position:absolute;z-index:3;inset:0;width:100%;height:100%;pointer-events:none}
.grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}
.top{position:absolute;z-index:7;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:clamp(18px,2.3vw,34px) clamp(20px,5vw,78px)}
.brand{display:flex;align-items:center;gap:14px;color:#fff2d6;text-decoration:none}
.crest-mark{position:relative;display:flex;flex-direction:column;justify-content:center;gap:5px;width:39px;height:45px;padding:8px 7px 11px;clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);background:linear-gradient(135deg,#f0d48d,#bd9149);box-shadow:0 3px 14px #0005}
.crest-mark i{height:5px;background:#a9232b;display:block}
.crest-mark b{height:5px;background:#a9232b;display:block}
.brand-name,.nav,.weather,.foot,.scene-caption,.scroll-cue,.actions,.eyebrow,.arms-caption,.record-date,.lineage-footer,.return-link,.source-note{font-family:ui-sans-serif,system-ui,"Segoe UI",sans-serif}
.brand-name{font-size:11px;font-weight:650;letter-spacing:.2em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:clamp(16px,2.1vw,32px);color:#fff2d6;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.nav a,.foot>a{color:inherit;text-decoration:none;transition:color .2s,opacity .2s}
.nav a{opacity:.84}
.nav a:hover,.foot>a:hover{color:#f1cf82;opacity:1}
.weather{display:flex;align-items:center;gap:9px;min-width:150px;font-size:10px;letter-spacing:.08em;text-transform:none}
.weather-symbol{font-size:18px;color:#f0ce7f}
.hero-copy{position:absolute;z-index:6;left:clamp(24px,8vw,136px);top:31%;width:min(620px,46vw);text-shadow:0 3px 28px rgba(6,12,17,.42)}
.eyebrow{display:flex;align-items:center;gap:12px;color:#ebcd8b;font-size:10px;font-weight:650;letter-spacing:.27em;text-transform:uppercase}
.eyebrow-rule{width:24px;height:1px;background:#d6b66d;opacity:.8}
.hero-copy h1{margin:22px 0 18px;font-size:clamp(58px,6vw,96px);font-weight:400;line-height:.89;letter-spacing:-.055em}
.hero-copy h1 em,.story-copy h2 em{font-weight:400;color:#e4c580}
.hero-copy>p{max-width:360px;margin:0;color:#f5eddbdd;font-size:clamp(15px,1.25vw,18px);line-height:1.62}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin-top:29px}
.enter-link,.cycle-button,.live-button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:12px;border:1px solid rgba(239,211,151,.5);padding:0 16px;background:rgba(14,28,35,.54);color:#fff1d2;text-decoration:none;font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;backdrop-filter:blur(8px);transition:background .25s,color .25s,border-color .25s,transform .25s}
.enter-link span{font-size:15px}
.cycle-button{cursor:pointer}
.enter-link:hover,.cycle-button:hover,.live-button:hover{background:#e0bd71;border-color:#e0bd71;color:#18262d;transform:translateY(-2px)}
.cycle-icon{font-size:15px}
.cycle-button[aria-pressed=true]{background:#e0bd71;color:#18262d}
.live-button{min-height:34px;padding:0 12px;font-size:8px}
.live-button[hidden]{display:none}
.scene-caption{position:absolute;z-index:6;left:clamp(24px,8vw,136px);bottom:110px;display:flex;align-items:center;gap:10px;color:#f4e7c4;font-size:8px;font-weight:650;letter-spacing:.19em;text-transform:uppercase;opacity:.83}
.caption-dot{width:4px;height:4px;border-radius:50%;background:#e5c27b;box-shadow:0 0 12px #f7d385}
.scroll-cue{position:absolute;z-index:6;right:clamp(25px,6vw,90px);bottom:123px;display:flex;align-items:center;gap:13px;color:#fff0d1;font-size:8px;letter-spacing:.16em;text-transform:uppercase;opacity:.76}
.cue-line{width:43px;height:1px;background:#e5c57e;animation:cue-pulse 2.4s ease-in-out infinite}
@keyframes cue-pulse{50%{width:66px;opacity:.42}}
.foot{position:absolute;z-index:7;bottom:25px;left:clamp(20px,5vw,78px);right:clamp(20px,5vw,78px);display:flex;align-items:flex-end;justify-content:space-between;gap:20px;color:#f2e5c7b5;font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.clock-block{display:flex;flex-direction:column;gap:2px}
.clock{color:#fff2d9;font:18px Georgia,serif;letter-spacing:.08em}
.clock-zone{font-size:8px;opacity:.7}
.weather-note{text-align:center;opacity:.7}
.foot>a{color:#f4e6c7b8}
.foot>a span{color:#e7c47b;font-size:14px;margin-left:6px}
.lineage{position:relative;overflow:hidden;background:radial-gradient(ellipse at 17% 55%,#293a35 0%,transparent 37%),linear-gradient(140deg,#121f23,#0c171b 65%,#182321);padding:clamp(78px,10vw,150px) clamp(24px,9vw,140px) 32px;border-top:1px solid rgba(222,189,113,.28)}
.lineage::before,.lineage::after{content:"";position:absolute;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,#a8272d 0 42px,transparent 42px 54px,#d6b56a 54px 70px,transparent 70px 104px);opacity:.8}
.lineage::before{top:0}
.lineage::after{bottom:66px;opacity:.38}
.lineage-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(270px,.82fr) minmax(360px,1fr);gap:clamp(48px,9vw,150px);align-items:center;max-width:1300px;margin:0 auto}
.arms-panel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:510px}
.arms-halo{position:absolute;width:min(82%,400px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#d6b76516 0%,#a8252b0c 49%,transparent 70%);filter:blur(8px)}
.full-arms{position:relative;width:min(100%,390px);height:auto;overflow:visible;filter:drop-shadow(0 18px 22px #0007);animation:arms-hover 8s ease-in-out infinite}
.mantling{transform-origin:50% 50%;animation:mantle-breathe 7s ease-in-out infinite alternate}
@keyframes arms-hover{50%{transform:translateY(-8px)}}
@keyframes mantle-breathe{to{transform:scale(1.012)}}
.arms-caption{position:relative;margin-top:6px;color:#d9bd7b;font-size:9px;letter-spacing:.18em;text-transform:uppercase}
.story-copy{max-width:640px}
.story-copy h2{margin:23px 0 22px;font-size:clamp(54px,6.6vw,88px);font-weight:400;line-height:.95;letter-spacing:-.05em}
.story-copy>p{max-width:590px;color:#eee5d2be;font-size:16px;line-height:1.78}
.story-copy>p.story-lead{color:#f2ead9;font-size:19px;line-height:1.58}
.record{display:grid;grid-template-columns:auto 1px 1fr;gap:21px;align-items:start;margin:36px 0 27px;padding-top:22px;border-top:1px solid #e3c77c45}
.record-date{padding-top:3px;color:#e3c47e;font-size:10px;font-weight:700;letter-spacing:.14em;white-space:nowrap}
.record-rule{height:100%;min-height:90px;background:linear-gradient(#d7b76d,#a62830 58%,transparent)}
.record h3{margin:0 0 9px;color:#f3e7ca;font-size:17px;font-weight:400}
.record p{margin:0;color:#eee5d2a8;font-size:14px;line-height:1.7}
.return-link{display:inline-flex;align-items:center;gap:10px;color:#e5c57d;text-decoration:none;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.return-link span{font-size:15px}
.return-link:hover{color:#fff0d0}
.source-note{margin:31px 0 0!important;padding-top:14px;border-top:1px solid #eadcb51f;color:#e5dac18c!important;font-size:10px!important;letter-spacing:.03em}
.lineage-footer{position:relative;z-index:1;display:flex;justify-content:space-between;gap:18px;max-width:1300px;margin:50px auto 0;padding-top:20px;color:#d7c8a28c;border-top:1px solid #e7d08a2e;font-size:8px;letter-spacing:.16em;text-transform:uppercase}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s ease}
.reveal.is-visible{opacity:1;transform:none}
.story-copy.reveal{transition-delay:.16s}
@media(max-width:850px){.hero-copy{left:6vw;width:min(560px,54vw)}.lineage{padding-left:7vw;padding-right:7vw}.lineage-inner{gap:6vw;grid-template-columns:minmax(230px,.78fr) minmax(300px,1fr)}.arms-panel{min-height:440px}.full-arms{width:min(100%,320px)}.weather{min-width:0}}
@media(max-width:650px){.scene{min-height:100svh}.world-art{inset:-1%;width:102%;height:102%}.top{padding:16px 19px}.brand{gap:9px}.crest-mark{width:32px;height:37px;padding:7px 6px 10px;gap:4px}.crest-mark i,.crest-mark b{height:4px}.brand-name{font-size:9px;letter-spacing:.15em}.nav{gap:13px;font-size:8px;letter-spacing:.09em}.nav a:first-child{display:none}.weather{gap:5px;font-size:8px;letter-spacing:.02em}.weather-symbol{font-size:15px}.hero-copy{left:24px;right:20px;top:16%;width:auto;max-width:410px;padding:18px 16px 19px 0;text-shadow:0 3px 24px #071116a8}.hero-copy h1{margin:17px 0 13px;font-size:clamp(48px,14vw,72px)}.hero-copy>p{max-width:315px;font-size:14px;line-height:1.5}.eyebrow{font-size:8px;letter-spacing:.19em}.actions{gap:8px;margin-top:19px}.enter-link,.cycle-button{min-height:40px;padding:0 11px;font-size:8px;letter-spacing:.11em}.live-button{font-size:8px}.celestial{width:38px}.scene-caption{left:24px;bottom:85px;font-size:7px;letter-spacing:.12em}.scroll-cue{right:22px;bottom:87px;font-size:7px;gap:8px}.cue-line{width:24px}.foot{left:20px;right:20px;bottom:14px;gap:10px;font-size:7px;letter-spacing:.06em}.clock{font-size:15px}.clock-zone{font-size:7px}.weather-note{max-width:104px;font-size:7px}.foot>a{max-width:110px;text-align:right}.foot>a span{font-size:11px}.lineage{padding:76px 24px 26px}.lineage-inner{grid-template-columns:1fr;gap:26px}.arms-panel{min-height:0;order:1}.full-arms{width:min(72vw,300px)}.arms-caption{margin-top:-5px;font-size:8px}.story-copy{order:2}.story-copy h2{font-size:56px;margin:18px 0}.story-copy>p.story-lead{font-size:17px}.story-copy>p{font-size:14px}.record{grid-template-columns:1fr;gap:8px;margin-top:27px}.record-rule{width:36px;height:2px;min-height:0;background:#c8a75f}.record h3{font-size:16px}.record p{font-size:13px}.source-note{margin-top:24px!important}.lineage-footer{flex-direction:column;gap:8px;margin-top:31px;font-size:7px}}
@media(max-width:650px){.hero-copy{top:12%;padding:14px 12px 16px 0;background:linear-gradient(90deg,rgba(7,16,22,.66) 0%,rgba(7,16,22,.48) 68%,rgba(7,16,22,0) 100%)}.weather span:not(.weather-symbol){display:none}}
@media(max-width:390px){.hero-copy{top:11%;left:16px;right:14px}.hero-copy h1{font-size:47px}.hero-copy>p{font-size:13px}.actions{gap:6px}.enter-link,.cycle-button{padding:0 9px}.weather{max-width:92px}.weather-note{display:none}.scene-caption{bottom:77px}.scroll-cue{bottom:79px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}