@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/fraunces-var.woff2) format('woff2');
}
@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/fonts/plexsans-var.woff2) format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plexmono-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/plexmono-500.woff2) format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plexmono-600.woff2) format('woff2');
}

:root {
  --page-bg: #E7E9E1;
  --page-bg-rgb: 231,233,225;
  --page-fg: #211D17;
  --parchment: #F1ECDC;
  --parchment-fg: #211D17;
  --ink-soft: rgba(33,29,23,0.62);
  --hairline: rgba(33,29,23,0.16);
  --hairline-strong: rgba(33,29,23,0.32);
  --brass: #8C6A26;
  --brass-rgb: 140,106,38;
  --brass-strong: #6E5119;
  /* Fixed (never swaps with theme): parchment stays light-toned in both
     themes, so anything rendered on it needs a brass dark enough to read
     on a light surface regardless of the surrounding page's theme. */
  --brass-on-parchment: #6E5119;
  --brass-on-parchment-rgb: 110,81,25;
  --seal-green: #2C6A4E;
  --seal-green-rgb: 44,106,78;
  --seal-red: #8A3131;
  --seal-red-rgb: 138,49,49;
  --panel-shadow: 0 1px 0 rgba(33,29,23,0.06), 0 12px 28px -18px rgba(33,29,23,0.35);

  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --radius: 3px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #15161B;
    --page-bg-rgb: 21,22,27;
    --page-fg: #E7E4D8;
    --parchment: #E7DFC7;
    --parchment-fg: #201C15;
    --ink-soft: rgba(231,228,216,0.64);
    --hairline: rgba(231,228,216,0.16);
    --hairline-strong: rgba(231,228,216,0.30);
    --brass: #D4AD64;
    --brass-rgb: 212,173,100;
    --brass-strong: #E8C583;
    --seal-green: #5FAE86;
    --seal-green-rgb: 95,174,134;
    --seal-red: #D98A8A;
    --seal-red-rgb: 217,138,138;
    --panel-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 20px 40px -20px rgba(0,0,0,0.65);
  }
}
:root[data-theme="dark"] {
  --page-bg: #15161B; --page-bg-rgb: 21,22,27; --page-fg: #E7E4D8;
  --parchment: #E7DFC7; --parchment-fg: #201C15;
  --ink-soft: rgba(231,228,216,0.64); --hairline: rgba(231,228,216,0.16); --hairline-strong: rgba(231,228,216,0.30);
  --brass: #D4AD64; --brass-rgb: 212,173,100; --brass-strong: #E8C583;
  --seal-green: #5FAE86; --seal-green-rgb: 95,174,134; --seal-red: #D98A8A; --seal-red-rgb: 217,138,138;
  --panel-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 20px 40px -20px rgba(0,0,0,0.65);
}
:root[data-theme="light"] {
  --page-bg: #E7E9E1; --page-bg-rgb: 231,233,225; --page-fg: #211D17;
  --parchment: #F1ECDC; --parchment-fg: #211D17;
  --ink-soft: rgba(33,29,23,0.62); --hairline: rgba(33,29,23,0.16); --hairline-strong: rgba(33,29,23,0.32);
  --brass: #8C6A26; --brass-rgb: 140,106,38; --brass-strong: #6E5119;
  --seal-green: #2C6A4E; --seal-green-rgb: 44,106,78; --seal-red: #8A3131; --seal-red-rgb: 138,49,49;
  --panel-shadow: 0 1px 0 rgba(33,29,23,0.06), 0 12px 28px -18px rgba(33,29,23,0.35);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--page-fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(var(--brass-rgb), 0.35); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---------- header ---------- */
header.site {
  background: rgba(var(--page-bg-rgb), 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 40;
}
header.site .wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 1.5rem);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: .14em;
  font-size: .9rem;
  text-decoration: none;
  color: var(--page-fg);
}
.wordmark svg { width: 20px; height: 20px; flex: none; }
.back-link {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.back-link:hover, .back-link:focus-visible { color: var(--brass); border-color: var(--brass); }

/* ---------- shell ---------- */
main.shell {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 1.5rem) 5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.page-lede {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--ink-soft);
  margin: 0;
  letter-spacing: .01em;
}

/* ---------- card / section ---------- */
.card {
  background: var(--parchment);
  color: var(--parchment-fg);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
  padding: clamp(1.1rem, 3vw, 1.6rem);
}
.card + .card { margin-top: 0; }
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0;
}
.card-eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-on-parchment);
}
.card-body { display: flex; flex-direction: column; gap: 1rem; }
.card-note {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: rgba(32,28,21,0.58);
  line-height: 1.55;
}

