/* Dune & Main — what every page of the paper shares.
 *
 * The tokens, the base, the bar along the top of every page (wordmark, the two
 * sections, search, theme) and the footer. A page's own stylesheet holds only
 * what is particular to it. Loaded by dune-and-main.html and browse.html.
 */

/* ------------------------------------------------------------------ tokens */
:root{
  --paper:#EEF1EF; --surface:#F8FAF9; --surface-2:#E6EBE9;
  --ink:#13242A; --ink-soft:#546468; --ink-faint:#7E8D90;
  --line:#D4DCD9; --line-strong:#C1CBC7;
  --brass:#8F6218; --brass-2:#7A5215; --brass-soft:#F1E9DA;
  --good:#2E7D5B; --warn:#A5731A; --bad:#B0472A; --info:#3B6A8A;
  --shadow:16 28 32;
  --display:"Bodoni Moda","Didot","Bodoni 72","Hoefler Text",Georgia,"Times New Roman",serif;
  --serif:"Newsreader","Iowan Old Style","Palatino","Georgia","Times New Roman",serif;
  --sans:"Source Sans 3","Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* One measure for every page, so crossing from one to the other does not move the margins. */
  --page:1180px; --gutter:28px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0C1A1E; --surface:#12242A; --surface-2:#183036;
    --ink:#E9EFEC; --ink-soft:#9DAFAD; --ink-faint:#748A88;
    --line:#25383C; --line-strong:#33494D;
    --brass:#D3A24E; --brass-2:#E2B571; --brass-soft:#2A2A1E;
    --good:#54C296; --warn:#E1AC50; --bad:#E58261; --info:#78AECB;
    --shadow:0 0 0;
  }
}
:root[data-theme="dark"]{
  --paper:#0C1A1E; --surface:#12242A; --surface-2:#183036;
  --ink:#E9EFEC; --ink-soft:#9DAFAD; --ink-faint:#748A88;
  --line:#25383C; --line-strong:#33494D;
  --brass:#D3A24E; --brass-2:#E2B571; --brass-soft:#2A2A1E;
  --good:#54C296; --warn:#E1AC50; --bad:#E58261; --info:#78AECB;
  --shadow:0 0 0;
}
@media (max-width:620px){:root{--gutter:18px}}

/* -------------------------------------------------------------------- base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--brass);color:var(--paper)}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);font-weight:600}
.amp{font-style:italic;color:var(--brass)}

/* ------------------------------------------------------------- the site bar */
/* The same bar on every page, in rem so a page's own body size cannot move it. */
.sitebar{position:sticky;top:0;z-index:30;background:var(--paper);font-size:16px;line-height:1.5;
  border-top:3px solid var(--ink);border-bottom:1px solid var(--line-strong)}
.sitebar .in{max-width:var(--page);margin:0 auto;padding:10px var(--gutter);min-height:56px;
  display:flex;align-items:center;gap:22px}
.sitebar .word{font-family:var(--display);font-size:1.45rem;line-height:1;letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;flex:none}
.sitebar nav{display:flex;gap:18px;flex:none}
.sitebar nav a{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;
  white-space:nowrap;transition:color .16s,border-color .16s}
.sitebar nav a:hover{color:var(--ink)}
.sitebar nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brass)}
.sitebar .spacer{flex:1}

.sitesearch{position:relative;flex:0 1 420px;min-width:0}
.sitesearch input{width:100%;padding:8px 34px 8px 34px;border:1px solid var(--line-strong);
  border-radius:2px;background:var(--surface);color:var(--ink);font:.95rem/1.3 var(--sans)}
.sitesearch input::placeholder{color:var(--ink-faint)}
.sitesearch input:focus{outline:2px solid var(--brass);outline-offset:-1px;border-color:transparent}
.sitesearch input::-webkit-search-cancel-button{display:none}
.sitesearch .glass{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:14px;height:14px;
  color:var(--ink-faint);pointer-events:none}
.sitesearch kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);
  font:11px var(--mono);color:var(--ink-faint);border:1px solid var(--line);
  border-radius:3px;padding:1px 5px;background:var(--surface-2);pointer-events:none}
.sitesearch input:focus ~ kbd{display:none}

.themebtn{flex:none;width:34px;height:34px;border:1px solid var(--line-strong);background:transparent;
  border-radius:2px;color:var(--ink-soft);cursor:pointer;font-size:1rem;line-height:1;transition:.16s}
.themebtn:hover{border-color:var(--brass);color:var(--brass)}

/* What the search finds, as you type. */
.results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:3px;
  box-shadow:0 14px 36px rgba(var(--shadow),.16);max-height:min(70vh,560px);overflow:auto;
  padding:4px 0;z-index:40}
.results[hidden]{display:none}
.results a{display:block;padding:9px 14px;text-decoration:none;border-left:2px solid transparent}
.results a .eb{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.results a .eb i{width:6px;height:6px;border-radius:50%;flex:none}
.results a .hl{display:block;font-family:var(--serif);font-size:1.02rem;line-height:1.25;
  color:var(--ink);margin-top:3px}
.results a .said{display:block;font-size:.84rem;color:var(--ink-soft);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.results a .said b{color:var(--ink);font-weight:600}
.results a[aria-selected="true"]{background:var(--surface-2);border-left-color:var(--brass)}
.results .all{display:block;padding:10px 14px;border-top:1px solid var(--line);margin-top:4px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass)}
.results .none{padding:12px 14px;color:var(--ink-soft);font-size:.92rem}

@media (max-width:760px){
  .sitebar .in{flex-wrap:wrap;gap:8px 18px;padding-top:8px;padding-bottom:10px}
  .sitebar .spacer{display:none}
  .sitebar nav{margin-right:auto}
  .sitesearch{flex:1 1 100%;order:5}
  .sitesearch kbd{display:none}
}
@media (max-width:480px){
  .sitebar .in{gap:8px 14px}
  .sitebar .word{font-size:1.2rem}
  .sitebar nav{gap:12px}
  .sitebar nav a{font-size:.62rem;letter-spacing:.08em}
  .themebtn{width:30px;height:30px}
}

/* ------------------------------------------------------------- the footer */
.sitefoot{border-top:3px solid var(--ink);margin-top:56px;font-size:16px;line-height:1.5}
.sitefoot .in{max-width:var(--page);margin:0 auto;padding:34px var(--gutter) 60px;
  display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.sitefoot .fword{font-family:var(--display);font-size:1.7rem;line-height:1}
.sitefoot p{max-width:42ch;color:var(--ink-soft);font-size:.92rem;line-height:1.5;margin:12px 0 0}
.sitefoot p b{color:var(--ink);font-style:italic;font-family:var(--serif);font-weight:400}
.sitefoot p.how{font-size:.86rem;color:var(--ink-faint)}
.sitefoot .links{display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase}
.sitefoot .links a{color:var(--ink-soft);text-decoration:none}
.sitefoot .links a:hover{color:var(--brass)}
.sitefoot .colophon{margin-top:18px;font-family:var(--mono);font-size:.64rem;letter-spacing:.05em;
  color:var(--ink-faint);line-height:1.7;text-transform:none}

@media (prefers-reduced-motion:reduce){.sitebar nav a,.themebtn{transition:none}}