/* ─────────────────────────────────────────────
   STILL BECOMING — surface layer
   The canvas does the dreaming. This file handles the parts you can touch.
   ───────────────────────────────────────────── */
@font-face { font-family: ArchC; src: url(../fonts/archivo-c.woff2) format('woff2'); font-weight: 100 900; font-display: block; }
@font-face { font-family: ArchN; src: url(../fonts/archivo-n.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: ArchX; src: url(../fonts/archivo-x.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: GMono; src: url(../fonts/geistmono-latin.woff2) format('woff2'); font-weight: 100 900; font-display: block; }
@font-face { font-family: Doto; src: url(../fonts/doto.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: FrauncesI; src: url(../fonts/fraunces-italic-latin.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* device: graphite stock, bone ink, steel hardware, one signal orange, LCD teal */
  --bg: #0C0D0E;
  --panel: #151719;
  --ink: #E9E7E1;
  --ink-dim: rgba(233, 231, 225, .60);
  --ink-faint: rgba(233, 231, 225, .32);
  --ink-ghost: rgba(233, 231, 225, .12);
  --steel: #8C939A;
  --orange: #E65F2B;
  --gold: #F2B84B;
  --teal: #2F8C83;
  --lcd: #63E6CB;
  --lcd-off: rgba(99, 230, 203, .12);
  --g: max(28px, 6.8vw);
  --mono: GMono, "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --head: ArchN, Archivo, "Helvetica Neue", Arial, sans-serif;
  --wide: ArchX, ArchN, Archivo, "Helvetica Neue", Arial, sans-serif;
  --cond: var(--head);
  --norm: ArchN, Archivo, "Helvetica Neue", Arial, sans-serif;
  --dot: Doto, var(--mono);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --chrome-y: 26px;
  color-scheme: dark;
}
@media (max-aspect-ratio: 4/5) { :root { --g: max(20px, 6.4vw); --chrome-y: 18px; } }

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body { margin: 0; background: var(--bg); font-family: var(--mono); overflow-x: hidden; }
::selection { background: var(--orange); color: var(--bg); }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--orange); outline-offset: 4px; }

#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; touch-action: pan-y; }
#spacer { position: relative; z-index: -1; width: 1px; pointer-events: none; }

/* ── the tiny machine voice ───────────────────── */
.lbl, #chrome, #chrome button, #memory, .ct-label, .ct-intent span, #transmit, .ct-note, .ct-foot, #index {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 400;
}
#chrome { position: fixed; inset: 0; z-index: 10; pointer-events: none; color: var(--ink-dim); }
#chrome > * { position: absolute; pointer-events: auto; }
#chrome a { text-decoration: none; }
.c-id { left: var(--g); top: var(--chrome-y); display: flex; gap: 14px; color: var(--ink); }
.c-sub { color: var(--ink-faint); }
.c-state { left: 50%; top: var(--chrome-y); display: flex; gap: 12px; color: var(--ink-faint); pointer-events: none !important; }
#c-code { color: var(--gold); }
.c-actions { right: var(--g); top: calc(var(--chrome-y) - 8px); display: flex; gap: 6px; }
.c-actions button { background: none; border: 0; padding: 8px 6px; cursor: pointer; color: var(--ink-dim); transition: color .2s; }
.c-actions button:hover { color: var(--ink); }
#snd .dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--ink-faint); vertical-align: 1px; }
#snd[aria-pressed="true"] .dot { background: var(--orange); animation: pulse 1.06s steps(1) infinite; }
#snd[aria-pressed="true"] #snd-v { color: var(--ink); }
@keyframes pulse { 50% { opacity: 0; } }
.c-clock { left: var(--g); bottom: var(--chrome-y); color: var(--ink-faint); pointer-events: none !important; }
.c-integrity { right: var(--g); bottom: var(--chrome-y); color: var(--ink-faint); pointer-events: none !important; }
#clock, #integ { margin-left: 8px; }
#integ.low { color: var(--orange); text-shadow: 0 0 8px rgba(230,95,43,.4); }
#rail { right: 14px; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
#rail li { width: 12px; height: 1px; background: var(--ink-ghost); cursor: pointer; position: relative; transition: width .4s var(--ease), background .3s; }
#rail li::after { content: ""; position: absolute; inset: -4px -6px; }
#rail li.on { width: 22px; background: var(--orange); }
#rail li.past { background: var(--ink-faint); }
#whisper { left: var(--g); bottom: calc(var(--chrome-y) + 26px); margin: 0; color: var(--ink); pointer-events: none !important; min-height: 1em; }
#whisper::after { content: ""; display: inline-block; width: 6px; height: 11px; margin-left: 3px; vertical-align: -1px; background: var(--orange); opacity: 0; }
#whisper.on::after { opacity: 1; animation: pulse 1.06s steps(1) infinite; }

/* LCD readouts: lit digits over their own unlit segments */
.lcd { position: relative; isolation: isolate; display: inline-block; font-family: var(--dot); font-weight: 700; font-size: 15px; letter-spacing: .04em; color: var(--lcd); text-shadow: 0 0 8px rgba(99, 230, 203, .35); line-height: 1; vertical-align: -2px; }
.lcd::before { content: attr(data-off); position: absolute; z-index: -1; left: 0; top: 0; color: var(--lcd-off); text-shadow: none; pointer-events: none; }
.lcd > span { position: relative; }
#c-code.lcd { color: var(--orange); text-shadow: 0 0 8px rgba(230, 95, 43, .4); }
#c-code.lcd::before { color: rgba(230, 95, 43, .14); }
/* hardware keys */
.key, .c-actions button { border: 1px solid rgba(233, 231, 225, .2) !important; background: linear-gradient(#1b1d20, #121416) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -2px 0 rgba(0, 0, 0, .55), 0 1px 0 rgba(0, 0, 0, .6); border-radius: 2px; }
.c-actions button { padding: 7px 10px !important; }
.c-actions button:active, .key:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7) !important; }

/* paper state: the far side of the door */
body.paper #chrome { color: rgba(11, 10, 8, .6); }
body.paper .c-id, body.paper #clock, body.paper #integ { color: #0B0A08; }
body.paper .c-sub, body.paper .c-state, body.paper .c-clock, body.paper .c-integrity { color: rgba(11, 10, 8, .45); }
body.paper .c-actions button { color: #E9E7E1; }
body.paper #rail li { background: rgba(11, 10, 8, .2); }
body.paper #rail li.on { background: var(--orange); }
body.lost #chrome { opacity: 0; transition: opacity .05s; }

/* ── memory ───────────────────────────────────── */
#memory { position: fixed; z-index: 5; left: var(--g); top: 27vh; width: calc(37vw - var(--g) - 48px); color: var(--ink-faint); transition: opacity .35s; }
#memory[hidden] { display: block; opacity: 0; pointer-events: none; visibility: hidden; }
#mem-list { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: m; }
#mem-list li { counter-increment: m; }
#mem-list button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; width: 100%; height: min(1.64vh, 15px); line-height: min(1.64vh, 15px); font-size: min(1.12vh, 10px); cursor: pointer; position: relative; color: var(--ink-faint); transition: color .15s; }
#mem-list button::before { content: counter(m, decimal-leading-zero); color: var(--ink-ghost); }
#mem-list button .cat { font-size: .9em; opacity: .7; }
#mem-list button:hover, #mem-list button:focus-visible { color: var(--ink); outline: none; }
#mem-list button.on { color: var(--ink); }
#mem-list button.on::before { color: var(--orange); }
#mem-list button.on::after { content: ""; position: absolute; left: -14px; top: 50%; width: 8px; height: 1px; background: var(--orange); }
.mem-atlas { display: inline-block; color: var(--ink); text-decoration: none; padding: 10px 14px; border: 1px solid rgba(233,231,225,.22); border-radius: 2px; background: linear-gradient(#1b1d20, #121416); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 0 rgba(0,0,0,.55); transition: background .2s, color .2s, border-color .2s; }
.mem-atlas:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.mem-next { display: none; }

@media (max-aspect-ratio: 4/5) {
  #memory { top: auto; bottom: 74px; left: var(--g); right: var(--g); width: auto; display: flex !important; gap: 10px; }
  #memory[hidden] { display: flex !important; }
  #mem-list { display: none; }
  .mem-atlas, .mem-next { flex: 1; text-align: center; padding: 13px 10px; }
  .mem-next { display: block; background: none; border: 1px solid var(--ink-faint); color: var(--ink); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
}

/* ── contact: the caret is yours now ──────────── */
#contact { position: fixed; z-index: 6; left: var(--g); right: var(--g); top: 58vh; bottom: 0; max-width: 1100px; transition: opacity .6s var(--ease), transform .6s var(--ease); }
#contact[hidden] { display: block; opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(12px); }
.ct-label { display: block; color: var(--ink-faint); margin-bottom: 10px; padding: 0; }
.ct-field { position: relative; border-bottom: 1px solid var(--ink-faint); margin-bottom: 22px; }
.ct-field:focus-within { border-bottom-color: var(--orange); }
#msg { display: block; width: 100%; resize: none; overflow: hidden; background: transparent; border: 0; outline: none; padding: 0 0 12px; font-family: var(--head); font-weight: 800; font-size: clamp(30px, 6.2vh, 68px); line-height: 1.02; letter-spacing: -.035em; color: var(--ink); caret-color: var(--orange); min-height: 1.1em; }
.ct-ghost { position: absolute; left: 0; top: 22px; pointer-events: none; font-family: var(--head); font-weight: 800; font-size: clamp(30px, 6.2vh, 68px); line-height: 1.02; letter-spacing: -.035em; color: var(--ink-faint); white-space: nowrap; }
.ct-caret { display: inline-block; width: .085em; height: .74em; margin-left: .035em; background: var(--orange); vertical-align: -.02em; animation: pulse 1.06s steps(1) infinite; }
.ct-field.typing .ct-ghost, .ct-field:focus-within .ct-ghost { display: none; }
.ct-intent { border: 0; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ct-intent legend { float: left; width: 100%; }
.ct-intent label { position: relative; cursor: pointer; }
.ct-intent input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ct-intent span { display: inline-block; padding: 10px 14px; border: 1px solid rgba(233,231,225,.2); border-radius: 2px; background: linear-gradient(#1b1d20, #121416); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 0 rgba(0,0,0,.55); color: var(--ink-dim); transition: color .2s, background .2s; }
.ct-intent label:hover span { border-color: var(--ink-faint); color: var(--ink); }
.ct-intent input:checked + span { background: var(--orange); color: #0C0D0E; border-color: var(--orange); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 0 rgba(0,0,0,.3), 0 0 18px rgba(230,95,43,.25); }
.ct-intent input:focus-visible + span { outline: 1px solid var(--ink); outline-offset: 3px; }
.ct-send { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
#transmit { background: var(--ink); color: #0C0D0E; border: 0; border-radius: 2px; padding: 13px 20px; cursor: pointer; transition: background .2s; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
#transmit:hover { background: var(--orange); }
.ct-note { color: var(--ink-faint); text-transform: none; letter-spacing: .02em; }
.ct-foot { position: absolute; left: 0; right: 0; bottom: calc(var(--chrome-y) + 34px); display: flex; gap: 22px; flex-wrap: wrap; color: var(--ink-dim); }
.ct-foot a { text-decoration: none; border-bottom: 1px solid var(--ink-ghost); padding-bottom: 2px; }
.ct-foot a:hover { color: var(--ink); border-color: var(--orange); }
.ct-col { color: var(--ink-faint); margin-left: auto; text-transform: none; letter-spacing: .02em; }
@media (max-width: 900px) { .c-state { display: none; } }
@media (max-width: 520px) { .c-sub { display: none; } }
@media (max-aspect-ratio: 4/5) {
  #contact { top: 50vh; }
  #msg, .ct-ghost { font-size: clamp(26px, 8.4vw, 60px); }
  .ct-col { margin-left: 0; }
  .ct-foot { gap: 14px; bottom: calc(var(--chrome-y) + 30px); }
  .ct-note { display: block; }
}
@media (max-height: 640px) and (min-aspect-ratio: 4/5) { .ct-foot { display: none; } }

/* ── index ───────────────────────────────────── */
#index { position: fixed; inset: 0; z-index: 20; background: rgba(12, 13, 14, .97); padding: calc(var(--chrome-y) + 60px) var(--g) 40px; overflow: auto; color: var(--ink-dim); }
#index[hidden] { display: none; }
.ix-head { position: absolute; left: var(--g); right: var(--g); top: var(--chrome-y); display: flex; justify-content: space-between; align-items: center; color: var(--ink-faint); }
#idx-close { background: none; border: 0; cursor: pointer; color: var(--ink-dim); padding: 8px 0; }
#idx-close kbd { font: inherit; border: 1px solid var(--ink-ghost); padding: 2px 5px; margin-left: 6px; }
#ix-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 6vw; }
#ix-list button { all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: 18px; width: 100%; padding: .55vh 0; cursor: pointer; break-inside: avoid; }
#ix-list .ix-c { font-family: var(--mono); font-size: 10.5px; color: var(--gold); min-width: 22px; }
#ix-list .ix-t { font-family: var(--head); font-weight: 800; font-size: clamp(22px, 4.3vh, 46px); line-height: 1; color: var(--ink); letter-spacing: -.035em; transition: color .15s, transform .3s var(--ease); }
#ix-list button:hover .ix-t, #ix-list button:focus-visible .ix-t { color: var(--orange); transform: translateX(6px); }
#ix-list button.on .ix-c { color: var(--orange); }
.ix-foot { margin-top: 5vh; display: flex; gap: 24px; flex-wrap: wrap; }
.ix-foot a { text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--ink-faint); padding-bottom: 2px; }
@media (max-aspect-ratio: 4/5) { #ix-list { columns: 1; } }

/* ── the record (for screen readers; the page itself when WebGL is absent) ── */
#record { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

html.nogl #gl, html.nogl #spacer, html.nogl #memory, html.nogl #rail, html.nogl .c-state, html.nogl .c-integrity, html.nogl #snd { display: none !important; }
html.nogl #record { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; padding: 18vh var(--g) 20vh; max-width: 1100px; }
html.nogl #record section { min-height: 70vh; padding: 10vh 0; border-top: 1px solid var(--ink-ghost); }
html.nogl #record .r-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
html.nogl #record h1, html.nogl #record h2 { font-family: var(--head); font-weight: 800; font-size: clamp(44px, 10vw, 150px); line-height: .92; letter-spacing: -.04em; margin: .2em 0 .4em; }
html.nogl #record h2 { font-size: clamp(36px, 7vw, 110px); }
html.nogl #record p, html.nogl #record li, html.nogl #record dd, html.nogl #record dt { font-family: var(--norm); font-size: 18px; line-height: 1.5; color: var(--ink-dim); max-width: 56ch; }
html.nogl #record em { font-family: FrauncesI, Georgia, serif; font-style: normal; font-size: 1.6em; color: var(--ink); }
html.nogl #record ul, html.nogl #record ol { padding-left: 1.2em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* The message and delivery instructions must stay reachable on small screens. */
#contact { overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 32px 0; }
.ct-foot { position: static; margin-top: 24px; padding-bottom: 24px; }
.ct-note { display: block; max-width: 58ch; line-height: 1.6; }
#msg { font-size: clamp(24px, 4vh, 42px); max-height: 180px; overflow-y: auto; }
html.nogl #contact { display: block; position: relative; top: auto !important; left: auto; right: auto; bottom: auto; margin: 0 var(--g); padding-bottom: 48px; visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
html.nogl .ct-ghost { display: none; }

.ct-note { color: var(--ink-dim); }
#transmit:disabled { opacity: .5; cursor: not-allowed; }

.ct-ghost { font-size: clamp(24px, 4vh, 42px); }

#copy-contact { font: 12px var(--mono); color: var(--ink); background: transparent; border: 1px solid var(--ink-faint); border-radius: 2px; padding: 12px 16px; cursor: pointer; }
#copy-contact:disabled { opacity: .5; cursor: not-allowed; }
#msg:focus-visible, #copy-contact:focus-visible, #transmit:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }