/* LostCrawl — visual system. Dark, spatial, modern mythic.
   Every class name here matches exactly what app.js outputs.
   Glass works because the dark base gives it material to blur against. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap');

:root {
  --base:        #08090c;
  --base-2:      #0d0f14;
  --base-3:      #161a21;
  --surface:     rgba(22,26,33,0.55);
  --surface-hi:  rgba(30,36,45,0.68);
  --text:        #e6ebf2;
  --text-2:      #99a3b3;
  --text-3:      #5c6675;
  --line:        rgba(190,210,235,0.09);
  --line-hi:     rgba(190,210,235,0.18);
  --accent:      #E8E7E3;
  --accent-fg:   #17140f;
  --accent-tint: rgba(232,231,227,0.18);
  --accent-mid:  rgba(232,231,227,0.45);
  --accent-glow: rgba(232,231,227,0.16);
  --uncertain:   #6d7688;
  --serif:       'Playfair Display', Georgia, serif;
  --sans:        ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --blur:        blur(28px) saturate(1.35);
  /* Depth planes — glass sits at distances, not flat on one surface */
  --lift-1:      0 2px 20px rgba(0,0,0,0.35);
  --lift-2:      0 12px 48px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
  --lift-3:      0 28px 90px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.35);
  --frost:       inset 0 1px 0 rgba(214,228,245,0.10);
  --star:        #f2f6fc;
  --frost-hi:    #f4f8ff;
  --frost-mid:   #b8c6da;
  --frost-lo:    #93a3ba;
  /* Type scale — 1.25 ratio off a 16px base. Fluid where it carries weight. */
  --t-xs:  11px;
  --t-sm:  13px;
  --t-md:  15px;
  --t-lg:  clamp(17px, 1.6vw, 19px);
  --t-xl:  clamp(21px, 2.4vw, 26px);
  --t-2xl: clamp(26px, 3.4vw, 36px);
  --t-3xl: clamp(32px, 5vw, 52px);
  --t-4xl: clamp(44px, 7.5vw, 108px);

  /* Spacing — 4pt grid. Every margin and pad resolves to one of these. */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;

  /* Status colors derive from the accent so they move with it. */
  --ok:        color-mix(in srgb, var(--accent) 40%, #6fae86);
  --warn:      color-mix(in srgb, var(--accent) 35%, #b08a5a);
  --danger:    color-mix(in srgb, var(--accent) 30%, #b06a6a);
  --contra:    color-mix(in srgb, var(--accent) 45%, #9a86c0);

  --r:           14px;
  --r-pill:      999px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  background: var(--base);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Dark atmospheric gradients — give glass real material to blur against */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 78% 4%,   rgba(232,231,227,0.045) 0%, transparent 58%),
    radial-gradient(ellipse 55% 40% at 6% 92%,   rgba(232,231,227,0.022) 0%, transparent 55%),
    radial-gradient(ellipse 90% 60% at 40% 55%,  rgba(232,231,227,0.016)  0%, transparent 62%),
    radial-gradient(ellipse 140% 90% at 50% 50%, rgba(6,8,12,0.72)    0%, transparent 78%);
  animation: drift 48s ease-in-out infinite alternate;
}

#app { position: relative; z-index: 1; }

/* Every surface sits in this container. Shared grid for nav and body. */
.wrap {
  max-width: 1100px; margin: 0 auto;
  padding: 96px 36px 140px;      /* clears the fixed nav */
}
/* Full-viewport surfaces own their own vertical rhythm. */
.wrap-bare { padding-top: 0; padding-bottom: 0; }

/* NAV */
.nav {
  box-shadow: 0 1px 0 rgba(190,210,235,0.05);
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; padding: 0 36px; height: 56px;
  background: rgba(8,7,5,0.82);
  backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--line);
}
.brand { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--text); }
.brand small { font-family: var(--sans); font-size: 11px; font-weight: 400; color: var(--text-3); margin-left: var(--s-2); }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a {
  font-size: 13px; color: var(--text-3); text-decoration: none;
  padding: var(--s-2) 12px; border-radius: 8px; cursor: pointer;
  transition: color .15s; position: relative;
}
.nav-links a:hover { color: var(--text-2); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after {
  content: ''; position: absolute; bottom: 2px; left: 12px; right: 12px; height: 1.5px;
  background: var(--accent); border-radius: 1px;
}
.nav-icon { display: flex; align-items: center; padding: var(--s-2); color: var(--text-3); cursor: pointer; }
.nav-icon:hover { color: var(--text-2); }

/* HERO — full viewport desktop, headline owns the screen */
.hero {
  min-height: 100svh; display: flex; flex-direction: column;
  justify-content: center; padding: 96px 0 80px;
}
.hero h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(44px, 7.5vw, 108px);
  line-height: 0.98; letter-spacing: -0.025em;
  color: var(--text); max-width: 13ch;
  opacity: 0; animation: arrive 1.1s cubic-bezier(.16,1,.3,1) .1s forwards;
}
.lede {
  font-size: clamp(16px, 1.8vw, 20px); color: var(--text-2);
  max-width: 54ch; margin-top: 24px; line-height: 1.65;
  opacity: 0; animation: arrive .9s cubic-bezier(.16,1,.3,1) .55s forwards;
}
.universe {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px;
  opacity: 0; animation: arrive .8s cubic-bezier(.16,1,.3,1) .8s forwards;
}
.universe span {
  font-size: 12px; color: var(--text-3);
  background: var(--surface); border: 1px solid var(--line);
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); backdrop-filter: var(--blur);
  transition: color .2s, border-color .2s;
}
.universe span:hover { color: var(--text-2); border-color: var(--line-hi); }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  padding: 12px var(--s-6); border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid transparent; text-decoration: none; white-space: nowrap;
  transition: transform .15s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Primary button — accent filled */
.btn:not(.ghost) {
  background: var(--accent); color: var(--accent-fg);
  box-shadow: 0 0 0 1px var(--accent-mid), 0 4px 20px var(--accent-glow);
}
.btn:not(.ghost):hover {
  box-shadow: 0 0 0 1px var(--accent-mid), 0 10px 36px var(--accent-glow);
}
/* Ghost button — glass */
.btn.ghost {
  background: var(--surface); color: var(--text-2);
  border-color: var(--line); backdrop-filter: var(--blur);
}
.btn.ghost:hover { color: var(--text); border-color: var(--line-hi); background: var(--surface-hi); }
.btn.big { font-size: 16px; padding: var(--s-4) var(--s-8); }
.btn[disabled] { opacity: .35; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* Provider auth buttons */
.btn-provider {
  background: var(--surface-hi); color: var(--text); border: 1px solid var(--line-hi);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  padding: var(--s-3) 20px; border-radius: var(--r-pill);
  cursor: pointer; transition: border-color .15s; backdrop-filter: var(--blur);
}
.btn-provider:hover { border-color: var(--accent-mid); }

/* SECTION LABELS */
.section-title, .section-label {
  font-size: 11px; color: var(--text-3); letter-spacing: .09em;
  text-transform: uppercase; margin-bottom: 12px; margin-top: 48px; font-weight: 500;
}

/* PAGE PADDING */


/* COVERAGE STRIP */
.coverage {
  display: flex; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  margin: 16px 0 28px; background: var(--surface); backdrop-filter: var(--blur);
}
.coverage > div { flex: 1; min-width: 100px; padding: 16px 20px; border-right: 1px solid var(--line); }
.coverage > div:last-child { border-right: none; }
.coverage b { display: block; font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1; color: var(--text); }

/* FINDING OBJECTS — spatial field
   class names: finding-object, tier-major, tier-strong, tier-normal, sensitive */
.field { display: grid; gap: 16px; margin-top: 20px; }
.finding-object {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px; cursor: pointer;
  backdrop-filter: var(--blur);
  box-shadow: var(--lift-1), var(--frost);
  transition: border-color .3s, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.finding-object::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-tint), transparent);
  opacity: 0; transition: opacity .25s;
}
.finding-object:hover { border-color: var(--line-hi); transform: translateY(-4px); box-shadow: var(--lift-2), var(--frost); }
.finding-object:hover::before { opacity: 1; }
.finding-object.tier-major {
  background: var(--surface-hi); border-color: var(--line-hi); padding: 36px;
  box-shadow: var(--lift-3), var(--frost);
}
.finding-object.tier-major::before { opacity: 1; }
.finding-object.tier-strong { padding: 28px; }
.finding-object.sensitive { box-shadow: none !important; border-color: var(--line) !important; background: var(--surface) !important; }
.finding-object.sensitive .label { color: var(--text-3) !important; }
.finding-object.sensitive .statement { color: var(--text-2) !important; font-size: clamp(17px,2.2vw,24px) !important; }
.finding-object.sensitive .share-cta { display: none; }

