/* ===========================================================================
   ATLAS — a reading system for a reference work.
   One light theme, one dark theme, both driven by custom properties.
   System font stacks only: no external fonts, no external requests.
   =========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  /* type faces */
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Times New Roman',serif;
  --sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  /* colour — light (paper) */
  --bg:#FBF9F6;
  --bg-2:#F3EFE9;
  --surface:#FFFFFF;
  --ink:#15120F;
  --ink-2:#4E4842;
  --ink-3:#6E6861;
  --rule:#E2DCD3;
  --rule-2:#CFC7BB;
  --accent:#8A4B2A;
  --accent-soft:#F0E4DA;
  --focus:#1F5FA8;
  --mark:#F6E3A1;
  --shadow:0 1px 0 rgba(21,18,15,.04);

  /* fluid type scale */
  --step--2:clamp(.72rem,.71rem + .05vw,.75rem);
  --step--1:clamp(.8rem,.78rem + .09vw,.845rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.09rem);
  --step-1:clamp(1.1rem,1.06rem + .22vw,1.22rem);
  --step-2:clamp(1.32rem,1.18rem + .8vw,1.78rem);
  --step-3:clamp(1.55rem,1.35rem + 1.1vw,2.15rem);
  --step-4:clamp(1.9rem,1.5rem + 2.1vw,3.05rem);
  --step-5:clamp(2.3rem,1.6rem + 3.4vw,4.1rem);
  --step-6:clamp(2.7rem,1.7rem + 4.6vw,5.2rem);

  /* spacing scale */
  --s1:.25rem; --s2:.5rem; --s3:.8rem; --s4:1.2rem; --s5:1.8rem; --s6:2.6rem;
  --s7:3.6rem; --s8:5rem;

  /* layout */
  --measure:68ch;
  --shell:1220px;
  --aside:17rem;
  --gutter:clamp(1rem,3vw,1.9rem);
  --bar-h:3.1rem;
}

/* One theme only. No dark variant exists. */

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--bar-h) + 1rem)}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:var(--step-0); line-height:1.66; text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased; font-kerning:normal;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* typography -------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.14;letter-spacing:-.012em;color:var(--ink)}
h1{font-size:var(--step-4);font-weight:500;letter-spacing:-.022em;margin:0 0 var(--s3);max-width:30ch;text-wrap:balance}
h2{font-size:var(--step-2);margin:var(--s6) 0 var(--s3);max-width:34ch}
h3{font-size:var(--step-1);margin:var(--s5) 0 var(--s2);max-width:40ch}
h4{font-size:var(--step-0);font-family:var(--sans);font-weight:600;letter-spacing:.01em;margin:var(--s4) 0 var(--s2)}
h2+.byline,h3+.byline{font-family:var(--sans)}
p{margin:0 0 var(--s4);max-width:var(--measure)}
p:last-child{margin-bottom:0}
.lede{font-size:var(--step-1);color:var(--ink-2);line-height:1.5;max-width:56ch}
.lede span{display:block}
strong{font-weight:600}
em{font-style:italic}
small,.byline{font-size:var(--step--1);color:var(--ink-3);line-height:1.5}
hr{border:0;border-top:1px solid var(--rule);margin:var(--s6) 0}
blockquote{margin:var(--s5) 0;padding-left:var(--s4);border-left:2px solid var(--rule-2);color:var(--ink-2)}
code,kbd,samp,pre{font-family:var(--mono);font-size:.92em}
mark{background:var(--mark);color:inherit;padding:0 .1em;border-radius:2px}

a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule-2);
  text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-color:currentColor;text-decoration-thickness:2px}
a.quiet{text-decoration:none;color:inherit}
a.quiet:hover{text-decoration:underline}
a.go{font-size:var(--step-1);text-decoration:none;border-bottom:1px solid var(--rule-2);padding-bottom:2px}
a.go:hover{border-bottom-color:var(--ink);text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}

.label{font-family:var(--sans);font-size:var(--step--2);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s3)}
.name{font-size:var(--step-5);letter-spacing:-.026em;margin:0 0 var(--s4);max-width:26ch}

