/* =========================================================================== THE DOSSIER THEME — whiteladyofspringcanyon.com v1.0 · 2026-08-03 A drawing-sheet identity for sourced archival pages. Self-contained. No webfonts, no CDN, no external assets of any kind. --------------------------------------------------------------------------- Style components THROUGH the tokens. Never hard-code a colour in a rule. =========================================================================== */ :root{ /* ground */ --paper:#E6E3DB; /* cool stone, NOT warm cream */ --paper-2:#DEDAD1; /* raised panels, title block */ --paper-3:#D5D0C5; /* inset wells */ /* ink */ --ink:#16181C; /* near-black, slight blue bias */ --ink-2:#3E434B; /* body prose */ --ink-3:#6E7178; /* captions, labels, muted */ /* rules */ --line:#B9B5AA; --line-2:#C9C5BA; /* accents — semantic, not decorative */ --blue:#1D4E6E; /* cyanotype. structure, dates, source tags */ --blue-2:#4A7B99; --blue-wash:rgba(29,78,110,.09); --ember:#A63A1E; /* deaths, conflicts, unresolved. USE SPARINGLY */ --ember-wash:rgba(166,58,30,.10); --gold:#8A6D2F; /* material from OUTSIDE the archive */ /* the mark, if used */ --mark-invert:0; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,ui-serif,serif; } @media (prefers-color-scheme:dark){ :root{ --paper:#14161A; --paper-2:#1A1D22; --paper-3:#22262C; --ink:#E8E5DD; --ink-2:#B6B2A8; --ink-3:#87857D; --line:#333941; --line-2:#2A2F36; --blue:#7BB4D8; --blue-2:#5C90B0; --blue-wash:rgba(123,180,216,.10); --ember:#E2764F; --ember-wash:rgba(226,118,79,.12); --gold:#C6A45F; --mark-invert:1; } } /* The viewer's toggle stamps data-theme on . It MUST beat the media query in BOTH directions, so both blocks are restated. Do not delete either. */ :root[data-theme="dark"]{ --paper:#14161A; --paper-2:#1A1D22; --paper-3:#22262C; --ink:#E8E5DD; --ink-2:#B6B2A8; --ink-3:#87857D; --line:#333941; --line-2:#2A2F36; --blue:#7BB4D8; --blue-2:#5C90B0; --blue-wash:rgba(123,180,216,.10); --ember:#E2764F; --ember-wash:rgba(226,118,79,.12); --gold:#C6A45F; --mark-invert:1; } :root[data-theme="light"]{ --paper:#E6E3DB; --paper-2:#DEDAD1; --paper-3:#D5D0C5; --ink:#16181C; --ink-2:#3E434B; --ink-3:#6E7178; --line:#B9B5AA; --line-2:#C9C5BA; --blue:#1D4E6E; --blue-2:#4A7B99; --blue-wash:rgba(29,78,110,.09); --ember:#A63A1E; --ember-wash:rgba(166,58,30,.10); --gold:#8A6D2F; --mark-invert:0; } *{box-sizing:border-box} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } .sheet{max-width:1080px;margin:0 auto;padding:clamp(14px,3vw,34px)} .eyebrow{ font-family:var(--mono);font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-3); } /* ---------- title block ---------------------------------------------------- */ .block{border:2px solid var(--ink);background:var(--paper-2); display:grid;grid-template-columns:minmax(0,1fr) auto} .block-main{padding:clamp(18px,3vw,30px);min-width:0} .block-mark{border-left:1px solid var(--line);padding:22px;background:var(--paper-3); display:flex;align-items:center;justify-content:center} .block-mark img{width:clamp(96px,15vw,150px);height:auto;display:block; filter:invert(var(--mark-invert));opacity:.92} h1{font-family:var(--mono);font-weight:600;font-size:clamp(21px,4.4vw,38px); letter-spacing:.03em;line-height:1.12;margin:10px 0 6px;text-wrap:balance} .subtitle{font-size:clamp(15px,2.2vw,18px);color:var(--ink-2);margin:0 0 18px;max-width:56ch} .specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:1px;background:var(--line);border:1px solid var(--line)} .spec{background:var(--paper-2);padding:9px 12px} .spec dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-3);margin:0 0 3px} .spec dd{margin:0;font-family:var(--mono);font-size:13px;color:var(--ink); font-variant-numeric:tabular-nums} /* ---------- key ------------------------------------------------------------ */ .key{display:flex;flex-wrap:wrap;gap:8px 22px;padding:12px 2px; border-bottom:1px solid var(--line);margin-bottom:6px} .key span{font-family:var(--mono);font-size:11px;letter-spacing:.05em; color:var(--ink-2);display:flex;align-items:center;gap:7px} .chip{width:11px;height:11px;flex:none;border:1px solid currentColor} .chip-doc{background:var(--blue);color:var(--blue)} .chip-fatal{background:var(--ember);color:var(--ember)} .chip-conflict{background:transparent;color:var(--ember)} .chip-void{color:var(--line); background:repeating-linear-gradient(45deg,var(--line) 0 2px,transparent 2px 5px)} .chip-ext{background:transparent;color:var(--gold);border-style:dashed} /* ---------- sticky index --------------------------------------------------- */ nav.index{position:sticky;top:0;z-index:5;background:var(--paper); border-bottom:1px solid var(--line);display:flex;overflow-x:auto;margin:0 0 8px} nav.index a{font-family:var(--mono);font-size:11px;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-3);text-decoration:none; padding:11px 14px;white-space:nowrap;border-right:1px solid var(--line-2)} nav.index a:hover,nav.index a:focus-visible{color:var(--ink);background:var(--blue-wash)} /* ---------- sections ------------------------------------------------------- */ .era{margin:34px 0 0;scroll-margin-top:52px} .era-head{display:flex;align-items:baseline;gap:14px;padding-bottom:7px; border-bottom:2px solid var(--ink);flex-wrap:wrap} .era-num{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--blue)} .era-title{font-family:var(--mono);font-size:clamp(15px,2.6vw,20px);font-weight:600; letter-spacing:.02em;margin:0} .era-span{font-family:var(--mono);font-size:12px;color:var(--ink-3); margin-left:auto;font-variant-numeric:tabular-nums} .era-note{color:var(--ink-2);font-size:15px;margin:14px 0 0;max-width:68ch} /* ---------- entry ---------------------------------------------------------- */ .entry{display:grid;grid-template-columns:6.6rem minmax(0,1fr);gap:0 20px; padding:15px 0;border-bottom:1px solid var(--line-2)} .when{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--blue); font-variant-numeric:tabular-nums;letter-spacing:.02em;padding-top:2px} .when b{display:block;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:0} .what{min-width:0} .what h3{font-family:var(--serif);font-size:17px;font-weight:600;margin:0 0 5px; line-height:1.35;text-wrap:balance} .what p{margin:0 0 8px;color:var(--ink-2);font-size:15.5px;max-width:66ch} .what p:last-child{margin-bottom:0} .entry.fatal .when{color:var(--ember)} .entry.fatal .what h3::before{content:"\271A";color:var(--ember); font-family:var(--mono);margin-right:8px;font-size:14px} blockquote{margin:10px 0;padding:2px 0 2px 15px;border-left:2px solid var(--blue-2); font-size:15.5px;color:var(--ink);font-style:italic;max-width:62ch} /* the source line — the load-bearing element of the whole theme */ .src{font-family:var(--mono);font-size:10.5px;line-height:1.55;color:var(--ink-3); letter-spacing:.01em;margin-top:9px;word-break:break-word} .src::before{content:"SOURCE ";color:var(--blue-2);letter-spacing:.12em} .src.multi::before{content:"SOURCES "} /* ---------- flags ---------------------------------------------------------- */ .flag{margin:11px 0 0;padding:10px 13px;background:var(--ember-wash); border-left:2px solid var(--ember);font-size:14.5px;color:var(--ink-2);max-width:66ch} .flag b{font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--ember);display:block;margin-bottom:3px} .ext{margin:11px 0 0;padding:10px 13px;border:1px dashed var(--gold); font-size:14.5px;color:var(--ink-2);max-width:66ch} .ext b{font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--gold);display:block;margin-bottom:3px} /* ---------- the silence band ----------------------------------------------- */ .void{display:grid;grid-template-columns:6.6rem minmax(0,1fr);gap:0 20px; padding:13px 0;border-bottom:1px solid var(--line-2); background:repeating-linear-gradient(45deg,var(--line-2) 0 1px,transparent 1px 7px)} .void .when{color:var(--ink-3)} .void .what p{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em; color:var(--ink-3);margin:0} /* ---------- figures, tables ------------------------------------------------ */ figure{margin:30px 0 0;border:1px solid var(--line);background:var(--paper-2); padding:clamp(14px,2.4vw,22px)} figcaption{font-size:14.5px;color:var(--ink-2);margin-top:14px;max-width:70ch} figcaption strong{color:var(--ink)} .chart-wrap{overflow-x:auto} svg.chart{display:block;width:100%;min-width:560px;height:auto} .gridline{stroke:var(--line);stroke-width:1} .axis-lab{font-family:var(--mono);font-size:11px;fill:var(--ink-3);letter-spacing:.04em} /* hover via opacity — a fill swap out-specifies the modifier classes below */ .bar{fill:var(--blue);transition:opacity .12s ease} .bar:hover{opacity:.72} .bar-peak{fill:var(--ember)} .bar-partial{fill:url(#hatch)} /* incomplete/not-comparable data */ .peak-lab{font-family:var(--mono);font-size:11.5px;fill:var(--ember); letter-spacing:.05em;font-weight:600} .table-wrap{overflow-x:auto;margin-top:20px;border:1px solid var(--line)} table{border-collapse:collapse;width:100%;min-width:560px;background:var(--paper-2)} caption{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--ink-3);text-align:left;padding:10px 12px; border-bottom:1px solid var(--line)} th,td{padding:7px 12px;text-align:right;font-family:var(--mono);font-size:12.5px; font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line-2)} th{color:var(--ink-3);font-weight:500;letter-spacing:.06em;font-size:10.5px; text-transform:uppercase} th:first-child,td:first-child{text-align:left} tbody tr:hover{background:var(--blue-wash)} tr.peak td{color:var(--ember)} tfoot td{border-bottom:0;border-top:1px solid var(--ink);font-weight:600} /* ---------- panels, register, footer --------------------------------------- */ .panel{border:2px solid var(--ink);background:var(--paper-2); padding:clamp(16px,2.6vw,26px);margin:30px 0 0} .panel h2{font-family:var(--mono);font-size:clamp(15px,2.5vw,19px); letter-spacing:.02em;margin:6px 0 12px} .panel p{color:var(--ink-2);font-size:15.5px;max-width:68ch} .panel p:last-child{margin-bottom:0} .bracket{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px; margin:16px 0;font-size:15px} .bracket dt{font-family:var(--mono);font-size:12.5px;color:var(--blue); font-variant-numeric:tabular-nums;white-space:nowrap} .bracket dd{margin:0;color:var(--ink-2)} .register{margin:36px 0 0} .register h2{font-family:var(--mono);font-size:15px;letter-spacing:.03em;margin:0 0 4px} .register > p{color:var(--ink-2);font-size:15px;max-width:68ch;margin:0 0 18px} .reg-node{margin:0 0 16px} .reg-node h3{font-family:var(--mono);font-size:11px;letter-spacing:.13em; text-transform:uppercase;color:var(--blue);margin:0 0 5px;padding-bottom:4px; border-bottom:1px solid var(--line-2)} .reg-node ul{margin:0;padding:0;list-style:none} .reg-node li{font-family:var(--mono);font-size:11px;line-height:1.75;color:var(--ink-3); word-break:break-word;padding-left:15px;text-indent:-15px} footer{margin:38px 0 12px;padding-top:14px;border-top:2px solid var(--ink)} footer p{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.03em; margin:0 0 4px;max-width:78ch;line-height:1.7} a{color:var(--blue)} :focus-visible{outline:2px solid var(--ember);outline-offset:2px} @media (prefers-reduced-motion:reduce){*{transition:none!important}} @media (max-width:640px){ .block{grid-template-columns:1fr} .block-mark{border-left:0;border-top:1px solid var(--line);padding:16px} .entry,.void{grid-template-columns:1fr;gap:6px} .when{padding-top:0} .when b{display:inline;font-size:14px} .era-span{margin-left:0;width:100%} }