:root {
  --ink: #0f1a22;
  --ink-soft: #2c3d4a;
  --sea: #1a5c62;
  --sea-light: #2a7a82;
  --foam: #f6f3ee;
  --sand: #e8dfd2;
  --accent: #6b4c7a;
  --max-width: 58rem;
  /* Surfaces & chrome (themes override palette above; these follow) */
  --surface: #ffffff;
  --header-bg: color-mix(in srgb, var(--foam) 92%, transparent);
  --border-sea-muted: color-mix(in srgb, var(--sea) 12%, transparent);
  --pill-bg: color-mix(in srgb, var(--sea) 10%, transparent);
  --pill-bg-hover: color-mix(in srgb, var(--sea) 20%, transparent);
  --cta-shadow: color-mix(in srgb, var(--sea) 35%, transparent);
  --cta-shadow-hover: color-mix(in srgb, var(--sea) 40%, transparent);
  --hero-grad-1: #fff9ed;
  --hero-grad-2: #ffefd2;
  --hero-grad-3: #ffd78a;
  --hero-grad-4: #ffc266;
  --hero-veil-1: color-mix(in srgb, var(--foam) 97%, transparent);
  --hero-veil-2: color-mix(in srgb, var(--foam) 78%, transparent);
  --hero-veil-3: color-mix(in srgb, var(--foam) 20%, transparent);
  --footer-bg: #e8e4de;
  --shadow-soft: rgba(15, 26, 34, 0.08);
  --shadow-map: rgba(15, 26, 34, 0.09);
  --shadow-lift: rgba(15, 26, 34, 0.12);
  --shadow-popover: rgba(15, 26, 34, 0.18);
  --hotspot-hover-bg: color-mix(in srgb, var(--sea) 18%, transparent);
  --hotspot-debug-hover: color-mix(in srgb, var(--sea) 35%, transparent);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--foam);
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

a:hover {
  color: var(--sea-light);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-sea-muted);
}

.site-header__inner {
  max-width: calc(var(--max-width) + 4rem);
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.site-header__brand:hover .logo {
  color: var(--sea);
}

.site-header__mark {
  flex-shrink: 0;
  height: 2.35rem;
  width: auto;
  max-height: 2.75rem;
  display: block;
  object-fit: contain;
}

.logo {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}

.nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}

.nav a:hover {
  color: var(--sea);
}

/* Sunny hero: abalone art is pre-rotated PNG with alpha (no CSS rotate); gradient shows through. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(380px, 78vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--ink);
}

/* Logo 2 preset: scaled art can extend past the art track — avoid clipping */
.hero[data-banner-preset="logo2"] {
  overflow: visible;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    168deg,
    var(--hero-grad-1) 0%,
    var(--hero-grad-2) 28%,
    var(--hero-grad-3) 58%,
    var(--hero-grad-4) 100%
  );
  pointer-events: none;
}

