/* Shared look: ledger paper, register-blue ink, red correction ink, boxed windows. */
:root {
  --paper: #EFF2EA;
  --win: #FBFCF8;
  --ink: #14233F;
  --muted: #5A6478;
  --line: #C5CFC0;
  --red: #B3261E;
  --bar: #F2CF4A;
  --ok: #2E6B3C;
  --display: "Newsreader", Georgia, serif;
  --text: "Newsreader", Georgia, serif;
  --mono: "Courier Prime", "Courier New", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #10151E; --win: #172030; --ink: #E7EBE3; --muted: #9AA6B8; --line: #2C3A50; --red: #FF8378; --bar: #E9C440; --ok: #8CD49B;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.1875rem/1.6 var(--text); }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

.top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; font-size: 1rem; }
.top .mark { font-weight: 700; text-decoration: none; }
.top .mark small { font: 400 .85em var(--mono); color: var(--muted); }
.top nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.top nav a { text-decoration: none; }
.top nav a:hover, .top nav a[aria-current] { text-decoration: underline; }
.top .mark, .top nav a { white-space: nowrap; }
@media (max-width: 34rem) { .top nav a[href$="#contact"], .top .mark small { display: none; } .top nav { gap: .9rem; font-size: .9rem; } }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn { display: inline-block; padding: .6rem 1.15rem; font-weight: 600; text-decoration: none; border: 1.5px solid var(--ink); background: var(--win); }
.btn.primary { background: var(--ink); color: var(--paper); }

.win { background: var(--win); border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); display: flex; flex-direction: column; }
.win > .bar { position: relative; z-index: 2; background: var(--win); display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .45rem .9rem; border-bottom: 1.5px solid var(--ink); font: 400 .9rem var(--mono); }
.win > .bar .dots { display: flex; gap: .3rem; }
.win > .bar .dots i { width: .55rem; height: .55rem; border: 1.5px solid var(--ink); border-radius: 50%; }
.win h2, .win h3 { font-family: var(--display); margin: 0; }

footer { border-top: 1.5px solid var(--ink); padding: 2rem 0 3rem; color: var(--muted); font-size: 1rem; }
footer .cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
footer p { margin: 0 0 .5rem; max-width: 52ch; }

.fake-note { font: 400 .85rem var(--mono); color: var(--muted); }