.spi-guide {
  --spi-border: color-mix(in srgb, var(--luperiq-text) 18%, transparent);
  --spi-muted: color-mix(in srgb, var(--luperiq-surface) 88%, var(--luperiq-primary));
  --spi-shadow: 0 10px 24px color-mix(in srgb, var(--luperiq-text) 10%, transparent);
  width: min(100% - 2rem, var(--luperiq-container));
  margin-inline: auto;
  padding-block: 1rem 4rem;
  color: var(--luperiq-text);
}
.spi-guide .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body:has(.spi-guide) {
  background:
    radial-gradient(circle at 12% 18%, rgba(45,212,191,.10), transparent 24rem),
    linear-gradient(180deg, #f7fcfc 0%, #fffdf7 55%, #f2fbfc 100%);
}

/* Coastal site chrome: the menu belongs inside a visual header, not in a
   stack of anonymous white utility rows. This stylesheet is SPI-only. */
.luperiq-ts-layout--header {
  position: relative !important;
  top: auto !important;
  padding: .45rem 0 1rem;
  color: #fff !important;
  border: 0 !important;
  background:
    linear-gradient(105deg, rgba(3, 38, 55, .97), rgba(6, 91, 103, .78)),
    url('/static/images/spi-coastal-field-guide-hero-v1.png') center 42% / cover !important;
  box-shadow: 0 1.2rem 3rem rgba(3, 38, 55, .18) !important;
}
.luperiq-ts-layout--header .luperiq-ts-layout-row { color: #fff !important; }
.luperiq-ts-layout--header .luperiq-ts-brand-name {
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: -.025em;
  text-shadow: 0 2px 18px rgba(0,0,0,.32);
}
.luperiq-ts-layout--header .luperiq-ts-block--rotating-text { color: #e6f7fb !important; }
.luperiq-ts-layout--header .lq-nav-cgm {
  justify-content: center;
  flex-wrap: wrap;
  gap: .1rem;
  padding: .35rem;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(2, 44, 62, .52);
  box-shadow: 0 .75rem 2rem rgba(0,0,0,.14);
  backdrop-filter: blur(12px);
}
.luperiq-ts-layout--header .lq-nav-cgm-link { color: #fff !important; border-radius: 999px; }
.luperiq-ts-layout--header .lq-nav-cgm-link:hover,
.luperiq-ts-layout--header .lq-nav-cgm-link:focus-visible {
  color: #082f3b !important;
  background: #fde68a;
}

.spi-primary {
  display: flex;
  align-items: center;
  gap: 1rem;
  overflow-x: auto;
  padding-block: .75rem;
  border-bottom: 1px solid var(--spi-border);
}

.spi-primary ul,
.spi-breadcrumb ol {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spi-primary a { white-space: nowrap; }
.spi-primary__home { font-weight: 800; }
.spi-primary [aria-current="page"] { text-decoration-thickness: .18em; }

.spi-context-nav {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
  gap: 1rem;
  margin: .75rem 0 1.35rem;
  padding: .8rem;
  border: 1px solid rgba(8,123,131,.16);
  border-radius: 1.25rem;
  background: rgba(255,255,255,.82);
  box-shadow: 0 .75rem 2rem rgba(7,45,57,.08);
  backdrop-filter: blur(14px);
}
.spi-context-nav__heading { display: grid; align-content: center; gap: .15rem; padding: .35rem .6rem; }
.spi-context-nav__heading span { color: #52727a; font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.spi-context-nav__heading a { min-height: 0; color: #075985; font: 800 1.05rem/1.25 Georgia, 'Times New Roman', serif; text-decoration: none; }
.spi-context-nav__heading small { color: #52727a; font-size: .75rem; font-weight: 700; }
.spi-context-nav__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  align-items: stretch;
  gap: .45rem;
  min-width: 0;
  padding: .25rem .2rem;
}
.spi-context-nav__links a {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 2.6rem;
  padding: .62rem .85rem;
  border: 1px solid rgba(8,123,131,.14);
  border-radius: 999px;
  color: #0d626b;
  background: #f5fdfd;
  font-size: .85rem;
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.spi-context-nav__links a:hover { color: #073b4c; border-color: #2dd4bf; background: #e6fffb; }
.spi-context-nav__links a[aria-current="page"],
.spi-context-nav__links a[aria-current="page"]:is(:visited,:hover,:focus-visible) { color: #fff; border-color: #087b83; background: linear-gradient(135deg, #087b83, #0f766e); box-shadow: 0 .45rem 1rem rgba(8,123,131,.2); text-decoration: none; }
.spi-context-nav__links a[aria-current="page"]:focus-visible { outline: 3px solid #dc8b00; outline-offset: 3px; }
.spi-context-nav__links .spi-context-nav__all { color: #075985; border-style: dashed; background: #fff; }

.spi-breadcrumb { margin-block: .6rem .8rem; color: #365e67; font-size: .9rem; }
.spi-breadcrumb li + li::before { content: "/"; margin-right: .9rem; color: var(--luperiq-text); opacity: .7; }

.spi-stage {
  margin-block: 0 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--luperiq-accent);
  border-radius: var(--luperiq-radius);
  background: var(--spi-muted);
}

.spi-stage p { margin: .25rem 0 0; }

.spi-hero {
  max-width: 58rem;
  padding-block: clamp(2rem, 6vw, 5rem);
}

.spi-eyebrow,
.spi-card__kind {
  display: block;
  margin: 0 0 .5rem;
  color: var(--luperiq-link);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.spi-hero h1 { margin-block: 0 .75rem; font-size: clamp(2.25rem, 7vw, 5rem); line-height: 1.02; }
.spi-deck { max-width: 46rem; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.45; }
.spi-hero > p:last-child { max-width: 44rem; }

.spi-section { margin-block: 1.5rem 2rem; }
.spi-section > h2 { margin-block: 0 .8rem; }
.spi-guide[data-spi-section] > .spi-hero { max-width: none; padding: clamp(1.25rem, 3vw, 2.25rem); margin-block: .5rem 1.25rem; }
.spi-guide[data-spi-section] > .spi-hero h1 { max-width: 28ch; font-size: clamp(2rem, 4.2vw, 3.6rem); }
.spi-guide[data-spi-section] > .spi-hero > p { margin-block: .5rem 0; }
.spi-guide[data-spi-section] > .spi-hero .spi-eyebrow { margin-block: 0 .4rem; }
.spi-section-body { padding-block: .25rem; }
.spi-section-body > :first-child { margin-top: .5rem; }
.spi-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; padding: 0; list-style: none; }
.spi-card {
  position: relative;
  min-width: 0;
  padding: 1.35rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--spi-section-accent, #2dd4bf) 28%, #cbd5e1);
  border-top: .28rem solid var(--spi-section-accent, var(--luperiq-accent));
  border-radius: max(1rem, var(--luperiq-radius));
  background: linear-gradient(145deg, #fff 0%, color-mix(in srgb, #fff 91%, var(--spi-section-accent, #2dd4bf)) 100%);
  box-shadow: 0 9px 26px rgba(7,45,57,.09);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.spi-card::before {
  content: "→";
  position: absolute;
  right: 1rem;
  bottom: .75rem;
  color: var(--spi-section-heading, #0f766e);
  font-size: 1.1rem;
  font-weight: 900;
  opacity: .55;
}
.spi-card:hover,
.spi-card:has(> a:focus-visible) {
  transform: translateY(-4px);
  border-color: var(--spi-section-accent, #2dd4bf);
  box-shadow: 0 18px 40px rgba(7,45,57,.16);
}
.spi-card a,
.spi-card__title { display: inline-block; color: var(--spi-section-heading, #075985); font-size: 1.15rem; font-weight: 850; line-height: 1.35; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-decoration-thickness: .09em; text-underline-offset: .18em; }
.spi-card > a:first-child::after { content: ""; position: absolute; inset: 0; }
.spi-card p:last-child { margin-bottom: 0; }

.spi-claims { padding-left: 1.25rem; }
.spi-claims li { max-width: 52rem; margin-bottom: 1rem; }
.spi-source-line { font-size: .9rem; }

.spi-topic-page { max-width: 76rem; }
.spi-topic-hero {
  position: relative;
  max-width: none;
  margin: .75rem 0 2rem;
  padding: clamp(2rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 4.5rem);
  overflow: hidden;
  border-radius: clamp(1rem, 2vw, 2rem);
  color: #fff;
  background:
    linear-gradient(115deg, rgba(7, 45, 57, .94), rgba(7, 79, 94, .72)),
    url('/static/images/spi-coastal-field-guide-hero-v1.png') center 54% / cover;
  box-shadow: 0 1.5rem 4rem rgba(7, 45, 57, .22);
}
.spi-topic-hero .spi-eyebrow { color: #b9f0e5; }
.spi-topic-hero h1 { max-width: 15ch; font-family: Georgia, 'Times New Roman', serif; }
.spi-topic-hero .spi-deck { max-width: 42rem; color: rgba(255,255,255,.92); }
.spi-curated-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 22rem));
  justify-content: center;
  gap: 1rem;
  margin: -1rem 0 2rem;
}
.spi-curated-photo {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--spi-border);
  border-radius: clamp(1rem, 2vw, 1.4rem);
  background: var(--luperiq-surface);
  box-shadow: var(--spi-shadow);
}
.spi-curated-photo a,
.spi-curated-photo picture,
.spi-curated-photo img { display: block; }
.spi-guide .spi-curated-photo a,
.spi-guide .spi-curated-photo picture { width: 100%; }
.spi-guide .spi-curated-photo a { display: block; min-height: 0; }
.spi-curated-photo a:focus-visible { outline: 3px solid #075985; outline-offset: -3px; }
.spi-curated-photo img {
  width: 100%;
  height: clamp(12rem, 30vw, 22rem);
  object-fit: contain;
  background: var(--spi-muted);
}
.spi-curated-photo figcaption { display: grid; gap: .3rem; padding: .8rem 1rem 1rem; line-height: 1.45; }
.spi-curated-photo figcaption small { color: color-mix(in srgb, var(--luperiq-text) 72%, transparent); }
.spi-fish-species-index > .spi-topic-hero {
  margin-block: .5rem 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.spi-fish-species-index > .spi-fish-directory { margin-top: 1rem; }
.spi-fish-siblings { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: .5rem 1rem; }
.spi-fish-siblings a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  max-width: 100%;
  padding: .5rem .85rem;
  border: 1px solid var(--spi-border);
  border-radius: var(--luperiq-radius);
  color: var(--spi-section-heading, #164e63);
  background: var(--luperiq-surface);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.spi-fish-siblings a[aria-current="page"] { color: #fff; background: #164e63; border-color: #164e63; }
.spi-fish-siblings a:focus-visible { outline: 3px solid #164e63; outline-offset: 3px; }
.spi-fish-introduction {
  padding: 1rem 1.25rem;
  border: 1px solid var(--spi-border);
  border-radius: var(--luperiq-radius);
  background: var(--luperiq-surface);
}
.spi-fish-introduction > summary {
  min-height: 2.75rem;
  padding-block: .6rem;
  color: var(--spi-section-heading, #164e63);
  font-weight: 750;
  cursor: pointer;
}
.spi-fish-introduction > summary:focus-visible {
  outline: 3px solid var(--spi-section-heading, #164e63);
  outline-offset: 3px;
}
.spi-fish-card-rules {
  margin-top: .75rem;
  padding-top: .85rem;
  border-top: 1px solid var(--spi-border);
}
.spi-fish-habitat { margin-block: .65rem 0; }
.spi-fish-card-rules > span { font-size: .8rem; font-weight: 750; color: var(--spi-section-heading, #164e63); }
.spi-fish-card-rules p { margin-block: .45rem .65rem; font-size: .95rem; line-height: 1.55; }
.spi-fish-card-rules small { display: block; font-size: .8rem; line-height: 1.5; }
.spi-fish-directory .spi-card { display: flex; flex-direction: column; }
.spi-fish-directory .spi-card[hidden], .spi-fishing-finder [hidden] { display: none !important; }
.spi-fishing-finder {
  margin-block: 1rem;
  padding: clamp(.85rem, 2vw, 1.25rem);
  border: 1px solid var(--spi-border);
  border-radius: var(--luperiq-radius);
  background: var(--luperiq-surface);
  color: var(--luperiq-text);
}
.spi-fishing-finder h2 { margin: 0 0 .65rem; font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--spi-section-heading, #164e63); }
.spi-fishing-finder label { display: grid; gap: .3rem; min-width: 0; font-size: .85rem; font-weight: 700; }
.spi-fishing-finder input, .spi-fishing-finder select {
  width: 100%; min-width: 0; min-height: 2.75rem;
  padding: .55rem; border: 1px solid var(--spi-border); border-radius: var(--luperiq-radius);
  background: var(--luperiq-background, #fff); color: var(--luperiq-text, #102a2e); font: inherit; font-size: 1rem;
}
.spi-fishing-finder input[type="date"] { appearance: none; }
.spi-fishing-finder__quick { display: grid; grid-template-columns: 1.1fr 1fr auto; align-items: end; gap: .65rem; }
.spi-fishing-finder [data-finder-controls] > summary { padding-block: .65rem; min-height: 2.75rem; cursor: pointer; font-weight: 700; color: var(--spi-section-heading, #164e63); }
.spi-fishing-finder [data-finder-controls][open] > summary { margin-bottom: .5rem; }
.spi-fishing-finder button {
  min-height: 2.75rem; padding: .55rem .85rem; border: 1px solid var(--spi-section-heading, #164e63);
  border-radius: var(--luperiq-radius); font: inherit; font-weight: 700; cursor: pointer;
  background: var(--spi-section-heading, #164e63); color: #fff;
}
.spi-fishing-finder button:disabled { opacity: .65; cursor: wait; }
.spi-fishing-finder [data-finder-reset] { color: var(--spi-section-heading, #164e63); background: transparent; }
.spi-fishing-finder__plan { margin-top: .65rem; border-block: 1px solid var(--spi-border); }
.spi-fishing-finder__plan > summary { padding-block: .7rem; min-height: 2.75rem; cursor: pointer; font-weight: 700; color: var(--spi-section-heading, #164e63); }
.spi-fishing-finder__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-block: .4rem .85rem; }
.spi-fishing-finder__actions { display: flex; gap: .65rem; flex-wrap: wrap; }
.spi-fishing-finder p { margin-block: .65rem; line-height: 1.5; }
.spi-fishing-finder__scope, .spi-fishing-finder__reference { font-size: .8rem; }
.spi-fishing-finder [data-finder-count] { font-size: .85rem; font-weight: 700; }
.spi-fishing-finder__wind-tide { margin-block: .9rem; padding: .85rem; border: 1px solid var(--spi-border); border-radius: var(--luperiq-radius); background: var(--spi-surface-muted, #f6fbfc); }
.spi-fishing-finder__wind-tide h3 { margin: 0 0 .4rem; font-size: 1rem; color: var(--spi-section-heading, #164e63); }
.spi-fishing-finder__wind-tide [data-wind-tide-reading] { font-weight: 700; }
.spi-fishing-finder__wind-tide p:empty { display: none; }
.spi-fishing-finder__spark { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.1rem; line-height: 1; letter-spacing: .02em; overflow-x: auto; white-space: nowrap; color: var(--spi-section-heading, #164e63); }
.spi-fishing-finder__conditions { margin-block: 1rem; padding: .85rem; border: 1px solid var(--spi-border); border-radius: var(--luperiq-radius); }
.spi-fishing-finder__conditions h3 { margin: 0; font-size: 1.05rem; }
.spi-fishing-finder__weather, .spi-fishing-finder [data-finder-tides] { white-space: pre-line; font-size: .9rem; }
.spi-fishing-finder :is(input, select, button, summary, a):focus-visible { outline: 3px solid var(--spi-section-heading, #164e63); outline-offset: 3px; }
@media (max-width: 540px) {
  .spi-fish-species-index > .spi-topic-hero .spi-deck { margin-top: .5rem; font-size: .95rem; }
  .spi-fish-species-index > .spi-topic-hero h1 { font-size: 1.65rem; }
  .spi-fishing-finder__quick { grid-template-columns: minmax(0, 1fr) auto; }
  .spi-fishing-finder__quick label:first-child { grid-column: 1 / -1; }
  .spi-fishing-finder__fields { grid-template-columns: minmax(0, 1fr); }
}
.spi-fishing-rules {
  max-width: 54rem;
  margin: 2rem auto;
  color: var(--luperiq-text);
  line-height: 1.65;
}
.spi-fishing-rules h2 { margin-block: .25rem .75rem; font-family: Georgia, 'Times New Roman', serif; }
.spi-fishing-rules h3 { font-size: 1.05rem; }
.spi-fishing-rules__profile {
  margin-block: .75rem;
  border: 1px solid var(--spi-border);
  border-radius: var(--luperiq-radius);
  background: var(--luperiq-surface);
}
.spi-fishing-rules__profile > summary {
  min-height: 2.75rem;
  padding: .85rem 1rem;
  font-weight: 750;
  color: var(--spi-section-heading, #164e63);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.spi-fishing-rules__profile > summary:focus-visible { outline: 3px solid var(--spi-section-heading, #164e63); outline-offset: 3px; }
.spi-fishing-rules__profile > div { padding: 0 1rem 1rem; }
.spi-fishing-rules__limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .75rem; }
.spi-fishing-rules__limits > div { padding: .75rem; border: 1px solid var(--spi-border); border-radius: var(--luperiq-radius); }
.spi-fishing-rules__limits dt { font-size: .85rem; font-weight: 700; }
.spi-fishing-rules__limits dd { margin: .25rem 0 0; font-weight: 750; overflow-wrap: anywhere; }
.spi-fishing-rules__limits small { display: block; font-weight: 400; line-height: 1.5; }
.spi-fishing-rules__sources { padding-left: 1.25rem; }
.spi-fishing-rules__sources li { margin-block: .6rem; overflow-wrap: anywhere; }
.spi-guide .spi-fishing-rules__sources a { display: block; overflow-wrap: anywhere; }
.spi-fishing-rules__sources span { white-space: nowrap; }
.spi-fishing-rules__caution { padding: .75rem; border-left: 3px solid var(--spi-section-heading, #164e63); }
.spi-article {
  max-width: 54rem;
  margin-inline: auto;
  font-size: 1.05rem;
  line-height: 1.75;
}
.spi-article h2 { margin-top: 2.5rem; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.55rem, 3vw, 2.25rem); }
.spi-article h2 { color: var(--spi-section-heading, #075985); }
.spi-article li { margin-block: .65rem; }
.spi-article table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
/* Two-column comparisons should show both answers on phones. Wider data
   tables retain their existing horizontal scroll instead of losing columns. */
.spi-article table:has(thead tr > th:nth-child(2):last-child) { display: table; table-layout: fixed; overflow-wrap: anywhere; }
.spi-article table:has(thead tr > th:nth-child(2):last-child) th:first-child { width: 35%; }
.spi-article table:has(thead tr > th:nth-child(2):last-child) :is(th,td) { white-space: normal; }
.spi-article table:has(thead tr > th:nth-child(2):last-child) :is(th,td) a { display: inline; min-height: 0; }
.spi-article th,
.spi-article td { padding: .65rem .75rem; border: 1px solid var(--spi-border); text-align: left; vertical-align: top; }
.spi-visitor-note {
  max-width: 54rem;
  margin: 3rem auto 0;
  padding: 1rem 1.25rem;
  border-radius: var(--luperiq-radius);
  background: color-mix(in srgb, var(--luperiq-surface) 90%, var(--luperiq-accent));
}

.destination-directory .spi-directory { max-width: 76rem; margin-inline: auto; }
.destination-directory .spi-hero {
  position: relative;
  max-width: none;
  margin: .75rem 0 2rem;
  padding: clamp(2rem, 7vw, 5rem) clamp(1.25rem, 5vw, 4.5rem);
  overflow: hidden;
  border-radius: clamp(1rem, 2vw, 2rem);
  color: #fff;
  background:
    linear-gradient(115deg, rgba(7, 45, 57, .95), rgba(8, 91, 103, .74)),
    url('/static/images/spi-coastal-field-guide-hero-v1.png') center 54% / cover;
  box-shadow: 0 1.5rem 4rem rgba(7, 45, 57, .2);
}

/* Section identities make the guide feel authored as a family of places, not
   hundreds of copies of one generic page. */
html[data-liq-page-prefixes~="/beaches"] { --spi-section-accent: #22d3ee; --spi-section-heading: #075985; }
html[data-liq-page-prefixes~="/beaches"] .spi-topic-hero { background: linear-gradient(115deg, rgba(3, 65, 91, .95), rgba(8, 145, 178, .62)), url('/static/images/spi-coastal-field-guide-hero-v1.png') center 58% / cover; }
html[data-liq-page-prefixes~="/nature"] { --spi-section-accent: #34d399; --spi-section-heading: #116149; }
html[data-liq-page-prefixes~="/nature"] .spi-topic-hero { background: linear-gradient(115deg, rgba(6, 62, 52, .96), rgba(16, 120, 96, .65)), url('/static/images/spi-coastal-field-guide-hero-v1.png') center 48% / cover; }
html[data-liq-page-prefixes~="/fishing"] { --spi-section-accent: #fbbf24; --spi-section-heading: #164e63; }
html[data-liq-page-prefixes~="/fishing"] .spi-topic-hero { background: linear-gradient(115deg, rgba(8, 47, 73, .97), rgba(15, 94, 115, .62)), url('/static/images/spi-coastal-field-guide-hero-v1.png') center 65% / cover; }
html[data-liq-page-prefixes~="/food-drink"] { --spi-section-accent: #fb923c; --spi-section-heading: #9a3412; }
html[data-liq-page-prefixes~="/places-to-stay"] { --spi-section-accent: #a78bfa; --spi-section-heading: #5b21b6; }
html[data-liq-page-prefixes~="/events"] { --spi-section-accent: #f472b6; --spi-section-heading: #9d174d; }
html[data-liq-page-prefixes~="/directory"] { --spi-section-accent: #2dd4bf; --spi-section-heading: #0f766e; }
.destination-directory .spi-hero .spi-eyebrow { color: #b9f0e5; }
.destination-directory .spi-hero h1 {
  max-width: 16ch;
  margin: 0 0 .75rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.25rem, 7vw, 5rem);
  line-height: 1.02;
}
.destination-directory .spi-hero p { max-width: 48rem; font-size: 1.08rem; line-height: 1.65; }
.destination-directory .spi-card-grid { margin-block: 1.25rem 3rem; }
.destination-directory .spi-card p { color: #365e67; line-height: 1.6; }
.spi-directory-listing { max-width: 74rem; margin-inline: auto; }
.spi-listing-hero {
  max-width: none;
  margin-block: .5rem 1.5rem;
  padding: clamp(1.5rem, 4vw, 3.25rem);
  border: 1px solid color-mix(in srgb, var(--spi-section-accent, #2dd4bf) 34%, transparent);
  border-radius: clamp(1rem, 2vw, 1.5rem);
  background: linear-gradient(128deg, #073b4c, #087b83 72%, #0f766e);
  box-shadow: 0 1.2rem 2.6rem rgba(7,45,57,.16);
}
.spi-listing-hero .spi-eyebrow { color: #b9f0e5; }
.spi-listing-hero h1 { max-width: 18ch; color: #fff; font-family: Georgia, 'Times New Roman', serif; }
.spi-listing-hero > p { max-width: 52rem; color: rgba(255,255,255,.92); }
.spi-listing-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.35rem; }
.spi-guide .spi-listing-action {
  justify-content: center;
  min-height: 44px;
  padding: .6rem .9rem;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  color: #073b4c;
  background: #fff;
  box-shadow: 0 .35rem .9rem rgba(0,0,0,.12);
  font-size: .92rem;
  font-weight: 800;
  text-decoration: none;
}
.spi-guide .spi-listing-action:hover { color: #073b4c; background: #fde68a; }
.spi-guide .spi-listing-action:focus-visible { outline: 3px solid #fde68a; outline-offset: 3px; }
.spi-listing-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .85fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.spi-listing-layout__main > :first-child,
.spi-listing-layout__aside > :first-child { margin-top: 0; }
.spi-listing-layout__aside { display: grid; gap: 1.5rem; min-width: 0; }
.spi-listing-layout__aside .liq-place-map { margin: 0; }
.spi-listing-facts { margin-block: 0 2rem; }
.spi-listing-facts dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; }
.spi-listing-facts dl div { padding: 1rem 1.15rem; border: 1px solid var(--spi-border); border-radius: var(--luperiq-radius); background: var(--luperiq-surface); }
.spi-listing-facts dt { margin-bottom: .35rem; color: color-mix(in srgb, var(--luperiq-text) 72%, transparent); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.spi-listing-facts dd { margin: 0; font-size: 1.05rem; }
.spi-listing-enrichment { margin-block: 2rem; }
.spi-listing-enrichment > p { color: color-mix(in srgb, var(--luperiq-text) 76%, transparent); }
.spi-enrichment-group { margin-top: .65rem; border: 1px solid var(--spi-border); border-radius: var(--luperiq-radius); background: var(--luperiq-surface); }
.spi-enrichment-group summary { min-height: 44px; padding: .8rem 1rem; cursor: pointer; font-weight: 800; }
.spi-enrichment-group summary span { margin-left: .4rem; color: color-mix(in srgb, var(--luperiq-text) 62%, transparent); font-size: .8rem; font-weight: 600; }
.spi-enrichment-group ul { margin: 0; padding: 0 1.25rem .4rem 2.5rem; }
.spi-enrichment-group li { padding: .7rem 0; }
.spi-enrichment-group li + li { border-top: 1px solid var(--spi-border); }
.spi-enrichment-group li > p { margin: 0; }
.spi-enrichment-source { margin-top: .35rem !important; color: color-mix(in srgb, var(--luperiq-text) 68%, transparent); font-size: .82rem; }
.spi-enrichment-source a { overflow-wrap: anywhere; }
.spi-enrichment-source > span { margin-left: .4rem; white-space: nowrap; }
.spi-listing-links { margin-block: 2.25rem; }
.spi-listing-links ul { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; padding-left: 1.25rem; }
.spi-listing-links li { min-width: 0; max-width: 100%; }
.spi-directory-listing .spi-external-link { display: inline-block; vertical-align: top; max-width: 100%; overflow-wrap: anywhere; }
.spi-listing-sources { padding: 1rem 1.1rem; border: 1px solid var(--spi-border); border-radius: var(--luperiq-radius); background: var(--luperiq-surface); }
.spi-listing-sources summary { min-height: 44px; cursor: pointer; font-weight: 800; }
.spi-listing-sources summary span { display: block; margin-top: .15rem; color: color-mix(in srgb, var(--luperiq-text) 65%, transparent); font-size: .8rem; font-weight: 600; }
.spi-listing-sources p { color: color-mix(in srgb, var(--luperiq-text) 76%, transparent); font-size: .9rem; }
.spi-listing-sources ul { display: grid; gap: .65rem; margin: .8rem 0 0; padding-left: 1.15rem; }
.spi-listing-sources li { overflow-wrap: anywhere; }
.spi-listing-sources li > span { display: block; margin-top: .1rem; color: color-mix(in srgb, var(--luperiq-text) 66%, transparent); font-size: .82rem; }
.spi-listing-directions { margin-block: 1.5rem; }
.spi-directory-listing :is(.spi-external-link,[data-listing-action="maps"],[data-listing-action="phone"]):focus-visible { outline: 3px solid #dc8b00; outline-offset: 3px; }
.spi-listing-note { max-width: 54rem; margin: 3rem auto 0; padding: 1.1rem 1.25rem; border-radius: var(--luperiq-radius); background: color-mix(in srgb, var(--luperiq-surface) 90%, var(--luperiq-accent)); }
.spi-listing-note p { margin: .25rem 0; }

/* SPI operator roster: native Rust/Tera markup rendered inside the same Theme
   Studio shell. Keep controls compact enough for 76 rows without weakening
   the clear distinction between directory promotion and the demo itself. */
.spi-business-sites { max-width: 78rem; }
.spi-business-sites > header {
  margin: .75rem 0 1.5rem;
  padding: clamp(1rem, 3vw, 1.6rem);
  border: 1px solid var(--spi-border);
  border-radius: max(1rem, var(--luperiq-radius));
  background: color-mix(in srgb, var(--luperiq-surface) 92%, var(--luperiq-accent));
}
.spi-business-sites > header > :first-child { margin-top: 0; }
.spi-business-sites > header > [role="status"] {
  padding: .65rem .8rem;
  border-left: .25rem solid var(--luperiq-accent);
  background: var(--luperiq-surface);
  font-weight: 700;
}
.spi-business-sites > header > label {
  display: grid;
  gap: .35rem;
  max-width: 30rem;
  margin-top: 1rem;
  font-weight: 800;
}
.spi-business-sites input[type="search"],
.spi-business-sites select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: .55rem .7rem;
  border: 1px solid var(--spi-border);
  border-radius: max(.35rem, calc(var(--luperiq-radius) / 2));
  background: var(--luperiq-surface);
  color: var(--luperiq-text);
  font: inherit;
}
.spi-business-sites :is(input, select, button, a):focus-visible { outline: 3px solid var(--luperiq-link-focus); outline-offset: 3px; }
.spi-business-site-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1rem; }
.spi-business-site-row {
  display: grid;
  align-content: start;
  gap: .8rem;
  min-width: 0;
  padding: 1.1rem;
  border: 1px solid var(--spi-border);
  border-top: .3rem solid var(--spi-section-accent, var(--luperiq-accent));
  border-radius: max(1rem, var(--luperiq-radius));
  background: var(--luperiq-surface);
  box-shadow: 0 .5rem 1.4rem color-mix(in srgb, var(--luperiq-text) 7%, transparent);
}
.spi-business-site-row[hidden] { display: none !important; }
.spi-business-site-row h2,
.spi-business-site-row p { margin: 0; }
.spi-business-site-row h2 { color: var(--spi-section-heading, var(--luperiq-primary)); font-size: 1.15rem; }
.spi-business-site-row code { overflow-wrap: anywhere; word-break: break-word; color: color-mix(in srgb, var(--luperiq-text) 76%, transparent); }
.spi-business-site-link { min-width: 0; color: color-mix(in srgb, var(--luperiq-text) 76%, transparent); overflow-wrap: anywhere; }
.spi-business-site-row form { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem .8rem; min-width: 0; }
.spi-business-site-row form label { display: grid; flex: 1 1 14rem; gap: .35rem; min-width: 0; font-weight: 700; }
.spi-business-site-row form label:has(input[type="checkbox"]) { display: flex; align-items: center; min-height: 44px; gap: .6rem; cursor: pointer; }
.spi-business-site-row input[type="checkbox"] { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--luperiq-primary); }
.spi-business-site-row button {
  min-height: 44px;
  padding: .6rem .9rem;
  border: 0;
  border-radius: max(.35rem, calc(var(--luperiq-radius) / 2));
  background: var(--luperiq-primary);
  color: var(--luperiq-on-primary, #fff);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.spi-business-site-row button:hover { filter: brightness(1.08); }
.spi-business-site-actions { display: flex; flex-wrap: wrap; gap: .25rem .75rem; min-width: 0; font-size: .92rem; }
.spi-business-site-actions a { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 54rem) {
  .spi-business-site-list { grid-template-columns: 1fr; }
  .spi-business-site-row { padding: 1rem; }
  .spi-business-site-row form { align-items: stretch; }
  .spi-business-site-row form label,
  .spi-business-site-row button { flex-basis: 100%; }
}

.spi-research {
  padding: clamp(1rem, 3vw, 1.75rem);
  border-left: .35rem solid var(--luperiq-accent);
  border-radius: var(--luperiq-radius);
  background: var(--spi-muted);
}

.spi-research dl { display: grid; gap: .75rem; }
.spi-research dl div { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 1rem; }
.spi-research dt { font-weight: 800; }
.spi-research dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }

.spi-guide a { display: inline-flex; align-items: center; min-height: 44px; color: #087b83; text-decoration: underline; text-decoration-color: rgba(8,123,131,.38); text-underline-offset: .16em; }
.spi-guide a:visited { color: #087b83; }
.spi-guide a:hover { color: #075985; text-decoration-color: currentColor; }
.spi-guide a:focus-visible { outline: 3px solid var(--luperiq-link-focus); outline-offset: 3px; }

.spi-claim-panel { max-width: 54rem; margin-block: 0 2rem; }
.spi-claim-form { display: grid; gap: 1rem; }
.spi-claim-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.spi-claim-form label { display: grid; gap: .4rem; font-weight: 700; }
.spi-claim-form label span { color: color-mix(in srgb, var(--luperiq-text) 68%, transparent); font-size: .9em; font-weight: 500; }
.spi-claim-form input,
.spi-claim-form select,
.spi-claim-form textarea {
  width: 100%;
  min-height: 2.75rem;
  box-sizing: border-box;
  padding: .65rem .75rem;
  border: 1px solid var(--spi-border);
  border-radius: max(.35rem, calc(var(--luperiq-radius) / 2));
  background: var(--luperiq-surface);
  color: var(--luperiq-text);
  font: inherit;
}
.spi-claim-form textarea { min-height: 9rem; resize: vertical; }
.spi-claim-form input:focus-visible,
.spi-claim-form select:focus-visible,
.spi-claim-form textarea:focus-visible { outline: 3px solid var(--luperiq-link-focus); outline-offset: 2px; }
.spi-claim-form button { justify-self: start; min-height: 2.75rem; padding: .7rem 1.1rem; border: 0; border-radius: var(--luperiq-radius); background: var(--luperiq-primary); color: var(--luperiq-on-primary, #fff); font: inherit; font-weight: 800; cursor: pointer; }
.spi-claim-form button:hover { filter: brightness(1.08); }
.spi-claim-form button:focus-visible { outline: 3px solid var(--luperiq-link-focus); outline-offset: 3px; }
.spi-claim-help { color: color-mix(in srgb, var(--luperiq-text) 75%, transparent); font-size: .95rem; }

@media (max-width: 54rem) {
  .spi-guide { width: min(100% - 1.25rem, var(--luperiq-container)); }
  .spi-primary { align-items: flex-start; flex-direction: column; }
  .spi-primary ul { width: 100%; overflow-x: auto; padding-bottom: .35rem; }
  .spi-research dl div { grid-template-columns: 1fr; gap: .15rem; }
  .spi-hero { padding-block: 2.25rem; }
  .spi-listing-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .spi-listing-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .spi-guide .spi-listing-action { width: 100%; box-sizing: border-box; }
  .spi-claim-grid { grid-template-columns: 1fr; }
  .spi-context-nav { grid-template-columns: 1fr; gap: .35rem; }
  .spi-context-nav__heading { display: flex; align-items: baseline; justify-content: space-between; }
}

/* The SPI Theme Studio header contains a rotating desktop tagline row. Once
   that block is hidden at tablet widths, remove its empty row too; otherwise
   visitors see a large blank band above the guide. */
@media (max-width: 61.25rem) {
  .luperiq-ts-layout--header > .luperiq-ts-layout-row:has(.luperiq-ts-block--rotating-text) {
    display: none !important;
  }
  .luperiq-ts-layout--header { min-height: 5.25rem; padding: .25rem 0 !important; }
  .luperiq-ts-layout--header > .luperiq-ts-layout-row:first-child {
    min-height: 4.75rem;
    padding: .65rem 4.75rem .65rem 1rem !important;
  }
  .luperiq-ts-layout--header > .luperiq-ts-layout-row:first-child > .luperiq-ts-layout-col:last-child {
    display: none !important;
  }
  .luperiq-ts-layout--header > .luperiq-ts-layout-row:has(.luperiq-ts-block--mega-nav) {
    position: absolute !important;
    top: 1rem;
    right: 1rem;
    display: block !important;
    width: auto !important;
    padding: 0 !important;
  }
  body .luperiq-ts-layout--header > .luperiq-ts-layout-row:has(.luperiq-ts-block--mega-nav) > .luperiq-ts-layout-col:first-child {
    display: block !important;
    width: auto !important;
  }
  .luperiq-ts-layout--header .lq-nav-cgm { display: none !important; }
  .luperiq-ts-layout--header .lq-nav-cgm-hamburger {
    display: grid !important;
    place-items: center;
    width: 3rem;
    height: 3rem;
    color: #fff;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 999px;
    background: rgba(2, 44, 62, .68);
  }
  .luperiq-ts-layout--header .lq-nav-cgm-mobile.is-open {
    position: absolute;
    top: calc(100% + .65rem);
    right: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: .4rem;
    width: min(22rem, calc(100vw - 2rem));
    max-height: min(72vh, 34rem);
    overflow-y: auto;
    padding: .75rem;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 1rem;
    color: #fff;
    background: #073b4c;
    box-shadow: 0 1.5rem 3rem rgba(0,0,0,.28);
  }
  .luperiq-ts-layout--header .lq-nav-cgm-mobile.is-open .lq-nav-cgm-mobile-link {
    display: flex !important;
    width: 100%;
    box-sizing: border-box;
  }
}
.spi-listing-measurement{margin-block:2rem;padding:1rem;border:1px solid #c8d8dc;border-radius:1rem;background:#f2f8f8;color:#163b46}
.spi-listing-measurement label{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;font-weight:600}
.spi-listing-measurement input[type="checkbox"]{flex:none;min-width:1.25rem;min-height:1.25rem;margin-top:.2rem;accent-color:#006574}
.spi-listing-measurement p{font-size:.9rem;margin:.65rem 0 0;line-height:1.6}

/* Owner-supplied, reviewer-approved opening hours on a directory listing. A
   two-column day/time list stays readable at phone width without a table. */
.spi-listing-hours { margin-block: 2rem; }
.spi-listing-hours > p { margin: .35rem 0 1rem; color: color-mix(in srgb, var(--luperiq-text) 72%, transparent); }
.spi-listing-hours dl { display: grid; gap: 0; max-width: 26rem; border: 1px solid var(--spi-border); border-radius: var(--luperiq-radius); background: var(--luperiq-surface); overflow: hidden; }
.spi-listing-hours dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding: .6rem 1.05rem; }
.spi-listing-hours dl div + div { border-top: 1px solid var(--spi-border); }
.spi-listing-hours dt { font-weight: 700; }
.spi-listing-hours dd { margin: 0; font-variant-numeric: tabular-nums; }

/* The Starbase guide's operator-editable next-event notice. Renders above
   the article body (see editorial.rs's leading-slot convention), so it
   needs real visual weight rather than reading as a stray paragraph. */
.spi-starbase-notice {
  max-width: 54rem;
  margin: 1.5rem auto;
  padding: 1rem 1.25rem;
  border-radius: var(--luperiq-radius);
  border: 1px solid var(--spi-border);
  font-size: 1.02rem;
}
.spi-starbase-notice p { margin: 0; }
.spi-starbase-notice--active {
  border-color: color-mix(in srgb, var(--luperiq-accent) 55%, var(--spi-border));
  background: color-mix(in srgb, var(--luperiq-surface) 82%, var(--luperiq-accent));
}
.spi-starbase-notice--none {
  background: var(--spi-muted);
  color: color-mix(in srgb, var(--luperiq-text) 82%, transparent);
}

/* Business-owned logos are served locally and retain their original aspect ratio. */
.spi-business-logo { display: block; width: 9rem; height: 6rem; object-fit: contain; padding: .65rem; background: #fff; border: 1px solid var(--spi-border); border-radius: var(--luperiq-radius); }
.spi-listing-hero > .spi-business-logo { float: right; width: 10rem; height: 8rem; margin: 0 0 1rem 1.5rem; }
.destination-directory .spi-listing-hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); max-width: 24ch; }
.spi-card .spi-business-logo { margin-bottom: 1rem; }
@media (max-width: 600px) {
  .spi-listing-hero > .spi-business-logo { float: none; width: 7rem; height: 5.5rem; margin: 0 0 1rem; }
}

.spi-business-logo--dark { background: #123d46; }

/* Directory marks sit above the business name, including Theme Studio flex links. */
.destination-directory .spi-card > a {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .85rem;
  width: 100%;
}
.destination-directory .spi-card .spi-business-logo {
  flex: none;
  box-sizing: border-box;
  width: 100%;
  height: 8rem;
  margin: 0;
}
.destination-directory .spi-card .spi-business-name { display: block; }
.spi-listing-hero > .spi-business-logo { float: none; margin: 0 0 1.25rem; }

/* R100: Directory filter bar & local business badges */
.spi-directory-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 1.5rem 0 2rem;
  padding: 0.9rem 1.25rem;
  background: var(--luperiq-surface, #f8fafc);
  border: 1px solid var(--spi-border, #e2e8f0);
  border-radius: var(--luperiq-radius, 8px);
}
.spi-filter-label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--luperiq-text, #1e293b);
  margin-right: 0.25rem;
}
.spi-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  background: #ffffff;
  border: 1px solid var(--spi-border, #cbd5e1);
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--luperiq-text, #334155);
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease-in-out;
}
.spi-filter-chip:hover {
  border-color: var(--luperiq-accent, #0ea5e9);
  background: #f0fdf4;
}
.spi-filter-chip:has(input:checked) {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  font-weight: 600;
}
.spi-filter-chip input {
  cursor: pointer;
  accent-color: #0284c7;
}

/* Badges on listing cards & detail pages */
.spi-filter-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  margin-top: 0.5rem;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.spi-badge-resident {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.spi-badge-independent {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}
.spi-badge-location {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}


/* ── R107: Paid Showcase Partner Listing (Daisy's Deli & Pantry) ── */
.spi-showcase-hero {
  background: linear-gradient(135deg, #073847 0%, #0d5c6d 55%, #0f766e 100%);
  border: 1px solid rgba(45, 212, 191, 0.45);
  border-radius: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  margin-block: 0.5rem 1.75rem;
  box-shadow: 0 1.2rem 2.6rem rgba(7, 45, 57, 0.22);
  color: #fff;
}
.spi-showcase-hero__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.spi-showcase-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.spi-showcase-badge--partner {
  background: #f59e0b;
  color: #111827;
}
.spi-showcase-badge--category {
  background: rgba(255, 255, 255, 0.16);
  color: #b9f0e5;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.spi-showcase-brand-row {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-bottom: 0.85rem;
}
.spi-showcase-logo {
  width: clamp(64px, 12vw, 120px);
  height: clamp(64px, 12vw, 120px);
  min-width: clamp(64px, 12vw, 120px);
  border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  object-fit: contain;
  flex-shrink: 0;
}
.spi-showcase-titles {
  flex: 1;
  min-width: 0;
}
.spi-showcase-titles h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.6rem, 4vw, 2.85rem);
  line-height: 1.08;
  margin: 0 0 0.3rem;
  color: #fff;
}
.spi-showcase-tagline {
  font-size: clamp(0.9rem, 2vw, 1.15rem);
  font-weight: 700;
  color: #5eead4;
  margin: 0;
  line-height: 1.3;
}
.spi-showcase-bio {
  font-size: clamp(0.88rem, 1.5vw, 0.98rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 1.15rem;
  max-width: 58rem;
}
.spi-showcase-banner {
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 4px solid #f59e0b;
  border-radius: 0.65rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
  line-height: 1.48;
  color: #fef3c7;
}
.spi-showcase-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.spi-showcase-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.15s ease;
}
.spi-showcase-action--order {
  background: #f59e0b;
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}
.spi-showcase-action--order:hover {
  background: #fbbf24;
  transform: translateY(-1px);
}
.spi-showcase-action--map {
  background: #fff;
  color: #073b4c !important;
}
.spi-showcase-action--map:hover {
  background: #f1f5f9;
  transform: translateY(-1px);
}
.spi-showcase-action--social {
  background: rgba(255, 255, 255, 0.15);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.spi-showcase-action--social:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

/* ── Gallery ── */
.spi-showcase-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.spi-showcase-photo-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.spi-showcase-photo-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}
.spi-showcase-photo-card figcaption {
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
  background: #f8fafc;
}

/* ── Menu Section ── */
.spi-menu-group {
  margin-bottom: 3rem;
}
.spi-menu-group__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.6rem;
  color: #0f172a;
  border-bottom: 2px solid #0e7490;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}
.spi-menu-group__notice {
  font-size: 0.9rem;
  color: #0d9488;
  background: #f0fdfa;
  border: 1px solid #ccfbf1;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  line-height: 1.45;
}
.spi-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1.25rem;
}
.spi-menu-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.spi-menu-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.spi-menu-card__img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  background: #f1f5f9;
  display: block;
}
.spi-menu-card__body {
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.spi-menu-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.spi-menu-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
}
.spi-menu-card__price {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0e7490;
  white-space: nowrap;
}
.spi-menu-card__desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #475569;
  margin: 0 0 0.6rem;
  flex-grow: 1;
}
.spi-menu-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
}
.spi-menu-tag {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}
.spi-menu-tag--vegan {
  background: #dcfce7;
  color: #166534;
}
.spi-menu-tag--veg {
  background: #fef9c3;
  color: #854d0e;
}
.spi-menu-tag--gf {
  background: #e0e7ff;
  color: #3730a3;
}
.spi-menu-tag--fairtrade {
  background: #fdf2f8;
  color: #9d174d;
}

@media (max-width: 640px) {
  .spi-showcase-hero {
    padding: 1.15rem 1rem;
    margin-block: 0.25rem 1.25rem;
    border-radius: 14px;
  }
  .spi-showcase-hero__eyebrow {
    margin-bottom: 0.75rem;
    gap: 0.35rem;
    justify-content: flex-start;
  }
  .spi-showcase-badge {
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
  }
  .spi-showcase-brand-row {
    gap: 0.85rem;
    margin-bottom: 0.75rem;
  }
  .spi-showcase-logo {
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-width: 2px;
  }
  .spi-showcase-titles h1 {
    font-size: 1.5rem;
    line-height: 1.1;
    margin-bottom: 0.2rem;
  }
  .spi-showcase-tagline {
    font-size: 0.85rem;
  }
  .spi-showcase-bio {
    font-size: 0.85rem;
    line-height: 1.45;
    margin-bottom: 0.85rem;
  }
  .spi-showcase-banner {
    padding: 0.65rem 0.8rem;
    font-size: 0.82rem;
    line-height: 1.42;
    margin-bottom: 0.85rem;
  }
  .spi-showcase-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
  }
  .spi-showcase-action {
    width: 100%;
    min-height: 38px;
    padding: 0.5rem 0.4rem;
    font-size: 0.8rem;
    box-sizing: border-box;
  }
  .spi-showcase-action--order {
    grid-column: 1 / -1;
    min-height: 44px;
    font-size: 0.95rem;
    font-weight: 800;
  }
}