.hero__art {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.hero__abalone {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  /*
   * Large box + contain keeps the full landscape art visible; scale matches prior hero size.
   */
  width: min(165vw, 165vh);
  height: min(165vw, 165vh);
  object-fit: contain;
  object-position: 50% 50%;
  transform: translate(-50%, -50%) scale(0.55);
  transform-origin: center center;
  filter: drop-shadow(0 4px 28px rgba(62, 42, 18, 0.12));
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to top,
    var(--hero-veil-1) 0%,
    var(--hero-veil-2) 28%,
    var(--hero-veil-3) 62%,
    transparent 100%
  );
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: min(36rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(2rem, 6vmin, 3.5rem) 1.25rem 2.75rem;
  width: 100%;
  scroll-margin-top: 2rem;
}

.hero__tagline {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.65rem, 4.2vw, 2.45rem);
  line-height: 1.18;
  margin: 0 0 0.85rem;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.hero__lead {
  margin: 0 0 1.35rem;
  max-width: none;
  font-size: clamp(0.98rem, 2.1vw, 1.08rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  background: var(--sea);
  color: var(--foam);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 4px 18px var(--cta-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hero__cta:hover {
  color: var(--foam);
  background: var(--sea-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 26px var(--cta-shadow-hover);
}

.hero__curve-ring {
  display: none;
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(104vw, 104vh, 580px);
  max-width: calc(100% - 2rem);
  aspect-ratio: 1;
  z-index: 4;
  pointer-events: none;
}

.hero[data-hero-variant="curved"] .hero__curve-ring {
  display: block;
}

/* Watermark presets: no curved SVG title */
.hero[data-banner-preset="watermark"] .hero__curve-ring,
.hero[data-banner-preset="watermark-left"] .hero__curve-ring {
  display: none !important;
}

.hero__curve-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero__curve-svg-text {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  fill: var(--ink);
  letter-spacing: 0.02em;
}

.hero__curve-svg-text--top {
  font-size: 27px;
}

.hero__curve-svg-text--bottom {
  font-size: 24px;
  fill: var(--sea);
}

/* Split: text left (~20% narrower column), abalone right, brighter art */
.hero[data-hero-variant="split"] {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.76fr);
  /* Keep copy and art close; small floor for readability */
  column-gap: clamp(0.35rem, 1vw, 1rem);
  align-items: center;
  justify-items: stretch;
  padding-left: clamp(1rem, 4vw, 2.5rem);
  padding-right: clamp(0.75rem, 2vw, 1.75rem);
  padding-bottom: clamp(2rem, 5vmin, 3rem);
}

.hero[data-hero-variant="split"] .hero__bg {
  grid-column: 1 / -1;
  grid-row: 1;
}

.hero[data-hero-variant="split"] .hero__veil {
  grid-column: 1 / -1;
  grid-row: 1;
  background: linear-gradient(
    105deg,
    color-mix(in srgb, var(--foam) 96%, transparent) 0%,
    color-mix(in srgb, var(--foam) 78%, transparent) 32%,
    color-mix(in srgb, var(--foam) 14%, transparent) 52%,
    transparent 68%
  );
}

.hero[data-hero-variant="split"] .hero__art {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  inset: auto;
  overflow: visible;
  min-height: clamp(300px, 62vh, 620px);
  align-self: stretch;
  justify-self: stretch;
  max-width: 100%;
}

/* Split abalone: default “setback” — in the art column, shifted right, not under copy, inset from viewport */
.hero[data-hero-variant="split"] .hero__abalone {
  position: absolute;
  left: auto;
  top: 50%;
  object-fit: contain;
  object-position: 50% 50%;
  transform: translateY(-50%) scale(0.54);
  width: min(118vw, 118vh);
  height: min(118vw, 118vh);
  max-width: none;
  filter: brightness(1.05) saturate(1.08) drop-shadow(0 8px 36px rgba(62, 42, 18, 0.12));
}

.hero[data-hero-variant="split"][data-split-art="setback"] .hero__abalone {
  right: clamp(4%, 5vw, 10%);
}

.hero[data-hero-variant="split"][data-split-art="right"] .hero__abalone {
  right: clamp(0.5rem, 1.5vw, 1.25rem);
  transform: translateY(-50%) scale(0.52);
}

.hero[data-hero-variant="split"][data-split-art="fill"] .hero__abalone {
  right: 0;
  transform: translate(15%, -50%) scale(0.58);
  width: min(135vw, 135vh);
  height: min(135vw, 135vh);
}

@media (min-width: 721px) {
  /* Fill: wider art track, copy capped by ch + fr so art can breathe */
  .hero[data-hero-variant="split"][data-split-art="fill"] {
    grid-template-columns: minmax(0, min(36ch, 0.58fr)) minmax(300px, 0.92fr);
    column-gap: clamp(0.35rem, 1.1vw, 1.1rem);
  }

  .hero[data-hero-variant="split"][data-split-art="fill"] .hero__inner {
    max-width: min(100%, 36ch, 26rem);
  }
}

.hero[data-hero-variant="split"] .hero__inner {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  text-align: left;
  margin: 0;
  max-width: min(27.2rem, 100%);
  padding: clamp(2rem, 5vmin, 3rem) 0.15rem 2.5rem 0;
  justify-self: start;
}

@media (max-width: 720px) {
  .hero[data-hero-variant="split"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .hero[data-hero-variant="split"] .hero__inner {
    grid-column: 1;
    grid-row: 1;
    padding: 5.5rem 0 0.5rem;
    text-align: left;
  }

  .hero[data-hero-variant="split"] .hero__art {
    grid-column: 1;
    grid-row: 2;
    min-height: clamp(220px, 42vh, 380px);
    overflow: visible;
  }

  .hero[data-hero-variant="split"] .hero__abalone {
    transform: translateY(-6%) scale(0.46);
    object-position: 50% 50%;
  }

  .hero[data-hero-variant="split"][data-split-art="setback"] .hero__abalone {
    right: clamp(6%, 8vw, 14%);
  }

  .hero[data-hero-variant="split"][data-split-art="right"] .hero__abalone {
    right: 0.35rem;
  }

  .hero[data-hero-variant="split"][data-split-art="fill"] .hero__inner {
    max-width: 100%;
  }

  .hero[data-hero-variant="split"][data-split-art="fill"] .hero__art {
    min-height: clamp(240px, 48vh, 420px);
  }

  .hero[data-hero-variant="split"][data-split-art="fill"] .hero__abalone {
    right: 0;
    transform: translate(15%, -6%) scale(0.5);
  }

  .hero[data-hero-variant="split"] .hero__veil {
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--foam) 94%, transparent) 0%,
      color-mix(in srgb, var(--foam) 55%, transparent) 42%,
      transparent 100%
    );
  }
}

/* Curved: brighter shell, lighter veil, copy sits below ring */
.hero[data-hero-variant="curved"] .hero__veil {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--foam) 96%, transparent) 0%,
    color-mix(in srgb, var(--foam) 45%, transparent) 35%,
    color-mix(in srgb, var(--foam) 8%, transparent) 58%,
    transparent 100%
  );
}

