/* ============================================================
   BAYBAY — island tours sample · JL Digital
   World: "Banca wake" (chosen by Jun 2026-08-20, seed 502fd9c8;
   structure A "Bow view", key 73548b2b — approved comp
   .impeccable/mocks/baybay-comp-390.webp).

   The page rides the outrigger. One trip down the water column:
   pale shallows at the top of the page, then a plunge to the
   deep-blue ledger (the first look over the gunwale), back up
   through the lagoon for the three days, down the channel for
   directions, and full depths for booking. JL's night close is
   the shore you come back to.

   CONTRAST LEDGER (WCAG relative luminance, computed 2026-08-20;
   pixel-sampled again on the built page — see finish record):
     ink #0d3b4f     on shallows #eaf6f4  = 12.61  body AA+
     soft #255e6d    on shallows #eaf6f4  =  6.63  body AA
     nav  #1c5a66    on shallows #eaf6f4  =  7.11  body AA
     foam #dff0ee    on depths  #0d3b4f   = 11.35  body AA+
     lagoon #7fd4c9  on depths  #0d3b4f   =  7.85  body AA
     text #e8f4f2    on channel #175f6c   =  6.66  body AA
     link #b6ece4    on channel #175f6c   =  6.02  body AA
     (lagoon #7fd4c9 on channel measures only 4.2 — links on the
      channel band therefore wear the paler tint above)
     btn  #3a2408    on sun     #f4b95a   =  9.55  body AA+
     foam #dff0ee    on foot    #092b3a   = 13.36  body AA+
   The sun-warm #f4b95a is the ONE action colour — it never
   grounds a paragraph, never borders a card, never decorates.
   ============================================================ */

/* ---- The two site fonts, self-hosted, same files as the whole
        site. Never a third family (locked). ---- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../assets/fonts/fraunces-600.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/public-sans.woff2") format("woff2");
}

:root {
  color-scheme: light; /* one committed look; no half-designed dark twin */

  /* The water column */
  --shallows: #eaf6f4;   /* page-top ground — morning flats */
  --lagoon:   #7fd4c9;   /* bright accents on deep grounds only */
  --channel:  #175f6c;   /* mid-depth band (directions) */
  --depths:   #0d3b4f;   /* deep band (ledger, booking) + ink on light */
  --abyss:    #092b3a;   /* fictional footer — below the booking depth */

  /* Ink on the light grounds */
  --ink:      #0d3b4f;
  --soft:     #255e6d;   /* secondary text on shallows — 6.63:1 */
  --navlink:  #1c5a66;

  /* Text on the deep grounds */
  --foam:     #dff0ee;   /* body on depths/channel */
  --foam-hi:  #f2fbf9;   /* headings on depths */

  /* The one action colour */
  --sun:      #f4b95a;
  --sun-ink:  #3a2408;
  --sun-edge: #b9822e;   /* the pressed-out ledge under the button */

  /* JL's fixed voice — outside the fiction's world */
  --jl-night:  #161826;
  --jl-text:   #e9e9ed;
  --jl-bright: #f3f5fe;
  --jl-accent: #9184d9;

  --fd: "Fraunces", Georgia, "Times New Roman", serif;
  --fb: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Focus ring, re-tinted per band so it never sinks into its ground */
  --ring: var(--channel);
}

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--shallows);
  color: var(--ink);
  font-family: var(--fb);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--fd);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--navlink); }
a:hover { color: var(--ink); }

/* One ring, tinted per band. The offset keeps it off the glyphs. */
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: 20px;
}

/* ---- Skip link — first thing the keyboard meets ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--depths);
  color: var(--foam-hi);
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
  --ring: var(--lagoon);
}
.skip-link:focus-visible { left: 0; }

/* ---- JL truth strip — in normal flow so it prints and survives
        any screenshot crop ---- */
.jl-note {
  background: var(--jl-night);
  color: var(--jl-text);
  padding: 12px 20px;
  font-size: 14px;
  line-height: 1.5;
  --ring: var(--jl-accent);
}
.jl-note p { margin: 0; max-width: 1100px; margin-inline: auto; }
.jl-note strong { color: var(--jl-bright); }
.jl-note a { color: var(--jl-bright); }
/* The dark bands out-cascade the global a:hover — give their links
   a designed hover of their own instead of a silent one. The :not()
   guard keeps this off the JL button: without it, (0,2,1) beats
   .btn-jl's own hover and paints white text on the white fill. */