/* Finding interior classes */
.label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: var(--s-3); }
.statement { font-family: var(--serif); line-height: 1.08; color: var(--text); margin-bottom: 16px; }
.finding-object.tier-major .statement { font-size: clamp(28px, 4.8vw, 52px); }
.finding-object.tier-strong .statement { font-size: clamp(22px, 3.2vw, 36px); }
.finding-object.tier-normal .statement { font-size: clamp(18px, 2.4vw, 26px); }
.row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.support-meter { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.dots { display: inline-flex; gap: 3px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-mid); }
.dot.faint { background: var(--base-3); border: 1px solid var(--line); }
.sensitive-note { font-size: 12px; color: var(--text-3); font-style: italic; border-left: 2px solid var(--line); padding: 8px 12px; margin: 12px 0; }

/* FINDING FOCUS (surface E) */

.focus-wrap { position: relative; }
.breadcrumb { font-size: 12px; color: var(--text-3); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumb b { color: var(--text-2); }
.magnitude-focus {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(88px, 20vw, 210px); line-height: .82; letter-spacing: -0.03em;
  color: transparent;
  background: linear-gradient(140deg, var(--text) 25%, rgba(22,51,109,0.85));
  -webkit-background-clip: text; background-clip: text;
  animation: expand .6s cubic-bezier(.16,1,.3,1) both;
}
.magnitude-unit { font-size: 16px; color: var(--text-3); margin: 8px 0 24px; }
.focus-statement { font-family: var(--serif); font-size: clamp(22px, 4.5vw, 46px); line-height: 1.06; color: var(--text); max-width: 22ch; margin-bottom: 20px; }
.focus-support { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.focus-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

/* EVIDENCE DESCENT (surface F) */
.obs-list { margin: 8px 0 24px; }
.obs-row { border-left: 2px solid var(--line); padding: 12px 0 12px 16px; margin-bottom: 4px; }
.obs-row.corroborated { border-left-color: var(--accent-mid); }
.obs-title { font-size: 14px; color: var(--text); }
.obs-grid { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.obs-grid span { font-size: 11px; color: var(--text-3); }
.obs-grid b { color: var(--text-2); }
.jur { font-size: 11px; color: var(--uncertain); font-style: italic; margin-top: var(--s-1); }
.corroboration-tag { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--accent); margin-left: 8px; }
.descent-section-title { font-size: 11px; color: var(--text-3); letter-spacing: .07em; text-transform: uppercase; padding: var(--s-5) 0 8px; border-top: 1px solid var(--line); margin-top: 16px; }
.testimony-divider { border-top: 1px dashed var(--line); margin: 20px 0 8px; }
.contradiction-empty, .testimony-empty { font-size: 13px; color: var(--text-3); font-style: italic; }

/* INTAKE DOORS */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.door {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px; backdrop-filter: var(--blur);
  box-shadow: var(--lift-1), var(--frost);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .3s;
}
.door:hover { transform: translateY(-3px); box-shadow: var(--lift-2), var(--frost); border-color: var(--line-hi); }
.door h3 { font-family: var(--serif); font-size: 19px; color: var(--text); }
.door p { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.jurisdiction { font-size: 11px; color: var(--text-3); font-style: italic; }

/* BADGES */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: var(--s-1) var(--s-2); border-radius: var(--r-pill); }
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; }
.badge.live    { background: rgba(80,160,100,.15); color: var(--ok); }
.badge.live::before { background: var(--ok); }
.badge.archive { background: var(--accent-tint); color: var(--accent); }
.badge.archive::before { background: var(--accent); }
.badge.awaiting { background: rgba(100,95,85,.15); color: var(--text-3); }
.badge.awaiting::before { background: var(--text-3); }

/* STATE PANELS */
.state-panel { border-radius: 10px; padding: 12px 16px; font-size: 13px; margin: 12px 0; }
.state-panel.uncertainty { background: rgba(122,110,92,.12); border: 1px solid rgba(122,110,92,.25); color: var(--uncertain); }
.state-panel.info { background: var(--accent-tint); border: 1px solid var(--accent-mid); color: var(--text-2); }

/* EMPTY STATE */
.empty { text-align: center; padding: 80px 24px; }
.empty h2 { font-family: var(--serif); font-size: 28px; color: var(--text-2); margin-bottom: var(--s-3); }
.empty p { font-size: 15px; color: var(--text-3); margin-bottom: 24px; max-width: 40ch; margin-inline: auto; }


/* SHARE */
.share-preview { background: var(--base-2); border: 1px solid var(--line-hi); border-radius: 18px; padding: var(--s-8); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; aspect-ratio: 9/16; max-width: 260px; }
.share-preview::before { content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-mid), transparent); }
.share-preview .artifact { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.share-preview .statement { font-family: var(--serif); font-size: clamp(15px, 4vw, 22px); line-height: 1.2; color: var(--text); margin: var(--s-3) 0; }
.share-preview .brand { margin-top: auto; font-size: 11px; color: var(--text-3); padding-top: 16px; }
.share-formats { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.format-btn { font-size: 11px; padding: 4px var(--s-3); border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; background: var(--surface); color: var(--text-3); transition: all .15s; }
.format-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.toggles { display: grid; gap: 8px; }
.toggles label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.toggles input[type=checkbox] { accent-color: var(--accent); }

/* AUTH GATE */
.auth-gate { max-width: 380px; margin: 0 auto; text-align: center; padding: 48px 0; }
.auth-gate h2 { font-family: var(--serif); font-size: 32px; color: var(--text); margin-bottom: 8px; }
.auth-gate p { font-size: 15px; color: var(--text-2); margin-bottom: 32px; line-height: 1.6; }
.auth-btns { display: flex; flex-direction: column; gap: 10px; }
.auth-divider { font-size: 12px; color: var(--text-3); padding: 4px 0; }

/* ACCENT PICKER */
.accent-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--s-5) 0; }
.accent-swatch { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.accent-swatch:hover { transform: scale(1.1); }
.accent-swatch.selected { border-color: rgba(255,255,255,0.55); box-shadow: 0 0 0 3px var(--base), 0 0 0 5px rgba(255,255,255,0.35); transform: scale(1.12); }

/* PROFILE FORM */
.profile-form { max-width: 440px; }
.field-group { margin-bottom: var(--s-5); }
.field-group label { display: block; font-size: 12px; color: var(--text-3); margin-bottom: var(--s-2); font-weight: 600; }
.field-group input { width: 100%; padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: 14px; color: var(--text); font-family: var(--sans); transition: border-color .15s; }
.field-group input:focus { border-color: var(--accent); outline: none; }
.field-group input::placeholder { color: var(--text-3); }
.hint { font-size: 11px; color: var(--text-3); margin-top: 4px; }

/* SEED CHIPS */
.seed-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.seed-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); padding: 4px var(--s-3); border-radius: var(--r-pill); }
.seed-rm { cursor: pointer; opacity: .5; font-size: 12px; }
.seed-rm:hover { opacity: 1; }

/* ONBOARDING */
.onboard-shell, .onboard-step { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 80px 28px; text-align: center; }
.onboard-shell h1, .onboard-step h1 { font-family: var(--serif); font-size: clamp(28px, 5vw, 46px); color: var(--text); margin-bottom: var(--s-3); }
.sub { font-size: 16px; color: var(--text-2); margin-bottom: 36px; max-width: 38ch; }
.progress-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 40px; }
.progress-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--base-3); }
.progress-dots span.on { background: var(--accent); }

