:root {
  --ink: #05080b;
  --deep: #07131a;
  --panel: rgba(9, 24, 30, 0.64);
  --line: rgba(164, 205, 201, 0.15);
  --mist: #aab9b8;
  --paper: #e6e4d8;
  --green: #9bd8b1;
  --blue: #78bfff;
  --warm: #f0c889;
  --serif: "Noto Serif SC", serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--paper); background: var(--ink); font-family: var(--serif); overflow-x: hidden; }
body.modal-open { overflow: hidden; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

#memory-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .65; pointer-events: none; }
.noise { position: fixed; inset: 0; z-index: 20; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); mix-blend-mode: screen; }
.cursor-glow { position: fixed; width: 420px; height: 420px; margin: -210px; z-index: 0; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(69,143,166,.09), transparent 68%); opacity: 0; transition: opacity .4s; }
body:hover .cursor-glow { opacity: 1; }
main, .site-header { position: relative; z-index: 1; }

.site-header { position: fixed; top: 0; left: 0; right: 0; height: 82px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 3.5vw; border-bottom: 1px solid transparent; z-index: 15; transition: background .5s, border-color .5s, height .5s; }
.site-header.scrolled { height: 66px; background: rgba(5, 9, 12, .78); border-color: var(--line); backdrop-filter: blur(18px); }
.brand { justify-self: start; display: flex; align-items: center; gap: 11px; font: 500 10px/1 var(--mono); letter-spacing: .18em; }
.brand-signal { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 13px var(--green); animation: pulse 2.4s infinite; }
nav { display: flex; gap: 36px; }
nav a { position: relative; font-size: 12px; color: var(--mist); letter-spacing: .15em; transition: color .3s; }
nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -8px; height: 1px; background: var(--green); transition: left .3s, right .3s; }
nav a:hover { color: var(--paper); }
nav a:hover::after { left: 0; right: 0; }
.sound-toggle { justify-self: end; border: 0; background: none; color: var(--mist); display: flex; align-items: center; gap: 9px; padding: 8px 0; cursor: pointer; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.sound-bars { height: 12px; display: flex; align-items: center; gap: 2px; }
.sound-bars i { width: 1px; height: 4px; background: var(--green); transition: height .3s; }
.sound-toggle[aria-pressed="true"] .sound-bars i { animation: soundbar .8s ease-in-out infinite alternate; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-delay: -.3s; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-delay: -.55s; }

.hero { min-height: 100svh; padding: 15vh 8vw 8vh; display: flex; align-items: center; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 80vw; height: 80vw; border-radius: 50%; left: 52%; top: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(18,57,69,.25), transparent 65%); }
.hero-copy { width: min(680px, 58vw); position: relative; z-index: 2; }
.eyebrow { margin: 0 0 24px; color: var(--green); font: 400 10px/1.4 var(--mono); letter-spacing: .28em; }
h1 { margin: 0; font-size: clamp(74px, 10.8vw, 166px); line-height: .83; font-weight: 300; letter-spacing: -.065em; }
h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(230,228,216,.72); padding-left: .48em; }
.hero-intro { margin: 46px 0 0 8px; color: var(--mist); font-size: clamp(14px, 1.15vw, 18px); line-height: 2.05; letter-spacing: .08em; }
.enter-link { margin: 40px 0 0 8px; display: inline-flex; align-items: center; gap: 18px; color: var(--paper); font-size: 13px; letter-spacing: .14em; }
.enter-link svg { width: 42px; height: 42px; fill: none; stroke: var(--green); stroke-width: 1; transition: transform .35s, background .35s; border-radius: 50%; }
.enter-link:hover svg { transform: translateX(6px); background: rgba(155,216,177,.08); }
.hero-coordinate { position: absolute; left: 3.5vw; top: 50%; transform: translate(-50%,-50%) rotate(-90deg); color: rgba(170,185,184,.45); font-size: 8px; }
.signal-orbit { position: absolute; width: clamp(340px, 42vw, 650px); aspect-ratio: 1; right: -1vw; top: 50%; transform: translateY(-50%); }
.orbit { position: absolute; border: 1px solid rgba(119,191,255,.16); border-radius: 50%; inset: 0; animation: rotate 38s linear infinite; }
.orbit::before, .orbit::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 16px var(--blue); }
.orbit::before { top: 18%; left: 15%; }.orbit::after { bottom: 25%; right: 6%; width: 2px; height: 2px; }
.orbit-b { inset: 18%; border-style: dashed; animation-direction: reverse; animation-duration: 24s; }
.archive-core { position: absolute; inset: 36%; border: 1px solid rgba(155,216,177,.32); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(155,216,177,.13), rgba(5,8,11,.4)); box-shadow: 0 0 80px rgba(88,175,166,.12), inset 0 0 35px rgba(88,175,166,.08); color: var(--green); font: 300 clamp(16px,2vw,30px) var(--mono); letter-spacing: .12em; }
.archive-core::before, .archive-core::after { content:""; position:absolute; border:1px solid rgba(155,216,177,.18); border-radius:50%; inset:-16%; animation: ripple 4s ease-out infinite; }
.archive-core::after { animation-delay: -2s; }
.core-cross::before, .core-cross::after { content:""; position:absolute; background:rgba(155,216,177,.22); left:50%; top:-20%; bottom:-20%; width:1px; }
.core-cross::after { top:50%; left:-20%; right:-20%; width:auto; height:1px; }
.floating-note { position: absolute; color: rgba(170,185,184,.47); font: 8px/1.7 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.note-one { left: 2%; top: 27%; }.note-two { right: 8%; bottom: 21%; }
.scroll-cue { position: absolute; right: 3.5vw; bottom: 6vh; color: rgba(170,185,184,.48); font-size: 8px; writing-mode: vertical-rl; display: flex; align-items:center; gap:12px; }
.scroll-cue span { display:block; width:1px; height:52px; background:linear-gradient(var(--green),transparent); animation: scrollLine 2.2s infinite; }
.reveal { opacity: 0; transform: translateY(22px); animation: intro 1.1s cubic-bezier(.22,.7,.1,1) forwards; }
.hero h1 { animation-delay: .15s; }.hero-intro { animation-delay: .35s; }.enter-link { animation-delay: .55s; }

.section-shell { width: min(1180px, 86vw); margin: 0 auto; position: relative; }
.section-index { font-size: 9px; color: var(--green); margin-bottom: 42px; }
.prologue { padding: 18vh 0 24vh; }
.prologue-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap:10vw; }
.prologue-lead { margin:0; font-size:clamp(31px,4.3vw,64px); line-height:1.55; font-weight:300; letter-spacing:-.03em; }
.prologue-body { padding-top: 14px; color:var(--mist); font-size:15px; line-height:2.2; }
.prologue-body p { margin:0 0 28px; }
.prologue-body .quiet-line { color:var(--warm); border-left:1px solid rgba(240,200,137,.45); padding-left:24px; margin-top:50px; }

