/* Hallmark · shape: kept (Foto, Album, O Sarajevu in Bosnian and English) · genre: atmospheric · theme: Darkroom (deal 1/3, seed photographic-memorial-archive-sarajevo-1962·ec7a9df4·2026-10-24·r0) · redesign: full
 * hero: Stage (/v1/, /v1/foto/), Banner (/v1/album/, /v1/o-sarajevu/) · nav: masthead · footer: mast · imagery: photographs, the archive's own · signature: each photograph at its own size on print-black, its title in hairline capitals beside it · darkroom: brand colours (taupe heads, gold safelight, olive-grey captions), photographs shown as found
 * axes: dark/display-condensed/chromatic-gold · posture: restrained · contrast: pass · fold: pass · copy: verbatim · job: look through the archive and remember · draw: 31de7a (nav and footer taken) · v2.0.0 */
/* Hallmark · hero-review: fix · 5 findings · 4 resolved 1 unresolved (the English dates keep the owner's dotted form, copy verbatim) */
/* Hallmark · finish-review: subagent · 4 findings · 3 resolved 1 partial (the 1920 stage: title column widened and enlarged, the photograph stays at its native size) · gap: none */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V3 · weakest: V, the structure is the owner's and stays; variety comes from the stage, the edition figures and the chronology sheet */
/* Hallmark · waive 83 · a gallery of the owner's own archive, 310 photographs from the Pixelpost backup · the Sarajevo album exists to show every photograph of the siege it holds */
/* Hallmark · waive 44c · the stage is only as tall as the plate and both columns start at the top · a short Sarajevo photograph must not sit under a screen of empty ground */
/* Hallmark · waive 79 · photographs are shown at native size, 200 to 700px wide, never upscaled · these Sarajevo siege scans would blur if grown to fill the screen, and the record matters more than the fill */
/* Hallmark · waive 77 · section.well holds the dedication, the owner's 45 words kept verbatim at 2rem in a grained band, once a page · cutting it to statement length would rewrite the Sarajevo dedication, and copy is verbatim */
/* Hallmark · answered F6 · the edition and lead figures stand alone, never in a column to compare, so proportional figures keep 1,395 and 10,615 tight at display size */
/* Hallmark · dismissed 77 · Foto and Album are viewers of the Sarajevo archive and keep the owner's structure: stage, strip and dedication; title, figures and the album; no sections are added */
/* Hallmark · dismissed F20 · the album's last row follows the photograph count, which changes whenever the owner adds or removes a Sarajevo photograph */
/* Hallmark · dropped the YouTube film on O Sarajevu · the video cuEt7EvPMVU has been removed from YouTube and the Flash embed no longer plays */
/* Hallmark · dropped /v1/index.php, /v1/index.php?x=browse, /v1/index.php?x=about, /v1/index.php?showimage=259&lang=en · the query-string links became clean paths (/v1/, /v1/album/, /v1/o-sarajevu/, /v1/en/foto/259/), and every old one still 301s there through .htaccess and the index.php redirector */
/* Hallmark · dropped contact_form_ba/email.php, pixelpost.org, ?x=rss, ?x=atom · the contact form gives way to mailto:info@sa92.ba, and the Pixelpost credit and feeds left with Pixelpost */
/* Hallmark · reworded "Hronologija opsade: 2. mart 1992. - postavljene…" to "Hronologija opsade" · the old page ran the first chronology entry into its heading; the entry is kept as the first row of 1992 */
/* Hallmark · dropped logosmall.png · the masthead mark is the same SA92 logotype redrawn as an inline SVG, sharp at any size */
/* Hallmark · dropped comments, the contact forms, Upload, RSS and Atom, the Pixelpost credit · the owner retired them with the move to static hosting */
@import url("./fonts.css");
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: 7.5rem; --mark-w: 55px; --measure: 65ch; }