/* ---------- form controls ---------- */
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(32,28,21,0.55);
}
.field input, .field select {
  font-family: var(--font-mono);
  font-size: .92rem;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(32,28,21,0.3);
  border-radius: 2px;
  padding: .55rem .65rem;
  color: var(--parchment-fg);
}
:root[data-theme="dark"] .field input, :root[data-theme="dark"] .field select { background: rgba(0,0,0,0.15); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field input, :root:not([data-theme="light"]) .field select { background: rgba(0,0,0,0.15); }
}
.field input:focus-visible, .field select:focus-visible { border-color: var(--brass); }
.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 160px; }

.row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }

button {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .65rem 1.1rem;
  background: transparent;
  border: 1.5px solid rgba(32,28,21,0.55);
  color: var(--parchment-fg);
  cursor: pointer;
  border-radius: 2px;
}
button:hover, button:focus-visible { background: rgba(32,28,21,0.07); outline: none; border-color: rgba(32,28,21,0.8); }
button.primary { border-color: var(--brass-on-parchment); color: var(--brass-on-parchment); }
button.primary:hover, button.primary:focus-visible { background: rgba(var(--brass-on-parchment-rgb), 0.1); border-color: var(--brass-on-parchment); }
button.yes { }
button.yes:hover, button.yes:focus-visible { border-color: var(--seal-green); color: var(--seal-green); background: rgba(var(--seal-green-rgb), 0.08); }
button.no:hover, button.no:focus-visible { border-color: var(--seal-red); color: var(--seal-red); background: rgba(var(--seal-red-rgb), 0.08); }
button:disabled { opacity: .45; cursor: default; }

/* ---------- device status ---------- */
#device-status {
  font-family: var(--font-mono);
  font-size: .84rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(32,28,21,0.72);
}
#device-status.ready { color: var(--seal-green); font-weight: 600; }

/* ---------- sigil / pairing ---------- */
#sigil-display {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: rgba(32,28,21,0.65);
  min-height: 1.2em;
}
#sigil-display .sigil {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  color: var(--brass-on-parchment);
  letter-spacing: .02em;
  margin: .3rem 0;
}

#pair-confirm {
  border-top: 1px dashed rgba(32,28,21,0.25);
  padding-top: 1rem;
  margin-top: .3rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
#pair-confirm p { margin: 0; font-size: .92rem; }
#pair-confirm #confirm-fingerprint {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--brass-on-parchment);
}

/* ---------- peers ---------- */
#peers-list { display: flex; flex-direction: column; gap: .5rem; }
#peers-list .peer {
  font-family: var(--font-mono);
  font-size: .8rem;
  border: 1px solid rgba(32,28,21,0.22);
  border-radius: 2px;
  padding: .55rem .7rem;
  color: rgba(32,28,21,0.82);
}
#peers-list:empty::before {
  content: "no peers pinned yet.";
  font-family: var(--font-mono);
  font-size: .8rem;
  color: rgba(32,28,21,0.5);
}

/* ---------- ask result ---------- */
#ask-result {
  font-family: var(--font-mono);
  font-size: .88rem;
  min-height: 1.3em;
}
#ask-result .outcome-YES { color: var(--seal-green); font-weight: 600; }
#ask-result .outcome-NO { color: var(--seal-red); font-weight: 600; }
#ask-result .outcome-TIMEOUT, #ask-result .outcome-INVALID { color: var(--brass-on-parchment); font-weight: 600; }

/* ---------- listen / the ceremony ---------- */
#listen-status {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: rgba(32,28,21,0.6);
}
#question-box {
  display: none;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--page-bg);
  padding: 1.25rem;
  margin-top: .25rem;
}
:root[data-theme="dark"] #question-box, :root:not([data-theme="light"]) #question-box {
}
@media (prefers-color-scheme: dark) { #question-box { background: rgba(0,0,0,0.18); } }
:root[data-theme="dark"] #question-box { background: rgba(0,0,0,0.18); }
:root[data-theme="light"] #question-box { background: rgba(0,0,0,0.03); }
#question-peer {
  font-family: var(--font-mono);
  font-size: .76rem;
  color: rgba(32,28,21,0.55);
  margin-bottom: .5rem;
}
#question-text {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 1.2rem !important;
  line-height: 1.35;
  margin: 0 0 1rem !important;
}

/* ---------- footer ---------- */
footer.site {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 1.5rem) 3rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}