:root {
  color-scheme: light;
  /* Marina palette from the new reference */
  --white: #fffdf8;
  --sandshell: #d8cfbc;
  --orangeade: #e45137;
  --scooter: #9e263d;
  --sea-angel: #a9cfda;
  --pacific-coast: #6b8dbb;
  --baleine-blue: #245c95;
  --navy-peony: #233f68;

  --harbor-green: var(--baleine-blue);
  --mist-blue: var(--sea-angel);
  --fog: var(--sandshell);
  --sun-washed: var(--sandshell);
  --ochre: var(--orangeade);
  --ink: var(--navy-peony);
  --deep-ink: #18335e;
  --muted: #647086;
  --paper: var(--white);
  --paper-2: #f1eadb;
  --line: rgba(35, 63, 104, .18);
  --strong-line: rgba(35, 63, 104, .36);
  --shadow: 0 1.2rem 3rem rgba(35, 63, 104, .14);
  --sans: "Gill Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(90deg, rgba(35,63,104,.035) 1px, transparent 1px) 0 0 / 4.5rem 4.5rem,
    linear-gradient(0deg, rgba(35,63,104,.025) 1px, transparent 1px) 0 0 / 4.5rem 4.5rem,
    radial-gradient(circle at 80% -10%, rgba(169,207,218,.9), transparent 28rem),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  color: var(--ink);
  font-family: var(--sans);
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(158,38,61,.14) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    radial-gradient(circle at 13% 12%, rgba(228,81,55,.13), transparent 17rem);
  content: "";
  pointer-events: none;
}

a { color: inherit; }
.page-shell { width: min(100% - 3rem, 1240px); min-height: 100vh; margin: 0 auto; }
.site-header, .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: .9rem 0;
  border-bottom: 2px solid var(--deep-ink);
  background: rgba(248, 244, 234, .9);
  backdrop-filter: blur(14px);
}
.brand, .site-nav a, .button, .breadcrumbs a { text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: .75rem; font-family: var(--serif); font-size: 1.16rem; font-weight: 700; letter-spacing: -.015em; }
.brand-mark {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  border: 2px solid var(--deep-ink);
  border-radius: 50%;
  color: var(--deep-ink);
  background: var(--sun-washed);
  box-shadow: inset 0 0 0 4px var(--paper);
}
.brand-mark svg { width: 1.45rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.brand-mark circle { fill: currentColor; stroke: none; }
.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .15rem; font-size: .83rem; font-weight: 800; }
.site-nav a { padding: .58rem .75rem; border-bottom: 3px solid transparent; color: var(--muted); }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a.active { border-color: var(--ochre); color: var(--deep-ink); outline: none; }

main { flex: 1; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--deep-ink); font-family: var(--serif); font-weight: 700; letter-spacing: -.035em; }
h1 { max-width: 920px; margin-bottom: 1.35rem; font-size: clamp(3.4rem, 8.4vw, 8rem); line-height: .86; }
h2 { max-width: 50rem; margin-bottom: 0; font-size: clamp(2rem, 4vw, 3.5rem); line-height: .98; }
h3 { margin-bottom: .65rem; font-size: 1.48rem; line-height: 1.08; }
p { color: var(--muted); }
.intro, .page-hero p, .pier-hero p { max-width: 44rem; color: #4f5f7b; font-family: var(--serif); font-size: clamp(1.08rem, 1.65vw, 1.32rem); line-height: 1.68; }

.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .72fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(4rem, 9vw, 7rem); }
.hero::before {
  position: absolute;
  right: min(27rem, 24vw);
  top: 4.3rem;
  width: clamp(8rem, 17vw, 15rem);
  height: clamp(8rem, 17vw, 15rem);
  border: 2px solid rgba(24,35,31,.16);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 1.2rem, rgba(24,35,31,.09) 1.25rem 1.32rem);
  content: "";
}
.hero::after { position: absolute; left: 0; right: 0; bottom: 3.2rem; height: 2px; background: linear-gradient(90deg, var(--deep-ink), transparent 52%, var(--ochre)); content: ""; opacity: .5; }
.hero-copy, .booking-card { position: relative; z-index: 1; }
.eyebrow, .section-kicker, .card-label, .card-number, .launch-note, .breadcrumbs, .photo-placeholder span, .shop-grid span, .booking-card li span, .pier-facts dt {
  color: var(--harbor-green);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.25rem; color: var(--deep-ink); }
.status-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--orangeade); box-shadow: 0 0 0 .35rem rgba(228,81,55,.14); }
.hero-footer { display: flex; flex-wrap: wrap; gap: .85rem; margin: 2rem 0 1rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.15rem;
  padding: .9rem 1.2rem;
  border: 2px solid var(--deep-ink);
  border-radius: .15rem;
  background: var(--deep-ink);
  color: var(--white);
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: 6px 6px 0 var(--sun-washed);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.button:hover, .button:focus-visible { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--sun-washed); outline: none; }
.button.secondary { background: transparent; color: var(--deep-ink); box-shadow: 6px 6px 0 var(--mist-blue); }
.button.secondary:hover, .button.secondary:focus-visible { background: var(--mist-blue); }
.launch-note { max-width: 38rem; margin-bottom: 0; color: var(--muted); line-height: 1.5; text-transform: none; letter-spacing: .02em; }

