:root{ --ink:#07131a; --paper:#e9efea; --foam:#93bcae; --buoy:#d05a3c; --brass:#c2a05e; --muted:#8ba39e; --accent:#93bcae; }
canvas#fogcv{position:fixed; inset:0; z-index:1; pointer-events:none;}
.chrome .rightcell{display:flex; align-items:center; gap:10px;}
#compassNeedle{transform-origin:10px 10px;}
@keyframes pulse{50%{opacity:.2}}
#leader .rose{width:min(44vh,320px); aspect-ratio:1; position:relative;}
#leader svg{width:100%; height:100%; overflow:visible;}
@media(hover:none){.beam,.ring{display:none}}
.beamflash{position:fixed; inset:-30%; z-index:95; pointer-events:none; opacity:0;
    background:conic-gradient(from 0deg at 50% 115%, transparent 0 44%, rgba(214,233,224,.14) 48% 52%, transparent 56% 100%);}
.beamflash.go{animation:bflash 1.5s ease-out forwards;}
@keyframes bflash{0%{opacity:0; transform:rotate(-24deg);}18%{opacity:1;}100%{opacity:0; transform:rotate(24deg);}}
.stars{position:absolute; inset:0 0 42% 0; z-index:0;
    background-image:radial-gradient(1.4px 1.4px at 12% 22%,rgba(233,239,234,.8),transparent 60%),radial-gradient(1px 1px at 32% 8%,rgba(233,239,234,.55),transparent 60%),radial-gradient(1.8px 1.8px at 57% 18%,rgba(233,239,234,.75),transparent 60%),radial-gradient(1px 1px at 74% 30%,rgba(233,239,234,.5),transparent 60%),radial-gradient(1.3px 1.3px at 88% 12%,rgba(233,239,234,.7),transparent 60%),radial-gradient(1px 1px at 44% 32%,rgba(233,239,234,.45),transparent 60%),radial-gradient(1.2px 1.2px at 23% 40%,rgba(233,239,234,.5),transparent 60%),radial-gradient(1px 1px at 66% 44%,rgba(233,239,234,.4),transparent 60%);}
.horizon{position:absolute; left:0; right:0; top:54%; height:1px; z-index:0; background:linear-gradient(90deg,transparent,rgba(147,188,174,.4) 30%,rgba(147,188,174,.4) 70%,transparent);}
.coldbeam{position:absolute; inset:-40%; z-index:0; mix-blend-mode:screen; opacity:.85;
    background:conic-gradient(from 90deg at 50% 54%, transparent 0 42%, rgba(210,236,224,.13) 47% 53%, transparent 58% 100%);
    animation:coldsweep 16s linear infinite;}
@keyframes coldsweep{to{transform:rotate(360deg)}}
.coldlamp{position:absolute; left:50%; top:calc(54% - 5px); width:9px; height:9px; margin-left:-4.5px; border-radius:50%; z-index:1; background:#eef7f1; box-shadow:0 0 22px 7px rgba(214,238,226,.55); animation:lamp 3.2s ease-in-out infinite;}
@keyframes lamp{50%{opacity:.55}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.mile{display:inline-block; width:max-content; font:700 10px/1 "Space Mono",monospace; letter-spacing:.18em; color:#eef5ef; background:#1d5c3c; border:1.5px solid rgba(238,245,239,.85); border-radius:5px; padding:6px 10px; margin-bottom:16px; box-shadow:0 4px 18px rgba(0,0,0,.4);}
.split{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:5vw; min-height:100vh;}
.split .txt{padding-left:2vw;}
.split .pic{height:74vh; border-radius:10px; background-size:cover; background-position:center; box-shadow:0 30px 70px rgba(0,0,0,.55);}
#water{padding:0; cursor:crosshair;}
.waterimg, #watercv{position:absolute; inset:0;}
.waterimg{background-size:cover; background-position:center;}
#watercv{z-index:1;}
.water-copy{position:absolute; z-index:3; left:0; right:0; bottom:7vh; text-align:center; pointer-events:none; padding:0 6vw;}
.water-copy .kicker{color:var(--accent); margin-bottom:12px;}
.water-line{font-size:clamp(1.2rem,2.5vw,1.95rem); font-style:italic; font-weight:300; line-height:1.35; text-shadow:0 2px 22px rgba(0,0,0,.9);}
.water-sub{margin-top:.55rem; font:700 11px/1 "Space Mono",monospace; letter-spacing:.3em; text-transform:uppercase; color:var(--foam);}
.pair{display:flex; gap:22px; margin-top:2.6rem; flex-wrap:wrap;}
.pair figure{width:min(340px,42vw); margin:0;}
.pair .ph{height:210px; border-radius:6px; background-size:cover; background-position:center; box-shadow:0 14px 40px rgba(0,0,0,.55);}
.pair figcaption{font:400 10px/1.4 "Space Mono",monospace; letter-spacing:.08em; color:var(--muted); margin-top:9px; text-transform:uppercase;}
#bold{padding:0;}
.boldimg{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.03);}
.fogveil{position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,rgba(216,227,222,.97),rgba(198,213,206,.97));
    -webkit-mask-image:radial-gradient(circle 340px at var(--fx,50%) var(--fy,45%), transparent 0 30%, black 76%);
            mask-image:radial-gradient(circle 340px at var(--fx,50%) var(--fy,45%), transparent 0 30%, black 76%);}
#boldcv{position:absolute; inset:0; z-index:2; pointer-events:none;}
.boldcopy{position:relative; z-index:3; text-align:center; padding:0 6vw; color:#0d2126;}
.boldcopy .kicker{color:#33685a;}
.boldcopy h2.chapter{text-shadow:0 2px 30px rgba(255,255,255,.5);}
.boldcopy .lede{color:#22403a; text-shadow:0 1px 18px rgba(255,255,255,.6); margin-inline:auto;}
.boldhint{position:absolute; z-index:3; left:0; right:0; bottom:6vh; text-align:center; font:400 10px/1 "Space Mono",monospace; letter-spacing:.32em; text-transform:uppercase; color:#4a6660; opacity:.85;}
.hotspot{position:absolute; z-index:3; display:flex; align-items:center; gap:9px; opacity:0; pointer-events:none; transform:translate(-6px,-50%);}
.hotspot i{width:5px; height:5px; border-radius:50%; background:#1d5c3c; box-shadow:0 0 10px rgba(238,245,239,.9); flex:0 0 auto;}
.hotspot span{font:400 10px/1.4 "Space Mono",monospace; letter-spacing:.22em; text-transform:uppercase; color:#123a30; text-shadow:0 1px 12px rgba(255,255,255,.8); white-space:nowrap;}
.endbeam{position:absolute; inset:-45%; z-index:-1; mix-blend-mode:screen; opacity:0; transition:opacity 2.5s ease;
    background:conic-gradient(from 90deg at 50% 58%, transparent 0 43%, rgba(210,236,224,.1) 47.5% 52.5%, transparent 57% 100%);
    animation:coldsweep 22s linear infinite;}
#end.on .endbeam{opacity:1;}
.endbox{position:relative;}
.endbox .lampdot{width:10px; height:10px; border-radius:50%; margin:0 auto 2rem; background:#eef7f1; box-shadow:0 0 30px 10px rgba(214,238,226,.5); animation:lamp 3.2s ease-in-out infinite;}
.bordertown{margin-top:2.4rem; font:400 10px/1.6 "Space Mono",monospace; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); opacity:.8;}
@media (prefers-reduced-motion:reduce){
    .coldbeam,.endbeam,.coldlamp,.endbox .lampdot{animation:none;}
    #leader{display:none;}
    .titleword .ch i{transition:none; transform:none;}
    .fogveil{-webkit-mask-image:none; mask-image:none; background:rgba(216,227,222,.78);}
    .hotspot{opacity:.9 !important;}
    #water{cursor:auto;}
  }
@media(max-width:800px){ .split{grid-template-columns:1fr;} .split .pic{height:48vh;} .hcard{width:78vw;} .pair .ph{height:150px;} }