/* Homepage discovery: scoped so restaurant and admin pages retain their layout. */
.discovery-home .city-hero { padding-top: clamp(28px, 4vw, 56px); padding-bottom: 30px; }
.discovery-home .local-promise { font-size: .78rem; margin-bottom: 12px; letter-spacing: .1em; }
.discovery-home .discovery-intro { max-width: 620px; margin-bottom: 0; }
.discovery-home .city-copy h1 { line-height: 1.1; margin-bottom: 18px; }
.discovery-home .finder-panel { scroll-margin-top: 110px; }
.discovery-home .discovery-jump { display: inline-flex; align-items: center; gap: 14px; color: #f1e4cd; font-size: 1.275rem; font-weight: 700; margin-top: 24px; text-underline-offset: 5px; }
.discovery-home .discovery-jump span { font-size: 1.25rem; }
.discovery-features { background: #f1ede4; border-top: 1px solid #deded3; scroll-margin-top: 110px; }
.discovery-features .band-shell { max-width: 1120px; }
.discovery-heading { display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: 48px; margin-bottom: 34px; }
.discovery-heading h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.2; letter-spacing: -0.015em; }
.discovery-heading > p { max-width: 430px; margin: 0 0 8px; }
.discovery-features .eyebrow { color: #925037; }
.feature-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; border-radius: 16px; scrollbar-width: thin; scrollbar-color: #b8c6bc transparent; }
.feature-slide { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; scroll-snap-align: start; background: #fffdf8; overflow: hidden; }
.feature-copy { padding: clamp(26px, 4vw, 52px); align-self: center; }
.feature-step { color: #35645c; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.feature-copy h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.2; letter-spacing: -0.015em; margin: 20px 0; }
.feature-copy p { max-width: 410px; font-size: .98rem; }
.feature-copy .feature-takeaway { color: #174e49; border-top: 1px solid #dce1d9; padding-top: 18px; margin: 24px 0 0; font-weight: 700; font-size: .88rem; }
.feature-visual { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 36px; background: #e5ece3; color: #174e49; }
.visual-caption { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; }
.visual-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.visual-chips span { border: 1px solid #b5c6b9; background: #f8faf4; border-radius: 100px; padding: 9px 13px; font-size: .76rem; font-weight: 700; }
.filter-connector { font-size: 2rem; color: #77927d; line-height: 1; }
.shortlist-illustration { display: flex; align-items: center; gap: 16px; padding: 22px; background: #fffdf8; border: 1px solid #ced9ca; border-radius: 10px; box-shadow: 0 12px 28px #174e4910; max-width: 370px; width: 100%; transform: rotate(-2deg); }
.shortlist-illustration strong { display: block; font-size: .98rem; margin-bottom: 6px; }
.shortlist-illustration div > span { display: block; font-size: .78rem; line-height: 1.5; color: #617078; }
.mini-compass { font-size: 2.1rem; color: #9c6b30; }
.illustration-lines { display: grid; gap: 8px; width: 80%; }
.illustration-lines i { height: 7px; background: #cbd8c9; border-radius: 10px; }
.illustration-lines i:nth-child(2) { width: 85%; }.illustration-lines i:nth-child(3) { width: 62%; }
.neighborhood-visual { background: #eee5d4; gap: 12px; }
.neighborhood-compass { width: min(240px, 100%); height: 180px; }
.feature-text-link { color: #174e49; font-size: .82rem; font-weight: 700; text-underline-offset: 4px; text-align: center; margin-top: 12px; }
.guide-visual { background: #e3e9eb; }
.guide-illustration { border: 1px solid #c8d2d4; background: #fffdf8; border-radius: 10px; padding: 28px; width: min(100%, 320px); transform: rotate(2deg); box-shadow: 0 12px 28px #174e4910; }
.guide-illustration-title { display: block; font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; color: #162128; font-size: 1.35rem; margin-bottom: 18px; }
.guide-illustration div { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-top: 1px solid #dce1d9; font-size: .82rem; }
.guide-illustration div > span { font-size: 1.4rem; font-weight: 400; width: 22px; }
.visual-footnote { font-size: .8rem; }
.feature-controls { display: flex; align-items: center; gap: 24px; padding-top: 18px; }
.feature-dots, .feature-arrows { display: flex; gap: 6px; }
.discovery-features button { box-shadow: none; }
.feature-dots button { padding: 0; width: 44px; height: 44px; align-items: center; background: transparent; }
.feature-dots button span { width: 8px; height: 8px; background: #8a9990; border-radius: 8px; transition: width .2s; }
.feature-dots button[aria-current="true"] span { width: 28px; background: #174e49; }
.feature-position { color: #52645d; font-size: .78rem; font-weight: 700; letter-spacing: .08em; }
.feature-arrows { margin-left: auto; gap: 10px; }
.feature-arrows button { background: transparent; border: 1px solid #a7b8ac; color: #174e49; border-radius: 50%; width: 46px; height: 46px; padding: 0; align-items: center; font-size: 1.4rem; }
.feature-arrows button:hover { background: #dfe7db; }
.discovery-local-note { display: flex; align-items: center; gap: 24px; padding-top: 38px; }
.discovery-local-note > span { font-size: 2.8rem; color: #9c6b30; }
.discovery-local-note p { margin: 0; max-width: 730px; font-size: .9rem; }
.discovery-local-note strong { color: #174e49; }
.discovery-local-note a { flex-shrink: 0; margin-left: auto; color: #174e49; font-size: .8rem; font-weight: 700; text-underline-offset: 4px; }
.discovery-home :is(button, a, input, .feature-track):focus-visible { outline: 3px solid #b96a4e; outline-offset: 4px; }
.discovery-home [hidden] { display: none !important; }
#collection-workspace[hidden], #collection-preview[hidden] { display: none !important; }
@media (max-width: 760px) {
  .discovery-heading { grid-template-columns: 1fr; gap: 16px; }
  .discovery-heading > p { max-width: 580px; }
  .feature-slide { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .feature-copy { padding: 28px; }
  .feature-copy h3 { margin: 14px 0; }
  .feature-copy p { max-width: none; }
  .feature-visual { min-height: 310px; padding: 26px; gap: 14px; }
  .guide-illustration { padding: 18px 24px; }
  .guide-illustration div { padding: 10px 0; }
  .discovery-local-note { flex-wrap: wrap; gap: 14px; }
  .discovery-local-note > span { display: none; }
  .discovery-local-note a { margin-left: 0; }
}
@media (max-width: 540px) {
 .public-page .site-footer { grid-template-columns: minmax(0, 1fr); }
 .public-page .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discovery-home .site-footer { grid-template-columns: minmax(0, 1fr); }
  .discovery-home .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discovery-home .city-copy h1 { font-size: clamp(1.4rem, 7.4vw, 1.85rem); line-height: 1.1; }
  .discovery-home .local-promise { font-size: .65rem; letter-spacing: .07em; }
  .discovery-home .discovery-intro { font-size: 1rem; }
  .discovery-home .city-brand-lockup { width: min(100%, 410px); margin-bottom: 22px; }
  .discovery-home .discovery-jump { font-size: 1.125rem; gap: 8px; }
  .feature-copy { padding: 24px; }
  .feature-copy p { font-size: .9rem; }
  .feature-controls { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .feature-dots button span { transition: none; } }

/* Homepage service comparison */
.discovery-comparison { background: #123f3c; color: #f8f2e8; padding: clamp(56px, 8vw, 96px) 24px; }
.comparison-shell { width: min(1120px, 100%); margin: 0 auto; }
.comparison-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 48px; align-items: end; margin-bottom: 26px; }
.comparison-heading .eyebrow { color: #e2b875; }
.comparison-heading h2 { color: #fffdf8; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -0.015em; max-width: 650px; scroll-margin-top: 120px; }
.comparison-heading > p { color: #d5e0dc; max-width: 480px; margin: 0 0 5px; font-size: .96rem; }
.comparison-legend { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 0 0 16px; color: #d5e0dc; font-size: .75rem; font-weight: 700; }
.comparison-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.comparison-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: .78rem; font-weight: 700; }
.comparison-mark.is-yes { background: #dcebd8; color: #17603e; }
.comparison-mark.is-sometimes { background: #fff0bf; color: #8a6100; }
.comparison-mark.is-no { background: #f5d7d1; color: #a1352b; }
.comparison-scroll { overflow-x: auto; border: 1px solid #ffffff24; border-radius: 16px; background: #fffdf8; color: #162128; box-shadow: 0 26px 60px #071c1a44; scrollbar-width: thin; scrollbar-color: #cfa15c #e9eee9; }
.comparison-table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.comparison-table th, .comparison-table td { border-bottom: 1px solid #dfe4de; }
.comparison-table thead th { height: 176px; padding: 12px 8px; background: #eef1e9; color: #52615f; font-size: .68rem; line-height: 1.25; letter-spacing: .045em; text-align: center; text-transform: uppercase; overflow-wrap: anywhere; }
.comparison-table thead th:first-child { width: 22%; padding-left: 16px; text-align: left; }
.comparison-table thead th:not(:first-child) { width: 19.5%; }
.comparison-table tbody th { padding: 12px 16px; background: #fffdf8; text-align: left; overflow-wrap: anywhere; }
.comparison-table tbody th strong { display: block; color: #162128; font-size: .8rem; line-height: 1.3; }
.comparison-table td { padding: 10px 8px; text-align: center; background: #fffdf8; }
.comparison-table .is-compass-column { background: #f1ead8; border-left: 1px solid #d9c79f; border-right: 1px solid #d9c79f; }
.comparison-table thead .is-compass-column { background: #d9c18c; color: #174e49; }
.comparison-compass-mark { display: block; width: 152px; max-width: 100%; height: auto; margin: 0 auto; object-fit: contain; }
.comparison-table tbody tr:last-child > * { border-bottom: 0; }
.comparison-status { display: inline-grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; font-size: .95rem; font-weight: 700; line-height: 1; }
.comparison-status.is-yes { background: #d7ead6; color: #17603e; }
.comparison-status.is-sometimes { background: #fff0bf; color: #8a6100; }
.comparison-status.is-no { background: #f4d8d3; color: #a1352b; }
.comparison-footer { display: flex; align-items: flex-start; gap: 32px; margin-top: 18px; color: #cbd8d4; font-size: .75rem; }
.comparison-footer p { max-width: 700px; margin: 0; }
.comparison-footer strong { color: #fffdf8; }
.comparison-footer a { flex-shrink: 0; margin-left: auto; color: #f2ca89; font-weight: 700; text-underline-offset: 4px; }
.comparison-scroll:focus-visible { outline: 3px solid #e2b875; outline-offset: 5px; }

@media (max-width: 760px) {
  .discovery-comparison { padding-inline: 18px; }
  .comparison-heading { grid-template-columns: 1fr; gap: 14px; }
  .comparison-heading > p { max-width: 620px; }
  .comparison-table { min-width: 340px; }
  .comparison-table thead th:first-child { width: 34%; }
  .comparison-table thead th:not(:first-child) { width: 16.5%; }
  .comparison-table thead th:first-child, .comparison-table tbody th { position: sticky; left: 0; z-index: 2; box-shadow: 8px 0 14px #16212812; }
  .comparison-table thead th:first-child { z-index: 3; }
  .comparison-table thead th { height: 150px; }
  .comparison-footer { flex-direction: column; gap: 12px; }
  .comparison-footer a { margin-left: 0; }
}

@media (max-width: 540px) {
  .comparison-heading h2 { font-size: 2rem; }
  .comparison-legend { gap: 8px 14px; }
  .comparison-table thead th { height: 90px; padding: 9px 3px; font-size: .58rem; letter-spacing: .01em; }
  .comparison-table thead th:first-child { padding-left: 9px; }
  .comparison-table tbody th { padding: 10px 9px; }
  .comparison-table tbody th strong { font-size: .68rem; line-height: 1.2; }
  .comparison-table td { padding: 9px 3px; }
  .comparison-status { width: 25px; height: 25px; font-size: .84rem; }
  .comparison-compass-mark { width: 98px; }
}

:root {
  color-scheme: light;
  --ink: #162128;
  --muted: #617078;
  --line: #d8deda;
  --paper: #f5f0e8;
  --panel: #ffffff;
  --green: #174e49;
  --green-deep: #0f3a37;
  --clay: #b96a4e;
  --gold: #cfa15c;
  --blue: #406274;
  --charcoal: #10212b;
  --shadow: 0 24px 80px rgba(16, 33, 43, 0.12);
  --font-display: "Literata", Georgia, "Times New Roman", serif;
  --font-body: "Karla", "Segoe UI", Arial, sans-serif;
  --font-ui: "Karla", "Segoe UI", Arial, sans-serif;
  font-family: var(--font-body);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

button,
input,
select,
textarea,
label,
summary,
table,
nav {
  font-family: var(--font-ui);
}

body.public-page {
  background:
    radial-gradient(circle at top right, rgba(207, 161, 92, 0.12), transparent 25%),
    linear-gradient(180deg, #fbf7f2 0%, #f3ede4 100%);
}

.site-footer {
  align-items: flex-start;
  background: var(--charcoal);
  color: rgba(255, 255, 255, 0.82);
  display: grid;
  font-size: 0.86rem;
  gap: 24px 48px;
  grid-template-columns: minmax(220px, 1fr) minmax(360px, auto);
  padding: 22px clamp(20px, 5vw, 64px);
}

.site-footer a {
  color: white;
  font-weight: 700;
}

.footer-links {
  display: grid;
  gap: 10px 24px;
  grid-template-columns: repeat(3, max-content);
  justify-content: end;
  line-height: 1.35;
}

.site-footer a[aria-current="page"] {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.text-sitemap-shell {
  max-width: 1080px;
}

.text-sitemap-sections {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.text-sitemap-sections > section {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(46, 39, 33, 0.14);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 32px);
}

.text-sitemap-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.text-sitemap-list li {
  border-top: 1px solid rgba(46, 39, 33, 0.12);
  display: grid;
  gap: 3px;
  padding-top: 10px;
}

.text-sitemap-list a {
  font-weight: 700;
}

.text-sitemap-list span {
  color: var(--muted);
  font-size: 0.9rem;
}

.legal-shell {
  margin: 0 auto;
  max-width: 880px;
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 64px);
}

.legal-shell h1,
.legal-shell h2 {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
}

.legal-shell h1 {
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1.05;
  margin: 0 0 16px;
}

.legal-shell h2 {
  font-size: 1.35rem;
  margin: 34px 0 10px;
}

.legal-shell p,
.legal-shell li {
  color: var(--muted);
  line-height: 1.7;
}

.legal-shell li + li {
  margin-top: 7px;
}

.legal-shell a {
  color: var(--green-deep);
  font-weight: 700;
}

.legal-meta {
  color: var(--muted);
  margin-bottom: 32px;
}

.contact-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 28px;
}

.contact-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(16, 33, 43, 0.08);
  display: grid;
  gap: 14px;
  padding: 24px;
}

.contact-form h2 {
  margin: 0;
}

.contact-form label {
  display: grid;
  font-size: 0.9rem;
  font-weight: 700;
  gap: 6px;
}

.contact-form input,
.contact-form textarea {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  padding: 10px 12px;
}

.contact-form textarea {
  min-height: 132px;
  resize: vertical;
}

.contact-form button {
  background: var(--green);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 12px 16px;
}

.contact-form-note {
  font-size: 0.84rem;
  margin: 0;
}

a {
  color: inherit;
}

.site-header {
  align-items: center;
  background: rgba(251, 250, 247, 0.94);
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 72px;
  justify-content: space-between;
  padding: 0 clamp(20px, 5vw, 64px);
  position: sticky;
  top: 0;
  z-index: 5;
}

.public-header {
  backdrop-filter: blur(14px);
  gap: 12px;
  justify-content: flex-start;
}

.brand {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  text-decoration: none;
}

.brand-mark {
  display: block;
  flex: 0 0 48px;
  height: 48px;
  object-fit: contain;
  width: 48px;
}

nav a {
  color: var(--muted);
  font-weight: 700;
  margin-left: 18px;
  text-decoration: none;
}

.public-nav {
  display: flex;
  gap: 10px;
}

.public-nav a {
  border-radius: 999px;
  padding: 8px 12px;
  margin-left: 0;
}

.public-nav a:hover,
.public-nav a:focus-visible {
  background: rgba(16, 33, 43, 0.05);
}

.home-shell {
  min-height: calc(100vh - 72px);
}

.home-hero {
  align-items: center;
  background:
    radial-gradient(circle at 82% 18%, rgba(207, 161, 92, 0.2), transparent 30%),
    linear-gradient(115deg, #10212b, #174e49);
  display: flex;
  min-height: min(86vh, 860px);
  padding: clamp(28px, 7vw, 86px);
}

.home-copy {
  color: white;
  max-width: 760px;
}

.eyebrow {
  color: var(--clay);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.home-copy .eyebrow,
.city-hero .eyebrow {
  color: #ffd483;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(2.65rem, 7vw, 5.5rem);
  line-height: 1;
  margin-bottom: 22px;
}

h2 {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  margin-bottom: 8px;
}

h3 {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
}

h4,
h5,
h6 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
}

p {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}

.home-copy p,
.city-hero p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.12rem;
  max-width: 620px;
}

.hero-brand-lockup,
.city-brand-lockup {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
  width: min(100%, 380px);
}

.city-brand-lockup {
  margin-bottom: 18px;
  width: min(100%, 570px);
}

.hero-brand-lockup-image,
.city-brand-lockup-image {
  display: block;
  height: auto;
  width: 100%;
}

.primary-link,
button {
  background: linear-gradient(135deg, var(--green), var(--blue));
  border: 0;
  border-radius: 7px;
  box-shadow: 0 16px 40px rgba(23, 78, 73, 0.22);
  color: white;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-ui);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  justify-content: center;
  padding: 14px 18px;
  text-decoration: none;
}

.hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.hero-note {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.94rem;
  font-weight: 700;
}

.hero-highlights,
.city-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.hero-highlights span,
.city-highlights span {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: white;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 9px 12px;
}

.hero-proof,
.city-intro-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
}

.hero-proof div,
.city-intro-grid div {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  min-height: 100%;
  padding: 14px;
}

.hero-proof strong,
.city-intro-grid strong {
  color: #ffe0a7;
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.hero-proof span,
.city-intro-grid span {
  color: rgba(255, 255, 255, 0.86);
  display: block;
  font-size: 0.92rem;
  line-height: 1.5;
}

.city-trust-note {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: 18px;
  max-width: 620px;
}

.home-band {
  padding: clamp(36px, 6vw, 80px) clamp(20px, 5vw, 64px);
}

.home-band-alt {
  background: rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(16, 33, 43, 0.05);
  border-bottom: 1px solid rgba(16, 33, 43, 0.05);
}

.band-shell {
  margin: 0 auto;
  max-width: 1240px;
}

.section-heading-wide {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
}

.benefit-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
}

.comparison-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px;
}

.benefit-item {
  border-top: 1px solid rgba(16, 33, 43, 0.12);
  padding-top: 16px;
}

.benefit-item span {
  color: var(--gold);
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.benefit-item h3 {
  font-size: 1.2rem;
  margin: 0 0 10px;
}

.benefit-item p {
  margin-bottom: 0;
}

.comparison-card {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(16, 33, 43, 0.08);
  border-radius: 8px;
  min-height: 100%;
  padding: 20px;
}

.comparison-card h3 {
  font-size: 1.15rem;
  margin: 0 0 8px;
}

.comparison-card strong {
  color: var(--green);
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  margin: 14px 0 6px;
  text-transform: uppercase;
}

.comparison-card p:last-child {
  margin-bottom: 0;
}

.two-column-band {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1fr);
}

.process-list {
  display: grid;
  gap: 18px;
}

.process-item {
  border-bottom: 1px solid rgba(16, 33, 43, 0.08);
  padding-bottom: 18px;
}

.process-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.process-item strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 7px;
}

.city-hero {
  background:
    radial-gradient(circle at 15% 20%, rgba(207, 161, 92, 0.18), transparent 34%),
    linear-gradient(135deg, #10212b, #174e49);
  color: white;
  padding: clamp(28px, 6vw, 72px);
}

.city-hero-inner {
  margin: 0 auto;
  max-width: 1040px;
}

.city-copy {
  text-align: center;
}

.city-copy h1 {
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  line-height: 1.04;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
}

.city-copy > p {
  margin-left: auto;
  margin-right: auto;
  max-width: 760px;
}

.finder-panel {
  background: rgba(255, 252, 248, 0.98);
  border-radius: 8px;
  box-shadow: var(--shadow);
  color: var(--ink);
  margin-top: 28px;
  padding: 24px;
  text-align: left;
}

.finder-heading {
  margin-bottom: 18px;
}

.finder-heading h2 {
  font-size: 1.55rem;
  margin-bottom: 6px;
}

.finder-heading p {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 0;
}

.field-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

label span {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 7px;
}

select {
  appearance: none;
  background: #f8f4ee;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.98rem;
  min-height: 46px;
  padding: 0 12px;
  width: 100%;
}

input[type="search"] {
  background: #f6f7f5;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  font: inherit;
  min-height: 46px;
  padding: 0 12px;
  width: 100%;
}

.advanced {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 16px;
}

summary {
  color: var(--green-deep);
  cursor: pointer;
  font-weight: 700;
}

.option-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.option-grid label {
  align-items: center;
  color: var(--ink);
  display: flex;
  font-size: 0.94rem;
  gap: 8px;
}

.finder-panel button {
  margin-top: 20px;
  width: 100%;
}

.city-copy .city-highlights {
  justify-content: center;
}

.city-copy .city-intro-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.city-copy .city-trust-note {
  margin-left: auto;
  margin-right: auto;
}

.results-section {
  margin: 0 auto;
  max-width: 1240px;
  padding: clamp(28px, 6vw, 72px) clamp(20px, 5vw, 64px);
}

.results-note {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 20px;
  max-width: 760px;
}

.section-heading {
  align-items: end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 24px;
}

.section-heading.compact {
  margin-bottom: 14px;
}

.section-heading p {
  margin-bottom: 0;
}

.results-list {
  display: grid;
  gap: 18px;
}

.restaurant-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  grid-template-columns: 220px minmax(0, 1fr) 210px;
  overflow: hidden;
  padding: 18px;
}

.restaurant-card img {
  aspect-ratio: 4 / 3;
  border-radius: 7px;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.card-body h3 {
  font-size: 1.38rem;
  margin: 0 0 8px;
}

.result-title-link {
  color: var(--ink);
  text-decoration: none;
}

.result-title-link:hover,
.result-title-link:focus-visible {
  color: var(--green);
  text-decoration: underline;
}

.result-kicker {
  color: var(--green);
  font-size: 0.76rem;
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.meta {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.92rem;
  gap: 8px;
  margin-bottom: 10px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.tag {
  background: #edf2ef;
  border-radius: 999px;
  color: var(--green-deep);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 9px;
}

.review-callout {
  border-left: 2px solid rgba(23, 78, 73, 0.18);
  margin-top: 14px;
  padding-left: 14px;
}

.review-callout strong {
  color: var(--green);
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.review-callout p {
  margin-bottom: 0;
}

.result-actions {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-width: 160px;
}

.result-actions a {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--green-deep);
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  padding: 10px 12px;
  text-align: center;
  text-decoration: none;
}

.result-actions svg {
  fill: currentColor;
  flex: 0 0 17px;
  height: 17px;
  width: 17px;
}

.result-actions a:first-child {
  background: #edf5f2;
  border-color: #d5e6df;
}

.show-more-results {
  display: flex;
  margin: 24px auto 0;
  min-width: 210px;
}

.empty-state {
  background: white;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 28px;
}

.admin-shell {
  margin: 0 auto;
  max-width: 1180px;
  padding: clamp(28px, 6vw, 72px) clamp(20px, 5vw, 64px);
}

.admin-heading {
  margin-bottom: 28px;
  max-width: 760px;
}

.admin-heading h1 {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
}

.admin-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(320px, 0.85fr) minmax(320px, 1fr);
}

.admin-panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
}

.admin-panel h2 {
  font-size: 1.35rem;
}

.range-field {
  display: block;
  margin-top: 20px;
}

.range-field span {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

input[type="range"] {
  accent-color: var(--green);
  width: 100%;
}

.admin-actions {
  margin-top: 22px;
}

.admin-result {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 14px;
  grid-template-columns: 28px minmax(0, 1fr) 54px;
  padding: 14px 0;
}

.admin-result:first-child {
  padding-top: 0;
}

.admin-result:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.admin-result span {
  align-items: center;
  background: #eef3f1;
  border-radius: 999px;
  color: var(--green-deep);
  display: inline-flex;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.admin-result p {
  font-size: 0.9rem;
  margin-bottom: 0;
}

.admin-result b {
  color: var(--green);
  font-size: 1.25rem;
  text-align: right;
}

.management-toolbar {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(280px, 1fr) 190px 150px;
  margin-bottom: 20px;
  padding: 18px;
}

.restaurant-table-wrap {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
}

.restaurant-table {
  display: grid;
}

.restaurant-row {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, 1.3fr) minmax(130px, 0.8fr) minmax(140px, 0.8fr) 70px minmax(150px, 0.9fr) 160px;
  padding: 14px 0;
}

.restaurant-row-head {
  border-top: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding-top: 0;
  text-transform: uppercase;
}

.restaurant-row p {
  font-size: 0.88rem;
  margin-bottom: 0;
}

.status-pill {
  background: #eef3f1;
  border-radius: 999px;
  color: var(--green-deep);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 700;
  justify-content: center;
  padding: 7px 9px;
  text-transform: capitalize;
}

.status-pill.replace-before-production,
.status-pill.replace_before_production {
  background: #fff3df;
  color: #7a4c09;
}

.status-pill.blocked {
  background: #ffe8e1;
  color: #8a321c;
}

.status-pill.needs-review {
  background: #fff3df;
  color: #7a4c09;
}

.status-pill.near-ready {
  background: #e9f5ed;
  color: var(--green-deep);
}

.candidate-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.candidate-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 20px;
}

.candidate-topline {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.priority-badge {
  align-items: center;
  background: var(--green);
  border-radius: 999px;
  color: white;
  display: inline-flex;
  font-weight: 700;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.candidate-card h2 {
  font-size: 1.35rem;
  margin-bottom: 8px;
}

.candidate-checklist {
  border-top: 1px solid var(--line);
  margin-top: auto;
  padding-top: 14px;
}

.candidate-checklist ul {
  color: var(--muted);
  margin: 12px 0 0;
  padding-left: 18px;
}

.candidate-checklist li {
  margin-bottom: 6px;
}

.source-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 14px;
}

.source-note a {
  color: var(--green-deep);
  font-weight: 700;
}

.candidate-promote-link {
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--green-deep);
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  margin-top: 14px;
  padding: 10px 12px;
  text-decoration: none;
}

.checklist-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checklist-grid label {
  align-items: center;
  background: #f6f7f5;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  gap: 8px;
  padding: 12px;
}

.record-preview {
  background: #f6f7f5;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0;
  max-height: 520px;
  overflow: auto;
  padding: 16px;
}

.record-preview code {
  font-size: 0.86rem;
  white-space: pre;
}

.field-stack {
  display: grid;
  gap: 14px;
}

.visit-review-fields {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.visit-review-fields legend {
  padding: 0 8px;
  color: var(--ink);
  font-weight: 700;
}

.field-stack label {
  display: block;
}

.field-stack textarea,
.field-stack input,
.field-stack select {
  background: #f6f7f5;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  font: inherit;
  margin-top: 7px;
  padding: 10px 12px;
  width: 100%;
}

.narrow-panel {
  margin: 0 auto;
  max-width: 560px;
}

.verification-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 150px;
}

.inline-link {
  margin-top: 10px;
  max-width: 110px;
}

.compact-form {
  margin-top: 12px;
}

.hours-grid {
  display: grid;
  gap: 10px;
}

.hours-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 140px 120px minmax(0, 1fr) minmax(0, 1fr);
}

.hours-toggle {
  align-items: center;
  display: flex;
  gap: 8px;
}

.hours-toggle span {
  margin-bottom: 0;
}

.setup-status {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.setup-status strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.setup-ok {
  background: #edf7ef;
  border-color: #cfe3d4;
}

.setup-warn {
  background: #fff8ea;
  border-color: #ecd8a8;
}

.detail-shell {
  margin: 0 auto;
  max-width: 1180px;
  padding: clamp(28px, 6vw, 72px) clamp(20px, 5vw, 64px);
}

.breadcrumbs {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.86rem;
  gap: 8px;
  margin-bottom: 24px;
}

.breadcrumbs a {
  color: var(--green-deep);
  font-weight: 700;
  margin-left: 0;
  text-decoration: none;
}

.detail-hero {
  align-items: center;
  display: grid;
  gap: clamp(24px, 5vw, 52px);
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1fr);
  margin-bottom: 28px;
}

.detail-hero img {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.restaurant-image-fallback {
  background: linear-gradient(135deg, #f7f1e8, #e8efe9);
  object-fit: contain !important;
  padding: clamp(18px, 5vw, 54px);
}

.verification-date {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.detail-hero h1 {
  font-size: clamp(2.4rem, 6vw, 5rem);
}

.detail-meta {
  margin-bottom: 14px;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.detail-actions a {
  background: linear-gradient(135deg, var(--green), var(--blue));
  border-radius: 7px;
  color: white;
  font-weight: 700;
  padding: 11px 14px;
  text-decoration: none;
}

.restaurant-actions {
  margin-top: 22px;
}

.restaurant-actions a {
  background: white;
  color: var(--green-deep);
}

.restaurant-actions a:first-child {
  background: #edf5f2;
  border-color: #d5e6df;
}

.detail-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1.15fr 1fr 1fr;
}

.detail-panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
}

.restaurant-seo-page .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.restaurant-story { grid-column: 1 / -1; }
.restaurant-story > p, .restaurant-story-sources { max-width: 78ch; margin-left: auto; margin-right: auto; }
.restaurant-story p + p { margin-top: 1.2em; }
.restaurant-story-sources { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border, #d8dedd); font-size: .85rem; }
.restaurant-story-sources > span { font-weight: 700; }
.restaurant-story-sources ul { padding-left: 1.2em; }
.restaurant-story-sources small { display: block; color: var(--muted, #667177); }
@media (max-width: 760px) {
  .restaurant-seo-page .detail-grid { grid-template-columns: 1fr; }
}

.detail-panel h2 {
  font-size: 1.25rem;
}

.detail-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.detail-list div {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.detail-list div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.detail-list dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.detail-list dd {
  margin: 4px 0 0;
}

.detail-panel h3 {
  font-size: 1rem;
  margin: 22px 0 8px;
}

.restaurant-hours,
.menu-highlights {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 36px;
}

.restaurant-hours > p:not(.eyebrow),
.menu-highlights > p:not(.eyebrow) {
  max-width: 760px;
}

.hours-grid {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 20px 0 12px;
  overflow: hidden;
}

.hours-grid div {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 13px 16px;
}

.hours-grid div:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.hours-grid div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.hours-grid dt {
  color: var(--green-deep);
  font-weight: 700;
}

.hours-grid dd {
  margin: 0;
  text-align: right;
}

.hours-note {
  color: var(--muted);
  font-size: 0.82rem;
}

.menu-highlights ul {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 20px 0 14px;
  padding: 0;
}

.menu-highlights li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--green-deep);
  font-weight: 700;
  padding: 14px 16px;
}

.related-restaurants {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 36px;
}

.context-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.context-links a {
  background: #edf2ef;
  border: 1px solid #d5e6df;
  border-radius: 999px;
  color: var(--green-deep);
  font-size: 0.86rem;
  font-weight: 700;
  margin: 0;
  padding: 9px 13px;
  text-decoration: none;
}

.restaurant-faq {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 36px;
}

.faq-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.faq-list details {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
}

.faq-list summary {
  color: var(--green-deep);
}

.faq-list p {
  margin: 12px 0 0;
}

.restaurant-correction-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 13px 18px;
  border: 2px solid var(--green-deep);
  border-radius: 8px;
  background: var(--green-deep);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 20px rgb(23 78 73 / 18%);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.restaurant-correction-cta:hover {
  background: #0f3d39;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgb(23 78 73 / 24%);
}

.restaurant-correction-cta:focus-visible {
  outline: 3px solid #cfa15c;
  outline-offset: 3px;
}

.directory-shell {
  margin: 0 auto;
  max-width: 1240px;
  padding: clamp(36px, 7vw, 86px) clamp(20px, 5vw, 64px);
}

.directory-heading {
  max-width: 850px;
}

.directory-heading h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
}

.directory-heading > p:not(.eyebrow) {
  font-size: 1.08rem;
  max-width: 760px;
}

.directory-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 36px;
}

.directory-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.directory-image-link {
  display: block;
}

.directory-card img {
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  width: 100%;
}

.directory-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}

.directory-card h2 {
  font-size: 1.25rem;
}

.directory-card h2 a,
.text-link {
  color: var(--green-deep);
}

.directory-card .text-link {
  font-weight: 700;
  margin-top: auto;
}

.guide-inclusion-reason {
  border-left: 3px solid var(--gold);
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 4px;
  padding-left: 12px;
}

.guide-inclusion-reason strong {
  color: var(--ink);
}

.guide-stats {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 34px;
}

.guide-stats div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.guide-stats strong,
.guide-stats span {
  display: block;
}

.guide-stats strong {
  color: var(--green-deep);
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: 1.65rem;
}

.guide-stats span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 4px;
  text-transform: uppercase;
}

.guide-insights,
.guide-groups,
.guide-comparison,
.guide-directory,
.guide-method,
.related-guides {
  border-top: 1px solid var(--line);
  margin-top: 42px;
  padding-top: 34px;
}

.guide-insights ul {
  display: grid;
  gap: 10px;
  max-width: 850px;
  padding-left: 22px;
}

.guide-group-grid,
.related-guide-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 20px;
}

.guide-group-grid article,
.related-guide-grid > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
}

.guide-group-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.guide-group-grid li {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}

.guide-group-grid li:first-child {
  border-top: 0;
}

.guide-group-grid a,
.related-guide-grid a {
  color: var(--green-deep);
  font-weight: 700;
  text-decoration: none;
}

.guide-group-grid span,
.related-guide-grid span {
  color: var(--muted);
  display: block;
  font-size: 0.8rem;
  margin-top: 3px;
}

.guide-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 20px;
  overflow-x: auto;
}

.guide-table-wrap table {
  border-collapse: collapse;
  min-width: 780px;
  width: 100%;
}

.guide-table-wrap th,
.guide-table-wrap td {
  border-bottom: 1px solid var(--line);
  padding: 13px 14px;
  text-align: left;
  vertical-align: top;
}

.guide-table-wrap thead th {
  background: var(--green-deep);
  color: white;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.guide-table-wrap tbody tr:last-child th,
.guide-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

.guide-table-wrap tbody th a {
  color: var(--green-deep);
}

.guide-method {
  max-width: 850px;
}

.related-guide-grid a {
  border-top: 1px solid var(--line);
  display: block;
  padding: 10px 0;
}

.related-guide-grid h3 + a {
  border-top: 0;
}

.directory-categories {
  border-top: 1px solid var(--line);
  margin-top: 34px;
  padding-top: 28px;
}

.category-link-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.category-link-grid a {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px;
  text-decoration: none;
}

.category-link-grid strong {
  color: var(--green-deep);
}

.category-link-grid span {
  color: var(--muted);
  font-size: 0.82rem;
}

.editorial-note {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 36px;
  padding: 24px;
}

.visit-reviews {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 36px;
}

.visit-reviews-intro {
  max-width: 720px;
}

.visit-review-list {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.visit-review-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  text-decoration: none;
}

.visit-review-card strong {
  color: var(--green-deep);
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  line-height: 1.4;
}

.visit-review-card > span:last-child {
  color: var(--muted);
  font-size: 0.82rem;
}

.visit-review-source {
  color: var(--clay);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.related-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.related-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  text-decoration: none;
}

.related-card strong {
  color: var(--green-deep);
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
}

.related-card span {
  color: var(--muted);
  font-size: 0.88rem;
}

.related-card small {
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.45;
  margin-top: 4px;
}

.editorial-shell {
  margin: 0 auto;
  max-width: 1120px;
  padding: clamp(40px, 8vw, 96px) clamp(20px, 5vw, 64px);
}

.editorial-heading {
  max-width: 820px;
}

.editorial-heading h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
}

.editorial-heading > p:last-child {
  font-size: 1.12rem;
}

.editorial-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 36px;
}

.detail-empty {
  margin: 0 auto;
  max-width: 680px;
}

.metric-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 20px;
}

.metric-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.metric-card span {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.metric-card strong {
  color: var(--green);
  font-size: 2rem;
}

.analytics-grid {
  margin-bottom: 20px;
}

.analytics-list {
  display: grid;
  gap: 10px;
}

.analytics-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-bottom: 10px;
}

.analytics-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.analytics-row strong {
  color: var(--green);
}

.analytics-row small {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 3px;
}

.analytics-events-wrap {
  margin-top: 20px;
}

.event-log {
  display: grid;
}

.event-row {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1fr);
  padding: 14px 0;
}

.event-row:first-child {
  border-top: 0;
}

.event-row p {
  font-size: 0.88rem;
  margin-bottom: 0;
}

.event-row code {
  background: #f6f7f5;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: block;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
  padding: 10px;
}

@media (max-width: 860px) {
  .city-hero-inner,
  .restaurant-card,
  .section-heading-wide,
  .benefit-grid,
  .two-column-band,
  .hero-proof,
  .city-intro-grid,
  .admin-grid,
  .management-toolbar,
  .candidate-grid,
  .detail-hero,
  .detail-grid,
  .metric-grid,
  .event-row {
    grid-template-columns: 1fr;
  }

  .related-grid,
  .visit-review-list,
  .editorial-grid,
  .directory-grid,
  .category-link-grid,
  .guide-stats,
  .guide-group-grid,
  .related-guide-grid,
  .menu-highlights ul {
    grid-template-columns: 1fr;
  }

  .hours-grid {
    grid-template-columns: 1fr;
  }

  .hours-grid div:nth-child(odd) {
    border-right: 0;
  }

  .hours-grid div:nth-last-child(2) {
    border-bottom: 1px solid var(--line);
  }

  .checklist-grid {
    grid-template-columns: 1fr;
  }

  .restaurant-table {
    gap: 14px;
  }

  .restaurant-row,
  .restaurant-row-head {
    align-items: start;
    border: 1px solid var(--line);
    border-radius: 8px;
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .restaurant-row-head {
    display: none;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
  }

  .result-actions {
    min-width: 0;
  }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .footer-links {
    justify-content: start;
  }
}

@media (max-width: 540px) {
  .field-grid,
  .option-grid {
    grid-template-columns: 1fr;
  }

  .site-header {
    height: auto;
    min-height: 64px;
    padding-bottom: 14px;
    padding-top: 14px;
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }

  .site-header.public-header {
    align-items: center;
    flex-direction: column;
    gap: 4px;
    min-height: 64px;
    padding: 8px 10px;
  }

  .public-nav {
    flex: 1;
    gap: 0;
    justify-content: space-between;
    width: 100%;
  }

  .public-nav a {
    font-size: 0.78rem;
    line-height: 1.2;
    padding: 8px 5px;
    text-align: center;
  }

  h1 {
    font-size: 2.65rem;
  }

  .home-hero,
  .city-hero,
  .results-section,
  .detail-shell {
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero-actions,
  .hero-highlights,
  .city-highlights {
    align-items: start;
    flex-direction: column;
  }

  .hero-brand-lockup,
  .city-brand-lockup {
    width: min(58vw, 210px);
  }

  .city-brand-lockup {
    width: min(88vw, 316px);
  }

  .desktop-headline-break {
    display: none;
  }

  .city-copy h1 {
    font-size: 2.05rem;
    line-height: 1;
    margin-bottom: 18px;
  }

  .restaurant-card {
    padding: 0;
  }

  .restaurant-card img {
    border-radius: 0;
  }

  .card-body,
  .result-actions {
    padding: 0 16px 16px;
  }

  .home-band {
    padding-left: 18px;
    padding-right: 18px;
  }

  .site-footer {
    gap: 18px;
  }

  .footer-links {
    gap: 10px 18px;
    grid-template-columns: repeat(2, max-content);
  }
}
/* Our Story: editorial layout and occasion explorer. */
.story-shell { max-width: 1200px; margin: auto; padding: 0 clamp(22px, 5vw, 64px); }
.story-page .eyebrow { color: #8a482f; font-size: .72rem; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; }
.story-shell h1, .story-shell h2, .story-shell h3 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; letter-spacing: -0.015em; }
.story-shell h1 { font-size: clamp(3rem, 6.7vw, 5.5rem); line-height: 1.04; margin: 22px 0; color: #174e49; }
.story-shell h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); line-height: 1.15; margin: 14px 0 24px; }
.story-shell h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.3; margin: 20px 0 16px; }
.story-shell p { line-height: 1.8; }
.story-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 42px; align-items: center; padding: 70px 0 76px; }
.story-hero .story-lead { font-size: 1.25rem; line-height: 1.65; color: #174e49; }
.story-hero p:not(.eyebrow):not(.story-lead) { color: #52615f; }
.story-art svg { display: block; width: 100%; height: auto; }
.story-art-note { display: block; text-align: center; color: #667261; font-size: .8rem; }
.story-link { display: inline-flex; gap: 16px; color: #174e49; font-weight: 700; text-underline-offset: 5px; padding: 12px 0; }
.story-section { padding: 68px 0; border-top: 1px solid #d6d9cb; scroll-margin-top: 120px; }
.story-timeline { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 42px; }
.story-timeline article { border-top: 3px solid #b96a4e; padding-top: 22px; position: relative; }
.story-timeline article::before { content: ''; position: absolute; top: -7px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: #b96a4e; }
.story-number { color: #43665b; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.story-timeline p { color: #52615f; }
.story-mission { display: grid; grid-template-columns: .35fr 1fr; gap: 35px; background: #174e49; color: #fffaf0; padding: clamp(28px, 5vw, 64px); border-radius: 4px 70px 4px 4px; margin: 20px 0 68px; }
.story-mission .eyebrow { color: #e7be81; }
.story-star { font-size: clamp(5rem, 13vw, 10rem); color: #cfa15c; line-height: 1.2; }
.story-mission p { max-width: 630px; }
.story-mission-close { font-weight: 700; color: #e7be81; border-top: 1px solid #5e8275; padding-top: 20px; }
.story-gap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; border-top: 0; padding-top: 0; }
.story-equation { background: #e7ece1; border: 1px solid #d0d9c9; border-radius: 16px; text-align: center; padding: 32px 22px; color: #174e49; }
.story-equation div { background: #fffdf6; padding: 18px; border-radius: 7px; }
.story-equation div > span { display: block; font-size: 2rem; }
.story-equation strong { display: block; font-size: 1.05rem; }
.story-equation p { margin: 8px 0 0; font-size: .8rem; }
.story-equation > b { display: block; font-size: 1.8rem; padding: 5px; font-weight: 400; }
.story-equation .story-equation-result { font-size: .95rem; font-weight: 700; margin: 0; }
.story-explore > p { max-width: 670px; }
.story-choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 20px; }
.story-choices button { box-shadow: none; border: 1px solid #9fad9e; border-radius: 30px; background: transparent; color: #174e49; min-height: 48px; transition: background .18s, color .18s; }
.story-choices button:hover { background: #e0e7da; }
.story-choices button[aria-pressed="true"] { background: #174e49; color: #fff; border-color: #174e49; }
.story-plan { padding: 32px; border: 1px solid #d0d9c9; border-radius: 12px; background: #fffdf7; display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: center; min-height: 240px; }
.story-plan h3 { margin-top: 12px; }.story-plan p { margin-bottom: 0; color: #52615f; }
.story-cta { display: inline-flex; justify-content: center; gap: 20px; align-items: center; background: #174e49; color: #fff; padding: 18px 22px; border-radius: 6px; text-decoration: none; font-size: .9rem; font-weight: 700; line-height: 1.5; }
.story-cta:hover { background: #0f3a37; }
.story-finder-note { font-size: .85rem; }.story-shell a:not(.story-cta) { color: #174e49; }
.story-closing { text-align: center; padding: 65px 0 90px; border-top: 1px solid #d6d9cb; }
.story-closing > p:last-child { font-size: .85rem; margin-top: 24px; }
.story-page :is(a,button):focus-visible { outline: 3px solid #b96a4e; outline-offset: 5px; }
.story-skip { position: fixed; top: -100px; left: 20px; z-index: 100; background: white; color: #174e49; padding: 15px; }.story-skip:focus { top: 10px; }
@media(max-width: 760px) {
 .story-hero, .story-gap { grid-template-columns: 1fr; gap: 28px; }
 .story-hero { padding: 40px 0; }.story-art { max-width: 400px; margin: auto; width: 100%; }
 .story-timeline { grid-template-columns: 1fr; gap: 28px; }.story-section { padding: 42px 0; }
 .story-mission { grid-template-columns: 1fr; gap: 0; margin-bottom: 30px; }.story-star { font-size: 4.5rem; }
 .story-plan { grid-template-columns: 1fr; padding: 24px; gap: 24px; }.story-plan .story-cta { justify-self: start; }
 .story-page .site-footer { grid-template-columns: minmax(0,1fr); }.story-page .footer-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .story-closing { padding: 42px 0 60px; }
}
@media(prefers-reduced-motion: reduce) { .story-choices button { transition: none; } }
.story-mission p { color: #f3eee2; }

/* How it works: interactive editorial explanation. */
.how-page { background: #fbf8f1; }
.how-shell { max-width: 1240px; margin: auto; padding: 0 clamp(22px, 5vw, 64px); }
.how-page .eyebrow { color: #8a482f; font-size: .72rem; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; }
.how-shell h1, .how-shell h2, .how-shell h3 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; letter-spacing: -0.015em; }
.how-shell h1 { color: #174e49; font-size: clamp(3rem, 6.4vw, 5.35rem); line-height: 1.04; margin: 22px 0; }
.how-shell h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); line-height: 1.15; margin: 14px 0 24px; }
.how-shell h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.28; }
.how-shell p, .how-shell li { line-height: 1.75; }
.how-hero { display: grid; grid-template-columns: 1.03fr .97fr; gap: clamp(36px, 6vw, 82px); align-items: center; padding: 70px 0 86px; }
.how-hero-copy > p:not(.eyebrow) { max-width: 680px; color: #52615f; }
.how-hero-copy .how-lead { color: #174e49; font-size: 1.25rem; line-height: 1.6; }
.how-hero-visual { min-height: 520px; border-radius: 80px 8px 8px 8px; background: #174e49; padding: 42px; position: relative; overflow: hidden; display: grid; align-content: center; gap: 32px; }
.how-hero-visual::before { content: ''; position: absolute; width: 330px; height: 330px; border: 1px solid #5e8275; border-radius: 50%; right: -110px; top: -100px; box-shadow: 0 0 0 38px #174e49, 0 0 0 39px #5e8275; }
.how-plan-card, .how-shortlist-card { position: relative; z-index: 2; background: #fffaf0; border-radius: 8px; padding: 22px; box-shadow: 0 16px 40px #092b2866; display: grid; gap: 5px; max-width: 350px; }
.how-plan-card { transform: rotate(-2deg); }
.how-shortlist-card { justify-self: end; transform: rotate(2deg); }
.how-plan-card span, .how-shortlist-card span, .how-live-kicker, .how-preview-label { color: #8a482f; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.how-plan-card strong, .how-shortlist-card strong { color: #174e49; font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; font-size: 1.12rem; }
.how-plan-card small, .how-shortlist-card small { color: #65716e; }
.how-compass { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 116px; height: 116px; border-radius: 50%; background: #b96a4e; padding: 16px; box-shadow: 0 0 0 10px #174e49, 0 0 0 12px #cfa15c; }
.how-compass img { width: 100%; height: 100%; object-fit: contain; }
.how-route { position: absolute; inset: 0; pointer-events: none; }.how-route i { position: absolute; width: 7px; height: 7px; background: #e7be81; border-radius: 50%; }.how-route i:nth-child(1) { left: 19%; top: 48%; }.how-route i:nth-child(2) { left: 76%; top: 41%; }.how-route i:nth-child(3) { left: 35%; top: 73%; }
.how-section { padding: 74px 0; border-top: 1px solid #d6d9cb; scroll-margin-top: 110px; }
.how-section-heading { display: grid; grid-template-columns: 1.35fr .8fr; gap: 50px; align-items: end; margin-bottom: 42px; }.how-section-heading > p { color: #52615f; margin-bottom: 8px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #d3d8cb; border: 1px solid #d3d8cb; }
.how-steps li { background: #fffdf7; padding: 30px; }.how-steps li > span { color: #b96a4e; font-weight: 700; letter-spacing: .12em; }.how-steps h3 { color: #174e49; margin: 40px 0 14px; }.how-steps p { color: #52615f; margin-bottom: 0; font-size: .92rem; }
.how-playground { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 7vw, 90px); align-items: center; background: #e7ece1; margin-inline: calc(clamp(22px, 5vw, 64px) * -1); padding-inline: clamp(22px, 5vw, 64px); border-radius: 4px 70px 4px 4px; }
.how-playground-copy > p:not(.eyebrow) { color: #52615f; }.how-slider-field { margin-top: 30px; }.how-slider-field label { display: flex; justify-content: space-between; gap: 20px; color: #174e49; font-weight: 700; }.how-slider-field output { color: #8a482f; text-align: right; }.how-slider-field input { accent-color: #b96a4e; height: 32px; cursor: pointer; }.how-range-labels { display: flex; justify-content: space-between; color: #68756d; font-size: .72rem; }
.how-live-card { background: #174e49; color: #fffaf0; padding: clamp(28px, 4vw, 48px); border-radius: 8px; box-shadow: 20px 20px 0 #cfa15c; min-height: 390px; display: flex; flex-direction: column; justify-content: center; }.how-live-kicker { color: #e7be81; }.how-live-card h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 18px 0; }.how-live-card p { color: #f1e9dc; }.how-sample-chips { display: flex; flex-wrap: wrap; gap: 8px; }.how-sample-chips span { border: 1px solid #6f9687; border-radius: 30px; padding: 7px 12px; font-size: .78rem; }.how-live-divider { height: 1px; background: #50776b; margin: 28px 0 10px; }.how-live-card a { color: #e7be81; font-weight: 700; text-underline-offset: 5px; }
.how-data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.how-data-card { background: #fffdf7; border: 1px solid #d0d9c9; padding: clamp(26px, 4vw, 42px); }.how-data-required { background: #174e49; color: #fffaf0; }.how-data-card > span { color: #9b5f42; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.how-data-required > span { color: #e7be81; }.how-data-card h3 { margin: 16px 0 24px; }.how-data-card ul { list-style: none; padding: 0; margin: 0; }.how-data-card li { padding: 10px 0 10px 28px; border-top: 1px solid #dce1d7; position: relative; font-size: .9rem; }.how-data-required li { border-color: #50776b; }.how-data-card li::before { content: '✓'; position: absolute; left: 2px; color: #b96a4e; font-weight: 700; }.how-data-required li::before { color: #e7be81; }.how-card-note { color: #52615f; font-size: .82rem; margin: 24px 0 0; }.how-notice { margin-top: 20px; display: flex; gap: 20px; align-items: center; background: #efe8d8; padding: 20px 24px; }.how-notice img { flex: 0 0 48px; }.how-notice p { margin: 0; font-size: .88rem; }.how-notice strong { color: #174e49; }
.how-guide-graphic { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }.how-guide-preview { background: #fff; border: 1px solid #cdd4c6; border-radius: 8px; padding: 34px; box-shadow: 14px 14px 0 #e5ddca; }.how-guide-preview h3 { color: #174e49; font-size: 1.8rem; }.how-preview-meta { color: #8a482f; font-weight: 700; }.how-guide-preview > div { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid #d8ddd2; padding-top: 22px; }.how-guide-preview > div span { border: 1px solid #b9c4b6; border-radius: 4px; padding: 8px 11px; font-size: .72rem; }.how-guide-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.how-guide-points button { background: transparent; color: #174e49; border: 1px solid #aab7aa; border-radius: 30px; box-shadow: none; min-height: 48px; padding: 10px; }.how-guide-points button:hover { background: #e4e9df; }.how-guide-points button.is-active { background: #174e49; color: white; border-color: #174e49; }.how-guide-explainer { grid-column: 1 / -1; padding: 28px 0 0; }.how-guide-explainer > span { color: #8a482f; text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 700; }.how-guide-explainer h3 { margin: 10px 0; }.how-guide-explainer p { color: #52615f; margin-bottom: 0; }
.how-photo-story { margin-inline: calc(clamp(22px, 5vw, 64px) * -1); background: #174e49; color: #fffaf0; padding: clamp(34px, 6vw, 72px) clamp(22px, 5vw, 64px); display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: center; }.how-photo-story .eyebrow { color: #e7be81; }.how-photo-copy p:not(.eyebrow) { color: #f1e9dc; }.how-photo-story .story-link { color: #e7be81; }.how-photo-grid { display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 480px; }.how-photo-grid figure { margin: 0; position: relative; overflow: hidden; }.how-photo-grid figure:first-child { grid-row: 1 / -1; }.how-photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }.how-photo-grid figure:hover img { transform: scale(1.03); }.how-photo-grid figcaption { position: absolute; left: 12px; bottom: 12px; background: #fffaf0e8; color: #174e49; padding: 7px 10px; font-size: .7rem; font-weight: 700; }
.how-trust { display: grid; grid-template-columns: .7fr 1.3fr; gap: 60px; }.how-trust-list details { border-top: 1px solid #cfd5c8; padding: 0; }.how-trust-list details:last-child { border-bottom: 1px solid #cfd5c8; }.how-trust-list summary { list-style: none; cursor: pointer; color: #174e49; font-weight: 700; padding: 22px 44px 22px 0; position: relative; }.how-trust-list summary::-webkit-details-marker { display: none; }.how-trust-list summary::after { content: '+'; position: absolute; right: 8px; font-size: 1.5rem; font-weight: 400; }.how-trust-list details[open] summary::after { content: '−'; }.how-trust-list p { color: #52615f; padding: 0 44px 22px 0; margin: 0; }
.how-closing { text-align: center; padding: 72px 0 92px; border-top: 1px solid #d6d9cb; }.how-closing h2 { font-size: clamp(2.5rem, 5vw, 4.4rem); color: #174e49; }.how-closing > p:last-child { font-size: .84rem; margin-top: 24px; }.how-closing > p:last-child a { color: #174e49; }.how-page :is(a,button,input,summary):focus-visible { outline: 3px solid #b96a4e; outline-offset: 5px; }
@media(max-width: 800px) {
  .how-hero, .how-playground, .how-guide-graphic, .how-photo-story, .how-trust { grid-template-columns: 1fr; }
  .how-section-heading { grid-template-columns: 1fr; gap: 8px; }.how-steps { grid-template-columns: 1fr; }.how-steps h3 { margin-top: 20px; }
  .how-hero { padding: 42px 0 56px; }.how-hero-visual { min-height: 450px; padding: 28px; }.how-compass { width: 92px; height: 92px; padding: 12px; }
  .how-playground { border-radius: 4px 44px 4px 4px; }.how-live-card { min-height: 330px; box-shadow: 10px 10px 0 #cfa15c; }
  .how-data-grid { grid-template-columns: 1fr; }.how-photo-grid { min-height: 430px; }.how-trust { gap: 16px; }.how-page .site-footer { grid-template-columns: minmax(0,1fr); }.how-page .footer-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width: 540px) {
  .how-shell h1 { font-size: clamp(2.55rem, 13vw, 3.5rem); }.how-hero-visual { min-height: 410px; }.how-plan-card, .how-shortlist-card { max-width: 250px; padding: 16px; }.how-plan-card strong, .how-shortlist-card strong { font-size: .95rem; }
  .how-guide-points { grid-template-columns: 1fr; }.how-guide-explainer { grid-column: auto; }.how-photo-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1.15fr .85fr; min-height: 390px; }.how-photo-grid figure:first-child { grid-column: 1 / -1; grid-row: auto; }
  .how-slider-field label { flex-direction: column; gap: 2px; }.how-slider-field output { text-align: left; }.how-notice { align-items: flex-start; }
}
@media(prefers-reduced-motion: reduce) { .how-photo-grid img { transition: none; } }
.site-header.public-header { height: 88px; min-height: 88px; padding: 0 clamp(20px, 5vw, 64px); flex-direction: row; justify-content: space-between; gap: 20px; background: #fbf8f1; border-bottom: 1px solid #d8dccf; box-shadow: 0 3px 20px #173f3606; z-index: 30; }
.public-header .brand { gap: 0; min-width: 0; color: #174e49; }
.public-header .brand-mark { width: 64px; height: 64px; flex-basis: 64px; }
.site-menu { margin-left: auto; }
.site-menu:not([open]) .site-menu-panel { display: none; }
.public-page .site-footer > * { min-width: 0; overflow-wrap: anywhere; }
.site-menu > summary { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; min-width: 112px; padding: 13px 18px; border: 1px solid #bcc9bd; border-radius: 999px; color: #174e49; background: #f5f2e9; font-size: 1rem; font-weight: 700; cursor: pointer; list-style: none; }
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu > summary:hover, .site-menu[open] > summary { background: #174e49; border-color: #174e49; color: #fffaf0; }
.menu-icon { width: 22px; height: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.menu-icon i { display: block; height: 2px; width: 22px; background: currentColor; border-radius: 2px; transition: transform .18s, opacity .18s; }
.site-menu[open] .menu-icon i:first-child { transform: translateY(8px) rotate(45deg); }
.site-menu[open] .menu-icon i:nth-child(2) { opacity: 0; }
.site-menu[open] .menu-icon i:last-child { transform: translateY(-8px) rotate(-45deg); }
.site-menu-panel { position: absolute; top: calc(100% + 12px); right: clamp(20px, 5vw, 64px); width: min(490px, calc(100% - 40px)); padding: 26px; background: #fbf8f1; border: 1px solid #cbd3c5; border-top: 4px solid #cfa15c; border-radius: 18px; box-shadow: 0 20px 65px #163b3633; max-height: calc(100dvh - 112px); overflow-y: auto; overscroll-behavior: contain; }
.public-header .menu-eyebrow { color: #7f492e; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 10px 16px; }
.public-header .public-nav { display: grid; width: 100%; gap: 0; }
.public-header .public-nav a { display: flex; justify-content: space-between; align-items: center; gap: 18px; border-radius: 8px; border-bottom: 1px solid #dce0d2; padding: 17px 12px; margin: 0; color: #174e49; text-align: left; }
.public-header .public-nav a:last-child { border-bottom: 0; }
.public-nav a > span:first-child { min-width: 0; }
.public-nav a strong { display: block; font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; font-size: 1.2rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; }
.public-nav a small { display: block; margin-top: 5px; font-size: .88rem; font-weight: 500; line-height: 1.5; color: #536459; }
.public-header .public-nav a:hover, .public-header .public-nav a[aria-current="page"] { background: #e8edde; }
.menu-link-arrow { font-size: 1.4rem; color: #91612d; flex-shrink: 0; }
.public-header .menu-signoff { border-top: 1px solid #cbd3c5; padding: 18px 10px 0; margin: 12px 0 0; color: #586a5d; font-size: .8rem; line-height: 1.5; }
.public-header :is(a, summary):focus-visible { outline: 3px solid #b96a4e; outline-offset: 4px; }
@media (max-width: 540px) {
 .site-header.public-header { height: 80px; min-height: 80px; padding: 0 16px; gap: 12px; }
 .public-header .brand-mark { width: 54px; height: 54px; flex-basis: 54px; }
 .site-menu > summary { min-width: 48px; padding: 13px; gap: 8px; font-size: .9rem; }
 .site-menu-panel { right: 12px; width: calc(100% - 24px); top: calc(100% + 8px); padding: 20px 14px; max-height: calc(100dvh - 100px); }
 .public-nav a strong { font-size: 1.12rem; }.public-nav a small { font-size: .85rem; }
 .public-header .public-nav a { padding: 16px 10px; }
}
@media (prefers-reduced-motion: reduce) { .menu-icon i { transition: none; } }
.story-mission .eyebrow, .story-mission .story-mission-close { color: #e7be81; }
@media(min-width: 761px) { .story-shell h1 { font-size: clamp(3rem, 5.4vw, 4.7rem); } }

/* Editorial type system: Literata leads; Karla handles every utility role. */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

h2, h3, h4, h5, h6 { line-height: 1.2; }

:is(
  .eyebrow,
  .local-promise,
  .feature-step,
  .visual-caption,
  .result-kicker,
  .visit-review-source,
  .menu-eyebrow,
  .how-live-kicker,
  .how-preview-label,
  .story-number,
  .guide-stats span,
  .detail-list dt
) {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.11em;
}

:is(
  .primary-link,
  button,
  .detail-actions a,
  .restaurant-actions a,
  .story-cta,
  .text-link,
  .context-links a,
  .public-header summary
) {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.015em;
}

:is(label, input, select, textarea, option, summary, nav, table, .tag, .meta, strong, b) {
  font-family: var(--font-ui);
}

.related-card strong,
.guide-illustration-title,
.shortlist-illustration strong,
.story-equation strong,
.guide-inclusion-reason strong,
.public-nav a strong,
.how-plan-card strong,
.how-shortlist-card strong,
.visit-review-card strong,
.guide-stats strong {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.3;
}

/* Editorial articles and The Charlotte Shortlist */
.article-shell, .newsletter-shell { width: min(100% - 32px, 900px); margin: 0 auto; padding: 42px 0 80px; }
.article-shell .breadcrumbs { margin-bottom: 54px; }
.article-header { max-width: 780px; margin-bottom: 42px; }
.article-header h1, .newsletter-hero h1 { font-size: clamp(2.4rem, 7vw, 4.8rem); line-height: 1.04; margin: 12px 0 20px; }
.article-dek, .newsletter-lead { font-size: clamp(1.2rem, 2.5vw, 1.55rem); line-height: 1.5; color: #344c4a; }
.article-byline, .article-card-meta { color: var(--muted, #617078); }
.article-body { max-width: 720px; font-size: 1.12rem; line-height: 1.75; }
.article-body h2 { margin-top: 2.3em; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.article-body h3 { margin-top: 2em; font-size: 1.45rem; }
.article-body blockquote { margin: 32px 0; padding: 8px 0 8px 24px; border-left: 4px solid #cfa15c; color: #344c4a; }
.article-restaurants, .newsletter-callout, .article-author { margin-top: 64px; }
.article-restaurant-grid, .article-index-grid, .newsletter-expectations > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.article-restaurant-card, .article-index-grid article, .newsletter-expectations article { padding: 24px; border: 1px solid #d7d1c7; border-radius: 16px; background: #fff; }
.article-restaurant-card h3, .article-index-grid h3 { margin: 8px 0 12px; }
.article-index { margin: 42px 0 62px; }
.newsletter-callout, .newsletter-hero { padding: clamp(26px, 6vw, 58px); border-radius: 22px; background: #e8edde; }
.newsletter-form { margin-top: 26px; }
.newsletter-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.newsletter-form label { display: grid; gap: 7px; }
.newsletter-form input { min-height: 50px; border: 1px solid #97a49b; border-radius: 9px; padding: 10px 13px; background: #fff; font: inherit; }
.newsletter-form button { margin-top: 12px; min-height: 50px; }
.newsletter-consent, .newsletter-status { font-size: .88rem; line-height: 1.5; }
.newsletter-expectations { margin-top: 64px; }
.newsletter-back { margin-top: 36px; }
.editorial-admin-grid { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.editorial-form { display: grid; gap: 18px; }
.editorial-form label { display: grid; gap: 7px; }
.editorial-form textarea, .editorial-form input, .editorial-form select { width: 100%; }
.editorial-article-list { display: grid; gap: 8px; }
.editorial-article-list button { text-align: left; display: grid; gap: 4px; }
.editorial-article-list span, .field-help { color: #617078; font-size: .88rem; }
@media (max-width: 760px) { .editorial-admin-grid { grid-template-columns: 1fr; } .article-shell, .newsletter-shell { width: min(100% - 24px, 900px); padding-top: 26px; } }
/* Collection guides and their private structured editor. */
.collection-heading { max-width: 820px; margin-bottom: 1.5rem; }
.collection-heading h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.15; }
.collection-guide :is(h1,h2,h3), #collection-preview :is(h1,h2,h3) { text-wrap: balance; word-break: normal; overflow-wrap: normal; hyphens: none; }
.collection-keep-together { white-space: nowrap; }
.collection-guide h2, #collection-preview h2 { font-size: clamp(1.5rem,2.7vw,2.15rem); line-height: 1.22; max-width: 32ch; }
.collection-pick h3 { font-size: clamp(1.25rem,2.2vw,1.65rem); line-height: 1.25; }
.collection-heading p { line-height: 1.7; }
.collection-header-montage { display: grid; grid-template-columns: repeat(var(--header-photo-count,3),minmax(0,1fr)); gap: 6px; margin: 1rem 0 1.5rem; }
.collection-heading .collection-header-montage + p { margin-top: 0; }
.collection-header-montage a { display: block; position: relative; min-width: 0; height: clamp(112px,16vw,180px); overflow: hidden; border-radius: 8px; background: #e2e4dc; }
.collection-header-montage a:focus-visible { outline: 3px solid #174e49; outline-offset: 3px; }
.collection-header-montage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.collection-header-montage span { position: absolute; inset: auto 0 0; padding: 28px 10px 10px; background: linear-gradient(transparent,rgba(0,0,0,.82)); color: #fff; font-size: .82rem; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
@media(max-width:720px) { .collection-header-montage span { padding: 22px 7px 7px; font-size: .7rem; } }
.collection-byline { font-size: .9rem; color: #5d625c; }
.collection-guide section, #collection-preview section { margin: 2rem 0; }
.collection-jumps { display: grid; grid-template-columns: repeat(var(--jump-count,4),minmax(0,1fr)); gap: .6rem; max-width: 820px; padding: 1rem; margin: 1.5rem 0 2rem; border: 1px solid #d6ddd0; border-radius: 14px; background: #e9ede4; }
.collection-jumps-label { grid-column: 1 / -1; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #52615b; margin-bottom: .2rem; }
.collection-jumps a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; min-height: 48px; padding: .75rem .85rem; border: 1px solid #d6ddd0; border-radius: 8px; background: #fffaf0; color: #174e49; font-size: .92rem; font-weight: 600; line-height: 1.25; text-decoration: none; }
.collection-jumps a:hover { background: #174e49; color: #fffaf0; border-color: #174e49; }
.collection-jumps a:focus-visible { outline: 3px solid #b96a4e; outline-offset: 3px; }
.collection-jumps svg { width: 16px; height: 16px; flex-shrink: 0; }
@media(max-width:720px) { .collection-jumps { grid-template-columns: repeat(2,minmax(0,1fr)); padding: .8rem; gap: .5rem; } }
.collection-faqs { max-width: 820px; }
.collection-faqs details { border-bottom: 1px solid #d6ddd0; padding: .9rem 0; }
.collection-faqs summary { cursor: pointer; font-weight: 600; line-height: 1.45; color: #174e49; }
.collection-faqs summary:focus-visible { outline: 3px solid #b96a4e; outline-offset: 4px; }
.collection-faqs details p { line-height: 1.7; margin: .75rem 0 .25rem; }
.collection-picks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; }
.collection-pick { min-width: 0; overflow-wrap: anywhere; border: 1px solid #dddcd4; border-radius: 12px; padding: 1.25rem; }
.collection-pick p, .collection-guidance p, .collection-method p { line-height: 1.75; }
.collection-pick img { max-width: 100%; height: auto; border-radius: 8px; }
.collection-pick figure { margin: 0; }
.collection-photo { margin: 1.25rem 0; max-width: 640px; }
.collection-photo img { display: block; max-width: 100%; width: auto; max-height: 480px; height: auto; border-radius: 8px; }
.collection-photo figcaption { font-size: .88rem; line-height: 1.6; margin-top: .6rem; }
.collection-photo-credit { display: block; color: #5d625c; margin-top: .35rem; }
.collection-video { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #dddcd4; max-width: 640px; }
.collection-video h3, .collection-video h4 { font-size: 1.05rem; margin: 0 0 .5rem; }
.collection-video-credit { font-size: .88rem; color: #5d625c; }
.collection-video-player { aspect-ratio: 16 / 9; min-height: 200px; width: 100%; background: #edf0e7; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; text-align: center; }
.collection-video-player:has(iframe) { padding: 0; }
.collection-video-player button { max-width: 100%; white-space: normal; }
.collection-video-player p { font-size: .85rem; }
.collection-video-player iframe { width: 100%; height: 100%; min-height: 200px; border: 0; border-radius: 8px; }
.collection-table-scroll { overflow-x: auto; }
.collection-table-scroll table { border-collapse: collapse; width: 100%; min-width: 580px; }
.collection-table-scroll th, .collection-table-scroll td { padding: .8rem; border-bottom: 1px solid #dddcd4; text-align: left; vertical-align: top; }
.collection-table-scroll caption { text-align: left; padding-bottom: .75rem; }
.collection-directory { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.collection-directory li { display: flex; flex-direction: column; border-bottom: 1px solid #dddcd4; padding-bottom: .7rem; }
.collection-directory span { font-size: .9rem; }
.collection-map { height: 360px; width: 100%; }
.collection-preview-notice { background: #fff2d0; padding: 1rem; border: 1px solid #8b671c; }
#collection-list { display: grid; gap: .5rem; }
#collection-form fieldset { margin: 1rem 0; border: 1px solid #c6c8be; padding: 1rem; min-width: 0; }
#collection-form label { display: grid; gap: .4rem; margin: .7rem 0; }
#collection-form input, #collection-form textarea, #collection-form select { max-width: 100%; width: 100%; }
#collection-form input[type=checkbox] { width: auto; }
#collection-form .collection-approval { display: flex; align-items: baseline; }
#collection-form .admin-actions { flex-wrap: wrap; }
.collection-guide [id] { scroll-margin-top: 2rem; }
@media(max-width:720px) { .collection-picks, .collection-directory { grid-template-columns: minmax(0,1fr); } }