/* ---------------------------------------------------------------- skip */
.skip{position:absolute;left:.5rem;top:.5rem;z-index:99;background:var(--surface);color:var(--ink);
  padding:.6rem .9rem;border:1px solid var(--rule-2);border-radius:3px;font-size:var(--step--1);
  text-decoration:none}
/* hidden until focused — stated here as well as in the inlined critical CSS so the
   behaviour never depends on the inline block being present */
.skip:not(:focus){position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------- topbar */
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--rule)}
.topbar-in{max-width:var(--shell);margin:0 auto;padding:.5rem var(--gutter);display:flex;
  align-items:center;gap:var(--s4);flex-wrap:wrap;min-height:var(--bar-h)}
.wordmark{font-family:var(--sans);font-size:var(--step--2);font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap}
.wordmark:hover{text-decoration:none;color:var(--accent)}
.mainnav{display:flex;gap:var(--s4);flex-wrap:wrap;margin-left:auto;align-items:center}
.mainnav a{font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  color:var(--ink-2);white-space:nowrap;padding:.3rem 0}
.mainnav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.3em}
.mainnav a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:.3em}
.navtools{display:flex;align-items:center;gap:var(--s2);flex:1 1 15rem;min-width:11rem}
.navsearch{display:flex;align-items:center;gap:.35rem;flex:1 1 auto;border:1px solid var(--rule);
  border-radius:3px;background:var(--surface);padding:.15rem .3rem .15rem .5rem}
.navsearch:focus-within{border-color:var(--rule-2);box-shadow:0 0 0 2px var(--accent-soft)}
.navsearch input[type=search]{flex:1 1 auto;min-width:4rem;border:0;background:transparent;color:var(--ink);
  font:inherit;font-size:var(--step--1);padding:.28rem 0;outline:none;appearance:none}
.navsearch input[type=search]::placeholder{color:var(--ink-3)}
.navsearch button{flex:0 0 auto;border:0;background:transparent;color:var(--ink-2);cursor:pointer;
  font:inherit;font-size:var(--step--1);padding:.28rem .35rem}
.navsearch button:hover{color:var(--accent)}
.navtoggle{display:none;border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);
  border-radius:3px;font:inherit;font-size:var(--step--1);padding:.4rem .55rem;cursor:pointer}

/* ------------------------------------------------------------ crumbs */
.crumbs{max-width:var(--shell);margin:0 auto;padding:var(--s4) var(--gutter) 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;
  font-size:var(--step--1);color:var(--ink-3)}
.crumbs li{display:flex;align-items:center;gap:.4rem}
.crumbs li+li::before{content:"›";color:var(--rule-2);font-size:1.05em;line-height:1}
.crumbs a{text-decoration:none;color:var(--ink-2)}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:500}

/* ------------------------------------------------------------- shell */
.shell{max-width:var(--shell);margin:0 auto;padding:var(--s5) var(--gutter) var(--s7);
  display:grid;grid-template-columns:var(--aside) minmax(0,1fr);gap:clamp(1.5rem,3.4vw,3.4rem);
  align-items:start}
main{min-width:0;padding-bottom:var(--s5)}
main>*{max-width:100%}

/* ----------------------------------------------------------- sidebar */
.sidebar{position:sticky;top:calc(var(--bar-h) + 1rem);font-size:var(--step--1);
  max-height:calc(100vh - var(--bar-h) - 2.2rem);overflow:auto;overscroll-behavior:contain;
  scrollbar-width:thin;padding-bottom:var(--s3);border-top:2px solid var(--ink);padding-top:var(--s3)}