.hero[data-hero-variant="curved"] .hero__abalone {
  filter: brightness(1.06) saturate(1.08) drop-shadow(0 6px 32px rgba(62, 42, 18, 0.12));
}

.hero[data-hero-variant="curved"] .hero__inner {
  padding-top: clamp(9.5rem, 28vmin, 13rem);
}

/* Watermark: no curved ring — less top padding */
.hero[data-banner-preset="watermark"][data-hero-variant="curved"] .hero__inner {
  padding-top: clamp(3.25rem, 11vmin, 5.5rem);
}

/*
 * Watermark (text left, graphic right): copy biased left; lift copy upward in the hero
 * (curved layout is flex-end — margin-bottom pushes the block up from the bottom).
 */
.hero[data-banner-preset="watermark-left"][data-hero-variant="curved"] .hero__inner {
  padding-top: clamp(1.75rem, 6vmin, 3.25rem);
  margin-bottom: clamp(2.75rem, 11vh, 6.5rem);
  text-align: left;
  margin-left: clamp(0.5rem, 2.5vw, 2rem);
  margin-right: auto;
  max-width: min(38rem, calc(100% - clamp(1rem, 3vw, 2.5rem)));
}

@media (max-width: 720px) {
  .hero[data-banner-preset="watermark"][data-hero-variant="curved"] .hero__inner {
    padding-top: clamp(2.75rem, 9vmin, 4.5rem);
  }

  .hero[data-banner-preset="watermark-left"][data-hero-variant="curved"] .hero__inner {
    padding-top: clamp(1.5rem, 6vmin, 3rem);
    margin-bottom: clamp(2rem, 9vh, 4.5rem);
    margin-left: clamp(0.35rem, 1.25vw, 1rem);
    max-width: calc(100% - 1.5rem);
  }

  .hero[data-hero-variant="curved"] .hero__inner {
    padding-top: clamp(7.5rem, 22vmin, 10rem);
  }

  .hero__curve-svg-text--top {
    font-size: 21px;
  }

  .hero__curve-svg-text--bottom {
    font-size: 19px;
  }

  .hero__curve-ring {
    width: min(118vw, 420px);
    top: 38%;
  }
}

/* --- Hero banner presets (preview toolbar + alternate layouts) --- */
.hero-banner-bar {
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  max-width: min(calc(100vw - 24px), 20.5rem);
  padding: 0.45rem 0.55rem 0.5rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--sand) 85%, var(--ink) 15%);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 36px rgba(15, 26, 34, 0.14);
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.hero-banner-bar__label {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.hero-banner-bar__select {
  width: 100%;
  max-width: 20.5rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--sand);
  background: var(--surface);
  color: var(--ink);
}

.hero-banner-bar__hint {
  margin: 0;
  line-height: 1.35;
  font-size: 0.68rem;
  color: var(--ink-soft);
}

.hero-banner-bar__hint code {
  font-size: 0.66rem;
  word-break: break-all;
}

.hero-banner-bar__check {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.2rem 0 0;
  max-width: 20.5rem;
  font-size: 0.72rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.hero-banner-bar__check input {
  margin: 0.12rem 0 0;
  flex-shrink: 0;
}

.hero__watermark {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero[data-banner-preset="watermark"] .hero__watermark,
.hero[data-banner-preset="watermark-left"] .hero__watermark {
  display: block;
  /* Let contain-sized image paint to edges without clipping */
  overflow: visible;
}

.hero__watermark-img {
  opacity: 0.1;
  filter: grayscale(0.25) saturate(0.9);
}

/* Full hero box + contain = entire asset visible (no crop) */
.hero[data-banner-preset="watermark"] .hero__watermark-img,
.hero[data-banner-preset="watermark-left"] .hero__watermark-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.hero[data-banner-preset="watermark"] .hero__watermark-img {
  object-position: 50% 50%;
}

/* Text-left preset: watermark graphic biased to the right (still fully visible) */
.hero[data-banner-preset="watermark-left"] .hero__watermark-img {
  object-position: right center;
}

.hero[data-banner-preset="watermark"] .hero__art,
.hero[data-banner-preset="watermark-left"] .hero__art {
  display: none;
}

.hero__brand-lockup {
  display: none;
  margin: 0 0 0.85rem;
}

.hero[data-banner-preset="logo-lockup"] .hero__brand-lockup {
  display: block;
  text-align: center;
}

.hero__brand-lockup-img {
  max-width: min(240px, 58vw);
  height: auto;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 6px 22px rgba(15, 26, 34, 0.12));
}

.hero[data-banner-preset="editorial"][data-hero-variant="split"],
.hero[data-banner-preset="logo-lockup"][data-hero-variant="split"] {
  grid-template-columns: 1fr;
}

.hero[data-banner-preset="editorial"] .hero__art,
.hero[data-banner-preset="logo-lockup"] .hero__art {
  display: none;
}

.hero[data-banner-preset="editorial"] .hero__inner,
.hero[data-banner-preset="logo-lockup"] .hero__inner {
  grid-column: 1 / -1;
  text-align: center;
  justify-self: center;
  margin-left: auto;
  margin-right: auto;
  max-width: min(40rem, calc(100% - 2rem));
}

.hero[data-banner-preset="editorial"] .hero__tagline {
  font-size: clamp(1.85rem, 4.8vw, 2.65rem);
  letter-spacing: -0.02em;
}

.hero[data-banner-preset="editorial"] .hero__lead {
  font-size: clamp(1.02rem, 2.3vw, 1.12rem);
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}

.hero[data-banner-preset="split-clean"][data-hero-variant="split"] .hero__art {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--sand);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 18px 48px rgba(15, 26, 34, 0.08);
}