.jl-note a:hover, .site-foot a:hover,
.jl-close a:not(.btn-jl):hover { color: #ffffff; }

/* ---- Header — on the shallows, light and dry ---- */
.site-head {
  display: flex;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 20px;
}
.brand {
  font-family: var(--fd);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.site-head nav { display: flex; gap: 4px; }
.site-head nav a {
  color: var(--navlink);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  /* Tap target: the padding buys the 44px, not the glyphs */
  padding: 10px 8px;
  border-radius: 4px;
}
/* A hand-cast line, not a browser default: grows from the left */
.site-head nav a { background: linear-gradient(var(--ink), var(--ink)) no-repeat left bottom 8px / 0 2px; transition: background-size 200ms ease-out; }
.site-head nav a:hover { background-size: calc(100% - 16px) 2px; background-position-x: 8px; }

/* ============================================================
   HERO — the bow view. You are already on the boat.
   ============================================================ */
.hero { padding-top: 14px; }
.hero .wrap { position: relative; }

.hero h1 {
  font-size: clamp(4.2rem, 3rem + 8vw, 7.5rem);
  letter-spacing: -0.025em;
  line-height: 0.95;
}
.hero .lede {
  color: var(--soft);
  font-size: 1.05rem;
  max-width: 30ch;
  margin: 8px 0 18px;
}
.hero .lede b { color: var(--ink); }

/* The photograph, full-bleed on mobile: prow at the bottom of the
   frame, the island ahead. The inset shadow is the gunwale's own
   shade — it seats the photo instead of floating it. */
.hero .shot {
  position: relative;
  margin: 0 -20px;
  height: 400px;
  overflow: hidden;
}
.hero .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 88%; /* keep the prow in frame — it IS the concept */
  /* The morning grade is baked into the WebP itself (the source stock
     is a cool matte edit) — no runtime filter cost on the biggest image. */
}
.hero .shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Morning air at the top, hull shadow at the foot of the frame —
     the shadow also earns the caption its contrast */
  background:
    linear-gradient(180deg, rgba(234,246,244,.28), transparent 22%),
    linear-gradient(0deg, rgba(9,43,58,.55), transparent 30%);
}
.hero .shot figcaption {
  position: absolute;
  left: 20px;
  bottom: 12px;
  color: #f2fbf9;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-shadow: 0 1px 8px rgba(9,43,58,.9);
}

/* ---- The wake — foam where the hero meets the deep. The page's
        signature scroll moment: as you scroll the boat under way,
        the foam drifts astern (pure transform, compositor-only).
        Resting state IS the design; motion is the garnish. ---- */
.wake {
  position: relative;
  height: 30px;
  margin-top: -1px; /* heal any subpixel seam against the photo */
  background: linear-gradient(180deg, #1c6673, var(--depths));
  overflow: hidden;
}
.wake i {
  position: absolute;
  /* Wider than its band on the right: the scroll drift slides this
     layer up to 56px left, and the overhang keeps bare band from
     ever showing at the uncovered edge. */
  inset: 0 -60px 0 0;
  /* Foam clings to the waterline — a bright broken edge dissolving
     downward, not beads floating mid-band. The blobs overlap on
     purpose: foam is a texture, never a row of objects. */
  background:
    radial-gradient(80px 22px at 4%  0%, rgba(234,246,244,.85), transparent 68%),
    radial-gradient(110px 26px at 22% 4%, rgba(234,246,244,.6),  transparent 70%),
    radial-gradient(90px 22px at 43% 0%, rgba(234,246,244,.75), transparent 68%),
    radial-gradient(120px 28px at 66% 6%, rgba(234,246,244,.55), transparent 70%),
    radial-gradient(95px 24px at 88% 0%, rgba(234,246,244,.7),  transparent 68%),
    radial-gradient(70px 18px at 104% 8%, rgba(234,246,244,.5), transparent 70%),
    linear-gradient(180deg, rgba(234,246,244,.55), rgba(234,246,244,0) 30%);
}

/* ============================================================
   THE LEDGER — first look over the gunwale: the deep, at once.
   Three days, three round prices, one sun-warm action.
   ============================================================ */
.stops {
  background: var(--depths);
  color: var(--foam);
  padding: 18px 0 34px;
  --ring: var(--lagoon);
}
/* No bare-link rule here on purpose: the band's only anchor is the
   sun button, and a `.stops a` colour would out-rank `.btn`. */
.stops .ledger {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  font-variant-numeric: tabular-nums;
}
.stops .ledger li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid rgba(223,240,238,.18);
}
.stops .ledger b {
  font-family: var(--fd);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--foam-hi);
}
/* Dotted leader pulls the eye from the day to its price —
   ledger grammar, borrowed from the island's sari-sari notebooks */
.stops .ledger li::after {
  content: "";
  order: 2;
  flex: 1;
  min-width: 12px;
  border-bottom: 1px dotted rgba(223,240,238,.35);
  transform: translateY(-4px);
}
.stops .ledger b { order: 1; }
.stops .ledger .peso { order: 3; font-family: var(--fd); color: var(--foam-hi); white-space: nowrap; }
/* Mobile: the action leads the band so it lands inside the first
   viewport (cited adaptation from the comp's list-then-action order —
   the truth strip is taller than the comp allowed for). Desktop
   restores the comp's reading via flex order below. */
.stops .cta { margin: 0 0 14px; }

/* ---- Buttons: the sun is the only thing this bright on the page.
        The ledge under it presses flat on :active — it moves like
        a thing, not a link. ---- */
.btn {
  display: inline-block;
  background: var(--sun);
  color: var(--sun-ink);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border: 0;
  border-radius: 6px;
  padding: 15px 26px;
  box-shadow: 0 3px 0 var(--sun-edge);
  cursor: pointer;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, background-color 120ms ease-out;
}
.btn:hover { background: #f6c477; color: var(--sun-ink); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sun-edge); }

/* ============================================================
   THE THREE DAYS — back up into the lagoon light. Editorial
   rows, not a card grid: each day is a spread, photo one side.
   ============================================================ */
.tours { padding: 44px 0 10px; }
.tours .sec-title { font-size: clamp(2rem, 1.4rem + 3vw, 3.1rem); }
.tours .sec-intro { color: var(--soft); max-width: 52ch; margin: 10px 0 8px; }

.day { padding: 28px 0 34px; }
.day + .day { border-top: 1px solid rgba(13,59,79,.14); }

.day .ph {
  position: relative;
  margin: 0 0 18px;
  overflow: hidden;
  border-radius: 8px;
  /* The frame sits in water: a cast shadow tinted to the ground */
  box-shadow: 0 14px 30px rgba(13,59,79,.18);
}
.day .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* One shared grade so three photographers read as one morning */
  filter: saturate(1.12) contrast(1.02);
}
.day .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(13,59,79,.18), transparent 30%);
}

.day h3 { font-size: 1.7rem; }
.day .fact {
  color: var(--soft);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 2px 0 10px;
}
.day p { max-width: 56ch; }
.day .book-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}
.day .price {
  font-family: var(--fd);
  font-weight: 600;
  font-size: 1.9rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.day .price small {
  font-family: var(--fb);
  font-weight: 600;
  font-size: 13px;
  color: var(--soft);
  display: block;
  letter-spacing: .03em;
}
.day .go {
  font-weight: 700;
  color: var(--navlink);
  text-decoration: none;
  background: linear-gradient(var(--ink), var(--ink)) no-repeat left bottom / 100% 2px;
  padding-bottom: 3px;
}
.day .go:hover { color: var(--ink); }

/* ---- The boat facts — a thin strip of what's aboard, said once ---- */
.aboard {
  background: linear-gradient(180deg, rgba(127,212,201,.16), rgba(127,212,201,.28));
  padding: 20px 0;
}
.aboard ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  font-weight: 600;
  color: var(--ink);
}
.aboard li { display: flex; align-items: baseline; gap: 10px; }
/* A drawn float, not an icon font: one channel-deep dot anchoring each
   fact — lagoon would sink into this band's own lagoon tint */