/* RELIC */
.relic-card { position: relative; overflow: hidden; background: var(--surface-hi); border: 1px solid var(--line-hi); border-radius: var(--r); padding: 24px; backdrop-filter: var(--blur); margin-bottom: 16px; }
.relic-card::before { content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-mid), transparent); }
.relic-question { font-family: var(--serif); font-size: clamp(20px, 3vw, 28px); color: var(--text); margin-bottom: var(--s-2); line-height: 1.1; }
.relic-provenance { font-size: 11px; color: var(--text-3); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 12px; }
.relic-artifact { background: var(--base-3); border: 1px solid var(--line); border-radius: 10px; padding: 12px var(--s-4); margin-bottom: var(--s-5); }
.ra-title { font-size: 14px; color: var(--text-2); }
.ra-url { font-size: 11px; color: var(--accent); word-break: break-all; }
.ra-date { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.relic-options { display: flex; gap: 10px; flex-wrap: wrap; }
.relic-option { flex: 1; min-width: 90px; padding: 12px var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; text-align: center; transition: border-color .15s, transform .12s; font-family: var(--sans); }
.relic-option:hover { border-color: var(--line-hi); transform: translateY(-1px); }
.ro-label { font-size: 15px; font-weight: 600; color: var(--text); }
.ro-desc  { font-size: 11px; color: var(--text-3); margin-top: var(--s-1); }
.relic-responded { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-3); padding-top: 12px; border-top: 1px solid var(--line); margin-top: var(--s-4); }
.response-badge { font-size: 11px; font-weight: 700; padding: var(--s-1) var(--s-2); border-radius: var(--r-pill); text-transform: uppercase; }
.response-badge.yes    { background: var(--accent-tint); color: var(--accent); }
.response-badge.no     { background: rgba(122,53,53,.15); color: var(--danger); }
.response-badge.unsure { background: rgba(122,110,92,.15); color: var(--uncertain); }

/* WITNESS */
.loom-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.loom-promise {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin: var(--s-6) 0 var(--s-4);
}
.loom-promise > div {
  min-height: 104px;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  backdrop-filter: var(--blur);
  box-shadow: var(--frost);
}
.loom-promise b {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--text);
  font-size: var(--t-sm);
}
.loom-promise span {
  display: block;
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.45;
}
.loom-empty { margin: var(--s-4) 0; }
.loom-input-row { display: flex; gap: 8px; margin-top: 16px; }
.loom-input { flex: 1; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 14px; color: var(--text); font-family: var(--sans); }
.loom-input:focus { border-color: var(--accent); outline: none; }
.loom-input::placeholder { color: var(--text-3); }

/* MOTION */
@keyframes arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes expand { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.arrive { animation: arrive .6s cubic-bezier(.16,1,.3,1) both; }
.animate-arrive { animation: arrive .6s cubic-bezier(.16,1,.3,1) both; }
.reveal { opacity: 0; animation: expand .55s cubic-bezier(.16,1,.3,1) forwards; }
.stagger-1 { animation-delay: .08s; }
.stagger-2 { animation-delay: .16s; }
.stagger-3 { animation-delay: .24s; }
.stagger-4 { animation-delay: .32s; }
.stagger-5 { animation-delay: .40s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ACCENT HOOKS — --accent set by accents.js on :root */
.label { color: var(--accent) !important; }
.dot { background: var(--accent-mid); }
.nav-links a.active { color: var(--accent); }
input:focus, textarea:focus { outline: 1px solid var(--accent); outline-offset: 2px; }

/* RESPONSIVE */
@media (max-width: 720px) {
  .wrap { padding: 84px var(--s-5) var(--s-24); }
  .wrap-bare { padding-top: 0; padding-bottom: 0; }
  .hero { padding: var(--s-20) 0 var(--s-12); }
  .doors { grid-template-columns: 1fr; }
  .coverage { flex-direction: column; }
  .coverage > div { border-right: none; border-bottom: 1px solid var(--line); }
  .coverage > div:last-child { border-bottom: none; }
  .nav-links a { padding: var(--s-1) 8px; font-size: 12px; }
  .magnitude-focus { font-size: clamp(64px, 28vw, 120px); }
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--base); }
::-webkit-scrollbar-thumb { background: var(--base-3); border-radius: 3px; }


/* ── OBJECT HIERARCHY ────────────────────────────────────────────────────
   The Record · The Model · The Loom · The Excavation · Relics
   All named objects share one typographic scale. Nothing is incidental. */
.surface-title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(30px, 5vw, 56px); line-height: 1.02;
  letter-spacing: -0.02em; color: var(--text);
  margin-bottom: 16px;
}
.surface-lede {
  font-size: clamp(15px, 1.6vw, 18px); color: var(--text-2);
  max-width: 54ch; line-height: 1.65; margin-bottom: 8px;
}
/* An object mark belongs to the same hierarchy — never a stray utility label */
.object-mark {
  font-family: var(--serif); font-weight: 700;
  font-size: 0.62em; letter-spacing: 0.14em;
  color: var(--accent); vertical-align: 0.22em;
  margin-left: 0.35em; opacity: 0.92;
}

/* ── THE MODEL — archetypes across time ─────────────────────────────────── */
.model-field { display: grid; gap: 14px; margin: 20px 0 8px; }
.model-object {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s-6) 24px;
  backdrop-filter: var(--blur);
  box-shadow: var(--lift-1), var(--frost);
  opacity: 0; animation: arrive .6s cubic-bezier(.16,1,.3,1) both;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .3s;
}
.model-object:hover { transform: translateY(-3px); box-shadow: var(--lift-2), var(--frost); border-color: var(--line-hi); }
/* Illumination scales with evidentiary strength — the record lights up as it resolves */
.model-object.supported { background: var(--surface-hi); border-color: var(--line-hi); box-shadow: var(--lift-2), var(--frost); }
.model-object.supported::before {
  content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-mid), transparent);
}
.model-object.candidate { opacity: .92; }
.model-object.disputed  { border-style: dashed; }
.mo-name {
  font-family: var(--serif); font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.1; color: var(--text); margin-bottom: var(--s-2);
}
.mo-expression { font-size: 14px; color: var(--text-2); line-height: 1.55; margin-bottom: 12px; max-width: 62ch; }
.mo-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mo-state {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}
.mo-span { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mo-strength {
  flex: 1; min-width: 60px; max-width: 160px; height: 1px;
  background: var(--line); position: relative;
}
.mo-strength::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: var(--s, 0%);
  background: linear-gradient(90deg, var(--accent-mid), var(--accent));
  box-shadow: 0 0 8px var(--accent-glow);
}
.mo-evolution { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--s-3); }
.mo-evolution span {
  font-size: 10px; letter-spacing: .05em; color: var(--text-3);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: var(--s-1) var(--s-2);
}
.mo-contradiction { font-size: 11px; color: var(--uncertain); font-style: italic; margin-top: 8px; }
.model-object.compound .mo-name { font-size: clamp(17px, 2vw, 22px); }
.model-object.echo { border-left: 2px solid var(--accent-mid); }

/* ── ILLUMINATION — the record gains structure as evidence resolves ───────── */
.illum {
  margin: 24px 0; padding: var(--s-6) 24px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); backdrop-filter: var(--blur);
  box-shadow: var(--lift-1), var(--frost);
  transition: box-shadow .6s, border-color .6s, background .6s;
}
.illum.done {
  background: var(--surface-hi); border-color: var(--line-hi);
  box-shadow: var(--lift-2), var(--frost);
}
.illum.done::before {
  content: ''; display: block; position: absolute;
}
.illum-line {
  font-family: var(--serif); font-size: clamp(17px, 2.2vw, 22px);
  color: var(--text); margin-bottom: 16px;
}
.illum-grid { display: flex; flex-wrap: wrap; gap: 28px; }
.illum-cell {
  opacity: 0; animation: arrive .55s cubic-bezier(.16,1,.3,1) both;
  display: flex; flex-direction: column; gap: 2px;
}
.illum-cell b {
  font-family: var(--serif); font-size: clamp(22px, 3vw, 32px);
  font-weight: 600; line-height: 1;
  color: transparent;
  background: linear-gradient(140deg, var(--text) 30%, var(--accent));
  -webkit-background-clip: text; background-clip: text;
}
.illum-cell span {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}
.field-group select {
  width: 100%; padding: var(--s-3) var(--s-4); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; font-size: 14px;
  color: var(--text); font-family: var(--sans);
}
.field-group select:focus { border-color: var(--accent); outline: none; }
.field-error { font-size: 12px; color: var(--danger); margin-top: var(--s-1); }
.nameset-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: var(--s-4) 0 4px; max-width: 620px; }
.name-chip {
  font-family: var(--serif); font-size: 14px; padding: var(--s-2) var(--s-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); color: var(--text-2); cursor: pointer;
  backdrop-filter: var(--blur); transition: color .15s, border-color .15s, transform .15s;
}
.name-chip:hover { color: var(--text); border-color: var(--line-hi); transform: translateY(-1px); }
.name-chip.on { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }

/* ── UNSTYLED CLASS REPAIR ────────────────────────────────────────────────
   These classes are emitted by app.js and had no rules. */