.hero[data-banner-preset="split-clean"][data-hero-variant="split"] .hero__abalone {
  right: 50% !important;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5) !important;
  width: min(125vw, 125vh) !important;
  height: min(125vw, 125vh) !important;
  filter: brightness(1.04) saturate(1.05) drop-shadow(0 10px 34px rgba(62, 42, 18, 0.1));
}

/*
 * Logo 2: base size = full art column, then +50% visual scale (width 150%, centered).
 * Tight column-gap for this preset only so copy and graphic sit closer.
 */
.hero[data-banner-preset="logo2"][data-hero-variant="split"] {
  column-gap: 0.125rem;
}

@media (min-width: 721px) {
  .hero[data-banner-preset="logo2"][data-hero-variant="split"][data-split-art="fill"] {
    column-gap: 0.125rem;
  }
}

.hero[data-banner-preset="logo2"][data-hero-variant="split"] .hero__art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.hero[data-banner-preset="logo2"][data-hero-variant="split"] .hero__abalone {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  /* Cancel split “fill” shell transforms; no extra scale() — size comes from width */
  transform: none !important;
  box-sizing: border-box;
  display: block;
  flex: 0 0 auto;
  width: 150% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 10px 28px rgba(15, 26, 34, 0.12));
}

@media (max-width: 720px) {
  .hero[data-banner-preset="split-clean"][data-hero-variant="split"] .hero__abalone {
    transform: translate(-50%, -8%) scale(0.44) !important;
  }

  .hero[data-banner-preset="logo2"][data-hero-variant="split"] .hero__art {
    min-height: clamp(200px, 44vh, 420px);
  }

  .hero[data-banner-preset="logo2"][data-hero-variant="split"] .hero__abalone {
    max-height: none !important;
    /* Full-width column; avoid 150% blowing past the viewport on narrow screens */
    width: 100% !important;
  }
}

/* --- Reviewer mocks: seafood & markets (no watermark; lockup via data-demo-lockup) --- */
.hero.hero--review-mock .hero__watermark {
  display: none !important;
}

.hero.hero--review-mock[data-demo-lockup="on"] .hero__brand-lockup {
  display: block;
  text-align: center;
  margin: 0 0 0.65rem;
}

.hero.hero--review-mock[data-demo-lockup="off"] .hero__brand-lockup {
  display: none !important;
}

/* Reviewer mocks: logo2 reads small at preview sizes — +40% when lockup or header uses it. */
.hero.hero--review-mock[data-demo-lockup="on"] .hero__brand-lockup-img {
  max-width: min(336px, 81.2vw);
}

body:has(#hero.hero--review-mock[data-demo-header-mark="logo2"]) .site-header__mark {
  height: calc(2.35rem * 1.4);
  max-height: calc(2.75rem * 1.4);
}

.hero.hero--review-mock .hero__veil {
  background: linear-gradient(
    105deg,
    color-mix(in srgb, var(--foam) 94%, transparent) 0%,
    color-mix(in srgb, var(--foam) 72%, transparent) 36%,
    transparent 74%
  );
}

.hero.hero--review-mock[data-hero-variant="split"] .hero__art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--sand);
  background: #1a1f24;
  box-shadow: 0 16px 44px rgba(15, 26, 34, 0.14);
}

/* Family photo: whole image, no art-panel border/fill — letterboxing shows hero behind. */
.hero.hero--review-mock[data-banner-preset="demo-family-meal"][data-hero-variant="split"] .hero__art,
.hero.hero--review-mock[data-banner-preset="mock-collage-four"][data-hero-variant="split"] .hero__art {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.hero.hero--review-mock[data-hero-variant="split"] .hero__abalone {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 260px;
  max-width: none !important;
  object-fit: cover;
  object-position: center center;
  filter: saturate(1.06) contrast(1.02);
}

.hero.hero--review-mock[data-demo-fit="contain"][data-hero-variant="split"] .hero__abalone {
  object-fit: contain !important;
  object-position: center center !important;
}

.hero.hero--review-mock[data-hero-variant="split"] .hero__art-collage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  z-index: 1;
}