.sidebar>.card+.card{margin-top:var(--s5)}
.sidebar .card>h2,.sidebar .card>.label{margin:0 0 var(--s2);font-family:var(--sans);
  font-size:var(--step--2);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{margin:0;padding:.22rem 0;border-top:1px solid var(--rule);line-height:1.35}
.toc li:first-child{border-top:0}
.toc a{text-decoration:none;color:var(--ink-2);display:block;padding:.12rem 0}
.toc a:hover{color:var(--ink);text-decoration:underline}
.toc .lv3 a{padding-left:.85rem;font-size:.95em}
.toc a[aria-current="true"]{color:var(--ink);font-weight:600}
.toc-scroll{max-height:22rem;overflow:auto}
.factlist{list-style:none;margin:0;padding:0}
.factlist li{display:grid;grid-template-columns:7.4rem minmax(0,1fr);gap:.4rem;padding:.25rem 0;
  border-top:1px solid var(--rule);font-size:var(--step--1)}
.factlist li:first-child{border-top:0}
.factlist .k{color:var(--ink-3)}
.factlist .v{font-variant-numeric:tabular-nums}
.hublist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.hublist a{text-decoration:none;color:var(--ink-2);font-size:var(--step--1)}
.hublist a:hover{color:var(--ink);text-decoration:underline}
.sidebar .quiet{color:var(--ink-3)}

/* ---------------------------------------------------- spec / infobox */
.spectable{width:100%;border-collapse:collapse;font-size:var(--step--1);margin:0 0 var(--s5);
  border-top:2px solid var(--ink);table-layout:fixed}
.spectable caption{text-align:left;font-family:var(--sans);font-size:var(--step--2);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding:0 0 var(--s2)}
.spectable th,.spectable td{text-align:left;vertical-align:top;padding:.45rem .6rem .45rem 0;
  border-bottom:1px solid var(--rule);overflow-wrap:break-word}
.spectable th{font-family:var(--sans);font-weight:500;color:var(--ink-2);width:36%;letter-spacing:.01em}
.spectable td{font-variant-numeric:tabular-nums}
.spectable tr:last-child th,.spectable tr:last-child td{border-bottom:1px solid var(--rule-2)}
.tablewide{margin:0 0 var(--s5)}
.tablewide .spectable{max-width:none}

/* --------------------------------------------------------- index list */
.index-list{list-style:none;margin:0 0 var(--s5);padding:0;max-width:min(100%,72rem)}
/* Flex, not grid: rows only carry a thumbnail when that page has a vetted photograph,
   and a fixed grid would leave a hole (or shift every column) on the rows without one. */
.index-list li{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--s3);
  padding:.55rem 0;border-top:1px solid var(--rule)}
.index-list li:last-child{border-bottom:1px solid var(--rule)}
.index-list .shot{flex:0 0 auto;width:3.4rem;height:3.4rem;overflow:hidden;
  border:1px solid var(--rule);background:var(--surface)}
