:root {
  --paper: #f6f1e8;
  --ink: #1d3557;
  --ink-soft: #415b7e;
  --signal: #e63946;
  --line: #c9c3ba;
  --inverse: #fbfaf6;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "IBM Plex Sans", Inter, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
}
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--signal); }
a:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--inverse); padding: 0.5rem 0.75rem; color: var(--ink); }
.skip-link:focus { left: 8px; }

.masthead { min-height: 80px; display: flex; justify-content: space-between; align-items: center; padding: 1rem clamp(1.25rem, 5vw, 5rem); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; font-family: var(--mono); font-size: 0.78rem; font-weight: 600; line-height: 1.1; letter-spacing: 0.08em; }
.brand img { display: block; }
.brand-lockup { display: grid; gap: 0.15rem; }
.brand-lockup small { color: var(--signal); font-size: 0.6rem; letter-spacing: 0.05em; }
.issue-stamp { margin: 0; text-align: right; font: 500 0.65rem/1.45 var(--mono); letter-spacing: 0.07em; }
.issue-stamp span { color: var(--signal); }

.hero { position: relative; min-height: min(700px, calc(100vh - 80px)); overflow: hidden; padding: clamp(3.5rem, 9vw, 8rem) clamp(1.25rem, 10vw, 12rem) clamp(3.5rem, 8vw, 7rem); background: var(--ink); color: var(--inverse); }
.hero::after { content: ""; position: absolute; width: 60vw; height: 14vw; max-height: 170px; left: 41%; top: 14%; background: var(--signal); transform: rotate(-10deg); opacity: 0.98; }
.hero::before { content: ""; position: absolute; width: 20vw; min-width: 180px; height: 33%; right: -6%; bottom: 11%; border: 1px solid rgba(255,255,255,.35); transform: rotate(11deg); }
.eyebrow { display: flex; align-items: center; gap: 0.55rem; margin: 0; font: 600 0.72rem/1.4 var(--mono); letter-spacing: .1em; }
.red-line { display: inline-block; width: 2rem; height: 2px; background: var(--signal); }
.hero .eyebrow, .hero-copy { position: relative; z-index: 1; }
.hero-number { position: absolute; z-index: 1; right: clamp(1rem, 8vw, 9rem); top: 21%; margin: 0; color: var(--signal); font: 500 clamp(8rem, 21vw, 20rem)/.75 var(--mono); letter-spacing: -.1em; }
.hero-copy { max-width: 57rem; }
.kicker { margin: clamp(4rem, 13vw, 9rem) 0 0.9rem; max-width: 23rem; font: 400 0.86rem/1.45 var(--mono); letter-spacing: .02em; }
h1 { max-width: 50rem; margin: 0; font-size: clamp(4rem, 10vw, 9.2rem); line-height: .82; letter-spacing: -.075em; font-weight: 700; }
h1 .signal-word { color: var(--signal); }
h1 .rule-redaction { position: relative; display: inline-block; }
h1 .rule-redaction::after { content: ""; position: absolute; left: -.06em; right: -.06em; top: 50%; height: 3px; transform: translateY(-50%); background: var(--inverse); }
.subtitle { margin: 1.9rem 0 0; max-width: 28rem; font-size: clamp(1.08rem, 2vw, 1.45rem); line-height: 1.35; }
.edition-note { display: inline-block; max-width: 38rem; margin-top: 4.5rem; padding: 0.9rem 1.05rem; border-left: 3px solid var(--signal); background: rgba(255,255,255,.09); color: rgba(255,255,255,.94); font-size: .9rem; line-height: 1.45; }

