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

body {
  margin: 0; background: var(--parchment); color: var(--ink);
  font-family: 'Source Serif 4', Georgia, serif; font-size: var(--fs-base); line-height: 1.65;
}
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; margin: 0; }

.paper-grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .10; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.masthead { text-align: center; max-width: 760px; margin: 0 auto; padding: var(--sp-7) var(--sp-5) var(--sp-6); position: relative; z-index: 1; }
.masthead-rule { height: 3px; background: var(--ink); margin: var(--sp-3) 0; }
.masthead-rule + .masthead-rule { height: 1px; }
.masthead-eyebrow { font-size: var(--fs-xs); letter-spacing: .12em; color: var(--burgundy); margin: 0 0 var(--sp-3); }
.crest { color: var(--gold); margin: var(--sp-3) auto; width: 64px; }
h1 { font-size: clamp(var(--fs-2xl), 8vw, 68px); line-height: 1.05; letter-spacing: -.01em; margin: var(--sp-3) 0; }
.masthead-tag { font-style: italic; color: var(--burgundy); font-size: var(--fs-lg); margin: var(--sp-2) 0 var(--sp-4); }

main { max-width: 760px; margin: 0 auto; padding: 0 var(--sp-5) var(--sp-8); position: relative; z-index: 1; }

.kicker { font-size: var(--fs-xs); letter-spacing: .16em; color: var(--burgundy); font-weight: 600; margin-bottom: var(--sp-2); }
.cover-story { padding-bottom: var(--sp-7); border-bottom: 1px solid var(--gold); }
.cover-story h2 { font-size: clamp(var(--fs-xl), 5vw, 38px); line-height: 1.15; margin-bottom: var(--sp-3); }
.byline { font-variant: small-caps; letter-spacing: .05em; color: var(--ink); opacity: .65; margin-bottom: var(--sp-4); }
.cover-story p:not(.byline) { max-width: 68ch; }

.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-6); padding: var(--sp-7) 0; border-bottom: 1px solid var(--gold); }
.column-card { background: var(--parchment-dark); padding: var(--sp-5); border-left: 3px solid var(--burgundy); }
.column-eyebrow { font-size: var(--fs-xs); letter-spacing: .1em; color: var(--burgundy); font-weight: 600; margin-bottom: var(--sp-2); }
.column-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.column-note { font-style: italic; font-size: var(--fs-sm); opacity: .7; margin-top: var(--sp-3); }

.editors-note { padding: var(--sp-7) 0; text-align: center; }
.editor-body { font-style: italic; font-size: var(--fs-lg); max-width: 56ch; margin: 0 auto; color: var(--burgundy-deep); }

footer { text-align: center; max-width: 760px; margin: 0 auto; padding: 0 var(--sp-5) var(--sp-7); position: relative; z-index: 1; }
footer p { font-size: var(--fs-xs); letter-spacing: .1em; opacity: .55; margin-top: var(--sp-3); }

:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }

/* masthead logo (real artwork) */
.masthead-logo { width: min(640px, 92%); height: auto; display: block; margin: var(--sp-3) auto; filter: drop-shadow(0 6px 24px rgba(0,0,0,.55)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.footer-mottos { font-size: var(--fs-xs); letter-spacing: .14em; color: var(--gold); margin-top: var(--sp-3); }