.index-list .shot img{display:block;width:100%;height:100%;object-fit:cover}
.index-list .num{flex:0 0 4.6rem;font-family:var(--mono);font-size:var(--step--2);color:var(--ink-3);
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
.index-list .what{flex:1 1 auto;min-width:0;font-size:var(--step-0);line-height:1.42}
.index-list .what a{text-decoration:none}
.index-list .what a:hover{text-decoration:underline;text-decoration-thickness:2px}
.index-list .meta{flex:0 0 auto;font-size:var(--step--1);color:var(--ink-3);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.index-list .meta .byline{white-space:nowrap}
.entry{border-top:1px solid var(--rule);padding:var(--s4) 0}
.entry:last-of-type{border-bottom:1px solid var(--rule)}
.entry .who{font-family:var(--sans);font-size:var(--step--2);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:0}
.entry p{margin:var(--s2) 0 0}

/* ------------------------------------------------------------- modules */
.mods{margin:var(--s7) 0 0;border-top:1px solid var(--rule);padding-top:var(--s5)}
.mods>section,.mods>.mod{margin:0 0 var(--s6)}
.mod h2,.mod h3{font-size:var(--step-1);margin:0 0 var(--s2);max-width:44ch}
.mod h2 .byline,.mod h3 .byline{font-family:var(--sans);font-weight:400;letter-spacing:0}
.linkgrid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:0 var(--s5)}
.linkgrid li{padding:.42rem 0;border-top:1px solid var(--rule);font-size:var(--step--1);line-height:1.4}
.linkgrid a{text-decoration:none}
.linkgrid a:hover{text-decoration:underline;text-decoration-thickness:2px}
.linkgrid .byline{display:block;color:var(--ink-3)}
.chiplist{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0;padding:0}
.chiplist a{display:inline-block;border:1px solid var(--rule-2);border-radius:999px;
  padding:.25rem .7rem;font-size:var(--step--1);text-decoration:none;color:var(--ink-2);
  background:var(--surface)}
.chiplist a:hover{border-color:var(--ink-3);color:var(--ink)}
.backto{display:flex;flex-wrap:wrap;gap:.5rem var(--s4);align-items:baseline;margin:var(--s5) 0 0;
  padding-top:var(--s4);border-top:1px solid var(--rule);font-size:var(--step--1)}
.backto .label{margin:0}
.backto a{text-decoration:none;color:var(--ink-2)}
.backto a:hover{color:var(--ink);text-decoration:underline}

/* ---------------------------------------------------------------- hero */
.hero{padding:clamp(2.4rem,9vh,7rem) 0 var(--s6)}
.hero h1{font-size:var(--step-6);max-width:18ch;margin-bottom:var(--s4)}
.hero .lede{margin-bottom:var(--s5)}

/* -------------------------------------------------------------- search */
.searchwrap{max-width:min(100%,54rem)}
.searchbox{display:flex;align-items:center;gap:.5rem;border:1px solid var(--rule-2);border-radius:4px;
  background:var(--surface);padding:.55rem .7rem;margin:0 0 var(--s3)}
.searchbox:focus-within{border-color:var(--ink-3);box-shadow:0 0 0 3px var(--accent-soft)}
.searchbox input[type=search]{flex:1 1 auto;border:0;background:transparent;color:var(--ink);font:inherit;
  font-size:var(--step-1);outline:none;appearance:none;min-width:0}
.searchbox .kbd{flex:0 0 auto;font-family:var(--mono);font-size:var(--step--2);color:var(--ink-3);
  border:1px solid var(--rule);border-radius:3px;padding:.1rem .35rem}
.searchstatus{margin:0 0 var(--s4);font-size:var(--step--1);color:var(--ink-3);min-height:1.4em}
.filters{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 var(--s5);padding:0;list-style:none}
.filters button{border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);cursor:pointer;
  font:inherit;font-size:var(--step--1);border-radius:999px;padding:.28rem .75rem}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.filters button:hover{border-color:var(--ink-3);color:var(--ink)}
.filters button[aria-pressed="true"]:hover{color:var(--bg)}
.resgroup{margin:0 0 var(--s5)}
.resgroup h2{font-size:var(--step--2);font-family:var(--sans);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s2);border-bottom:1px solid var(--rule);
  padding-bottom:.35rem}
.results{list-style:none;margin:0;padding:0}
.results li{display:grid;grid-template-columns:4.6rem minmax(0,1fr) auto;gap:var(--s3);
  align-items:baseline;padding:.5rem 0;border-bottom:1px solid var(--rule)}
.results .num{font-family:var(--mono);font-size:var(--step--2);color:var(--ink-3)}
.results .what a{text-decoration:none;font-size:var(--step-0)}
.results .what a:hover,.results li[data-active] .what a{text-decoration:underline;text-decoration-thickness:2px}
.results li[data-active]{background:var(--accent-soft)}
.results .meta{font-size:var(--step--1);color:var(--ink-3);text-align:right}
.results .snip{display:block;font-size:var(--step--1);color:var(--ink-2);margin-top:.15rem}
.noresults{padding:var(--s5) 0;color:var(--ink-2)}

/* -------------------------------------------------------------- footer */
footer{border-top:1px solid var(--rule);margin-top:var(--s7);background:var(--bg-2)}
footer .fin{max-width:var(--shell);margin:0 auto;padding:var(--s5) var(--gutter) var(--s7);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:var(--s5) clamp(1.5rem,5vw,4rem)}
footer .colophon{max-width:52ch}
footer p{font-size:var(--step--1);color:var(--ink-3);line-height:1.55;margin:0 0 var(--s3)}
footer p strong{color:var(--ink)}
footer .footnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.2rem var(--s5)}
footer .footnav a{font-size:var(--step--1);color:var(--ink-2);text-decoration:none;padding:.14rem 0}
footer .footnav a:hover{color:var(--ink);text-decoration:underline}
footer .footnav a[aria-current]{color:var(--ink);font-weight:600}
footer .footgroup{display:flex;flex-direction:column}
footer .footgroup>.label{margin:0 0 .2rem}

