/* RetroWeb, light editorial eXo style (requirements §4). Current browsers (NFR-7).
   Cream paper, condensed Impact/Anton headlines, thin ink rules, red serif labels between rules,
   red rectangular buttons. Impact is used where installed; elsewhere the self-hosted Anton. */
@font-face {
  font-family: "Display";
  src: local("Impact"), url("fonts/anton-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Display";
  src: local("Impact"), url("fonts/anton-latin-ext.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #EFE6D3;
  --card: #E6DAC2;
  --ink: #2B2622;
  --muted: #6B6157;
  --red: #A8392F;
  --rule: #2B2622;
  --soft: #CDBFA3;
  --ok: #3E7B3E;
  --display: "Display", Impact, "Arial Narrow", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
  color-scheme: light;
}

/* Reset */
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, pre, form { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; }
td, th { vertical-align: top; }
img, svg { vertical-align: middle; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Reserve the scrollbar space so short pages (e.g. /categories) do not shift sideways */
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.5 var(--sans); }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--red); }
.muted { color: var(--muted); }
.red { color: var(--red); }
code { font: 13px "Courier New", monospace; background: var(--card); padding: 0 3px; }
pre { background: var(--ink); color: var(--paper); padding: 12px 14px; overflow: auto; }
pre code { background: none; color: inherit; padding: 0; }

#page { display: flex; flex-direction: column; min-height: 100vh; width: min(880px, 100% - 40px); margin: 0 auto; }

/* Top bar: red badge, bullet links */
.topbar { display: flex; align-items: center; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--rule); font: 12px var(--sans); }
.topbar nav { display: flex; flex-wrap: wrap; gap: 18px; }
.topbar nav.right { margin-left: auto; }
.topbar nav a::before { content: "\2022\00a0"; }
.topbar a.on { color: var(--red); }
.badge { order: -1; background: var(--red); color: var(--paper); font: 15px/1 var(--display); letter-spacing: .5px; text-transform: uppercase; padding: 6px 9px 5px; }
.badge:hover { color: var(--paper); background: var(--ink); }
.main { display: block; flex: 1; padding: 26px 0 56px; }

/* Page headings */
.crumb { display: block; margin-bottom: 18px; font: 11px var(--serif); text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--red); }
.kicker { font: 12px var(--serif); text-transform: uppercase; letter-spacing: 1px; color: var(--red); }
.lead { font: italic 17px/1.5 var(--serif); margin: 4px 0 16px; }
h1 { margin: 4px 0 10px; font: 60px/1 var(--display); text-transform: uppercase; }
.note { font: italic 13px var(--serif); color: var(--muted); margin: 0 0 16px; }
h1 + p.muted { margin-bottom: 24px; }
h1 + table.t { margin-top: 20px; }
p.more { margin-top: 16px; text-align: right; font: 11px var(--serif); text-transform: uppercase; letter-spacing: 1px; }

/* Section heading: headline between rules. Inside detail columns and sidebars: red label between red rules */
.label { margin: 40px 0 18px; padding: 14px 0 10px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font: 36px/1 var(--display); text-transform: uppercase; }
.details .label, .details .notes > h2:first-child, .side .label, .tag { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 0; border: 0; color: var(--red); font: 11px var(--serif); text-transform: uppercase; letter-spacing: 1px; }
.details .label::before, .details .label::after, .details .notes > h2:first-child::before, .details .notes > h2:first-child::after, .tag::before, .tag::after { content: ""; flex: 1; border-top: 1px solid var(--red); }