/* .btn.accent — the primary action. Same weight as an unqualified .btn. */
.btn.accent {
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-mid), 0 4px 20px var(--accent-glow);
}
.btn.accent:hover { box-shadow: 0 0 0 1px var(--accent-mid), 0 10px 36px var(--accent-glow); }

/* Contradiction panel — visible, never alarming. */
.state-panel.contradiction {
  background: rgba(108,92,138,0.12);
  border: 1px solid rgba(138,122,170,0.28);
  color: var(--contra);
}

/* Relic provenance line */
.relic-context { font-size: 12px; color: var(--text-3); font-style: italic; margin-bottom: 16px; }

/* ── SHARE CARD ───────────────────────────────────────────────────────────
   The artifact a person carries out of the Record. Object, not a screenshot. */
.share-canvas {
  position: relative; overflow: hidden;
  background: var(--base-2); border: 1px solid var(--line-hi);
  border-radius: 20px; padding: var(--s-8);
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: var(--lift-3), var(--frost);
  backdrop-filter: var(--blur);
}
.share-canvas::before {
  content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-mid), transparent);
}
.share-canvas::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 70% 5%, var(--accent-glow) 0%, transparent 60%);
  opacity: .5;
}
.share-canvas.ratio-916 { aspect-ratio: 9/16; max-width: 270px; }
.share-canvas.ratio-11  { aspect-ratio: 1/1;  max-width: 340px; }
.share-canvas.ratio-169 { aspect-ratio: 16/9; max-width: 500px; }

.sc-label {
  position: relative; z-index: 1;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: var(--s-4);
}
.sc-mag {
  position: relative; z-index: 1;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(40px, 13vw, 84px); line-height: .85; letter-spacing: -0.03em;
  color: transparent;
  background: linear-gradient(140deg, var(--text) 25%, var(--accent));
  -webkit-background-clip: text; background-clip: text;
  font-variant-numeric: tabular-nums;
}
.sc-stmt {
  position: relative; z-index: 1;
  font-family: var(--serif); font-size: clamp(15px, 3.2vw, 22px);
  line-height: 1.18; color: var(--text); margin: 12px 0;
}
.sc-brand {
  position: relative; z-index: 1;
  margin-top: auto; padding-top: 20px;
  font-size: 11px; letter-spacing: .08em; color: var(--text-3);
}

/* ── HERO COMPOSITION ─────────────────────────────────────────────────────
   Language on the left. The Record resolving on the right.
   The right half is not empty space — it is the claim, rendered. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 56px; align-items: center; width: 100%;
}
.hero-copy { min-width: 0; }
.hero-field {
  position: relative; aspect-ratio: 1 / 1;
  min-height: 380px; max-height: 62vh;
  opacity: 0; animation: arrive 1.4s cubic-bezier(.16,1,.3,1) .35s forwards;
}
/* The field sits over its own atmosphere, so the glass has something to hold. */
.hero-field::before {
  content: ''; position: absolute; inset: -18%;
  background:
    radial-gradient(circle at 52% 48%, var(--accent-glow) 0%, transparent 58%),
    radial-gradient(circle at 30% 75%, rgba(40,58,92,0.30) 0%, transparent 55%);
  filter: blur(28px);
}
.field-nodes { isolation: isolate; }
.field-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Points arrive as points, not clouds. */
.fg-node { opacity: 0; animation: fgArrive 1s cubic-bezier(.16,1,.3,1) forwards; }
.fg-dot  { fill: var(--star); }
.fg-node.seated .fg-dot {
  fill: var(--star);
  filter: drop-shadow(0 0 2px var(--accent));
  animation: fgPulse 5s ease-in-out infinite;
}

/* Threads, not ropes. */
.field-links path {
  fill: none; stroke: rgba(190,210,235,0.22); stroke-width: .18;
  stroke-linecap: round;
  stroke-dasharray: 160; stroke-dashoffset: 160;
  animation: fgDraw 1.8s cubic-bezier(.16,1,.3,1) forwards;
}

.field-labels { position: absolute; inset: 0; pointer-events: none; }
.fg-label {
  position: absolute; transform: translate(16px, -50%);
  font-family: var(--serif); font-size: 12px; letter-spacing: .02em;
  color: var(--text-3); white-space: nowrap;
  opacity: 0; animation: arrive .9s cubic-bezier(.16,1,.3,1) forwards;
}
.fg-label.left { transform: translate(calc(-100% - 16px), -50%); }
.fg-label.seated {
  font-size: 15px; color: var(--text-2);
  transform: translate(20px, -50%);
}

@keyframes fgArrive {
  from { opacity: 0; transform: scale(.2); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fgDraw  { to { stroke-dashoffset: 0; } }
@keyframes fgPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .6; }
}
  50%      { opacity: .55; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-field { min-height: 300px; max-height: 46vh; order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .fg-node, .fg-label, .hero-field { opacity: 1 !important; animation: none !important; }
  .field-links path { stroke-dashoffset: 0 !important; animation: none !important; }
}


/* ── FOCUS ────────────────────────────────────────────────────────────────
   Keyboard navigation must be visible on every interactive surface. */
a, button, input, select, textarea, [tabindex], .accent-swatch,
.name-chip, .relic-option, .format-btn, .seed-chip {
  outline-color: var(--accent);
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .accent-swatch:focus-visible,
.name-chip:focus-visible, .relic-option:focus-visible, .format-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Glass on every chip, including seeds. */
.seed-chip { backdrop-filter: var(--blur); box-shadow: var(--frost); }

/* ── UNWITNESSED CONTENT ─────────────────────────────────────────────────────
   A claim the evidence did not support is not shown with a caveat.
   It is shown as absent, and the absence is legible. */
.unwitnessed {
  border: 1px dashed var(--line-hi);
  border-radius: var(--r);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-3) 0;
  background: rgba(0,0,0,0.18);
}
.unwitnessed-label {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--uncertain); font-weight: 600;
}
.unwitnessed-label::before {
  content: ''; width: 14px; height: 1px; background: var(--uncertain); opacity: .6;
}
.unwitnessed-reason { font-size: var(--t-sm); color: var(--text-3); margin-top: var(--s-2); line-height: 1.5; }

/* ── MID BREAKPOINT ───────────────────────────────────────────────────────
   900–1100px was falling to the mobile stack inside a wide window. */
@media (min-width: 901px) and (max-width: 1180px) {
  .wrap { padding-left: var(--s-6); padding-right: var(--s-6); }
  .hero-grid { gap: var(--s-8); grid-template-columns: minmax(0,1fr) minmax(0,0.8fr); }
  .doors { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
}

/* ── UTILITY CLASSES ──────────────────────────────────────────────────────
   Replacing inline style attributes so type and spacing live in one place. */
.note      { font-size: var(--t-sm); color: var(--text-3); }
.note-sm   { font-size: var(--t-xs); color: var(--text-3); }
.body-text { font-size: var(--t-md); color: var(--text-2); line-height: 1.65; }
.stack-sm  { margin-top: var(--s-2); }
.stack-md  { margin-top: var(--s-4); }
.stack-lg  { margin-top: var(--s-6); }

/* ── LOOM ANSWER ──────────────────────────────────────────────────────────
   The Loom speaking. Serif, given room, not a chat bubble. */
.loom-answer {
  font-size: var(--t-lg); color: var(--text); line-height: 1.6;
  max-width: 62ch;
}
.loom-finding {
  margin-top: var(--s-3); padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--accent-mid);
  background: var(--surface); border-radius: 0 var(--r) var(--r) 0;
  backdrop-filter: var(--blur);
}
.lf-statement { font-size: var(--t-md); color: var(--text); line-height: 1.5; }
.lf-meta      { font-size: var(--t-xs); color: var(--text-3); margin-top: var(--s-1); }
.loom-scope   { font-size: var(--t-xs); color: var(--text-3); margin-top: var(--s-2); font-style: italic; }
.surface-subtitle { font-family: var(--serif); font-size: var(--t-xl); color: var(--text); margin: var(--s-2) 0; }