.article-shell { display: flex; align-items: flex-start; gap: clamp(2rem, 8vw, 10rem); max-width: 89rem; margin: 0 auto; padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 5vw, 5rem); }
.article-rail { position: sticky; top: 1rem; flex: 0 0 10.5rem; padding-top: .8rem; font: 400 .72rem/1.45 var(--mono); letter-spacing: .03em; }
.rail-label, .rail-meta { margin: 0 0 .75rem; color: var(--ink-soft); }
.article-rail nav { display: grid; border-top: 1px solid var(--line); }
.article-rail nav a { padding: .55rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.rail-meta { margin-top: 2.3rem; }
.rail-meta strong { color: var(--signal); font-weight: 500; }
.article-copy { width: min(100%, 48rem); }
.article-copy section + section { margin-top: clamp(4rem, 10vw, 8rem); }
.section-heading { margin-bottom: 2rem; }
.section-heading > p { margin: 0 0 .6rem; color: var(--signal); font: 600 .72rem/1.4 var(--mono); letter-spacing: .1em; }
h2 { max-width: 39rem; margin: 0; font-size: clamp(2rem, 5vw, 3.9rem); line-height: .96; letter-spacing: -.055em; }
.record-grid { display: flex; gap: clamp(2rem, 7vw, 5rem); align-items: flex-start; }
.book-facts { flex: 0 0 min(46%, 15rem); margin: 0; border-top: 3px solid var(--ink); }
.book-facts div { padding: .8rem 0; border-bottom: 1px solid var(--line); }
dt { font: 600 .67rem/1.25 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
dd { margin: .26rem 0 0; font-size: .93rem; line-height: 1.35; }
.record-summary { flex: 1; font-size: 1.1rem; line-height: 1.72; }
.record-summary p:first-child, .prose p:first-child { margin-top: 0; }
sup a { color: var(--signal); font: 600 .7rem var(--mono); text-decoration: none; }
.prose { max-width: 40rem; font-size: 1.18rem; line-height: 1.75; }
.idea-list { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--ink); }
.idea-list li { display: flex; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.idea-index { color: var(--signal); font: 500 .8rem var(--mono); }
.idea-list p { margin: 0; font-size: clamp(1.25rem, 3vw, 1.85rem); line-height: 1.18; letter-spacing: -.025em; }
.reference-list { padding-left: 1.3rem; margin: 0; font-size: .95rem; }
.reference-list li { padding-left: .25rem; margin-bottom: 1rem; }
.see-also { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--ink); font-size: .9rem; }
.see-also span { font: 600 .68rem/1.8 var(--mono); letter-spacing: .1em; color: var(--signal); }

.licence-panel { display: flex; gap: clamp(2rem, 8vw, 9rem); padding: clamp(3rem, 8vw, 7rem) clamp(1.25rem, 10vw, 12rem); background: var(--signal); color: var(--inverse); }
.licence-index { flex: 0 0 auto; padding-top: .13rem; font: 600 clamp(1.7rem, 4.2vw, 4rem)/.85 var(--mono); letter-spacing: -.1em; }
.licence-copy { max-width: 50rem; }
.licence-panel .eyebrow { color: var(--inverse); }
.licence-panel .red-line { background: var(--ink); }
.licence-panel h2 { margin: .9rem 0 1.6rem; color: var(--ink); }
.licence-panel p:not(.eyebrow) { max-width: 49rem; margin: .95rem 0; font-size: 1rem; line-height: 1.65; }
.licence-panel a { color: inherit; }
.licence-links { display: flex; flex-wrap: wrap; gap: .65rem 1.3rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.55); font: 500 .78rem/1.5 var(--mono); }
.licence-links a { text-decoration: none; }
.licence-links a span { color: var(--ink); }

@media (max-width: 760px) {
  body { font-size: 17px; }
  .masthead { min-height: 68px; }
  .issue-stamp { display: none; }
  .hero { min-height: 620px; padding-top: 3.2rem; }
  .hero::after { width: 94vw; height: 22vw; top: 17%; left: 17%; }
  .hero-number { right: 1rem; top: 25%; }
  .kicker { margin-top: 9rem; }
  .edition-note { margin-top: 2.8rem; }
  .article-shell { display: block; }
  .article-rail { position: static; display: flex; align-items: baseline; gap: 1rem; padding: 0; margin: 0 0 3rem; overflow-x: auto; }
  .article-rail nav { display: flex; min-width: max-content; border: 0; gap: 1rem; }
  .article-rail nav a { padding: 0; border: 0; text-decoration: underline; }
  .rail-label, .rail-meta { display: none; }
  .record-grid { display: block; }
  .book-facts { margin-bottom: 2rem; }
  .licence-panel { display: block; }
  .licence-index { margin-bottom: 1.4rem; }
}

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