:root{
  --paper:#FAF7F1; --ink:#3A2415; --muted:#8C7C6D;
  --line:#E6DDCF; --accent:#B5560C; --block:#F4EEE3; --maxw:760px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;line-height:1.65;font-size:17px}
a{color:var(--accent)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

.masthead{display:flex;align-items:center;justify-content:space-between;
  padding:22px 0;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font-family:"Fraunces",serif;font-weight:600;font-size:20px;letter-spacing:.01em;color:#692903}.logo .mark{height:34px;width:34px;flex:none;display:block}
/* .logo is a flex row, so a bare "Arch" text node and a sibling <span>Spy</span> would
   each become a flex item and the 10px gap — which exists to separate the mark from the
   wordmark — would also open up between the two halves of the word. Keeping the whole
   wordmark inside one flex item makes ArchSpy render as a single word while still
   allowing "Spy" to be styled differently. */
.logo .wordmark{white-space:nowrap;color:#F28C15}
.logo .spy{color:#692903}
.masthead nav{font-family:"IBM Plex Mono",monospace;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

footer{border-top:1px solid var(--line);padding:28px 0 64px;
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted);letter-spacing:.03em}