.hero.hero--review-mock[data-banner-preset="mock-collage-four"][data-hero-variant="split"] .hero__art-collage {
  gap: 0;
  background: transparent;
}

.hero.hero--review-mock[data-hero-variant="split"] .hero__art-collage[hidden] {
  display: none !important;
}

.hero.hero--review-mock[data-hero-variant="split"] .hero__art-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Four-up: family tile — full photo after general collage img rule (wins on object-fit). */
.hero.hero--review-mock[data-banner-preset="mock-collage-four"][data-hero-variant="split"] .hero__art-collage img:last-child {
  object-fit: contain !important;
  object-position: center;
  background: transparent;
}

@media (max-width: 720px) {
  .hero.hero--review-mock[data-hero-variant="split"] .hero__abalone {
    min-height: 220px;
  }
}

section.content-section {
  max-width: calc(var(--max-width) + 4rem);
  margin: 0 auto;
  padding: 3.25rem 1.5rem;
}

section.content-section:nth-of-type(even) {
  background: var(--surface);
}

.section-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  color: var(--ink);
  margin: 0 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--sand);
}

.content-section p {
  margin: 0 0 1rem;
  max-width: 48rem;
}

/* Optional demo: four seafood thumbnails above the define pills (toggle in floating panel). */
.intro-seafood-strip {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  max-width: 48rem;
  margin: 0.35rem 0 1rem;
}

html[data-intro-seafood="on"] .intro-seafood-strip {
  display: grid;
}

.intro-seafood-strip__cell {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--sand);
  aspect-ratio: 4 / 3;
  background: var(--surface);
  box-shadow: 0 4px 14px var(--shadow-soft);
}

.intro-seafood-strip__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 640px) {
  .intro-seafood-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .intro-seafood-strip {
    grid-template-columns: 1fr;
  }
}

html[data-page-layout="magazine"] .intro-seafood-strip {
  max-width: 34rem;
}

.history-photo {
  margin: 0.75rem 0 1.15rem;
  max-width: 33.6rem;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--sand);
  box-shadow: 0 10px 28px var(--shadow-lift);
  background: var(--surface);
}

.history-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.history-photo__cap {
  margin: 0;
  padding: 0.5rem 0.65rem 0.65rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-soft);
  background: var(--surface);
}

.history-photo--inset {
  float: right;
  width: min(19.95rem, 40.6%);
  margin: 0.1rem 0 0.95rem 1rem;
}

@media (max-width: 760px) {
  .history-photo--inset {
    float: none;
    width: 100%;
    margin: 0.75rem 0 1.15rem;
  }
}

.abalone-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  max-width: 48rem;
  margin: 0.3rem 0 1rem;
}

.abalone-photo {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--sand);
  box-shadow: 0 8px 22px var(--shadow-lift);
  background: var(--surface);
}

.abalone-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Shell interior: rotate 90° so the long axis reads vertically like the other panels. */
.abalone-photo--shell-rotated .abalone-photo__shell-rot {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  min-height: 13rem;
  aspect-ratio: 3 / 4;
  background: var(--surface);
}

.abalone-photo--shell-rotated .abalone-photo__shell-rot img {
  width: auto;
  height: 118%;
  max-width: none;
  flex-shrink: 0;
  transform: rotate(90deg);
  transform-origin: center center;
  object-fit: contain;
}

.abalone-photo__cap {
  margin: 0;
  padding: 0.38rem 0.5rem 0.48rem;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--ink-soft);
  background: var(--surface);
}

@media (max-width: 820px) {
  .abalone-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .abalone-photo-grid {
    grid-template-columns: 1fr;
  }
}

.pill-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill-list li {
  padding: 0.35rem 0.75rem;
  background: var(--pill-bg);
  color: var(--sea);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 999px;
}

.defines-intro {
  margin-top: 1.75rem;
  margin-bottom: 0.35rem;
}

.defines-note {
  margin: 1.1rem 0 0.45rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.pill-list--defines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.55rem 0.65rem;
  max-width: 48rem;
}

.pill-list--defines li {
  padding: 0;
}

a.define-pill,
button.define-pill {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  background: var(--pill-bg);
  color: var(--sea);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  text-decoration-thickness: 0;
  border: none;
  font-family: inherit;
  line-height: 1.25;
  cursor: pointer;
}

.pill-list--defines .define-pill {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.5rem 0.75rem;
}

a.define-pill:hover,
button.define-pill:hover {
  background: var(--pill-bg-hover);
  color: var(--sea-light);
}

a.define-pill:focus-visible,
button.define-pill:focus-visible {
  outline: 2px solid var(--sea);
  outline-offset: 2px;
}

.define-popover {
  position: fixed;
  z-index: 90;
  left: 0;
  top: 0;
  max-width: min(560px, calc(100vw - 16px));
  max-height: calc(100vh - 18px);
  overflow-y: auto;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--sand);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 40px var(--shadow-popover);
}

