/* site.css - the subset of damic.rs/css/site.css this page shares with the site:
 * document chrome, masthead, running text and the appendix. Copied rule for rule so the
 * validator reads as one of the site's pages; app.css holds what is specific to the tool.
 * Load order is tokens.css, site.css, app.css. */

body {
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:var(--serif); font-size:18px; line-height:1.65;
  font-kerning:normal; text-rendering:optimizeLegibility;
}
.wrap { max-width:65rem; margin:0 auto; padding:0 24px 56px; }

.topbar-in {
  max-width:65rem; margin:0 auto; padding:15px 24px; position:relative;
  display:flex; align-items:baseline; gap:16px;
}
.topbar-in::after, .sitefoot-in::before {
  content:""; position:absolute; left:24px; right:24px;
  border-top:1px solid var(--rule);
}
.topbar-in::after { bottom:0; }
.sitefoot-in::before { top:0; }
.brand {
  font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.02em;
  color:var(--ink); text-decoration:none;
}
.brand:hover { color:var(--accent); }
.topbar-end { margin-left:auto; display:flex; align-items:baseline; gap:18px; }
.topnav { display:flex; align-items:baseline; gap:18px; }
.topnav a {
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-3); text-decoration:none;
}
.topnav a:hover { color:var(--accent); }
.topnav a[aria-current="page"] { color:var(--ink); }
.topnav a:focus-visible, .brand:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.skip { position:absolute; left:-9999px; top:0; }
.skip:focus {
  left:8px; top:8px; z-index:70; padding:8px 12px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--rule-strong); border-radius:3px;
  font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em;
}

header.mast { padding:40px 0 12px; }
.eyebrow {
  font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.13em;
  color:var(--ink-3); margin:0 0 20px;
}
h1 {
  font-family:var(--serif); font-size:clamp(2rem,5.4vw,3.1rem); line-height:1.08;
  letter-spacing:-.02em; color:var(--ink); margin:0 0 .5rem; text-wrap:balance;
}
.deck {
  font-size:1.16rem; color:var(--ink-3); font-style:italic; margin:0 0 26px;
}
.byline {
  font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.11em;
  color:var(--ink-3); border-top:1px solid var(--rule); padding-top:16px;
}
.byline-who { display:inline; }
.bsep { margin:0 .62em; color:var(--ink-3); }

h2 {
  font-family:var(--serif); font-size:1.52rem; line-height:1.2; color:var(--ink);
  letter-spacing:-.01em; margin:52px 0 4px; text-wrap:balance;
}
h2 + .sub {
  font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-3); margin:0 0 20px;
}
h3 {
  font-family:var(--sans); font-size:1.02rem; font-weight:650; color:var(--ink);
  margin:32px 0 8px; letter-spacing:-.005em;
}
p { margin:0 0 1.15em; }
b, strong { color:var(--ink); font-weight:600; }
a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
code {
  font-family:var(--mono); font-size:.84em; background:var(--surface-2);
  border:1px solid var(--rule); border-radius:3px; padding:.08em .34em;
  color:var(--ink); word-break:break-word;
}
ul, ol { margin:0 0 1.15em; padding-left:1.3em; }
li { margin:0 0 .5em; }

.aside {
  border-left:3px solid var(--accent); background:var(--surface);
  padding:18px 20px; margin:28px 0; border-radius:0 4px 4px 0;
  font-size:.96rem;
}
.aside .lbl {
  display:block; font-family:var(--mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--ink-3); margin-bottom:8px;
}
.aside.hot { border-left-color:var(--hot); }
.aside p:last-child { margin-bottom:0; }

.apx { border-top:2px solid var(--rule-strong); margin-top:60px; padding-top:8px; }
.apx-tag {
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.13em;
  color:var(--ink-3);
}
.refcols { margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:0 40px; align-items:start; }
.refcol { min-width:0; }
.refgroup {
  font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-3); margin:0 0 8px; padding-bottom:6px;
  border-bottom:1px solid var(--rule-strong);
}
.refblock + .refblock { margin-top:24px; }
.refs { list-style:none; padding:0; margin:0; }
.refs li {
  text-align:left; font-size:.85rem; line-height:1.45;
  padding:0 0 9px; margin:0 0 9px; border-bottom:1px solid var(--rule);
}
.refs li:last-child { border-bottom:none; padding-bottom:0; margin-bottom:0; }
.refs .note { display:block; color:var(--ink-3); font-size:.82rem; margin-top:3px; }

.sitefoot { font-family:var(--sans); font-size:.85rem; color:var(--ink-3); }
.sitefoot-in {
  max-width:65rem; margin:0 auto; padding:22px 24px 44px; position:relative;
}
.sitefoot p { margin:0; }

.themebtn {
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-3);
}
.themebtn:hover { color:var(--accent); }
.themebtn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.themebtn::after { content:"Dark"; }
:root[data-theme="dark"] .themebtn::after { content:"Light"; }
:root[data-theme="light"] .themebtn::after { content:"Dark"; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .themebtn::after { content:"Light"; }
}
:root:not(.js) .themebtn { display:none; }

@media (max-width:760px) {
  body { font-size:17px; }
  .wrap { padding:0 16px 40px; }
  .topbar-in { padding:12px 16px; }
  .sitefoot-in { padding:18px 16px 36px; }
  .topbar-in::after, .sitefoot-in::before { left:16px; right:16px; }
  header.mast { padding:28px 0 10px; }
  .refcols { grid-template-columns:1fr; }
  .refcol + .refcol .refblock:first-child { margin-top:24px; }
  .refs li { font-size:.86rem; padding-bottom:11px; margin-bottom:11px; }
  .refblock + .refblock .refgroup { margin-top:24px; }
}
@media (max-width:480px) {
  h1 { font-size:1.72rem; }
  h2 { font-size:1.24rem; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }