/* Home: hero cartouche, the gulf chart, sheet teasers, facts. Scoped to body.page-home. */

/* ---------- Hero: the island photograph edge to edge, the title cartouche over it ---------- */
.page-home .hero__chart { position: relative; }
.page-home .hero__frame {
  height: calc(100svh - var(--header-h));
  min-height: 34rem;
  max-height: 64rem;
}
.page-home .hero__frame > .inset__pic { height: 100%; }
.page-home .hero__frame > .inset__pic img { object-position: center 58%; }

.page-home .cartouche {
  position: absolute;
  left: 2.5rem;
  bottom: 2.5rem;
  z-index: 1;
  display: grid;
  gap: var(--s-3);
  width: min(35rem, 44%);
  padding: var(--s-4) var(--s-4) var(--s-3);
  border: 1px solid var(--neat);
  outline: 1px solid var(--neat);
  outline-offset: -7px;
  box-shadow: 0 28px 48px -28px rgb(0 0 0 / .55);
}
.page-home .cartouche__title {
  font: 600 clamp(2.25rem, .5rem + 5vw, 5rem)/.94 var(--sans);
  font-stretch: 125%;
  letter-spacing: .04em;
  text-transform: uppercase;
  view-transition-name: sheet-title;
}
.page-home .cartouche__line { font-size: var(--fs-lede); line-height: 1.4; max-width: 26em; }

@media (max-width: 767px) {
  .page-home .hero__sheet { padding-bottom: var(--gutter); }
  .page-home .hero__frame { display: flex; flex-direction: column; gap: var(--gutter); height: auto; min-height: 0; max-height: none; }
  .page-home .hero__frame > .inset__pic { height: 40svh; min-height: 15rem; }
  .page-home .hero__frame > .inset__pic img { object-position: 58% 50%; }
  .page-home .cartouche { position: static; width: auto; margin-inline: var(--gutter); padding: var(--s-3) var(--s-3) var(--s-2); box-shadow: none; }
  .page-home .cartouche__title { font-size: 2.75rem; }
  .page-home .cartouche .actions { gap: 0 var(--s-3); }
  .page-home .wplate > .inset { --ar: 4 / 3; }
}

