/* ============================================================
   THE WRITTEN RECORD — cosmic branding
   Aligns the archive pages (Overview, Surnames, Stories, Person)
   with the Tree of Light hub: deep-space grounds, serif names,
   mono meta, lineage light. Shared by all four record pages.
   ============================================================ */
:root{
  --void-0:#03050e; --void-1:#070b1a; --void-2:#0c1228;
  --ink:#eef2ff; --ink-2:#c8d3f2; --ink-3:#8e9bc4; --ink-4:#5d6a92;
  --gold:#FFC766; --gold-soft:#FFE6AE; --trunk:#FFEFC8;
  --azure:#6FB0FF; --violet:#B292FF; --coral:#FF9A6E; --kin:#9FB6E6;
  --line-1:rgba(150,170,220,.12); --line-2:rgba(150,170,220,.22); --line-gold:rgba(255,199,102,.45);
  --glass-1:rgba(12,18,40,.5); --glass-2:rgba(18,26,54,.62); --glass-3:rgba(9,13,30,.9);
  --serif:'Cormorant',Georgia,serif; --sans:'Space Grotesk',system-ui,sans-serif; --mono:'Space Mono',monospace;
  --ease:cubic-bezier(.7,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:radial-gradient(130% 90% at 50% -8%, #0c1228 0%, #06091a 46%, #03050e 100%);
  background-attachment:fixed;
  color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; min-height:100vh;
}
body::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.3px 1.3px at 68% 58%, rgba(160,190,255,.4), transparent),
    radial-gradient(1.4px 1.4px at 40% 82%, rgba(255,235,200,.35), transparent),
    radial-gradient(1.1px 1.1px at 86% 30%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 26% 64%, rgba(255,255,255,.28), transparent),
    radial-gradient(1.2px 1.2px at 92% 74%, rgba(180,200,255,.3), transparent);
  opacity:.6; }

/* ---- nav ---- */
.site-nav{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:16px 34px; background:rgba(4,6,15,.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-1); flex-wrap:wrap; }
.site-nav-brand{ font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); text-decoration:none; text-shadow:0 0 24px rgba(255,199,102,.22); white-space:nowrap; }
.site-nav-brand em{ font-style:italic; color:var(--gold); }
.site-nav-brand .ver{ font-family:var(--mono); font-size:8.5px; font-weight:700; letter-spacing:.14em; color:var(--ink-3); vertical-align:super; margin-left:5px; }
.site-nav-links{ display:flex; gap:24px; align-items:center; }
.site-nav-links a{ font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); text-decoration:none; transition:color .2s; }
.site-nav-links a:hover{ color:var(--ink); }
.site-nav-links a.active{ color:var(--gold); }

/* ---- page shell ---- */
.page{ position:relative; z-index:1; width:min(1160px,92vw); margin:0 auto; padding:56px 0 40px; }
.section-eyebrow{ font-family:var(--mono); font-size:10.5px; letter-spacing:.36em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; }
h1{ font-family:var(--serif); font-weight:500; font-size:clamp(40px,6vw,66px); line-height:1; letter-spacing:-.01em; color:var(--ink); text-shadow:0 0 60px rgba(140,160,255,.16); }
h1 em{ font-style:italic; color:var(--gold); }
.tagline{ font-family:var(--serif); font-style:italic; font-size:clamp(18px,2.2vw,24px); color:var(--ink-2); margin-top:14px; }
.section-title{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,4vw,40px); color:var(--ink); }

.masthead{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.masthead .meta{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-3); line-height:2.1; text-align:right; }
.masthead .meta b{ color:var(--gold); font-weight:400; }

/* rule / ornament */
.rule{ height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent); border:0; }
.ornament-row{ display:flex; align-items:center; gap:16px; color:var(--gold); }
.ornament-row .rule-thin{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent); }
.ornament-row .glyph{ font-family:var(--serif); font-style:italic; font-size:22px; color:var(--gold); opacity:.8; }

