/* Old Pawn Notes — field notes on vintage silver and turquoise */
:root {
  --ground: #e6e9e5;   /* tarnished-silver grey paper */
  --paper: #f3f4f1;
  --ink: #1c2629;      /* oxidized black, cool */
  --muted: #4f5d63;
  --turq: #1d6f6a;     /* deep Kingman-blue-green, AA on paper */
  --matrix: #4b3a2d;   /* spiderweb matrix brown */
  --rule: #b9c1c2;
  --measure: 38rem;
  --serif: "Spectral", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.65;
  font-weight: 400;
}

a { color: var(--turq); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--matrix); }
:focus-visible { outline: 3px solid var(--turq); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: calc(var(--measure) + 2rem); margin: 0 auto; padding: 0 1rem; }

/* Header */
.site-head { padding: 1.5rem 0 0; }
.site-head .wrap { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.brand { font-weight: 600; font-size: 1.15rem; color: var(--ink); text-decoration: none; letter-spacing: 0.01em; }
.brand:hover { color: var(--ink); }
.nav { display: flex; gap: 1.1rem; font-size: 1rem; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

/* Disclosure line — required, kept plain */
.disclose { font-size: 0.875rem; color: var(--muted); margin: 0.75rem 0 0; }

/* Hero */
.hero { padding: 4.5rem 0 2.5rem; }
.hero h1 {
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}
.hero p { font-size: 1.25rem; line-height: 1.55; color: var(--muted); margin: 0; max-width: 34rem; }

/* The memorable thing: hallmarks struck into the page */
.marks { padding: 1rem 0 3.5rem; }
.marks-row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 1.75rem 1.25rem;
}
.die {
  display: inline-block;
  font-family: "Spectral SC", var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: #3a4447;
  padding: 0.35rem 0.7rem 0.4rem;
  border-radius: 0.45rem 0.2rem 0.5rem 0.25rem; /* struck by hand, never quite square */
  background: linear-gradient(180deg, #cfd5d4, #dfe3e1);
  box-shadow: inset 0 2px 3px rgba(28, 38, 41, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.marks-row p { margin: 0.6rem 0 0; font-size: 0.98rem; line-height: 1.45; color: var(--muted); }
.marks-note { font-size: 0.95rem; color: var(--muted); margin: 1.75rem 0 0; }

/* Sections */
.section { padding: 2.75rem 0; border-top: 1px solid var(--rule); }
.section h2 { font-size: 1.6rem; font-weight: 500; line-height: 1.2; margin: 0 0 1rem; letter-spacing: -0.01em; }
.section p { margin: 0 0 1rem; }

.guides { list-style: none; margin: 0; padding: 0; }
.guides li { padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.guides li:last-child { border-bottom: 0; }
.guides strong { display: block; font-weight: 500; font-size: 1.15rem; }
.guides span { color: var(--muted); font-size: 0.98rem; }

/* Long-form pages */
.page { padding: 3.5rem 0 3rem; }
.page h1 { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 500; line-height: 1.1; margin: 0 0 1.5rem; letter-spacing: -0.015em; }
.page h2 { font-size: 1.3rem; font-weight: 600; margin: 2rem 0 0.5rem; }
.page p, .page li { max-width: var(--measure); }
.page ul { padding-left: 1.2rem; }

/* Footer */
.site-foot { border-top: 1px solid var(--rule); padding: 2rem 0 3rem; font-size: 0.95rem; color: var(--muted); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 0.75rem; }
.site-foot a { color: var(--muted); }

@media (max-width: 30rem) {
  body { font-size: 1.0625rem; }
  .hero { padding-top: 3rem; }
}

@media (prefers-color-scheme: dark) {
  :root { --ground: #161d1f; --paper: #1d2528; --ink: #e4e8e6; --muted: #a6b2b5; --turq: #6cc3bc; --matrix: #d2b49a; --rule: #34403f; }
  .die { color: #e4e8e6; background: linear-gradient(180deg, #2a3436, #323d3f); box-shadow: inset 0 2px 3px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.08); text-shadow: none; }
}

.marks h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 1.25rem; color: var(--muted); }
.die { white-space: nowrap; }
@media (max-width: 30rem) { .die { font-size: 0.92rem; letter-spacing: 0.05em; } }

/* Article */
.article .lede { font-size: 1.2rem; color: var(--muted); }
.article table { width: 100%; max-width: var(--measure); border-collapse: collapse; margin: 1rem 0 1.25rem; font-size: 1rem; }
.article caption { text-align: left; font-weight: 600; padding-bottom: 0.5rem; }
.article th, .article td { text-align: left; vertical-align: top; padding: 0.55rem 0.75rem 0.55rem 0; border-bottom: 1px solid var(--rule); }
.article td:first-child { font-family: "Spectral SC", var(--serif); font-weight: 600; white-space: nowrap; }
.article figure { margin: 1.75rem 0; max-width: var(--measure); }
.article figure img { width: 100%; height: auto; display: block; border-radius: 0.35rem; }
.article figcaption { font-size: 0.95rem; color: var(--muted); margin-top: 0.5rem; }
.diagram svg { width: 100%; height: auto; color: var(--ink); }
.diagram .mark rect { fill: var(--turq); }
.diagram .label text { fill: var(--muted); font-family: var(--serif); }
.sources { font-size: 0.98rem; }
.diagram svg { max-width: 30rem; }