/* Display font (Oswald) — loaded once here so every page that links this
   sheet gets it from a single source. Must precede all style rules. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');

/* ============================================================
   Crewtrips — Postcard Scrapbook prototype
   Design tokens (see :root below). Brand colours + display font are
   now defined once and referenced via var(); reskin = edit :root.
     --teal · --cream · --sand · --ink · --wood · --rust · --gold · --blueprint
   Also in the palette but intentionally left as literals (one-offs, not
   brand levers): kraft #8B5E3C, dusty-pink #E7B7A3, error-red #C1443A,
   card-white #fff, and the many page-scoped gradient/band tints.
   Type: Oswald (display) · Caveat (handwritten accent) · Nunito Sans (body/UI)
   ============================================================ */

:root {
  --teal:  #0b6e66;   /* primary brand · links · headings */
  --cream: #fcf6ec;   /* page / section background */
  --sand:  #eadfce;   /* card fills · hairline borders */
  --ink:   #3a2e22;   /* body text · dark headings */
  --wood:  #7a6349;   /* muted / secondary text (applied in inline-colour build) */
  --rust:  #e8623f;   /* CTA / accent · year labels */
  --gold:  #e4b93b;   /* highlights */
  --blueprint: #2b5d7c; /* the-boat blueprint diagram only — defined now, applied later */
  --font-display: 'Oswald', sans-serif;
}
/* NB: home.css intentionally re-declares --ink/--rust/--teal with DIFFERENT
   values, scoped to .ct-root (the home container) — not a bug. These :root
   values govern the shared header/footer and every other page; see the header
   comment in assets/css/home.css for why that override is deliberately scoped. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  background-image: radial-gradient(#eadcc4 1px, transparent 1px);
  background-size: 22px 22px;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; }

/* ---------- Buttons (postmark-stamp style) ---------- */