/* Home: masthead, dateline, hero */
.masthead { text-align: center; padding: 26px 0 28px; border-bottom: 1px solid var(--rule); }
.masthead h1 { margin: 0; font-size: 76px; letter-spacing: -.5px; }
p.sub { margin-top: 12px; font: 13px var(--serif); text-transform: uppercase; letter-spacing: .5px; }
.dateline { display: flex; justify-content: space-between; padding: 10px 0 12px; font: 10px/1.35 var(--sans); color: var(--muted); }
.dateline i { color: var(--ink); }
.dateline .r { text-align: right; }
.hero { display: grid; grid-template-columns: 1fr 300px; border-bottom: 1px solid var(--rule); padding-bottom: 14px; }
.hero .img.hero-img { height: 400px; padding: 0 16px 0 0; border-right: 1px solid var(--rule); }
.hero .img.hero-img img { width: 100%; height: 100%; object-fit: contain; background: var(--card); }
.hero-side { display: flex; flex-direction: column; justify-content: flex-start; padding-left: 16px; }
.hero-side .kicker { color: var(--ink); }
h2.featured { font: 46px/1.05 var(--display); text-transform: uppercase; margin: 6px 0 14px; }
.spec { font-size: 12px; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; }
h2.section { padding: 18px 0 14px; border-bottom: 1px solid var(--rule); font: 46px/1 var(--display); text-transform: uppercase; text-align: center; }
h2.section.open { border-bottom: 0; }
.hero-side .desc { margin-bottom: 12px; font: 14px/1.5 var(--serif); }
/* Home search: centred, with the rule below the box and tabs */
.finder { padding-bottom: 26px; }
.finder .search { width: min(640px, 100%); margin: 6px auto 0; }
.finder .tabs { justify-content: center; margin: 14px 0 0; }
.finder .tabs a:first-child { padding-left: 14px; }
.head { display: flex; align-items: baseline; justify-content: space-between; margin-top: 30px; padding: 16px 0 12px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.head h2 { font: 46px/1 var(--display); text-transform: uppercase; }
.head a { font: 11px var(--serif); text-transform: uppercase; letter-spacing: 1px; }
.head + .grid { padding-top: 22px; }

/* Buttons and search */
.btn, .go, .apply, .compare-go button, dialog.lightbox button { display: inline-block; padding: 7px 12px; background: var(--red); color: var(--paper); border: 0; font: 11px var(--serif); text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
.btn:hover, .go:hover, .apply:hover, .compare-go button:hover, dialog.lightbox button:hover { background: var(--ink); color: var(--paper); }
.search { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.error-page .search { width: min(640px, 100%); margin: 24px auto 0; }
.search input[type=search] { flex: 1; min-width: 0; height: 38px; padding: 0 12px; background: #F7F1E4; border: 1px solid var(--rule); font: 15px var(--serif); }
.search input[type=search]::-webkit-search-cancel-button { appearance: none; }
.search .go, .search .btn { padding: 0 22px; }
.search.nobtn input[type=search] { height: 30px; font-size: 13px; }
.search .belongs { flex-basis: 100%; }
.suggestions { position: absolute; z-index: 10; top: 100%; left: 0; right: 110px; margin-top: 2px; background: #F7F1E4; border: 1px solid var(--rule); max-height: 320px; overflow-y: auto; font: 14px var(--serif); }
.suggestions li { padding: 4px 10px; cursor: pointer; }
.suggestions li[aria-selected=true], .suggestions li:hover { background: var(--red); color: var(--paper); }

/* Tabs: a row of links split by vertical bars */
.tabs { display: flex; flex-wrap: wrap; margin: 14px 0 30px; font: 11px var(--sans); }
.tabs a { padding: 0 14px; color: var(--muted); }
.tabs a:first-child { padding-left: 0; }
.tabs a + a { border-left: 1px solid var(--muted); }
.tabs a:hover, .tabs a.on { color: var(--red); }
.tabs small { font: inherit; color: var(--muted); }

/* Collection counts: label, big number, vertical rules between columns */

/* Cards: photo, caps serif title, small meta */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 26px 20px; }
.grid.w3 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.cell { min-width: 0; font-size: 11px; color: var(--muted); }
.cell b { display: block; margin: 10px 0 2px; font: 13px/1.3 var(--serif); color: var(--ink); text-transform: uppercase; }
.cell .meta { color: var(--red); }
.cell .meta i { color: var(--muted); font-style: normal; }
/* .img is the image frame; without a photo it shows a placeholder with the type */
.img { display: flex; align-items: center; justify-content: center; height: 170px; overflow: hidden; background: var(--card); color: var(--muted); font: 12px/1.6 var(--serif); text-transform: uppercase; letter-spacing: 1px; text-align: center; }
.img img, .strip img { display: block; max-width: 100%; max-height: 100%; margin: 0 auto; }
.strip img { object-fit: cover; }
/* photos fill the frame (cropped), leaving a thin card-coloured border */
.img.photo { padding: 4px; box-sizing: border-box; }
.img.photo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
a.img:hover { outline: 1px solid var(--ink); color: var(--ink); }
.img.b { background: var(--ink); color: var(--paper); }
.img.o { background: #E0D0B0; }
.img.p { background: #DCD5C2; }
.img.large { height: 320px; }
.cell .img { height: auto; aspect-ratio: 1; }
.strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.strip a:hover { outline: 1px solid var(--ink); }
.gallery { flex: none; width: 400px; }
.credits { margin-top: 10px; font: italic 12px var(--serif); color: var(--muted); }

/* Status, search hits, file types */
.ok, .no, .unk { display: inline-block; font: bold 11px var(--serif); text-transform: uppercase; letter-spacing: 1px; }
.ok { color: var(--ok); } .no { color: var(--red); } .unk { color: var(--muted); }
.snip { font-size: 13px; color: var(--muted); }
.hl { color: var(--ink); background: #E9D9B4; }
.ext { font-size: 11px; color: var(--muted); }
.ft { display: inline-block; width: 36px; color: var(--red); font: 10px var(--serif); letter-spacing: 1px; }

/* Tables: ruled rows, red serif caps header */
table.t { width: 100%; font-size: 14px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
table.t th { text-align: left; padding: 10px 10px 6px; border-bottom: 1px solid var(--rule); color: var(--red); font: 11px var(--serif); text-transform: uppercase; letter-spacing: 1px; }
table.t td { padding: 7px 10px; border-bottom: 1px solid var(--soft); }
table.t tr:last-child td { border-bottom: 0; }
.label + table.t, .label + .cols table.t { border-top: 0; }
table.t tr.diff td { background: #E9DCC0; }
table.t tr.diff td.k { box-shadow: inset 3px 0 0 var(--red); }
table.t td.k { width: 30%; color: var(--muted); font: 12px/1.7 var(--serif); text-transform: uppercase; letter-spacing: .5px; }
table.t td.th { width: 70px; padding-right: 0; }
table.t td.nw, .nw { white-space: nowrap; }
table.t th.n, table.t td.n { text-align: right; width: 70px; }
table.hits td { padding: 10px; }
table.hits b { font: 15px var(--serif); text-transform: uppercase; }
table.hits b.hl { font: inherit; text-transform: none; }
table.hits .img { width: 64px; height: 48px; font-size: 0; }
table.compare th { vertical-align: bottom; color: var(--ink); font: 13px/1.3 var(--serif); letter-spacing: 0; }
table.compare th .img { width: 150px; height: 120px; margin-bottom: 8px; }
table.stats { width: 100%; margin: 16px 0; }
table.stats td { text-align: center; padding: 12px; border-left: 1px solid var(--rule); }
table.stats td:first-child { border-left: 0; }
table.stats b { display: block; font: 40px/1.1 var(--display); }
table.bars td { padding: 4px 10px; }
table.bars td.k { width: 30%; }
svg.bar { display: block; fill: var(--red); }

/* Layout blocks */
.row { display: flex; gap: 32px; align-items: flex-start; }
.row > :last-child { flex: 1; min-width: 0; }
.row > :first-child:not(:last-child), .row > .gallery:only-child { flex: none; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4%; }
.panel { padding: 14px 16px; border: 1px solid var(--rule); }
.intro { max-width: 760px; margin: 18px 0 26px; font: 15px/1.6 var(--serif); }
.intro h2 { margin-bottom: 8px; font: 24px/1.1 var(--display); text-transform: uppercase; }
.intro p { margin-bottom: 10px; }
.related { padding-left: 18px; list-style: square; }

/* Sidebar pages (lists): sidebar split off by a vertical rule */
.with-side { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 30px; align-items: start; border-top: 1px solid var(--rule); padding-top: 20px; }
.main > .with-side:first-child { border-top: 0; padding-top: 0; }
.side { display: block; padding-right: 20px; border-right: 1px solid var(--rule); font-size: 13px; }
.side h4 { margin: 18px 0 6px; color: var(--red); font: 11px var(--serif); text-transform: uppercase; letter-spacing: 1px; }
.side h4:first-child { margin-top: 0; }
.side label { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.side label small { order: 2; margin-left: auto; color: var(--muted); }
.side .search { margin: 0; }
.side select, .belongs select { font-size: 13px; background: #F7F1E4; border: 1px solid var(--rule); }
.side input[type=text] { width: 4em; background: #F7F1E4; border: 1px solid var(--rule); padding: 2px 4px; }
.side input[type=checkbox], input.pick { accent-color: var(--red); }
.side p { margin-top: 14px; }
.tools { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; font-size: 13px; color: var(--muted); }
.pager { display: block; margin: 22px 0; font: 13px var(--serif); }
.pager a, .pager b, .pager span { display: inline-block; min-width: 26px; padding: 3px 6px; margin-right: 4px; text-align: center; }
.pager a { border: 1px solid var(--soft); }
.pager a:hover { border-color: var(--ink); }
.pager b { background: var(--red); color: var(--paper); font-weight: normal; }
input.pick { vertical-align: middle; margin: 0 4px 0 0; }
.compare-go { margin: 16px 0; font-size: 13px; }
.belongs { margin-top: 6px; font-size: 13px; color: var(--muted); }

/* Rendered notes: serif reading text */
.notes { font: 16px/1.6 var(--serif); }
.notes a { color: var(--red); }
.notes a:hover { text-decoration: underline; }
.notes p, .notes ul, .notes ol, .notes pre, .notes blockquote { margin: 0 0 12px; }
.notes ul { padding-left: 22px; list-style: square; }
.notes ol { padding-left: 22px; list-style: decimal; }
.notes ul ul, .notes ol ol, .notes ul ol, .notes ol ul { margin-bottom: 0; }
.notes h1, .notes h2 { margin: 34px 0 12px; font: 30px/1.05 var(--display); text-transform: uppercase; }
.notes h3, .notes h4 { margin: 26px 0 10px; font: 22px/1.1 var(--display); text-transform: uppercase; }
.notes h4 { font-size: 18px; }
.notes > :first-child { margin-top: 0; }
.notes img { max-width: 100%; height: auto; }
.notes a.embed { display: block; width: fit-content; margin: 10px 0; }
.notes table.t { margin: 10px 0 18px; font: 14px var(--sans); }
.notes table.t th { font: 11px var(--serif); }
.callout { margin: 16px 0; padding: 12px 16px; background: var(--card); border-left: 3px solid var(--red); font-size: 15px; }
.callout.info { border-left-color: var(--ink); }
.callout b { display: block; color: var(--red); font: 11px var(--serif); text-transform: uppercase; letter-spacing: 1px; }
.notes .callout ul, .notes .callout ol, .notes .callout p { margin: 6px 0 0; }

/* Footer: one small line under a dark rule */
.footer { display: block; margin-top: 30px; padding: 12px 0 16px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 12px; }

/* Error page */
.error-page { text-align: center; padding: 40px 0; }
.error-page h1 { font-size: 110px; }
.error-page p { margin-top: 18px; }

/* Lightbox (retroweb.js) */
dialog.lightbox { padding: 0; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); max-width: 95vw; max-height: 95vh; overflow: hidden; }
dialog.lightbox::backdrop { background: rgb(43 38 34 / .88); }
dialog.lightbox img { display: block; max-width: 92vw; max-height: calc(95vh - 56px); margin: 0 auto; }
dialog.lightbox .bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--ink); font: 13px var(--serif); }
dialog.lightbox .caption { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dialog.lightbox .count { color: var(--muted); }

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; }
  .topbar nav.right { margin-left: 0; }
  h1, .masthead h1 { font-size: 44px; }
  .hero { grid-template-columns: 1fr; }
  .hero .img.hero-img { height: 260px; padding: 0; border: 0; }
  .hero-side { padding: 16px 0 0; }
  .row, .with-side { display: block; }
  .gallery { width: auto; margin-bottom: 20px; }
  .side { padding: 0 0 16px; border-right: 0; border-bottom: 1px solid var(--rule); margin-bottom: 20px; }
}