/* ===================================================================== LIVING STORIES — Design System A small archive system: warm paper, charcoal ink, heritage green, brass accents. Newsreader (editorial serif) + Archivo (grotesque UI) + Space Mono (captions / metadata). ===================================================================== */ /* ---- fonts (import in if not already present) ---- Newsreader 300/400/500 · Archivo 400/500/600/700 · Space Mono 400 */ :root{ /* ---------- COLOR ---------- */ --paper:#F4EEE2; /* page background (warm off-white) */ --paper-2:#EFE7D6; /* raised / alternating section */ --paper-3:#E8DFCB; /* sunken / placeholder fill */ --ink:#23211C; /* primary text (deep charcoal) */ --ink-70:#544F44; /* secondary text */ --ink-50:#837C6D; /* tertiary text / metadata */ --line:rgba(35,33,28,0.13); --line-2:rgba(35,33,28,0.07); --green:#3C5A47; /* primary accent · orgs, links, actions */ --green-2:#2F4838; /* primary hover */ --green-tint:#E4E9E0; --blue:#35495E; /* secondary accent · places */ --blue-tint:#E1E6EC; --brass:#A9854E; /* gold accent · eyebrows, dates, themes */ --brass-2:#8A6C3C; --brass-tint:#EFE3CB; /* status hues */ --amber:#9A7A2E; /* needs review / draft */ --amber-tint:#F0E6C9; --terracotta:#8C4A3B; /* error / private */ --terracotta-tint:#F0DDD6; --link:var(--green); --link-hover:var(--brass-2); /* ---------- TYPE ---------- */ --serif:'Newsreader',Georgia,'Times New Roman',serif; --sans:'Archivo',system-ui,-apple-system,sans-serif; --mono:'Space Mono','SFMono-Regular',monospace; --t-display:64px; --t-display-lh:1.0; --t-h1:44px; --t-h1-lh:1.04; --t-h2:32px; --t-h2-lh:1.1; --t-h3:23px; --t-h3-lh:1.2; --t-lead:21px; --t-lead-lh:1.5; --t-body:18px; --t-body-lh:1.62; --t-small:15px; --t-small-lh:1.5; --t-label:12px; /* uppercased, letterspaced sans */ --t-mono:12px; /* ---------- SPACING (base 8) ---------- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:88px; --s-10:120px; /* ---------- WIDTHS ---------- */ --w-narrow:720px; /* reading measure */ --w-content:1140px; /* default page */ --w-wide:1280px; /* full-bleed grids, embeds */ /* ---------- RADIUS ---------- */ --r-sm:3px; --r:4px; --r-lg:6px; --r-pill:40px; /* ---------- SHADOW (sparing, archival = subtle) ---------- */ --shadow-sm:0 1px 2px rgba(35,33,28,0.05); --shadow:0 14px 30px -22px rgba(35,33,28,0.45); --shadow-lift:0 22px 44px -26px rgba(35,33,28,0.5); --ease:cubic-bezier(0.22,0.61,0.36,1); } /* ===================================================================== BASE ===================================================================== */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--serif);font-size:var(--t-body);line-height:var(--t-body-lh); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } ::selection{background:var(--brass-tint);} h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-0.015em;margin:0;color:var(--ink);} p{margin:0 0 1em;text-wrap:pretty;} a.ls-link{color:var(--link);text-decoration:none;border-bottom:1px solid rgba(60,90,71,0.35); transition:color .15s var(--ease),border-color .15s var(--ease);} a.ls-link:hover{color:var(--link-hover);border-color:var(--link-hover);} /* ---------- TYPE UTILITIES ---------- */ .ls-display{font-size:var(--t-display);line-height:var(--t-display-lh);letter-spacing:-0.02em;font-weight:400;} .ls-h1{font-size:var(--t-h1);line-height:var(--t-h1-lh);} .ls-h2{font-size:var(--t-h2);line-height:var(--t-h2-lh);} .ls-h3{font-size:var(--t-h3);line-height:var(--t-h3-lh);font-weight:500;} .ls-lead{font-size:var(--t-lead);line-height:var(--t-lead-lh);font-weight:300;color:var(--ink-70);} .ls-body{font-size:var(--t-body);line-height:var(--t-body-lh);} .ls-small{font-size:var(--t-small);line-height:var(--t-small-lh);color:var(--ink-70);} .ls-eyebrow{font-family:var(--sans);font-size:var(--t-label);font-weight:600; letter-spacing:0.18em;text-transform:uppercase;color:var(--brass);} .ls-caption{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:0.02em;color:var(--ink-50);} .ls-credit{font-family:var(--mono);font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-50);} /* ===================================================================== LAYOUT ===================================================================== */ .ls-wrap{max-width:var(--w-content);margin:0 auto;padding:0 var(--s-7);} .ls-wrap.narrow{max-width:var(--w-narrow);} .ls-wrap.wide{max-width:var(--w-wide);} .ls-section{padding:var(--s-9) 0;border-bottom:1px solid var(--line);} .ls-section.alt{background:var(--paper-2);} @media(max-width:600px){ .ls-wrap{padding:0 var(--s-5);} .ls-section{padding:var(--s-8) 0;} } /* ---------- SECTION HEADING ---------- */ .ls-section-head{margin-bottom:var(--s-7);} .ls-section-head h2{font-size:var(--t-h2);margin-top:var(--s-3);} .ls-section-head .ls-lead{margin-top:var(--s-3);max-width:52ch;} /* ===================================================================== PAGE CHROME — header, breadcrumb, subnav, footer ===================================================================== */ .ls-header{border-bottom:1px solid var(--line);background:var(--paper);} .ls-header .bar{display:flex;align-items:center;justify-content:space-between; height:60px;max-width:var(--w-content);margin:0 auto;padding:0 var(--s-7);} .ls-wordmark{font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:0.16em; text-transform:uppercase;display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;} .ls-wordmark .mk{width:10px;height:10px;background:var(--green);transform:rotate(45deg);border-radius:1px;flex:none;} .ls-mainnav{display:flex;gap:var(--s-2);} .ls-mainnav a{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0.03em; color:var(--ink-50);text-decoration:none;padding:8px 12px;border-radius:var(--r-sm);transition:color .15s var(--ease);} .ls-mainnav a:hover{color:var(--ink);} .ls-mainnav a.active{color:var(--green);} .ls-breadcrumb{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:12.5px; letter-spacing:0.04em;color:var(--ink-50);text-transform:uppercase;} .ls-breadcrumb a{color:var(--ink-50);text-decoration:none;transition:color .15s var(--ease);} .ls-breadcrumb a:hover{color:var(--green);} .ls-breadcrumb .sep{opacity:0.5;} .ls-breadcrumb .here{color:var(--ink);} .ls-subnav{position:sticky;top:0;z-index:40;background:rgba(244,238,226,0.92); backdrop-filter:blur(10px);border-bottom:1px solid var(--line);} .ls-subnav .bar{display:flex;align-items:center;justify-content:space-between;height:54px; max-width:var(--w-content);margin:0 auto;padding:0 var(--s-7);} .ls-subnav .who{font-family:var(--serif);font-size:17px;font-weight:500;} .ls-subnav nav{display:flex;gap:4px;} .ls-subnav nav a{font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:0.04em; text-transform:uppercase;color:var(--ink-50);text-decoration:none;padding:8px 13px;border-radius:var(--r-sm); position:relative;transition:color .15s var(--ease);} .ls-subnav nav a:hover{color:var(--ink);} .ls-subnav nav a.active{color:var(--green);} .ls-subnav nav a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:1px;height:2px;background:var(--green);} .ls-footer{padding:var(--s-8) 0;background:var(--paper);} .ls-footer .row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-7);flex-wrap:wrap; max-width:var(--w-content);margin:0 auto;padding:0 var(--s-7);} .ls-footer .note{max-width:54ch;font-weight:300;font-size:17px;line-height:1.55;color:var(--ink-70);} .ls-footer .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-5);} /* ===================================================================== HERO ===================================================================== */ .ls-hero{padding:var(--s-9) 0 var(--s-8);border-bottom:1px solid var(--line);} .ls-hero.split .inner{display:grid;grid-template-columns:1.02fr 0.78fr;gap:var(--s-8);align-items:center; max-width:var(--w-content);margin:0 auto;padding:0 var(--s-7);} .ls-hero.center{text-align:center;} .ls-hero.center .inner{max-width:var(--w-content);margin:0 auto;padding:0 var(--s-7);} .ls-hero h1{font-size:var(--t-display);line-height:var(--t-display-lh);letter-spacing:-0.02em;margin-top:var(--s-4);text-wrap:balance;} .ls-hero .sub{font-size:22px;line-height:1.5;color:var(--ink-70);font-weight:300;margin-top:var(--s-5);max-width:32ch;} .ls-hero.center .sub{margin-left:auto;margin-right:auto;} .ls-hero .cta-row{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6);} .ls-hero.center .cta-row{justify-content:center;} @media(max-width:820px){ .ls-hero.split .inner{grid-template-columns:1fr;} .ls-hero h1{font-size:48px;} } /* ---------- STORY INTRO BLOCK ---------- */ .ls-intro{display:grid;grid-template-columns:0.9fr 1.1fr;gap:var(--s-8);align-items:start;} .ls-intro .lead{font-size:30px;line-height:1.45;font-weight:300;letter-spacing:-0.01em;max-width:24ch;} .ls-intro .body{color:var(--ink-70);max-width:46ch;} @media(max-width:820px){ .ls-intro{grid-template-columns:1fr;gap:var(--s-5);} } /* ---------- METADATA ROW ---------- */ .ls-meta{display:flex;align-items:center;flex-wrap:wrap;gap:13px;font-family:var(--sans); font-size:13px;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-50);} .ls-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-50);flex:none;} /* ===================================================================== BUTTONS ===================================================================== */ .btn{font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:0.01em; padding:13px 23px;border-radius:var(--r-sm);cursor:pointer;border:1px solid transparent; display:inline-flex;align-items:center;gap:9px;text-decoration:none;transition:all .18s var(--ease);white-space:nowrap;} .btn svg{width:15px;height:15px;flex:none;} .btn-primary{background:var(--green);color:var(--paper);} .btn-primary:hover{background:var(--green-2);transform:translateY(-1px);} .btn-secondary{background:transparent;color:var(--ink);border-color:var(--line);} .btn-secondary:hover{border-color:var(--ink);background:rgba(35,33,28,0.03);} .btn-ghost{background:transparent;color:var(--green);padding:10px 12px;} .btn-ghost:hover{color:var(--green-2);background:var(--green-tint);} .btn-sm{font-size:13px;padding:9px 15px;} .btn-listen{background:var(--green);color:var(--paper);} .btn-listen:hover{background:var(--green-2);transform:translateY(-1px);} .btn-listen .play{width:22px;height:22px;border-radius:50%;background:rgba(244,238,226,0.18); display:inline-flex;align-items:center;justify-content:center;margin-left:-4px;} .btn-listen .play svg{width:11px;height:11px;} /* ===================================================================== FORMS / SEARCH ===================================================================== */ .ls-field{display:flex;flex-direction:column;gap:7px;} .ls-field label{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0.06em; text-transform:uppercase;color:var(--ink-50);} .ls-input,.ls-select{font-family:var(--serif);font-size:16px;color:var(--ink);background:var(--paper); border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;transition:border-color .15s var(--ease),box-shadow .15s var(--ease);} .ls-input:focus,.ls-select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint);} .ls-input::placeholder{color:var(--ink-50);} .ls-search{position:relative;display:inline-flex;align-items:center;width:100%;max-width:420px;} .ls-search svg{position:absolute;left:14px;width:16px;height:16px;color:var(--ink-50);pointer-events:none;} .ls-search input{width:100%;font-family:var(--serif);font-size:16px;color:var(--ink);background:var(--paper); border:1px solid var(--line);border-radius:var(--r-pill);padding:12px 16px 12px 40px;transition:border-color .15s var(--ease),box-shadow .15s var(--ease);} .ls-search input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint);} .ls-search kbd{position:absolute;right:12px;font-family:var(--mono);font-size:11px;color:var(--ink-50); border:1px solid var(--line);border-radius:3px;padding:2px 6px;} /* ===================================================================== CARDS (base + variants) ===================================================================== */ .ls-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r); overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);} .ls-card.hover:hover,a.ls-card:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow);} .ls-card .body{padding:var(--s-5);display:flex;flex-direction:column;flex:1;} .ls-card .foot{margin-top:auto;padding-top:var(--s-5);display:flex;align-items:center;gap:13px;flex-wrap:wrap;} /* PERSON PROFILE CARD */ .person-card{align-items:flex-start;} .person-card .top{display:flex;gap:var(--s-4);align-items:center;padding:var(--s-5);width:100%;} .person-card .avatar{width:64px;height:64px;border-radius:50%;flex:none;background:var(--paper-3); background-image:repeating-linear-gradient(135deg,rgba(35,33,28,0.08) 0 2px,transparent 2px 7px); border:1px solid var(--line);filter:grayscale(1);} .person-card h3{font-size:21px;} .person-card .role{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0.06em; text-transform:uppercase;color:var(--green);margin-top:4px;} .person-card .life{font-family:var(--mono);font-size:12px;color:var(--ink-50);margin-top:4px;} .person-card .bio{padding:0 var(--s-5) var(--s-5);color:var(--ink-70);font-size:16px;line-height:1.5;} /* EVENT CARD */ .event-card .ph{aspect-ratio:16/10;border-bottom:1px solid var(--line);} .event-card .yr{font-family:var(--mono);font-size:13px;letter-spacing:0.06em;color:var(--brass-2);} .event-card h3{margin-top:var(--s-2);font-size:22px;font-weight:500;line-height:1.18;} .event-card p{font-size:16px;line-height:1.5;color:var(--ink-70);margin:var(--s-3) 0 0;} /* SOURCE / ASSET CARD */ .source-card .thumb{aspect-ratio:5/4;position:relative;border-bottom:1px solid var(--line);} .source-card h4{font-size:19px;font-weight:500;line-height:1.22;} .source-card .by{font-size:14px;color:var(--ink-50);margin-top:5px;font-style:italic;font-weight:300;} .source-card .view{margin-top:auto;padding-top:var(--s-4);display:flex;align-items:center;gap:8px; font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--green);} .source-card .view .arr{transition:transform .2s var(--ease);} a.source-card:hover .view .arr,.source-card.hover:hover .view .arr{transform:translateX(4px);} /* STORY CARD (larger editorial tile) */ .story-card .ph{aspect-ratio:3/2;border-bottom:1px solid var(--line);} .story-card h3{font-size:26px;font-weight:400;line-height:1.12;} .story-card .excerpt{color:var(--ink-70);font-size:16px;line-height:1.5;margin-top:var(--s-3);} /* avatar stack (connected people) */ .avatar-stack{display:flex;align-items:center;} .avatar-stack .av{width:26px;height:26px;border-radius:50%;background:var(--paper-3);border:2px solid var(--paper); margin-left:-8px;background-image:repeating-linear-gradient(135deg,rgba(35,33,28,0.08) 0 2px,transparent 2px 6px);filter:grayscale(1);} .avatar-stack .av:first-child{margin-left:0;} /* ===================================================================== TAGS & BADGES ===================================================================== */ .tag{font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:0.02em; display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--r-pill); border:1px solid var(--line);background:var(--paper);color:var(--ink-70);text-decoration:none;transition:all .15s var(--ease);} .tag .d{width:7px;height:7px;border-radius:50%;flex:none;} a.tag:hover{border-color:var(--ink);color:var(--ink);} .tag-theme{background:var(--brass-tint);border-color:transparent;color:var(--brass-2);} .tag-theme .d{background:var(--brass);} .tag-place{background:var(--blue-tint);border-color:transparent;color:var(--blue);} .tag-place .d{background:var(--blue);} /* DATE BADGE */ .date-badge{font-family:var(--mono);font-size:12px;letter-spacing:0.04em;color:var(--ink); border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 9px;display:inline-flex;align-items:center;gap:6px;background:var(--paper);} .date-badge.uncertain{border-style:dashed;color:var(--ink-50);} .date-badge.uncertain::after{content:"~";color:var(--amber);font-weight:700;} /* STATUS / PRIVACY BADGE */ .badge{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase; padding:4px 10px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;} .badge .ck{width:6px;height:6px;border-radius:50%;flex:none;} .badge-public{background:var(--green-tint);color:var(--green);} .badge-public .ck{background:var(--green);} .badge-private{background:var(--terracotta-tint);color:var(--terracotta);} .badge-private .ck{background:var(--terracotta);} .badge-draft{background:var(--paper-3);color:var(--ink-50);} .badge-draft .ck{background:var(--ink-50);} .badge-review{background:var(--amber-tint);color:var(--amber);} .badge-review .ck{background:var(--amber);} /* SOURCE COUNT BADGE */ .count-badge{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase; color:var(--ink-50);display:inline-flex;align-items:center;gap:6px;} .count-badge svg{width:13px;height:13px;} /* CONFIDENCE / REVIEW BADGE */ .confidence{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase; display:inline-flex;align-items:center;gap:7px;color:var(--ink-70);} .confidence .meter{display:flex;gap:2px;} .confidence .meter i{width:5px;height:11px;border-radius:1px;background:var(--line);} .confidence.high .meter i{background:var(--green);} .confidence.med .meter i:nth-child(-n+2){background:var(--amber);} .confidence.low .meter i:nth-child(1){background:var(--terracotta);} /* ===================================================================== MEDIA ===================================================================== */ /* placeholder fill (drop real archival imagery here) */ .ph{position:relative;overflow:hidden;background:var(--paper-3);filter:grayscale(1) contrast(1.02); background-image:repeating-linear-gradient(135deg,rgba(35,33,28,0.05) 0 2px,transparent 2px 11px);border:1px solid var(--line);} .ph .cap{position:absolute;left:12px;bottom:11px;right:12px;font-family:var(--mono);font-size:10.5px; letter-spacing:0.04em;color:var(--ink-50);text-transform:uppercase;line-height:1.4;} .ph .tag-corner{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:10px;letter-spacing:0.06em; background:var(--paper);border:1px solid var(--line);padding:4px 8px;color:var(--ink-70);text-transform:uppercase;} /* ARCHIVAL IMAGE FRAME */ .img-frame{background:var(--paper);padding:10px;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);} .img-frame .ph{border-radius:2px;} .img-frame .credit-line{margin-top:9px;display:flex;justify-content:space-between;gap:12px;} /* DOCUMENT / PDF PREVIEW */ .doc-preview{position:relative;aspect-ratio:5/4;background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r); background-image:repeating-linear-gradient(0deg,rgba(35,33,28,0.05) 0 1px,transparent 1px 9px);overflow:hidden;} .doc-preview .glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--serif);font-size:48px;color:rgba(35,33,28,0.16);} .doc-preview .type-label{position:absolute;top:12px;left:12px;font-family:var(--sans);font-size:10.5px;font-weight:600; letter-spacing:0.1em;text-transform:uppercase;padding:4px 9px;border-radius:2px;background:var(--paper);border:1px solid var(--line);color:var(--ink-70);} /* THUMBNAIL */ .thumb-sq{width:100%;aspect-ratio:1;border-radius:var(--r);overflow:hidden;} /* CAPTION + CREDIT lines already in type utilities (.ls-caption / .ls-credit) */ /* AUDIO PLAYER CARD */ .audio-card{background:var(--green);color:#EFE7D6;border-radius:var(--r-lg);padding:var(--s-7); position:relative;overflow:hidden;} .audio-card::after{content:"";position:absolute;inset:0;pointer-events:none; background-image:repeating-linear-gradient(135deg,rgba(255,255,255,0.025) 0 2px,transparent 2px 14px);} .audio-card *{position:relative;z-index:1;} .audio-card h3{color:#F4EEE2;font-size:28px;margin-top:var(--s-4);} .audio-card .desc{color:rgba(239,231,214,0.78);font-size:16px;line-height:1.5;font-weight:300;margin-top:var(--s-3);max-width:38ch;} .audio-card .player{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-5);} .play-btn{width:54px;height:54px;border-radius:50%;background:#EFE7D6;color:var(--green);border:none;cursor:pointer; flex:none;display:flex;align-items:center;justify-content:center;transition:transform .15s var(--ease);} .play-btn:hover{transform:scale(1.05);} .play-btn svg{width:18px;height:18px;} .audio-card .scrub{flex:1;height:4px;background:rgba(239,231,214,0.22);border-radius:3px;position:relative;} .audio-card .scrub .fill{position:absolute;left:0;top:0;bottom:0;width:38%;background:#EFE7D6;border-radius:3px;} .audio-card .tmono{font-family:var(--mono);font-size:12px;color:rgba(239,231,214,0.75);} /* VIDEO / MEDIA EMBED */ .media-embed{position:relative;aspect-ratio:16/9;background:var(--ink);border-radius:var(--r);overflow:hidden; border:1px solid var(--line);display:flex;align-items:center;justify-content:center;} .media-embed .play-big{width:66px;height:66px;border-radius:50%;background:rgba(244,238,226,0.92);color:var(--ink); display:flex;align-items:center;justify-content:center;} .media-embed .play-big svg{width:22px;height:22px;} .media-embed .lbl{position:absolute;bottom:12px;left:14px;font-family:var(--mono);font-size:11px;color:rgba(244,238,226,0.7);text-transform:uppercase;letter-spacing:0.04em;} /* ===================================================================== GRAPH ELEMENTS ===================================================================== */ /* RELATIONSHIP MAP (hub + spokes) */ .relmap{position:relative;height:420px;width:100%;} .relmap-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;} .relmap-lines line{stroke:rgba(35,33,28,0.22);stroke-width:1;} .relmap-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3; width:128px;height:128px;border-radius:50%;background:var(--green);color:#EFE7D6;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center;border:5px solid var(--paper);box-shadow:var(--shadow);} .relmap-center .nm{font-family:var(--serif);font-size:18px;line-height:1.05;font-weight:500;padding:0 12px;} .relmap-center .rl{font-family:var(--sans);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:#D9C79A;margin-top:5px;} .relmap-node{position:absolute;transform:translate(-50%,-50%);z-index:2;background:var(--paper);border:1px solid var(--line); border-radius:var(--r-pill);padding:8px 13px;display:flex;align-items:center;gap:8px;white-space:nowrap; transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);} .relmap-node:hover{border-color:var(--brass);transform:translate(-50%,-50%) scale(1.04);box-shadow:var(--shadow);} .relmap-node .d{width:8px;height:8px;border-radius:50%;flex:none;} .relmap-node .tx{font-family:var(--sans);font-size:13px;font-weight:500;} .relmap-node small{font-family:var(--sans);font-size:9.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-50);display:block;} .d-person{background:var(--brass);} .d-place{background:var(--blue);} .d-org{background:var(--green);} .d-theme{background:#7A6F5C;} /* CONNECTED-TO LIST */ .connected-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;} .connected-list a,.connected-list .item{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--paper); text-decoration:none;color:var(--ink);transition:background .15s var(--ease);} .connected-list a:hover{background:var(--paper-2);} .connected-list .d{width:8px;height:8px;border-radius:50%;flex:none;} .connected-list .nm{font-family:var(--sans);font-size:14.5px;font-weight:500;} .connected-list .kind{font-family:var(--sans);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-50);margin-left:auto;} /* PERSON-EVENT-SOURCE CONNECTION ROW */ .connection-row{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:14px; padding:14px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);} .connection-row .node{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13.5px;font-weight:500;} .connection-row .node small{font-family:var(--sans);font-size:10px;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-50);display:block;font-weight:600;} .connection-row .link{height:1px;background:var(--line);min-width:24px;position:relative;} .connection-row .link::after{content:attr(data-rel);position:absolute;top:-8px;left:50%;transform:translateX(-50%); font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-50);background:var(--paper);padding:0 6px;white-space:nowrap;} /* SOURCE TRAIL / EVIDENCE BLOCK */ .source-trail{border-left:2px solid var(--green);background:var(--paper-2);border-radius:0 var(--r) var(--r) 0;padding:18px 22px;} .source-trail .hd{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--green);} .source-trail ol{margin:12px 0 0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:9px;} .source-trail li{font-size:15px;color:var(--ink-70);line-height:1.45;} .source-trail li b{color:var(--ink);font-weight:500;} /* TIMELINE MILESTONE */ .milestone-track{position:relative;} .milestone-line{position:absolute;left:0;right:0;top:13px;height:1px;background:var(--line);} .milestones{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:relative;} .milestone{padding-right:24px;} .milestone .dot{width:13px;height:13px;border-radius:50%;background:var(--paper);border:3px solid var(--paper); outline:1px solid var(--ink-50);position:relative;z-index:1;margin-bottom:18px;} .milestone.key .dot{background:var(--brass);outline-color:var(--brass);} .milestone .yr{font-family:var(--serif);font-size:26px;line-height:1;} .milestone .lab{font-family:var(--sans);font-size:12.5px;color:var(--ink-50);margin-top:8px;line-height:1.4;max-width:18ch;} /* PLACE MARKER */ .place-marker{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--blue);} .place-marker .pin{width:22px;height:22px;border-radius:50% 50% 50% 0;background:var(--blue);transform:rotate(-45deg); display:inline-flex;align-items:center;justify-content:center;flex:none;} .place-marker .pin::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--paper);} /* THEME CLOUD / TOPIC LIST */ .theme-cloud{display:flex;flex-wrap:wrap;gap:9px;align-items:baseline;} .theme-cloud a{font-family:var(--sans);font-weight:600;color:var(--ink-70);text-decoration:none;letter-spacing:0.01em;transition:color .15s var(--ease);} .theme-cloud a:hover{color:var(--green);} .theme-cloud a .ct{font-family:var(--mono);font-size:0.62em;color:var(--brass-2);vertical-align:super;margin-left:2px;} /* ===================================================================== NOTEBOOKLM AUDIO ELEMENTS ===================================================================== */ .episode-card{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-4);align-items:center; padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r);background:var(--paper);transition:border-color .2s var(--ease),box-shadow .2s var(--ease);} .episode-card:hover{border-color:var(--ink);box-shadow:var(--shadow);} .episode-card .cover{width:72px;height:72px;border-radius:var(--r);flex:none;background:var(--green);color:#EFE7D6; display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;} .episode-card .cover svg{width:24px;height:24px;} .episode-card .cover::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,0.06) 0 2px,transparent 2px 9px);} .episode-card h4{font-size:19px;font-weight:500;} .episode-card .sub{font-family:var(--sans);font-size:12.5px;color:var(--ink-50);margin-top:4px;letter-spacing:0.02em;} .episode-card .listen{flex:none;} .audio-status{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase; display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:var(--r-pill);} .audio-status .ck{width:6px;height:6px;border-radius:50%;} .audio-status.planned{background:var(--paper-3);color:var(--ink-50);} .audio-status.planned .ck{background:var(--ink-50);} .audio-status.generated{background:var(--blue-tint);color:var(--blue);} .audio-status.generated .ck{background:var(--blue);} .audio-status.reviewed{background:var(--green-tint);color:var(--green);} .audio-status.reviewed .ck{background:var(--green);} .source-packet{font-family:var(--mono);font-size:11.5px;color:var(--ink-50);letter-spacing:0.02em; display:inline-flex;align-items:center;gap:8px;border:1px dashed var(--line);border-radius:var(--r-sm);padding:6px 11px;} .transcript{border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);padding:var(--s-5);} .transcript .hd{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-50);margin-bottom:12px;} .transcript .turn{display:grid;grid-template-columns:auto 1fr;gap:14px;margin-bottom:14px;} .transcript .turn .spk{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--green);white-space:nowrap;} .transcript .turn p{margin:0;font-size:16px;color:var(--ink-70);line-height:1.5;} .episode-sources{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;} .episode-sources .es{display:flex;align-items:center;gap:11px;padding:11px 15px;background:var(--paper);font-family:var(--sans);font-size:13.5px;} .episode-sources .es .n{font-family:var(--mono);font-size:11px;color:var(--ink-50);width:20px;flex:none;} .episode-sources .es .ty{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-50);} /* ===================================================================== KNIGHT LAB EMBEDS ===================================================================== */ .embed-frame{border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);overflow:hidden;} .embed-frame .bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--paper);} .embed-frame .bar .kl{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-50);} .embed-frame .bar .kl b{color:var(--green);} .embed-frame .stage{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative; background-image:repeating-linear-gradient(135deg,rgba(35,33,28,0.04) 0 2px,transparent 2px 12px);} .embed-frame .stage .ec{font-family:var(--mono);font-size:12px;color:var(--ink-50);text-transform:uppercase;letter-spacing:0.04em;} .soundcite{display:inline;border-bottom:2px solid var(--brass);cursor:pointer;padding-bottom:1px; background:linear-gradient(var(--brass-tint),var(--brass-tint)) no-repeat;background-size:0% 100%;transition:background-size .3s var(--ease);} .soundcite:hover{background-size:100% 100%;} .soundcite .sc-btn{display:inline-flex;width:15px;height:15px;border-radius:50%;background:var(--brass);color:var(--paper); align-items:center;justify-content:center;vertical-align:middle;margin-right:4px;} .soundcite .sc-btn svg{width:8px;height:8px;} .interactive-callout{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-5) var(--s-6); border:1px solid var(--green);border-radius:var(--r);background:var(--green-tint);} .interactive-callout .ic{width:44px;height:44px;border-radius:var(--r);background:var(--green);color:#EFE7D6; display:flex;align-items:center;justify-content:center;flex:none;} .interactive-callout .ic svg{width:20px;height:20px;} .interactive-callout .tx h4{font-size:18px;font-weight:500;} .interactive-callout .tx p{margin:3px 0 0;font-size:14.5px;color:var(--ink-70);} .interactive-callout .btn{margin-left:auto;} /* ===================================================================== CONTENT STATES ===================================================================== */ .state{border:1px dashed var(--line);border-radius:var(--r);padding:var(--s-6);text-align:center;color:var(--ink-50);background:var(--paper);} .state .ic{width:38px;height:38px;border-radius:50%;background:var(--paper-3);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--ink-50);} .state .ic svg{width:18px;height:18px;} .state h4{font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:500;} .state p{font-family:var(--sans);font-size:13.5px;margin:6px auto 0;max-width:36ch;line-height:1.5;} .state .btn{margin-top:var(--s-4);} .state.draft{border-style:solid;border-color:var(--line);background:var(--paper-2);} .state.review{border-color:var(--amber);background:var(--amber-tint);color:var(--amber);} .state.review h4{color:var(--amber);} .state.error{border-color:var(--terracotta);background:var(--terracotta-tint);color:var(--terracotta);} .state.error h4{color:var(--terracotta);} .state.uncertain{border-style:dashed;} /* skeleton loading */ .skeleton{position:relative;overflow:hidden;background:var(--paper-3);border-radius:var(--r);} .skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(244,238,226,0.6),transparent);animation:ls-shimmer 1.4s infinite;} @keyframes ls-shimmer{100%{transform:translateX(100%);}} .skeleton-line{height:12px;border-radius:3px;margin-bottom:10px;}