/* ── COSMIC FIELD ─────────────────────────────────────────────────────────
   Starfield behind everything. Fixed, faint, slow. Depth, not decoration. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(214,228,245,.42), transparent),
    radial-gradient(1px 1px at 34% 62%, rgba(214,228,245,.28), transparent),
    radial-gradient(1px 1px at 58% 24%, rgba(214,228,245,.36), transparent),
    radial-gradient(1px 1px at 77% 71%, rgba(214,228,245,.24), transparent),
    radial-gradient(1px 1px at 88% 33%, rgba(214,228,245,.32), transparent),
    radial-gradient(1px 1px at 22% 84%, rgba(214,228,245,.22), transparent),
    radial-gradient(1px 1px at 66% 91%, rgba(214,228,245,.26), transparent),
    radial-gradient(1px 1px at 45% 8%,  rgba(214,228,245,.30), transparent),
    radial-gradient(1px 1px at 92% 55%, rgba(214,228,245,.20), transparent),
    radial-gradient(1px 1px at 5% 44%,  rgba(214,228,245,.24), transparent);
  opacity: .55;
  animation: breathe 14s ease-in-out infinite;
}
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-1.5%, 1.5%, 0) scale(1.06); }
}
@keyframes breathe {
  0%,100% { opacity: .40; }
  50%     { opacity: .68; }
}

/* ── FROST AND SILVER ─────────────────────────────────────────────────────
   Headlines catch light across their width instead of sitting flat. */
.hero h1, .surface-title {
  background: linear-gradient(168deg,
    var(--frost-hi) 0%, var(--text) 34%, var(--frost-mid) 72%, var(--frost-lo) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero h1 { letter-spacing: -0.035em; }

/* A rule extends from each label, so a surface opens instead of starting. */
.section-label, .section-title {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--text-3);
}
.section-label::after, .section-title::after {
  content: ''; flex: 1; height: 1px; max-width: 180px;
  background: linear-gradient(90deg, var(--line-hi), transparent);
}

/* ── GLASS EDGES ──────────────────────────────────────────────────────────
   A pane is visible at its edge, not by being lighter than the page. */
.finding-object, .door, .model-object, .relic-card { position: relative; }
.finding-object::after, .door::after, .model-object::after, .relic-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(145deg,
    rgba(214,228,245,0.055) 0%, transparent 38%,
    transparent 62%, rgba(6,8,12,0.22) 100%);
}

/* ── ILLUMINATION ON RESOLUTION ───────────────────────────────────────────*/
.finding-object.tier-major, .model-object.supported, .illum.done {
  border-color: var(--accent-mid);
}
.finding-object.tier-major::before, .model-object.supported::before {
  height: 1px; opacity: 1;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 18px 1px var(--accent-glow);
}

