picture{display:contents}img{height:auto}
@font-face { font-family: "Anton"; src: url("fonts/anton-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --cream: #faf3e4;
  --paper: #fffdf6;
  --sand: #f0e3c7;
  --sand-deep: #e5d3ac;
  --ink: #22333d;
  --ink-soft: #5c6e78;
  --blue: #0f7fba;
  --blue-deep: #0b628f;
  --line: #e0d2b4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: "DM Sans", system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  font-size: 1.03rem;
}

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

a { color: var(--blue-deep); }

.wrap { max-width: 1080px; margin: 0 auto; padding-left: 1.2rem; padding-right: 1.2rem; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--blue); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  padding: .8rem 1.4rem;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.brand { text-decoration: none; color: var(--ink); line-height: 1.05; }
.brand .bt {
  display: block;
  font-family: "Anton", sans-serif;
  font-size: 1.9rem;
  letter-spacing: .02em;
}
.brand .bt em { font-style: normal; color: var(--blue); }
.brand .bs {
  display: block;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: .15rem;
}
.topnav { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.topnav a {
  text-decoration: none; color: var(--ink);
  font-weight: 700; font-size: .95rem;
  padding-bottom: .15rem;
  border-bottom: 2px solid transparent;
}
.topnav a:hover { border-bottom-color: var(--blue); }
.topnav a[aria-current="page"] { border-bottom-color: var(--blue); color: var(--blue-deep); }
.topnav .navcta {
  background: var(--blue); color: #fff;
  padding: .5rem 1.1rem; border-radius: 999px;
  border-bottom: none;
}
.topnav .navcta:hover { background: var(--blue-deep); border-bottom: none; }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-block;
  background: var(--blue); color: #fff;
  text-decoration: none; font-weight: 700;
  padding: .85rem 1.7rem; border-radius: 999px;
  font-size: 1.02rem;
}
.btn:hover { background: var(--blue-deep); }
.btn.alt { background: var(--ink); }
.btn.alt:hover { background: var(--blue-deep); }
.ghostlink { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 2px solid rgba(255,255,255,.5); padding-bottom: .1rem; }
.ghostlink:hover { border-bottom-color: #fff; }
.ghostlink.dark { color: var(--blue-deep); border-bottom-color: rgba(11,98,143,.35); }
.ghostlink.dark:hover { border-bottom-color: var(--blue-deep); }

/* ---------- hero ---------- */
.hero { position: relative; }
.hero > img { width: 100%; height: min(60vh, 518px); object-fit: cover; object-position: center bottom; }
.hero > img.hero-nudge-up { object-position: center 75%; }
.hero > .fader.hero-fader { width: 100%; height: min(60vh, 518px); background: none; }
.hero .fader.hero-fader .slide { padding: 0; gap: 0; }
.hero .fader.hero-fader .slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: cover;
  border-radius: 0; box-shadow: none;
}
.hero-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 6rem 0 2.6rem;
  background: linear-gradient(180deg, rgba(24,38,48,0) 0%, rgba(24,38,48,.82) 78%);
  color: var(--cream);
}
.hero h1 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2rem, 5.4vw, 4rem);
  line-height: 1.05;
  letter-spacing: .01em;
  max-width: 18ch;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hero .lede {
  margin-top: 1rem;
  font-size: clamp(1.02rem, 1.8vw, 1.25rem);
  max-width: 52ch;
  color: #f4ecd9;
}
.hero-cta { margin-top: 1.4rem; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }

/* ---------- chips ---------- */
.chipsband { border-bottom: 1px solid var(--line); background: var(--paper); }
.chips {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
  max-width: 1080px; margin: 0 auto; padding: 1.1rem 1.2rem;
}
.chips li {
  border: 1.5px solid var(--sand-deep);
  background: var(--cream);
  border-radius: 999px;
  padding: .4rem 1.05rem;
  font-weight: 700; font-size: .92rem;
  color: var(--ink);
}