/* bg-top.png is the original top smoke, recolored so it fades to --color-paper (#0d0c0b) */
body { display: flex; flex-direction: column; min-height: 100svh; background-image: url("./bg-top.png?v=2"); background-repeat: repeat-x; background-position: top left; }
main { flex: 1 0 auto; }
a:hover { text-decoration-color: var(--color-accent); }
.skip { position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-modal); padding: var(--space-xs) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }

/* Masthead: open on the darker wash, the mark and the links with air around them */
.masthead { background: transparent; }
.masthead__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2xl); min-height: var(--nav-h); padding-bottom: var(--space-lg); }
.brand { display: flex; align-items: center; padding-top: 65px; color: var(--color-ink-2); text-decoration: none; min-width: 0; }
.brand svg { width: var(--mark-w); height: auto; flex-shrink: 0; }
.nav { display: flex; align-items: flex-start; gap: var(--space-xl); padding-top: calc(65px - var(--space-sm)); }
.nav ul { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.nav li { display: flex; align-items: center; }
.nav li + li::before { content: ""; width: 16px; height: var(--rule-hair); margin-inline: var(--space-sm); background: var(--color-rule-strong); flex-shrink: 0; }
.nav a { display: block; padding-block: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--color-ink); }
.nav a[aria-current="page"] { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.4em; }
.nav__lang { padding-left: var(--space-xl); border-left: var(--rule-hair) solid var(--color-rule); }

/* Display type */
.display { font-family: var(--font-display); font-weight: 200; text-transform: uppercase; line-height: 1.04; letter-spacing: var(--tracking-display); color: var(--color-ink-2); }
.page-head { padding-block: var(--space-3xl) var(--space-2xl); }
.page-head h1 { font-size: var(--text-display); max-width: 18ch; }
.meta { font-size: var(--text-sm); color: var(--color-muted); }
.num { font-variant-numeric: tabular-nums; }

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding-inline: var(--space-lg); border: var(--rule-hair) solid var(--color-ink-2); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); line-height: 1; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.btn:hover { border-color: var(--color-ink); background: var(--color-paper-3); }
.btn:active { background: var(--color-paper-2); }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-ink-2); border-color: var(--color-ink-2); color: var(--color-accent-ink); }
.btn--primary:active { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-accent-ink); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

/* Foto: the stage */
.stage { display: grid; grid-template-columns: minmax(0, 44rem) min(24rem, 100%); justify-content: center; align-content: start; align-items: start; gap: var(--space-2xl); padding-block: var(--space-3xl); }
.stage:has(.not-found), .stage:has(.noscript) { grid-template-columns: minmax(0, 1fr); }
.plate { margin: 0; min-width: 0; justify-self: end; }
.plate a { display: block; }
.plate img { width: auto; max-width: 100%; max-height: calc(100svh - var(--nav-h) - var(--space-3xl) * 2); background: var(--color-paper-2); }
.js .plate img { opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.js .plate img.is-loaded { opacity: 1; }
.plate-meta { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--space-lg); padding-bottom: var(--space-2xs); }
.plate-meta h1 { font-size: clamp(2.75rem, 2vw + 1.75rem, 4.25rem); max-width: 14ch; }
.plate-caption { color: var(--color-muted); font-size: var(--text-md); line-height: 1.55; overflow-wrap: anywhere; }
.plate-caption a { color: var(--color-ink-2); text-decoration-color: var(--color-rule-strong); }
.record { position: relative; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs) var(--space-md); margin: 0; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.facts dt { color: var(--color-muted); }
.facts dd { margin: 0; color: var(--color-ink); }
.facts a { color: var(--color-ink); text-decoration-color: var(--color-rule-strong); }
.pager { order: -1; display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(var(--space-sm) * -1); }
.pager__step { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--color-ink-2); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
.pager__step svg { width: 36px; height: 16px; stroke-width: 1; }
.pager__step:hover { color: var(--color-accent); }
.pager__step:active { color: var(--color-ink); }
.pager__step[aria-disabled="true"] { color: var(--color-rule); pointer-events: none; }
.share { position: absolute; right: 0; bottom: calc((0.875rem * 1.55 - 14px) / 2); display: inline-flex; align-items: center; justify-content: flex-end; width: 14px; height: 14px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-ink-2); cursor: pointer; transition: color var(--dur-micro) var(--ease-out); }
.share::before { content: ""; position: absolute; inset: -15px 0 -15px -30px; }
.share svg { width: 14px; height: 14px; }
.share:hover, .share.is-copied { color: var(--color-accent); }
.share:active { color: var(--color-ink); }
.not-found { display: grid; gap: var(--space-lg); justify-items: start; }

