.article-shell { padding-bottom: 20px; }
.article-sheet { max-width: 930px; margin: 0 auto; padding: clamp(24px, 5vw, 60px); border: var(--line); background: rgba(251, 246, 234, .92); box-shadow: 10px 10px 0 var(--ink); }
.article-sheet > :first-child { margin-top: 0; }
.prose-section { margin-top: 48px; }
.prose-section:first-child { margin-top: 0; }
.prose-section h2 { margin-bottom: 18px; font-size: clamp(24px, 4vw, 36px); }
.prose-section h3 { margin: 28px 0 10px; font-size: 19px; }
.prose-section p + p, .prose-section ul + p, .prose-section ol + p, .prose-section p + ul, .prose-section p + ol { margin-top: 16px; }
.prose-section p { color: var(--ink-2); }
.prose-section a:not(.source-link) { color: var(--red-dark); font-weight: 900; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose-section strong { color: var(--ink); }
.callout { margin-top: 24px; padding: 17px 18px; border-left: 6px solid var(--red); background: var(--paper-2); color: var(--ink-2) !important; }
.callout.warning { border-color: var(--yellow); background: #fff4ce; }
.numbered-list, .check-list { margin: 18px 0 0; padding-left: 1.5em; color: var(--ink-2); }
.numbered-list li + li, .check-list li + li { margin-top: 8px; }
.numbered-list li::marker { color: var(--red); font-family: var(--display); }
.check-list { list-style: "☑  "; }
.check-list li::marker { color: var(--red); }

.fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.fact-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fact-grid > div { padding: 18px; border: 2px solid var(--ink); background: var(--paper-2); }
.fact-grid strong { display: block; margin-top: 7px; font-family: var(--display); font-size: 17px; line-height: 1.35; }
.fact-grid p { margin-top: 8px; font-size: 13px; }
.fact-label { display: inline-block; color: var(--blue); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.fiction-label { color: var(--red-dark); }
.label-table { display: grid; gap: 10px; }
.label-table > div { display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: start; padding: 14px; border: 2px solid var(--ink); background: var(--paper-2); }
.label-table p { font-size: 14px; }
.badge { display: inline-flex; align-items: center; justify-content: center; width: max-content; padding: 4px 8px; border: 2px solid currentColor; font-size: 10px; font-weight: 900; letter-spacing: .08em; line-height: 1.1; }
.badge.fact { color: var(--blue); }
.badge.fiction { color: var(--red-dark); background: rgba(217, 58, 43, .07); }
.badge.interpretation { color: #805d00; background: #fff4ce; }

.source-box, .review-card { margin-top: 22px; padding: 18px; border: var(--line); background: var(--paper-2); box-shadow: 5px 5px 0 var(--ink); }
.source-box strong, .review-card strong { display: block; font-family: var(--display); font-size: 17px; }
.source-box p, .review-card p { margin-top: 8px; font-size: 13px; }
.source-link { color: var(--red-dark); font-weight: 900; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.source-link:hover { color: var(--blue); }

.priority-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: priority; }
.priority-list li { display: grid; grid-template-columns: 190px 1fr; gap: 14px; padding: 16px; border: 2px solid var(--ink); background: var(--paper-2); counter-increment: priority; }
.priority-list li::before { grid-row: span 2; color: var(--red); content: "0" counter(priority); font-family: var(--display); font-size: 25px; }
.priority-list strong { margin-left: -185px; padding-left: 40px; font-family: var(--display); font-size: 17px; }
.priority-list span { grid-column: 2; color: var(--ink-2); font-size: 14px; }

.diagram { position: relative; height: 210px; margin: 30px 0 12px; overflow: hidden; border: var(--line); background: linear-gradient(155deg, transparent 49.5%, var(--paper-2) 50%); }
.diagram-ground { position: absolute; right: 12%; bottom: 28px; left: 8%; height: 4px; background: var(--ink); }
.diagram-slope { position: absolute; right: 12%; bottom: 31px; left: 22%; height: 4px; background: var(--red); transform: rotate(-30deg); transform-origin: left center; }
.diagram-angle { position: absolute; bottom: 35px; left: 22%; padding: 4px 8px; color: var(--red-dark); font-family: var(--display); font-size: 14px; }
.diagram-label { position: absolute; right: 18px; top: 16px; padding: 5px 8px; background: var(--yellow); border: 2px solid var(--ink); font-family: var(--display); font-size: 11px; transform: rotate(3deg); }

.sequence { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 26px; }
.sequence div { display: grid; gap: 3px; min-height: 90px; place-content: center; padding: 12px; border: var(--line); background: var(--paper-2); text-align: center; }
.sequence b { color: var(--red); font-family: var(--display); font-size: 20px; }
.sequence span { font-weight: 900; }
.sequence i { color: var(--red); font-size: 24px; font-style: normal; }

.editorial-timeline, .updates-list { margin: 0; padding: 0; list-style: none; }
.editorial-timeline li { display: grid; grid-template-columns: 105px 1fr; gap: 22px; padding: 22px 0; border-bottom: 2px dashed var(--ink-3); }
.editorial-timeline li:first-child { padding-top: 0; }
.editorial-timeline time { color: var(--red); font-family: var(--display); font-size: 23px; }
.editorial-timeline h3 { margin: 10px 0 7px; font-size: 20px; }
.editorial-timeline p { font-size: 14px; }

.term-list, .research-cards, .archive-grid, .source-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.term-card, .research-cards article, .archive-card, .source-list article { padding: 20px; border: var(--line); background: var(--paper-2); box-shadow: 5px 5px 0 var(--ink); }
.term-card h3, .research-cards h3, .archive-card h2, .source-list h3 { margin: 12px 0 8px; font-size: 20px; }
.term-card p, .research-cards p, .archive-card p, .source-list p { color: var(--ink-2); font-size: 14px; }
.term-card a { display: inline-block; margin-top: 14px; color: var(--red-dark); font-weight: 900; }
.fictional-terms .term-card { transform: rotate(-.3deg); }
.research-number { display: block; color: var(--red); font-family: var(--display); font-size: 34px; line-height: 1; }
.archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.archive-card:nth-child(2) { transform: rotate(.7deg); }
.archive-card:nth-child(3) { transform: rotate(-.5deg); }
.archive-no, .source-kind { color: var(--red-dark); font-family: var(--display); font-size: 11px; letter-spacing: .1em; }
.archive-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 22px; padding-top: 10px; border-top: 2px solid var(--ink); color: var(--ink-3); font-size: 11px; }
.source-list { gap: 12px; }
.source-list h3 { font-size: 16px; line-height: 1.45; }
.source-list-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.compare-table-wrap { overflow-x: auto; }
.compare-table { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--paper-3); font-size: 14px; }
.compare-table caption { padding: 10px; color: var(--ink-2); text-align: left; font-weight: 800; }
.compare-table th, .compare-table td { padding: 12px 13px; border: 2px solid var(--ink); vertical-align: top; text-align: left; }
.compare-table thead th { background: var(--ink); color: var(--paper); }
.compare-table tbody th { background: var(--paper-2); font-family: var(--display); font-size: 13px; }

.faq-list { display: grid; gap: 12px; }
.faq-list details { border: var(--line); background: var(--paper-2); }
.faq-list summary { position: relative; padding: 17px 52px 17px 18px; cursor: pointer; font-family: var(--display); font-size: 17px; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; right: 18px; top: 50%; color: var(--red); content: "+"; font-size: 26px; line-height: 1; transform: translateY(-50%); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details > div { padding: 0 18px 18px; border-top: 2px dashed var(--ink-3); }
.faq-list details p { padding-top: 14px; color: var(--ink-2); }

.updates-list li { display: grid; grid-template-columns: 140px 1fr; gap: 22px; padding: 22px 0; border-bottom: 2px dashed var(--ink-3); }
.updates-list time { color: var(--red); font-family: var(--display); font-size: 18px; }
.updates-list h2 { margin: 12px 0; font-size: 23px; }
.updates-list .check-list { margin-top: 12px; }

@media (max-width: 760px) {
  .article-sheet { padding: 23px 18px; box-shadow: 6px 6px 0 var(--ink); }
  .fact-grid, .fact-grid.two-col, .term-list, .research-cards, .source-list, .source-list-compact, .archive-grid { grid-template-columns: 1fr; }
  .label-table > div { grid-template-columns: 1fr; gap: 7px; }
  .priority-list li { grid-template-columns: 1fr; }
  .priority-list li::before { grid-row: auto; }
  .priority-list strong { margin-left: 0; padding-left: 0; }
  .priority-list span { grid-column: auto; }
  .sequence { grid-template-columns: 1fr; }
  .sequence i { transform: rotate(90deg); }
  .editorial-timeline li, .updates-list li { grid-template-columns: 1fr; gap: 8px; }
  .diagram { height: 170px; }
}