.ruins { padding: 10vh 0 20vh; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:13vh; }
.section-heading .section-index { margin-bottom:22px; }
h2 { margin:0; font-size:clamp(48px,6vw,88px); font-weight:300; letter-spacing:-.06em; line-height:1.12; }
.section-note { color:var(--mist); font-size:12px; line-height:2; letter-spacing:.08em; margin:0 0 6px; }
.section-note .mono { color:rgba(155,216,177,.54); font-size:8px; }
.ruin-list { display:flex; flex-direction:column; gap:22vh; }
.ruin-card { display:grid; grid-template-columns: 58% 1fr; grid-template-rows:auto 1fr; column-gap:7vw; align-items:center; position:relative; }
.ruin-card.reverse { grid-template-columns: 1fr 58%; }
.ruin-card.reverse .ruin-visual { grid-column:2; }.ruin-card.reverse .ruin-copy { grid-column:1; grid-row:2; }.ruin-card.reverse .ruin-meta { grid-column:1/-1; }
.ruin-meta { grid-column:1/-1; display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:32px; color:rgba(170,185,184,.5); font-size:8px; }
.ruin-visual { height:400px; border:1px solid rgba(150,190,190,.18); position:relative; overflow:hidden; background:rgba(9,19,24,.67); box-shadow: 0 30px 100px rgba(0,0,0,.34); transform:perspective(900px) rotateY(2deg); transition:transform .6s, border-color .6s; }
.reverse .ruin-visual { transform:perspective(900px) rotateY(-2deg); }
.ruin-card:hover .ruin-visual { transform:perspective(900px) rotateY(0) translateY(-6px); border-color:rgba(155,216,177,.38); }
.ruin-visual::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 4px); }
.ruin-copy { padding-right:2vw; }
.ruin-type { color:var(--green); font-size:8px; margin:0 0 25px; }
.ruin-copy h3 { font-size:clamp(28px,3vw,45px); line-height:1.3; font-weight:400; margin:0 0 22px; letter-spacing:-.04em; }
.ruin-copy > p:not(.ruin-type) { color:var(--mist); font-size:14px; line-height:2; margin:0 0 30px; }
.text-link { border:0; border-bottom:1px solid rgba(155,216,177,.4); background:none; color:var(--paper); padding:0 0 8px; cursor:pointer; font-size:11px; letter-spacing:.12em; transition:color .3s, border-color .3s; }
.text-link span { color:var(--green); margin-left:9px; }.text-link:hover { color:var(--green); border-color:var(--green); }