.define-popover__title {
  margin: 0 0 0.55rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.define-popover__body p {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.define-popover__body p:last-child {
  margin-bottom: 0;
}

.define-page {
  max-width: calc(var(--max-width) + 4rem);
  margin: 0 auto;
  padding: 2rem 1.5rem 3.5rem;
}

.define-page__back {
  display: inline-block;
  margin-bottom: 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.define-page__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 1.85rem);
  color: var(--ink);
  margin: 0 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--sand);
}

.define-page__body {
  max-width: 48rem;
}

.define-page__body p {
  margin: 0 0 1rem;
}

.define-page__body p:last-child {
  margin-bottom: 0;
}

/* Bio: sans-serif like body / in-copy P&P (not Fraunces section titles) */
.content-section--bio .section-title {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.45rem, 2.4vw, 1.75rem);
  letter-spacing: 0.01em;
}

.content-section--bio .bio-prose {
  font-family: "DM Sans", system-ui, sans-serif;
}

/* Bio: one text column; small images float inline (inset) so copy wraps with no dead band */
.content-section--bio .bio-prose > p {
  max-width: none;
}

.bio-prose {
  display: flow-root;
  margin-top: 0.25rem;
  max-width: 48rem;
  margin-right: auto;
}

.bio-photo {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(15, 26, 34, 0.12);
  border: 1px solid var(--sand);
}

.bio-photo--lead {
  float: right;
  width: 230px;
  max-width: 38%;
  margin: 0.2rem 0 0.65rem 0.85rem;
}

.bio-photo--tail {
  clear: both;
  float: left;
  width: 161px;
  max-width: 38%;
  margin: 0.25rem 0.85rem 0.65rem 0;
}

.bio-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.bio-photo__cap {
  margin: 0;
  padding: 0.5rem 0.5rem 0.65rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.35;
  background: var(--surface);
}

@media (max-width: 640px) {
  .bio-photo--lead {
    float: none;
    width: 100%;
    max-width: 250px;
    margin: 0 auto 1rem;
  }

  .bio-photo--tail {
    float: none;
    width: 100%;
    max-width: 175px;
    display: block;
    margin: 1rem auto 0;
  }
}

.content-section--products .products-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 48rem;
}

.content-section--products .product-item {
  margin: 0 0 1.75rem;
}

.content-section--products .product-item:last-child {
  margin-bottom: 0;
}

.content-section--products .product-item__name {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0 0 0.25rem;
  line-height: 1.25;
}

.content-section--products .product-item__species {
  margin: 0 0 0.85rem;
  font-size: 0.98rem;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.45;
}

.content-section--products .product-item__latin {
  font-style: italic;
}

.content-section--products .product-item__detail {
  margin: 0 0 0.85rem;
}

.content-section--products .product-item__detail:last-child {
  margin-bottom: 0;
}

.content-section--products .product-item__formats {
  margin: 0 0 0.85rem;
  padding-left: 1.25rem;
  line-height: 1.55;
}

.content-section--products .product-item__formats li {
  margin-bottom: 0.25rem;
}

.content-section--products .product-item__formats li:last-child {
  margin-bottom: 0;
}

.content-section--products .product-item__future-label {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sea);
}

.content-section--contact {
  scroll-margin-top: 5rem;
}

.contact-section__lead {
  margin: 0 0 1.1rem;
  max-width: 48rem;
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--ink);
}

.content-section--contact .contact-block {
  margin: 0;
  padding: 0;
  max-width: 48rem;
}

.contact-block__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 11rem) 1fr;
  gap: 0.35rem 1.5rem;
  margin-bottom: 1rem;
  align-items: baseline;
}

.contact-block__row:last-child {
  margin-bottom: 0;
}

.contact-block dt {
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.contact-block dd {
  margin: 0;
}

.contact-block__pending {
  color: rgba(44, 61, 74, 0.4);
  letter-spacing: 0.12em;
}

@media (max-width: 480px) {
  .contact-block__row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

/*
 * Chromium / Brave: native spell-check can underline Baja place names in the map block.
 * ::spelling-error / ::grammar-error strip the squiggle where the engine exposes these pseudos.
 */
.content-section--map ::spelling-error,
.content-section--map ::grammar-error {
  text-decoration: none;
  -webkit-text-decoration: none;
  background: none;
}

.content-section--map .map-intro {
  max-width: 48rem;
  margin-bottom: 1.25rem;
}

.map-visual {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0.25rem;
}

/* Definite width so .map-stage resolves; height follows the map image */
.map-wrap {
  display: block;
  width: min(100%, 920px);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  line-height: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-sea-muted);
  box-shadow: 0 4px 18px var(--shadow-map);
  background: var(--surface);
}

/*
 * Stage height follows the map image (no 1058×794 letterboxing). Hotspot % = that box.
 */
.map-wrap--interactive .map-stage {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  background: var(--surface);
}

.map-stage__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  pointer-events: none;
  user-select: none;
  vertical-align: top;
}

