/* ============================================================================
   Redmond Guide directory: The Redmond Record.

   Oleg picked this direction on 2026-09-14 from the three studies in
   /dev/directory-directions/ (it is a-record.html there). A newspaper section
   front: ink on paper, heavy rules, Newsreader for display and Public Sans for
   text, and one red used only where something is paid for, picked or urgent.

   The organizing idea is the RULE, not the card. Free listings are a ruled
   column like classifieds, which scans faster than a grid and looks correct
   and findable. An Enhanced listing breaks the column and takes a photo panel.
   That contrast is what the fifteen dollars visibly buys. Sponsored boxes sit
   in their own rail beside the column, never among the listings.

   Type is deliberately large. 18px is the body floor and 15px the floor for
   any label, because Oleg reads this daily and so does everyone over fifty
   looking up a plumber. Padding scales with it so nothing looks cramped.
   ========================================================================= */

:root {
  --paper:    #FCFAF6;
  --paper-2:  #F3EFE6;
  --card:     #FFFFFF;
  --ink:      #15120D;
  --ink-2:    #464034;
  --ink-3:    #6F6857;
  --rule:     #1A160F;
  --rule-2:   #D7D0C0;
  --red:      #A3241B;
  --red-dark: #8C1E16;
  --red-pale: #FBEDEB;
  --blue:     #1C3D5A;
  --green:    #1B6B3F;
  --green-pale: #E6F0E9;
  --amber-pale: #FAF1DC;
  --gold:     #E9C77C;

  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --text: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --measure: 1240px;
  --gutter: 28px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.55;
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* The hidden attribute always wins, including over a class that sets display. */
[hidden] { display: none !important; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: 12px 20px; z-index: 50;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

/* The small uppercase label the whole design hangs on. Labels only, never a
   sentence: a sentence in capitals is hard to read. */
.label,
.section-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 15px;
}

/* ---------------------------------------------------------------------------
   Masthead
   ------------------------------------------------------------------------ */
.masthead { background: var(--paper); border-bottom: 3px solid var(--rule); }
.masthead-in {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 24px var(--gutter) 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 30px;
}
.wordmark { display: block; text-decoration: none; color: var(--ink); }
.wordmark:hover { color: var(--ink); }
.wordmark-kicker {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
}
.wordmark-name {
  display: block;
  font-family: var(--display);
  font-size: 50px;
  line-height: 0.95;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.topnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  padding-bottom: 6px;
}
.topnav a {
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
}
.topnav a:hover { color: var(--ink); border-bottom-color: var(--red); }
.topnav a.on { color: var(--ink); border-bottom-color: var(--red); }
.topnav a.watch {
  background: var(--ink);
  color: var(--paper);
  padding: 9px 17px;
  border: 0;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.topnav a.watch:hover { background: var(--red); color: #fff; }

.strapline { border-bottom: 1px solid var(--rule-2); background: var(--paper-2); }
.strapline-in {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 9px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------------------
   Breadcrumbs
   ------------------------------------------------------------------------ */
.crumbs { background: var(--paper-2); border-bottom: 1px solid var(--rule-2); font-size: 16px; }
.crumbs-in {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 11px var(--gutter);
  color: var(--ink-3);
}
.crumbs .sep { margin: 0 10px; color: #A9A08C; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--red); }

/* ---------------------------------------------------------------------------
   Page frame and type
   ------------------------------------------------------------------------ */
main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 44px var(--gutter) 80px;
}
main.wide { max-width: 1400px; }
.pad { padding: 24px 0; }

h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(27px, 3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}
h3 { font-size: 21px; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }

.lead {
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 0 28px;
}

/* A section is headed by a heavy rule under its title, like a newspaper
   section front, rather than boxed. */
.section { margin: 60px 0 0; }
.section:first-child { margin-top: 0; }
.section > h2,
.section-head {
  border-bottom: 3px solid var(--rule);
  padding-bottom: 10px;
  margin-bottom: 22px;
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
}
.section-head h2 { margin: 0; }
.section-head .more { font-size: 17px; font-weight: 600; }
.section-head span.more { color: var(--ink-3); }

.count {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-3);
  margin: 0 0 22px;
}

.prose { font-size: 19px; line-height: 1.65; color: var(--ink-2); max-width: 64ch; }
.prose p { margin: 0 0 17px; }

/* ---------------------------------------------------------------------------
   Buttons. Ink by default. Red is kept for the Search button, where the page
   has one job, and for destructive actions.
   ------------------------------------------------------------------------ */
.button, button.button, input[type="submit"].button {
  display: inline-block;
  font-family: var(--text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  padding: 15px 28px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  margin: 0 8px 8px 0;
}
.button:hover { background: var(--red); border-color: var(--red); color: #fff; }
.button.quiet { background: transparent; color: var(--ink); }
.button.quiet:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.button.danger { background: var(--red); border-color: var(--red); color: #fff; }
.button.danger:hover { background: var(--red-dark); border-color: var(--red-dark); }
.button.small { font-size: 16px; padding: 10px 18px; }
.button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   The front door: the search panel.

   The front door is search first: this panel is the whole of what a visitor
   sees before they ask for something, so it has to look like the job of the
   page rather than a widget stuck above a list.

   Every control is a real form control. The chips are checkboxes and the
   alphabet is a set of radios, both with their input visually hidden and their
   label styled, so the whole thing submits as one GET with no JavaScript and
   still works from a keyboard. Do not swap these for anchors: an anchor cannot
   hold multi-select state across a submit.
   ------------------------------------------------------------------------ */
.finder { padding: 18px 0 56px; }
.finder h1 {
  font-size: clamp(44px, 6.4vw, 78px);
  line-height: 1.02;
  max-width: 16ch;
  margin-bottom: 14px;
}
.finder h1 em { font-style: italic; color: var(--red); }
.finder .lead { max-width: 56ch; margin-bottom: 40px; }
.finder.searching { padding: 0 0 40px; }
.finder.searching h1 { font-size: clamp(36px, 4.4vw, 52px); max-width: none; margin-bottom: 24px; }

/* The box and its Search button share one line, so the button is where the
   eye already is. */
.search-field {
  display: flex;
  align-items: center;
  gap: 18px;
  border-top: 3px solid var(--rule);
  border-bottom: 3px solid var(--rule);
  padding: 14px 0;
}
.search-field input[type="search"] {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 400;
  padding: 10px 4px 10px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  outline: none;
}
.search-field input[type="search"]::placeholder { color: #A9A08C; }
.search-field .button {
  flex: none;
  margin: 0;
  font-size: 19px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 17px 42px;
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.search-field .button:hover { background: var(--red-dark); border-color: var(--red-dark); }
.search-field .button.quiet {
  background: transparent; color: var(--ink); border-color: var(--ink);
  text-transform: none; letter-spacing: 0; padding: 17px 24px;
}
.search-field .button.quiet:hover { background: var(--ink); color: var(--paper); }

/* While a list is open, the box and its one Search button stay at the top of
   the window, so Search is never a scroll away from the tags being ticked. */
.finder:has(.pane-switch:not(#pane-none):checked) .search-field {
  position: sticky; top: 0; z-index: 6; background: var(--paper);
}
.pane-hint { font-size: 17px; color: var(--ink-3); margin: 18px 0 0; }

/* ---------------------------------------------------------------------------
   The option bar under the box: Tags, A to Z, Categories, Claim.

   Everything else the front door can do lives behind these four buttons, so
   a first visit shows a box and four words rather than a wall of options.

   Still no JavaScript. Each button is a <label> for a hidden radio, and :has()
   shows the pane whose radio is checked, so one pane is open at a time. The
   open button's label points at the "none" radio instead, which is how a
   second press closes it. Browsers without :has() simply show every pane,
   which is the old page and still works.
   ------------------------------------------------------------------------ */
.pane-switch {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule-2);
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  padding: 11px 20px;
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.tab::after { content: "\25BE"; font-size: 16px; color: var(--ink-3); }
.tab:hover { background: var(--paper-2); }
.tab-n {
  background: var(--red);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 1px 8px;
}
.tab-close { display: none; background: var(--ink); color: var(--paper); }
.tab-close::after { content: "\25B4"; color: #C0A883; }
.tab-close:hover { background: var(--ink-2); }

.pane { padding: 26px 0 28px; border-bottom: 1px solid var(--rule-2); }
.pane-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin: 0 0 18px;
}
.pane-head .label { margin: 0; }
.pane-close {
  font-size: 17px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pane-close:hover { color: var(--red); }
.pane-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.pane-go .button { margin: 0; }
.pane-go span { font-size: 17px; color: var(--ink-3); }
.pane .lead { font-size: 19px; margin-bottom: 20px; }

@supports selector(:has(*)) {
  .pane { display: none; }
  .finder:has(#pane-tags:checked) .pane-tags,
  .finder:has(#pane-letters:checked) .pane-letters,
  .finder:has(#pane-categories:checked) .pane-categories { display: block; }

  .finder:has(#pane-tags:checked) .tab-open.tab-tags,
  .finder:has(#pane-letters:checked) .tab-open.tab-letters,
  .finder:has(#pane-categories:checked) .tab-open.tab-categories { display: none; }

  .finder:has(#pane-tags:checked) .tab-close.tab-tags,
  .finder:has(#pane-letters:checked) .tab-close.tab-letters,
  .finder:has(#pane-categories:checked) .tab-close.tab-categories { display: inline-flex; }

  /* The radios are the real focus targets, so show focus on their buttons. */
  .finder:has(#pane-none:focus-visible) .tabs,
  .finder:has(#pane-tags:focus-visible) .tab-tags,
  .finder:has(#pane-letters:focus-visible) .tab-letters,
  .finder:has(#pane-categories:focus-visible) .tab-categories { outline: 3px solid var(--red); outline-offset: 2px; }
}

/* A pick shows as picked straight from its checkbox, so the tick appears the
   moment it is made. */
.chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip:has(input:checked)::before { content: "\2713"; margin-right: 7px; font-weight: 700; }
.alpha-key:has(input:checked) { background: var(--red); border-color: var(--red); color: #fff; }

/* The box above the tags that narrows them as you type. The script shows it;
   without the script every tag is simply listed. */
.tag-filter {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 0 18px;
  padding: 12px 14px;
  font-family: var(--text);
  font-size: 19px;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--rule-2);
  border-radius: 0;
}
.tag-filter:focus { border-color: var(--ink); outline: none; }
.filter-none { font-size: 17px; color: var(--ink-3); margin: 14px 0 0; }

/* A list of things to tick: the categories pane, and business names. The
   checkbox stays visible, because ticking is the whole job of the list. */
.picks { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 32px; }
.picks li { break-inside: avoid; margin: 0 0 4px; }
.pick {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 10px;
  border: 1.5px solid transparent;
  font-size: 18px;
  color: var(--ink);
  cursor: pointer;
}
.pick input { flex: none; width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--ink); cursor: pointer; }
.pick:hover { background: var(--paper-2); }
.pick:has(input:checked) { background: var(--paper-2); border-color: var(--ink); }
.pick-text { min-width: 0; }
.pick-name { display: block; font-weight: 600; }
.pick-sub { display: block; font-size: 16px; color: var(--ink-3); }
.pick .n { margin-left: auto; padding-left: 10px; color: #8F8775; font-variant-numeric: tabular-nums; }
.pick.empty { color: #9C9481; cursor: default; }
.pick.empty:hover { background: transparent; }

.names-note { font-size: 19px; color: var(--ink-2); margin: 20px 0 0; }
.names-group { margin: 30px 0 0; }
.names-group h3 {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 500;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-2);
}
.names-group h3 .n { font-family: var(--text); font-size: 17px; font-weight: 600; color: var(--ink-3); margin-left: 10px; }

/* The bar under a list of names stays in view at the bottom of the window,
   so Search is always one move away however long the list is. */
.names-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 30px;
  padding: 16px 0;
  background: var(--paper);
  border-top: 3px solid var(--rule);
}
.names-bar .button { margin: 0; }
.pick-count { font-size: 18px; font-weight: 600; color: var(--ink-2); }

.results-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 17px; font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  padding: 9px 16px;
  border: 1.5px solid var(--rule-2);
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: none;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
/* The input is hidden from sight but not from a keyboard or a screen reader. */
.chip input,
.alpha-key input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.chip:focus-within { outline: 3px solid var(--red); outline-offset: 2px; }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip.on::before { content: "\2713"; margin-right: 7px; font-weight: 700; }
.chip.empty { color: #9C9481; }

.alpha { display: flex; flex-wrap: wrap; gap: 4px; }
.alpha-key {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  border: 1.5px solid transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.alpha-key:hover { border-color: var(--rule-2); color: var(--ink); }
.alpha-key:focus-within { outline: 3px solid var(--red); outline-offset: 2px; }
.alpha-key.on { background: var(--red); border-color: var(--red); color: #fff; }
.alpha-key.empty { color: #C3BCAB; cursor: default; }
.alpha-key.empty:hover { border-color: transparent; color: #C3BCAB; }
.alpha-any {
  font-family: var(--text);
  font-size: 16px;
  font-weight: 600;
  padding: 0 14px;
  margin-left: 8px;
  border-color: var(--rule-2);
}
.alpha-any.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------------------------
   Results: a ruled column of listings, and a rail for sponsors
   ------------------------------------------------------------------------ */
.results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
  border-bottom: 3px solid var(--rule);
  padding-bottom: 12px;
}
.results-head h2 { margin: 0; }
.results-head a { font-size: 17px; font-weight: 600; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: 48px;
  align-items: start;
}
.layout.no-rail { grid-template-columns: minmax(0, 1fr); }

/* Result cards. Every fact carries its label ("Phone:" then the number), with
   labels right aligned and values left aligned, so nobody has to work out what
   a string of digits is. */
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 22px;
  margin-top: 26px;
}
.result {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule-2);
  border-top: 3px solid var(--rule);
}
.result.is-enhanced { border: 3px solid var(--rule); }
.result-pic { display: block; background: var(--paper-2); }
.result-pic img { display: block; width: 100%; height: 210px; object-fit: cover; }
.result-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.result-name {
  font-family: var(--display);
  font-size: 29px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 6px;
}
.result-name a { color: var(--ink); text-decoration: none; }
.result-name a:hover { color: var(--red); text-decoration: underline; text-decoration-thickness: 2px; }
.result-cat {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.result-cat a { color: inherit; text-decoration: none; }
.result-cat a:hover { color: var(--red); }
.result-blurb { font-size: 17px; color: var(--ink-2); margin: 0 0 14px; }
.result-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 9px 12px;
  margin: 0 0 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-2);
  font-size: 18px;
}
.result-facts dt { text-align: right; font-size: 16px; font-weight: 600; color: var(--ink-3); padding-top: 2px; }
.result-facts dd { margin: 0; color: var(--ink); overflow-wrap: break-word; }
.result-facts dd a { font-weight: 600; text-decoration: none; }
.result-facts dd a:hover { text-decoration: underline; }
.result-special {
  margin: 0 0 16px;
  padding: 9px 13px;
  background: var(--red-pale);
  border-left: 4px solid var(--red);
  font-size: 16px;
  font-weight: 600;
  color: var(--red-dark);
}
.result-more { margin: auto 0 0; font-size: 17px; font-weight: 700; }
.result-more a { color: var(--ink); }
.result-more a:hover { color: var(--red); }

.flag {
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 4px 10px;
  margin: 0 8px 12px 0;
}
.flag.closed { background: var(--red); color: #fff; }
.result .flag { align-self: flex-start; }

/* The sponsor rail. It is its own labeled column beside the listings, which
   is the most honest place for an ad to sit. On a phone it drops below the
   last listing, so a paid box is never the first thing on a small screen. */
.rail { position: sticky; top: 24px; }
.rail-head {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 3px solid var(--rule);
  padding-bottom: 10px;
  margin: 0 0 20px;
}

/* A sponsored box. Deliberately nothing like a listing: it lives in the rail,
   it leads with the word Sponsored, and it is built from the advertiser's own
   logo, line and link. If this ever reads as a result, the honesty of the
   whole results page goes with it. */
.adbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--rule-2);
  background: var(--card);
  padding: 20px 21px 21px;
  margin-bottom: 20px;
}
.adbox-label {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 13px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
.adbox-label::after { content: ""; flex: 1; height: 1px; background: #EBC8C0; }
.adbox-logo { display: block; height: 46px; width: auto; max-width: 100%; margin-bottom: 13px; }
.adbox-who {
  margin: 0 0 5px;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.adbox-line { margin: 0 0 14px; font-size: 17px; color: var(--ink-2); }
.adbox-to { font-size: 17px; font-weight: 700; color: var(--blue); text-decoration: none; }
.adbox-to::after { content: " \2192"; }
.adbox-to:hover { color: var(--red); text-decoration: underline; }

.ad-fairness {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-3);
  border-top: 1px solid var(--rule-2);
  padding-top: 15px;
  margin: 0;
}

.empty-state {
  background: var(--card);
  border: 1px solid var(--rule-2);
  border-top: 3px solid var(--rule);
  padding: 40px 34px;
  color: var(--ink-2);
  font-size: 19px;
  margin-top: 26px;
}
.empty-state h2 { margin-bottom: 8px; }
.empty-state p { max-width: 60ch; }

/* ---------------------------------------------------------------------------
   The category list. It is in the HTML of every state of the front door, even
   while its pane is closed, because it is how a crawler reaches every free
   listing. Keep it plain linked text.
   ------------------------------------------------------------------------ */
.cats {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: 44px;
}
.cats li { break-inside: avoid; margin-bottom: 8px; }
.cats a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 18px;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule-2);
  padding-bottom: 7px;
}
.cats a:hover { color: var(--red); }
.cats .n { color: #8F8775; font-variant-numeric: tabular-nums; }
.cats a.empty { color: #9C9481; }

/* ---------------------------------------------------------------------------
   Plain boxes, used by the pricing page and the claim tools
   ------------------------------------------------------------------------ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}
.card { background: var(--card); border: 1px solid var(--rule-2); display: flex; flex-direction: column; }
.card.is-enhanced { border: 3px solid var(--rule); }
.card-body { padding: 22px 24px 24px; }
.card-body h3 { font-family: var(--display); font-size: 27px; font-weight: 500; }
.card-line { margin: 0 0 5px; font-size: 17px; color: var(--ink-2); }

.panel {
  background: var(--card);
  border: 3px solid var(--rule);
  padding: 22px 24px 24px;
  margin-bottom: 22px;
}
.panel h2 { font-size: 26px; margin-bottom: 14px; }
.panel h3 { font-size: 19px; }
.panel > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   One business
   ------------------------------------------------------------------------ */
.listing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 52px;
  align-items: start;
}
.listing-head { margin-bottom: 26px; }
.listing-head h1 { margin-bottom: 8px; }
.listing-cat {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 8px;
}
.listing-cat a { color: inherit; text-decoration: none; }
.listing-cat a:hover { text-decoration: underline; }
.listing-checked { font-size: 16px; color: var(--ink-3); margin: 0; }

/* Up to five photos: the first one large, the rest stacked beside it. A
   caption sits on the photo rather than under it, so uneven captions cannot
   knock the grid out of line. */
.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: 200px;
  gap: 8px;
  margin: 0 0 32px;
}
.gallery.one { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 400px; }
.gallery figure { position: relative; margin: 0; overflow: hidden; background: var(--paper-2); }
.gallery figure:first-child { grid-row: span 2; }
.gallery.one figure:first-child { grid-row: auto; }
.gallery.two figure:nth-child(2) { grid-row: span 2; }
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 12px;
  background: rgba(21, 18, 13, 0.78);
  color: #F3EFE6;
  font-size: 15px;
}

.hours { width: 100%; max-width: 480px; border-collapse: collapse; }
.hours th, .hours td {
  padding: 10px 0;
  border-bottom: 1px dotted var(--rule-2);
  font-size: 18px;
  vertical-align: top;
}
/* Labels right aligned, values left aligned, never italic. Oleg called
   left-aligned labels ugly, and it is a standing rule across his tools. */
.hours th { text-align: right; font-weight: 600; color: var(--ink-3); width: 38%; padding-right: 22px; }
.hours td { text-align: left; color: var(--ink); font-variant-numeric: tabular-nums; }
.hours tr.today th, .hours tr.today td { color: var(--red); font-weight: 700; }
.hours-note { font-size: 17px; color: var(--ink-3); margin: 14px 0 0; }

.block {
  background: var(--card);
  border: 3px solid var(--rule);
  padding: 22px 23px 24px;
  margin-bottom: 22px;
}
.block-head {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 16px;
}
.block > :last-child { margin-bottom: 0; }
.block .note { margin: 18px 0 0; }

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 14px 16px;
  font-size: 18px;
}
.facts dt {
  text-align: right;
  color: var(--ink-3);
  font-weight: 600;
  font-size: 16px;
  padding-top: 2px;
}
.facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.facts dd a { font-weight: 600; text-decoration: none; }
.facts dd a:hover { text-decoration: underline; }
.facts dd .sub { display: block; font-size: 16px; margin-top: 3px; }
.facts .tel {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.sponsor-logo { display: block; max-height: 90px; width: auto; margin: 0 0 12px; }
.sponsor-link { text-decoration: none; color: var(--ink); }
.sponsor-name { font-family: var(--display); font-size: 24px; font-weight: 500; line-height: 1.2; margin: 0 0 5px; color: var(--ink); }
.sponsor-line { font-size: 17px; color: var(--ink-2); margin: 0; }

.channel {
  background: var(--ink);
  color: var(--paper);
  padding: 22px 23px 24px;
  margin-bottom: 22px;
}
.channel .block-head { color: #C0A883; margin-bottom: 11px; }
.channel p { margin: 0 0 16px; font-size: 17px; color: #E8E1D4; }
.channel a {
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  background: var(--gold);
  padding: 11px 20px;
  text-decoration: none;
}
.channel a:hover { background: #fff; color: var(--ink); }

.correction-link { font-size: 17px; color: var(--ink-3); margin: 0; }

/* ---------------------------------------------------------------------------
   Specials
   ------------------------------------------------------------------------ */
.specials { display: grid; gap: 18px; }
.special {
  background: var(--card);
  border: 1px solid var(--rule-2);
  border-left: 5px solid var(--red);
  padding: 22px 26px 24px;
}
.special.soon { border-left-color: var(--rule-2); }
.special h3 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin-bottom: 6px;
}
.special-who { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.special-who a { color: var(--ink); }
.special-who a:hover { color: var(--red); }
.special-who .special-cat { font-weight: 400; color: var(--ink-3); }
.special-who .special-cat a { color: var(--ink-3); }
.special-when {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 12px;
}
.special.soon .special-when { color: var(--ink-3); }
.special-body { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.special-body p { margin: 0 0 12px; }
.special-body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------ */
.form { max-width: 720px; }
.form.wide { max-width: none; }

.field { margin-bottom: 22px; }
.field label,
.field > .label {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  margin-bottom: 7px;
}
.field .hint { font-size: 16px; color: var(--ink-3); margin: 7px 0 0; }
.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="password"],
.field input[type="number"],
.field input[type="file"],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.45;
  padding: 12px 14px;
  border: 2px solid var(--rule-2);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--red); }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 20px; }

.check { display: flex; align-items: flex-start; gap: 12px; font-size: 18px; }
.check input[type="checkbox"] { width: 22px; height: 22px; margin-top: 3px; flex: none; accent-color: var(--ink); }
.check label { font-weight: 400; color: var(--ink); margin: 0; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }
.form-actions .button { margin: 0; }

.code-input {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 27px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

/* A note reads as a note: sentence case, not italic, inside a small box. */
.note {
  font-size: 17px;
  line-height: 1.5;
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-left: 4px solid var(--ink-3);
  padding: 13px 16px;
  margin: 0 0 20px;
  color: var(--ink-2);
}
.note-good { background: var(--green-pale); border-color: #C3D9CA; border-left-color: var(--green); color: #174A2E; }
.note-bad { background: var(--red-pale); border-color: #EBC8C0; border-left-color: var(--red); color: var(--red-dark); }
.note-warn { background: var(--amber-pale); border-color: #E8D6AE; border-left-color: #9A7020; color: #6E5214; }

/* ---------------------------------------------------------------------------
   Pagination, also used as the category filter on the specials page
   ------------------------------------------------------------------------ */
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 36px 0 0;
  font-size: 17px;
}
.pager a, .pager span {
  display: inline-block;
  padding: 10px 16px;
  border: 1.5px solid var(--rule-2);
  background: var(--card);
  text-decoration: none;
  color: var(--ink-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pager a:hover { border-color: var(--ink); color: var(--ink); }
.pager .on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.specials-filter { margin: 0 0 30px; }

/* ---------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */
.footer {
  background: var(--ink);
  color: #CFC8BA;
  margin-top: 40px;
  padding: 48px var(--gutter) 34px;
  font-size: 17px;
}
.footer-in {
  max-width: var(--measure);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
}
.footer a { color: #E8E2D6; }
.footer a:hover { color: var(--gold); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 8px; }
.footer-mark {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
  margin: 0 0 12px;
}
.footer-head {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #C0A883;
  margin: 0 0 14px;
}
.footer-note { margin: 0; max-width: 46ch; line-height: 1.55; }
.footer-legal {
  max-width: var(--measure);
  margin: 36px auto 0;
  padding-top: 22px;
  border-top: 1px solid #3A352C;
  font-size: 16px;
  color: #A39B8A;
}

/* ---------------------------------------------------------------------------
   Narrow screens
   ------------------------------------------------------------------------ */
@media (max-width: 980px) {
  .layout, .listing { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .rail { position: static; }
  .cats, .picks { columns: 2; }
  .masthead-in { flex-direction: column; align-items: flex-start; }
  .footer-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 620px) {
  :root { --gutter: 18px; }
  body { font-size: 18px; }
  main { padding-top: 30px; padding-bottom: 56px; }
  .wordmark-name { font-size: 40px; }
  .topnav { gap: 8px 18px; }
  .cats, .picks { columns: 1; }
  .search-field { flex-wrap: wrap; gap: 10px; }
  .search-field input[type="search"] { font-size: 26px; flex-basis: 100%; }
  .search-field .button { width: 100%; }
  .tab { font-size: 17px; padding: 10px 14px; }
  .gallery { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 240px; }
  .gallery figure:first-child, .gallery.two figure:nth-child(2) { grid-row: auto; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .facts dt { text-align: left; margin-top: 12px; }
  .hours th { width: 44%; }
}

@media print {
  .masthead, .strapline, .footer, .topnav, .crumbs, .rail, .pager, .channel { display: none; }
  body { background: #fff; font-size: 12pt; }
}