.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);
}

/* 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-breadcrumb { margin-block: 1.25rem; 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: 2rem 3rem; }
.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 { min-width: 0; padding: 1.25rem; border: 1px solid var(--spi-border); border-radius: var(--luperiq-radius); background: var(--luperiq-surface); box-shadow: var(--spi-shadow); }
.spi-card { border-top: .24rem solid var(--spi-section-accent, var(--luperiq-accent)); }
.spi-card a,
.spi-card__title { display: inline-block; font-size: 1.15rem; font-weight: 800; }
.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-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; }
.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 { transition: transform .18s ease, box-shadow .18s ease; }
.destination-directory .spi-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(7, 45, 57, .16); }
.spi-directory-listing > p,
.spi-directory-listing > section:not(.spi-listing-note) { max-width: 54rem; margin-inline: auto; }
.spi-listing-facts { margin-block: 2rem; }
.spi-listing-facts dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.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-links { margin-block: 2.25rem; }
.spi-listing-links ul { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; padding-left: 1.25rem; }
.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-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; text-decoration: underline; }
.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-claim-grid { grid-template-columns: 1fr; }
}

/* 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;
  }
  .luperiq-ts-layout--header > .luperiq-ts-layout-row:has(.luperiq-ts-block--mega-nav) > .luperiq-ts-layout-col {
    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;
    width: min(22rem, calc(100vw - 2rem));
    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);
  }
}