.map-hotspots {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.map-hotspot {
  position: absolute;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  box-sizing: border-box;
}

.map-hotspot:hover,
.map-hotspot:focus-visible {
  background: var(--hotspot-hover-bg);
  outline: 2px solid var(--sea);
  outline-offset: 1px;
}

/* Add ?mapDebug=1 to index.html URL to see all hit zones while editing map-hotspots.json */
body.map-hotspots-debug .map-hotspot {
  background: rgba(220, 60, 60, 0.22);
  outline: 2px dashed rgba(180, 30, 30, 0.9);
  outline-offset: -1px;
}

body.map-hotspots-debug .map-hotspot:hover,
body.map-hotspots-debug .map-hotspot:focus-visible {
  background: var(--hotspot-debug-hover);
  outline-color: var(--sea);
}

.map-server-note {
  font-size: 0.9rem;
  color: #6b2d3a;
  background: #fce8ec;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-top: 0.75rem;
  max-width: 48rem;
}

.town-popover {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  max-width: min(460px, calc(100vw - 16px));
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--sand);
  border-radius: 8px;
  box-shadow: 0 12px 40px var(--shadow-popover);
}

.town-popover__body {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.town-popover__title {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--ink);
}

.town-popover__body-text {
  margin: 0 0 0.65rem;
}

.town-popover__body-text:last-of-type {
  margin-bottom: 0;
}

.town-popover__figure {
  margin: 0.7rem 0 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--sand);
  background: var(--surface);
}

.town-popover__img {
  width: 100%;
  height: auto;
  display: block;
}

.town-popover__figcaption {
  margin: 0;
  padding: 0.38rem 0.5rem 0.48rem;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--ink-soft);
  background: var(--surface);
}

.town-popover__empty {
  margin: 0;
  font-style: italic;
  color: var(--ink-soft);
}