.aboard li::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--channel);
  align-self: center;
  flex: none;
}

/* ============================================================
   FIND US — down the channel. Directions the island way.
   ============================================================ */
.find {
  background: var(--channel);
  color: #e8f4f2;
  padding: 44px 0 46px;
  --ring: var(--lagoon);
}
.find .sec-title { color: #f2fbf9; font-size: clamp(1.8rem, 1.3rem + 2.5vw, 2.6rem); }
.find address {
  font-style: normal;
  font-weight: 700;
  color: #f2fbf9;
  margin: 12px 0 6px;
}
.find p { max-width: 58ch; }
/* Paler than --lagoon on purpose: lagoon on the channel ground
   measures 4.2:1 — this tint clears body AA (≈6.0:1). */
.find a { color: #b6ece4; }
.find a:hover { color: #f2fbf9; }
/* The operator's best sentence, set like they said it across the
   table — the spread's second column at desktop, a plaque below
   the directions on mobile. */
.find .find-note {
  margin-top: 22px;
}
/* A short lagoon rule ABOVE the promise — the same rule grammar as
   JL's close (not a side-tab; the sentence itself is the object) */
.find .find-note::before {
  content: "";
  display: block;
  width: 44px;
  border-top: 3px solid var(--lagoon);
  margin-bottom: 14px;
}
.find .promise {
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  line-height: 1.4;
  color: #f2fbf9;
  text-wrap: balance;
  margin: 0;
}

/* ============================================================
   BOOK — full depths. The form is a dry thing in a wet world:
   a pale slate you write on, lit like the last light down here.
   ============================================================ */
.book {
  background: var(--depths);
  color: var(--foam);
  padding: 46px 0 54px;
  --ring: var(--lagoon);
}
.book .sec-title { color: var(--foam-hi); font-size: clamp(1.8rem, 1.3rem + 2.5vw, 2.6rem); }
.book .sec-intro { color: var(--foam); max-width: 50ch; margin: 10px 0 22px; }

.book form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 560px;
}
.field label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lagoon);
  margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* never below 16 — stops mobile zoom-jump */
  color: var(--ink);
  background: #f6fbfa;
  border: 1px solid rgba(13,59,79,.35);
  border-radius: 6px;
  padding: 12px 14px;
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}
.field input:hover, .field select:hover, .field textarea:hover { background: #fff; }
.field textarea { min-height: 96px; resize: vertical; }
.field select {
  appearance: none;
  /* Drawn chevron — no icon font, no script */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230d3b4f' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.form-actions .aside-note { margin: 0; font-size: 14px; color: var(--foam); max-width: 34ch; }

/* ---- Fictional footer — the deepest water of the fiction ---- */
.site-foot {
  background: var(--abyss);
  color: var(--foam);
  padding: 26px 0 30px;
  font-size: 14.5px;
  --ring: var(--lagoon);
}
.site-foot .wrap > p { margin: 0 0 4px; }
.site-foot .foot-brand { font-family: var(--fd); font-weight: 600; font-size: 1.2rem; color: var(--foam-hi); }
.site-foot a { color: var(--lagoon); }

/* ---- JL's close — his night, his voice, after the fiction ---- */
.jl-close {
  background: var(--jl-night);
  color: var(--jl-text);
  padding: 40px 0 56px;
  --ring: var(--jl-accent);
}
.jl-close .inner { max-width: 720px; margin: 0 auto; padding-inline: 20px; }
.jl-rule { border: 0; border-top: 2px solid var(--jl-accent); width: 64px; margin: 0 0 24px; }
.jl-close h2 { color: var(--jl-bright); font-size: clamp(1.7rem, 1.3rem + 2vw, 2.4rem); }
.jl-close p { margin: 14px 0; }
.jl-close strong { color: var(--jl-bright); }
.jl-close a { color: var(--jl-bright); }
/* Scoped under .jl-close so this outranks the band's `.jl-close a`
   link colour — otherwise the button text vanishes into its own fill */
.jl-close .btn-jl {
  display: inline-block;
  background: var(--jl-bright);
  color: var(--jl-night);
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  padding: 14px 24px;
  margin: 10px 16px 0 0;
}
.btn-jl:hover { background: #fff; color: var(--jl-night); }

/* ============================================================
   MOTION — entries rise; the wake drifts astern on scroll.
   Every moving thing has a still life that already works.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise 700ms cubic-bezier(0.23, 1, 0.32, 1) both;
  }
  .rise-2 { animation-delay: 90ms; }
  .rise-3 { animation-delay: 180ms; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* The signature: scroll the page and the foam slides astern —
     the boat is under way. Scroll-driven, compositor-only,
     and the wake simply rests where it is when unsupported. */
  @supports (animation-timeline: scroll()) {
    .wake i {
      animation: drift linear both;
      animation-timeline: scroll();
      animation-range: 0 90vh;
    }
    @keyframes drift {
      from { transform: translateX(0); }
      to   { transform: translateX(-56px); }
    }
    /* Tour photos surface as they enter view — settle, no bounce */
    .day .ph {
      animation: surface linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes surface {
      from { opacity: .55; transform: translateY(18px); }
      to   { opacity: 1;   transform: translateY(0); }
    }
  }
}

/* ============================================================
   WIDER WATER — the desktop spreads
   ============================================================ */
@media (min-width: 720px) {
  .stops .wrap {
    display: flex;
    align-items: center;
    gap: 34px;
  }
  .stops .ledger { flex: 1; margin: 0; order: 1; }
  .stops .cta { flex: none; margin: 0; order: 2; }
}

@media (min-width: 900px) {
  .hero { padding-top: 26px; }
  .hero .wrap {
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    gap: 0 44px;
    max-width: 1240px;
  }
  /* The name and its line hold together around the column's middle —
     the photo's height sizes the rows, the text pair sits at the seam */
  .hero h1 { grid-column: 1; align-self: end; }
  .hero .lede { grid-column: 1; align-self: start; max-width: 34ch; margin-top: 14px; }
  /* The photo keeps its portrait truth at desktop: a tall frame,
     prow at its foot, pushed into the wake band below. */
  .hero .shot {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    height: 520px;
    border-radius: 10px 10px 0 0;
    margin-bottom: -30px; /* the hull noses into the wake seam */
    z-index: 1;
    box-shadow: 0 18px 40px rgba(13,59,79,.28);
  }
  .hero .shot img { object-position: center 78%; }

  .day {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 0 48px;
    align-items: center;
    padding: 40px 0 44px;
  }
  .day .ph { margin: 0; height: 340px; }
  /* Every other day flips the spread — the channel tacks */
  .day:nth-of-type(even) .ph { order: 2; }
  .day h3 { font-size: 2.1rem; }

  .find .wrap {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 0 56px;
    align-items: center;
  }
  .find .find-note { margin-top: 0; }

  .book form {
    grid-template-columns: 1fr 1fr;
    max-width: 720px;
  }
  .field-wide, .form-actions { grid-column: 1 / -1; }
}

/* Small phones: the name still fits one line, targets stay big,
   and the action + first price both land inside the first screen */
@media (max-width: 719px) {
  .hero .shot { height: 310px; }
}
@media (max-width: 419px) {
  .stops .ledger li::after { min-width: 8px; }
}

/* ============================================================
   PRINT — someone's uncle will print this. It should survive.
   ============================================================ */
@media print {
  .jl-note, .jl-close { background: #fff; color: #000; }
  .jl-note a, .jl-close a { color: #000; }
  .stops, .find, .book, .site-foot { background: #fff; color: #000; }
  .stops .ledger b, .stops .ledger .peso, .find .sec-title, .find address,
  .book .sec-title, .site-foot .foot-brand { color: #000; }
  .find a, .book a, .site-foot a, .stops a { color: #000; }
  .field label { color: #000; }
  .wake i, .day .ph, .rise { animation: none; }
  .btn, .btn-jl { border: 2px solid #000; box-shadow: none; background: #fff; color: #000; }
}