/* ============================================================
   BASE — reset, elements, editorial prose
   ============================================================ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 2rem);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--t-base);
  line-height: var(--lh-reading);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: hidden;
  transition: background-color var(--d-slow) var(--e-soft),
              color var(--d-slow) var(--e-soft);
}

/* Paper grain — the texture that makes it feel printed, not rendered */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.032;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

/* ---- Headings: display serif, tight, optical ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tighter);
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); line-height: var(--lh-tight);
     letter-spacing: var(--ls-tightest); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
h5 { font-size: var(--t-md); }
h6 { font-size: var(--t-base); letter-spacing: var(--ls-tight); }

p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--rule-strong);
  transition: text-decoration-color var(--d-fast) var(--e-soft),
              color var(--d-fast) var(--e-soft);
}
a:hover { text-decoration-color: var(--accent); }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: var(--s-7) 0;
}

blockquote { margin: 0; }

/* ============================================================
   PROSE — the article body. Governs all WP post_content output.
   ============================================================ */
.prose {
  font-family: var(--font-serif);
  font-size: var(--t-md);
  line-height: var(--lh-reading);
  color: var(--ink);
  hanging-punctuation: first last;
}

.prose > * + * { margin-top: 1.4em; }

.prose > h2 {
  font-size: var(--t-xl);
  margin-top: 2.4em;
  margin-bottom: 0.1em;
  letter-spacing: var(--ls-tighter);
}
.prose > h3 {
  font-size: var(--t-lg);
  margin-top: 2em;
  margin-bottom: 0.1em;
}
.prose > h4 {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 2.2em;
}

/* Drop cap on the opening paragraph — print heritage */
.prose > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.9em;
  line-height: 0.78;
  font-weight: var(--w-regular);
  padding: 0.06em 0.1em 0 0;
  margin-top: 0.06em;
  color: var(--accent);
}

.prose a {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--accent); }

.prose strong { font-weight: var(--w-semibold); }
.prose em { font-style: italic; }

.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.55em; }
.prose li::marker { color: var(--accent); }

.prose blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--s-5);
  margin-left: 0;
  font-style: italic;
  color: var(--ink-muted);
}

.prose figure { margin: var(--s-7) 0; }
.prose figcaption {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wide);
  color: var(--ink-faint);
  margin-top: var(--s-3);
  text-align: center;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bg-sunken);
  padding: 0.14em 0.4em;
  border-radius: var(--r-sm);
}
.prose pre {
  background: var(--c-obsidian);
  color: var(--c-ivory-100);
  padding: var(--s-5);
  border-radius: var(--r-md);
  overflow-x: auto;
  font-size: var(--t-sm);
}
.prose pre code { background: none; padding: 0; }

/* Full-bleed and wide alignments inside a constrained column */
.prose > .alignwide {
  width: min(58rem, 92vw);
  margin-inline: calc(50% - min(29rem, 46vw));
}
.prose > .alignfull {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ---- Utilities ---- */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s-4);
  z-index: var(--z-modal);
  background: var(--ink);
  color: var(--bg);
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  text-decoration: none;
}
.skip-link:focus { top: var(--s-4); }