/* ---------- facebook log ---------- */
.log {
  display: grid; grid-template-columns: 2fr 3fr; gap: 2.6rem;
  align-items: center;
  padding-top: 3.6rem; padding-bottom: 3.6rem;
}
.log-photo img { width: 100%; border-radius: 10px; box-shadow: 0 12px 34px rgba(34,51,61,.18); }
.log-photo figcaption { margin-top: .6rem; font-size: .88rem; color: var(--ink-soft); }
.kicker {
  font-family: "Caveat", cursive;
  font-weight: 700;
  color: var(--blue);
  font-size: 1.5rem;
  line-height: 1.2;
}
.hand {
  font-family: "Caveat", cursive;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  line-height: 1.35;
  margin-top: .6rem;
  color: var(--ink);
}

/* ---------- catch wall ---------- */
.wallwrap { padding-bottom: 0; }
.wallhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 1rem; padding-bottom: 1.1rem;
}
h2 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .015em;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.1;
}
.wall { display: grid; grid-template-columns: repeat(3, 1fr); }
.cell { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--sand); }
.cell img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  animation: fade3 18s linear infinite;
  animation-delay: calc(var(--i) * 6s + var(--o, 0s));
}
.wall:hover .cell img { animation-play-state: paused; }

/* ---------- two paths ---------- */
.paths {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem;
  padding-top: 3.4rem; padding-bottom: 3.4rem;
}
.path { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.path img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.path-body { padding: 1.3rem 1.4rem 1.5rem; }
.path-body h3 {
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 1.3rem; letter-spacing: .02em; margin-bottom: .4rem;
}
.path-body p { color: var(--ink-soft); margin-bottom: .8rem; }

/* ---------- boat teaser ---------- */
.boatband { background: var(--sand); padding: 3rem 0; }
.boatband-in { display: grid; grid-template-columns: 2fr 3fr; gap: 2.6rem; align-items: center; }
.boatband-in img { width: 100%; border-radius: 10px; box-shadow: 0 12px 34px rgba(34,51,61,.18); }
.boatband-in h2 { margin: .2rem 0 .7rem; }
.boatband-in p { margin-bottom: 1.2rem; max-width: 46ch; }

/* ---------- faq ---------- */
.faq { padding-top: 3.4rem; padding-bottom: 3.6rem; }
.faq h2 { margin-bottom: 1.4rem; }
.faqgrid { display: grid; gap: 1.1rem; }
.faqitem {
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 1.1rem 1.4rem;
}
.faqitem h3 {
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: .02em; margin-bottom: .4rem;
}
.faqitem p { color: var(--ink-soft); }
.faqitem img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: var(--paper); border-radius: 8px; margin-bottom: .8rem;
}

/* ---------- target species grid ---------- */
.faqgrid.species-grid { display: block; column-count: 3; column-gap: 1.4rem; }
.species-card { break-inside: avoid; margin-bottom: 1.4rem; }
.faqitem.species-card img { width: 50%; margin: 0 auto .8rem; display: block; }

@media (max-width: 860px) {
  .faqgrid.species-grid { column-count: 2; }
}
@media (max-width: 640px) {
  .faqgrid.species-grid { column-count: 1; }
}