/* ── NUMBERS ARE THE LOUDEST THING ────────────────────────────────────────*/
.coverage b, .illum-cell b, .magnitude-focus, .sc-mag {
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.coverage b {
  background: linear-gradient(150deg, var(--text) 30%, var(--accent-fg) 60%, var(--frost-lo) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── VERTICAL RHYTHM ──────────────────────────────────────────────────────*/
.surface-title  { margin-bottom: var(--s-5); max-width: 18ch; }
.surface-lede   { max-width: 58ch; line-height: 1.7; }
.field          { gap: var(--s-4); margin-top: var(--s-6); }
.section-label  { margin-top: var(--s-16); margin-bottom: var(--s-4); }
.section-label:first-child { margin-top: 0; }

/* ── NAV RECEDES ──────────────────────────────────────────────────────────*/
.nav { background: rgba(6,8,12,0.62); }
.brand small { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none !important; }
}

/* ── CANON SURFACE REBUILD ────────────────────────────────────────────────
   The Record must feel materially present: layered glass, visible depth,
   slow relational motion, and illumination that increases as evidence resolves. */
:root {
  --glass-edge: rgba(224,235,248,.18);
  --glass-fill: rgba(17,22,31,.48);
  --glass-fill-hi: rgba(27,34,46,.62);
  --silver: #dbe4ef;
}

body {
  background:
    radial-gradient(circle at 50% -10%, rgba(52,72,112,.20), transparent 36%),
    linear-gradient(145deg, #090b10 0%, #05070a 52%, #0b0e14 100%);
  overflow-x: hidden;
}
body::before {
  background:
    radial-gradient(ellipse 62% 50% at 82% 9%, color-mix(in srgb, var(--accent) 42%, transparent) 0%, transparent 63%),
    radial-gradient(ellipse 45% 38% at 12% 82%, rgba(108,126,159,.16) 0%, transparent 68%),
    conic-gradient(from 210deg at 50% 50%, rgba(255,255,255,.018), transparent 24%, rgba(110,135,180,.045), transparent 58%, rgba(255,255,255,.018));
  filter: saturate(1.08);
  animation: atmosphericShift 32s ease-in-out infinite alternate;
}
@keyframes atmosphericShift {
  from { transform: translate3d(-1.2%, -.6%, 0) scale(1.02); }
  to   { transform: translate3d(1.2%, 1%, 0) scale(1.07); }
}

.nav {
  background: linear-gradient(180deg, rgba(11,14,20,.82), rgba(8,10,15,.56));
  border-bottom-color: rgba(220,232,248,.11);
  box-shadow: 0 14px 44px rgba(0,0,0,.22), inset 0 -1px 0 rgba(255,255,255,.025);
}

.hero-field {
  transform: perspective(900px) rotateY(-4deg) rotateX(2deg);
  filter: drop-shadow(0 26px 60px rgba(0,0,0,.45));
}
.hero-field::after {
  content:''; position:absolute; inset:7%; border-radius:50%; pointer-events:none;
  background: radial-gradient(circle, transparent 48%, rgba(215,229,248,.035) 64%, transparent 72%);
  border:1px solid rgba(212,226,245,.06);
  animation: orbitGlass 18s ease-in-out infinite alternate;
}
@keyframes orbitGlass { from { transform: scale(.94) rotate(-2deg); opacity:.45 } to { transform: scale(1.04) rotate(3deg); opacity:.9 } }
.field-links path { stroke: color-mix(in srgb, var(--accent) 42%, rgba(225,235,248,.34)); filter: drop-shadow(0 0 4px var(--accent-glow)); }
.fg-node.seated .fg-dot { filter: drop-shadow(0 0 5px var(--accent)) drop-shadow(0 0 16px var(--accent-glow)); }

.intake-surface { position: relative; isolation: isolate; }
.record-aura {
  position:absolute; z-index:-1; width:min(78vw,760px); aspect-ratio:1; left:50%; top:28px; transform:translateX(-50%);
  background: radial-gradient(circle, var(--accent-glow) 0%, color-mix(in srgb, var(--accent) 9%, transparent) 32%, transparent 68%);
  filter: blur(48px); opacity:.48; pointer-events:none;
  animation: recordAura 9s ease-in-out infinite;
}
.intake-surface.is-resolving .record-aura { opacity:.95; animation-duration:2.8s; }
@keyframes recordAura { 0%,100%{transform:translateX(-50%) scale(.92)} 50%{transform:translateX(-50%) scale(1.07)} }

.intake-primary { margin-top: var(--s-8); position: relative; }
.drop-vault {
  position:relative; overflow:hidden; min-height:300px;
  display:grid; grid-template-columns:80px 1fr auto; align-items:center; gap:26px;
  padding:40px 44px;
  border:1px solid var(--glass-edge); border-radius:26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 28%),
    linear-gradient(315deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 46%),
    var(--glass-fill);
  backdrop-filter: blur(36px) saturate(1.55);
  -webkit-backdrop-filter: blur(36px) saturate(1.55);
  box-shadow: 0 38px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(240,247,255,.15), inset 0 -1px 0 rgba(0,0,0,.32);
  cursor:pointer; transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .35s, background .35s;
}
.drop-vault::before {
  content:''; position:absolute; inset:-42% 48% -42% -20%; pointer-events:none;
  background:linear-gradient(108deg, transparent 30%, rgba(239,246,255,.13) 48%, transparent 66%);
  transform:translateX(-82%) rotate(7deg); animation: glassSweep 8s ease-in-out infinite;
}
.drop-vault::after {
  content:''; position:absolute; inset:12px; border:1px solid rgba(224,236,252,.055); border-radius:18px; pointer-events:none;
}
.drop-vault:hover, .drop-vault.dragging {
  transform:translateY(-5px) scale(1.006); border-color:color-mix(in srgb, var(--accent) 56%, var(--glass-edge));
  box-shadow:0 48px 140px rgba(0,0,0,.56), 0 0 60px var(--accent-glow), inset 0 1px 0 rgba(245,250,255,.20);
  background:linear-gradient(135deg, rgba(255,255,255,.07), transparent 28%), var(--glass-fill-hi);
}
@keyframes glassSweep { 0%,48%{transform:translateX(-95%) rotate(7deg)} 67%,100%{transform:translateX(180%) rotate(7deg)} }

.drop-orbit { position:absolute; width:210px; height:210px; left:-54px; top:50%; transform:translateY(-50%); border-radius:50%; border:1px solid rgba(221,233,249,.08); box-shadow:0 0 44px var(--accent-glow), inset 0 0 44px rgba(255,255,255,.025); animation:slowOrbit 16s linear infinite; }
.drop-orbit::before,.drop-orbit::after { content:''; position:absolute; border-radius:50%; border:1px solid rgba(218,231,248,.07); }
.drop-orbit::before{inset:24px}.drop-orbit::after{inset:54px}
@keyframes slowOrbit { to{transform:translateY(-50%) rotate(360deg)} }
.drop-mark { position:relative; z-index:1; width:62px; height:62px; display:grid; place-items:center; border-radius:50%; font:300 36px/1 var(--sans); color:var(--silver); background:rgba(214,228,245,.055); border:1px solid rgba(229,238,250,.16); box-shadow:0 0 32px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.14); }
.drop-copy { position:relative; z-index:1; }
.drop-copy h3 { font-family:var(--serif); font-size:clamp(25px,3vw,38px); font-weight:600; letter-spacing:-.02em; color:var(--text); }
.drop-copy p { margin-top:8px; color:var(--text-2); font-size:15px; }
.drop-types { display:block; margin-top:16px; color:var(--text-3); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.intake-picker { position:relative; z-index:2; background:rgba(218,229,245,.07)!important; border:1px solid rgba(224,235,248,.17)!important; color:var(--text)!important; }

.selection-state { min-height:34px; display:flex; align-items:center; gap:9px; margin:12px 4px 0; color:var(--text-2); font-size:12px; }
.selection-state > span:last-child { color:var(--text-3); margin-left:3px; }
.selection-pulse { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 var(--accent-glow); animation:selectionPulse 1.4s ease-out infinite; }
@keyframes selectionPulse { 0%{box-shadow:0 0 0 0 var(--accent-glow)} 100%{box-shadow:0 0 0 13px transparent} }

.intake-secondary { margin-top:32px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.intake-secondary .door { min-height:220px; padding:24px; background:linear-gradient(145deg, rgba(255,255,255,.035), transparent 38%), rgba(17,22,31,.43); backdrop-filter:blur(30px) saturate(1.35); -webkit-backdrop-filter:blur(30px) saturate(1.35); border-color:rgba(220,233,250,.12); box-shadow:0 20px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(239,246,255,.08); }
.intake-secondary .door:nth-child(2){ transform:translateY(14px); }
.intake-secondary .door:nth-child(3){ transform:translateY(28px); }
.intake-secondary .door:hover { transform:translateY(-4px); }
.intake-secondary .door:nth-child(2):hover { transform:translateY(8px); }
.intake-secondary .door:nth-child(3):hover { transform:translateY(20px); }
.door-kicker { font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.seed-entry { display:flex; gap:8px; margin:16px 0 8px; flex-wrap:wrap; }
.seed-entry input { flex:1; min-width:150px; padding:12px; color:var(--text); background:rgba(4,7,11,.38); border:1px solid var(--line-hi); border-radius:10px; }

.illum {
  position:relative; overflow:hidden; margin:24px 0 8px; padding:24px; border-radius:18px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), rgba(18,23,32,.52));
  border:1px solid color-mix(in srgb, var(--accent) 38%, var(--glass-edge));
  backdrop-filter:blur(34px) saturate(1.5); -webkit-backdrop-filter:blur(34px) saturate(1.5);
  box-shadow:0 26px 90px rgba(0,0,0,.40), 0 0 52px var(--accent-glow), inset 0 1px 0 rgba(235,244,255,.12);
}
.illum::before { content:''; position:absolute; inset:-80% 55% -80% -10%; background:linear-gradient(100deg,transparent,rgba(240,247,255,.14),transparent); animation:illumSweep 2.6s ease-in-out infinite; }
@keyframes illumSweep { from{transform:translateX(-70%)} to{transform:translateX(230%)} }
.illum-line { position:relative; z-index:1; font-family:var(--serif); font-size:18px; color:var(--text); }
.illum-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:10px; margin-top:16px; }
.illum-cell { opacity:0; transform:translateY(10px); animation:illumCell .6s cubic-bezier(.16,1,.3,1) forwards; padding:12px 16px; border-radius:12px; background:rgba(7,10,15,.36); border:1px solid rgba(226,237,250,.08); }
.illum-cell b { display:block; font-family:var(--serif); font-size:24px; color:var(--silver); text-shadow:0 0 18px var(--accent-glow); }
.illum-cell span { display:block; color:var(--text-3); font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.illum.done { box-shadow:0 28px 100px rgba(0,0,0,.44), 0 0 82px color-mix(in srgb, var(--accent) 48%, transparent), inset 0 1px 0 rgba(239,247,255,.15); }
@keyframes illumCell { to{opacity:1;transform:none} }

.finding-object, .model-object, .relic-card, .coverage {
  background:linear-gradient(145deg, rgba(255,255,255,.04), transparent 38%), rgba(16,21,29,.48);
  backdrop-filter:blur(30px) saturate(1.4); -webkit-backdrop-filter:blur(30px) saturate(1.4);
  box-shadow:0 22px 75px rgba(0,0,0,.38), inset 0 1px 0 rgba(231,240,252,.08);
}
.finding-object { transform:translateZ(0); }
.finding-object:hover { box-shadow:0 34px 100px rgba(0,0,0,.47), 0 0 34px color-mix(in srgb,var(--accent) 18%,transparent), inset 0 1px 0 rgba(240,247,255,.12); }

@media (max-width: 900px) {
  .drop-vault { grid-template-columns:62px 1fr; min-height:270px; padding:32px 24px; }
  .intake-picker { grid-column:1 / -1; justify-self:start; }
  .intake-secondary { grid-template-columns:1fr; }
  .intake-secondary .door, .intake-secondary .door:nth-child(2), .intake-secondary .door:nth-child(3) { transform:none; }
  .intake-secondary .door:hover, .intake-secondary .door:nth-child(2):hover, .intake-secondary .door:nth-child(3):hover { transform:translateY(-3px); }
}
@media (max-width: 560px) {
  .wrap { padding-left:16px; padding-right:16px; }
  .drop-vault { grid-template-columns:1fr; gap:16px; padding:28px 24px; }
  .drop-orbit { left:auto; right:-80px; opacity:.55; }
  .drop-mark { width:54px; height:54px; }
  .drop-types { line-height:1.6; }
}

.intake-error { margin-top: var(--s-3); }
.archive-door { isolation: isolate; }


/* Account entry: two independent Specter glass objects. */
.account-entry{display:flex;align-items:center;gap:16px;margin:16px 0 40px;min-height:72px}
.specter-object{appearance:none;border:1px solid rgba(232,231,227,.18);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));color:var(--accent);padding:16px 24px;border-radius:16px;font:500 16px/1.2 var(--sans);letter-spacing:0;cursor:pointer;backdrop-filter:blur(26px) saturate(1.12);-webkit-backdrop-filter:blur(26px) saturate(1.12);box-shadow:0 18px 52px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.09);transition:transform .22s cubic-bezier(.16,1,.3,1),border-color .22s,background .22s,box-shadow .22s}
.specter-object:hover,.specter-object:focus-visible{transform:translateY(-2px);border-color:rgba(232,231,227,.34);background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.026));box-shadow:0 24px 66px rgba(0,0,0,.36),0 0 28px rgba(232,231,227,.07),inset 0 1px 0 rgba(255,255,255,.13);outline:none}
.account-entry-divider{color:rgba(232,231,227,.32);font:300 16px/1 var(--sans);user-select:none}.account-signed-in{margin:16px 0 40px}
@media(max-width:560px){.account-entry{gap:12px;flex-wrap:wrap}.specter-object{padding:12px 16px}.account-entry-divider{opacity:.7}}


