/* The selected distant-shore composition. No prototype controls or variants. */
:root{--paper:#070b12;--ink:#edf5ff;--dim:#a8b7ca;--signal:#a9dcff;--line:#a9dcff26;--moss:#a9bfd7}
html{scrollbar-gutter:stable}body{background:var(--paper)}
::selection{background:#92c5ff45;color:var(--ink)}
a:visited{color:#bdccec}a:hover{color:#fff}
button:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.masthead{margin:0 4.8vw;padding:16px 0;border-color:var(--line)}
.masthead a{display:inline-flex;align-items:center;min-height:44px}
.masthead nav{align-items:center;gap:8px;font-size:12px}
.masthead nav a{justify-content:center;min-width:44px;padding:0 8px}
.wordmark{font-size:16px}.masthead nav [aria-current=page]{border-bottom:0;text-decoration:underline;text-underline-offset:5px}
main{max-width:1400px;padding:0 5vw}
.record-heading{isolation:isolate;margin:0;min-height:310px;padding:48px 0 34px;border:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.has-beacon .record-heading{min-height:450px;padding-bottom:62px}
.record-heading>:not(.atmosphere){position:relative;z-index:1}
.eyebrow{font-size:12px;letter-spacing:.07em;margin-bottom:30px}
h1{font-size:clamp(60px,9.5vw,136px);line-height:1;letter-spacing:-.055em;max-width:80%;text-wrap:balance}
.story-title{font-size:clamp(23px,2.4vw,34px);margin:22px 0 38px;color:#b9cae0}
.record-line{gap:0;font-size:12px;text-transform:uppercase;letter-spacing:.035em}
.record-line>span{padding:8px 24px 8px 0}.record-line>span+span{padding-left:24px;border-left:1px solid var(--line);transform:translateY(6px)}
.record-line time{font-variant-numeric:tabular-nums}
.reading-layout{max-width:980px;margin:0 auto;padding-top:52px;border-top:1px solid var(--line);grid-template-columns:150px minmax(0,1fr);gap:65px}
.margin{top:44px;color:var(--dim);font-size:12px}
.margin-number{font:italic 58px/1.1 Georgia,serif;color:var(--moss)}
.pulse{color:var(--moss);font-size:16px}
.manuscript{font-size:19px;line-height:1.9}.manuscript .opening{font-size:23px;line-height:1.7}
.insert{background:#dceaff;box-shadow:8px 12px 30px #0002}
.insert .insert-label{font-size:12px;letter-spacing:.04em}
.received{background:transparent;box-shadow:none;border:1px solid #6485aa88}
.trace-inline{text-decoration:underline dotted;text-decoration-color:#9bc7ff}
.afterimage{position:relative;padding:32px 28px;margin:70px 0 20px;border:1px solid #a9dcff33;background:linear-gradient(125deg,#a9dcff0b,transparent)}
.afterimage::before{content:'';position:absolute;right:0;top:0;width:32px;height:32px;background:linear-gradient(225deg,var(--paper) 48%,#759bc74f 49%,#a9dcff28 54%,transparent 57%);pointer-events:none}
.afterimage a{display:block;text-wrap:balance;min-height:44px}.afterimage a span{display:inline-block;transition:transform .25s}
.afterimage a:is(:hover,:focus-visible) span{transform:translate(3px,-3px)}
.afterimage>span,.backtrace{font-size:12px}
.essay{max-width:660px;margin:0 auto 90px}
.footer{padding-bottom:max(24px,env(safe-area-inset-bottom));font-size:12px;gap:12px 30px}
.footer a{display:inline-flex;align-items:center;min-height:44px}
.zero-room{margin:2.4em 0}.zero-room .insert{transform:none}
.atmosphere{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:paint}
.distant-orbit{position:absolute;width:440px;height:440px;right:6%;top:-10%;border:1px solid #a9dcff18;border-radius:50%;box-shadow:0 0 80px #548bca10,inset 0 0 80px #548bca10}
.beacon-system{position:absolute;right:19%;top:40%;width:0;height:0;perspective:850px}
.lighthouse{position:absolute;width:48px;height:117px;left:-24px;top:-13px;z-index:2;overflow:visible}
.beacon-tower{fill:url(#tower-shade);stroke:#b2cbe7;stroke-opacity:.34;stroke-width:.9}
.beacon-ribs{fill:none;stroke:#9dbbdb;stroke-opacity:.22;stroke-width:.7}
.beacon-door,.beacon-window{fill:#091322;stroke:#789cc4;stroke-opacity:.4;stroke-width:.7}
.beacon-rock{fill:#1c2b42;stroke:#7c9cbe;stroke-opacity:.22;stroke-width:.6}
.beacon-gallery{fill:#192e49;stroke:#b3cdee;stroke-opacity:.6;stroke-width:1}
.beacon-lantern,.beacon-roof{fill:#284160;stroke:#dceaff;stroke-opacity:.6;stroke-width:1}
.beacon-glass{fill:#fff6c9;fill-opacity:.6}.beacon-rail{fill:none;stroke:#adc9ec;stroke-width:1}
.beacon-source{position:absolute;z-index:3;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#fffbea;box-shadow:0 0 12px 3px #fff1aeb3,0 0 42px 13px #ffdf6f33}
.beam-rotor{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:rotateY(-25deg)}
.rotating-beam{position:absolute;right:0;top:-85px;width:720px;height:170px;transform-origin:100% 50%;clip-path:polygon(100% 50%,0 0,0 100%);background:linear-gradient(90deg,transparent 2%,#fff6c908 18%,#fff0aa1f 65%,#fff6c952);filter:blur(4px)}
.horizon{position:absolute;left:38%;right:0;top:66%;height:1px;background:linear-gradient(90deg,transparent,#82acd75c,transparent);box-shadow:0 0 22px #accfff29;transform:rotate(-4deg)}
.sea{position:absolute;left:42%;right:0;top:67%;bottom:0;overflow:hidden;transform:skewY(-4deg);background:repeating-linear-gradient(0deg,transparent 0px,transparent 17px,#a4cfff08 18px,transparent 19px);mask-image:linear-gradient(transparent,#000 30%,transparent)}
.reflection{position:absolute;right:32%;top:0;height:100%;width:20%;background:linear-gradient(90deg,transparent,#ffe8a12b,transparent);clip-path:polygon(47% 0,52% 0,100% 100%,0 100%)}
.field-caption{position:absolute;right:5%;bottom:16%;color:#b9d3ef9e;font:12px ui-monospace,monospace;letter-spacing:.08em}.field-caption span{display:inline-block;margin:0 26px}
.record-heading .beacon-controls{position:absolute;right:0;bottom:6px;display:flex;gap:8px}
.beacon-controls[hidden]{display:none}
.beacon-controls button{min-height:44px;padding:0 12px;border:0;background:transparent;color:var(--dim);font:12px/1.4 ui-monospace,monospace;cursor:pointer;transition:color .2s}
.beacon-controls button:hover{color:var(--ink)}.beacon-controls button:disabled{cursor:default}
@media(prefers-reduced-motion:no-preference){
 body[data-motion] .beam-rotor{animation:beacon-full-turn 24s linear infinite}
 body[data-motion][data-sweep="180"] .beam-rotor{animation:beacon-half-turn 16s ease-in-out infinite alternate}
 body[data-motion] .reflection{animation:water-drift 14s ease-in-out infinite alternate}
 @keyframes beacon-full-turn{from{transform:rotateY(-25deg)}to{transform:rotateY(335deg)}}
 @keyframes beacon-half-turn{from{transform:rotateY(-90deg)}to{transform:rotateY(90deg)}}
 @keyframes water-drift{from{transform:translateX(-4px);opacity:.6}to{transform:translateX(7px);opacity:1}}
}
body[data-motion=off] .atmosphere *{animation-play-state:paused!important}
@media(max-width:900px){h1{max-width:100%}.reading-layout{gap:40px}}
@media(max-width:760px){
 .masthead{margin:0 24px;padding:12px 0}main{padding:0 24px}
 .record-heading{min-height:280px;padding:38px 0 32px}.has-beacon .record-heading{min-height:450px;padding:36px 0 70px;justify-content:flex-start}
 h1{font-size:clamp(50px,14vw,72px);max-width:100%;line-height:1.04}
 .eyebrow{font-size:12px;letter-spacing:.025em;margin-bottom:24px}.story-title{margin:18px 0 36px;font-size:26px;max-width:270px}
 .record-line{font-size:12px;gap:12px}.record-line>span{padding:8px 12px 8px 0}.record-line>span+span{padding-left:12px}
 .record-line time{margin-left:5px}
 .reading-layout{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:28px}
 .margin{gap:18px}.margin-number{font-size:36px}.margin p{font-size:12px}.pulse{font-size:16px}
 .manuscript{font-size:18px;line-height:1.85}.manuscript .opening{font-size:20px}
 .insert{padding:25px 23px}.afterimage{padding:26px 22px}.essay{margin:10px auto 65px}
 .distant-orbit{width:340px;height:340px;right:-48%;top:24%}
 .beacon-system{right:12%;top:54%}.lighthouse{width:40px;height:98px;left:-20px;top:-11px}
 .rotating-beam{width:380px;height:100px;top:-50px}.horizon{left:0;top:76%}.sea{left:0;top:77%}
 .reflection{right:8%}.field-caption{bottom:15%;right:1%;font-size:12px}
 .record-heading .beacon-controls{bottom:3px}.beacon-controls button{padding:0 9px}
}
@media(max-width:359px){main{padding:0 20px}.masthead{margin:0 20px}.record-line{font-size:11px;gap:4px}.margin{gap:12px}.margin p{font-size:11px}.pulse{font-size:13px}.story-title{max-width:235px}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .beam-rotor{transform:rotateY(-25deg)!important}.insert{transform:none}
}

/* Warm light marks only the signal and the impossible arrival time. No flashing. */
:root{--meaning-light:#fff6c9;--meaning-halo:#ffd86a55}
.record-line>span+span time,.pulse,.field-caption span{color:var(--meaning-light);text-shadow:0 0 9px var(--meaning-halo),0 0 24px #ffe39820}
#tower-shade stop:first-child{stop-color:#57789b}#tower-shade stop:nth-child(2){stop-color:#304968}#tower-shade stop:last-child{stop-color:#14283f}
.beacon-glass{fill-opacity:.95}