/* ---------- grab band ---------- */
.grab { background: var(--blue); color: #fff; padding: 3.6rem 0; text-align: center; }
.grab h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.grab-act { margin: 1.6rem 0 0; }
.grab-lede { margin: .8rem auto 0; max-width: 52ch; color: #eaf5fc; }
.pin {
  margin: 1.5rem auto 0;
  max-width: 46rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  padding: 1.1rem 1.4rem;
  font-size: 1rem;
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
  text-align: left;
}
.hail { margin-top: 1.6rem; display: flex; justify-content: center; gap: .9rem; flex-wrap: wrap; }
.hail a {
  display: inline-block;
  color: #fff; text-decoration: none; font-weight: 700;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 999px;
  padding: .65rem 1.5rem;
}
.hail a:hover { background: #fff; color: var(--blue-deep); }
.dock { margin-top: 1.6rem; font-size: .95rem; color: #d9edf8; }

/* ---------- footer ---------- */
.foot { background: var(--sand); border-top: 1px solid var(--sand-deep); padding: 2.4rem 0 2.8rem; text-align: center; }
.fbrand { font-family: "Anton", sans-serif; font-size: 1.25rem; letter-spacing: .04em; }
.fbrand em { font-style: normal; color: var(--blue); }
.fline { color: var(--ink-soft); font-size: .95rem; margin-top: .3rem; }
.tags { margin-top: 1rem; font-size: .85rem; color: var(--blue-deep); font-weight: 700; letter-spacing: .02em; }
.fnavlinks { margin-top: 1.1rem; display: flex; justify-content: center; gap: 1.4rem; flex-wrap: wrap; }
.fnavlinks a { color: var(--ink); font-weight: 700; font-size: .9rem; text-decoration: none; }
.fnavlinks a:hover { color: var(--blue-deep); }

/* ---------- subpage heads & sections ---------- */
.phead { padding-top: 3rem; padding-bottom: 1.6rem; }
.phead h1 {
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.08; letter-spacing: .01em;
  max-width: 22ch; margin-top: .3rem;
}
.lede-ink { margin-top: .9rem; font-size: 1.15rem; color: var(--ink-soft); max-width: 56ch; }

.wideframe { padding-bottom: 2.6rem; }
.wideframe img { width: 100%; border-radius: 10px; box-shadow: 0 14px 38px rgba(34,51,61,.2); }
.wideframe figcaption { margin-top: .6rem; font-size: .88rem; color: var(--ink-soft); }

.specs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  padding-top: 1rem; padding-bottom: 3.2rem;
}
.speccol h2 { font-size: 1.15rem; border-bottom: 2px solid var(--blue); display: inline-block; padding-bottom: .25rem; margin-bottom: .8rem; }
.speccol ul { list-style: none; }
.speccol li { padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .98rem; }

.tripsec { padding-top: .4rem; padding-bottom: 2rem; }
.tripsec h2 { margin-bottom: .6rem; }
.tripsec p { max-width: 62ch; }

.included { padding-top: 3rem; padding-bottom: 1rem; }
.incgrid {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem;
  margin-top: 1rem;
}
.incgrid li {
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: .9rem 1.2rem; font-weight: 700;
}

.duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem;
  padding-top: 2.6rem; padding-bottom: 2.6rem;
}
.duo img { width: 100%; border-radius: 10px; box-shadow: 0 10px 28px rgba(34,51,61,.16); }
.duo figcaption { margin-top: .55rem; font-size: .88rem; color: var(--ink-soft); }

.cruise { background: var(--sand); padding: 3rem 0; }
.cruise-in { display: grid; grid-template-columns: 2fr 3fr; gap: 2.6rem; align-items: center; }
.cruise-in img { width: 100%; border-radius: 10px; box-shadow: 0 12px 34px rgba(34,51,61,.18); }
.cruise-in h2 { margin: .2rem 0 .7rem; }
.cruise-in p { max-width: 50ch; }

.rates { padding-top: 3rem; padding-bottom: 3.2rem; }
.rates h2 { font-size: 1.3rem; margin-bottom: .5rem; }
.rates p { max-width: 58ch; color: var(--ink-soft); }

.flagband { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 3rem 0; margin-top: 1rem; }
.flag-in { display: grid; grid-template-columns: 3fr 2fr; gap: 2.6rem; align-items: center; }
.flag-in img { width: 100%; border-radius: 10px; box-shadow: 0 10px 28px rgba(34,51,61,.16); }
.flag-in h2 { margin: .2rem 0 .6rem; }

/* ---------- fader galleries ---------- */
.galsec { padding: 1rem 0 1.4rem; }
.fader {
  position: relative;
  overflow: hidden;
  background: var(--sand);
  height: min(82vh, 680px);
}
.fader.tall { height: min(88vh, 760px); }
.fader .slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .7rem;
  padding: 1.4rem 1.2rem 3.4rem;
  opacity: 0;
}
.fader .slide img {
  max-height: calc(100% - 6rem);
  max-width: min(94%, 900px);
  width: auto;
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(34,51,61,.22);
}
.fader .slide figcaption { font-size: .92rem; color: var(--ink); font-weight: 700; text-align: center; }

.fader.n4 .slide { animation: fade4 24s linear infinite; animation-delay: calc(var(--i) * 6s); }
.fader.n12 .slide { animation: fade12 72s linear infinite; animation-delay: calc(var(--i) * 6s); }

.fader:hover .slide, .fader:focus-within .slide { animation-play-state: paused; }

/* JS-enhanced state */
.fader.js .slide { animation: none; opacity: 0; transition: opacity .7s ease; }
.fader.js .slide.on { opacity: 1; }
.fnav {
  position: absolute; left: 0; right: 0; bottom: .7rem;
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  z-index: 5;
}
.farrow {
  font-family: inherit;
  background: var(--ink); color: var(--cream);
  border: none; border-radius: 999px;
  width: 2.2rem; height: 2.2rem;
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
}
.farrow:hover { background: var(--blue-deep); }
.fdots { display: flex; gap: .45rem; }
.fdot {
  width: .75rem; height: .75rem; border-radius: 50%;
  border: 2px solid var(--ink); background: transparent; cursor: pointer; padding: 0;
}
.fdot[aria-current="true"] { background: var(--blue); border-color: var(--blue); }

/* ---------- keyframes ---------- */
@keyframes fade3 {
  0% { opacity: 1; } 27% { opacity: 1; } 36% { opacity: 0; }
  91% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes fade4 {
  0% { opacity: 1; } 20% { opacity: 1; } 27% { opacity: 0; }
  93% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes fade12 {
  0% { opacity: 1; } 5.5% { opacity: 1; } 9% { opacity: 0; }
  94.5% { opacity: 0; } 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fader .slide, .cell img { animation: none !important; }
  .fader .slide:first-child, .cell img:first-child { opacity: 1; }
  .fader.js .slide { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .log, .boatband-in, .cruise-in, .flag-in { grid-template-columns: 1fr; gap: 1.6rem; }
  .log-photo { max-width: 420px; }
  .boatband-in img, .cruise-in img { max-width: 460px; }
  .specs { grid-template-columns: 1fr; gap: 1.6rem; }
  .paths { grid-template-columns: 1fr; }
  .fader, .fader.tall { height: min(74vh, 600px); }
}
@media (max-width: 640px) {
  .wall { grid-template-columns: 1fr 1fr; }
  .cell:nth-child(3) { display: none; }
  .duo { grid-template-columns: 1fr; }
  .incgrid { grid-template-columns: 1fr; }
  .hero > img, .hero > .fader.hero-fader { height: 50vh; }
  .brand .bt { font-size: 1.6rem; }
}

/* ---------- the dated log ---------- */
.logsec { padding: 2.6rem 0 1rem; }
.logsec h2 { margin: .2rem 0 .5rem; }
.catchlog { margin-top: 2rem; border-top: 2px solid var(--line); }
.logent { padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.logdate {
  display: flex; align-items: baseline; gap: .8rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-deep); margin-bottom: .8rem;
}
.logdate .logsrc {
  font-weight: 600; letter-spacing: .04em; text-transform: none;
  font-size: .78rem; color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid var(--sand-deep);
}
.logdate .logsrc:hover { color: var(--blue); border-bottom-color: var(--blue); }
/* Columns, not a grid: a portrait photo and a landscape one can sit side by
   side and each keeps its own height. No crop, no letterbox. */
.logshots { columns: 2; column-gap: .5rem; margin-bottom: .95rem; }
.logshots.n1 { columns: 1; max-width: 27rem; }
.logshots.n3, .logshots.n5, .logshots.n6 { columns: 3; }
.logshots img {
  display: block; width: 100%; height: auto; margin: 0 0 .5rem;
  break-inside: avoid; border-radius: 10px;
  box-shadow: 0 8px 22px rgba(34,51,61,.14);
}
.logtext { max-width: 62ch; }
.logtext p { margin: 0 0 .7rem; font-size: 1.02rem; line-height: 1.62; color: var(--ink); }
.logtext p:last-child { margin-bottom: 0; }
@media (max-width: 46rem) {
  .logshots, .logshots.n3, .logshots.n5, .logshots.n6 { columns: 2; }
  .logtext p { font-size: .98rem; }
}