:root{--ink:#0b0c10;--asph:#14161d;--lev:#1c2040;--gold:#d6a62a;--rust:#c2502b;--bone:#ece6d9;--dim:#9a968c;--line:#2a2d38;color-scheme:dark}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--bone);font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
a{color:var(--gold)}img{max-width:100%;display:block}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}.narrow{width:min(720px,100% - 2.5rem)}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink);padding:.5rem 1rem;z-index:99}.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.top{position:sticky;top:0;z-index:20;background:linear-gradient(var(--ink),rgba(11,12,16,.75));backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:1rem;justify-content:space-between;min-height:58px;flex-wrap:wrap}
.wordmark{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.32em;font-size:.95rem}
.mark{width:26px;height:26px;color:var(--bone)}
.coord,.dim{color:var(--dim)}.coord{font:12px ui-monospace,Menlo,monospace;letter-spacing:.12em}
.kicker{font:600 .78rem ui-monospace,Menlo,monospace;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 1rem}
.hero{position:relative;min-height:min(92vh,860px);display:grid;align-items:end;overflow:hidden;isolation:isolate}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;animation:drift 40s ease-in-out infinite alternate}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,12,16,.1),rgba(11,12,16,.55) 55%,var(--ink))}
.hero-copy{padding:18vh 0 4rem}
.provides{font-size:clamp(3.2rem,13vw,9.5rem);line-height:.86;letter-spacing:-.04em;margin:0 0 1.5rem;font-weight:900;text-transform:lowercase}
.provides em{font-style:normal;color:var(--gold)}
.line{font-size:clamp(1.05rem,2.6vw,1.45rem);max-width:36ch;margin:0}
.line strong{color:var(--bone)}.off{text-decoration:line-through;text-decoration-color:var(--rust);text-decoration-thickness:3px}
section{padding:clamp(3rem,8vw,6rem) 0}
.map{margin:0;position:relative;border:1px solid var(--line);background:#111;filter:grayscale(1)}
.map img{width:100%;height:auto}.cam-v img,.grit img{height:100%}
.map figcaption{position:absolute;right:.5rem;bottom:.4rem;font-size:.72rem;color:#bbb;background:rgba(0,0,0,.6);padding:.1rem .4rem}
.map figcaption a{color:#ddd}
.mapsec .map{max-height:80vh;overflow:hidden}.aside{max-width:46ch;color:var(--dim);margin-top:1.25rem}
.tri{display:grid;gap:1rem;grid-template-columns:1fr}
.tri figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--line)}
.tri img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;transition:transform .8s ease}
.tri figure:hover img{transform:scale(1.04)}
.tri figcaption{position:absolute;left:0;bottom:0;padding:.6rem .9rem;font:600 .8rem ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(transparent,rgba(0,0,0,.8));width:100%}
.what p{font-size:clamp(1.05rem,2.2vw,1.3rem)}
.grit{padding:0;height:28vh;overflow:hidden}.grit img{width:100%;height:100%;object-fit:cover;opacity:.7}
.foot{border-top:1px solid var(--line);padding:2.5rem 0 3rem;font-size:.9rem}
.foot .wrap{display:grid;gap:.4rem}
.door{background:var(--lev);border-block:1px solid var(--gold)}
.door-form{display:grid;gap:.6rem;max-width:420px}
input,textarea{font:inherit;color:var(--bone);background:var(--asph);border:1px solid var(--line);padding:.75rem .9rem;border-radius:2px;width:100%}
input:focus,textarea:focus{border-color:var(--gold);outline:none}
button{font:600 .9rem ui-monospace,Menlo,monospace;letter-spacing:.08em;background:var(--gold);color:var(--ink);border:0;padding:.75rem 1.1rem;border-radius:2px;cursor:pointer;min-height:44px}
button:disabled{opacity:.4;cursor:not-allowed}
button.ghost{background:transparent;color:var(--bone);border:1px solid var(--line)}button.small{min-height:36px;padding:.4rem .8rem}
.err{color:#ff8a6a;margin:0}.row{display:flex;gap:.6rem;align-items:center;justify-content:space-between}.wrapit{flex-wrap:wrap}.wrapit input{flex:1 1 200px}
dialog{background:var(--asph);color:var(--bone);border:1px solid var(--gold);padding:1.4rem;width:min(380px,92vw);border-radius:2px}
dialog::backdrop{background:rgba(5,6,9,.85);backdrop-filter:blur(4px)}
dialog input{font-size:1.1rem;letter-spacing:.15em;margin-bottom:.4rem}#km{min-height:1.4em;margin:.2rem 0 .8rem;color:var(--rust);font-size:.85rem}
dialog.shake{animation:shake .35s}
/* inside */
.inside-hero{padding-bottom:1rem}.inside .provides{font-size:clamp(2.6rem,9vw,6rem)}
.me{font-size:.85rem;color:var(--dim)}.online{font:.85rem ui-monospace,monospace}
.dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:#4cd37a;box-shadow:0 0 8px #4cd37a;animation:pulse 2s infinite}
.tag{color:var(--rust);border:1px solid var(--rust);padding:.05rem .4rem;margin-left:.4rem;font-size:.68rem}
.cams{display:grid;gap:1rem;grid-template-columns:1fr}
.cam{margin:0}.cam-v{position:relative;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line);background:#000}
.cam-v img{width:100%;height:100%;object-fit:cover;filter:contrast(1.1) saturate(.8);animation:pan 18s ease-in-out infinite alternate}
.cam-v:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.25) 2px 3px);pointer-events:none}
.rec{position:absolute;top:.5rem;left:.6rem;font:700 .75rem ui-monospace,monospace;color:#ff5a4a;z-index:1;background:rgba(0,0,0,.55);padding:.1rem .4rem}
.ts{position:absolute;bottom:.5rem;right:.6rem;font:.72rem ui-monospace,monospace;z-index:1;background:rgba(0,0,0,.55);padding:.1rem .4rem}
.cam figcaption{font:.75rem ui-monospace,monospace;color:var(--dim);margin-top:.4rem;letter-spacing:.1em}
.pinned{filter:none}.pinned img{filter:grayscale(1)}
.pin{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(214,166,42,.3),0 0 14px var(--gold)}
.pin-e{background:var(--rust);box-shadow:0 0 0 3px rgba(194,80,43,.35),0 0 14px var(--rust)}
.pin span{position:absolute;left:16px;top:-4px;white-space:nowrap;font:600 .7rem ui-monospace,monospace;background:rgba(0,0,0,.8);color:var(--bone);padding:.1rem .35rem;opacity:0;transition:opacity .2s;pointer-events:none}
.pin:hover span,.pin:focus span{opacity:1}
.cards{list-style:none;padding:0;margin:0;display:grid;gap:1rem;grid-template-columns:1fr}
.card{background:var(--asph);border:1px solid var(--line);padding:1.1rem 1.2rem;border-left:3px solid var(--gold)}
.card h3{margin:.2rem 0 .4rem;font-size:1.15rem}.card p{margin:.25rem 0}.meta{font:.75rem ui-monospace,monospace;color:var(--dim);text-transform:uppercase;letter-spacing:.1em}
.st{padding:.05rem .35rem;border:1px solid currentColor;margin-right:.3rem}.st-past{color:#888}.st-recurring{color:#4cd37a}.st-unverified{color:var(--rust)}
.src{font-size:.85rem}.go{margin-top:.6rem;background:transparent;color:var(--gold);border:1px solid var(--gold)}.go.on{background:var(--gold);color:var(--ink)}
.go .n{display:inline-block;min-width:1.6em;margin-left:.4rem;padding:0 .3rem;background:rgba(0,0,0,.25)}
.two{display:grid;gap:2.5rem;grid-template-columns:1fr}
.wall-form{display:grid;gap:.5rem}.wall{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.5rem;max-height:520px;overflow:auto}
.wall li{background:var(--asph);border:1px solid var(--line);padding:.6rem .8rem}.wall li.hid{opacity:.45}.wall .h{color:var(--gold);font:600 .8rem ui-monospace,monospace}.wall .t{color:var(--dim);font-size:.75rem;margin-left:.4rem}
.wall .mod{float:right;display:flex;gap:.3rem}.wall .mod button{min-height:28px;padding:.15rem .5rem;font-size:.7rem}
.invs,.tree{list-style:none;padding:0;display:grid;gap:.4rem;font:.8rem ui-monospace,monospace;word-break:break-all}
.invs li,.tree li{background:var(--asph);border:1px solid var(--line);padding:.5rem .7rem}
.tree li button{min-height:28px;padding:.15rem .5rem;font-size:.7rem;margin-left:.3rem}
.admin{border-top:1px dashed var(--rust)}
code{font-size:.85em;background:var(--asph);padding:.1rem .3rem}
@media (min-width:720px){.tri{grid-template-columns:repeat(3,1fr)}.cams{grid-template-columns:repeat(3,1fr)}.cards{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1.3fr 1fr}}
@media (min-width:1100px){.cards{grid-template-columns:repeat(3,1fr)}}
@keyframes drift{to{transform:scale(1.08) translate(-1.5%,1%)}}
@keyframes pan{to{transform:scale(1.12) translate(2%,-1%)}}
@keyframes pulse{50%{opacity:.4}}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* v4 landing */
.hero picture.hero-img{position:absolute;inset:0;z-index:-2}.hero picture.hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;animation:drift 40s ease-in-out infinite alternate}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(214,166,42,.07) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(rgba(214,166,42,.07) 1px,transparent 1px) 0 0/80px 80px}
.cue{font:.75rem ui-monospace,monospace;letter-spacing:.3em;color:var(--dim);margin-top:2.5rem;text-transform:uppercase;animation:bob 2.4s ease-in-out infinite}
.tick{overflow:hidden;border-block:1px solid var(--line);font:700 clamp(.9rem,2.4vw,1.25rem) ui-monospace,Menlo,monospace;letter-spacing:.2em;white-space:nowrap;padding:.55rem 0;color:var(--dim)}
.tick div{display:inline-block;animation:marq 60s linear infinite}.tick.rev div{animation-direction:reverse;animation-duration:80s}.tick.letters{color:var(--gold)}
.mapgrid{display:grid;gap:2rem;align-items:center}.big{font-size:clamp(1.6rem,4.2vw,2.8rem);line-height:1.15;font-weight:800;letter-spacing:-.02em;margin:0 0 1rem}.big em{font-style:normal;color:var(--gold)}
.chapters{counter-reset:ch}.ch{display:grid;gap:0;padding:0;border-top:1px solid var(--line);min-height:70vh}
.ch-img{position:relative;overflow:hidden;min-height:52vh;background:#000}.ch-img picture,.ch-img img{position:absolute;inset:0;width:100%;height:115%;object-fit:cover}
.ch-copy{padding:clamp(2rem,6vw,5rem) clamp(1.25rem,5vw,4.5rem);display:flex;flex-direction:column;justify-content:center;max-width:640px}
.ch-copy h2{font-size:clamp(2rem,5.5vw,3.8rem);line-height:.98;letter-spacing:-.03em;margin:0 0 1.2rem;font-weight:900}
.ch-copy p:not(.kicker){font-size:clamp(1rem,2vw,1.2rem);color:#d8d2c4;max-width:44ch}.num{color:var(--rust);margin-right:.5rem}
.sign{font-size:clamp(2.4rem,8vw,5rem);font-weight:900;letter-spacing:-.04em;margin-top:3rem;line-height:.9}.sign em{font-style:normal;color:var(--gold)}
.foot a{color:var(--gold)}.home{text-decoration:none;color:inherit}.credits .cards{margin-top:1.5rem}
@media (min-width:900px){.mapgrid{grid-template-columns:1fr 1.15fr}.ch{grid-template-columns:55% 45%;min-height:86vh}.ch.flip .ch-img{order:2}.ch-img{min-height:auto}}
@supports (animation-timeline:view()){
 .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 5% cover 35%}
 .ch-img img{animation:par linear both;animation-timeline:view()}
 .ch-copy>*{animation:rise linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
 .hero-copy{animation:lift linear both;animation-timeline:scroll(root);animation-range:0 90vh}
}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes par{from{transform:translateY(-12%)}to{transform:translateY(0)}}
@keyframes lift{to{opacity:.15;transform:translateY(-12vh)}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes bob{50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}