/* ---- field / search ---- */
.field{ font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--glass-2); border:1px solid var(--line-2);
  border-radius:12px; padding:13px 17px; outline:none; backdrop-filter:blur(12px); transition:border-color .2s,background .2s; }
.field::placeholder{ color:var(--ink-3); }
.field:focus{ border-color:var(--line-gold); background:rgba(18,26,54,.82); }

/* ---- badges / chips ---- */
.badge{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  color:var(--ink-2); background:var(--glass-1); border:1px solid var(--line-2); border-radius:999px; padding:5px 12px; text-decoration:none; }
.badge:hover{ border-color:var(--line-gold); color:var(--ink); }
.badge.era{ color:var(--gold); }
.badge .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.badge.living{ color:#7ee0b4; } .badge.deceased{ color:var(--ink-3); }
.lin-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; background:currentColor; box-shadow:0 0 12px currentColor; }
.l-widdowson{ color:var(--gold); } .l-holden{ color:var(--azure); } .l-killer{ color:var(--violet); }
.l-treacy{ color:var(--coral); } .l-other{ color:var(--kin); }

/* ---- grids & cards ---- */
.grid{ display:grid; gap:16px; }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
.person-card{ display:flex; flex-direction:column; gap:5px; padding:18px 20px; background:var(--glass-1);
  border:1px solid var(--line-1); border-radius:14px; backdrop-filter:blur(10px); text-decoration:none; color:var(--ink);
  transition:border-color .25s, transform .35s var(--ease), background .25s; }
.person-card:hover{ border-color:var(--line-gold); transform:translateY(-3px); background:var(--glass-2); }
.person-card .person-name{ font-family:var(--serif); font-size:22px; font-weight:600; line-height:1.08; color:var(--ink); }
.person-card .person-name strong{ font-weight:600; }
.person-card .person-dates{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--gold); }
.person-card .person-meta{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink-3); }
.person-meta-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:2px; }

/* ---- buttons ---- */
.btn{ font-family:var(--sans); font-size:13px; font-weight:600; border-radius:999px; padding:10px 18px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-2); }
.btn-ghost{ background:var(--glass-1); color:var(--ink-2); backdrop-filter:blur(10px); }
.btn-ghost:hover{ border-color:var(--line-gold); color:var(--ink); }
.btn-gold{ background:linear-gradient(180deg,#FFE6AE,#FFC766); color:#07101f; border-color:transparent; }
.btn-gold:hover{ filter:brightness(1.06); }

/* ---- colophon ---- */
.colophon{ position:relative; z-index:1; text-align:center; padding:64px 34px 52px; margin-top:40px; border-top:1px solid var(--line-1); }
.colophon .cmark{ font-family:var(--serif); font-size:22px; color:var(--ink); }
.colophon .cmark em{ font-style:italic; color:var(--gold); }
.colophon .cmeta{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-4); margin-top:12px; line-height:2; }

@media (max-width:900px){ .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; } .site-nav-links{ gap:16px; } }

/* ============================================================
   MOBILE — phones & small tablets
   ============================================================ */
@media (max-width:640px){
  /* nav becomes a horizontally-scrollable strip under the wordmark */
  .site-nav{ padding:11px 16px; gap:9px; }
  .site-nav-brand{ font-size:17px; }
  .site-nav-links{ width:100%; gap:20px; align-items:center;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; }
  .site-nav-links::-webkit-scrollbar{ display:none; height:0; }
  .site-nav-links a{ white-space:nowrap; padding:5px 0; font-size:11px; }
  /* comfortable page rhythm */
  .page{ width:min(1160px,90vw); padding:34px 0 28px; }
  .masthead{ gap:16px; }
  .masthead .meta{ text-align:left; line-height:1.9; }
  .colophon{ padding:46px 18px 38px; }
  .colophon .cmeta{ letter-spacing:.16em; }
  /* larger tap targets for pill buttons */
  .btn{ padding:12px 20px; }
}
@media (max-width:400px){
  .site-nav-links{ gap:16px; }
  .grid{ gap:13px; }
}