/* Keek - paper, ink and one accent. No em dashes anywhere. */

:root {
  --ink: #263240;
  --ink-soft: #55606d;
  --paper: #f7f6f3;
  --paper-alt: #efece6;
  --card: #ffffff;
  --rule: #d9d4c9;
  --accent: #2f6f62;
  --accent-ink: #24564c;
  /* the height of the resting search band on the home page. ONE dial: changing it
     moves the resting block, and the pull below follows automatically. */
  --hero-band: 62vh;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
}

/* The paper lives on the content column, not on the body (25 Oct). The body carries
   the footer colour instead, so ANY leftover space anywhere below the footer reads as
   footer rather than as a pale band. This is deliberate belt and braces: the gap on the
   Architect phone survived every viewport unit, the safe-area fix and the canvas paint,
   and two readings of the screenshots could not be told apart under Safari's translucent
   toolbar. This way it does not matter which reading was right. Nothing renders below
   the footer, so nothing can be covered by the dark: the masthead already carries its
   own paper, and this hands paper to the one block that holds all the page content. */
main { background: var(--paper); }

.wrap { width: min(1100px, 92vw); margin: 0 auto; }

a { color: var(--accent-ink); }
a:hover { color: var(--ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 16px; z-index: 50;
}
.skip:focus { left: 8px; top: 8px; }

/* ---- masthead ---- */

.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px 0;
  flex-wrap: wrap;
}

.wordmark { display: block; line-height: 0; }
.wordmark img { width: 132px; height: auto; display: block; }

.masthead nav {
  display: flex; gap: 22px; flex-wrap: wrap;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  letter-spacing: 0.01em;
}
.masthead nav a { text-decoration: none; color: var(--ink-soft); }
.masthead nav a:hover { color: var(--ink); text-decoration: underline; }

h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  font-weight: 600;
}

.lede {
  max-width: 46rem;
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin: 0 0 32px;
}

.search { margin: 0 0 12px; max-width: 46rem; }

.search input {
  width: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* focus styling lives at the end of this file: one border plus a soft ring */

.search-note {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}

/* ---- ticker ---- */

.ticker-band {
  background: var(--ink);
  color: #f2efe9;
  padding: 26px 0 0;
  overflow: hidden;
}

.ticker-head { padding-bottom: 16px; }
.ticker-head h2 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #cfd6d3;
}
.ticker-head p {
  margin: 0;
  max-width: 52rem;
  font-size: 15px;
  color: #b9c1c6;
}

.ticker {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.ticker-track {
  padding-left: 0;
}

.ticker:hover .ticker-track { animation-play-state: paused; }

.ticker-track li { display: flex; align-items: center; gap: 10px; }
.ticker-track .num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.ticker-track .sep { color: #4b5a66; }

@keyframes keek-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker { overflow-x: auto; }
}

/* ---- records ---- */

.records { padding: 56px 0 24px; }

.section-head {
  font-size: 1.9rem;
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}

.card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 3px;
  padding: 26px 28px;
}

.card[hidden] { display: none; }

