/* Manchester Boxers — base styles shared by every page.
   Obviously comes from the Adobe Fonts kit linked in each page's <head>.
   Caslon and Courier come from Google Fonts here. */
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Courier+Prime:wght@400;700&display=swap');

/* ---- Reset-lite ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
button { font: inherit; color: inherit; cursor: pointer; }
input::placeholder { color: var(--ink-muted); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- Type utilities (match the inline classes in the pages) ------ */
.fr   { font-family: var(--font-display); }            /* bills, names, dates */
.ui   { font-family: var(--font-ui); }                 /* nav, labels, buttons */
.sc   { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.mono { font-family: var(--font-mono); }               /* numbers, dates, catalogue IDs */

/* ---- Image placeholder (replace with <img> in build) -------------- */
.ph { background: repeating-linear-gradient(135deg, #D9D0BC 0 1px, #E8E0CE 1px 10px); }

/* ---- Last-checked tag --------------------------------------------- */
.tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; padding: 3px 8px 3px 6px; border: 1px solid var(--ink); }
.tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }
.tag.old i { background: var(--ink-faded); }
.tag.changed i { background: repeating-linear-gradient(135deg, var(--accent) 0 2px, var(--paper) 2px 4px); }
.tag.unverified { border-style: dashed; }
.tag.unverified i { background: transparent; border: 1px solid var(--ink); }

/* ---- Buttons ------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 22px; font-family: var(--font-ui); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; border: 0; }
.btn-primary { background: var(--accent); color: var(--paper); }
.btn-ink     { background: var(--ink); color: var(--paper); }
.btn-outline { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }

/* ---- Filter chips ------------------------------------------------- */
.chip { height: 40px; padding: 0 14px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--font-ui); font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.chip.on { background: var(--ink); color: var(--paper); }
.chip .swatch, .swatch { width: 14px; height: 14px; display: inline-block; }

/* ---- Borough bar helper ------------------------------------------- */
.bar { display: block; background: var(--b, var(--ink)); }
.bar.hatched { background: repeating-linear-gradient(135deg, var(--b, var(--ink)) 0 6px, var(--paper) 6px 10px); }

/* ---- Mobile margins ----------------------------------------------- */
@media (max-width: 720px) {
  :root { --margin: 16px; }
}