/* ---------------------------------------------------------------- utility */
.wrap{padding:0;max-width:none}
.spec{padding-top:0}
.method>p,.method>h3{max-width:var(--measure)}
.rule{height:1px;background:var(--rule);border:0;margin:var(--s5) 0}
.stack>*+*{margin-top:var(--s4)}
.nowrap{white-space:nowrap}
.tabular{font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- responsive */
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:static;max-height:none;overflow:visible;border-top-width:1px}
  .toc-scroll{max-height:none}
  footer .fin{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .navtoggle{display:inline-block}
  .mainnav{order:3;flex:1 1 100%;display:none;margin-left:0}
  .mainnav[data-open]{display:flex}
  .navtools{order:2;flex:1 1 8rem}
  .index-list li{flex-wrap:wrap;gap:.35rem var(--s2)}
  .index-list .shot{width:2.6rem;height:2.6rem}
  .index-list .num{flex:0 0 3.2rem}
  .index-list .meta{flex:1 1 100%;white-space:normal}
  .results li{grid-template-columns:3.6rem minmax(0,1fr)}
  .results .meta{grid-column:2;text-align:left}
  /* spec tables collapse to stacked definition rows */
  .spectable,.spectable tbody,.spectable tr,.spectable th,.spectable td{display:block;width:auto}
  .spectable th{border-bottom:0;padding-bottom:0;font-size:var(--step--2);letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink-3)}
  .spectable td{padding-top:.1rem;border-bottom:1px solid var(--rule)}
  .spectable tr:last-child td{border-bottom:1px solid var(--rule-2)}
  .spectable tr{margin-bottom:.5rem}
  h1{max-width:none}
}
@media print{
  .topbar,.crumbs,.sidebar,.mods,footer .footnav,.navsearch,.skip{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  a{text-decoration:none;color:#000}
  .shell{display:block;padding:0;max-width:none}
}

/* Lead photograph. The credit line is not decoration: the licence requires the author
   and the licence to be shown, so it is part of the figure and not optional chrome. */
.lead-fig{margin:0 0 1.8rem;border:1px solid var(--rule);background:var(--surface)}
.lead-fig img{display:block;width:100%;height:auto;max-height:52vh;object-fit:cover}
.lead-fig figcaption{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:baseline;
  padding:.55rem .7rem;font-size:.76rem;line-height:1.45;color:var(--ink-2);
  border-top:1px solid var(--rule)}
.lead-fig figcaption a{color:inherit;text-decoration:underline;text-underline-offset:.16em}
.lead-fig .fig-credit{flex:1 1 60%;min-width:14rem}
.lead-fig .fig-report{white-space:nowrap;font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;opacity:.75}
.lead-fig .fig-report:hover{opacity:1}
/* The stand-in disclosure. Deliberately not hidden: a labelled maker photograph is
   honest, an unlabelled one is a lie about a specific instrument. */
.lead-fig .fig-note{flex:1 1 100%;margin:.1rem 0 0;font-size:.72rem;line-height:1.45;
  color:var(--ink-3)}

/* On a phone a 52vh photograph filled half the screen, which invited a pinch-zoom to
   see it whole — and zooming out then shrank the text with it. Hold the image to about
   a third of the viewport so the page stays readable at 100%, and lift the small end of
   the type scale, which is tuned for a desktop column and reads as noise at ~11.5px. */
@media (max-width:700px){
  .lead-fig img{max-height:34vh}
  .lead-fig{margin-bottom:1.3rem}
  .lead-fig figcaption{font-size:.78rem;padding:.5rem .6rem}
  .lead-fig .fig-credit{min-width:0}
  :root{
    --step--2:clamp(.78rem,.76rem + .14vw,.82rem);
    --step--1:clamp(.87rem,.85rem + .14vw,.9rem);
  }
}