.card.outside { border-left-color: #8d5b3f; }

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.card h3 {
  font-size: 1.45rem;
  margin: 0;
  letter-spacing: -0.01em;
}

.verdict {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 5px 10px;
  border-radius: 2px;
  white-space: nowrap;
}
.verdict.yes { background: #e2ece8; color: var(--accent-ink); }
.verdict.no { background: #efe4db; color: #6f4326; }
.verdict.body { background: var(--paper-alt); color: var(--ink-soft); }

.card .when {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.facts {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.facts th, .facts td {
  text-align: left;
  vertical-align: top;
  padding: 8px 14px 8px 0;
  border-top: 1px solid var(--rule);
}

.facts th {
  width: 11rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  font-weight: 600;
  padding-top: 11px;
}

.facts td { font-variant-numeric: tabular-nums; }
.facts .num { color: var(--ink-soft); font-size: 15px; }

.chain {
  list-style: none;
  margin: 0;
  padding: 0;
}
.chain li { margin: 0 0 6px; }
.chain li:last-child { margin-bottom: 0; }
.chain .stop {
  color: var(--ink-soft);
  font-style: italic;
}

.card-foot {
  margin: 18px 0 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--ink-soft);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.mapped {
  display: inline-block;
  background: var(--paper-alt);
  border-radius: 2px;
  padding: 2px 7px;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.empty {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid #8d5b3f;
  border-radius: 3px;
  padding: 26px 28px;
  margin-bottom: 22px;
  max-width: 44rem;
}
.empty h3 { margin: 0 0 10px; font-size: 1.2rem; }
.empty p { margin: 0 0 10px; color: var(--ink-soft); font-size: 16px; }

/* ---- bands ---- */

.band { padding: 56px 0; border-top: 1px solid var(--rule); }
.band-alt { background: var(--paper-alt); }

.band h2 { font-size: 1.8rem; margin: 0 0 26px; letter-spacing: -0.01em; }
.band h3 { font-size: 1.1rem; margin: 0 0 8px; }
.band p { margin: 0 0 14px; max-width: 40rem; }

/* The Sources band is one column of reading text rather than the two-column .cols the
   rest of the methodology page uses. It began hugging the left edge of the wrap with
   empty paper to its right (Architect, 25 Oct), was centred in a 46rem column, and then
   read as too narrow with too much air either side, so it now runs the full wrap width
   like every other section. The heading stays centred with the page; the PROSE stays
   left-aligned, because centred prose is harder to read than centred layout. */
#sources h2 { text-align: center; }
#sources p { max-width: none; }

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 34px;
}

.in-build {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color: #7d6a4f;
  border-left: 3px solid #cbb994;
  padding-left: 10px;
}

.limits { max-width: 48rem; padding-left: 22px; margin: 0; }
.limits li { margin-bottom: 14px; }

/* ---- footer ---- */

.foot {
  background: var(--ink);
  color: #b9c1c6;
  padding: 40px 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}
/* mark and links sit together on the LEFT, not spread to the edges (Architect, 25 Oct) */
.foot-inner { display: flex; gap: 28px; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
.foot-mark { width: 104px; height: auto; }
.foot a { color: #dfe4e2; }
.foot p { margin: 0; }

/* ---- small screens ---- */

@media (max-width: 640px) {
  body { font-size: 17px; }
  .hero { padding: 36px 0 28px; }
  .card { padding: 20px 18px; }
  .facts th { width: auto; display: block; border-top: 1px solid var(--rule); padding-bottom: 2px; }
  .facts td { display: block; border-top: 0; padding-top: 0; padding-bottom: 12px; }
  .wordmark img { width: 108px; }
}

/* ---- results and intercepts ---- */

.results-band { padding: 8px 0 0; }

/* A strip of breathing room between the last card and the dark footer. The list used
   to butt straight into it (Architect, 25 Oct: "the last result on the page is very
   close to the footer"). Only once a search has run, so the resting page is untouched. */
body.has-results .results-band { padding-bottom: 18px; }

.section-sub {
  color: var(--ink-soft);
  max-width: 44rem;
  margin: -16px 0 26px;
  font-size: 16px;
}

.result-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.result-link { padding-right: 150px; }
.result-link {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) auto minmax(0, 1.6fr) minmax(0, 1.4fr);
  gap: 6px 18px;
  align-items: baseline;
  padding: 14px 4px;
  text-decoration: none;
  color: var(--ink);
}
.result-link:hover { background: var(--paper-alt); }
.r-where, .r-sic, .r-meta {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--ink-soft);
}
.r-sic { grid-column: 1 / span 2; }
.r-meta { grid-column: 1 / span 4; font-size: 13px; }

/* ---- food hygiene outcomes ----
   A BACKGROUND, not a badge, and three tints chosen so that none of them can be
   mistaken for something else this site already says:
     - GREEN is NOT --accent. That green is the link colour and the accent on every
       page, so a card washed in it would read as chrome. This is a paler, cooler
       green with a dark green ink.
     - IMPROVEMENT is CLAY, not alarm red. FHIS outcomes are Pass, Pass and Eat Safe,
       Improvement Required, Exempt and Awaiting Inspection. There is no fail in the
       scheme, and "Improvement Required" is the regulator saying more is needed, not
       that a business is unfit. Red would be me writing a verdict they did not write.
     - NEITHER gets neutral grey: Exempt and Awaiting Inspection are not a pass and
       not a criticism, and they must not look like either.
   The ten pound verified listing also "buys a tinted card", which is the other reason
   these tints stay flat, bordered and inside the card rather than washing it.
   THE WORD IS ALWAYS BESIDE THE COLOUR: about one man in twelve cannot tell these
   two hues apart, so colour is the second signal and never the only one. */
.r-outcome {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 600;
}
/* the search card lays its lines out on a grid; the record page puts this inside a
   definition list instead, so the grid placement belongs to the card only */
.r-body > .r-outcome { grid-column: 1 / span 4; }
.o-pass { background: #e4efe7; color: #1f5741; }
.o-improve { background: #f7e5da; color: #8a4826; }
.o-neutral { background: #eceae4; color: var(--ink-soft); }
/* A submitted description is the business's own words, not a register fact, and the
   chip says so, exactly as the listings block is marked as submitted. It sits under
   the name because that is where a description belongs, and it changes nothing the
   register says: the number, address and sector still come from the record. */
.r-desc {
  flex: 1 1 100%;
  margin: 2px 0 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 46rem;
}
.r-desc .tag { margin-right: 9px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; vertical-align: 1px; }

.tag {
  display: inline-block;
  background: #efe4db;
  color: #6f4326;
  border-radius: 2px;
  padding: 1px 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.intercept {
  border: 1px solid var(--rule);
  border-left: 4px solid #8d5b3f;
  background: var(--card);
  padding: 22px 24px;
  margin: 0 0 26px;
  border-radius: 3px;
  max-width: 52rem;
}

.intercept-kicker {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #8d5b3f;
  margin: 0 0 12px;
}

.intercept-row + .intercept-row {
  border-top: 1px solid var(--rule);
  margin-top: 18px;
  padding-top: 18px;
}

.intercept h3 { margin: 0 0 6px; font-size: 1.15rem; }
.intercept p { margin: 0 0 8px; font-size: 15px; color: var(--ink-soft); }
.intercept .num { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; }
.intercept-note { max-width: 40rem; }

@media (max-width: 720px) {
  .result { position: relative; }
.result-link { padding-right: 150px; }
.result-link { grid-template-columns: 1fr; }
  .r-sic, .r-meta { grid-column: 1; }
}
/* ---- address flags ---- */

.r-flags {
  grid-column: 1 / span 4;
}

.flag {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
  white-space: nowrap;
}

.flag-drop { background: #efe4db; color: #6f4326; font-weight: 600; }
.flag-shared { background: var(--paper-alt); color: #7d6a4f; }

.flag-note {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  color: var(--ink-soft);
}

.limits strong { color: var(--ink); }
/* ---- correction button and form ---- */

.corr {
  right: 6px;
  top: 14px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.corr:hover, .corr:focus { color: var(--ink); }

.flag-group { background: #e6eae4; color: #44543a; }

.corr-form { max-width: 46rem; }
.corr-form label {
  display: block;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.corr-form input, .corr-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.corr-form input:focus, .corr-form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.corr-form button {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  padding: 11px 20px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.corr-form button:hover { background: #33414f; }
.corr-row { display: flex; gap: 18px; flex-wrap: wrap; }
.corr-row label { flex: 1 1 16rem; }

@media (max-width: 720px) {
  .result-link { padding-right: 4px; }
  .corr { position: static; display: block; margin: 0 0 12px 4px; }
}
/* ---- thin ticker under the masthead ---- */

.ticker {
  background: var(--ink);
  color: #f2efe9;
  padding: 9px 0;
  white-space: nowrap;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
}
.ticker-track { display: flex; gap: 34px; margin: 0; padding: 0 24px; animation: keek-scroll 80s linear infinite; list-style: none; }
.ticker-track .num { color: #93a1a8; }
.ticker-track .name { color: #f6f3ec; }
.ticker-track .where { color: #a8b8b3; }

/* ---- search-first hero ---- */

.hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.hero-title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 0 0 18px; letter-spacing: -0.01em; }
.hero .search { margin: 0 auto 10px; }

/* ---- result cards ---- */

.result { position: static; border-bottom: 1px solid var(--rule); padding: 16px 4px 14px; }
.r-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.r-name { font-size: 1.15rem; font-weight: 600; color: var(--accent-ink); text-decoration: none; }
.r-name:hover { color: var(--ink); text-decoration: underline; }
.r-num { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; color: var(--ink-soft); }
.r-body { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; color: var(--ink-soft); }
.r-links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 9px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; }
.r-links a, .corr { color: var(--accent-ink); text-decoration: none; }
.r-links a:hover, .corr:hover { text-decoration: underline; color: var(--ink); }
.corr { position: static; padding: 0; margin: 0; background: none; border: 0; font-size: 13px; cursor: pointer; }
.r-flags { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: 8px; }
/* Control leaving Scotland: the strongest flag on a card, and it has to be
   seen at a glance down a list of sixty results. Pale peach was not enough
   (Architect, 24 Oct). Solid oxblood, warm rather than a warning red, so it
   sits inside this palette: paper #f7f6f3, ink #263240, accent #2f6f62. */
.flag-outside {
  background: #8a3f16;
  color: #fdf7f2;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* a chain that closes on itself, kept to the warm neutral so it reads as
   unresolved rather than as an accusation */
.flag-loop {
  background: #efe4db;
  color: #6f4326;
  font-weight: 600;
}
/* ---- the foot line: registered elsewhere, office in Scotland ---- */

.outside-block {
  margin: 24px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.outside-lead, .outside-note {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 48rem;
}

.outside-toggle {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent-ink);
  text-decoration: underline;
  cursor: pointer;
}
.outside-toggle:hover, .outside-toggle:focus { color: var(--ink); }

.outside-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
}
.outside-list[hidden] { display: none; }
.outside-list li {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--rule);
}
.outside-list a { color: var(--accent-ink); text-decoration: none; font-weight: 600; }
.outside-list a:hover { text-decoration: underline; color: var(--ink); }
.outside-list .num { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.outside-list .where { color: var(--ink-soft); }

/* ---- submitted websites ---- */

.addsite {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color: var(--accent-ink);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
}
.addsite:hover, .addsite:focus { color: var(--ink); text-decoration: underline; }
.r-site { font-weight: 600; }
/* ---- unregistered listings: Scottish, no company number ---- */

.gate-note {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  max-width: 52rem;
  font-size: 16px;
  color: var(--ink-soft);
}
.gate-note strong { color: var(--ink); }

/* the two closing notes on the gate section sit side by side, on the Architect's word
   (25 Oct). They share the .cols grid the section above uses, so they stack on a narrow
   screen by themselves; the margins and the 52rem cap move to the grid so both notes
   start on the same line and each rule spans its own column. */
.gate-notes { margin-top: 26px; }
.gate-notes .gate-note { margin-top: 0; max-width: none; }

.listing-block {
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.listing-head {
  margin: 0 0 4px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}

.listing-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.listing-list li {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 11px 4px;
  border-bottom: 1px solid var(--rule);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--ink-soft);
}

.listing-name {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
}
a.listing-name:hover { color: var(--ink); text-decoration: underline; }

/* ---- the verified listing: presentation only, never position ----
   What the fee buys on the card: a tinted panel, the name in bolder type, a green
   tick and a link to the listing's own page. It does NOT buy placement: nothing in
   this block reorders anything, and the note under it makes the claim small and
   specific rather than a badge that implies the business is good.
   The green is deliberately NOT the oxblood of the control flag. That flag is a
   finding about company ownership; this is a check we made on request, and the two
   must never be mistaken for each other. */
.listing-list li.is-verified {
  background: #f1f7f3;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 12px;
}
.is-verified .listing-name { font-weight: 700; }
.tick {
  width: 15px;
  height: 15px;
  color: var(--accent);
  vertical-align: -2px;
}
.tick path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.verified-label {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
}
.verified-note {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--ink-soft);
}

/* ---- a verified listing's own page ---- */
.biz-address {
  font-style: normal;
  margin: 18px 0 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.hours {
  border-collapse: collapse;
  margin: 0 0 10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
}
.hours th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  padding: 6px 22px 6px 0;
  border-bottom: 1px solid var(--rule);
}
.hours td {
  padding: 6px 0;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.hours-note {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 0 20px;
}
/* the body of a verified listing: the description and hours on the left, the
   photograph on the right, level with the first line of the description. The photo
   column is capped so a wide window does not produce a billboard, and the two stack
   on anything narrow. min-width: 0 on the copy column stops a long word forcing the
   grid wider than its share. */
.biz-body {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 440px);
  gap: 32px;
  align-items: start;
}
.biz-copy { min-width: 0; }
/* a verified listing with no photograph: one column, no empty track */
.biz-body.no-photo { grid-template-columns: 1fr; }
.biz-body.no-photo .biz-copy { max-width: 46rem; }
.biz-photo {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.biz-photo img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 760px) {
  .biz-body { grid-template-columns: 1fr; gap: 20px; }
  .biz-photo { max-width: 100%; }
}

/* the phone and the website sit in the top block under the address, above the rule,
   so they take the tighter spacing of that block rather than the band's generous one */
.biz-phone {
  font-size: 1.15rem;
  margin: 14px 0 0;
}
.biz-phone a { color: var(--accent-ink); text-decoration: none; }
.biz-phone a:hover { color: var(--ink); text-decoration: underline; }
.biz-site {
  font-size: 1.05rem;
  margin: 6px 0 0;
}
.biz-site a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.biz-site a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.biz-desc { max-width: 44rem; }

/* the payment button on the verified-listing page: one clear action, not a banner */
.pay-line { margin: 30px 0 22px; }
.btn-pay {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 24px;
  border-radius: 8px;
  text-decoration: none;
}
.btn-pay:hover { background: var(--accent-ink); color: #fff; }

/* the link to the offer, dressed as a button so it is not lost among the body text
   (Architect, 25 Oct). Outlined rather than filled: the filled green button is the
   one that takes money, and the two should not look like the same action. */
.offer-cta { margin: 26px 0 4px; }
.btn-outline {
  display: inline-block;
  border: 2px solid var(--accent);
  color: var(--accent-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 8px;
  text-decoration: none;
}
.btn-outline:hover { background: var(--accent); color: #fff; }

/* ---- the badge page: a preview, a code block, and the sticker ---- */
.badge-preview, .decal-preview { margin: 0 0 24px; }
.badge-preview img, .decal-preview img { display: block; height: auto; }
.snippet {
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 24px;
}
.snippet code { white-space: pre; }

/* both badges side by side on the offer page, straight from the real files rather than
   a labelled presentation sheet: same artwork, no baked text, no grey box */
.badge-pair {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  margin: 28px 0 10px;
}
.badge-pair img { display: block; height: auto; }
.badge-caption {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 26px;
}

.listing-type {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
  background: var(--paper-alt);
  color: #7d6a4f;
}

.listing-nosite { font-style: italic; }

/* The phone sits in the links line on a directory row. A number must never break
   across two lines, and it is an action rather than a label, so it keeps the links
   line's own type and never the address's. */
.listing-phone { white-space: nowrap; }

.corr-form select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.corr-form select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* ---- standalone form pages ---- */

.hero-sub { padding: 48px 0 8px; }
/* NO width cap on this band. It used to be 760px, which narrowed the column and pushed
   its left edge about 100px inboard of the wordmark, so a left-aligned title sat in from
   the logo instead of under it however it was aligned (Architect, 25 Oct: "move to
   underneath the logo"). The band now uses the same .wrap width as the masthead, so the
   title lines up with the logo and with every band below it. */
.page-title {
  /* Dropped on the Architect's word, 25 Oct: at 2.6rem the page title stood taller than
     the wordmark above it. The wordmark is 132px wide and about 41px cap height, so the
     title now tops out at 2rem and reads as a heading rather than a second logo. */
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 0 0 14px;
  letter-spacing: -0.012em;
}
.hero-sub .lede { margin-bottom: 0; }

/* Title bands on the sub-pages are LEFT-aligned, under the wordmark (Architect, 25 Oct:
   "align left below the logo, it will appear a little more balanced"). They were centred
   for part of one afternoon, so if the centring is ever wanted again it is a class on the
   section, not a rewrite: add .hero-centre to the section and these two rules back. */

.form-rule {
  max-width: 46rem;
  font-size: 16px;
  color: var(--ink-soft);
  border-left: 3px solid var(--rule);
  padding-left: 16px;
  margin: 0 0 30px;
}
.form-rule strong { color: var(--ink); }

.page-back {
  margin: 28px 0 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}

/* ---- the directory page ---- */

.dir-controls {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 18px;
}

.dir-controls input[type="search"] {
  flex: 1 1 20rem;
  padding: 12px 14px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.dir-controls input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.dir-types { display: flex; gap: 8px; flex-wrap: wrap; }

.dir-chip {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  padding: 7px 13px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: 999px;
  cursor: pointer;
}
.dir-chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.dir-chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.dir-jump {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 6px;
}
.dir-jump a { text-decoration: none; color: var(--ink-soft); }
.dir-jump a:hover { color: var(--ink); text-decoration: underline; }

.dir-count {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.dir-letter {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 30px 0 4px;
}

/* The directory is one A to Z. A registered company and a submitted listing are two
   row shapes in the same alphabet, so there is no section heading above either kind
   and no note under one: what a row is, is said by the row. His ruling, 27 Oct. */

/* The search page's submitted block now holds two kinds of thing. The registered
   company keeps its own card, so it sits in a results list rather than a listing
   list, and the second sub-heading says what the list under it actually is. */
.listing-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 16px 0 6px;
}
.results-promoted {
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}
.results-promoted .result {
  border-bottom: 1px solid #eceae4;
}

.dir-group {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dir-group li {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 11px 4px;
  border-bottom: 1px solid var(--rule);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--ink-soft);
}
.dir-group li[hidden] { display: none; }
.dir-letter[hidden], .dir-group[hidden] { display: none; }

.dir-empty {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 18px;
  max-width: 40rem;
}
/* the listing block sits ABOVE the results now, so it needs air underneath */
.listing-block { margin: 4px 0 30px; }
.listing-block .listing-head a { color: var(--accent-ink); }
/* ---- the one-line description under a listing ---- */

.listing-about {
  flex: 1 1 100%;
  margin-top: 3px;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 46rem;
}
.listing-links {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
}
.listing-links a { color: var(--accent-ink); text-decoration: none; }
.listing-links a:hover { color: var(--ink); text-decoration: underline; }
/* ---- the line under the title: what this actually is ---- */

.hero-lede {
  max-width: 34rem;
  margin: 0 auto 22px;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* ---- footer links: alongside the wordmark on one line, credit centred beneath
   (Architect, 25 Oct: the stacked wordmark / links / credit made the footer chunky) ---- */

.foot-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: flex-start;
  font-size: 13px;
}
.foot-links a { color: #b9c1c6; text-decoration: none; }
.foot-links a:hover { color: #fff; text-decoration: underline; }

/* the credit rides in the same row as the links to keep the footer slim (Architect,
   25 Oct), so it has to read as a footnote and not as a sixth link: muted colour, one
   size down, and the flex gap is what separates it. The selector is .foot .foot-credit
   on purpose, because .foot p { margin: 0 } out-specifies a bare .foot-credit. */
.foot .foot-credit {
  margin: 0;
  font-size: 12px;
  color: #8d979d;
}
.foot .foot-credit a { color: #b9c1c6; text-decoration: none; }
.foot .foot-credit a:hover { color: #fff; text-decoration: underline; }
/* ---- front page: the wordmark sits centred above the ticker, nothing else changed ---- */

.masthead-home .masthead-inner { justify-content: center; }
/* ---- the footer sits on the bottom of the screen, not halfway down a short page ---- */

body {
  display: flex;
  flex-direction: column;
}

main, .page-main { flex: 1 0 auto; }
.page-main { min-height: 0; }
/* ---- the search sits in the middle of the screen until there is something to read ---- */

main { display: flex; flex-direction: column; }

.hero {
  flex: 0 0 auto;
  min-height: var(--hero-band);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0 40px;
}

.hero-inner { width: 100%; }

/* THE BLOCK DOES NOT MOVE, AND THE RESULTS COME TO IT (Architect, 25 Oct, after
   trying it the other way round and rightly rejecting it: "the search is jumping
   back up towards the ticker again").

   A field that rests mid-page cannot have results flush under it unless something
   gives, so what gives is the empty PAPER, not the field: the hero keeps its band
   and the block stays exactly where it was, and the results band is pulled UP into
   the band's unused lower half. Nothing on screen moves when results arrive, because
   the only thing that changes is what fills the space below the box.

   The pull is half the band minus 130px. The block is about 210px tall, so its bottom
   sits roughly 105px below the band's centre: 130px clears that and leaves a gap of
   about 25px under the count line, which is the whole point of the exercise. IF THE
   BLOCK EVER GETS TALLER (a wrapped heading, a second line under the box) this number
   has to go up with it, or the results ride into the block. Written against the same
   --hero-band dial so the two cannot drift: change the band and the pull follows. This
   is the one place in the stylesheet that reaches back into a previous section's space,
   which is why it is explained rather than left as a bare negative number. */
body.has-results .results-band {
  margin-top: calc(130px - var(--hero-band) / 2);
}

/* Sub-pages carry .hero-sub for their title band, and until now they inherited the
   home page's 62vh landing band with the title floating in the middle of it, which
   filled the directory page with empty space above and below (Architect, 25 Oct).
   A page heading is not a landing screen: no band, no centring, tight padding.
   Selector is .hero.hero-sub so it out-specifies .hero wherever it sits in the file. */
.hero.hero-sub {
  min-height: 0;
  display: block;
  padding: 44px 0 6px;
}
/* ---- the search box: one boundary, a soft ring on focus, no double frame ---- */

.search input {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #c6cfcc;
  border-radius: 10px;
  padding: 16px 22px;
  line-height: 1.4;
  font-size: 1.15rem;
  color: var(--ink);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(38, 50, 64, 0.05);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.search input::placeholder { color: #9aa3ad; }

/* focus is a ring, not a second outline: the border stays, the halo sits soft behind it */
/* the focus styling lives at the very end of this file: one border, one soft shadow */

/* ---- "Hae A Keek": an invitation, not a competing line ---- */

#count {
  margin-top: 18px;
}
/* some browsers draw their own inner decoration on a search input: kill it outright */
.search input::-webkit-search-decoration,
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-results-button,
.search input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.search input:focus,
.search input:focus-visible,
.search input:active {
  outline-offset: 0;
}
/* focus is a SOFT DROP SHADOW, not a ring: a spread ring has a hard edge and reads as a
   second frame (caught by the Architect's screenshot, 24 Oct). One border, one blurred
   shadow, no second boundary anywhere. */
.search input:focus,
.search input:focus-visible,
.search input:active {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(38, 50, 64, 0.12);
}

.search input:hover { border-color: #aab5b1; }
/* "Hae A Keek" a touch larger, on the Architect's word, 24 Oct */
#count {
  font-size: 16px;
  letter-spacing: 0.04em;
}
/* "Hae A Keek" carries the same ink as the heading */
#count {
  color: var(--ink);
}

/* ---- mobile: room to breathe (Architect, 24 Oct, seen on a phone) ----
   Three faults, and two of them were the same fault. The mobile .hero padding set
   higher up this file was being overridden by the later .hero rule of equal
   specificity, so the heading sat hard against the ticker with no space at all.
   The search box was running the full 92vw wrap, which on a narrow phone puts it
   within a finger of both edges. And on a short page the footer could sit above
   the bottom of the screen, so it is now pushed down by the layout rather than by
   hoping the content is tall enough. */
.foot { margin-top: auto; }

@media (max-width: 640px) {
  .wrap { width: calc(100vw - 40px); }
  .hero { padding: 26px 0 22px; }
  body.has-results .hero { padding: 8px 0 18px; }
  .hero-title { margin: 0 0 14px; }
  .search input { padding: 14px 16px; font-size: 1.05rem; }
  #count { margin-top: 14px; }
  /* The footer row has to keep the wordmark and the links on ONE line on a 390px
     phone, so on small screens the mark shrinks and the links drop to 12px. The links
     are allowed to wrap inside their own column rather than under the mark, which is
     what keeps the block to two rows instead of four. */
  .foot-inner { gap: 12px; }
  .foot-mark { width: 68px; }
  .foot-links { gap: 12px; font-size: 12px; justify-content: flex-start; }
}
/* ---- second pass on mobile (Architect, 24 Oct) ----
   Two things the first pass did not settle.

   1. Once results exist the hero stops growing and the heading returns to the top,
      which is right, but the mobile padding I set for that state was 8px, so it
      went straight back against the ticker. It gets the same room as the resting
      state.

   2. A strip of paper below the footer. The body was held at 100dvh, and on a
      phone the dynamic viewport height can be SHORTER than the visible area, so
      the page ended before the screen did. 100lvh is the largest the viewport gets
      (toolbars hidden), so the page can never end short. The cost is that with
      toolbars showing there may be a few pixels to scroll, which is a better trade
      than a gap under the footer. */
body {
  min-height: 100lvh;
}

@media (max-width: 640px) {
  body.has-results .hero { padding: 20px 0 16px; }
}
/* ---- third pass on mobile (Architect, 24 Oct) ----
   1. No more jumping. On a phone the search block no longer centres itself in the
      viewport and no longer collapses when results arrive, so its position is the
      same before, during and after typing. That vertical centring is a desktop
      luxury: on a small screen the block already fills the top of the page, and
      moving it twice as you type reads as the page twitching.

   2. Room under "Hae A Keek", as asked, so the results have somewhere to start
      rather than butting against the count line.

   3. The footer gets the phone's own bottom inset added to its padding, so the
      dark block reaches the physical bottom of the screen on a handset with a home
      indicator rather than stopping short and leaving a strip of paper. */
@media (max-width: 640px) {
  /* The hero GROWS when there is nothing else to fill the screen, so the footer is
     pushed to the bottom and there is no strip of paper underneath it. Its
     contents stay at the top, so the block does not move as you type: growth and
     alignment are two different things, and I had been changing both together.
     Once results exist the hero stops growing, because now there IS content to do
     the pushing and the results must not be shoved off the screen. */
  .hero {
    flex: 1 0 auto;
    min-height: 0;
    align-items: flex-start;
    padding: 64px 0 24px;
  }
  body.has-results .hero {
    flex: 0 0 auto;
    padding: 64px 0 24px;
  }
  #count { margin-bottom: 22px; }
  /* The inset belongs on .foot alone. It was also on .foot-links, which was harmless
     while env() returned 0 on every page; now that the viewport meta carries
     viewport-fit=cover it returns the real inset, and two of them would put the
     credit 34px above the bottom edge for no reason. */
  .foot { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
  /* no pull on a phone: the block is top-pinned here, the band is its own height,
     so there is no empty lower half to fill and the results simply follow. */
  body.has-results .results-band { margin-top: 0; }
}
/* ---- the strip below the footer: measured, not argued (25 Oct) ----
   Four attempts at the viewport units did not move this on the Architect phone:
   margin-top:auto, 100dvh, 100lvh, and safe-area padding. Painting html did not move
   it either, which I twice read as "the strip is outside the page". Both readings were
   wrong for the same reason: the build on his phone was older than the fix.

   Two screenshots of the same phone screen, eight hours apart, settled it by pixel.
   The old build showed 44 rows of #f7f6f3 PAPER below the footer, right to the bottom
   edge; the current build shows none, with the dark running down to the browser's own
   toolbar. So the strip was the page CANVAS under a body that iOS sizes shorter than
   the screen: the footer sat correctly at the bottom of the document, and the document
   stopped ~58px above the glass.

   And no viewport unit can close that: iOS reports lvh shorter than the screen here, so
   any min-height derived from it leaves the same remainder. Painting the canvas is the
   fix that does not depend on the unit: html carries the footer colour, so whatever
   height the body stops at, the space below it reads as footer rather than as paper.
   viewport-fit=cover and the .foot safe-area inset stay because they are right for the
   bottom edge and cost nothing; on a laptop there is no safe area and no canvas gap. */
html { background: var(--ink); }

/* The trading name leads and the register follows on a directory row, so the
   register name needs a quiet line of its own beside the number. */
.listing-registered {
  font-size: 12px;
  color: var(--ink-soft);
  margin-left: 4px;
}

/* ---- the strip from The National, under the search box ---------------------
   One small list of headlines so the front page reads as a place that is alive.
   Quiet on purpose: it must never compete with the box, and it is not a record. */
/* Centred, because everything above it is centred: the wordmark, the title, the
   strapline, the box and Hae A Keek. A strip set flush left under a centred column
   reads as a different page. (Architect, 27 Oct: "centre it".)

   AND PULLED UP INTO THE HERO'S UNUSED LOWER HALF, exactly as the results are when a
   search runs. The band is 62vh with the block centred in it, so a strip that simply
   follows the band starts a couple of inches below Hae A Keek - which is what the
   Architect saw. Same dial as the results (130px - half the band), so the two cannot
   drift apart: change --hero-band and both follow. */
.feed-band {
  padding: 0 0 44px;
  text-align: center;
  margin-top: calc(130px - var(--hero-band) / 2);
}
.feed-foot {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  color: var(--ink-soft);
  margin: 12px 0 0;
}
.feed-foot a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule); }
.feed-foot a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.feed-sep { padding: 0 4px; }
.feed-list { list-style: none; margin: 0 auto; padding: 0; max-width: 42rem; }
.feed-list li {
  padding: 8px 0 0;
  margin: 0 0 8px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  line-height: 1.35;
}
.feed-list a { color: var(--ink); text-decoration: none; }
.feed-list a:hover { text-decoration: underline; }
.feed-date {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  color: var(--ink-soft);
  margin-left: 6px;
  white-space: nowrap;
}

/* ---- the feed strip on a phone ----------------------------------------------
   No pull. On a phone the hero band is only as tall as its own content, so there is
   no empty lower half to fill and the strip simply follows Hae A Keek. This has to
   come AFTER the base rule above: a media query carries no extra weight, so a reset
   placed earlier in the file loses to a later unconditional rule - which is exactly
   the fault this comment replaces. */
@media (max-width: 640px) {
  .feed-band { margin-top: 0; }
}

/* ---- CLASS BANDS: a colour per FAMILY of records (Architect, 30 Oct 2026) ----

   WHY: twelve classes of card share one shape, and he said it "all looks a bit samey".
   A 4px band on the leading edge plus a 9px square before the kind gives a reader
   something to scan by, and nothing else about a card moves.

   SIX FAMILIES, NOT TWELVE HUES, because twelve colours is more than the eye resolves at
   a glance; the card still prints its exact kind in words, so nothing is lost.

   EVERY COLOUR CLEARS 3:1 AGAINST THE PAPER, which is the requirement for a graphical
   mark. They are deliberately NOT all 4.5:1: that is the rule for text, and obeying it
   for a bar squeezed every colour into the same dark band (revision 1 of the mock, and
   his verdict on it was "the colours are too dark, you cant differentiate between them").
   Nothing here touches text colour, so body contrast is exactly what it was.

   THE BAND IS NOT A BADGE. The £10 verified mark stays the only thing on a card that
   reads as status: it is a filled label with words in it. */
.result.company,
.result.party,
.result.body {
  border-left: 4px solid #5f7381;
  padding-left: 13px;
}
.result.company            { border-left-color: #5f7381; }  /* the register */
.result.body.body,
.result.party             { border-left-color: #4a63a8; }  /* civic: bodies, parties */
.result.body.school,
.result.body.library,
.result.body.court        { border-left-color: #4a63a8; }  /* civic places */
.result.body.hospital,
.result.body.dentist      { border-left-color: #1f8a76; }  /* health */
.result.body.care         { border-left-color: #c25a3f; }
.result.body.heritage     { border-left-color: #8a4f8f; }  /* somewhere to visit */
.result.body.fhis         { border-left-color: #b07a1c; }  /* food and drink */

/* the same six colours, as a square in front of the kind words */
.result .r-num::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  vertical-align: 1px;
  background: #5f7381;
}
.result.body.body .r-num::before,
.result.party .r-num::before,
.result.body.school .r-num::before,
.result.body.library .r-num::before,
.result.body.court .r-num::before { background: #4a63a8; }
.result.body.hospital .r-num::before,
.result.body.dentist .r-num::before { background: #1f8a76; }
.result.body.care .r-num::before { background: #c25a3f; }
.result.body.heritage .r-num::before { background: #8a4f8f; }
.result.body.fhis .r-num::before { background: #b07a1c; }
/* distilleries: a distillery is a drink, so it carries the food and drink hue rather than the
   visitor-attraction purple, and the two classes stay distinguishable in a mixed list. */
.result.body.distillery { border-left-color: #b07a1c; }
.result.body.distillery .r-num::before { background: #b07a1c; }
/* SHOW MORE (1 Nov 2026). One button per class block, under that class's rows, for the Architect's
   request for a Load More at the bottom of the capped list. The <li> carries the button and a count
   note, and the whole row disappears when the class has nothing left to fetch - a control that
   cannot do anything should not be on the page. */
.r-more {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 0 4px;
  border-bottom: 1px solid var(--rule);
}
.r-more .show-more {
  font: inherit;
  font-size: 14px;
  padding: 9px 16px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.r-more .show-more:hover { border-color: var(--ink); }
.r-more .show-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.r-more-note { font-size: 13px; color: var(--ink-soft); }

/* ---- the how-to guide's example lists (added 2 Nov 2026) --------------------
   The guide is a page of worked examples: a query a reader can type, then the sentence that
   says what it finds. The site has almost no lists, so it had no style for one, and a default
   disc list reads as a document rather than as a search engine. No bullets, one line each,
   the query in the ink colour and the sentence in the softer one. */
.guide-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  max-width: 46rem;
}
.guide-list li {
  margin: 0 0 10px;
  line-height: 1.5;
}
.guide-list li strong {
  color: var(--ink);
  font-weight: 600;
}