.town-popover__more {
  display: inline-block;
  margin-top: 0.75rem;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.town-popover__more:hover {
  text-decoration: underline;
}

.site-footer {
  padding: 2rem 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: var(--footer-bg);
  border-top: 1px solid var(--sand);
}

.site-footer p {
  margin: 0;
}

.site-footer__contact {
  margin-top: 0.65rem;
  font-size: 0.9rem;
}

/* =============================================================================
   Site themes (floating “Site theme” control on index; persisted in localStorage)
   Default selection = warm (matches original :root palette).
   ============================================================================= */

html[data-site-theme="maritime"] {
  --ink: #0b141c;
  --ink-soft: #3a4d5c;
  --sea: #0e4a5c;
  --sea-light: #1f6b7a;
  --foam: #f4f7f9;
  --sand: #d3dde4;
  --accent: #2c5282;
  --surface: #ffffff;
  --hero-grad-1: #eef4f8;
  --hero-grad-2: #e2ebf2;
  --hero-grad-3: #cfdce6;
  --hero-grad-4: #b8cad8;
  --footer-bg: #dce5eb;
}

html[data-site-theme="minimal"] {
  --ink: #141414;
  --ink-soft: #4a4a4a;
  --sea: #1a3d3d;
  --sea-light: #2d5555;
  --foam: #fafafa;
  --sand: #e8e8e8;
  --accent: #404040;
  --surface: #ffffff;
  --hero-grad-1: #fafafa;
  --hero-grad-2: #f2f2f2;
  --hero-grad-3: #e8e8e8;
  --hero-grad-4: #dedede;
  --footer-bg: #efefef;
}

html[data-site-theme="tide"] {
  --ink: #1a2e2c;
  --ink-soft: #3d524f;
  --sea: #2a6f62;
  --sea-light: #3a8b7c;
  --foam: #f0f5f3;
  --sand: #d5e4df;
  --accent: #3d6b61;
  --surface: #fbfdfc;
  --hero-grad-1: #f2f7f5;
  --hero-grad-2: #e8f0ec;
  --hero-grad-3: #d8e8e1;
  --hero-grad-4: #c5dbd2;
  --footer-bg: #e2ebe7;
}

html[data-site-theme="editorial"] {
  --ink: #1c1917;
  --ink-soft: #44403c;
  --sea: #0f4a46;
  --sea-light: #166a64;
  --foam: #faf7f2;
  --sand: #e7e2d9;
  --accent: #57534e;
  --surface: #fffcf7;
  --hero-grad-1: #fffefb;
  --hero-grad-2: #faf6ef;
  --hero-grad-3: #f3ebe0;
  --hero-grad-4: #e8dccf;
  --footer-bg: #ebe6dd;
}

/* Matches :root “Warm coast” — explicit so the Site theme control can return here. */
html[data-site-theme="warm"] {
  --ink: #0f1a22;
  --ink-soft: #2c3d4a;
  --sea: #1a5c62;
  --sea-light: #2a7a82;
  --foam: #f6f3ee;
  --sand: #e8dfd2;
  --accent: #6b4c7a;
  --surface: #ffffff;
  --header-bg: color-mix(in srgb, var(--foam) 92%, transparent);
  --border-sea-muted: color-mix(in srgb, var(--sea) 12%, transparent);
  --pill-bg: color-mix(in srgb, var(--sea) 10%, transparent);
  --pill-bg-hover: color-mix(in srgb, var(--sea) 20%, transparent);
  --cta-shadow: color-mix(in srgb, var(--sea) 35%, transparent);
  --cta-shadow-hover: color-mix(in srgb, var(--sea) 40%, transparent);
  --hero-grad-1: #fff9ed;
  --hero-grad-2: #ffefd2;
  --hero-grad-3: #ffd78a;
  --hero-grad-4: #ffc266;
  --hero-veil-1: color-mix(in srgb, var(--foam) 97%, transparent);
  --hero-veil-2: color-mix(in srgb, var(--foam) 78%, transparent);
  --hero-veil-3: color-mix(in srgb, var(--foam) 20%, transparent);
  --footer-bg: #e8e4de;
  --shadow-soft: rgba(15, 26, 34, 0.08);
  --shadow-map: rgba(15, 26, 34, 0.09);
  --shadow-lift: rgba(15, 26, 34, 0.12);
  --shadow-popover: rgba(15, 26, 34, 0.18);
  --hotspot-hover-bg: color-mix(in srgb, var(--sea) 18%, transparent);
  --hotspot-debug-hover: color-mix(in srgb, var(--sea) 35%, transparent);
}

/* =============================================================================
   Page layout schemes (toggle via “Page layout”; data-page-layout on <html>)
   ============================================================================= */

html[data-page-layout="wide"] {
  --max-width: 66rem;
}

html[data-page-layout="wide"] section.content-section {
  padding-left: 2rem;
  padding-right: 2rem;
}

html[data-page-layout="airy"] section.content-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

html[data-page-layout="airy"] .site-header__inner {
  padding-top: 1.05rem;
  padding-bottom: 1.05rem;
}

html[data-page-layout="airy"] .hero__inner {
  padding-top: clamp(2.5rem, 7vmin, 4rem);
  padding-bottom: 3.25rem;
}

html[data-page-layout="compact"] section.content-section {
  padding-top: 2.35rem;
  padding-bottom: 2.35rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

html[data-page-layout="compact"] .site-header__inner {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

html[data-page-layout="compact"] .hero__inner {
  padding-top: clamp(1.5rem, 4vmin, 2.5rem);
  padding-bottom: 2rem;
}

html[data-page-layout="sharp-ui"] .hero__cta,
html[data-page-layout="sharp-ui"] .hero-banner-bar,
html[data-page-layout="sharp-ui"] .hero-banner-bar__select,
html[data-page-layout="sharp-ui"] .history-photo,
html[data-page-layout="sharp-ui"] .abalone-photo,
html[data-page-layout="sharp-ui"] .map-wrap,
html[data-page-layout="sharp-ui"] .content-section--bio .bio-prose figure {
  border-radius: 3px;
}

html[data-page-layout="sharp-ui"] .hero.hero--review-mock[data-hero-variant="split"] .hero__art {
  border-radius: 6px;
}

html[data-page-layout="sharp-ui"] .map-hotspot {
  border-radius: 2px;
}

html[data-page-layout="sharp-ui"] .define-popover,
html[data-page-layout="sharp-ui"] .town-popover {
  border-radius: 4px;
}

html[data-page-layout="sharp-ui"] .intro-seafood-strip__cell {
  border-radius: 3px;
}

html[data-page-layout="soft-ui"] .hero__cta {
  border-radius: 999px;
  padding-left: 1.45rem;
  padding-right: 1.45rem;
}

html[data-page-layout="soft-ui"] .hero-banner-bar,
html[data-page-layout="soft-ui"] .hero-banner-bar__select,
html[data-page-layout="soft-ui"] .history-photo,
html[data-page-layout="soft-ui"] .abalone-photo,
html[data-page-layout="soft-ui"] .map-wrap {
  border-radius: 14px;
}

html[data-page-layout="soft-ui"] .hero.hero--review-mock[data-hero-variant="split"] .hero__art {
  border-radius: 18px;
}

html[data-page-layout="soft-ui"] .map-hotspot {
  border-radius: 8px;
}

html[data-page-layout="soft-ui"] .define-popover,
html[data-page-layout="soft-ui"] .town-popover {
  border-radius: 16px;
}

html[data-page-layout="soft-ui"] .intro-seafood-strip__cell {
  border-radius: 12px;
}

html[data-page-layout="magazine"] .content-section p,
html[data-page-layout="magazine"] .content-section--products .products-list,
html[data-page-layout="magazine"] .content-section--contact .contact-block,
html[data-page-layout="magazine"] .content-section--map .map-intro {
  max-width: 34rem;
}

html[data-page-layout="magazine"] .section-title {
  letter-spacing: 0.04em;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  border-bottom-width: 1px;
}

html[data-page-layout="magazine"] .history-photo,
html[data-page-layout="magazine"] .abalone-photo-grid {
  max-width: 25.2rem;
}