/* Home: The Record is the interface. Structure is the engagement surface. */
.record-home{
  position:relative;
  min-height:100svh;
  padding:96px 28px 56px;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.006),transparent 28%);
}
.record-home::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0%,rgba(255,255,255,.012) 49.8%,rgba(255,255,255,.02) 50%,rgba(255,255,255,.012) 50.2%,transparent 100%);
  opacity:.7;
}
.record-home-hero{
  width:min(1040px,100%);
  margin:0 auto 44px;
  text-align:center;
}
.record-home-kicker{
  margin:0 0 16px;
  font:500 10px/1 var(--sans);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(232,231,227,.34);
}
.record-home-hero h1{
  max-width:980px;
  margin:0 auto;
  font-family:"Bodoni MT","Bodoni 72",Didot,"Times New Roman",serif;
  font-size:clamp(50px,5.35vw,78px);
  line-height:.99;
  font-weight:400;
  letter-spacing:-.038em;
  color:rgba(246,246,242,.97);
  text-wrap:balance;
}
.record-home-lede{
  max-width:790px;
  margin:24px auto 0;
  font:400 15px/1.72 var(--sans);
  letter-spacing:-.006em;
  color:rgba(232,231,227,.48);
  text-wrap:balance;
}
.record-home-reckoning{
  max-width:680px;
  margin:16px auto 0;
  font-family:var(--serif);
  font-size:clamp(19px,2.2vw,26px);
  line-height:1.28;
  color:rgba(246,246,242,.76);
  text-wrap:balance;
}
.record-home-proof{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px;
}
.record-home-proof span{
  padding:8px 12px;
  border:1px solid rgba(232,231,227,.12);
  border-radius:999px;
  background:rgba(255,255,255,.022);
  color:rgba(232,231,227,.48);
  font-size:12px;
}
.record-aperture{
  position:relative;
  width:min(1200px,100%);
  min-height:438px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(390px,1.18fr) minmax(220px,1fr);
  overflow:hidden;
  border:1px solid rgba(232,231,227,.15);
  border-radius:22px;
  background:
    linear-gradient(114deg,rgba(255,255,255,.041),rgba(255,255,255,.012) 31%,rgba(255,255,255,.018) 66%,rgba(255,255,255,.035)),
    rgba(9,10,12,.72);
  box-shadow:
    0 44px 120px rgba(0,0,0,.52),
    0 12px 32px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(255,255,255,.026);
  backdrop-filter:blur(30px) saturate(1.06);
  -webkit-backdrop-filter:blur(30px) saturate(1.06);
}
.record-aperture::before,.record-aperture::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(232,231,227,.13) 13%,rgba(232,231,227,.07) 87%,transparent);
  pointer-events:none;
  z-index:3;
}
.record-aperture::before{left:31.6%}
.record-aperture::after{right:31.6%}
.record-reflection{
  position:absolute;
  z-index:1;
  top:-42%;
  left:-34%;
  width:22%;
  height:182%;
  transform:rotate(12deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.018),rgba(255,255,255,.085),rgba(255,255,255,.016),transparent);
  filter:blur(2px);
  opacity:.42;
  pointer-events:none;
  animation:recordReflection 17s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes recordReflection{
  0%,24%{transform:translateX(-20vw) rotate(12deg)}
  72%,100%{transform:translateX(152vw) rotate(12deg)}
}
.record-side,.record-core{position:relative;z-index:2}
.record-side{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px 0;
}
.record-structure{
  appearance:none;
  min-height:108px;
  display:grid;
  align-items:center;
  gap:14px;
  border:0;
  border-bottom:1px solid rgba(232,231,227,.055);
  background:transparent;
  color:rgba(232,231,227,.72);
  cursor:pointer;
  font-family:var(--sans);
  transition:background .28s ease,color .28s ease;
}
.record-side .record-structure:last-child{border-bottom:0}
.record-side-left .record-structure{
  grid-template-columns:32px max-content 1fr;
  padding:24px 0 24px 28px;
  text-align:left;
}
.record-side-right .record-structure{
  grid-template-columns:1fr max-content 32px;
  padding:24px 28px 24px 0;
  text-align:right;
}
.record-structure-index{
  font-size:9px;
  letter-spacing:.14em;
  color:rgba(232,231,227,.22);
  transition:color .28s ease;
}
.record-structure-name{
  font-size:14px;
  line-height:1.2;
  font-weight:500;
  letter-spacing:-.012em;
  white-space:nowrap;
}
.record-structure-line{
  height:1px;
  background:linear-gradient(90deg,rgba(232,231,227,.13),transparent);
  transition:background .28s ease,box-shadow .28s ease;
}
.record-side-right .record-structure-line{
  background:linear-gradient(90deg,transparent,rgba(232,231,227,.13));
}
.record-structure:hover{
  background:rgba(255,255,255,.016);
  color:rgba(247,247,244,.94);
}
.record-structure.selected{
  color:rgba(250,250,247,.99);
}
.record-side-left .record-structure.selected{
  background:linear-gradient(90deg,rgba(255,255,255,.045),transparent 76%);
}
.record-side-right .record-structure.selected{
  background:linear-gradient(270deg,rgba(255,255,255,.045),transparent 76%);
}
.record-structure.selected .record-structure-index{color:rgba(246,246,242,.64)}
.record-structure.selected .record-structure-line{
  background:linear-gradient(90deg,rgba(232,231,227,.58),rgba(232,231,227,.025));
  box-shadow:0 0 14px rgba(232,231,227,.07);
}
.record-side-right .record-structure.selected .record-structure-line{
  background:linear-gradient(90deg,rgba(232,231,227,.025),rgba(232,231,227,.58));
}
.record-core{
  min-height:438px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 40px 32px;
  text-align:center;
}
.record-core-mark{
  margin-bottom:24px;
  font:500 9px/1 var(--sans);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(232,231,227,.28);
}
.record-core-copy{
  min-height:116px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.record-core-copy strong{
  display:block;
  max-width:430px;
  font-family:"Bodoni MT","Bodoni 72",Didot,"Times New Roman",serif;
  font-size:30px;
  line-height:1.12;
  font-weight:400;
  letter-spacing:-.025em;
  color:rgba(247,247,244,.95);
  text-wrap:balance;
}
.record-core-copy p{
  max-width:420px;
  margin:12px 0 0;
  font:400 12px/1.62 var(--sans);
  color:rgba(232,231,227,.43);
  text-wrap:balance;
}
.record-archetype{
  appearance:none;
  width:100%;
  margin-top:28px;
  padding:16px 16px 16px;
  border:0;
  border-top:1px solid rgba(232,231,227,.07);
  border-bottom:1px solid rgba(232,231,227,.07);
  background:transparent;
  color:rgba(232,231,227,.68);
  cursor:pointer;
  text-align:center;
  font-family:var(--sans);
  transition:background .28s ease,color .28s ease,border-color .28s ease;
}
.record-archetype span{
  display:block;
  font-size:13px;
  font-weight:500;
  letter-spacing:-.008em;
}
.record-archetype small{
  display:block;
  max-height:0;
  overflow:hidden;
  opacity:0;
  margin-top:0;
  font-size:11px;
  line-height:1.55;
  color:rgba(232,231,227,.41);
  transition:max-height .3s ease,opacity .25s ease,margin .25s ease;
}
.record-archetype:hover,.record-archetype.selected{
  color:rgba(248,248,245,.96);
  background:rgba(255,255,255,.018);
  border-color:rgba(232,231,227,.11);
}
.record-archetype.selected small{
  max-height:64px;
  opacity:1;
  margin-top:8px;
}
.record-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:28px;
}
.record-primary,.record-secondary{
  appearance:none;
  min-height:44px;
  padding:0 20px;
  border-radius:11px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:-.004em;
  cursor:pointer;
  transition:transform .22s ease,background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease;
}
.record-primary{
  border:1px solid rgba(232,231,227,.19);
  background:rgba(232,231,227,.072);
  color:rgba(248,248,245,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.22);
}
.record-primary:hover{
  transform:translateY(-1px);
  background:rgba(232,231,227,.105);
  border-color:rgba(232,231,227,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 16px 36px rgba(0,0,0,.28);
}
.record-secondary{
  border:1px solid transparent;
  background:transparent;
  color:rgba(232,231,227,.38);
}
.record-secondary:hover{color:rgba(232,231,227,.72)}
.record-aperture.engaged .record-core-copy{animation:recordCoreShift .28s ease both}
@keyframes recordCoreShift{from{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:none}}

@media(max-width:940px){
  .record-aperture{grid-template-columns:1fr}
  .record-aperture::before,.record-aperture::after{display:none}
  .record-core{order:1;min-height:360px;border-bottom:1px solid rgba(232,231,227,.07)}
  .record-side{display:grid;grid-template-columns:repeat(3,1fr);padding:0}
  .record-side-left{order:2}
  .record-side-right{order:3;border-top:1px solid rgba(232,231,227,.07)}
  .record-side-left .record-structure,.record-side-right .record-structure{
    min-height:82px;
    grid-template-columns:1fr;
    gap:7px;
    padding:16px 12px;
    text-align:center;
    border-bottom:0;
    border-right:1px solid rgba(232,231,227,.055);
  }
  .record-side .record-structure:last-child{border-right:0}
  .record-structure-line{display:none}
}
@media(max-width:620px){
  .record-home{padding:80px 16px 32px;}
  .record-home-hero{margin-bottom:28px;}
  .record-home-kicker{margin-bottom:16px;}
  .record-home-hero h1{font-size:clamp(42px,12.8vw,58px);line-height:1.01}
  .record-home-lede{margin-top:20px;font-size:13px;line-height:1.65;}
  .record-aperture{border-radius:18px}
  .record-core{min-height:340px;padding:32px 20px 28px;}
  .record-core-copy strong{font-size:27px;}
  .record-side{grid-template-columns:1fr}
  .record-side-left .record-structure,.record-side-right .record-structure{
    min-height:58px;
    border-right:0;
    border-bottom:1px solid rgba(232,231,227,.055);
  }
  .record-actions{flex-direction:column;width:100%}
  .record-primary,.record-secondary{width:100%}
}

/* Mobile navigation and Record ordering: preserve the same hierarchy at narrow widths. */
@media(max-width:620px){
  .nav{height:56px;padding:0 12px;gap:8px;}
  .brand{font-size:15px;white-space:nowrap;}
  .brand small{display:none;}
  .nav-links{min-width:0;gap:0;justify-content:flex-end;}
  .nav-links a{font-size:10px;padding:8px 4px;border-radius:6px;white-space:nowrap;}
  .nav-links a.active::after{left:4px;right:4px;bottom:3px;}
  .record-side-right .record-structure-index{order:1;}
  .record-side-right .record-structure-name{order:2;}
}

/* ========================================================================== 
   Homepage approachability pass
   Preserve the seated composition and language. Add light, material, and
   responsive invitation so the Record feels alive before it is touched.
   ========================================================================== */
.record-home{
  padding-top:88px;
  background:
    radial-gradient(ellipse 70% 42% at 72% 0%,rgba(232,231,227,.055),transparent 62%),
    radial-gradient(ellipse 52% 34% at 18% 78%,rgba(232,231,227,.018),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.008),transparent 30%);
}
.record-home::after{
  content:"";
  position:absolute;
  inset:56px 0 auto;
  height:520px;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 4%,rgba(255,255,255,.07),rgba(255,255,255,.018) 34%,transparent 68%);
  filter:blur(22px);
  opacity:.72;
}
.record-home-hero{
  margin-bottom:40px;
}
.record-home-kicker{
  color:rgba(232,231,227,.42);
}
.record-home-hero h1{
  text-shadow:0 1px 0 rgba(255,255,255,.035),0 18px 60px rgba(0,0,0,.34);
}
.record-home-lede{
  color:rgba(232,231,227,.56);
}
.record-aperture{
  border-color:rgba(232,231,227,.19);
  background:
    radial-gradient(ellipse 58% 120% at 50% 18%,rgba(255,255,255,.032),transparent 56%),
    linear-gradient(112deg,rgba(255,255,255,.052),rgba(255,255,255,.014) 30%,rgba(255,255,255,.022) 66%,rgba(255,255,255,.043)),
    rgba(8,9,11,.74);
  box-shadow:
    0 52px 140px rgba(0,0,0,.58),
    0 18px 42px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.018),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.03);
  transition:border-color .45s ease,box-shadow .45s ease,transform .45s cubic-bezier(.16,1,.3,1);
}
.record-aperture:hover{
  border-color:rgba(232,231,227,.25);
  box-shadow:
    0 58px 150px rgba(0,0,0,.61),
    0 20px 48px rgba(0,0,0,.36),
    0 0 46px rgba(232,231,227,.035),
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(255,255,255,.04);
}
.record-reflection{
  width:18%;
  opacity:.48;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.012),rgba(255,255,255,.105),rgba(255,255,255,.018),transparent);
}
.record-core::before{
  content:"";
  position:absolute;
  inset:24px 18px;
  z-index:-1;
  border-radius:18px;
  background:radial-gradient(ellipse at 50% 28%,rgba(255,255,255,.032),transparent 62%);
  opacity:.8;
  pointer-events:none;
}
.record-core-mark{
  color:rgba(232,231,227,.36);
}
.record-core-copy strong{
  color:rgba(249,249,246,.98);
  text-shadow:0 10px 36px rgba(0,0,0,.32);
}
.record-core-copy p{
  color:rgba(232,231,227,.51);
}
.record-structure{
  position:relative;
  transition:background .32s ease,color .32s ease,transform .32s cubic-bezier(.16,1,.3,1);
}
.record-structure::after{
  content:"";
  position:absolute;
  inset:16px 10px;
  border-radius:12px;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.045),transparent 70%);
  opacity:0;
  transform:scale(.96);
  transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.record-structure:hover{
  color:rgba(249,249,246,.98);
}
.record-structure:hover::after,.record-structure.selected::after{
  opacity:1;
  transform:scale(1);
}
.record-side-left .record-structure:hover{transform:translateX(3px)}
.record-side-right .record-structure:hover{transform:translateX(-3px)}
.record-structure-name,.record-structure-index,.record-structure-line{position:relative;z-index:1}
.record-structure.selected .record-structure-name{
  text-shadow:0 0 20px rgba(232,231,227,.12);
}
.record-structure.selected .record-structure-line{
  box-shadow:0 0 18px rgba(232,231,227,.12);
}
.record-archetype{
  border-color:rgba(232,231,227,.085);
  color:rgba(232,231,227,.74);
}
.record-archetype:hover,.record-archetype.selected{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.026),transparent);
  border-color:rgba(232,231,227,.15);
}
.record-actions{margin-top:24px}
.record-primary{
  min-height:48px;
  padding:0 24px;
  border-color:rgba(232,231,227,.27);
  border-radius:13px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.045)),
    rgba(232,231,227,.035);
  color:rgba(252,252,249,.98);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 14px 36px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.018);
}
.record-primary:hover,.record-primary:focus-visible{
  transform:translateY(-2px);
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.062)),
    rgba(232,231,227,.045);
  border-color:rgba(232,231,227,.43);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.21),
    0 18px 42px rgba(0,0,0,.31),
    0 0 30px rgba(232,231,227,.075);
  outline:none;
}
.record-primary:focus-visible{box-shadow:0 0 0 2px rgba(232,231,227,.34),0 18px 42px rgba(0,0,0,.31),0 0 30px rgba(232,231,227,.075)}
.record-aperture.engaged{
  border-color:rgba(232,231,227,.28);
  box-shadow:
    0 58px 150px rgba(0,0,0,.61),
    0 20px 48px rgba(0,0,0,.36),
    0 0 54px rgba(232,231,227,.045),
    inset 0 1px 0 rgba(255,255,255,.18);
}
@media(max-width:620px){
  .record-home{padding-top:76px}
  .record-home::after{height:360px}
  .loom-promise{grid-template-columns:1fr}
  .record-side-left .record-structure:hover,.record-side-right .record-structure:hover{transform:none}
  .record-primary{width:min(280px,100%);justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .record-reflection{animation:none}
  .record-aperture,.record-structure,.record-structure::after,.record-primary{transition:none}
}

/* Mobile nav: brand holds its ground; links scroll horizontally instead of sliding under it. */
@media(max-width:620px){
  .nav .brand{flex:0 0 auto;position:relative;z-index:1;}
  .nav-links{flex:1 1 auto;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);}
  .nav-links::-webkit-scrollbar{display:none;}
  .nav-links a[data-nav="/onboard"]{margin-left:0!important;padding-left:8px!important;}
}

/* Center line: keep lines even so no word is stranded alone. */
.record-core-copy strong{text-wrap:balance;}

/* Sol's reading in progress: the same illumination language, breathing slowly. */
.reading-working{margin-top:16px;animation:reading-breathe 3.2s ease-in-out infinite;}
.reading-working .note{margin-top:8px;}
@keyframes reading-breathe{0%,100%{opacity:.78}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.reading-working{animation:none;}}

/* Two actions in the narrow center: stack them so neither label breaks mid-phrase. */
.record-core .record-actions{flex-direction:column;align-items:center;gap:var(--s-2);}
.record-core .record-primary,.record-core .record-secondary{white-space:nowrap;}