/* Foto: neighbouring plates */
.strip { padding-top: 20px; padding-bottom: var(--space-3xl); }
.strip ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-block: var(--rule-hair) solid var(--color-rule); }
.strip__cta { display: inline-flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; }
.strip__cta svg { width: 28px; height: 12px; stroke-width: 1; }
.strip__cta:hover { color: var(--color-accent); }
.strip li { padding: var(--space-md); border-left: var(--rule-hair) solid var(--color-rule); min-width: 0; }
.strip li:first-child { padding-left: 0; border-left: 0; }
.strip li:last-child { padding-right: 0; }
.tile { display: grid; gap: var(--space-xs); color: var(--color-ink-2); text-decoration: none; transition: transform var(--dur-micro) var(--ease-out); }
.tile:active { transform: scale(0.98); }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: scale-down; background: var(--color-paper-2); }
.tile__label { display: flex; gap: var(--space-xs); min-width: 0; font-size: var(--text-sm); }
.tile__no { color: var(--color-muted); transition: color var(--dur-micro) var(--ease-out); }
.tile__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile:hover .tile__no, .tile[aria-current="true"] .tile__no { color: var(--color-accent); }
.strip .tile { color: var(--color-muted); }
.strip .tile img { filter: brightness(0.55); transition: filter var(--dur-short) var(--ease-out); }
.strip .tile__title { transition: color var(--dur-micro) var(--ease-out); }
.strip .tile:hover,
.strip .tile:focus-visible { color: var(--color-ink); }
.strip .tile:hover img,
.strip .tile:focus-visible img { filter: brightness(1); }

@media (prefers-reduced-motion: reduce) {
  .tile { transition-duration: var(--dur-micro) !important; }
  .tile:active { transform: scale(0.99); }
}

