/* Hallmark · shape: Index-First · genre: editorial · theme: Specimen (deal 2/3, seed daak-independent-register-india-8df7·3cc34dd0·2026-10-28·r0) · job: listen · draw: 588b64
 * hero: Banner (swapped from Corridor: the list is the reason to come, so the index starts on the first screen right under a short head) · nav: banner over a retracting bar · footer: mast · imagery: none (the collectors' pictures stay on their posts) · signature: a datestamp struck in ink blue with the newest find's post office and date, and a small datestamp by every entry
 * axes: light/high-contrast-serif/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · waive 59 · the index section continues the hero under its ink rule · Index-First parts its head from its list with a rule, not a gap, so the newest posts start on the first screen */
/* Hallmark · waive 44a · the head and its datestamp sit 64px under the bar and 96px over the index's ink rule (measured 1440x900), the list itself starting on the first screen · the gate reads the index as hero content in this Index-First banner */
/* Hallmark · dismissed 58 · a window of index rows holds the collectors' titles the page exists for, each row one title and its shelf */
/* Hallmark · hero-review: fix · 4 findings · 4 resolved (poster-scale head with the stamp struck into its second line, a shorter head band, blue tilted entry marks in three forms) */
/* Hallmark · finish-review: subagent · 8 findings · 8 resolved · gap: the follow action, added as Follow by RSS in the hero and the banner */
/* Hallmark · dismissed 77 · topic, office, start and about pages are one index under a head by design, Index-First, so they run three sections */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a list of other people's titles needs an argument; every row carries its own datestamp and every office its cancellation, so the page reads as a register of mail rather than a feed */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- chrome: a banner over a bar that tucks away on the way down ---------- */
.skip { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-modal); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
.banner { background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }
.banner .container { display: flex; align-items: center; min-height: 40px; }
.banner a { text-decoration-color: var(--color-accent); }
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); transition: transform var(--dur-short) var(--ease-out); }
.bar.is-tucked { transform: translateY(-100%); }
.bar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; }
.wordmark { display: inline-flex; align-items: baseline; gap: var(--space-sm); text-decoration: none; font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: var(--tracking-display); line-height: 1; }
.wordmark__hi { font-family: var(--font-outlier); font-size: var(--text-lg); color: var(--color-ink-2); }
.nav { display: flex; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.nav a, .menu a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"], .menu a:hover, .menu a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.menu { display: none; position: relative; }
.menu summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-ink); font-weight: 500; cursor: pointer; list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--color-paper-2); }
.menu[open] summary { background: var(--color-ink); color: var(--color-paper); }
.menu ul { position: absolute; right: 0; top: calc(100% + var(--space-xs)); min-width: 14rem; margin: 0; padding: var(--space-xs) var(--space-md); list-style: none; background: var(--color-paper); border: var(--rule-hair) solid var(--color-ink); z-index: var(--z-dropdown); }
.menu li + li { border-top: var(--rule-hair) solid var(--color-rule); }
@media (max-width: 60rem) { .nav { display: none; } .menu { display: block; } }

/* ---------- the hero: the head at poster scale, the newest find's datestamp struck into the end of its second line ---------- */
.hero { padding-block: var(--space-2xl) 0; }
.hero__poster { --hero-size: clamp(3rem, 8.5vw, 8rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2xl); align-items: start; padding-bottom: var(--space-3xl); }
.hero .hero__poster h1 { grid-column: 1 / -1; font-size: var(--hero-size); font-variation-settings: "opsz" var(--display-optical); max-width: none; line-height: 0.98; text-wrap: wrap; }
.hero__poster .lead { grid-column: 1; grid-row: 2; margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 40ch; }
.hero__poster .hero__mark { grid-column: 2; grid-row: 2 / span 2; margin-top: calc(var(--hero-size) * -0.95); }
.hero__act { grid-column: 1; grid-row: 3; margin-top: var(--space-lg); }
.nowrap { white-space: nowrap; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); background: var(--color-ink); color: var(--color-paper); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out); }
.btn:hover { background: var(--color-ink-2); }
.btn:active { background: var(--color-ink); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.hero__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: var(--space-2xl); align-items: center; }
.hero h1 { font-size: var(--text-display-s); font-variation-settings: "opsz" var(--display-optical); max-width: 17ch; }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 46ch; }
.hero--page { padding-block: var(--space-3xl) var(--space-2xl); }
.hero--page h1 { font-size: var(--text-display); }
.hero--page:has(+ .sec .index) { padding-bottom: var(--space-xl); }
.hero__mark { margin: 0; display: grid; justify-items: center; gap: var(--space-sm); }
.hero__mark figcaption { font-size: var(--text-sm); color: var(--color-muted); }
.postmark { display: block; color: var(--color-ink); }
.postmark--lead { width: min(250px, 100%); color: var(--color-accent); }
.postmark .pm-arc { font-family: var(--font-body); font-weight: 500; font-size: 17px; fill: currentColor; }
.postmark .pm-date { font-family: var(--font-body); font-weight: 500; font-size: 22px; fill: currentColor; font-variant-numeric: tabular-nums; }

/* the index: hairline rows, a small datestamp, the poster's own title, then its topic and office */
.index { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.entry { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 20rem); gap: var(--space-lg); align-items: center; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.mark { width: 56px; height: 56px; color: var(--color-accent); }
.mark .mark-d { font-family: var(--font-display); font-size: 22px; font-variation-settings: "opsz" 22; fill: currentColor; }
.mark .mark-m { font-family: var(--font-body); font-weight: 500; font-size: 14px; fill: currentColor; }
.entry__title { font-family: var(--font-display); font-size: var(--text-title); font-variation-settings: "opsz" 24; line-height: 1.3; text-decoration: none; overflow-wrap: break-word; min-width: 0; }
.entry__title:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; }
.entry__meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.entry__meta a { color: var(--color-ink-2); text-decoration-color: var(--color-rule-2); }
.entry__meta a:hover { text-decoration-color: var(--color-accent); }
.more { margin-top: var(--space-lg); font-weight: 500; }
.more a { text-decoration-color: var(--color-accent); }