.btn {
  display: inline-block;
  font: 800 13px/1 'Nunito Sans', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 22px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

.btn-coral { background: var(--rust); color: var(--cream); }
.btn-teal  { background: var(--teal); color: var(--cream); font-size: 12px; }

.btn-nav { font-size: 13px; letter-spacing: .05em; padding: 11px 18px; }

.btn-outline-teal {
  display: inline-block;
  margin: 0 4px;
  font: 800 11px/1 'Nunito Sans', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
  border: 2px solid var(--teal);
  padding: 8px 14px;
  box-shadow: none;
}

/* ---------- Header ---------- */

.site-header {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  background: rgba(252, 246, 236, .85);
  border-bottom: 1.5px solid var(--sand);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(4px);
}

.logo { display: inline-flex; align-items: center; }
.logo img { height: 48px; width: auto; display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-link {
  font: 600 15px/1 'Nunito Sans', sans-serif;
  color: #6b5942;
  text-decoration: none;
}

/* Dropdown parents are <button>s — strip the UA chrome so they read as links. */
button.nav-link {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.nav-link.is-active { font-weight: 700; color: var(--teal); }

.burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
.burger span { width: 22px; height: 2px; background: var(--teal); }

.nav-link:focus-visible,
.dropdown a:focus-visible,
.btn-nav:focus-visible,
.burger:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Washi tape ---------- */

.washi {
  position: absolute;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.washi-mustard { background: rgba(228, 185, 59, .73); }
.washi-pink    { background: rgba(231, 183, 163, .78); }

/* ---------- Hero postcard ---------- */

.hero-wrap {
  padding: 60px 48px 48px;
  display: flex;
  justify-content: center;
}

.hero-postcard {
  position: relative;
  transform: rotate(-1.2deg);
  width: 100%;
  max-width: 1032px;
}

.hero-tape-left  { top: -16px; left: 80px;   width: 150px; height: 34px; transform: rotate(-4deg); }
.hero-tape-right { top: -14px; right: 120px; width: 130px; height: 32px; transform: rotate(3deg); }

.postcard-paper {
  background: #fff;
  padding: 16px 16px 22px;
  box-shadow: 0 24px 50px -22px rgba(58, 46, 34, .55);
  border: 1px solid #eee;
}

.hero-photo {
  position: relative;
  height: 440px;
  overflow: hidden;
}

.hero-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stamp {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 78px;
  height: 92px;
  background: var(--cream);
  padding: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
  transform: rotate(5deg);
}

.stamp-inner {
  width: 100%;
  height: 100%;
  border: 2px dashed #8B5E3C;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--teal);
}

.stamp-text {
  font: 700 9px/1.1 'Nunito Sans', sans-serif;
  color: var(--cream);
  text-align: center;
  margin-top: 4px;
  letter-spacing: .04em;
}

.postmark {
  position: absolute;
  top: 26px;
  right: 108px;
  width: 70px;
  height: 70px;
  border: 2px solid rgba(252, 246, 236, .7);
  border-radius: 50%;
  transform: rotate(-12deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.postmark span {
  font: 700 10px/1.1 'Nunito Sans', sans-serif;
  color: rgba(252, 246, 236, .75);
  text-align: center;
  letter-spacing: .05em;
}

.hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 34px 26px;
  background: linear-gradient(180deg, transparent, rgba(11, 110, 102, .62));
}

.hero-kicker {
  font: 700 26px/1 'Caveat', cursive;
  color: #fff;
  opacity: .95;
  transform: rotate(-1deg);
  margin-bottom: 2px;
}

.hero-headline {
  font: 700 58px/.92 'Caveat', cursive;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

.hero-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 8px 2px;
}

/* ---------- Sections ---------- */

.section {
  max-width: 1196px;
  margin: 0 auto;
}

.next-stops   { padding: 34px 48px 20px; }
.sail-with-us { padding: 56px 48px; }
.sponsors     { padding: 12px 48px 60px; }

.section-heading {
  text-align: center;
  margin-bottom: 44px;
}

.handwritten-kicker {
  font: 700 30px/1 'Caveat', cursive;
  color: var(--rust);
  transform: rotate(-1.5deg);
  margin-bottom: 2px;
}

.handwritten-kicker.coral { font-size: 26px; transform: rotate(-1deg); margin-bottom: 4px; }
.handwritten-kicker.kraft { font-size: 24px; color: #8B5E3C; transform: none; }

.section-title {
  font: 800 34px/1 'Nunito Sans', sans-serif;
  color: var(--teal);
  margin: 0;
  letter-spacing: -.01em;
}

/* ---------- Next Stops cards ---------- */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  padding-top: 10px;
}

.card { position: relative; }

.tilt-l2  { transform: rotate(-2deg); }
.tilt-r16 { transform: rotate(1.6deg); }
.tilt-l14 { transform: rotate(-1.4deg); }
.tilt-r22 { transform: rotate(2.2deg); }

.card-tape {
  top: -13px;
  width: 96px;
  height: 26px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
}

.tape-l  { left: 32px; transform: rotate(-6deg); }
.tape-r  { left: 30px; transform: rotate(5deg); }
.tape-l2 { left: 30px; transform: rotate(-4deg); }
.tape-r2 { left: 30px; transform: rotate(6deg); }

.card-paper {
  background: #fff;
  padding: 11px 11px 16px;
  box-shadow: 0 16px 34px -18px rgba(58, 46, 34, .5);
}

.card-photo {
  height: 150px;
  position: relative;
  overflow: hidden;
}

.card-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-needed {
  background: repeating-linear-gradient(45deg, #FBEED9, #FBEED9 6px, #fff 6px, #fff 12px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-needed span {
  font: 700 12px/1 'Nunito Sans', sans-serif;
  color: #c2a878;
  letter-spacing: .04em;
}

.card-title {
  font: 800 17px/1.2 'Nunito Sans', sans-serif;
  color: var(--teal);
  margin: 14px 4px 8px;
}

.card-title.is-muted { color: #b08a5c; }

.card-text {
  font: 400 13px/1.55 'Nunito Sans', sans-serif;
  color: #5c4a37;
  margin: 0 4px 14px;
}

.card-handwritten {
  font: 700 20px/1 'Caveat', cursive;
  color: var(--rust);
  margin: 12px 4px 6px;
  transform: rotate(-2deg);
}

.card-tone-note {
  font: 600 10px/1.3 'Nunito Sans', sans-serif;
  color: #b08a5c;
  margin: 0 4px 8px;
  font-style: italic;
}

.card-placeholder-text {
  font: 400 12px/1.5 'Nunito Sans', sans-serif;
  color: #a3835a;
  margin: 0 4px;
  font-style: italic;
}

/* ---------- Placeholder badge ---------- */

.placeholder-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  background: var(--rust);
  color: var(--cream);
  font: 800 9px/1 'Nunito Sans', sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 8px;
}

.badge-static { top: 14px; right: 14px; padding: 6px 10px; }

/* ---------- Sail With Us ---------- */

.swu-card {
  position: relative;
  transform: rotate(-.6deg);
}

.swu-tape {
  top: -15px;
  left: 120px;
  width: 170px;
  height: 32px;
  transform: rotate(-3deg);
}

.swu-paper {
  background: #fff;
  padding: 16px;
  box-shadow: 0 22px 46px -24px rgba(58, 46, 34, .55);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.swu-photo {
  position: relative;
  min-height: 300px;
  overflow: hidden;
}

.swu-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swu-photo-note {
  position: absolute;
  bottom: 14px;
  left: 14px;
  font: 700 26px/1 'Caveat', cursive;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  transform: rotate(-2deg);
}

.swu-copy {
  padding: 28px 26px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.swu-title {
  font: 800 30px/1.1 'Nunito Sans', sans-serif;
  color: var(--teal);
  margin: 0 0 14px;
}

.swu-text {
  font: 400 15px/1.6 'Nunito Sans', sans-serif;
  color: #5c4a37;
  margin: 0 0 24px;
}

/* ---------- Sponsors ---------- */

.sponsors-box {
  border: 1.5px dashed var(--rust);
  background: repeating-linear-gradient(45deg, #FBEED9, #FBEED9 8px, var(--cream) 8px, var(--cream) 16px);
  padding: 40px;
  position: relative;
}

.sponsors-heading {
  text-align: center;
  margin-bottom: 26px;
}

.sponsors-note {
  font: 400 13px/1.5 'Nunito Sans', sans-serif;
  color: #a3835a;
  margin: 0;
  font-style: italic;
}

.sponsors-row {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

.sponsor-stamp {
  width: 96px;
  height: 96px;
  background: #fff;
  border: 2px dashed #d9b98a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 'Nunito Sans', sans-serif;
  color: #c2a878;
}

.tilt-l4  { transform: rotate(-4deg); }
.tilt-r3  { transform: rotate(3deg); }
.tilt-l2s { transform: rotate(-2deg); }
.tilt-r4  { transform: rotate(4deg); }

/* ---------- Footer ---------- */

.site-footer {
  background: #C9A876;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 20px 20px;
  padding: 48px 48px 28px;
  /* Shared chrome sits above page-level backdrops. The header already does this
     (position:sticky; z-index:20); the footer never needed it until a page shipped
     a position:fixed backdrop — the home page's sea — which, being positioned, paints
     over every static block below it and buried the footer completely. */
  position: relative;
  z-index: 1;
}

.footer-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.4fr;
  gap: 44px;
  padding-bottom: 36px;
  border-bottom: 1.5px dashed rgba(252, 246, 236, .3);
}

/* The home page footer carries an extra "Come aboard" link column that no other
   page has, so it runs four across where the rest of the site runs three. Both
   min-width guards keep this clear of the ≤860px single-column rule below. */
@media (min-width: 861px) {
  .footer-grid-4 {
    grid-template-columns: 1.2fr .8fr .9fr 1.2fr;
    gap: 36px;
  }
}

@media (min-width: 861px) and (max-width: 1024px) {
  .footer-grid-4 { grid-template-columns: 1fr 1fr; gap: 32px 36px; }
}

.footer-logo {
  font: 700 30px/1 'Caveat', cursive;
  color: var(--ink);
  margin-bottom: 12px;
}

.footer-blurb {
  font: 400 14px/1.6 'Nunito Sans', sans-serif;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 280px;
}

.social-row { display: flex; gap: 10px; }

.social-btn {
  width: 38px;
  height: 38px;
  background: rgba(252, 246, 236, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  /* these had no colour of their own, so they computed to the browser's default
     link blue on every page. Nothing rendered blue (the icons are SVGs with their
     own fill), but any text or focus styling that inherits from them would have. */
  color: var(--ink);
}

.footer-heading {
  font: 800 14px/1 'Nunito Sans', sans-serif;
  color: var(--ink);
  margin-bottom: 16px;
}

.footer-linklist {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-linklist a {
  font: 400 14px/1 'Nunito Sans', sans-serif;
  color: var(--ink);
  text-decoration: none;
}

.youtube-card {
  border: 1.5px solid #6f4a0d;
  background: rgba(228, 185, 59, .12);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.youtube-card:hover {
  background: rgba(228, 185, 59, .2);
  transform: translateY(-2px);
}

.play-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(252, 246, 236, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.youtube-card p {
  font: 600 13px/1.4 'Nunito Sans', sans-serif;
  color: var(--ink);
  margin: 0 0 12px;
}

.youtube-card-cta {
  font: 800 12px/1 'Nunito Sans', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #573a05;
  border-bottom: 1.5px solid #6f4a0d;
  padding-bottom: 3px;
}

.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-copyright {
  font: 400 13px/1 'Nunito Sans', sans-serif;
  color: var(--ink);
}

.footer-tagline {
  font: 700 20px/1 'Caveat', cursive;
  color: var(--ink);
}

/* ============================================================
   Inner pages — shared patterns
   (About Us · The Boat · Sail With Us · Contact Us)
   ============================================================ */

.inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* ---------- Page banner ---------- */

.banner {
  position: relative;
  overflow: hidden;
  border-bottom: 6px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-260 { height: 260px; }
.banner-280 { height: 280px; }

.banner-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 110, 102, .35), rgba(20, 42, 58, .55));
}

.banner-title {
  position: relative;
  font: 700 76px/1 'Caveat', cursive;
  color: #fff;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .4);
  transform: rotate(-1.5deg);
  text-align: center;
}

.banner-stamp {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 66px;
  height: 78px;
  background: var(--cream);
  padding: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
  transform: rotate(6deg);
}

.banner-stamp-inner {
  width: 100%;
  height: 100%;
  border: 2px dashed #8B5E3C;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Headings & body copy ---------- */

.script-h {
  font: 700 40px/1.05 'Caveat', cursive;
  color: var(--teal);
  margin: 0 0 8px;
}

.script-h.is-center { text-align: center; }

.lead {
  font: 600 16px/1.6 'Nunito Sans', sans-serif;
  color: #5c4a37;
  margin: 0 0 28px;
}

.body-text {
  font: 400 16px/1.8 'Nunito Sans', sans-serif;
  color: var(--ink);
  margin: 0;
}

/* ---------- Flagged placeholder boxes ---------- */

.flag-box {
  border: 1.5px dashed var(--rust);
  background: repeating-linear-gradient(45deg, #FBEED9, #FBEED9 8px, var(--cream) 8px, var(--cream) 16px);
  position: relative;
}

.flag-note {
  font: 400 14px/1.7 'Nunito Sans', sans-serif;
  color: #a3835a;
  margin: 6px 0 0;
  font-style: italic;
}

.placeholder-badge.badge-tl { top: -11px; left: 14px; right: auto; }

.fake-box {
  border: 2.5px dashed #C1443A;
  background: rgba(193, 68, 58, .06);
  padding: 34px 32px;
  position: relative;
}

.badge-fake {
  position: absolute;
  top: -13px;
  left: 18px;
  background: #C1443A;
  color: #fff;
  font: 800 10px/1 'Nunito Sans', sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 6px 10px;
}

/* ---------- Taped photo cards ---------- */

.polaroid { position: relative; }

.polaroid-paper {
  background: #fff;
  padding: 12px 12px 16px;
  box-shadow: 0 18px 38px -20px rgba(58, 46, 34, .5);
}

.polaroid-photo { position: relative; overflow: hidden; height: 250px; }

.polaroid-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph-130 { height: 130px; }
.ph-150 { height: 150px; }
.ph-190 { height: 190px; }
.ph-270 { height: 270px; }
.ph-280 { height: 280px; }
.ph-340 { height: 340px; }

.polaroid-caption {
  font: 600 19px/1 'Caveat', cursive;
  color: #8B5E3C;
  margin-top: 10px;
  padding-left: 4px;
}

/* tape placements */
.tape-a { top: -14px; left: 40px; width: 120px; height: 28px; transform: rotate(-4deg); }
.tape-b { top: -14px; left: 40px; width: 120px; height: 28px; transform: rotate(4deg); }
.tape-c { top: -12px; left: 24px; width: 90px;  height: 24px; transform: rotate(-5deg); }
.tape-d { top: -12px; left: 24px; width: 90px;  height: 24px; transform: rotate(4deg); }
.tape-e { top: -11px; left: 18px; width: 70px;  height: 22px; transform: rotate(-6deg); }
.tape-f { top: -11px; left: 18px; width: 70px;  height: 22px; transform: rotate(5deg); }
.tape-wide { top: -15px; left: 60px; width: 150px; height: 30px; transform: rotate(-4deg); }
.tape-g { top: -12px; left: 36px; width: 100px; height: 24px; transform: rotate(-4deg); }
.tape-h { top: -12px; left: 36px; width: 100px; height: 24px; transform: rotate(4deg); }

/* extra tilts */
.tilt-l06 { transform: rotate(-.6deg); }
.tilt-l08 { transform: rotate(-.8deg); }
.tilt-l1  { transform: rotate(-1deg); }
.tilt-r1  { transform: rotate(1deg); }
.tilt-r12 { transform: rotate(1.2deg); }
.tilt-l12 { transform: rotate(-1.2deg); }
.tilt-r14 { transform: rotate(1.4deg); }
.tilt-l16 { transform: rotate(-1.6deg); }
.tilt-r18 { transform: rotate(1.8deg); }
.tilt-r2  { transform: rotate(2deg); }

/* ---------- Simple grids ---------- */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* ---------- Feature rows (The Boat) ---------- */

.feature-row {
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
}

.feature-row:last-child { margin-bottom: 0; }

/* Taped text cards (The Boat) */
.text-card { position: relative; margin-bottom: 32px; }
.text-card:last-child { margin-bottom: 0; }

.text-card-paper {
  background: #fff;
  padding: 24px 26px;
  box-shadow: 0 16px 32px -20px rgba(58, 46, 34, .5);
}

.text-card .feature-row { margin-bottom: 0; }

.feature-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.feature-h {
  font: 800 20px/1.2 'Nunito Sans', sans-serif;
  color: #143D58;
  margin: 2px 0 12px;
}

.feature-row p {
  font: 400 15px/1.75 'Nunito Sans', sans-serif;
  color: var(--ink);
  margin: 0 0 14px;
}

.feature-row p:last-child { margin-bottom: 0; }

.feature-row p.is-teal { font-weight: 600; color: var(--teal); }

/* ---------- About Us ---------- */

.ab-hero {
  padding: 56px 48px 20px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 44px;
  align-items: center;
}

.ab-title {
  font: 700 60px/1 'Caveat', cursive;
  color: var(--teal);
  margin: 0 0 18px;
}

.ab-quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 6px;
}

.ab-pullquote {
  border-left: 4px solid var(--teal);
  padding: 6px 0 6px 20px;
  font: 700 24px/1.3 'Caveat', cursive;
  color: var(--teal);
}

.mv-card {
  background: #fff;
  padding: 26px 24px;
  box-shadow: 0 16px 34px -18px rgba(58, 46, 34, .5);
  border: 1.5px dashed var(--rust);
}

.mv-title {
  font: 700 28px/1 'Caveat', cursive;
  color: var(--teal);
  margin-bottom: 10px;
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 32px;
  align-items: start;
}

.story-subhead {
  font: 800 15px/1 'Nunito Sans', sans-serif;
  color: #8B5E3C;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.story-causes-link {
  align-self: start;
  font: 800 11px/1 'Nunito Sans', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #b98a3a;
  text-decoration: none;
  border: 1.5px dashed #d9a24e;
  padding: 10px 14px;
  text-align: center;
}

.cta-band {
  background: var(--teal);
  border: 1.5px dashed var(--gold);
  padding: 44px;
  text-align: center;
}

.cta-band-title {
  font: 700 34px/1 'Caveat', cursive;
  color: #fff;
  margin-bottom: 12px;
}

.cta-band-note {
  font: 400 14px/1.6 'Nunito Sans', sans-serif;
  color: #bfe6de;
  margin: 0 auto 24px;
  max-width: 520px;
  font-style: italic;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.stat-tile {
  background: #143D58;
  padding: 22px 12px;
  text-align: center;
  position: relative;
  border: 1.5px dashed var(--gold);
}

.stat-tile .badge-fake {
  top: -10px;
  left: 8px;
  background: var(--rust);
  color: var(--cream);
  font-size: 8px;
  padding: 4px 6px;
}

.stat-num {
  font: 800 26px/1 'Nunito Sans', sans-serif;
  color: #fff;
}

.stat-label {
  font: 700 9px/1.2 'Nunito Sans', sans-serif;
  color: #8fb3c9;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 6px;
}

.fake-claim-quote {
  font: 700 34px/1.15 'Caveat', cursive;
  color: #C1443A;
  margin: 6px 0 12px;
}

.fake-claim-note {
  font: 400 14px/1.7 'Nunito Sans', sans-serif;
  color: #9a5b54;
  margin: 0;
  font-style: italic;
}

/* ---------- Contact Us ---------- */

.ct-banner {
  position: relative;
  overflow: hidden;
  border-bottom: 6px solid #fff;
}

.ct-banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ct-banner-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 110, 102, .55), rgba(20, 42, 58, .68));
}

.ct-banner-copy {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 52px 48px 60px;
  text-align: center;
}

.ct-banner-title {
  font: 700 72px/1 'Caveat', cursive;
  color: #fff;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .4);
  transform: rotate(-1.2deg);
  margin-bottom: 18px;
}

.ct-banner-copy p {
  font: 400 16px/1.7 'Nunito Sans', sans-serif;
  color: #f2ede3;
  margin: 0 0 18px;
}

.ct-banner-copy p:last-child { margin-bottom: 0; }

.ct-grid {
  padding: 56px 48px 64px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 40px;
  align-items: start;
}

.form-paper {
  background: #fff;
  padding: 34px 32px 32px;
  box-shadow: 0 22px 46px -22px rgba(58, 46, 34, .55);
}

.form-title {
  font: 700 40px/1 'Caveat', cursive;
  color: var(--teal);
  margin-bottom: 22px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.ct-input {
  width: 100%;
  background: #fff;
  border: 1.5px solid #d8c7ad;
  padding: 14px 16px;
  font: 400 15px/1.2 'Nunito Sans', sans-serif;
  color: var(--ink);
  outline: none;
}

.ct-input::placeholder { color: #a3835a; }
.ct-input:focus { border-color: var(--teal); }

textarea.ct-input { resize: vertical; margin-bottom: 20px; }

.btn-send {
  font: 800 13px/1 'Nunito Sans', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--rust);
  padding: 15px 28px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
}

.info-paper {
  background: var(--teal);
  padding: 30px 28px 28px;
  box-shadow: 0 22px 46px -22px rgba(58, 46, 34, .55);
}

.info-title {
  font: 700 34px/1 'Caveat', cursive;
  color: #fff;
  margin-bottom: 20px;
}

.follow-heading {
  font: 800 11px/1 'Nunito Sans', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9fe0d3;
  margin-bottom: 12px;
}

.info-paper .social-row { gap: 10px; }

.info-paper .social-btn {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, .14);
}

/* ---------- Sail With Us ---------- */

.swu-grid {
  padding: 56px 48px 64px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
}

.swu-lead {
  font: 600 22px/1.5 'Nunito Sans', sans-serif;
  color: var(--teal);
  margin: 0 0 20px;
}

.swu-grid .body-text { font-size: 16px; line-height: 1.75; }

.side-title {
  font: 700 26px/1 'Caveat', cursive;
  color: var(--teal);
  text-align: center;
  margin-bottom: 10px;
}

.btn-block {
  display: block;
  text-align: center;
  margin-top: 14px;
}

/* ---------- Section spacing (inner pages) ---------- */

.pad-page   { padding: 44px 48px 20px; }
.pad-narrow { padding: 56px 48px 20px; }

/* ============================================================
   Additions — baseline re-skin (full nav, sponsors, contact map)
   ============================================================ */

/* Full real-site nav (8 items) — let it wrap gracefully at mid widths */
.site-nav { flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; }
.nav-link.is-muted { color: #9c8a70; }

/* Sponsors — real Divi logos, section flagged as placeholder */
.sponsors-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 26px 34px;
  margin-top: 6px;
}
.sponsors-logos .sponsor-chip {
  background: #fff;
  border: 1.5px solid var(--sand);
  padding: 14px 18px;
  box-shadow: 0 8px 18px -12px rgba(58, 46, 34, .5);
}
.sponsors-logos img {
  max-height: 40px;
  width: auto;
  opacity: .8;
}

/* Contact "coming soon" placeholders — details + map, awaiting Simon's real info.
   Styled to match the booking-calendar coming-soon language, adapted to the dark
   info-paper card (light text on translucent-gold dashed container). */
.contact-soon {
  position: relative;
  border: 1.5px dashed var(--gold);
  background: rgba(228, 185, 59, .14);
  padding: 18px 16px;
  margin-bottom: 20px;
}
.contact-soon + .contact-soon { margin-top: 22px; }
.contact-soon .placeholder-badge {
  top: -11px; left: 12px; right: auto;
  background: var(--gold); color: var(--ink);
}
.contact-soon-title {
  font: 700 26px/1 'Caveat', cursive;
  color: #F6D678;
  margin-bottom: 8px;
}
.contact-soon p {
  font: 400 13px/1.6 'Nunito Sans', sans-serif;
  color: #d7efe9;
  margin: 0;
}
.contact-soon.is-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 150px;
  gap: 8px;
}
.contact-soon.is-map .map-pin { color: #F6D678; opacity: .9; }
.contact-soon-map { color: #eafaf6; font-weight: 600; }

/* ============================================================
   Nav dropdowns (Our Boat / Sail With Us / Log Book / Contact Us)
   ============================================================ */

.site-nav { gap: 20px; }

.nav-item { position: relative; display: inline-flex; align-items: center; }

.nav-item > .nav-link { display: inline-flex; align-items: center; gap: 6px; }

.nav-item > .nav-link::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .5;
  transition: transform .2s ease;
}

.nav-item.is-open > .nav-link::after { transform: translateY(1px) rotate(225deg); }

/* Closed via visibility, not display: display can't transition, and
   visibility:hidden also drops the links out of the tab order. */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 214px;
  background: var(--cream);
  border: 1.5px solid var(--sand);
  box-shadow: 0 16px 30px -14px rgba(58, 46, 34, .5);
  padding: 16px 0 8px;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.nav-item.is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

.dropdown.dd-right { left: auto; right: 0; }

.dropdown::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 26px;
  width: 60px; height: 17px;
  background: rgba(228, 185, 59, .78);
  transform: rotate(-3deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
}
.dropdown.dd-right::before { left: auto; right: 26px; transform: rotate(3deg); }

/* Hover is a mouse affordance only — on touch it fires on tap and fights
   the click toggle. JS mirrors this into aria-expanded. */
@media (hover: hover) and (pointer: fine) and (min-width: 861px) {
  .nav-item:hover > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
  }
  .nav-item:hover > .nav-link::after { transform: translateY(1px) rotate(225deg); }
}

.dropdown a {
  display: block;
  padding: 9px 22px;
  font: 600 14px/1.25 'Nunito Sans', sans-serif;
  color: #6b5942;
  text-decoration: none;
  white-space: nowrap;
}

.dropdown a:hover { background: rgba(11, 110, 102, .08); color: var(--teal); }
.dropdown a.is-active { color: var(--teal); font-weight: 800; }
.dropdown a.dd-muted { color: #b3a184; font-style: italic; }
.dropdown a.dd-muted:hover { background: transparent; color: #b3a184; cursor: default; }

/* ============================================================
   Sub-page shared components
   ============================================================ */

/* Section eyebrow under a script heading */
.sub-intro {
  max-width: 860px;
  margin: 0 auto 8px;
  text-align: center;
}

/* Spec / item grid (Equipment, Toys, Setting up expectations detail) */
.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 26px;
  margin-top: 10px;
}
.spec-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.spec-card {
  position: relative;
  background: #fff;
  padding: 20px 22px;
  box-shadow: 0 14px 30px -18px rgba(58, 46, 34, .5);
}
.spec-card::before {
  content: "";
  position: absolute;
  top: -8px; left: 18px;
  width: 46px; height: 16px;
  background: rgba(228, 185, 59, .74);
  transform: rotate(-4deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
}
.spec-card:nth-child(even)::before {
  left: auto; right: 18px;
  background: rgba(231, 183, 163, .8);
  transform: rotate(4deg);
}
.spec-h {
  font: 800 16px/1.3 'Nunito Sans', sans-serif;
  color: #143D58;
  margin: 2px 0 9px;
}
.spec-card p {
  font: 400 14px/1.65 'Nunito Sans', sans-serif;
  color: var(--ink);
  margin: 0 0 8px;
  white-space: pre-line;
}
.spec-card p:last-child { margin-bottom: 0; }

/* Pending-update spec cards (specs carried over from a different vessel, awaiting Simon) */
.spec-card.is-pending {
  border: 1.5px dashed var(--rust);
  background: repeating-linear-gradient(45deg, #FBEED9, #FBEED9 8px, var(--cream) 8px, var(--cream) 16px);
  box-shadow: none;
}
.spec-card.is-pending::before { display: none; }
.spec-card.is-pending .placeholder-badge { top: -11px; left: 18px; right: auto; }
.spec-card.is-pending .flag-note { margin: 2px 0 0; }

/* Persona columns (Setting up expectations LOVE / DISLIKE) */
.persona-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 8px; }

.persona-col {
  background: #fff;
  box-shadow: 0 16px 34px -20px rgba(58, 46, 34, .5);
  padding: 26px 26px 28px;
  position: relative;
}
.persona-col.is-love   { border-top: 6px solid var(--teal); }
.persona-col.is-dislike { border-top: 6px solid var(--rust); }

.persona-title {
  font: 700 30px/1 'Caveat', cursive;
  margin: 0 0 16px;
}
.persona-col.is-love .persona-title   { color: var(--teal); }
.persona-col.is-dislike .persona-title { color: var(--rust); }

.persona-list { list-style: none; margin: 0; padding: 0; }
.persona-list li {
  position: relative;
  padding: 0 0 14px 26px;
  font: 400 15px/1.55 'Nunito Sans', sans-serif;
  color: var(--ink);
}
.persona-list li:last-child { padding-bottom: 0; }
.persona-list li::before {
  position: absolute;
  left: 0; top: 0;
  font-weight: 800;
}
.persona-col.is-love .persona-list li::before   { content: "✓"; color: var(--teal); }
.persona-col.is-dislike .persona-list li::before { content: "✕"; color: var(--rust); }

/* Numbered steps (How it Works) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  padding: 18px 22px;
  box-shadow: 0 14px 30px -20px rgba(58, 46, 34, .5);
}
.step-num {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--cream);
  font: 800 16px/34px 'Nunito Sans', sans-serif;
  text-align: center;
}
.step p { margin: 4px 0 0; font: 400 15px/1.6 'Nunito Sans', sans-serif; color: var(--ink); }

/* FAQ accordion */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; align-items: start; }
.faq {
  background: #fff;
  box-shadow: 0 12px 26px -18px rgba(58, 46, 34, .5);
  border-left: 4px solid var(--gold);
}
.faq > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font: 800 15px/1.35 'Nunito Sans', sans-serif;
  color: #143D58;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after {
  content: "+";
  font: 700 22px/1 'Nunito Sans', sans-serif;
  color: var(--teal);
  flex: none;
}
.faq[open] > summary::after { content: "–"; }
.faq[open] > summary { color: var(--teal); }
.faq p {
  margin: 0;
  padding: 0 20px 18px;
  font: 400 14px/1.7 'Nunito Sans', sans-serif;
  color: var(--ink);
}

/* Testimonial cards */
.testi-grid {
  columns: 3;
  column-gap: 26px;
}
.testi-card {
  position: relative;
  break-inside: avoid;
  margin: 0 0 26px;
  background: #fff;
  padding: 22px 22px 20px;
  box-shadow: 0 16px 34px -20px rgba(58, 46, 34, .5);
}
.testi-card::before {
  content: "";
  position: absolute;
  top: -12px; left: 28px;
  width: 74px; height: 22px;
  background: rgba(228, 185, 59, .76);
  transform: rotate(-4deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
}
.testi-card:nth-child(even)::before {
  background: rgba(231, 183, 163, .8);
  transform: rotate(3deg);
}
.testi-quote {
  font: 400 14.5px/1.7 'Nunito Sans', sans-serif;
  color: var(--ink);
  margin: 6px 0 16px;
  white-space: pre-line;
}
.testi-quote::first-letter { }
.testi-author { font: 700 26px/1 'Caveat', cursive; color: var(--teal); }
.testi-meta {
  font: 700 11px/1.3 'Nunito Sans', sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #b08a5c;
  margin-top: 4px;
}

/* Booking calendar "coming soon" placeholder */
.booking-soon {
  border: 1.5px dashed var(--gold);
  background: repeating-linear-gradient(45deg, #FBEED9, #FBEED9 8px, var(--cream) 8px, var(--cream) 16px);
  padding: 40px 34px;
  text-align: center;
  position: relative;
}
.booking-soon .placeholder-badge { top: -11px; left: 18px; right: auto; background: var(--gold); color: var(--ink); }
.booking-soon-title { font: 700 34px/1 'Caveat', cursive; color: var(--teal); margin-bottom: 10px; }
.booking-soon p {
  font: 400 14px/1.6 'Nunito Sans', sans-serif;
  color: #7a6244;
  margin: 0 auto 20px;
  max-width: 460px;
}
.btn-disabled {
  display: inline-block;
  font: 800 13px/1 'Nunito Sans', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #b3a184;
  background: #f0e6d3;
  border: 2px dashed #d9c3a0;
  padding: 13px 24px;
  cursor: not-allowed;
}

/* Press Agency contact card reuse tweaks */
.press-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.press-logo-card {
  background: #fff;
  padding: 22px;
  box-shadow: 0 18px 38px -22px rgba(58, 46, 34, .5);
  text-align: center;
}
.press-logo-card img { max-width: 100%; height: auto; margin: 0 auto; }
.press-contact-line {
  display: flex; align-items: center; gap: 12px;
  font: 600 15px/1.4 'Nunito Sans', sans-serif;
  color: #eafaf6;
  margin-bottom: 12px;
}
.press-contact-line .dot {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
}
.press-contact-line a { color: #fff; text-decoration: underline; }

@media (max-width: 1024px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { columns: 2; }
}

@media (max-width: 860px) {
  .site-header { height: 58px; padding: 0 18px; }
  .logo img { height: 38px; }
  .site-header { position: relative; flex-wrap: wrap; }
  .burger { display: flex; cursor: pointer; }
  .site-nav {
    display: none;
    position: absolute;
    top: 58px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-bottom: 1.5px solid var(--sand);
    box-shadow: 0 12px 24px -14px rgba(58, 46, 34, .5);
    padding: 6px 0;
    z-index: 30;
  }
  .site-nav.open { display: flex; }
  .site-nav .nav-link { padding: 13px 20px; border-top: 1px solid var(--sand); }
  .site-nav .btn-nav { margin: 10px 20px 6px; text-align: center; }

  .hero-wrap { padding: 26px 18px 12px; }
  .hero-postcard { transform: rotate(-1deg); }
  .hero-tape-left  { left: 40px; width: 110px; height: 26px; }
  .hero-tape-right { display: none; }
  .postcard-paper { padding: 10px 10px 14px; }
  .hero-photo { height: 300px; }
  .postmark { display: none; }
  .stamp { top: 12px; right: 12px; width: 56px; height: 66px; padding: 4px; }
  .stamp-text { display: none; }
  .hero-overlay { padding: 34px 16px 16px; }
  .hero-kicker { display: none; }
  .hero-headline { font-size: 40px; line-height: .9; }
  .hero-caption { padding: 12px 4px 2px; }

  .next-stops   { padding: 20px 18px 10px; }
  .sail-with-us { padding: 20px 18px 26px; }
  .sponsors     { padding: 12px 18px 40px; }

  .section-heading { margin-bottom: 18px; }
  .handwritten-kicker { font-size: 24px; }
  .section-title { font-size: 26px; }

  .swu-tape { left: 60px; }
  .swu-paper { grid-template-columns: 1fr; padding: 10px; }
  .swu-photo { min-height: 170px; height: 170px; }
  .swu-copy { padding: 18px 8px 6px; }
  .swu-title { font-size: 24px; }

  .sponsors-box { padding: 20px 18px 28px; text-align: center; }
  .sponsors-box .badge-static { position: static; display: inline-block; margin-bottom: 14px; }

  .site-footer { padding: 30px 18px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 620px) {
  .cards-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- Inner pages responsive ---------- */

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}

@media (max-width: 860px) {
  .ab-hero,
  .ab-quote-grid,
  .grid-2,
  .grid-3,
  .stats-grid,
  .story-grid,
  .ct-grid,
  .swu-grid,
  .form-row { grid-template-columns: 1fr; }

  .ab-hero { padding: 30px 18px 10px; gap: 30px; }
  .pad-page, .pad-narrow { padding: 28px 18px 10px; }
  .ct-grid, .swu-grid { padding: 30px 18px 40px; gap: 40px; }

  .banner-260 { height: 190px; }
  .banner-280 { height: 200px; }
  .banner-title { font-size: 52px; }
  .banner-stamp { display: none; }

  .ab-title { font-size: 44px; }
  .script-h { font-size: 32px; }
  .ct-banner-title { font-size: 52px; }
  .ct-banner-copy { padding: 40px 18px 44px; }
  .cta-band { padding: 32px 20px; }
  .fake-box { padding: 26px 18px; }
  .fake-claim-quote { font-size: 27px; }
  .form-paper { padding: 24px 18px 22px; }
  .grid-4 { grid-template-columns: 1fr; gap: 30px; }

  /* Sub-page components collapse */
  .spec-grid, .spec-grid.cols-3, .persona-grid, .faq-grid, .press-grid { grid-template-columns: 1fr; }
  .testi-grid { columns: 1; }
  .press-grid { gap: 26px; }
}

/* ============================================================
   Home v2 — motion sections (homepage only)
   ============================================================ */

@keyframes v2wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

/* Hero — parallax wrapper + blended example copy */
.hero-bg { position: absolute; inset: -8% 0; width: 100%; height: 116%; }
.hero-bg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hero-subhead {
  font: 600 16px/1.45 'Nunito Sans', sans-serif;
  color: #fdf3e6;
  margin: 10px 0 0;
  max-width: 460px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}

/* Next Stops — hover lift/tilt (rotation kept via inline --tilt) */
.next-stops .card {
  transform: rotate(var(--tilt, 0deg));
  transition: transform .3s cubic-bezier(.5, .05, .2, 1), box-shadow .3s;
}
.next-stops .card:hover {
  transform: rotate(var(--tilt, 0deg)) translateY(-10px) scale(1.03);
  z-index: 5;
}

/* Route / Trip map */
.route-map { padding: 26px 48px 8px; }

.map-postcard {
  position: relative;
  transform: rotate(-.5deg);
  max-width: 1000px;
  margin: 0 auto;
}

.map-tape { top: -14px; left: 44%; width: 160px; height: 32px; transform: rotate(-2deg); }

.map-paper {
  background: #fff;
  padding: 14px;
  box-shadow: 0 22px 46px -24px rgba(58, 46, 34, .55);
}

/* The chart that lives inside .map-paper is styled in home-chart.css — it is
   generated, and its ink is kept with it. */

.map-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 6px 2px;
}
.map-caption-script { font: 700 18px/1 'Caveat', cursive; color: #8B5E3C; }

/* Meet the Crew */
.meet-crew { padding: 44px 48px 24px; }

.section-heading.tight { margin-bottom: 8px; }

.crew-flag {
  display: block;
  max-width: 640px;
  margin: 10px auto 26px;
  text-align: center;
  background: #FCEFE6;
  border: 1.5px dashed var(--rust);
  border-radius: 8px;
  padding: 8px 14px;
  font: 700 12px/1.4 'Nunito Sans', sans-serif;
  color: #a1502f;
}

.crew-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  perspective: 1200px;
}

.crew-card {
  background: #fff;
  padding: 12px 12px 16px;
  box-shadow: 0 18px 38px -20px rgba(58, 46, 34, .55);
  transform: rotate(var(--tilt, 0deg));
}

.crew-photo { height: 210px; position: relative; overflow: hidden; }

.crew-name {
  font: 700 26px/1 'Caveat', cursive;
  color: var(--teal);
  margin: 14px 4px 2px;
}
.crew-tag { font: 800 12px/1 'Nunito Sans', sans-serif; color: var(--rust); vertical-align: middle; }

.crew-bio {
  font: 400 12px/1.5 'Nunito Sans', sans-serif;
  color: #a3835a;
  margin: 0 4px;
  font-style: italic;
}

/* Testimonial strip */
.testi-strip-wrap { padding: 20px 48px 30px; }

.testi-strip {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  background: var(--teal);
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 18px 18px;
  padding: 52px 40px;
  overflow: hidden;
  transform: rotate(-.4deg);
}

.testi-flag {
  position: absolute;
  top: 14px;
  right: 20px;
  z-index: 3;
  background: var(--gold);
  color: var(--ink);
  font: 800 9px/1 'Nunito Sans', sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 6px 10px;
}

.testi-strip-kicker {
  text-align: center;
  font: 700 26px/1 'Caveat', cursive;
  color: var(--gold);
  margin-bottom: 8px;
}

.testi-stage {
  position: relative;
  height: 180px;
  max-width: 760px;
  margin: 0 auto;
}

.testi-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
}
.testi-slide.is-first { opacity: 1; }

.testi-strip-quote {
  font: 700 36px/1.25 'Caveat', cursive;
  color: var(--cream);
  margin: 0 0 14px;
}
.testi-strip-quote.big { font-size: 40px; line-height: 1.2; }

.testi-strip-author {
  font: 800 13px/1 'Nunito Sans', sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #E7B7A3;
}

/* Sail With Us — parallax float wrapper */
.swu-bg { position: absolute; inset: -10% 0; width: 100%; height: 120%; }
.swu-bg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Home v2 — responsive */
@media (max-width: 860px) {
  .hero-kicker { display: block; font-size: 20px; }
  .hero-subhead { font-size: 14px; max-width: none; }

  .route-map { padding: 16px 18px 6px; }
  .map-paper { padding: 9px; }
  .map-tape { left: 30%; }

  .meet-crew { padding: 24px 18px 18px; }
  .crew-grid { grid-template-columns: 1fr; gap: 22px; }
  .crew-photo { height: 240px; }

  .testi-strip-wrap { padding: 12px 18px 24px; }
  .testi-strip { padding: 40px 20px; transform: none; }
  .testi-stage { height: 210px; }
  .testi-strip-quote { font-size: 26px; }
  .testi-strip-quote.big { font-size: 30px; }
  .testi-flag { position: static; display: inline-block; margin-bottom: 12px; }
}

@media (max-width: 620px) {
  .crew-grid { gap: 26px; }
}

/* ---------- Nav dropdowns: mobile (tap-to-expand accordions) ---------- */
@media (max-width: 860px) {
  .nav-item { display: block; }
  .nav-item > .nav-link {
    display: flex;
    width: 100%;
    padding: 13px 20px;
    border-top: 1px solid var(--sand);
    justify-content: space-between;
  }
  .nav-item > .nav-link::after { opacity: .4; }

  /* Collapsed: max-height 0 + overflow hidden animates; visibility:hidden
     keeps the clipped links out of the tab order. */
  .dropdown {
    position: static;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    z-index: auto;
    opacity: 1;
    transform: none;
    overflow: hidden;
    max-height: 0;
    visibility: hidden;
    transition: max-height .25s ease, visibility 0s linear .25s;
  }
  .nav-item.is-open > .dropdown {
    max-height: 400px;
    visibility: visible;
    transform: none;
    transition: max-height .25s ease, visibility 0s;
  }
  .dropdown::before { display: none; }
  .dropdown a { padding: 9px 20px 9px 38px; font-size: 14px; }
  .dropdown a:last-child { padding-bottom: 15px; }
  .dropdown a:hover { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .dropdown,
  .nav-item.is-open > .dropdown,
  .nav-item > .nav-link::after { transition: none; }
}

/* ============================================================
   Toys on the Boat — "Toy Chest Spill"  (page-scoped)
   Maximalist redesign: a trunk tips open and 19 gear stickers
   scatter down the page. Reuses the site palette + torn-paper /
   washi / postmark vocabulary. Motion lives in toys-motion.js.
   ============================================================ */

.toys-spill {
  position: relative; overflow: hidden;
  /* Sea-to-sand base wash: warm sandy cream at the hero making a pronounced
     descent into ocean teal down the page. The old flat tan dot-grid was
     removed — per-section illustrated motifs (.toy-motif) now give each cluster
     its own texture, and the wave/sand shore (.toy-seabed) closes the page.
     Scoped here so other pages are unaffected. */
  background-color: var(--cream);
  background-image:
    linear-gradient(180deg, var(--cream) 0%, #F2EEDF 32%, #D7E8E1 60%, #C1E2DB 80%, #A9DAD2 100%);
  background-repeat: no-repeat;
}

/* ---- Illustrated seabed: waves rising to a sandy shore (behind all content) ---- */
.toy-seabed {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.toy-sand {
  /* warm tan beach capping the very bottom; round stipple grain, deliberately
     denser + warmer than the cream paper dot-grid so it reads as sand, not paper. */
  position: absolute; left: 0; right: 0; bottom: 0; height: 210px;
  background:
    radial-gradient(#c1a05f 1.5px, transparent 1.9px) 0 0/15px 15px,
    radial-gradient(#d8bd83 1.2px, transparent 1.6px) 7px 8px/15px 15px,
    linear-gradient(180deg, #ECD9B0 0%, #E4CB92 100%);
}
.toy-waves {
  position: absolute; left: 0; right: 0; bottom: 168px;
  width: 100%; height: 360px; display: block;
  filter: drop-shadow(0 -6px 10px rgba(11,110,102,.12));
}
/* Content rides above the seabed. All three are already position:relative, so
   this only sets stacking order — no layout shift. */
.toy-hero, .toy-cluster, .toy-signoff-wrap { z-index: 1; }

/* ---- Hero: the chest spill ---- */
.toy-hero { position: relative; padding: 44px 26px 20px; overflow: hidden; }
.toy-hero-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px; max-width: 1080px; margin: 0 auto; position: relative;
}
.toy-chest {
  position: relative; flex: 1 1 380px; min-width: 300px; max-width: 520px;
  display: flex; justify-content: center;
}
.toy-chest svg { width: 100%; max-width: 480px; overflow: visible; }

/* real gear silhouettes tumbling out of the chest opening (evolution v4):
   each holds an inline SVG (board / dive mask / camera) instead of a paper blob. */
.toy-spill { position: absolute; filter: drop-shadow(0 9px 10px rgba(58,46,34,.3)); }
.toy-spill svg { display: block; width: 100%; height: 100%; }
.toy-spill.s1 { top: -4%; right: 6%;  width: 60px; height: 60px; transform: rotate(-16deg); }
.toy-spill.s2 { top: -8%; right: 30%; width: 58px; height: 58px; transform: rotate(12deg); }
.toy-spill.s3 { top: 14%; left: 4%;   width: 54px; height: 54px; transform: rotate(-8deg); }

.toy-hero-copy { flex: 1 1 360px; min-width: 280px; position: relative; padding: 10px 6px; }
.toy-kicker { font: 700 30px/1 'Caveat', cursive; color: var(--rust); transform: rotate(-3deg); margin-bottom: 8px; }
.toy-bigtitle {
  font: 700 92px/.92 'Caveat', cursive; color: var(--teal); margin: 0;
  transform: rotate(-2deg); text-shadow: 2px 3px 0 rgba(139,94,60,.18);
}
.toy-hero-lead { font: 600 16px/1.55 'Nunito Sans', sans-serif; color: #5c4a37; margin: 18px 0 0; max-width: 400px; }
.toy-hero-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  background: var(--gold); color: var(--ink); font: 800 11px/1 'Nunito Sans', sans-serif;
  letter-spacing: .06em; text-transform: uppercase; padding: 9px 15px;
  transform: rotate(-1.5deg); box-shadow: 3px 3px 0 var(--ink);
}

/* ---- Category clusters ---- */
.toy-cluster { position: relative; padding: 30px 26px 26px; max-width: 1080px; margin: 0 auto; }

/* Per-section decorative motif (one unique SVG per category, behind everything).
   Sits at z-index:0 inside the cluster; all cluster content is raised to z-index:1
   so cards/banners/callouts always render on top. No data-anim/data-cluster hooks,
   so it is invisible to the GSAP/ScrollTrigger + IntersectionObserver motion. */
.toy-motif {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  /* Curved fade: a blurred wavy band mask. The band's top/bottom edges are gentle
     sine curves (echoing .toy-seabed); the Gaussian blur turns those wavy edges into
     a soft organic fade in/out — deliberately NOT a straight linear-gradient edge.
     The band is extended past the left/right viewBox so only top+bottom fade. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 480' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-25%25' width='140%25' height='150%25'%3E%3CfeGaussianBlur stdDeviation='24'/%3E%3C/filter%3E%3C/defs%3E%3Cpath fill='%23fff' filter='url(%23b)' d='M-140,70 C200,32 400,100 600,68 C800,36 1040,100 1340,70 L1340,410 C1040,448 800,380 600,412 C400,444 200,380 -140,410 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 480' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-25%25' width='140%25' height='150%25'%3E%3CfeGaussianBlur stdDeviation='24'/%3E%3C/filter%3E%3C/defs%3E%3Cpath fill='%23fff' filter='url(%23b)' d='M-140,70 C200,32 400,100 600,68 C800,36 1040,100 1340,70 L1340,410 C1040,448 800,380 600,412 C400,444 200,380 -140,410 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.toy-motif svg { display: block; width: 100%; height: 100%; }
/* Raise the cluster's content group above its motif (block wrappers; no layout shift). */
.toy-banner-row, .toy-scatter { position: relative; z-index: 1; }

.toy-banner-row { display: flex; justify-content: center; margin-bottom: 2px; }
.toy-banner { position: relative; transform-origin: left center; }
.toy-banner-pin {
  position: absolute; top: -10px; left: 22px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.toy-banner-label {
  display: inline-block; font: 800 20px/1 'Nunito Sans', sans-serif; letter-spacing: .12em;
  text-transform: uppercase; padding: 13px 30px; box-shadow: 0 10px 20px -8px rgba(0,0,0,.4);
}
/* alternating banner tilt + colour + torn edge, cluster by cluster */
.toy-banner.b-l { transform: rotate(-2.5deg); }
.toy-banner.b-r { transform: rotate(2deg); }
.toy-banner-label.pennant-l { clip-path: polygon(3% 14%,97% 0,100% 86%,2% 100%); }
.toy-banner-label.pennant-r { clip-path: polygon(2% 0,98% 14%,97% 100%,3% 86%); }
.toy-banner-label.c-teal    { background: var(--teal); color: var(--cream); }
.toy-banner-label.c-ocean   { background: #1C6B85; color: var(--cream); letter-spacing: .1em; } /* deep-water blue, pairs with Boards' teal */
.toy-banner-label.c-coral   { background: var(--rust); color: var(--cream); letter-spacing: .1em; }
.toy-banner-label.c-mustard { background: var(--gold); color: var(--ink); }
.toy-banner-label.c-pink    { background: #E7B7A3; color: var(--ink); }
.toy-banner-label.c-kraft   { background: #8B5E3C; color: var(--cream); }

.toy-scatter {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 30px; padding-top: 18px;
}

/* ---- A gear sticker (torn paper backing + transparent photo) ---- */
.toy-item { position: relative; width: 228px; }
.toy-sticker { filter: drop-shadow(0 15px 18px rgba(58,46,34,.3)); }
/* Polaroid frame (evolution v4): white card, straight top, torn bottom edge —
   replaces the old all-around torn cream backing. */
.toy-sticker-paper {
  clip-path: polygon(0 0,100% 0,100% 93%,92% 100%,78% 95%,64% 100%,50% 95%,
    36% 100%,22% 95%,8% 100%,0 94%);
  background: #fff; padding: 11px 11px 15px;
}
/* Taped-down corner (evolution v4): one <span.toy-tape> per item, alternating
   side + colour + tilt for scrapbook jitter. Purely decorative (aria-hidden). */
.toy-tape {
  position: absolute; top: -13px; width: 78px; height: 26px; z-index: 4;
  transform-origin: center; box-shadow: 0 2px 5px rgba(0,0,0,.12);
}
.toy-tape.tl { left: -6px;  transform: rotate(-37deg); }
.toy-tape.tr { right: -6px; transform: rotate(37deg); }
.toy-tape.tape-gold { background: rgba(228,185,59,.72); }  /* --gold  #E4B93B */
.toy-tape.tape-teal { background: rgba(127,195,187,.8); }  /* light teal #7FC3BB */
.toy-tape.tape-pink { background: rgba(231,183,163,.85); } /* pink   #E7B7A3 */
.toy-sticker-window {
  height: 168px; display: flex; align-items: center; justify-content: center; position: relative;
}
.toy-photo {
  max-width: 100%; max-height: 168px; width: auto; min-width: 0; object-fit: contain;
  filter: drop-shadow(0 7px 6px rgba(58,46,34,.24));
}
/* "stock photo" flag — same warning treatment used elsewhere for unconfirmed content */
.toy-flag {
  position: absolute; top: -4px; right: -2px; z-index: 3;
  background: var(--ink); color: var(--cream); font: 800 8px/1.15 'Nunito Sans', sans-serif;
  letter-spacing: .04em; text-transform: uppercase; padding: 4px 6px; max-width: 108px;
  transform: rotate(4deg); box-shadow: 0 2px 4px rgba(0,0,0,.25); text-align: center;
}
/* string price-tag name label */
.toy-tag-row { display: flex; justify-content: center; margin-top: 11px; }
.toy-tag {
  position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  background: var(--gold); color: var(--ink); font: 800 13px/1.1 'Nunito Sans', sans-serif;
  text-transform: uppercase; letter-spacing: .02em; padding: 9px 16px 9px 12px;
  box-shadow: 0 3px 6px rgba(0,0,0,.18); clip-path: polygon(9% 0,100% 0,100% 100%,9% 100%,0 50%);
}
.toy-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); margin-left: 3px; }
/* Caption ink darkened a touch (#8b7a63 -> #6f6047) so the soft captions stay
   legible over the deeper teal end of the sea-to-sand gradient. */
.toy-cap { font: 600 13px/1.4 'Nunito Sans', sans-serif; color: #6f6047; text-align: center; margin: 8px 6px 0; }
/* Photo attribution — required by CC BY-SA on the sea anchor shot, so it must stay visible. */
.toy-credit { font: 600 10px/1.35 'Nunito Sans', sans-serif; color: #a2947c; text-align: center; margin: 5px 6px 0; }
.toy-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.toy-credit a:hover { color: #6f6047; }

/* fallback tile if a photo failed to source (kept subtle; flag stays visible) */
.toy-photo-fallback {
  width: 128px; height: 128px; display: flex; align-items: center; justify-content: center;
  border: 2px dashed #c9b48f; border-radius: 12px; background: rgba(228,185,59,.12);
  font: 700 34px/1 'Caveat', cursive; color: #b08b4e; text-align: center; padding: 8px;
}

/* ---- Speech-bubble callouts ---- */
.toy-bubble { position: relative; align-self: center; margin-top: 8px; }
.toy-bubble.w-sup  { width: 270px; }
.toy-bubble.w-mer  { width: 244px; }
.toy-bubble.w-fish { width: 236px; }
.toy-bubble.w-tug  { width: 262px; }
.toy-bubble.w-lens { width: 236px; }
.toy-bubble-tail { position: absolute; left: -30px; width: 52px; }
/* Bigger, more hand-lettered callouts (evolution v4). */
.toy-bubble-body {
  font-family: 'Caveat', cursive; font-weight: 700; padding: 17px 21px;
  border-radius: 22px 22px 22px 5px;
}
.toy-bubble-body.coral   { background: var(--rust); color: var(--cream); font-size: 24px; line-height: 1.18;
  transform: rotate(-2deg); box-shadow: 0 14px 26px -8px rgba(232,98,63,.55); }
.toy-bubble-body.mustard { background: var(--gold); color: var(--ink); font-size: 24px; line-height: 1.18;
  transform: rotate(2deg);  box-shadow: 0 14px 26px -8px rgba(228,185,59,.55); }

/* ---- Closing sign-off ---- */
.toy-signoff-wrap { position: relative; padding: 20px 26px 54px; max-width: 920px; margin: 0 auto; }
.toy-signoff {
  position: relative; background: var(--teal);
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 18px 18px; padding: 48px 44px; transform: rotate(-.6deg);
  box-shadow: 0 26px 50px -26px rgba(58,46,34,.6);
}
.toy-signoff-tape {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 150px; height: 30px; background: rgba(228,185,59,.75); box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.toy-signoff-quote {
  font: 700 40px/1.28 'Caveat', cursive; color: var(--cream); margin: 0; text-align: center; text-wrap: pretty;
}
.toy-signoff-by {
  display: block; text-align: center; margin-top: 20px;
  font: 800 12px/1 'Nunito Sans', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
/* 'the end' wax-seal / rubber stamp on the closing card (evolution v4).
   Screen-blends over the teal card so the cream "the end" lifts. Decorative. */
.toy-stamp {
  position: absolute; right: 26px; bottom: -24px; z-index: 2;
  transform: rotate(-11deg); mix-blend-mode: screen; opacity: .92; pointer-events: none;
}

/* ---- Motion: pre-animation state (only when JS+GSAP will drive it) ---- */
/* toys-motion.js adds .motion-on to <html> once GSAP is confirmed AND
   reduced-motion is not set. Without JS, or with reduced-motion, nothing is
   hidden — the page renders fully static and visible. */
.motion-on [data-anim] { will-change: transform, opacity; }

/* ---- Mobile ---- */
@media (max-width: 720px) {
  .toy-hero { padding: 30px 16px 8px; }
  .toy-bigtitle { font-size: 62px; }
  .toy-kicker { font-size: 24px; }
  .toy-cluster { padding: 22px 12px 18px; }
  .toy-scatter { gap: 16px; }
  /* Two-up on phones; cap the larger card size so nothing overflows / scrolls.
     min-width:0 lets the flex item shrink below the photo's intrinsic width
     (otherwise the img's content min-width would keep cards at desktop size). */
  .toy-item { width: calc(50% - 8px); max-width: 190px; min-width: 0; }
  .toy-sticker-window { height: 140px; }
  .toy-photo { max-height: 140px; }
  /* Let the price-tag wrap on narrow screens so a long label (e.g.
     "Skateboard (Carver)") can't force a card wider than half the viewport. */
  .toy-tag { font-size: 12px; padding: 7px 12px 7px 9px; white-space: normal; line-height: 1.15; }
  .toy-cap { font-size: 12px; }
  .toy-bubble, .toy-bubble.w-sup, .toy-bubble.w-mer, .toy-bubble.w-fish,
  .toy-bubble.w-tug, .toy-bubble.w-lens { width: 100%; max-width: 320px; }
  .toy-bubble-tail { display: none; }
  .toy-signoff { padding: 34px 22px; }
  .toy-signoff-quote { font-size: 28px; }
  /* Keep the wax-seal stamp from crowding the narrow closing card. */
  .toy-stamp { transform: rotate(-11deg) scale(.72); right: 6px; bottom: -18px; }
  /* Shorter shore on phones so the waves/sand stay a calm footer band,
     not an overpowering block on a tall narrow scroll. */
  .toy-sand { height: 140px; }
  .toy-waves { height: 210px; bottom: 112px; }
}

/* ============================================================
   Equipment — "Ship's Toolbox Spill"  (page-scoped)
   Same maximalist vocabulary as Toys on the Boat: a kit locker
   tips open and 42 spec stickers scatter down the page across
   four categories. REUSES the Toys classes wholesale — .toy-hero,
   .toy-chest, .toy-cluster, .toy-motif, .toy-banner*, .toy-scatter,
   .toy-item, .toy-sticker*, .toy-tag*, .toy-cap. Only the handful
   of genuinely-new pieces below are Equipment-specific. Motion
   lives in equipment-motion.js (mirrors toys-motion.js).
   ============================================================ */

/* One continuous gradient wash behind the WHOLE page (replaces any
   per-section colour block — nothing to seam-match). */
.eq-spill {
  position: relative; overflow: hidden;
  background-color: var(--cream);
  background-image:
    linear-gradient(180deg, var(--cream) 0%, #E7F0EC 12%, #EEEBDA 30%, #F1E7D2 46%,
      #E6EEEA 66%, #F6E0D9 84%, #F0D8CF 100%);
  background-repeat: no-repeat;
}
/* Hero + clusters ride above their motif layers (same rule Toys uses). */
.eq-spill .toy-hero, .eq-spill .toy-cluster { z-index: 1; }

/* Vessel Specifications banner — deep teal/ink, distinct from the
   Electronics teal and the Toys ocean blue. */
.toy-banner-label.c-ink { background: #1C3A3A; color: var(--cream); letter-spacing: .1em; }

/* "PNG NEEDED" placeholder — dashed organic blob + icon + label, filling
   the sticker window in place of a photo (no real photos this pass). Same
   dashed-mustard idiom as Toys' .toy-photo-fallback tile. */
.eq-ph {
  width: 150px; height: 150px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px; padding: 10px;
  border: 2px dashed #c9b48f; background: rgba(228,185,59,.11); color: #b08b4e;
  text-align: center;
  border-radius: 42% 56% 49% 53% / 53% 46% 55% 48%;
}
.eq-ph svg { width: 34px; height: 34px; opacity: .82; }
.eq-ph span {
  font: 800 10px/1.1 'Nunito Sans', sans-serif; letter-spacing: .13em;
  text-transform: uppercase;
}

/* Curved hand-drawn wave divider between adjacent categories (flows between
   sections; full-width; the semi-transparent fill lets the page gradient show
   through so the wash stays continuous). */
.eq-wave {
  display: block; width: 100%; height: 86px; line-height: 0;
  position: relative; z-index: 1; pointer-events: none; margin: -4px 0 -8px;
}
.eq-wave svg { display: block; width: 100%; height: 86px; }

@media (max-width: 720px) {
  .eq-ph { width: 128px; height: 128px; }
  /* Keep the hero lead within very narrow viewports (the shared 400px cap can
     overrun a ~360px content area). Scoped to Equipment so Toys is untouched. */
  .eq-spill .toy-hero-lead, .eq-spill .toy-hero-copy { max-width: 100%; }
}

/* ============================================================
   Safety Aboard — "Grab Bag Spill"  (page-scoped)
   Third sibling of the spill trilogy (Toys → Equipment → Safety).
   REUSES the shared vocabulary wholesale — .toy-hero, .toy-chest,
   .toy-cluster, .toy-motif, .toy-banner*, .toy-scatter, .toy-item,
   .toy-sticker*, .toy-tag*, .toy-cap, plus Equipment's .eq-wave
   dividers and .eq-ph placeholder. The Safety-only pieces below:
   a warm editorial philosophy block with oversized track-record
   callouts, and three per-section tinted bands (pale nautical
   blue-grey → deeper stormy grey-blue → warm blush). Motion lives
   in safety-motion.js (mirrors equipment-motion.js).
   ============================================================ */

/* Page base: cream. Unlike Equipment's single continuous wash, Safety uses
   distinct tinted bands (.safe-band) per section, so the base is a flat cream
   that the hero + philosophy sit on. */
.safe-spill { position: relative; overflow: hidden; background: var(--cream); }
.safe-spill .toy-hero, .safe-spill .safe-philo-wrap, .safe-spill .safe-band { z-index: 1; }

/* Hero band: subtle diagonal cream/white candy-stripe (same idiom as the
   spill blobs), fading out toward the philosophy block below. */
.safe-hero { position: relative; }
.safe-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, var(--cream) 0 16px, #FBF2E1 16px 32px);
  -webkit-mask: linear-gradient(180deg, #000 55%, transparent);
          mask: linear-gradient(180deg, #000 55%, transparent);
  opacity: .7;
}
.safe-hero .toy-hero-inner { position: relative; z-index: 1; }

/* ---- Philosophy: one warm editorial block (NOT cards) ---- */
.safe-philo-wrap { position: relative; padding: 8px 26px 30px; max-width: 1080px; margin: 0 auto; }
.safe-philo {
  position: relative; max-width: 820px; margin: 0 auto;
  background: #FBF3E4; padding: 42px 48px 46px; transform: rotate(-.5deg);
  box-shadow: 0 22px 44px -26px rgba(58,46,34,.55);
  border: 1px solid rgba(139,94,60,.10);
}
.safe-philo-tape {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 148px; height: 30px; background: rgba(228,185,59,.78);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.safe-philo-kicker { font: 700 26px/1 'Caveat', cursive; color: var(--rust); transform: rotate(-2deg); }
.safe-philo-h { font: 700 42px/1.02 'Caveat', cursive; color: var(--teal); margin: 2px 0 14px; text-shadow: 1px 2px 0 rgba(139,94,60,.14); }
.safe-philo-lead { font: 600 16.5px/1.62 'Nunito Sans', sans-serif; color: #5c4a37; margin: 0 0 14px; text-wrap: pretty; }
.safe-philo-lead:last-of-type { margin-bottom: 0; }
.safe-philo-lead strong { color: var(--ink); }

/* Oversized track-record callouts pulled out of the copy as hand-drawn badges. */
.safe-stat-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 34px; margin: 30px 0 4px;
}
.safe-stat { text-align: center; transform: rotate(-2deg); }
.safe-stat:nth-child(even) { transform: rotate(2.5deg); }
.safe-stat-num {
  display: block; font: 700 66px/.82 'Caveat', cursive; color: var(--teal);
  text-shadow: 2px 3px 0 rgba(139,94,60,.17);
}
.safe-stat-lbl {
  display: block; margin-top: 7px; font: 800 11px/1.1 'Nunito Sans', sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.safe-stat-note {
  font: 700 27px/1.25 'Caveat', cursive; color: var(--rust); text-align: center;
  transform: rotate(-1.2deg); margin: 24px auto 0; max-width: 640px; text-wrap: balance;
}

/* ---- Per-section tinted bands (full-bleed behind each cluster) ---- */
.safe-band { position: relative; padding: 6px 0 10px; }
.safe-band.sec-boat  { background: linear-gradient(180deg, #EAF0F1 0%, #DFE9EC 100%); }   /* pale nautical blue-grey */
.safe-band.sec-storm { background: linear-gradient(180deg, #CBD7DF 0%, #B7C7D1 100%); }   /* the one moodier tint */
.safe-band.sec-raft  { background: linear-gradient(180deg, #F7E4DD 0%, #F2D5CB 100%); }   /* warm blush (matches Equipment's Safety category) */

/* Caption ink darkened per-band so 13px text keeps AA contrast on each tint. */
.safe-band .toy-cap { color: #5a4c38; }
.safe-band.sec-storm .toy-cap { color: #33404a; }

/* Storm banner — a stormy slate that reads a hair more serious than its
   neighbours without leaving the palette. */
.toy-banner-label.c-slate { background: #3C5262; color: var(--cream); letter-spacing: .1em; }

/* ---- Handwritten footnote citation (para-anchor.eu) ---- */
.safe-footnote {
  display: block; margin: 6px 6px 0; text-align: center;
  font: 700 12px/1.4 'Nunito Sans', sans-serif; color: #6f4a2f;
}
.safe-footnote a {
  color: #6f4a2f; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.safe-footnote a:hover { color: var(--ink); }

@media (max-width: 720px) {
  .safe-philo { padding: 34px 24px 32px; }
  .safe-philo-h { font-size: 34px; }
  .safe-stat-row { gap: 22px; }
  .safe-stat-num { font-size: 52px; }
  .safe-stat-note { font-size: 23px; }
}


/* ============================================================
   THE BOAT — "Blueprint that becomes the boat" (page-scoped)
   Used only by the-boat.html. Chapter background treatments +
   the torn-sheet divider that sits between every chapter, plus
   the blueprint annotation hover. Reuses the site cream dot-grid
   (already on <body>) as the base paper. Big-type + grid helper
   classes exist so the mobile query can rescale cleanly.
   ============================================================ */
.bp { position: relative; }

/* blueprint annotation hover (carried from the export head) */
.bp .anno { transition: transform .25s ease; }
.bp .anno:hover { transform: translateY(-2px); }
.bp .anno:hover .anno-txt { fill: var(--rust); }
.bp .anno:hover .anno-lead { stroke: var(--rust); }

/* ---- torn-sheet divider between chapters (was inline x6) ---- */
.bp-torn {
  display: block; width: 100%; height: 30px; line-height: 0;
  margin: 14px 0 2px;
  filter: drop-shadow(0 3px 2px rgba(58, 46, 34, .16));
}
.bp-torn svg { display: block; width: 100%; height: 30px; }

/* ---- per-chapter background treatments ---- */
.bp-ch { position: relative; z-index: 0; overflow: hidden; }
.bp-ch-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Ch 01 · Design — extended blueprint grid (+ faint ghost hull, inline SVG) */
.bp-ch1-bg {
  background:
    linear-gradient(rgba(43, 93, 124, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 93, 124, .05) 1px, transparent 1px),
    linear-gradient(rgba(43, 93, 124, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 93, 124, .08) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 200px 200px, 200px 200px;
}
/* Ch 03 · Evolution — full sepia / aged-paper wash */
.bp-ch3-bg {
  background:
    radial-gradient(rgba(120, 85, 50, .06) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(180deg, #f3e9d5, #ece0c6 55%, #e7dabd);
}
/* Ch 04 · Living Aboard — faint deck-plan grid (+ "Sheet 02 · Layout" SVG) */
.bp-ch4-bg {
  background:
    linear-gradient(rgba(43, 93, 124, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 93, 124, .04) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
}
/* Ch 05 · Lagoon — cooler blue-grey wash */
.bp-ch5-bg {
  background:
    radial-gradient(rgba(90, 120, 140, .05) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(180deg, #e9eef1, #dfe7ec 60%, #d7e1e7);
}
/* Ch 06 · Under Sail — horizon colorwash (+ faint horizon lines SVG) */
.bp-ch6-bg {
  background: linear-gradient(180deg, rgba(252, 246, 236, 0) 38%, rgba(11, 110, 102, .17) 100%);
}

/* Ch 02 · Build — mahogany wood-grain layered under a candy stripe.
   Base wash on the element, wood grain on ::before, candy stripe on ::after. */
.bp-stripe {
  position: relative; overflow: hidden;
  margin: 34px auto 0; max-width: 1080px; padding: 38px 26px 40px;
  background: linear-gradient(180deg, rgba(239, 225, 201, .5), rgba(231, 212, 182, .5));
}
.bp-stripe::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(2deg,
    rgba(122, 80, 46, .10) 0 2px, transparent 2px 7px,
    rgba(122, 80, 46, .055) 7px 9px, transparent 9px 20px);
}
.bp-stripe::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(-52deg,
    rgba(252, 246, 236, .92) 0 26px, rgba(251, 238, 217, .8) 26px 52px);
  opacity: .85;
}
.bp-stripe > .bp-stripe-in { position: relative; z-index: 1; }

/* ---- grid helpers (so mobile can restack the inline grids) ---- */
.bp-cabins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bp-usail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bp-why440 { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }

/* ---- placeholder convention: a slot that still needs a real photo.
   Matches the Equipment page's .eq-ph flag (dashed gold, image icon). ---- */
.bp-need {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 10px;
  background: rgba(228, 185, 59, .11);
  border: 2px dashed #c9b48f;
  color: #b08b4e; font: 700 12px/1.35 'Nunito Sans', sans-serif;
}
.bp-need svg { width: 30px; height: 30px; opacity: .82; }

/* ============ mobile ============ */
@media (max-width: 760px) {
  .bp-h1 { font-size: 60px !important; }
  .bp-hero-sub { font-size: 22px !important; }
  .bp-h2 { font-size: 38px !important; }
  .bp-statnum { font-size: 60px !important; }
  .bp-cabins { grid-template-columns: 1fr; }
  .bp-usail { grid-template-columns: repeat(2, 1fr); }
  .bp-why440 { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .bp-h1 { font-size: 48px !important; }
  .bp-h2 { font-size: 32px !important; }
  .bp-statnum { font-size: 52px !important; }
}

/* ============================================================
   Setting up expectations — "The Sea Trial Checklist" (page-scoped)
   Ported from the approved Claude Design export. A clipboard hero,
   a torn-notepad LOVE/DISLIKE checklist, a corkboard of nine pinned
   field notes, and a teal sign-off. Motion lives in
   setting-up-expectations-motion.js. Every photo slot is a labelled
   "Dreamworld photo" placeholder (.sue-ph) — no boat photo is used,
   pending real right-vessel imagery.
   Palette: teal var(--teal) · coral var(--rust) · brown #8B5E3C ·
   gold var(--gold) · ink var(--ink) · cream var(--cream) · body #5c4a37.
   ============================================================ */
.sue-root {
  background: var(--cream);
  background-image: radial-gradient(#eadcc4 1px, transparent 1px);
  background-size: 22px 22px;
  overflow-x: clip;
}
.sue-root .c-teal  { color: var(--teal); }
.sue-root .c-coral { color: var(--rust); }
.sue-root .c-brown { color: #8B5E3C; }
.sue-root .c-ink   { color: var(--ink); }

/* ---------- placeholder (fills any photo window; dashed-mustard idiom,
   same vocabulary as the Equipment/Safety .eq-ph flag) ---------- */
.sue-ph {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px; padding: 8px;
  border: 2px dashed #c9b48f; background: rgba(228, 185, 59, .11);
  color: #b08b4e; text-align: center;
}
.sue-ph svg { width: 30px; height: 30px; opacity: .82; }
.sue-ph span {
  font: 800 9.5px/1.15 'Nunito Sans', sans-serif; letter-spacing: .11em;
  text-transform: uppercase;
}
.sue-ph--clip    { height: 100px; }
.sue-ph--note    { height: 212px; }
.sue-ph--signoff { height: 118px; }

/* ---------- HERO ---------- */
.sue-hero { position: relative; padding: 44px 26px 24px; overflow: hidden; }
.sue-hero-hatch {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(-52deg, var(--cream) 0 26px, #FBF3E4 26px 52px);
  opacity: .6;
}
.sue-hero-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 20px; max-width: 1080px; margin: 0 auto; position: relative; z-index: 1;
}
.sue-clip {
  position: relative; flex: 1 1 360px; min-width: 290px; max-width: 470px;
  display: flex; justify-content: center; z-index: 1;
}
.sue-clip-photo {
  position: absolute; z-index: -1; top: -30px; left: 50%;
  transform: translateX(-45%) rotate(-6deg); width: 146px; padding: 7px 7px 9px;
  background: #fffdf7; box-shadow: 0 13px 22px -8px rgba(58, 46, 34, .5);
  border: 1px solid #efe6d3;
}
.sue-clip-svg { max-width: 432px; overflow: visible; }
.sue-spill { position: absolute; filter: drop-shadow(0 6px 8px rgba(58, 46, 34, .24)); }
.sue-spill--1 { top: 6%;  right: -3%; transform: rotate(-10deg); }
.sue-spill--2 { top: -6%; left: 8%;   transform: rotate(9deg); }
.sue-spill--3 { top: 66%; left: -4%;  transform: rotate(-7deg); }

.sue-hero-copy { flex: 1 1 360px; min-width: 280px; position: relative; padding: 10px 6px; }
.sue-kicker {
  font: 700 30px/1 'Caveat', cursive; color: var(--rust);
  transform: rotate(-3deg); margin-bottom: -4px;
}
.sue-title {
  font: 700 92px/.84 'Caveat', cursive; color: var(--teal); margin: 0;
  transform: rotate(-2deg); text-shadow: 2px 3px 0 rgba(139, 94, 60, .18);
}
.sue-lede {
  font: 600 16px/1.55 'Nunito Sans', sans-serif; color: #5c4a37;
  margin: 18px 0 0; max-width: 436px;
}
.sue-lede strong { color: var(--teal); }
.sue-flag {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  background: var(--gold); color: var(--ink); font: 800 11px/1 'Nunito Sans', sans-serif;
  letter-spacing: .06em; text-transform: uppercase; padding: 9px 15px;
  transform: rotate(-1.5deg); box-shadow: 3px 3px 0 var(--ink);
}

/* ---------- SECTION 1 · torn-notepad checklist ---------- */
.sue-sheet-sec {
  position: relative; padding: 30px 26px 54px;
  background: linear-gradient(180deg, var(--cream) 0%, #F1E7D3 100%);
}
.sue-sheet-shadow {
  max-width: 1000px; margin: 0 auto;
  filter: drop-shadow(0 32px 46px rgba(58, 46, 34, .4));
}
.sue-sheet {
  position: relative; background: #fffdf7; padding: 56px 46px 46px;
  transform: rotate(-.35deg);
  clip-path: polygon(0% 2.4%, 5% .4%, 10% 2.6%, 15% .5%, 20% 2.5%, 25% .7%, 30% 2.6%,
    35% .4%, 40% 2.5%, 45% .6%, 50% 2.6%, 55% .5%, 60% 2.5%, 65% .7%, 70% 2.6%,
    75% .4%, 80% 2.5%, 85% .6%, 90% 2.6%, 95% .5%, 100% 1.4%, 100% 100%, 0% 100%);
}
.sue-sheet-rule {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(#0000 0 33px, rgba(11, 110, 102, .06) 33px 34px);
}
.sue-sheet-margin  { position: absolute; left: 54px; top: 0; bottom: 0; width: 2px; background: rgba(232, 98, 63, .30); }
.sue-sheet-margin2 { position: absolute; left: 60px; top: 0; bottom: 0; width: 1px; background: rgba(232, 98, 63, .16); }
.sue-sheet-top {
  position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
}
.sue-sheet-inner { position: relative; z-index: 1; padding-left: 30px; }
.sue-tab {
  display: inline-flex; align-items: center; gap: 8px; background: var(--gold);
  color: var(--ink); font: 800 10px/1 'Nunito Sans', sans-serif; letter-spacing: .14em;
  text-transform: uppercase; padding: 6px 11px; transform: rotate(-1.5deg);
  box-shadow: 2px 2px 0 var(--ink); margin-bottom: 16px;
}
.sue-sheet-h {
  font: 700 54px/1.02 'Caveat', cursive; color: var(--teal); margin: 0;
  max-width: 780px; text-wrap: balance;
}
.sue-sheet-p {
  font: 400 16px/1.7 'Nunito Sans', sans-serif; color: #5c4a37;
  margin: 12px 0 0; max-width: 700px;
}
.sue-sheet-p a { color: inherit; text-decoration: none; border-bottom: 2px solid rgba(58, 46, 34, .28); }
.sue-sheet-p a:hover { border-bottom-color: var(--rust); }
.sue-cols { display: flex; flex-wrap: wrap; gap: 36px 52px; margin-top: 34px; }
.sue-col { flex: 1 1 320px; min-width: 270px; }
.sue-col-head { display: flex; align-items: center; gap: 11px; margin: 0 0 20px; }
.sue-col-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
}
.sue-col-badge.is-love    { background: var(--teal); box-shadow: 0 4px 9px -3px rgba(11, 110, 102, .6); }
.sue-col-badge.is-dislike { background: var(--rust); box-shadow: 0 4px 9px -3px rgba(232, 98, 63, .6); }
.sue-col-title { font: 700 33px/1 'Caveat', cursive; }
.sue-col-title .u-teal  { border-bottom: 3px solid rgba(11, 110, 102, .35); }
.sue-col-title .u-coral { border-bottom: 3px solid rgba(232, 98, 63, .35); }
.sue-check { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 18px; }
.sue-mark { flex: 0 0 auto; margin-top: 1px; }
.sue-mark svg { overflow: visible; }
.sue-check-t { font: 700 16px/1.5 'Nunito Sans', sans-serif; color: var(--ink); margin: 0; }
.sue-check-note {
  font: 600 13.5px/1.5 'Nunito Sans', sans-serif; color: #8b7a63;
  margin: 5px 0 0; font-style: italic;
}

/* ---------- SECTION 2 · corkboard field notes ---------- */
.sue-board-sec { position: relative; padding: 0; overflow: hidden; }
.sue-board {
  position: relative; padding: 46px 30px 54px; border: 13px solid #6f4a2e;
  background-color: #c69a63;
  background-image:
    radial-gradient(rgba(90, 54, 28, .30) 1.1px, transparent 1.5px),
    radial-gradient(rgba(74, 45, 22, .20) 1px, transparent 1.4px),
    radial-gradient(rgba(226, 190, 140, .34) 1px, transparent 1.4px);
  background-size: 9px 9px, 13px 11px, 7px 8px;
  background-position: 0 0, 4px 6px, 2px 3px;
  box-shadow: inset 0 0 90px rgba(58, 30, 12, .42), inset 0 0 0 3px rgba(255, 240, 214, .10);
}
.sue-board-banner-row { display: flex; justify-content: center; margin-bottom: 4px; }
.sue-board-banner { position: relative; transform: rotate(-2deg); transform-origin: left center; }
.sue-board-pin {
  position: absolute; top: -10px; left: 22px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--gold); z-index: 2; box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
.sue-board-banner-label {
  background: var(--teal); color: var(--cream); font: 800 20px/1 'Nunito Sans', sans-serif;
  letter-spacing: .12em; text-transform: uppercase; padding: 13px 30px;
  clip-path: polygon(3% 14%, 97% 0, 100% 86%, 2% 100%);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .45);
}
.sue-board-sub {
  text-align: center; font: 700 16px/1.5 'Nunito Sans', sans-serif; color: #fbe6cd;
  max-width: 640px; margin: 16px auto 0; text-shadow: 0 1px 3px rgba(58, 30, 12, .45);
}
.sue-notes {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 30px 30px; max-width: 1040px; margin: 26px auto 0;
}
.sue-note { position: relative; width: 300px; }
.sue-note-pin {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  z-index: 3; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35));
}
.sue-note-tape {
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%) rotate(var(--tape-rot, 0deg));
  width: 98px; height: 26px; z-index: 3; box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
}
.sue-tape-gold  { background: rgba(228, 185, 59, .72); }
.sue-tape-blush { background: rgba(231, 183, 163, .78); }
.sue-note-card {
  background: #fffdf6; border: 1px solid #ece1c9;
  box-shadow: 0 16px 30px -14px rgba(58, 30, 12, .6);
  padding: 22px 22px 20px; position: relative; overflow: hidden;
}
.sue-note-rule {
  position: absolute; left: 0; right: 0; top: 78px; bottom: 0; pointer-events: none;
  background: repeating-linear-gradient(#0000 0 25px, rgba(58, 110, 120, .09) 25px 26px);
}
.sue-note-no {
  position: absolute; top: 14px; right: 16px; font: 800 11px/1 'Nunito Sans', sans-serif;
  letter-spacing: .1em; color: #c3b393;
}
.sue-note-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; margin-bottom: 10px;
}
.sue-note-ico.is-teal  { background: rgba(11, 110, 102, .09); border: 1.6px dashed var(--teal); }
.sue-note-ico.is-coral { background: rgba(232, 98, 63, .09);  border: 1.6px dashed var(--rust); }
.sue-note-ico.is-brown { background: rgba(139, 94, 60, .10);  border: 1.6px dashed #8B5E3C; }
.sue-note-h { font: 700 27px/1 'Caveat', cursive; margin: 0 0 7px; }
.sue-note-hr { height: 2px; background: rgba(232, 98, 63, .28); margin: 0 0 10px; }
.sue-note-p { font: 600 13.5px/1.6 'Nunito Sans', sans-serif; color: #5c4a37; margin: 0; position: relative; }
.sue-note-photo {
  background: #fffdf6; border: 1px solid #ece1c9;
  box-shadow: 0 16px 30px -14px rgba(58, 30, 12, .6); padding: 12px 12px 14px;
}
.sue-note-cap { font: 600 21px/1.08 'Caveat', cursive; text-align: center; margin-top: 9px; }

/* ---------- CLOSING · teal sign-off ---------- */
.sue-close-sec { position: relative; padding: 44px 26px 54px; max-width: 920px; margin: 0 auto; }
.sue-signoff { position: relative; }
.sue-signoff-photo {
  position: absolute; z-index: 0; top: -32px; left: 38px; width: 168px;
  transform: rotate(-5deg); padding: 8px 8px 10px; background: #fffdf7;
  box-shadow: 0 16px 30px -12px rgba(58, 46, 34, .55); border: 1px solid #efe6d3;
}
.sue-signoff-tape {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 72px; height: 22px; background: rgba(228, 185, 59, .8); box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
}
.sue-signoff-card {
  position: relative; z-index: 1; background: var(--teal);
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 18px 18px; padding: 46px 44px; transform: rotate(-.6deg);
  box-shadow: 0 26px 50px -26px rgba(58, 46, 34, .6);
}
.sue-signoff-cardtape {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 150px; height: 30px; background: rgba(228, 185, 59, .75); box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.sue-signoff-t {
  font: 700 37px/1.32 'Caveat', cursive; color: var(--cream); margin: 0;
  text-align: center; text-wrap: pretty;
}
.sue-signoff-sub { text-align: center; margin-top: 20px; }
.sue-signoff-sub span {
  font: 800 12px/1 'Nunito Sans', sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .sue-title    { font-size: 68px; }
  .sue-kicker   { font-size: 26px; }
  .sue-sheet    { padding: 46px 30px 36px; }
  .sue-sheet-inner { padding-left: 14px; }
  .sue-sheet-h  { font-size: 42px; }
  .sue-signoff-card { padding: 40px 30px; }
  .sue-signoff-t    { font-size: 31px; }
}
@media (max-width: 620px) {
  .sue-hero        { padding: 30px 18px 16px; }
  .sue-title       { font-size: 52px; }
  .sue-kicker      { font-size: 23px; }
  .sue-lede        { max-width: 100%; }
  .sue-sheet-sec   { padding: 24px 14px 40px; }
  .sue-sheet       { padding: 40px 22px 30px; }
  .sue-sheet-inner { padding-left: 8px; }
  .sue-sheet-h     { font-size: 34px; }
  .sue-cols        { gap: 28px 32px; }
  .sue-board       { padding: 34px 16px 40px; border-width: 10px; }
  .sue-note        { width: 100%; max-width: 340px; }
  .sue-notes       { gap: 42px 22px; }
  /* pull the sign-off photo out of the absolute overlap so it can't
     crowd the text on a narrow column */
  .sue-signoff-photo {
    position: relative; top: 0; left: 0; width: 168px;
    margin: 0 auto 14px; transform: rotate(-3deg);
  }
  .sue-signoff-card { padding: 34px 22px; }
  .sue-signoff-t    { font-size: 27px; }
}