:root {
  --ink:#f1eadc;
  --muted:rgba(241,234,220,.54);
  --line:rgba(241,234,220,.15);
  --ground:#050505;
  --ember:#ff6448;
  --mint:#a8ffcb;
  color-scheme:dark;
  font-synthesis:none;
}
*{box-sizing:border-box}
html{background:var(--ground);scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:var(--ground);color:var(--ink);font-family:ui-monospace,"SFMono-Regular","Cascadia Mono",monospace;-webkit-font-smoothing:antialiased}
#field{position:fixed;inset:0;z-index:0;width:100%;height:100%;opacity:.78;pointer-events:none}
.grain{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:.1;background-image:repeating-radial-gradient(circle at 28% 17%,transparent 0,rgba(255,255,255,.12) .5px,transparent .8px,transparent 4px);mix-blend-mode:soft-light}
a,button{color:inherit}button{font:inherit}
.head,main,.foot{position:relative;z-index:2}
.head{position:absolute;inset:0 0 auto;z-index:5;height:102px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,4vw,64px);border-bottom:1px solid var(--line);font-size:8px;letter-spacing:.22em}
.head>a{text-decoration:none;letter-spacing:.36em}
.head>div{display:flex;align-items:center;gap:14px;color:var(--muted)}
.head i{width:3px;height:3px;border-radius:50%;background:var(--ember)}
.encounter{position:relative;min-height:100svh;padding:clamp(150px,19vh,220px) clamp(24px,4vw,64px) 100px;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);grid-template-rows:1fr auto;align-items:center;border-bottom:1px solid var(--line)}
.artifact{position:absolute;z-index:-1;top:50%;right:3vw;width:min(52vw,760px);transform:translateY(-52%);opacity:.68}
.artifact svg{display:block;width:100%;filter:drop-shadow(0 0 25px rgba(241,234,220,.07))}
.broken-line{fill:none;stroke:rgba(241,234,220,.12);stroke-width:1;stroke-dasharray:3 7}
.slot{fill:rgba(5,5,5,.82);stroke:rgba(241,234,220,.25);stroke-width:1}
.absence{fill:rgba(5,5,5,.94);stroke:rgba(241,234,220,.18);stroke-width:1;stroke-dasharray:2 7}
.absence-mark{stroke:rgba(241,234,220,.22);stroke-width:1}
.state--before{opacity:1;animation:occupancy-before 10s linear infinite}
.state--after{opacity:0;animation:occupancy-after 10s linear infinite}
.carrier--a{fill:var(--ember);filter:drop-shadow(0 0 12px var(--ember))}
.carrier--b{fill:var(--mint);filter:drop-shadow(0 0 12px var(--mint))}
.opening{grid-column:1;max-width:850px}
.kicker{margin:0 0 22px;color:var(--muted);font-size:8px;letter-spacing:.25em}
h1{margin:0;font:italic clamp(64px,9.2vw,150px)/.8 Iowan Old Style,Baskerville,Georgia,serif;letter-spacing:-.065em}
h1 span,h1 em{display:block;white-space:nowrap}
h1 em{margin-left:5vw;color:transparent;-webkit-text-stroke:1px rgba(241,234,220,.86)}
.lead{width:min(620px,88%);margin:36px 0 26px;color:var(--muted);font-size:12px;line-height:1.85}
#sound{display:flex;align-items:center;gap:13px;padding:0 0 8px;border:0;border-bottom:1px solid rgba(168,255,203,.35);background:none;color:var(--mint);font-size:8px;letter-spacing:.17em;text-transform:uppercase;cursor:pointer}
#sound i{width:38px;height:1px;background:currentColor;position:relative}
#sound i::after{position:absolute;right:0;top:-4px;width:1px;height:9px;background:currentColor;content:"";transition:transform .3s}
#sound[aria-pressed="true"] i::after{transform:rotate(90deg)}
.transmission{margin:14px 0 0;color:rgba(241,234,220,.3);font-size:7px;letter-spacing:.15em}
.coordinates{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:80px 0 0}
.coordinates div{padding-top:12px;border-top:1px solid var(--line)}
dt{color:var(--muted);font-size:7px;letter-spacing:.13em;text-transform:uppercase}
dd{margin:7px 0 0;font:italic 18px/1 Iowan Old Style,Baskerville,Georgia,serif}
.relation,.scope,.laws,.not,.horizon{position:relative;padding:clamp(110px,14vw,210px) clamp(24px,4vw,64px);border-bottom:1px solid var(--line)}
h2{margin:0;font:italic clamp(46px,6.6vw,105px)/.91 Iowan Old Style,Baskerville,Georgia,serif;letter-spacing:-.05em}
.relation h2 span,.relation h2 em,.horizon h2 span,.horizon h2 em{display:block}
.relation h2 em,.horizon h2 em{margin-left:13vw;color:transparent;-webkit-text-stroke:1px rgba(241,234,220,.75)}
.relation>p:last-child{width:min(690px,100%);margin:38px 6vw 0 auto;color:var(--muted);font-size:13px;line-height:1.9}
.sequence{width:min(690px,100%);margin:65px 6vw 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;color:var(--ink);font-size:10px;letter-spacing:.12em}
.sequence span{padding:15px;border:1px solid var(--line);text-align:center}.sequence i{color:var(--ember);font-size:7px;font-style:normal;letter-spacing:.2em}
.scope,.not{display:grid;grid-template-columns:1fr 1fr;gap:7vw}
.scope>div:last-child,.not>div:last-child{padding-top:35px}
.scope p:not(.kicker),.not p:not(.kicker),.horizon>p:last-of-type{margin:0 0 25px;color:var(--muted);font-size:13px;line-height:1.9}
.scope>div:last-child p:first-child{color:var(--ink);font:italic clamp(20px,2vw,29px)/1.55 Iowan Old Style,Baskerville,Georgia,serif}
.laws header{margin-bottom:76px}
.laws ol{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.laws li{display:grid;grid-template-columns:76px 1fr;gap:28px;padding:28px 0;border-bottom:1px solid var(--line)}
.laws b{color:var(--ember);font-size:9px;font-weight:400}
.laws p{margin:0;max-width:800px;font:italic 24px/1.45 Iowan Old Style,Baskerville,Georgia,serif}
.horizon{min-height:86svh;display:flex;flex-direction:column;justify-content:center}
.horizon h2 span{color:var(--ember)}
.horizon>p:last-of-type{width:min(680px,100%);margin:60px 0 70px auto}
.future{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;color:var(--muted);font-size:8px;letter-spacing:.16em}
.future i{height:1px;background:linear-gradient(90deg,var(--ember),rgba(241,234,220,.08) 12%,rgba(241,234,220,.08));position:relative}
.future i::before{position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--ember);box-shadow:0 0 18px rgba(255,100,72,.7);content:""}
.foot{min-height:112px;padding:28px clamp(24px,4vw,64px);display:flex;align-items:center;gap:25px;color:var(--muted);font-size:7px;letter-spacing:.14em}
.foot button{padding:0;border:0;background:none;color:var(--mint);cursor:pointer;font-size:inherit;letter-spacing:inherit}
.foot a{text-decoration:none}.foot time{margin-left:auto}
.no-script{position:fixed;z-index:20;inset:auto 20px 20px;color:var(--muted);font-size:9px}
body[data-sounding="true"] .artifact{opacity:.92}
body[data-sounding="true"] .absence{stroke:var(--ink);animation:breathe 4s ease-in-out infinite}
@keyframes occupancy-before{0%,36%{opacity:1}42%,100%{opacity:0}}
@keyframes occupancy-after{0%,58%{opacity:0}64%,94%{opacity:1}100%{opacity:0}}
@keyframes breathe{50%{r:51;opacity:.35}}
@media(max-width:760px){
  .head{height:84px;padding-inline:20px}.head>div span:first-child,.head i{display:none}
  .encounter{padding:125px 20px 100px;grid-template-columns:1fr}.artifact{top:28%;right:-18vw;width:100vw;opacity:.35}
  h1{font-size:clamp(58px,18vw,92px)}h1 span,h1 em{white-space:normal}h1 em{margin-left:0}
  .lead{width:100%}.coordinates{grid-template-columns:repeat(2,1fr);margin-top:65px}
  .relation,.scope,.laws,.not,.horizon{padding-left:20px;padding-right:20px}
  .scope,.not{grid-template-columns:1fr}.relation h2 em,.horizon h2 em{margin-left:0}
  .laws li{grid-template-columns:42px 1fr;gap:10px}.laws p{font-size:20px}
  .foot{padding-inline:20px;align-items:flex-start;flex-direction:column}.foot time{margin-left:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.state,.absence{animation:none!important}.state--before{opacity:1}.state--after{opacity:0}}