/* Frontier Cartography — house stylesheet (locked system: Vollkorn + Space Mono; paper/oat/ink; Brick once per screen) */
:root{
  --paper:#F7F5F0; --oat:#E8E4DA; --rule:#D8D3C7; --stone:#8E887C; --slate:#5A554D; --ink:#221E1A;
  --brick:#A34A34; --brick-on-ink:#D18A6A; --slateblue:#77808A; --slateblue-on-ink:#A3ACB4; --sage:#7E8A76;
  --v:'Vollkorn', Georgia, 'Times New Roman', serif; --m:'Space Mono', 'Courier New', monospace;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--v);font-size:17px;line-height:1.55;margin:0}
a{color:inherit}
#topo{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:.12;z-index:0}
.page{position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:0 32px 96px}
.mono{font-family:var(--m);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);line-height:1.5}
.mono.blue{color:var(--slateblue)}

/* header */
header.nav{display:flex;justify-content:space-between;align-items:center;padding:28px 0;border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:14px;font-family:var(--v);font-weight:700;font-size:22px;letter-spacing:-.005em;text-decoration:none;color:var(--ink)}
.brand svg{width:40px;height:40px}
nav{display:flex;gap:28px}
nav a{font-family:var(--m);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:11px 0;min-height:44px;border-bottom:1px solid transparent}
nav a:hover{border-bottom-color:var(--ink)}
nav a:focus-visible{border-bottom-color:var(--ink);outline:2px solid var(--ink);outline-offset:4px}
nav a[aria-current="page"]{border-bottom-color:var(--slateblue);color:var(--slateblue)}

/* display */
h1.d1{font-family:var(--v);font-weight:700;font-size:56px;line-height:1.06;letter-spacing:-.005em;margin:0;text-wrap:balance}
h1.d1 em{font-style:italic;color:var(--brick)}
.lede{font-size:19px;line-height:1.5;color:var(--slate);max-width:62ch;margin:28px 0 0}

/* the single ink panel per screen */
.ink{background:var(--ink);color:var(--paper);padding:40px 44px;margin:64px -44px 0;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end}
.ink .line{font-family:var(--v);font-style:italic;font-size:30px;line-height:1.18;margin:0;max-width:22ch;text-wrap:balance}
.ink .mono{color:var(--brick-on-ink)}
.ink .apparatus{font-family:var(--m);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slateblue-on-ink);line-height:1.9;text-align:right}

/* oat panels */
.panel{background:var(--oat);padding:28px 32px}

/* footer */
footer{margin-top:80px;padding-top:24px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.fc{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--ink);font-family:var(--v);font-weight:700;font-size:16px}
footer .right{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);text-align:right;line-height:1.8}
footer .right a{text-decoration:none;color:var(--slateblue)}

@media (max-width:820px){
  .page{padding:0 20px 72px}
  h1.d1{font-size:38px}
  header.nav{flex-direction:column;align-items:flex-start;gap:16px}
  nav{flex-wrap:wrap;gap:18px}
  .ink{margin:48px -20px 0;padding:32px 20px;grid-template-columns:1fr}
  .ink .apparatus{text-align:left}
  .ink .line{font-size:24px}
}