.booking-card, .guide-cta, .final-cta, .friendly-callout, .prose-card, .lesson-card, .pier-facts, .pier-card, .map-card, .map-wrap, .station-panel, .moon-panel, .tide-graph-panel, .weather-panel, .marine-panel {
  border: 2px solid var(--deep-ink);
  border-radius: .2rem;
  background: var(--white);
  box-shadow: var(--shadow);
}
.booking-card { overflow: hidden; padding: clamp(1.2rem, 3vw, 1.75rem); }
.booking-card::before {
  display: block;
  height: clamp(12rem, 22vw, 17rem);
  margin: -.35rem -.35rem 1.2rem;
  border: 2px solid var(--deep-ink);
  background:
    radial-gradient(circle at 28% 63%, var(--ochre) 0 .45rem, transparent .48rem),
    linear-gradient(176deg, transparent 0 39%, rgba(248,244,234,.72) 39.3% 40.2%, transparent 40.4%),
    repeating-linear-gradient(90deg, transparent 0 2.15rem, rgba(248,244,234,.68) 2.2rem 2.32rem),
    linear-gradient(160deg, var(--pacific-coast), var(--navy-peony) 72%);
  content: "";
}
.booking-card h2 { margin: .75rem 0 1rem; font-size: clamp(1.65rem, 3vw, 2.45rem); }
.booking-card ul, .checklist { display: grid; gap: .75rem; padding: 0; margin: 0; list-style: none; }
.booking-card ul { margin-bottom: 1.1rem; }
.booking-card li { padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.booking-card li span, .booking-card li strong { display: block; }
.booking-card li span, .pier-facts dt { color: var(--ochre); font-size: .66rem; }
.booking-card li strong { color: var(--ink); font-size: .96rem; line-height: 1.45; }
.booking-card p, .card p, .feature-panel p, .detail-list p, .guide-cta p, .final-cta p, .friendly-callout p, .pier-card-body p, .shop-grid p, .lesson-card p, .pier-facts dd, .prose-card p, .checklist li, .lesson-card ol { color: var(--muted); line-height: 1.6; }

.split-section, .preview, .details, .guide-cta, .final-cta, .pier-directory, .map-section, .article-section, .lesson-grid, .photo-section, .tide-explorer, .prediction-section { padding: 0 0 6.5rem; }
.section-heading, .prediction-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--deep-ink); }
.section-heading.compact { display: block; }
.section-heading.compact .section-kicker, .page-hero .section-kicker, .pier-hero .section-kicker, .prose-card .section-kicker, .guide-cta .section-kicker, .final-cta .section-kicker, .prediction-heading .section-kicker { display: block; margin-bottom: .85rem; }
.split-grid, .cards, .detail-list, .shop-grid { display: grid; gap: 0; margin-top: -2px; border: 2px solid var(--deep-ink); background: var(--deep-ink); }
.split-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split-grid.three, .cards, .pier-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-panel, .card, .detail-list article, .shop-grid article { background: var(--white); }
.feature-panel, .card { min-height: 16rem; padding: clamp(1.35rem, 3vw, 2rem); border-right: 2px solid var(--deep-ink); }
.feature-panel:last-child, .card:last-child { border-right: 0; }
.feature-panel { display: flex; flex-direction: column; justify-content: space-between; }
.panel-icon { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; border: 2px solid var(--deep-ink); border-radius: 50%; background: var(--mist-blue); font-size: 1.25rem; }
.card-number { display: block; margin-bottom: 4rem; color: var(--ochre); }
.linked-card { position: relative; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.linked-card > a { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.linked-card:hover, .linked-card:focus-within { transform: translateY(-4px); background: #f4eee0; }
.detail-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.detail-list article, .shop-grid article { min-height: 13rem; padding: 1.45rem; border-right: 2px solid var(--deep-ink); }
.detail-list article:last-child, .shop-grid article:last-child { border-right: 0; }
.guide-cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 6.5rem; background: linear-gradient(90deg, var(--white) 0 70%, var(--mist-blue) 70%); }
.guide-cta h2, .final-cta h2, .friendly-callout h2, .prose-card h2 { margin-bottom: 1rem; }
.guide-cta .button { flex: 0 0 auto; }
.final-cta { max-width: 860px; padding: clamp(1.5rem, 4vw, 2.5rem); margin: 0 auto 6.5rem; text-align: center; background: linear-gradient(180deg, var(--white), var(--sandshell)); }
.final-cta h2, .final-cta p { margin-right: auto; margin-left: auto; }
.final-cta p { margin-bottom: 1.6rem; }
.site-footer { padding: 1.5rem 0 2rem; border-top: 2px solid var(--deep-ink); color: var(--muted); font-size: .8rem; font-weight: 700; }

.page-hero { max-width: 980px; padding: clamp(4.5rem, 10vw, 7.5rem) 0 clamp(3.5rem, 8vw, 5.5rem); }
.page-hero.narrow { max-width: 840px; }
.page-hero.guided { max-width: 930px; text-align: center; margin: 0 auto; }
.page-hero h1, .pier-hero h1 { max-width: 900px; margin-bottom: 1.4rem; font-size: clamp(3rem, 7vw, 6.4rem); }
.page-hero.guided p, .page-hero.guided .hero-footer { margin-right: auto; margin-left: auto; }
.friendly-callout { padding: clamp(1.4rem, 4vw, 2.3rem); margin-bottom: 6.5rem; background: linear-gradient(135deg, var(--white), var(--mist-blue)); }
.friendly-callout h2 { color: var(--deep-ink); }
.pier-card-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
.map-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.map-card { overflow: hidden; }
.map-card iframe { display: block; width: 100%; height: 15rem; border: 0; filter: saturate(.65) sepia(.08) contrast(.96); }
.map-card-wide { margin-top: 1.5rem; }
.map-card-wide iframe { height: clamp(20rem, 42vw, 31rem); }
.map-card div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-top: 2px solid var(--deep-ink); }
.map-card h3 { margin: 0; font-size: 1.25rem; }
.map-card a, .text-link, .tide-error a { color: var(--ochre); font-size: .86rem; font-weight: 900; text-underline-offset: .25rem; }
.pier-card { overflow: hidden; }
.pier-card-body { padding: 1.35rem; }
.pier-card-body .card-label { display: block; margin-bottom: .85rem; }
.photo-placeholder { display: grid; min-height: 13rem; place-items: end start; padding: 1rem; border-bottom: 2px solid var(--deep-ink); background: linear-gradient(135deg, var(--pacific-coast), var(--navy-peony)); }
.photo-placeholder span { display: inline-flex; padding: .45rem .7rem; border: 2px solid var(--deep-ink); background: var(--paper); color: var(--deep-ink); }
.photo-placeholder.crystal { background-image: linear-gradient(135deg, var(--mist-blue), var(--harbor-green)); }
.photo-placeholder.shelter { background-image: linear-gradient(135deg, var(--sea-angel), var(--pacific-coast)); }
.photo-placeholder.pepper { background-image: linear-gradient(135deg, var(--sea-angel), var(--baleine-blue), var(--navy-peony)); }
.photo-placeholder.imperial { background-image: linear-gradient(135deg, var(--sun-washed), var(--harbor-green)); }
.photo-placeholder.embarcadero { background-image: linear-gradient(135deg, var(--fog), var(--harbor-green)); }
.photo-placeholder.oceanside { background-image: linear-gradient(135deg, var(--sandshell), var(--pacific-coast)); }
.gallery-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.gallery-grid .photo-placeholder { min-height: clamp(12rem, 22vw, 18rem); border: 2px solid var(--deep-ink); }
.shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shop-grid span { display: inline-flex; margin-top: 1rem; color: var(--ochre); }
.prose-card { max-width: 760px; padding: clamp(1.4rem, 4vw, 2.25rem); }
.prose-card.wide { max-width: none; }
.checklist.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checklist li { position: relative; padding-left: 1.6rem; }
.checklist li::before { position: absolute; left: 0; color: var(--ochre); content: "✓"; font-weight: 900; }
.lesson-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2rem; padding: clamp(1.4rem, 3vw, 2rem); margin-top: 1rem; }
.lesson-card .card-label { display: block; margin-bottom: .85rem; }
.lesson-card ol { display: grid; gap: .65rem; margin: 0; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .55rem; padding: 2rem 0 0; color: var(--muted); }
.breadcrumbs a { color: var(--harbor-green); }
.pier-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 27rem); align-items: start; gap: clamp(2rem, 6vw, 4rem); padding: clamp(3rem, 8vw, 5.5rem) 0; }
.pier-facts { padding: 1.45rem; }
.pier-facts h2 { margin-bottom: 1rem; font-size: 1.8rem; }
.pier-facts dl { display: grid; gap: .95rem; margin: 0; }
.pier-facts dl div { padding-bottom: .95rem; border-bottom: 1px solid var(--line); }
.pier-facts dl div:last-child { padding-bottom: 0; border-bottom: 0; }
.pier-facts dd { margin: 0; }