/* Dedication well */
.well { background: var(--color-paper-2); }
.grained { position: relative; isolation: isolate; }
.grained::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 9 -4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 200px 200px; }
.dedication { display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); min-height: 36rem; padding-block: var(--space-2xl); }
.dedication__title { align-self: end; max-width: 54ch; margin: 0 0 var(--space-lg); font-size: 20px; font-weight: 200; color: #9e9e9e99; }
.dedication p { max-width: 54ch; font-size: clamp(1.375rem, 1vw + 1rem, 2rem); font-weight: 300; line-height: 1.45; color: var(--color-ink); }
.dedication::after { content: ""; }

/* Figures, set as an edition */
.edition { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.edition > div { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-lg) var(--space-lg) 0; border-left: var(--rule-hair) solid var(--color-rule); }
.edition > div:first-child { padding-left: 0; border-left: 0; }
.edition dd { margin: 0; font-family: var(--font-display); font-weight: 200; font-size: clamp(3.5rem, 6vw + 1rem, 8.5rem); line-height: 1; color: var(--color-ink); }
.edition dt { font-size: var(--text-sm); color: var(--color-muted); }
.edition dd, .lead-figure dd { order: -1; }
.lead-figure { margin: 0; }
.lead-figure div { display: grid; gap: var(--space-xs); }
.lead-figure dd { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.15em; margin: 0; font-family: var(--font-display); font-weight: 200; font-size: clamp(5rem, 8vw + 1rem, 10rem); line-height: 1; color: var(--color-ink); }
.lead-figure dt { max-width: 24ch; font-size: var(--text-sm); color: var(--color-muted); }

/* Album */
.album-hero, .about-hero { display: grid; align-content: center; gap: var(--space-2xl); min-height: min(56svh, 36rem); padding-block: var(--space-2xl); }
.archive { padding-block: var(--space-2xl) var(--space-4xl); }
.statement { padding-bottom: var(--space-xl); }
.statement p { max-width: 60ch; font-size: var(--text-lead); font-weight: 300; line-height: 1.55; }
.album-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.album-hero h1 { grid-column: 1 / span 6; }
.album-hero .statement { grid-column: 8 / span 5; padding-bottom: 0; }
.album-hero .statement p { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-2); }
.album-hero .edition { grid-column: 1 / -1; }
.filter { margin-bottom: var(--space-xl); padding-block: var(--space-md); border-block: var(--rule-hair) solid var(--color-rule); }
.filter ul { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin: 0; padding: 0; list-style: none; }
.filter a { display: inline-flex; gap: var(--space-xs); padding-block: var(--space-xs); font-size: var(--text-md); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
.filter a:hover { color: var(--color-ink); }
.filter a[aria-current="page"] { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.4em; }
.filter .num { color: var(--color-muted); }
.archive ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.archive .tile__title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.archive .tile__label { font-size: var(--text-sm); line-height: 1.4; }

/* O Sarajevu */
.about-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.about-hero h1 { grid-column: 1 / span 7; }
.about-hero__aside { grid-column: 9 / span 4; }
.about-hero__aside .lead { color: var(--color-ink-2); }
.section { padding-block: var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); }
.section h2 { font-size: var(--text-section); margin-bottom: var(--space-2xl); }
.essay__body { columns: 2; column-gap: var(--gap-columns); }
.essay__body p, .prose p { max-width: var(--measure); line-height: 1.7; font-size: 1.0625rem; }
.essay__body p { break-inside: avoid; margin-bottom: var(--space-lg); }
.chrono__year { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); padding-block: var(--space-lg) var(--space-2xl); }
.chrono__year h3 { grid-column: 1 / span 3; align-self: start; position: sticky; top: var(--space-lg); font-size: clamp(3rem, 4vw + 1rem, 6rem); font-weight: 200; line-height: 1; color: var(--color-ink-2); }
.chrono__year ol { grid-column: 4 / span 9; margin: 0; padding: 0; list-style: none; }
.chrono__year li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-3xs) var(--gap-columns); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.chrono__year li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.chrono__date { color: var(--color-muted); font-size: var(--text-sm); padding-top: var(--space-3xs); font-variant-numeric: tabular-nums; }
.chrono__event { max-width: var(--measure); line-height: 1.6; }
.about-site { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); border-top: 0; border-image: conic-gradient(var(--color-paper-2) 0 0) fill 0 // 0 100vw; }
.about-site h2 { grid-column: 1 / span 4; margin-bottom: 0; }
.about-site .prose { grid-column: 5 / span 8; }
.about-site .links { grid-column: 1 / -1; }
.about-site a, .essay a { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); padding-top: var(--space-2xl); }
.links h3 { font-size: var(--text-title); font-weight: 400; margin-bottom: var(--space-md); }
.links ul { margin: 0; padding: 0; list-style: none; }
.links li { display: grid; gap: var(--space-3xs); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.links a { color: var(--color-ink); text-decoration-color: var(--color-rule-strong); justify-self: start; }
.links span { font-size: var(--text-sm); color: var(--color-muted); }

/* Mast */
.mast { border-top: var(--rule-hair) solid var(--color-rule); }
.mast__inner { display: flex; align-items: center; gap: 0; padding-block: var(--space-2xl); opacity: 0.7; }
.mast svg { width: 56px; height: auto; margin-right: var(--gap-columns); color: var(--color-ink-2); flex-shrink: 0; }
.mast__inner > p:not(.mast__contact) { display: flex; align-items: center; flex: 1; min-width: 0; max-width: none; }
.mast__inner > p:not(.mast__contact)::after { content: ""; flex: 1; height: var(--rule-hair); margin-inline: var(--space-lg); background: #5c5a5585; }
.mast p { font-size: var(--text-sm); color: var(--color-muted); max-width: 60ch; }
.mast a { color: var(--color-ink); text-decoration-color: var(--color-rule-strong); font-size: var(--text-sm); }

.noscript { padding-block: var(--space-3xl); max-width: 60ch; }

@media (min-width: 100rem) {
  .stage { grid-template-columns: minmax(0, 44rem) min(28rem, 100%); gap: var(--space-3xl); }
  .plate-meta h1 { font-size: clamp(4.25rem, 2vw + 2.5rem, 5.5rem); }
}
@media (max-width: 75rem) {
  .archive ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {
  .stage { grid-template-columns: minmax(0, 1fr); justify-content: stretch; align-content: start; gap: var(--space-xl); min-height: 0; padding-block: var(--space-2xl); touch-action: pan-y; }
  .plate { justify-self: start; }
  .stage .pager { position: fixed; inset: auto 0 0 0; z-index: var(--z-modal); order: 0; margin-bottom: 0; padding: var(--space-2xs) var(--gutter); background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-rule); }
  body:has(main[data-view="foto"]) { padding-bottom: calc(44px + var(--space-2xs) * 2 + var(--rule-hair)); }
  .strip { padding-bottom: var(--section-gap); }
  .dedication { min-height: 0; grid-template-rows: auto; padding-block: var(--section-gap-s); }
  .page-head { padding-block: var(--space-2xl); }
  .archive { padding-block: var(--section-gap-s) var(--section-gap); }
  .section h2 { margin-bottom: var(--space-xl); }
  .chrono__year { display: block; padding-block: var(--space-md) var(--space-xl); }
  .chrono__year h3 { position: sticky; top: 0; z-index: var(--z-sticky); padding-top: var(--space-lg); padding-bottom: var(--space-xl); background: var(--color-paper); }
  .links { padding-top: var(--space-xl); }
  .plate img { max-height: 75svh; }
  .archive ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .edition { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .edition > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .album-hero, .about-hero { min-height: 0; gap: var(--space-xl); padding-block: var(--space-2xl); }
  .about-hero, .album-hero { grid-template-columns: minmax(0, 1fr); }
  .album-hero h1, .album-hero .statement, .album-hero .edition { grid-column: 1 / -1; }
  .about-hero h1, .about-hero__aside, .about-site h2, .about-site .prose, .about-site .links { grid-column: 1 / -1; }
  .essay__body { columns: 1; }
  .chrono__year ol { margin-top: 0; }
  .mast__inner { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--gap-columns); row-gap: var(--space-sm); align-items: center; padding-block: var(--space-xl); }
  .mast svg { grid-column: 1; grid-row: 1 / span 2; margin-right: 0; }
  .mast__inner > p:not(.mast__contact) { display: block; grid-column: 2; grid-row: 1; }
  .mast__contact { grid-column: 2; grid-row: 2; padding-left: 0; }
  .mast__inner > p:not(.mast__contact)::after { display: none; }
}
@media (max-width: 40rem) {
  .masthead__inner { flex-wrap: wrap; gap: var(--space-sm); padding-block: var(--space-md); }
  .brand { padding-top: var(--space-lg); }
  .nav { width: 100%; justify-content: space-between; gap: var(--space-md); padding-top: 0; }
  .nav__lang { padding-left: var(--space-md); }
  .stage { padding-block: var(--space-xl); gap: var(--space-lg); }
  .plate img { max-height: 52svh; }
  .plate-meta { gap: var(--space-md); }
  .plate-meta > * { order: 2; }
  .plate-meta h1 { order: 1; }
  .page-head,
  .album-hero,
  .about-hero { padding-block: var(--section-gap-s); }
  .strip { padding-top: var(--space-md); padding-bottom: var(--section-gap-s); }
  .archive { padding-block: var(--section-gap-s); }
  .section h2 { margin-bottom: var(--space-lg); }
  .chrono__year { padding-block: var(--space-md) var(--space-lg); }
  .strip ol { grid-template-columns: repeat(5, 8rem); overflow-x: auto; }
  .archive ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  .links { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-lg); }
  .chrono__year li { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
}