/* Long Past — encyclopedia skin. Left sidebar with the section list, one reading column.
   Hand-written, no framework. */

:root{
  color-scheme: light;
  --paper:#ffffff;
  --panel:#f5f6f7;
  --panel-2:#eceef0;
  --ink:#202122;
  --muted:#5f6368;
  --faint:#8a8f96;
  --hair:#e6e8eb;
  --rule:#c8ccd1;
  --link:#202122;
  --link-line:#a2a9b1;
  --amber:#8a5a00;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- frame: sidebar + article ---------- */
.page{ display:grid; grid-template-columns:15rem minmax(0,46rem); gap:3.5rem; max-width:70rem;
  margin:0 auto; padding:2rem 1.5rem 5rem; }
.side{ position:sticky; top:0; align-self:start; max-height:100vh; overflow-y:auto; padding:.4rem 0 2rem;
  font-family:var(--sans); min-width:0; }
.article{ min-width:0; }
.toc summary{ list-style:none; pointer-events:none; cursor:default; }
.toc summary::-webkit-details-marker{ display:none; }
.brand{ display:block; font-family:var(--serif); font-weight:700; font-size:1.55rem; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none; margin:0 0 1.6rem; }
.brand:hover{ text-decoration:none; }
.brand small{ display:block; font-family:var(--sans); font-weight:400; font-size:.72rem; color:var(--muted); letter-spacing:.02em; }
.toc{ font-size:.95rem; }
.toc .toc-title{ font-weight:700; margin:0 0 .9rem; font-family:var(--serif); font-size:1.05rem; }
.toc ol{ list-style:none; margin:0; padding:0 0 0 1.1rem; }
.toc ol ol{ padding-left:1rem; font-size:.9rem; color:var(--muted); }
.toc li{ margin:0 0 .55rem; line-height:1.35; }
.toc a{ color:var(--ink); text-decoration:none; }
.toc a:hover{ text-decoration:underline; }
.sitenav{ margin-top:1.6rem; padding-top:1rem; border-top:1px solid var(--hair); font-size:.85rem; }
.sitenav a{ display:block; color:var(--muted); text-decoration:none; margin:.35rem 0; }
.sitenav a:hover{ color:var(--ink); text-decoration:underline; }
@media(max-width:56rem){
  body{ font-size:16.5px; }
  .page{ display:block; padding:0 1.1rem 4rem; }
  .side{ position:static; max-height:none; overflow:visible; display:flex; flex-wrap:wrap; align-items:baseline;
    gap:.3rem 1rem; padding:.9rem 0 .7rem; margin:0 0 1.4rem; border-bottom:1px solid var(--hair); }
  .brand{ margin:0; font-size:1.3rem; }
  .brand small{ display:none; }
  .sitenav{ margin:0; padding:0; border:0; flex-basis:100%; display:flex; flex-wrap:wrap; gap:.15rem .9rem; font-size:.8rem; order:2; }
  .sitenav a{ margin:0; }
  .toc{ flex-basis:100%; order:3; font-size:.92rem; }
  .article{ overflow-wrap:anywhere; }
  .toc summary{ pointer-events:auto; cursor:pointer; list-style:inside disclosure-closed; font-family:var(--sans); font-weight:600; font-size:.9rem; margin:.2rem 0 0; }
  .toc details[open] summary{ list-style:inside disclosure-open; }
  .toc summary::before{ content:"Contents · "; color:var(--muted); font-weight:400; }
  .toc ol{ padding:.5rem 0 .2rem 1.2rem; }
  .toc li{ margin:.35rem 0; }
  h1.title{ font-size:2rem; }
  h2{ font-size:1.45rem; margin-top:2rem; }
  h3{ font-size:1.15rem; }
  .hatnote{ padding-left:0; }
}

/* links */
a{ color:var(--link); text-decoration:underline; text-decoration-color:var(--link-line); text-underline-offset:.15em; }
a:hover{ text-decoration-color:var(--ink); }

/* ---------- title & headings ---------- */
h1.title{ font-family:var(--serif); font-weight:700; font-size:2.6rem; line-height:1.1; letter-spacing:-.01em; margin:0 0 .3rem; }
.subtitle{ margin:0; font-size:1rem; font-weight:600; }
.from{ margin:.1rem 0 1.4rem; color:var(--muted); font-size:.95rem; }
h2{ font-family:var(--serif); font-weight:700; font-size:1.75rem; letter-spacing:-.01em; margin:2.4rem 0 .7rem; }
h3{ font-family:var(--serif); font-weight:700; font-size:1.25rem; margin:1.6rem 0 .4rem; }
h4{ font-weight:700; font-size:.95rem; margin:1.1rem 0 .3rem; }
p{ margin:.7rem 0; }
.article > section{ clear:both; }
.lead{ font-size:1.05rem; }

/* hatnote */
.hatnote{ font-style:italic; color:var(--muted); font-size:.92rem; margin:0 0 1rem; padding-left:1.4rem; }

/* notes and boxes: one quiet grey tile, wiki style */
.nutshell,.callout,.inbrief{ display:flow-root; background:var(--panel); border-radius:10px; padding:.75rem 1rem; margin:1rem 0; font-size:.95rem; }
.tech-note{ color:var(--muted); font-size:.95rem; border-left:2px solid var(--hair); padding-left:.8rem; margin:.8rem 0; }
.tech-note b{ color:var(--ink); }
.era{ display:none; }
.record-label{ font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin:1rem 0 -.4rem; }

/* ---------- quick facts (infobox) ---------- */
.infobox{ float:right; width:19rem; max-width:100%; margin:.3rem 0 1rem 1.8rem; font-size:.88rem; line-height:1.4; }
@media(max-width:46rem){ .infobox{ float:none; width:auto; margin:1rem 0; } }
.infobox .ib-title{ font-weight:700; margin:0 0 .3rem; }
.infobox .ib-sub{ color:var(--muted); font-size:.85rem; margin:0 0 .6rem; }
.infobox .ib-glyph{ display:none; }
.infobox table{ display:grid; grid-template-columns:1fr 1fr; gap:.45rem; border-collapse:collapse; }
.infobox tbody{ display:contents; }
.infobox tr{ display:block; background:var(--panel); border-radius:10px; padding:.55rem .7rem; }
.infobox th,.infobox td{ display:block; text-align:left; padding:0; border:0; }
.infobox th{ color:var(--muted); font-weight:500; font-size:.78rem; margin-bottom:.15rem; }
.infobox tr.ib-section{ grid-column:1 / -1; background:none; padding:.4rem .2rem 0; font-weight:700; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.infobox tr.ib-section td{ text-align:left; }
.infobox code{ font-size:.9em; }

/* ---------- text bits ---------- */
code, .mono{ font-family:var(--mono); font-size:.86em; background:var(--panel); border-radius:4px; padding:.06em .3em; }
.handle{ font-family:var(--mono); font-size:.86em; background:var(--panel); border-radius:4px; padding:.03em .32em; white-space:nowrap; }
pre{ background:var(--panel); border-radius:8px; padding:.7rem .85rem; overflow-x:auto; font-family:var(--mono); font-size:.8rem; line-height:1.5; }

/* quotes from the logs */
blockquote.log{ margin:1rem 0; padding:.6rem 1rem; background:var(--panel); border-left:3px solid var(--rule); border-radius:0 8px 8px 0; font-size:.95rem; }
blockquote.log .src{ display:block; font-size:.75rem; color:var(--faint); margin-top:.4rem; }
blockquote.log.amber{ border-left-color:var(--amber); }
.epigraph{ font-family:var(--serif); font-style:italic; color:var(--muted); }

/* references */
sup.ref{ font-size:.7em; line-height:0; }
sup.ref a{ text-decoration:none; }
.references{ font-size:.88rem; color:var(--muted); }
.references li{ margin:.25rem 0; }

/* tables */
table.wt{ border-collapse:collapse; margin:1rem 0; font-size:.88rem; width:100%; }
table.wt caption{ font-style:italic; color:var(--muted); text-align:left; margin-bottom:.3rem; }
table.wt th, table.wt td{ border:1px solid var(--hair); padding:.4rem .6rem; text-align:left; vertical-align:top; }
table.wt thead th{ background:var(--panel); }
table.wt tbody th{ background:var(--panel); font-weight:600; }
.tr-wrap{ overflow-x:auto; }

/* timeline */
ul.tl{ list-style:none; margin:1rem 0; padding:0; }
ul.tl li{ position:relative; padding:.15rem 0 .6rem 1.4rem; border-left:2px solid var(--hair); margin-left:6rem; }
ul.tl li .d{ position:absolute; left:-6.2rem; top:.2rem; width:5.4rem; text-align:right; font-size:.76rem; color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums; }
ul.tl li::before{ content:""; position:absolute; left:-6px; top:.5rem; width:10px; height:10px; border-radius:50%; background:var(--paper); border:2px solid var(--rule); }
ul.tl li.amber::before{ border-color:var(--amber); }
@media(max-width:46rem){ ul.tl li{ margin-left:0; padding-left:0; border-left:0; padding-top:1.3rem; } ul.tl li .d{ left:0; top:0; text-align:left; width:auto; } ul.tl li::before{ display:none; } }

/* footer */
.foot{ margin-top:3rem; padding-top:1rem; border-top:1px solid var(--hair); font-size:.8rem; color:var(--faint); }
.foot a{ color:var(--muted); }

/* helpers */
.muted{ color:var(--muted); }
.small{ font-size:.88rem; }
hr.soft{ border:0; border-top:1px solid var(--hair); margin:1.6rem 0; }
.tag{ display:inline-block; font-size:.7rem; letter-spacing:.03em; text-transform:uppercase; padding:.1rem .4rem; border-radius:4px; background:var(--panel); color:var(--muted); }
.seealso li{ margin:.25rem 0; }
ul.articles{ padding-left:1.2rem; }
ul.articles li{ margin:.5rem 0; }