/* Tide and moon planner */
.tide-hero { display: grid; grid-template-columns: minmax(0, .85fr) minmax(28rem, 1.15fr); align-items: center; gap: clamp(2rem, 7vw, 6rem); padding: clamp(3rem, 6vw, 5rem) 0 3.5rem; }
.tide-hero > div > .section-kicker { display: block; margin-bottom: 1rem; }
.tide-hero h1 { max-width: 48rem; font-size: clamp(2.8rem, 5vw, 5.2rem); line-height: .9; }
.tide-hero > div > p { max-width: 38rem; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.sky-water-panel { position: relative; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.08fr); gap: 1rem; }
.sky-water-panel:fullscreen { width: 100vw; height: 100vh; padding: clamp(1rem, 3vw, 2.5rem); align-content: center; background: var(--paper); }
.sky-water-panel:fullscreen .moon-panel, .sky-water-panel:fullscreen .tide-graph-panel { min-height: 0; align-content: center; }
.sky-water-panel:fullscreen #moon-canvas { width: min(100%, 16rem); }
.sky-water-panel:fullscreen #tide-graph { width: 100%; max-height: 44vh; }
.fullscreen-toggle { position: absolute; top: .85rem; right: .85rem; z-index: 2; padding: .55rem .78rem; border: 2px solid var(--deep-ink); border-radius: .15rem; background: var(--sun-washed); color: var(--deep-ink); font: 900 .72rem var(--sans); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.fullscreen-toggle:hover, .fullscreen-toggle:focus-visible { background: var(--deep-ink); color: var(--white); outline: none; }
.moon-panel, .tide-graph-panel, .weather-panel, .marine-panel { display: grid; gap: 1rem; padding: 1.25rem; }
#moon-canvas { display: block; width: min(100%, 10rem); height: auto; margin: 0 auto; filter: drop-shadow(0 0 1rem rgba(35,63,104,.16)); }
.moon-copy h2, .tide-graph-panel h2, .weather-panel h2, .marine-panel h2 { margin: .35rem 0 .25rem; font: 900 1.15rem var(--sans); letter-spacing: 0; }
.moon-copy > p, .tide-graph-panel p, .weather-panel p, .marine-panel p { margin-bottom: .8rem; color: var(--muted); font-size: .8rem; }
.moon-stats { display: grid; gap: .55rem; margin: 0; }
.moon-stats div { display: flex; justify-content: space-between; gap: 1rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.moon-stats dt { color: var(--muted); font-size: .78rem; }
.moon-stats dd { margin: 0; color: var(--ochre); font-size: .84rem; font-weight: 900; }
#tide-graph { display: block; width: 100%; height: auto; overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.marine-panel { grid-column: 1 / -1; }
.compact-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); overflow: hidden; }
.compact-stats div { padding: .72rem; background: var(--white); }
.compact-stats dt { color: var(--muted); font-size: .65rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.compact-stats dd { margin: .25rem 0 0; color: var(--ochre); font: 900 .98rem var(--sans); letter-spacing: -.01em; }
.marine-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tide-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(17rem, .65fr); gap: 1rem; margin-top: 1.5rem; }
#tide-map { width: 100%; min-height: 31rem; background: var(--mist-blue); }
.map-note { margin: 0; padding: .8rem 1rem; color: var(--muted); font-size: .78rem; border-top: 2px solid var(--deep-ink); }
.map-error { padding: 2rem; color: var(--ink); }
.station-panel { padding: 1.5rem; }
.station-panel h2 { margin: .8rem 0 1rem; font-size: 2rem; }
.station-panel > p { color: var(--muted); line-height: 1.55; }
.station-picker { display: grid; gap: .5rem; margin: 1.5rem 0; }
.station-picker button { width: 100%; padding: .8rem .9rem; border: 1px solid var(--strong-line); background: transparent; color: var(--ink); font: 800 .82rem var(--sans); text-align: left; cursor: pointer; }
.station-picker button:hover, .station-picker button:focus-visible, .station-picker button.selected { border-color: var(--deep-ink); background: var(--sun-washed); color: var(--deep-ink); outline: none; }
.prediction-heading h2 { font-size: 1.65rem; letter-spacing: -.02em; }
#tide-status { margin: 0; color: var(--muted); font-size: .8rem; }
.tide-events { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: -2px; border: 2px solid var(--deep-ink); background: var(--deep-ink); }
.tide-event { position: relative; min-height: 10.5rem; padding: 1rem; background: var(--white); border-right: 2px solid var(--deep-ink); }
.tide-event:last-child { border-right: 0; }
.tide-event::after { position: absolute; right: 1.2rem; bottom: 1.25rem; width: 2.5rem; height: 2.5rem; border: 2px solid currentColor; border-radius: 50%; color: var(--harbor-green); content: "↓"; display: grid; place-items: center; font-size: 1.2rem; }
.tide-event.high::after { color: var(--ochre); content: "↑"; }
.tide-sequence, .tide-type { display: block; font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.tide-sequence { margin-bottom: 2.6rem; color: var(--muted); }
.tide-type { color: var(--harbor-green); }
.tide-event.high .tide-type { color: var(--ochre); }
.tide-event strong { display: block; margin: .3rem 0 .7rem; font: 900 1.55rem var(--sans); letter-spacing: -.02em; }
.tide-event strong small { font: 700 .75rem var(--sans); color: var(--muted); }
.tide-event time { color: var(--ink); font-size: .86rem; }
.tide-loading, .tide-error { grid-column: 1 / -1; min-height: 10rem; padding: 2rem; background: var(--white); color: var(--muted); }
.tide-error { display: grid; gap: .5rem; }
.conditions-disclaimer { max-width: 58rem; margin: 1.2rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.6; }
.leaflet-container { font-family: var(--sans); }
.leaflet-control-attribution { font-size: .62rem; }

/* Tide page: make the live data board the main content */
.tide-hero {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1.35rem;
  padding: clamp(2rem, 4vw, 3.4rem) 0 4.5rem;
}
.tide-hero > div {
  display: grid;
  grid-template-columns: minmax(13rem, .42fr) minmax(0, .58fr);
  align-items: end;
  gap: 1.5rem;
  max-width: none;
}
.tide-hero h1 {
  max-width: 22rem;
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: .98;
}
.tide-hero > div > p {
  max-width: 34rem;
  margin: 0;
  font-family: var(--sans);
  font-size: .95rem;
}

/* Main tide instrument panel */
.sky-water-panel {
  isolation: isolate;
  grid-template-columns: minmax(15rem, .55fr) minmax(28rem, 1.45fr);
  align-items: stretch;
  width: 100%;
  padding: .35rem;
  border: 2px solid var(--navy-peony);
  background:
    linear-gradient(90deg, rgba(35,63,104,.08) 1px, transparent 1px) 0 0 / 2rem 2rem,
    linear-gradient(0deg, rgba(35,63,104,.06) 1px, transparent 1px) 0 0 / 2rem 2rem,
    var(--sandshell);
  box-shadow: 14px 14px 0 rgba(169,207,218,.55);
}
.moon-panel, .tide-graph-panel, .weather-panel, .marine-panel {
  position: relative;
  overflow: hidden;
  border-color: var(--navy-peony);
  background: rgba(255,253,248,.92);
  box-shadow: none;
}
.moon-panel::before, .tide-graph-panel::before, .weather-panel::before, .marine-panel::before {
  position: absolute;
  inset: 0 0 auto;
  height: .55rem;
  content: "";
}
.moon-panel::before { background: var(--sandshell); }
.tide-graph-panel::before { background: var(--pacific-coast); }
.weather-panel::before { background: var(--orangeade); }
.marine-panel::before { background: var(--navy-peony); }
.moon-panel { justify-items: center; background: radial-gradient(circle at 50% 19%, rgba(216,207,188,.52), transparent 8.5rem), var(--white); }
#moon-canvas { width: min(100%, 7.4rem); margin-top: .7rem; }
.moon-copy { width: 100%; }
.tide-graph-panel { background: linear-gradient(180deg, var(--white), rgba(169,207,218,.16)); }
#tide-graph { border: 2px solid rgba(35,63,104,.26); aspect-ratio: 16 / 8; }
.compact-stats { border-color: rgba(35,63,104,.28); background: rgba(35,63,104,.28); }
.compact-stats div { background: rgba(255,253,248,.84); }
.compact-stats dd, .moon-stats dd { color: var(--orangeade); }
.fullscreen-toggle {
  border-color: var(--navy-peony);
  background: var(--white);
  color: var(--navy-peony);
  box-shadow: 3px 3px 0 var(--orangeade);
}
.fullscreen-toggle:hover, .fullscreen-toggle:focus-visible { background: var(--navy-peony); color: var(--white); }

/* Bauhaus/Rand pass: data first, poster discipline, no timid split-screen. */
.tide-hero {
  position: relative;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  padding: 1.55rem 0 3.8rem;
}
.tide-hero::before {
  position: absolute;
  right: clamp(1rem, 6vw, 5rem);
  top: 1.15rem;
  width: clamp(5rem, 11vw, 9rem);
  height: clamp(5rem, 11vw, 9rem);
  border-radius: 50%;
  background: var(--orangeade);
  box-shadow: -3.2rem 3.2rem 0 -.8rem var(--sea-angel), 2.2rem 2.5rem 0 -1.2rem var(--scooter);
  content: "";
  opacity: .92;
  mix-blend-mode: multiply;
}
.tide-hero > div {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(9rem, .26fr) minmax(0, .74fr);
  align-items: end;
  gap: clamp(1rem, 4vw, 3rem);
  padding: 0 0 .55rem;
  border-bottom: 2px solid var(--navy-peony);
}
.tide-hero > div > .section-kicker {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--baleine-blue);
}
.tide-hero h1 {
  max-width: 14rem;
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.35rem, 2.1vw, 2.05rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .92;
}
.tide-hero > div > p {
  max-width: 38rem;
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45;
}
.sky-water-panel {
  z-index: 1;
  grid-template-columns: minmax(13rem, .45fr) minmax(0, 1.55fr);
  grid-template-areas:
    "moon graph"
    "weather graph"
    "marine marine";
  gap: .7rem;
  min-height: 0;
  padding: .7rem;
  border-width: 3px;
  background:
    linear-gradient(90deg, rgba(35,63,104,.075) 1px, transparent 1px) 0 0 / 1.65rem 1.65rem,
    linear-gradient(0deg, rgba(35,63,104,.055) 1px, transparent 1px) 0 0 / 1.65rem 1.65rem,
    var(--sandshell);
  box-shadow: 18px 18px 0 var(--sea-angel);
}
.moon-panel { grid-area: moon; align-content: start; min-height: 19rem; }
.tide-graph-panel { grid-area: graph; align-content: start; }
.weather-panel { grid-area: weather; }
.marine-panel { grid-area: marine; }
.moon-panel, .tide-graph-panel, .weather-panel, .marine-panel {
  border-width: 2px;
  padding: clamp(1rem, 1.8vw, 1.45rem);
}
.tide-graph-panel h2 {
  font: 900 clamp(1.8rem, 3vw, 3rem) var(--sans);
  letter-spacing: -.055em;
  line-height: .9;
}
.tide-graph-panel > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  margin-bottom: .8rem;
}
.tide-graph-panel > div .section-kicker { grid-column: 1 / -1; margin: 0; color: var(--baleine-blue); }
.tide-graph-panel p { max-width: 22rem; margin: .15rem 0 0; }
#tide-graph {
  width: 100%;
  min-height: clamp(24rem, 42vw, 34rem);
  border: 2px solid var(--navy-peony);
  background: var(--white);
}
#moon-canvas { width: min(100%, 6.9rem); margin: .9rem auto 1.25rem; }
.moon-copy h2, .weather-panel h2, .marine-panel h2 { color: var(--navy-peony); font-size: 1.18rem; }
.moon-stats div { border-top-color: rgba(35,63,104,.2); }
.compact-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); border: 2px solid var(--navy-peony); background: var(--navy-peony); }
.marine-stats { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.compact-stats div { min-height: 4.4rem; }
.compact-stats dd { font-size: clamp(.92rem, 1.4vw, 1.12rem); color: var(--orangeade); }
.prediction-section { padding-bottom: 5rem; }
.prediction-heading { border-top: 3px solid var(--navy-peony); padding-top: 1rem; }
.tide-events { border-width: 3px; }
.tide-event { min-height: 9.5rem; background: linear-gradient(180deg, var(--white), rgba(216,207,188,.26)); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
@media (max-width: 920px) {
  .hero, .pier-hero, .lesson-card, .gallery-grid, .tide-hero, .tide-layout { grid-template-columns: 1fr; }
  .sky-water-panel { max-width: none; grid-template-columns: 1fr; grid-template-areas: "graph" "moon" "weather" "marine"; }
  .marine-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #tide-graph { min-height: 22rem; }
  .tide-events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking-card { max-width: 38rem; }
  .detail-list, .split-grid.three, .pier-card-grid, .map-grid, .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-panel:nth-child(2n), .card:nth-child(2n), .detail-list article:nth-child(2n), .shop-grid article:nth-child(2n), .tide-event:nth-child(2n) { border-right: 0; }
  .guide-cta { align-items: flex-start; flex-direction: column; background: var(--white); }
}
@media (max-width: 700px) {
  .page-shell { width: min(100% - 2rem, 1220px); }
  .site-header, .site-footer { align-items: flex-start; flex-direction: column; padding: 1rem 0; }
  .site-nav { justify-content: flex-start; gap: .35rem; }
  .site-nav a { padding: .45rem .4rem; }
  .hero { padding: 4rem 0 5rem; }
  .hero::before { right: 0; top: 2rem; opacity: .35; }
  h1 { font-size: clamp(3.05rem, 16vw, 4.8rem); }
  .hero-footer, .button { width: 100%; }
  .section-heading, .prediction-heading { display: block; }
  .section-kicker { display: block; margin-bottom: .85rem; }
  .split-grid, .split-grid.three, .cards, .detail-list, .pier-card-grid, .map-grid, .shop-grid, .checklist.two-column { grid-template-columns: 1fr; }
  .feature-panel, .card, .detail-list article, .shop-grid article, .tide-event { min-height: 0; border-right: 0; border-bottom: 2px solid var(--deep-ink); }
  .feature-panel:last-child, .card:last-child, .detail-list article:last-child, .shop-grid article:last-child, .tide-event:last-child { border-bottom: 0; }
  .card-number { margin-bottom: 2.4rem; }
  .split-section, .preview, .details, .guide-cta, .final-cta, .pier-directory, .map-section, .article-section, .lesson-grid, .photo-section, .tide-explorer, .prediction-section { padding-bottom: 4.5rem; }
  .guide-cta, .final-cta, .friendly-callout { margin-bottom: 4.5rem; padding: 1.25rem; }
  .page-hero, .page-hero.narrow, .page-hero.guided { padding: 3.5rem 0 3.25rem; text-align: left; }
  .page-hero h1, .pier-hero h1 { font-size: clamp(2.75rem, 16vw, 4.6rem); }
  .photo-placeholder { min-height: 11rem; }
  .prose-card, .lesson-card, .pier-facts { padding: 1.25rem; }
  .pier-hero { padding: 3rem 0 4.5rem; }
  .breadcrumbs { padding-top: 1.25rem; }
  .tide-hero { grid-template-columns: 1fr; padding: 3.5rem 0 4.5rem; }
  .tide-hero > div { grid-template-columns: 1fr; align-items: start; }
  .tide-hero h1 { font-size: clamp(1.85rem, 10vw, 2.8rem); }
  .sky-water-panel { grid-template-columns: 1fr; }
  .sky-water-panel:fullscreen { overflow: auto; align-content: start; }
  .sky-water-panel:fullscreen .moon-panel, .sky-water-panel:fullscreen .tide-graph-panel { min-height: auto; }
  .moon-panel, .weather-panel { grid-template-columns: 1fr; }
  .compact-stats, .marine-stats { grid-template-columns: 1fr; }
  .tide-hero > div { border-bottom-width: 2px; }
  .tide-hero::before { opacity: .28; }
  #tide-graph { min-height: 18rem; }
  #moon-canvas { max-width: 14rem; margin: 0 auto; }
  #tide-map { min-height: 25rem; }
  .tide-events { grid-template-columns: 1fr; }
}

/* Photo-led mastheads: the gradients reserve the final hero-photo footprint until the real assets arrive. */
.photo-page .site-header {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 20;
  width: min(calc(100% - 2rem), 1800px);
  padding: 1.35rem clamp(1rem, 4vw, 4.5rem);
  border-bottom: 0;
  background: transparent;
  color: var(--white);
  transform: translateX(-50%);
  backdrop-filter: none;
}
.photo-page .brand {
  color: var(--white);
  font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  text-shadow: 0 1px 1rem rgba(0, 0, 0, .25);
}
.photo-page .brand-mark {
  border-color: var(--white);
  background: rgba(24, 51, 94, .34);
  color: var(--white);
  box-shadow: inset 0 0 0 4px rgba(255, 253, 248, .18);
}
.photo-page .site-nav a {
  color: rgba(255, 253, 248, .92);
  text-shadow: 0 1px .8rem rgba(0, 0, 0, .35);
}
.photo-page .site-nav a:hover,
.photo-page .site-nav a:focus-visible,
.photo-page .site-nav a.active {
  border-color: var(--orangeade);
  color: var(--white);
}
.photo-page .breadcrumbs {
  position: absolute;
  top: 5.8rem;
  left: 50%;
  z-index: 10;
  width: min(calc(100% - 2rem), 1800px);
  padding: .75rem clamp(1rem, 4vw, 4.5rem) 0;
  color: rgba(255, 253, 248, .78);
  transform: translateX(-50%);
  text-shadow: 0 1px .8rem rgba(0, 0, 0, .35);
}
.photo-page .breadcrumbs a { color: var(--white); }
.photo-led {
  position: relative;
  isolation: isolate;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  color: var(--white);
}
.hero-photo-slot {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 100%;
  background:
    radial-gradient(ellipse at 18% 20%, rgba(169, 207, 218, .86) 0 9%, transparent 33%),
    radial-gradient(ellipse at 80% 28%, rgba(228, 81, 55, .6) 0 8%, transparent 34%),
    linear-gradient(150deg, #6b8dbb 0%, #245c95 42%, #233f68 73%, #18335e 100%);
}
.hero-photo-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-photo-slot::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(172deg, transparent 0 55%, rgba(255, 253, 248, .2) 55.2% 55.7%, transparent 56%),
    repeating-linear-gradient(164deg, transparent 0 4.8rem, rgba(255, 253, 248, .08) 4.85rem 4.95rem, transparent 5rem 9.2rem),
    radial-gradient(ellipse at 50% 100%, rgba(24, 51, 94, .2), transparent 48%);
  content: "";
}
.hero-photo-slot span {
  position: absolute;
  right: clamp(1rem, 4vw, 4.5rem);
  bottom: 1.1rem;
  padding: .45rem .7rem;
  border: 1px dashed rgba(255, 253, 248, .68);
  color: rgba(255, 253, 248, .88);
  font: 900 .66rem var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.photo-led::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11, 31, 59, .18), rgba(11, 31, 59, .26) 42%, rgba(11, 31, 59, .68));
  content: "";
  pointer-events: none;
}
.photo-led > :not(.hero-photo-slot) {
  position: relative;
  z-index: 2;
}
.photo-led .section-kicker,
.photo-led .eyebrow {
  color: rgba(255, 253, 248, .86);
}
.photo-led h1 {
  color: var(--white);
  font-family: var(--sans);
  font-size: clamp(2.15rem, 5vw, 5rem);
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 2px 1.2rem rgba(0, 0, 0, .28);
}
.photo-led p,
.photo-led .intro {
  color: rgba(255, 253, 248, .92);
  text-shadow: 0 1px .8rem rgba(0, 0, 0, .2);
}
.photo-led.page-hero {
  display: flex;
  min-height: clamp(27rem, 43vw, 38rem);
  max-width: none;
  margin-right: 0;
  padding: clamp(10rem, 18vw, 14rem) clamp(1rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.photo-led.page-hero.guided { margin-right: 0; margin-left: calc(50% - 50vw); }
.photo-led.page-hero .section-kicker { display: block; margin-bottom: 1rem; }
.photo-led.page-hero h1 { max-width: 1050px; margin-right: auto; margin-bottom: 1.35rem; margin-left: auto; }
.photo-led.page-hero p { max-width: 52rem; margin-right: auto; margin-left: auto; }
.photo-led.hero {
  display: block;
  min-height: clamp(33rem, 51vw, 46rem);
  padding: clamp(10rem, 18vw, 14rem) clamp(1rem, 6vw, 5rem) 3.5rem;
  text-align: center;
}
.photo-led.hero::before { display: none; }
.photo-led.hero .hero-copy {
  max-width: 980px;
  margin: 0 auto;
}
.photo-led.hero .hero-copy h1 { max-width: 1000px; margin-right: auto; margin-left: auto; }
.photo-led.hero .intro { margin-right: auto; margin-left: auto; }
.photo-led.hero .hero-footer { justify-content: center; }
.photo-led.hero .launch-note { margin-right: auto; margin-left: auto; }
.photo-led.hero .booking-card {
  max-width: 700px;
  margin: 2.5rem auto 0;
  text-align: left;
}
.photo-led.pier-hero {
  display: block;
  min-height: clamp(34rem, 52vw, 45rem);
  padding: clamp(10rem, 18vw, 14rem) clamp(1rem, 6vw, 5rem) 3.5rem;
  text-align: center;
}
.photo-led.pier-hero .pier-hero-copy { max-width: 940px; margin: 0 auto; }
.photo-led.pier-hero .pier-hero-copy h1 { max-width: 1100px; margin-right: auto; margin-left: auto; }
.photo-led.pier-hero .pier-hero-copy p { max-width: 52rem; margin-right: auto; margin-left: auto; }
.photo-led.pier-hero .pier-facts {
  max-width: 650px;
  margin: 2.5rem auto 0;
  text-align: left;
}

/* History notes sit below the location map and remain readable beside the photo-led top. */
.pier-history-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .65fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
.pier-history-card,
.pier-lore-card {
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 2px solid var(--deep-ink);
  box-shadow: var(--shadow);
}
.pier-history-card { background: linear-gradient(135deg, var(--white), rgba(169, 207, 218, .18)); }
.pier-lore-card { background: var(--navy-peony); color: var(--white); }
.pier-history-card h3,
.pier-lore-card h3 { margin-bottom: .8rem; font-size: clamp(1.6rem, 3vw, 2.35rem); }
.pier-lore-card h3,
.pier-lore-card p { color: var(--white); }
.pier-lore-card .section-kicker { color: var(--sandshell); }
.pier-history-card > p,
.pier-lore-card > p { line-height: 1.65; }
.history-list {
  display: grid;
  gap: .85rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}
.history-list li {
  padding: .05rem 0 .05rem 1rem;
  border-left: 4px solid var(--orangeade);
  color: var(--muted);
  line-height: 1.55;
}
.history-list strong { display: block; color: var(--deep-ink); }
.history-source {
  margin: 1.35rem 0 0;
  font-size: .76rem;
  line-height: 1.55;
}
.history-source a { color: var(--ochre); font-weight: 800; text-underline-offset: .2rem; }

@media (max-width: 920px) {
  .pier-history-grid { grid-template-columns: 1fr; }
}
/* Keep display headlines balanced and compact across the photo-led layouts. */
h1, h2, h3 { text-wrap: balance; }

/* Final wordmark asset: swap this reserved image only if the supplied logo changes. */
.brand-wordmark {
  display: block;
  width: clamp(10.5rem, 18vw, 16rem);
  height: auto;
}
.photo-page .brand { gap: 0; font-size: 0; }
body:not(.photo-page) .site-header {
  border-bottom-color: var(--deep-ink);
  background: var(--navy-peony);
}
body:not(.photo-page) .site-header .brand-wordmark { width: clamp(10.5rem, 18vw, 16rem); }
body:not(.photo-page) .site-header .site-nav a { color: rgba(255, 253, 248, .92); }
body:not(.photo-page) .site-header .site-nav a:hover,
body:not(.photo-page) .site-header .site-nav a:focus-visible,
body:not(.photo-page) .site-header .site-nav a.active { border-color: var(--orangeade); color: var(--white); }

.photo-page .tide-hero {
  padding-top: clamp(3rem, 6vw, 5rem);
}
.photo-page .tide-hero::before { display: none; }
.tide-planner-intro {
  display: grid;
  grid-template-columns: minmax(13rem, .38fr) minmax(0, .62fr);
  align-items: end;
  gap: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--navy-peony);
}
.tide-planner-intro .section-kicker { grid-column: 1 / -1; margin: 0; color: var(--baleine-blue); }
.tide-planner-intro h2 {
  max-width: none;
  margin: 0;
  color: var(--navy-peony);
  font: 900 clamp(1.6rem, 3vw, 2.65rem) var(--sans);
  letter-spacing: -.045em;
  line-height: .95;
}
.tide-planner-intro p {
  max-width: 38rem;
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.5;
}
.photo-page .tide-hero > .tide-planner-intro {
  grid-template-columns: minmax(13rem, .38fr) minmax(0, .62fr);
}
.photo-page .tide-hero > .tide-planner-intro > .section-kicker { grid-column: 1 / -1; }
.photo-page .tide-hero > .tide-planner-intro > p {
  max-width: 38rem;
  margin: 0;
  font-family: var(--sans);
  font-size: .95rem;
}

@media (max-width: 700px) {
  .photo-page .site-header {
    width: calc(100% - 2rem);
    padding: 1rem 0;
    align-items: flex-start;
  }
  .photo-page .site-nav { gap: .2rem; }
  .photo-page .site-nav a { color: rgba(255, 253, 248, .94); }
  .photo-page .breadcrumbs { top: 8.7rem; padding: .5rem 0 0; }
  .photo-led.page-hero,
  .photo-led.hero,
  .photo-led.pier-hero {
    min-height: 32rem;
    padding: 12rem 1rem 3rem;
  }
  .photo-led.hero { min-height: 39rem; }
  .photo-led.pier-hero { min-height: 38rem; }
  .photo-led h1 { font-size: clamp(1.65rem, 8vw, 3rem); letter-spacing: .05em; }
  .photo-led.pier-hero h1 { font-size: clamp(1.45rem, 7.2vw, 3rem); }
  .photo-led.hero .hero-footer { justify-content: stretch; }
  .photo-led.hero .booking-card { margin-top: 2rem; }
  .photo-page .tide-hero > .tide-planner-intro { grid-template-columns: 1fr; align-items: start; }
}