/* ---------- The gulf chart ---------- */
.page-home .gulf__layout { display: grid; gap: var(--s-6) var(--col-gap); align-items: start; }
@media (min-width: 1024px) {
  .page-home .gulf__layout { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .page-home .gulf__chart { grid-column: 1 / span 7; }
  .page-home .gulf__plates { grid-column: 8 / -1; position: sticky; top: calc(var(--header-h) + var(--s-3)); }
}
.page-home .gulf__map { position: relative; container: gulfmap / inline-size; }
.page-home .gulf__svg { width: 100%; height: auto; }

/* chart paint */
.page-home .c-sea { fill: var(--water-0); }
/* wide strokes of the coast draw the depth and relief bands; round joins keep them smooth */
.page-home :is(.c-depth, .c-hills) use { stroke-linejoin: round; stroke-linecap: round; }
.page-home .c-sea-s { fill: none; stroke: var(--water-0); }
.page-home .c-iso { fill: none; stroke: color-mix(in oklab, var(--ink) 30%, var(--water-0)); }
.page-home .c-shoal { fill: none; stroke: var(--water-200); }
.page-home .c-land { fill: var(--land-700); }
.page-home .c-hill { fill: none; stroke: color-mix(in oklab, var(--pale) 16%, var(--land-700)); }
.page-home .c-land-s { fill: none; stroke: var(--land-700); }
.page-home .c-grat { fill: none; stroke: color-mix(in oklab, var(--ink-2) 55%, var(--pale)); stroke-width: .75; stroke-dasharray: 2 5; opacity: .7; }
.page-home .c-ticks { fill: none; stroke: color-mix(in oklab, var(--ink-2) 55%, var(--pale)); stroke-width: 1; }
.page-home .c-leg { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 4; }
.page-home .c-hatch { stroke: color-mix(in oklab, var(--ink) 18%, transparent); stroke-width: 1; }

/* range rings: the one authored moment, drawn out from the dock */
.page-home .ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.25;
  transform-box: view-box;
  transform-origin: 514px 238px;
  transition: transform 1600ms var(--ease-out) calc(var(--i) * 180ms), opacity 600ms var(--ease-out) calc(var(--i) * 180ms);
}
.page-home .ring--in { fill: color-mix(in oklab, var(--land-500) 13%, transparent); }
.page-home .ring--out { stroke-dasharray: 6 5; }
.page-home .ring--band { fill: url(#hatch); stroke: none; }
.page-home .ring-lbls { transition: opacity 400ms var(--ease-out) 1100ms; }
.page-home .is-pending .ring { transform: scale(.04); opacity: 0; }
.page-home .is-pending .ring-lbls { opacity: 0; transition: none; }

/* chart lettering, by the type law */
.page-home .gulf__svg text { paint-order: stroke; stroke-linejoin: round; stroke-width: 3px; }
.page-home .c-cap { font-family: var(--sans); font-stretch: 125%; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; }
.page-home .c-cap--lg { font-size: 15px; font-weight: 500; letter-spacing: .3em; }
.page-home .c-cap--home { font-size: 12px; font-weight: 700; }
.page-home .c-cap--title { font-size: 15px; font-weight: 700; letter-spacing: .2em; }
.page-home .c-it { font-family: var(--serif); font-style: italic; font-size: 15.5px; }
.page-home .c-it--lg { font-size: 30px; letter-spacing: .02em; fill: var(--ink-2); }
.page-home .c-it--sm { font-size: 13px; }
.page-home .c-fig { font-family: var(--sans); font-stretch: 125%; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.page-home .c-fig--sm { font-size: 9.5px; letter-spacing: .1em; }
.page-home .c-on-sea { fill: var(--ink); stroke: var(--water-0); }
.page-home .c-it--lg.c-on-sea { fill: var(--ink-2); }
.page-home .c-on-land { fill: var(--pale); stroke: var(--land-700); }
.page-home .c-edge { fill: color-mix(in oklab, var(--ink-2) 55%, var(--pale)); stroke: none; }
.page-home .c-block text { fill: var(--ink); stroke: none; }
.page-home .c-block-bg { fill: var(--water-0); stroke: var(--ink); stroke-width: 1; }
.page-home .c-block-line { fill: none; stroke: var(--ink); stroke-width: .75; }
.page-home .c-scale { fill: var(--ink); }
.page-home .c-scale-line { stroke: var(--ink); stroke-width: 1; }

/* static waypoint marks (no script); the buttons replace them once live */
.page-home .c-wpt circle { fill: var(--water-0); stroke: var(--ink); stroke-width: 1.5; }
.page-home .c-wpt circle.c-wpt-dot { fill: var(--ink); stroke: none; }
.page-home circle.c-wpt--home { fill: var(--mango); stroke: var(--ink); stroke-width: 1.5; }
.page-home .is-live .c-wpts { display: none; }

@container gulfmap (max-width: 560px) {
  .page-home .c-wl, .page-home .c-minor, .page-home .c-edge, .page-home .c-block, .page-home .c-cap--home { display: none; }
  .page-home .c-cap, .page-home .c-cap--home { font-size: 22px; }
  .page-home .c-cap--lg { font-size: 21px; letter-spacing: .2em; }
  .page-home .c-it--lg { font-size: 42px; }
  .page-home .c-fig { font-size: 21px; }
  .page-home .gulf__svg text { stroke-width: 5px; }
}
@container gulfmap (min-width: 561px) and (max-width: 680px) {
  .page-home .c-cap, .page-home .c-cap--home { font-size: 14px; }
  .page-home .c-it { font-size: 18px; }
  .page-home .c-it--lg { font-size: 34px; }
  .page-home .c-fig { font-size: 13px; }
  .page-home .c-minor, .page-home .c-block { display: none; }
}

/* waypoint buttons: real buttons over the chart */
.page-home .wp {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.375rem 0 0 -1.375rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.page-home .wp::before,
.page-home .wp::after { content: ""; grid-area: 1 / 1; border-radius: 50%; }
.page-home .wp::before {
  width: .875rem;
  height: .875rem;
  border: 1.5px solid var(--ink);
  background: radial-gradient(circle, var(--ink) 0 1.6px, var(--water-0) 2.2px);
  transition: transform var(--t-press) var(--ease-out);
}
.page-home .wp--home::before { width: 1.125rem; height: 1.125rem; background: var(--mango); }
.page-home .wp::after {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1.5px var(--water-0), inset 0 0 0 1.5px var(--water-0);
  opacity: 0;
  transform: scale(.8);
  transition: opacity var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out);
}
.page-home .wp[aria-expanded="true"]::after { opacity: 1; transform: none; }
.page-home .wp:active::before { transform: scale(.85); }
.page-home .wp:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
@media (hover: hover) and (pointer: fine) {
  .page-home .wp:hover::after { opacity: .5; transform: none; }
  .page-home .wp[aria-expanded="true"]:hover::after { opacity: 1; }
}
@media (max-width: 559px) {
  .page-home .wp { width: 2.25rem; height: 2.25rem; margin: -1.125rem 0 0 -1.125rem; }
  .page-home .wp::after { width: 1.75rem; height: 1.75rem; }
}

/* waypoint index: chips under the chart where the map is too narrow for its labels */
.page-home .gulf__index { display: none; }
@media (max-width: 639px) {
  .page-home .gulf__index:not([hidden]) { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
}
.page-home .wpi {
  min-height: 2.75rem;
  padding: 0 .875rem;
  border: 1px solid var(--neat);
  border-radius: 0;
  background: var(--field);
  color: var(--fg);
  font: italic 400 1rem/1.2 var(--serif);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
}
/* places in wide caps, water and living things in italic (type law) */
.page-home .wpi:is([data-wp="dock"], [data-wp="golfito"], [data-wp="casa"]) { font: 500 .75rem/1.2 var(--sans); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; }
.page-home .wpi[aria-expanded="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.page-home .wpi:active { transform: scale(.97); }
.page-home .wpi:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

/* the key under the chart */
.page-home .gulf__key {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-2);
  color: var(--fg-2);
  font: 500 .75rem/1.4 var(--sans);
  font-stretch: 125%;
  letter-spacing: .04em;
}
.page-home .gulf__key ul { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: 0; padding: 0; }
.page-home .gulf__key li { display: inline-flex; align-items: center; gap: .5rem; }
.page-home .gulf__key svg { width: 1.5rem; height: 1.5rem; flex: none; }
.page-home .gulf__key p { text-transform: uppercase; letter-spacing: .14em; color: var(--fg); }
.page-home .k-home { fill: var(--mango); stroke: var(--ink); stroke-width: 1.5; }
.page-home .k-in { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.page-home .k-band { fill: url(#hatch); stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 2; }
.page-home .k-leg { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 4; }

/* waypoint plates */
.page-home .gulf__plates { display: grid; gap: var(--s-6); }
.page-home .wplate { display: grid; gap: .875rem; align-content: start; justify-items: start; }
.page-home .wplate > .inset { justify-self: stretch; margin-bottom: var(--s-1); }
.page-home .wplate__h { font-size: var(--fs-h3); }
.page-home .wplate__h.t-place { font-size: 1.0625rem; line-height: 1.4; letter-spacing: .16em; }
.page-home .wplate p { max-width: 34em; }
.page-home .wplate .go { margin-top: var(--s-1); }
html:not(.js) .page-home .wplate > .inset { display: none; }
.js .page-home .wplate:not(.is-on) { display: none; }
.js .page-home .wplate.is-on {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
}
@starting-style {
  .js .page-home .wplate.is-on { opacity: 0; transform: translateY(6px); }
}
@media (min-width: 1024px) {
  .page-home .wplate--text { padding-top: var(--s-4); border-top: 1px solid var(--rule); }
}

/* humpback months: off-season months drawn as ghost cells */
.page-home .months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; width: 100%; max-width: 30rem; margin: var(--s-1) 0 0; padding: 0; list-style: none; }
.page-home .months li { display: grid; place-items: center; aspect-ratio: 1; font: 600 .6875rem/1 var(--sans); font-stretch: 125%; }
.page-home .months abbr { text-decoration: none; }
.page-home .months .is-s { background: var(--land-600); color: var(--pale); }
.page-home .months .is-n { background: var(--water-300); color: var(--ink); }
.page-home .months .is-off { border: 1px dashed var(--neat); color: var(--fg-2); }
.page-home .months__key { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; color: var(--fg-2); font: 500 .75rem/1.4 var(--sans); font-stretch: 125%; letter-spacing: .04em; }
.page-home .months__key .key { width: .75rem; height: .75rem; display: inline-block; }
.page-home .months__key .key--n { background: var(--water-300); margin-left: var(--s-2); }
.page-home .months__key .key--s { background: var(--land-600); }

/* ---------- Wildlife band ---------- */
.page-home .fauna__intro { display: grid; gap: var(--s-2); justify-items: start; }
.page-home .fauna__intro p { color: var(--fg-2); font-size: var(--fs-lede); line-height: 1.45; max-width: 34em; }

/* ---------- Sheet teasers ---------- */
.page-home .sheets__grid { display: grid; gap: var(--s-8) var(--col-gap); }
.page-home .sheet { display: flex; flex-direction: column; gap: var(--s-3); color: inherit; text-decoration: none; }
.page-home .sheet__text { display: grid; gap: .75rem; justify-items: start; }
.page-home .sheet__h { font: 600 1rem/1.3 var(--sans); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; }
.page-home .sheet__text p { max-width: 30em; }
.page-home .sheet .go { min-height: 2rem; }
.page-home .sheet--lead .inset__pic { aspect-ratio: 3 / 2; }
@media (min-width: 1024px) {
  .page-home .sheets__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6) var(--col-gap); }
  .page-home .sheet--lead { grid-column: 1 / span 7; grid-row: 1 / span 2; }
  .page-home .sheet:not(.sheet--lead) { grid-column: 8 / -1; }
  .page-home .sheet--lead .inset { flex: 1; display: flex; flex-direction: column; }
  .page-home .sheet--lead .inset__pic { flex: 1; min-height: 22rem; aspect-ratio: auto; }
  .page-home .sheet--lead .inset__pic img { position: absolute; inset: 0; }
}

/* ---------- Distances and prices ---------- */
.page-home .facts__grid { display: grid; gap: var(--s-8) var(--col-gap); }
.page-home .facts__text { display: grid; gap: var(--s-3); align-content: start; }
.page-home .facts .spec { margin-top: var(--s-2); }
.page-home .facts .spec dd { font-size: 1.125rem; }
.page-home .facts .spec .fig { font-size: 1.1875rem; }
@media (min-width: 1024px) {
  .page-home .facts__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .page-home .facts__text { grid-column: 1 / span 6; }
  .page-home .facts__photo { grid-column: 8 / -1; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-home .ring, .page-home .ring-lbls { transition: none; }
  .page-home .is-pending .ring { transform: none; opacity: 1; }
  .page-home .is-pending .ring-lbls { opacity: 1; }
  .js .page-home .wplate.is-on { transition: opacity var(--t-ui) var(--ease-out); transform: none; }
  .page-home .wp::before, .page-home .wp::after { transition-property: opacity; }
  .page-home .wp:active::before { transform: none; }
}