.old-titlebar { height:30px; border-bottom:1px solid rgba(155,216,177,.2); display:flex; align-items:center; padding:0 10px; gap:5px; color:#72998c; font:8px var(--mono); }
.old-titlebar i { width:6px; height:6px; border:1px solid #547268; border-radius:50%; }.old-titlebar span { margin-left:auto; }
.guestbook-window { padding:54px 12% 10%; background:radial-gradient(circle at 75% 20%,rgba(78,138,127,.12),transparent 32%),#081116; }
.guestbook-window .old-titlebar { position:absolute; left:0;right:0;top:0; }
.guest-entry { border-bottom:1px dotted rgba(155,216,177,.25); padding:25px 0; display:grid; grid-template-columns:110px 1fr; font-size:12px; color:#a7c5bc; }
.guest-entry b { font:10px var(--mono); color:var(--green); }.ghost { opacity:.5; }.ghost-more { opacity:.22; }
.forum-window { padding:54px 8% 8%; background:#071014; font-family:var(--mono); }
.forum-head { position:absolute; top:0;left:0;right:0;height:42px;display:flex;justify-content:space-between;align-items:center;padding:0 18px;background:#93c4a8;color:#071014;font-size:10px; }
.forum-row { display:grid;grid-template-columns:45px 1fr 25px;gap:12px;padding:19px 0;border-bottom:1px solid rgba(147,196,168,.13);font-size:10px;color:#729287; }
.forum-row i { font-style:normal;color:#547368 }.forum-row b { color:#638679 }.forum-row.hot span { color:#b5d5c8; }
.forum-cursor { position:absolute;left:8%;bottom:30px;color:var(--green);animation:blink 1s steps(1) infinite; }
.blog-window { padding:68px 12% 10% 27%; background:linear-gradient(90deg,rgba(17,51,59,.6),rgba(9,21,25,.92)),#0c191d; color:#aebdb4; }
.blog-date { position:absolute;left:8%;top:72px;color:var(--warm);font-size:10px;line-height:1.8; }
.blog-window p { font-size:13px;line-height:2.2;margin:0 0 13px; }.blog-window .blog-sign { color:#708784;text-align:right;font-size:10px; }
.blog-comment { margin-top:40px;padding-top:15px;border-top:1px solid var(--line);color:#70938b;font-size:10px; }
.chat-window { padding:70px 11%; background:radial-gradient(circle at 50% 40%,rgba(43,93,102,.17),transparent 50%),#070e12;font:11px/2 var(--mono); }
.chat-status { position:absolute;top:0;left:0;right:0;height:42px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 18px;color:#668078;font-size:8px; }
.chat-status span { width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);margin-right:7px; }
.chat-line { margin-bottom:18px;color:#a3bcb4; }.chat-line b { color:#75a4ad;font-weight:400; }.chat-line.dim { opacity:.58; }
.typing { display:flex;gap:4px;margin-top:34px; }.typing i { width:3px;height:3px;border-radius:50%;background:#73958c;animation:typing 1.3s infinite; }.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}

.constellation { padding: 14vh 0 24vh; overflow:clip; }
.constellation::before { content:"";position:absolute;inset:18vh -7vw 6vh;pointer-events:none;background-image:linear-gradient(rgba(155,216,177,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(155,216,177,.035) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(transparent,#000 15%,#000 82%,transparent); }
.constellation-heading { margin-bottom:7vh; }
.archive-toolbar { position:relative;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin-bottom:45px; }
.archive-filters { display:flex;gap:8px;flex-wrap:wrap; }
.archive-filter { border:1px solid transparent;background:transparent;color:rgba(170,185,184,.52);padding:8px 12px;cursor:pointer;font-size:10px;letter-spacing:.12em;transition:color .3s,border-color .3s,background .3s; }
.archive-filter:hover { color:var(--paper); }
.archive-filter.active { color:var(--green);border-color:rgba(155,216,177,.25);background:rgba(155,216,177,.05); }
.archive-total { margin:0;color:rgba(170,185,184,.35);font-size:7px;white-space:nowrap; }
.archive-grid { position:relative;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line); }
.archive-era { grid-column:1/-1;min-height:118px;display:grid;grid-template-columns:150px 240px 1fr;align-items:center;gap:28px;padding:0 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(155,216,177,.07),rgba(7,17,21,.15)); }
.archive-era > span { color:var(--green);font-size:8px; }.archive-era > strong { font-size:25px;font-weight:300;letter-spacing:.08em; }.archive-era > small { color:rgba(170,185,184,.52);font-size:11px;line-height:1.8;letter-spacing:.08em; }
.archive-grid.filtered .archive-era { display:none; }
.archive-node { min-height:300px;position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:29px 28px 25px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(7,17,21,.3);color:var(--paper);cursor:pointer;overflow:hidden;transition:background .5s,transform .5s,opacity .4s; }
.archive-node::before { content:"";position:absolute;width:170px;height:170px;border:1px solid rgba(155,216,177,.07);border-radius:50%;right:-85px;top:-85px;transition:transform .6s,border-color .6s; }
.archive-node::after { content:"↗";position:absolute;right:24px;bottom:22px;color:rgba(155,216,177,.35);font:12px var(--mono);transition:color .3s,transform .3s; }
.archive-node:hover { z-index:2;background:rgba(17,40,43,.72);transform:translateY(-4px); }
.archive-node:hover::before { transform:scale(1.35);border-color:rgba(155,216,177,.2); }.archive-node:hover::after { color:var(--green);transform:translate(3px,-3px); }
.archive-node.featured { background:linear-gradient(135deg,rgba(57,96,86,.18),rgba(7,17,21,.45)); }
.archive-node.is-hidden { display:none; }
.node-signal { width:6px;height:6px;border-radius:50%;background:#6b8880;box-shadow:0 0 10px #6b8880;margin-bottom:30px; }
.node-signal.warm { background:var(--warm);box-shadow:0 0 12px rgba(240,200,137,.7); }.node-signal.paused { background:var(--blue);box-shadow:0 0 12px rgba(120,191,255,.75);animation:pulse 2.4s infinite; }
.node-no { position:absolute;right:24px;top:27px;color:rgba(170,185,184,.28);font-size:7px; }
.node-years { color:var(--green);font-size:8px;margin-bottom:12px; }
.archive-node strong { font-size:25px;font-weight:400;line-height:1.35;letter-spacing:-.03em;margin-bottom:18px; }
.node-memory { color:#9fadaa;font-size:12px;line-height:1.85;max-width:90%; }
.node-kind { margin-top:auto;padding-top:25px;color:rgba(170,185,184,.35);font-size:7px; }
.archive-disclaimer { color:rgba(170,185,184,.35);font-size:7px;line-height:1.8;margin:20px 0 0; }

.fragments { min-height:100vh; display:grid; place-items:center; text-align:center; position:relative; overflow:hidden; background:radial-gradient(circle at 50% 52%,rgba(23,73,78,.29),transparent 23%),linear-gradient(180deg,transparent,#061015 50%,transparent); }
.fragments::before { content:"";position:absolute;width:780px;height:780px;border:1px solid rgba(155,216,177,.07);border-radius:50%;box-shadow:0 0 0 100px rgba(155,216,177,.018),0 0 0 220px rgba(155,216,177,.012); }
.fragment-inner { padding:18vh 0; display:flex;flex-direction:column;align-items:center; }
.fragment-inner .section-index { margin-bottom:28px; }
.fragment-inner h2 em { color:var(--green);font-style:normal; }
.fragment-intro { width:min(510px,80vw);color:var(--mist);font-size:13px;line-height:2;margin:30px auto 50px; }
.discover-button { width:190px;height:190px;border-radius:50%;border:0;background:transparent;position:relative;display:grid;place-items:center;color:var(--paper);cursor:pointer; }
.discover-ring { position:absolute;inset:0;border:1px solid rgba(155,216,177,.35);border-radius:50%;transition:transform .6s,border-color .6s; }
.discover-ring::before { content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 17px var(--green);left:22px;top:25px; }
.discover-core { width:132px;height:132px;border-radius:50%;display:grid;place-content:center;gap:9px;background:rgba(9,26,29,.76);box-shadow:0 0 50px rgba(82,164,152,.14);transition:background .4s; }
.discover-core small { font-size:7px;color:var(--green); }.discover-core strong { font-size:16px;font-weight:400;letter-spacing:.15em; }
.discover-button:hover .discover-ring { transform:rotate(110deg) scale(1.08);border-color:var(--green); }.discover-button:hover .discover-core { background:rgba(21,56,56,.86); }
.discover-button.loading .discover-ring { animation:fastspin .9s linear infinite; }.discover-button.loading .discover-core { animation:signalFade .45s alternate infinite; }
.discovery-count { color:rgba(170,185,184,.38);font-size:7px;margin-top:28px; }

.memorial { padding:22vh 0; }
.memorial-heading { align-items:flex-start; }
.memorial-grid { display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:start; }
.memory-form { border-top:1px solid rgba(155,216,177,.36);padding-top:28px; }
.memory-form > label { display:block;color:var(--mist);font-size:12px;letter-spacing:.09em;margin-bottom:25px; }
.textarea-wrap { position:relative; }
textarea { width:100%;height:150px;resize:none;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--paper);font-size:21px;line-height:1.8;padding:5px 5px 35px;outline:none;border-radius:0; }
textarea::placeholder,input::placeholder { color:rgba(170,185,184,.25); }
textarea:focus { border-color:var(--green); }
.char-count { position:absolute;right:5px;bottom:12px;color:rgba(170,185,184,.4);font-size:8px; }.char-count b{font-weight:400;}
.form-bottom { display:flex;justify-content:space-between;align-items:end;margin-top:22px;gap:20px; }
.name-field { flex:1; }.name-field input { width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--paper);outline:none;padding:10px 2px;font-size:11px;letter-spacing:.12em;border-radius:0; }
.name-field input:focus { border-color:var(--green); }
.submit-memory { border:1px solid rgba(155,216,177,.35);background:rgba(155,216,177,.04);color:var(--paper);height:46px;padding:0 20px;cursor:pointer;font-size:11px;letter-spacing:.1em;transition:background .3s,color .3s; }
.submit-memory span { margin-left:15px;color:var(--green); }.submit-memory:hover { background:var(--green);color:var(--ink); }.submit-memory:hover span { color:var(--ink); }
.form-hint { margin-top:18px;color:rgba(170,185,184,.3);font-size:7px; }
.memory-stream { border-top:1px solid var(--line);max-height:490px;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(155,216,177,.2) transparent; }
.memory-note { padding:28px 6px;border-bottom:1px solid var(--line);animation:noteIn .7s ease both; }
.memory-note p { margin:0 0 17px;font-size:14px;line-height:1.9;color:#bec7c2; }.memory-note span { color:rgba(155,216,177,.52);font-size:7px; }

.epilogue { min-height:95vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding:15vh 7vw 30px;overflow:hidden; }
.epilogue::before { content:"";position:absolute;width:1px;height:25vh;top:0;background:linear-gradient(transparent,var(--green));opacity:.35; }
.epilogue > p { color:rgba(155,216,177,.54);font-size:8px;margin-bottom:45px; }
.epilogue h2 { font-size:clamp(37px,5vw,75px);line-height:1.45; }
.last-signal { display:flex;gap:8px;margin-top:50px; }.last-signal span { width:3px;height:3px;border-radius:50%;background:var(--green);animation:typing 2s infinite; }.last-signal span:nth-child(2){animation-delay:.3s}.last-signal span:nth-child(3){animation-delay:.6s}
footer { position:absolute;left:4vw;right:4vw;bottom:28px;display:flex;justify-content:space-between;padding-top:18px;border-top:1px solid var(--line);font:7px var(--mono);letter-spacing:.13em;color:rgba(170,185,184,.32); }

.scroll-reveal { opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.7,.15,1),transform 1s cubic-bezier(.2,.7,.15,1); }
.scroll-reveal.visible { opacity:1;transform:none; }
.fragment-modal[hidden] { display:none; }
.fragment-modal { position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px; }
.modal-backdrop { position:absolute;inset:0;background:rgba(2,6,8,.84);backdrop-filter:blur(12px);animation:fadeIn .4s; }
.modal-card { position:relative;width:min(520px,92vw);max-height:90vh;overflow:auto;background:#0a1519;border:1px solid rgba(155,216,177,.28);padding:45px 50px 40px;box-shadow:0 40px 120px #000;animation:modalIn .6s cubic-bezier(.2,.8,.2,1); }
.modal-card::before { content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.018) 4px); }
.modal-close { position:absolute;right:18px;top:14px;border:0;background:none;color:#80928f;font:300 24px var(--mono);cursor:pointer; }
.modal-status { font-size:7px;color:var(--green);margin-bottom:25px; }.modal-status span { display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);margin-right:8px; }
.modal-artifact { height:170px;margin-bottom:30px;border:1px solid var(--line);display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(circle,rgba(68,126,128,.17),#071013 70%); }
.artifact-symbol { font:300 52px var(--mono);color:rgba(155,216,177,.8);text-shadow:0 0 24px rgba(155,216,177,.4);animation:artifactFlicker 3s infinite; }
.artifact-lines { position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 4px,rgba(155,216,177,.04) 5px); }
.modal-date { color:rgba(155,216,177,.48);font-size:7px;margin:0 0 16px; }.modal-card h3 { font-weight:400;font-size:28px;line-height:1.4;margin:0 0 17px; }
.modal-story { color:var(--mist);font-size:13px;line-height:2;margin:0 0 28px; }.modal-foot { border-top:1px solid var(--line);padding-top:16px;color:rgba(170,185,184,.35);font-size:7px; }.modal-foot span { color:var(--warm); }
.modal-source { display:inline-block;color:var(--green);font-size:7px;margin:-9px 0 24px;border-bottom:1px solid rgba(155,216,177,.3);padding-bottom:5px; }.modal-source[hidden] { display:none; }
.toast { position:fixed;left:50%;bottom:35px;z-index:120;transform:translate(-50%,30px);opacity:0;background:#b7ddc3;color:#07100d;padding:12px 22px;font-size:11px;letter-spacing:.12em;pointer-events:none;transition:.45s; }.toast.show { opacity:1;transform:translate(-50%,0); }

@keyframes intro { to { opacity:1;transform:none; } }
@keyframes pulse { 50%{opacity:.35;box-shadow:0 0 3px var(--green)} }
@keyframes rotate { to{transform:rotate(360deg)} }
@keyframes ripple { 0%{transform:scale(.8);opacity:0}35%{opacity:1}100%{transform:scale(1.35);opacity:0} }
@keyframes scrollLine { 0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom} }
@keyframes soundbar { to{height:12px} }
@keyframes blink { 50%{opacity:0} }
@keyframes typing { 0%,100%{opacity:.2}50%{opacity:1;box-shadow:0 0 8px var(--green)} }
@keyframes fastspin { to{transform:rotate(360deg)} }
@keyframes signalFade { to{opacity:.38} }
@keyframes noteIn { from{opacity:0;transform:translateY(-12px)} }
@keyframes fadeIn { from{opacity:0} }
@keyframes modalIn { from{opacity:0;transform:scale(.94) translateY(20px)} }
@keyframes artifactFlicker { 0%,92%,100%{opacity:1}93%{opacity:.25}95%{opacity:.8}97%{opacity:.35} }

@media (max-width: 850px) {
  .site-header { grid-template-columns:1fr auto;padding:0 22px;height:70px; }.site-header nav{display:none}.sound-label{display:none}
  .hero { padding:19vh 7vw 10vh;align-items:flex-start; }.hero-copy{width:100%;}.hero-coordinate{display:none}.signal-orbit{width:75vw;right:-29vw;top:67%;opacity:.65}.hero-intro{margin-top:35px}.scroll-cue{display:none}
  h1{font-size:clamp(69px,21vw,120px)}h1 em{padding-left:.15em}
  .section-shell{width:86vw}.prologue{padding:15vh 0 18vh}.prologue-grid{grid-template-columns:1fr;gap:55px}.prologue-lead{font-size:36px}
  .section-heading{display:block;margin-bottom:10vh}.section-note{margin-top:30px}
  .ruin-list{gap:14vh}.ruin-card,.ruin-card.reverse{display:flex;flex-direction:column;align-items:stretch}.ruin-card.reverse .ruin-visual,.ruin-card.reverse .ruin-copy{order:initial}.ruin-meta{order:0}.ruin-visual,.ruin-card.reverse .ruin-visual{order:1;height:290px;transform:none}.ruin-copy,.ruin-card.reverse .ruin-copy{order:2;padding:35px 0 0}.guest-entry{grid-template-columns:80px 1fr}.blog-window{padding-left:30%}
  .constellation{padding:10vh 0 18vh}.archive-toolbar{align-items:flex-start;gap:20px}.archive-filters{gap:3px}.archive-filter{padding:7px 8px;font-size:9px}.archive-total{display:none}.archive-grid{grid-template-columns:1fr 1fr}.archive-node{min-height:285px;padding:24px 20px}.node-no{right:18px;top:23px}.archive-node strong{font-size:21px}.node-memory{font-size:11px;max-width:100%}
  .archive-era{min-height:105px;grid-template-columns:110px 165px 1fr;padding:0 20px;gap:16px}.archive-era>strong{font-size:20px}.archive-era>small{font-size:10px}
  .fragments::before{width:120vw;height:120vw}.memorial{padding:17vh 0}.memorial-grid{grid-template-columns:1fr;gap:80px}.memorial-heading{margin-bottom:70px}.modal-card{padding:42px 28px 34px}
  footer{gap:15px;line-height:1.6}footer span:last-child{text-align:right}
}

@media (max-width: 480px) {
  .hero{padding-left:6vw;padding-right:6vw}.hero-intro{font-size:13px}.signal-orbit{top:72%}.ruin-visual{height:250px}.guestbook-window{padding-left:8%;padding-right:8%}.forum-row{grid-template-columns:38px 1fr 18px}.blog-window{padding-left:31%;padding-right:7%}.chat-window{padding-left:7%;padding-right:7%}
  .archive-grid{grid-template-columns:1fr}.archive-node{min-height:250px}.archive-toolbar{padding:13px 0}.archive-filters{gap:2px}.archive-filter{font-size:8px;padding:7px 6px}
  .archive-era{min-height:145px;display:flex;flex-wrap:wrap;align-content:center;gap:8px 14px}.archive-era>strong{font-size:20px}.archive-era>small{flex-basis:100%}
  .form-bottom{align-items:stretch;flex-direction:column}.name-field,.submit-memory{width:100%}.submit-memory{margin-top:8px}.epilogue h2{font-size:34px}.epilogue footer{font-size:6px}
}

@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.scroll-reveal{opacity:1;transform:none}#memory-field,.cursor-glow{display:none}
}