/* Hallmark · genre: editorial · macrostructure: Long Document · theme: Newsprint · nav: N6 Masthead · footer: Ft6 Letter close · design-system: design.md · designed-as-app */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · contrast: pass · mobile: checked 320/375/414/768 · refinement: author note + reading sidebar */
@import url('tokens.css');
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: var(--text-base)/1.8 var(--font-body); }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-accent); }
a:active { opacity: .75; }
a:focus-visible, summary:focus-visible, .table-wrap:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 5px; }
h1,h2,h3 { font-family: var(--font-display); font-style: normal; min-width: 0; overflow-wrap: anywhere; }
p,h1,h2,h3 { margin: 0; }
.skip { position: fixed; inset-block-start: -6rem; inset-inline-start: var(--space-sm); padding: var(--space-sm); background: var(--color-paper); z-index: 10; }
.skip:focus { inset-block-start: var(--space-sm); }
.site-shell { max-width: var(--page-width); margin-inline: auto; padding-inline: var(--page-gutter); }
.masthead { padding-top: var(--space-md); }
.mast-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); padding-bottom: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
.mast-meta span:last-child { white-space: nowrap; }
.identity { padding-block: var(--space-lg); display: flex; justify-content: center; align-items: center; gap: var(--space-xs); }
.wordmark { font: 800 clamp(1.875rem,6.5vw,3.75rem)/1.3 var(--font-display); letter-spacing: .02em; white-space: nowrap; }
.seal { display: grid; place-content: center; width: 1.75rem; height: 1.75rem; flex-shrink: 0; border: var(--rule-hair) solid var(--color-accent); color: var(--color-accent); font: 700 var(--text-base)/1 var(--font-display); }
.mast-caption { text-align: center; font-size: var(--text-sm); color: var(--color-muted); margin-top: calc(-1 * var(--space-xs)); margin-bottom: var(--space-lg); }
.desktop-nav.nav-links { display: none; }
.mobile-nav { border-top: var(--rule-fine) solid var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-ink); }
.mobile-nav summary { cursor: pointer; padding: var(--space-xs) var(--space-3xs); font-size: var(--text-sm); }
.mobile-nav summary::marker { color: var(--color-accent); }
.mobile-nav summary:hover { color: var(--color-accent); }
.mobile-nav summary:active { opacity: .75; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-lg); padding-block: var(--space-xs); }
.nav-links a { display: inline-flex; min-height: 44px; align-items: center; white-space: nowrap; font-size: var(--text-sm); }
.nav-links a[aria-current='page'] { color: var(--color-accent); text-decoration: underline; text-underline-offset: .6em; text-decoration-thickness: 2px; }
main { min-height: 45dvh; outline: none; }
.home-opening { padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.lead-meta,.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.category-label { color: var(--color-accent); }
.lead-story h1 { max-width: 16em; font-size: var(--text-display); font-weight: 800; line-height: 1.45; margin-block: var(--space-sm); }
.lead-story>p { max-width: 36em; color: var(--color-ink-2); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; border-bottom: var(--rule-hair) solid var(--color-ink); white-space: nowrap; font-size: var(--text-sm); gap: var(--space-xs); }
.lead-story .text-link { margin-top: var(--space-md); }
.editor-note { margin-top: var(--space-lg); padding: var(--space-md); background: var(--color-paper-2); }
.editor-note h2 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.editor-note p { font-size: var(--text-sm); color: var(--color-ink-2); }
.editor-note .signature { margin-top: var(--space-sm); font-family: var(--font-display); text-align: right; color: var(--color-ink); }
.section-head { padding-top: var(--space-lg); padding-bottom: var(--space-xs); }
.section-head h2 { font-family: var(--font-body); font-size: var(--text-md); font-weight: 700; }
.section-head p { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-3xs); }
.entry { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.entry h3 { font-size: clamp(1.25rem,2.4vw,1.625rem); line-height: 1.65; font-weight: 800; margin-block: var(--space-2xs); }
.entry p { color: var(--color-muted); font-size: var(--text-base); }
.entry a { display: block; }
.entry .meta { font-size: var(--text-xs); }
.notice { color: var(--color-muted); font-size: var(--text-xs); padding-block: var(--space-md); }
.page-heading { padding-block: var(--space-xl) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.page-heading h1 { font-size: var(--text-display); line-height: 1.4; margin-bottom: var(--space-sm); }
.page-heading p { color: var(--color-muted); max-width: 38em; }
.category-list { max-width: 53rem; }
.article { max-width: 44rem; margin-inline: auto; padding-top: var(--space-md); }
.back { display: inline-flex; min-height: 44px; align-items: center; color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
.article .page-heading { border: 0; padding-top: var(--space-md); }
.article .page-heading h1 { font-size: clamp(1.875rem,3.3vw,2.75rem); line-height: 1.6; }
.draft-note { padding: var(--space-sm) var(--space-md); border-inline-start: 2px solid var(--color-accent); background: var(--color-paper-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.article-body { color: var(--color-ink-2); font-size: var(--text-md); line-height: 2.1; padding-bottom: var(--space-xl); }
.article-body p { margin-top: var(--space-md); }
.article-body h2 { font-size: var(--text-lg); color: var(--color-ink); margin-top: var(--space-xl); }
.article-ending { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); display: flex; gap: var(--space-md); flex-wrap: wrap; }
.about-body { max-width: 42rem; padding-top: var(--space-md); }
.table-wrap { overflow-x: auto; margin-top: var(--space-lg); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
caption { text-align: left; font-weight: 700; font-size: var(--text-base); margin-bottom: var(--space-sm); }
th { text-align: left; white-space: nowrap; font-weight: 500; background: var(--color-paper-2); }
th,td { padding: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
.empty-cell { color: var(--color-muted); padding-block: var(--space-lg); }
.site-footer { margin-top: var(--space-xl); padding-block: var(--space-lg); border-top: 3px double var(--color-ink); display: grid; gap: var(--space-md); }
.signoff { font: 700 var(--text-lg)/1.8 var(--font-display); }
.footer-meta { font-size: var(--text-xs); color: var(--color-muted); }
.footer-links { display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; font-size: var(--text-sm); }
@media(min-width:40rem) {
  .desktop-nav.nav-links { display: flex; align-items: center; border-top: var(--rule-fine) solid var(--color-ink); border-bottom: 3px double var(--color-ink); }
  .mobile-nav { display: none; }
  .identity { gap: var(--space-sm); }
  .seal { width: 2.25rem; height: 2.25rem; font-size: var(--text-lg); }
  .home-opening { padding-block: var(--space-xl); }
  .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-lg); }
  .section-head p { margin: 0; }
  .entry-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: var(--space-xl); }
  .entry { padding-block: var(--space-lg); }
  .site-footer { grid-template-columns: minmax(0,1fr) auto; align-items: end; }
  .footer-links { justify-content: end; }
}
@media(min-width:60rem) {
  .masthead { padding-top: var(--space-lg); }
  .home-opening { display: grid; grid-template-columns: minmax(0,2.2fr) minmax(0,1fr); gap: var(--space-2xl); align-items: center; }
  .editor-note { margin: 0; padding: var(--space-lg); }
  .editor-note h2 { font-size: 1.375rem; }
  .lead-story h1 { max-width: 13em; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* September refinement: the same Newsprint system, a quieter reading rhythm. */
.masthead { padding-top: var(--space-lg); }
.mast-meta { letter-spacing: .06em; }
.identity { padding-block: var(--space-xl) var(--space-md); gap: var(--space-sm); }
.wordmark { font-size: clamp(1.875rem,6.5vw,4.125rem); letter-spacing: .06em; }
.seal { width: 1.6rem; height: 2.7rem; font-size: var(--text-sm); line-height: 1.35; background: var(--color-accent); color: var(--color-accent-ink); border: 3px double var(--color-accent-ink); outline: 1px solid var(--color-accent); }
.mast-caption { letter-spacing: .2em; margin-top: 0; margin-bottom: var(--space-md); }
.desktop-nav.nav-links { gap: 0; justify-content: space-between; padding-block: var(--space-2xs); }
.desktop-nav a { padding-inline: var(--space-sm); }
.nav-links a[aria-current='page'] { text-decoration: none; font-weight: 700; }
.nav-links a[aria-current='page']::before { content: ''; width: .3rem; height: .3rem; background: var(--color-accent); margin-right: var(--space-2xs); }
.home-opening { position: relative; }
.lead-story h1 { font-size: clamp(2rem,4vw,3.25rem); line-height: 1.6; letter-spacing: -.025em; margin-block: var(--space-md); }
.lead-story h1>span { display: block; }
.accent-word { color: var(--color-accent); display: inline-block; }
.sample-label { font-size: var(--text-xs); color: var(--color-muted); border: 1px solid var(--color-rule); padding: 0 var(--space-2xs); white-space: nowrap; }
.lead-story>p { max-width: 26em; line-height: 2; }
.lead-story .lead-link { padding: var(--space-2xs) var(--space-md); gap: var(--space-xl); background: var(--color-ink); color: var(--color-paper); border: 1px solid var(--color-ink); margin-top: var(--space-lg); }
.lead-story .lead-link:hover { background: var(--color-accent); border-color: var(--color-accent); }
.editor-note { border: 1px solid var(--color-rule); border-top: 3px solid var(--color-accent); background: var(--color-paper-2); padding: var(--space-md); }
.note-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--space-sm); margin-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.note-top>span:first-child { font-size: var(--text-xs); color: var(--color-muted); letter-spacing: .15em; }
.note-seal { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--color-accent); border-radius: 50%; color: var(--color-accent); font: 700 var(--text-lg)/1 var(--font-display); }
.editor-note h2 { font-size: var(--text-lg); }
.editor-note p { line-height: 2; }
.editor-note .signature { margin-block: var(--space-md); }
.editor-note .text-link { width: 100%; justify-content: space-between; border-color: var(--color-rule); font-size: var(--text-xs); }
.section-head { border-bottom: 1px solid var(--color-ink); padding-top: var(--space-xl); padding-bottom: var(--space-sm); }
.section-head h2 { font: 700 var(--text-lg)/1.5 var(--font-display); }
.section-head h2>span { padding-inline: var(--space-2xs); color: var(--color-rule); font-weight: 400; }
.section-head small { font: 400 var(--text-xs)/1.8 var(--font-body); color: var(--color-muted); white-space: nowrap; }
.section-head>p { font-size: var(--text-xs); }
.entry { position: relative; padding-block: var(--space-lg); }
.entry h3 { font-size: clamp(1.25rem,2vw,1.5rem); line-height: 1.6; margin-block: var(--space-sm) var(--space-xs); }
.entry p { font-size: var(--text-sm); line-height: 2; max-width: 32em; }
.entry-more { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-muted); }
.entry-more>span { font-size: var(--text-lg); color: var(--color-ink); }
.entry-link:hover .entry-more, .entry-link:hover .entry-more>span { color: var(--color-accent); }
.site-notice { display: flex; align-items: center; gap: var(--space-sm); border-bottom: 1px solid var(--color-rule); padding-block: var(--space-lg); }
.site-notice>span { font: 700 var(--text-lg)/1 var(--font-display); color: var(--color-accent); border: 1px solid var(--color-rule); padding: var(--space-2xs); }
.site-notice p { font-size: var(--text-sm); line-height: 1.8; }
.site-notice p>span { color: var(--color-muted); font-size: var(--text-xs); }
.category-heading { position: relative; border-bottom: 1px solid var(--color-rule); }
.category-heading .page-heading { border: 0; padding-right: var(--space-3xl); }
.category-glyph { position: absolute; top: var(--space-xl); right: 0; width: 3.5rem; height: 3.5rem; display: grid; place-items: center; background: var(--color-paper-2); color: var(--color-accent); font: 700 var(--text-xl)/1 var(--font-display); }
.category-list { max-width: none; }
.category-list .entry h3 { font-size: clamp(1.375rem,2.5vw,1.875rem); }
.category-list .entry p { max-width: 44em; }
.reading-layout { padding-top: var(--space-md); }
.reading-layout .article { max-width: 44rem; width: 100%; padding: 0; }
.reading-aside { min-width: 0; }
.article-toc { margin-block: var(--space-xs); border-block: 1px solid var(--color-rule); }
.article-toc summary { padding-block: var(--space-xs); font-size: var(--text-sm); cursor: pointer; }
.article-toc summary::marker { color: var(--color-accent); }
.article-toc nav { padding-bottom: var(--space-xs); }
.article-toc button { display: block; appearance: none; border: 0; border-left: 1px solid var(--color-rule); background: var(--color-paper); color: var(--color-muted); font: var(--text-sm)/1.8 var(--font-body); padding: var(--space-xs) var(--space-sm); width: 100%; text-align: left; cursor: pointer; white-space: nowrap; }
.article-toc button:hover { color: var(--color-accent); border-left-color: var(--color-accent); background: var(--color-paper-2); }
.article-toc button:active { opacity: .75; }
.article-toc button:disabled { opacity: .55; cursor: not-allowed; }
.article-toc summary:active { opacity: .75; }
.article-toc button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.margin-note { display: none; }
.article .page-heading { padding-top: var(--space-md); padding-bottom: var(--space-lg); }
.article .page-heading h1 { font-size: clamp(1.875rem,3.3vw,2.75rem); line-height: 1.6; }
.article-body { padding-top: var(--space-xs); }
.article-body h2 { scroll-margin-top: var(--space-lg); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-rule); }
.article-body h2:focus { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.article-ending { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding-top: var(--space-lg); }
.article-ending>span { color: var(--color-accent); font: 700 var(--text-lg)/1 var(--font-display); }
.article-ending>p { margin: 0; color: var(--color-muted); font: var(--text-sm)/1.8 var(--font-display); }
.next-story { position: relative; display: block; background: var(--color-paper-2); border-block: 1px solid var(--color-rule); padding: var(--space-md); margin-bottom: var(--space-md); }
.next-story>span:first-child { font-size: var(--text-xs); color: var(--color-muted); }
.next-story strong { display: block; padding-top: var(--space-xs); padding-right: var(--space-lg); font: 700 var(--text-md)/1.8 var(--font-display); }
.next-arrow { position: absolute; bottom: var(--space-md); right: var(--space-md); font-size: var(--text-lg); }
.site-footer { margin-top: var(--space-xl); padding-block: var(--space-lg) var(--space-xl); }
.signoff { font-size: var(--text-md); }
.footer-meta { margin-top: var(--space-sm); }
@media(min-width:40rem) {
  .entry-list { column-gap: var(--space-2xl); }
  .entry-list .entry:nth-child(odd)::after { content: ''; position: absolute; right: calc(-1 * var(--space-lg)); top: var(--space-lg); bottom: var(--space-lg); width: 1px; background: var(--color-rule); }
  .section-head { align-items: center; }
  .category-list .entry { max-width: 52rem; }
}
@media(min-width:60rem) {
  .home-opening { grid-template-columns: minmax(0,1.9fr) minmax(0,1fr); gap: var(--space-2xl); padding-block: var(--space-xl); }
  .lead-story h1 { max-width: none; }
  .editor-note { padding: var(--space-md) var(--space-lg); }
  .reading-layout { display: grid; grid-template-columns: 12rem minmax(0,1fr); gap: var(--space-2xl); padding-top: var(--space-xl); align-items: start; }
  .reading-aside { position: sticky; top: var(--space-lg); }
  .article-toc { margin-top: var(--space-md); }
  .margin-note { display: block; margin-top: var(--space-xl); color: var(--color-muted); font: var(--text-sm)/2 var(--font-display); }
  .article .page-heading { padding-top: 0; }
}
@media(max-width:39.999rem) {
  .mast-meta { font-size: var(--text-xs); gap: var(--space-2xs); letter-spacing: 0; }
  .identity { padding-top: var(--space-lg); }
  .wordmark { letter-spacing: .01em; }
  .home-opening { padding-block: var(--space-lg); }
  .lead-story h1 { font-size: clamp(1.875rem,7.4vw,2.5rem); }
  .editor-note { margin-top: var(--space-xl); }
  .section-head { display: block; }
  .section-head small { display: block; margin-top: var(--space-2xs); }
  .section-head h2>span { display: none; }
  .section-head>p { margin-top: var(--space-2xs); }
  .category-heading .page-heading { padding-right: var(--space-2xl); }
  .category-heading h1 { font-size: var(--text-xl); }
  .category-glyph { width: 2.5rem; height: 2.5rem; font-size: var(--text-lg); }
}