/* ---------- sections ---------- */
.sec { padding-block: var(--section-gap-s); }
.sec--tight { padding-block: var(--space-lg) var(--section-gap-s); }
/* on a topic or office page the list is the page: rows get more air so a screen holds fewer titles */
.sec--tight .entry, .sec--office .entry { padding-block: var(--space-2xl); }
/* an office page: its datestamp held beside its posts, released under 60rem */
.sec.sec--office { padding-block: var(--space-lg) var(--section-gap-s); }
.office { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-2xl); align-items: start; }
.office__mark { margin: 0; position: sticky; top: var(--space-3xl); }
.postmark--office { width: min(300px, 100%); color: var(--color-accent); }

.sec--paper { background: var(--color-paper-2); }
/* the price-list rows: the fact a post states set in the Didone, then its title and line */
.rows--figures .row { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); align-items: baseline; }
.row__fig { font-family: var(--font-display); font-size: var(--text-display-s); line-height: 1; font-variation-settings: "opsz" 60; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sec.offices { padding-bottom: var(--section-gap-l); }
.sec.sec--index { padding-block: 0 var(--section-gap-s); }
.sec--index .entry { padding-block: var(--space-lg); }
.sec h2 { margin-bottom: var(--space-2xl); }
.split-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.split-head h2 { margin-bottom: 0; }
.split-head .lead { color: var(--color-ink-2); }

/* the post offices: a rail of their datestamps, the next one cut by the edge */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--gap-columns); margin: 0; padding: 0 var(--gutter) var(--space-md); list-style: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; max-width: var(--container); margin-inline: auto; }
.rail > li { scroll-snap-align: start; display: grid; gap: var(--space-xs); }
.rail a { display: grid; gap: var(--space-md); text-decoration: none; }
.rail a:hover .rail__name { text-decoration: underline; text-decoration-color: var(--color-accent); }
.postmark--rail { width: 100%; max-width: 168px; }
@media (min-width: 60rem) { .rail .rail__name { font-size: var(--text-lg); } }
.rail__name { font-family: var(--font-display); font-size: var(--text-title); font-variation-settings: "opsz" 26; line-height: 1.2; }
.rail__n { font-size: var(--text-sm); color: var(--color-muted); }
.rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* rows: a title on the left five columns, its line on the right seven */
.rows { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.row h3 { font-variation-settings: "opsz" 26; }
.row h3 a { text-decoration: none; }
.row h3 a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.row p { color: var(--color-ink-2); max-width: 60ch; }
.row__by { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }

/* the one table that matters, under the double rule */
.table { width: 100%; border-collapse: collapse; border-top: 3px double var(--color-rule-2); }
.table th, .table td { padding: var(--space-md) var(--space-lg) var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: baseline; }
.table thead th { font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.table tbody th { font-weight: 400; font-family: var(--font-display); font-size: var(--text-title); font-variation-settings: "opsz" 26; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody th a { text-decoration: none; }
.table tbody th a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.table td { color: var(--color-ink-2); }
.table td.num { font-size: var(--text-lg); color: var(--color-ink); }

.prose .container > p { max-width: 62ch; font-size: var(--text-lg); line-height: 1.65; }
.prose .container > p + p { margin-top: var(--space-xl); }

/* ---------- the mast: the wordmark large on the ink band ---------- */
.mast { background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-3xl) var(--space-2xl); }
.mast a { color: var(--color-paper); text-decoration-color: currentColor; }
.mast a:focus-visible { outline-color: var(--color-paper); }
.mast__word { font-family: var(--font-display); font-size: clamp(3.5rem, 11vw, 9rem); line-height: 1; letter-spacing: var(--tracking-display); }
.mast__word span { font-family: var(--font-outlier); font-size: 0.5em; }
.mast__links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); margin: var(--space-2xl) 0 0; padding: var(--space-lg) 0 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink-2); }
.mast__links a { display: inline-flex; min-height: 44px; align-items: center; }
.mast__legal { margin-top: var(--space-xl); max-width: 70ch; font-size: var(--text-sm); color: var(--color-paper-3); }

@media (max-width: 60rem) {
  .hero__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero__poster { --hero-size: clamp(2.5rem, 11vw, 4.5rem); column-gap: var(--space-md); padding-bottom: var(--space-xl); }
  .hero__poster .hero__mark { margin-top: var(--space-md); }
  .br-wide { display: none; }
  .rows--figures .row { grid-template-columns: minmax(0, 1fr); }
  .hero__poster .hero__mark figcaption { max-width: 9rem; text-align: center; }
  .postmark--lead { width: 112px; }
  .entry { grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-xs) var(--space-md); align-items: start; }
  .mark { width: 56px; height: 56px; grid-row: span 2; }
  .entry__meta { grid-column: 2; }
  .split-head, .row, .office { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .office__mark { position: static; }
  .postmark--office { width: 200px; }
  .rail { grid-auto-columns: 40%; overflow-x: auto; }
  .table thead { display: none; }
  .table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .table th, .table td { padding: 0; border: 0; }
  .table tr { grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; }
  .table td.num { font-size: var(--text-md); }
}