/* ==========================================================================
   Lily of the Galley  |  Public site styles (Phase 1 prototype)
   Mobile-first. No frameworks.
   ========================================================================== */

:root {
  --ivory: #FFF9F0;
  --ivory-deep: #FBEFDD;
  --coral: #F4544F;
  --coral-ink: #C93B3C;
  --blue: #087F9C;
  --blue-deep: #06728C;
  --yellow: #F9BF45;
  --blush: #F7D6D2;
  --navy: #17253C;
  --olive: #647B4E;
  --line: rgba(23, 37, 60, 0.14);

  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --script: "Nothing You Could Do", "Segoe Script", cursive;

  --header-h: 72px;
  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(.22, .8, .24, 1);
}

@media (min-width: 960px) {
  :root { --header-h: 88px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1.15em; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  background: var(--navy);
  color: var(--ivory);
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Prototype ribbon
   -------------------------------------------------------------------------- */
.proto-ribbon {
  background: var(--navy);
  color: var(--ivory);
  font-size: .8125rem;
  line-height: 1.4;
  padding: 8px var(--gutter);
  text-align: center;
}
.proto-ribbon a { color: var(--yellow); }

/* --------------------------------------------------------------------------
   Wordmark
   -------------------------------------------------------------------------- */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .18em;
  text-decoration: none;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1;
  white-space: nowrap;
}
.wordmark__main { font-style: italic; letter-spacing: -0.01em; }
.wordmark__of {
  font-family: var(--script);
  color: var(--coral);
  font-size: .72em;
  transform: translateY(-.12em) rotate(-4deg);
  display: inline-block;
  padding-inline: .06em;
}
@media (min-width: 960px) { .wordmark { font-size: 1.8rem; } }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ivory);
  transition: box-shadow .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }

.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.primary-nav { display: none; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 34px; }
.primary-nav a {
  text-decoration: none;
  font-size: .9375rem;
  letter-spacing: .04em;
  padding: 6px 0;
  background-image: linear-gradient(var(--coral), var(--coral));
  background-size: 0 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s var(--ease);
}
.primary-nav a:hover,
.primary-nav a[aria-current="page"] { background-size: 100% 2px; }

.header-actions { display: flex; align-items: center; gap: 14px; }

.header-social { display: none; gap: 4px; }

.icon-link {
  width: 40px; height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: var(--navy);
  transition: background-color .2s, color .2s;
}
.icon-link:hover { background: var(--blush); color: var(--coral-ink); }
.icon-link svg { width: 19px; height: 19px; }

.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--navy);
  background: transparent;
  color: var(--navy);
  font: 500 .9375rem/1 var(--sans);
  letter-spacing: .04em;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
.menu-trigger:hover,
.menu-trigger[aria-expanded="true"] { background: var(--navy); color: var(--ivory); }

.menu-trigger__lines { width: 18px; height: 10px; position: relative; }
.menu-trigger__lines::before,
.menu-trigger__lines::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.menu-trigger__lines::before { top: 0; }
.menu-trigger__lines::after { top: 8px; }
.menu-trigger[aria-expanded="true"] .menu-trigger__lines::before { top: 4px; transform: rotate(45deg); }
.menu-trigger[aria-expanded="true"] .menu-trigger__lines::after { top: 4px; transform: rotate(-45deg); }

@media (min-width: 960px) {
  .primary-nav { display: block; }
  .header-social { display: flex; }
}

/* --------------------------------------------------------------------------
   Mega menu
   -------------------------------------------------------------------------- */
.mega {
  position: fixed;
  left: 0; right: 0;
  top: var(--header-top, var(--header-h));
  bottom: 0;
  z-index: 55;
  background: var(--ivory);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.mega.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s;
}

.mega__inner {
  display: grid;
  gap: 36px;
  padding-block: 28px 56px;
}

.mega__links ol { list-style: none; margin: 0; padding: 0; }
.mega__links li { border-bottom: 1px solid var(--line); }
.mega__links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  text-decoration: none;
  font-family: var(--serif);
  font-size: clamp(2rem, 7vw, 3.4rem);
  line-height: 1.1;
  padding: 14px 0;
  transition: color .25s, padding-left .35s var(--ease);
}
.mega__links a:hover { color: var(--coral-ink); padding-left: 10px; }
.mega__links a small {
  font-family: var(--sans);
  font-size: .875rem;
  letter-spacing: .02em;
  color: rgba(23, 37, 60, .62);
  white-space: nowrap;
}
.mega__links a[aria-current="page"] { font-style: italic; }

.mega__feature { margin: 0; order: 3; }
.mega__aside { order: 2; }
@media (max-width: 959px) {
  .mega__feature .ph { aspect-ratio: 4 / 3; border-radius: 160px 160px 18px 18px; }
}
.mega__feature .ph { aspect-ratio: 4 / 5; border-radius: 220px 220px 18px 18px; }
.mega__feature figcaption {
  font-size: .875rem;
  color: rgba(23, 37, 60, .7);
  margin-top: 12px;
}

.mega__aside { display: flex; flex-direction: column; gap: 22px; }
.mega__statement {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.35;
  margin: 0;
}
.mega__sign { font-family: var(--script); color: var(--coral); font-size: 1.6rem; margin: 0; }

.social-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.social-stack a {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--ivory-deep);
  transition: background-color .2s;
}
.social-stack a:hover { background: var(--blush); }
.social-stack svg { width: 22px; height: 22px; color: var(--coral-ink); flex: none; }
.social-stack span { display: flex; flex-direction: column; line-height: 1.25; }
.social-stack small { font-size: .8125rem; color: rgba(23,37,60,.65); }

.mega__email { font-size: .9375rem; margin: 0; }
.mega__email a { color: var(--blue-deep); }

@media (min-width: 960px) {
  .mega {
    bottom: auto;
    max-height: calc(100vh - var(--header-h));
    box-shadow: 0 30px 60px -30px rgba(23, 37, 60, .35);
    border-top: 1px solid var(--line);
  }
  .mega__inner {
    grid-template-columns: 1.25fr .9fr 1fr;
    grid-auto-flow: dense;
    align-items: start;
    gap: 56px;
    padding-block: 44px 52px;
  }
  .mega__feature { order: 2; }
  .mega__aside { order: 3; }
  .mega__feature .ph { aspect-ratio: 4 / 5; max-height: 52vh; }
}

.mega-scrim {
  position: fixed; inset: 0;
  z-index: 50;
  background: rgba(23, 37, 60, .28);
  opacity: 0; visibility: hidden;
  transition: opacity .35s, visibility 0s linear .35s;
}
.mega-scrim.is-open { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }

/* --------------------------------------------------------------------------
   Photo placeholders  (replaced via admin with Lily's own photographs)
   -------------------------------------------------------------------------- */
.ph {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.0) 0 26px, rgba(255,255,255,.16) 26px 52px),
    linear-gradient(160deg, var(--blush), #F2BFB8);
  color: var(--navy);
}
.ph--blue {
  background:
    radial-gradient(circle at 70% 30%, rgba(249,191,69,.9) 0 9%, rgba(249,191,69,.0) 9.5%),
    linear-gradient(180deg, #0B94B4 0%, var(--blue) 55%, #0A5E78 100%);
  color: var(--ivory);
}
.ph--sun {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 30px, rgba(255,255,255,.22) 30px 60px),
    linear-gradient(180deg, #FAD27A, var(--yellow));
}
.ph--olive {
  background:
    radial-gradient(circle at 30% 70%, rgba(255,249,240,.25) 0 18%, transparent 18.5%),
    linear-gradient(170deg, #7F9566, var(--olive));
  color: var(--ivory);
}
.ph img { width: 100%; height: 100%; object-fit: cover; }
picture.ph { display: block; background: var(--blush); }
picture.ph img { object-position: 40% 30%; }

.ph__label {
  position: absolute;
  left: 16px; bottom: 16px; right: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .8125rem;
  line-height: 1.35;
  max-width: 34ch;
}
.ph__label strong {
  align-self: flex-start;
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .04em;
  background: var(--navy);
  color: var(--ivory);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.ph--blue .ph__label strong,
.ph--olive .ph__label strong { background: var(--ivory); color: var(--navy); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 500 1rem/1 var(--sans);
  letter-spacing: .03em;
  text-decoration: none;
  padding: 17px 28px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--coral { background: var(--coral); color: var(--navy); }
.btn--coral:hover { background: var(--navy); color: var(--ivory); }
.btn--outline { border-color: currentColor; color: var(--navy); background: transparent; }
.btn--outline:hover { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.btn--ivory { background: var(--ivory); color: var(--navy); }
.btn--ivory:hover { background: var(--yellow); }

/* --------------------------------------------------------------------------
   Hero (home)
   -------------------------------------------------------------------------- */
.hero { padding: 8px var(--gutter) 0; }

.hero__frame {
  position: relative;
  max-width: 1360px;
  margin-inline: auto;
  min-height: min(86svh, 820px);
  border-radius: 46vw 46vw 22px 22px / 30vw 30vw 22px 22px;
  overflow: hidden;
  display: grid;
  align-items: end;
}
.hero__frame > .ph { position: absolute; inset: 0; }
.hero__frame > .ph .ph__label { left: 24px; right: 24px; bottom: auto; top: 30%; margin-inline: auto; text-align: center; align-items: center; }
.hero__frame > .ph .ph__label strong { align-self: center; }

.hero__photo { position: absolute; inset: 0; display: block; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 30%; }
.hero__concept {
  position: absolute; top: 12%; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  font-size: .75rem; font-weight: 500; letter-spacing: .02em;
  background: rgba(255,249,240,.92); color: var(--navy);
  padding: 4px 10px; border-radius: 999px;
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,37,60,0) 34%, rgba(23,37,60,.35) 58%, rgba(23,37,60,.78) 100%);
  pointer-events: none;
}
@media (min-width: 960px) {
  .hero__photo img { object-position: 50% 30%; }
  .hero__concept { top: auto; left: auto; transform: none; bottom: 22px; right: 28px; }
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(23,37,60,.72) 0%, rgba(23,37,60,.35) 38%, rgba(23,37,60,0) 58%),
      linear-gradient(180deg, rgba(23,37,60,0) 55%, rgba(23,37,60,.35) 100%);
  }
}

.hero__content {
  position: relative;
  color: var(--ivory);
  padding: 0 12px 30px;
  text-align: center;
}

.hero__title {
  font-size: clamp(3.4rem, 15vw, 10.5rem);
  line-height: .9;
  margin: 0;
  letter-spacing: -0.025em;
}
.hero__title .t-lily { display: block; font-style: italic; }
.hero__title .t-of {
  display: inline-block;
  font-family: var(--script);
  font-size: .34em;
  color: var(--yellow);
  transform: rotate(-6deg) translateY(-.1em);
  margin-right: .1em;
  letter-spacing: 0;
}

.hero__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.125rem, 2.6vw, 1.6rem);
  line-height: 1.35;
  max-width: 30ch;
  margin: 18px auto 26px;
}

.hero__social {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.hero__social a {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none;
  background: var(--ivory);
  color: var(--navy);
  padding: 10px 13px 10px 11px;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  transition: background-color .2s, transform .25s var(--ease);
}
.hero__social a:hover { background: var(--yellow); transform: translateY(-2px); }
.hero__social svg { width: 17px; height: 17px; color: var(--coral-ink); }
.hero__social { gap: 8px; }
@media (min-width: 600px) {
  .hero__social { gap: 10px; }
  .hero__social a { gap: 9px; padding: 11px 18px 11px 14px; font-size: .9375rem; }
  .hero__social svg { width: 18px; height: 18px; }
}

@media (min-width: 960px) {
  .hero__frame { border-radius: 44vw 44vw 28px 28px / 18vw 18vw 28px 28px; }
  .hero__content { padding-bottom: 54px; }
  .hero__frame > .ph .ph__label { top: 26%; left: auto; right: 48px; text-align: right; align-items: flex-end; margin: 0; }
  .hero__frame > .ph .ph__label strong { align-self: flex-end; }
}

/* Page-load moment: the wordmark rises once */
@media (prefers-reduced-motion: no-preference) {
  .hero__title .t-lily,
  .hero__title .t-rest,
  .hero__tagline,
  .hero__social {
    animation: rise .95s var(--ease) both;
  }
  .hero__title .t-rest { animation-delay: .12s; }
  .hero__tagline { animation-delay: .28s; }
  .hero__social { animation-delay: .4s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Section rhythm
   -------------------------------------------------------------------------- */
.section { padding-block: clamp(72px, 11vw, 140px); position: relative; }

.script-heading {
  font-family: var(--script);
  font-weight: 400;
  color: var(--coral);
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  line-height: 1.05;
  margin: 0 0 .35em;
  letter-spacing: 0;
}

.serif-heading {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
}

.lede { font-size: 1.1875rem; max-width: 34em; }

/* Intro */
.intro__grid { display: grid; gap: 44px; align-items: center; }
.intro__portrait .ph { aspect-ratio: 3 / 4; border-radius: 999px 999px 16px 16px; max-width: 440px; }
.intro__portrait { position: relative; }
.intro__portrait .deco {
  position: absolute;
  width: 128px;
  right: 4%;
  bottom: -26px;
  transform: rotate(-12deg);
}
.intro__copy p { max-width: 36em; }
.intro__copy .btn { margin-top: 10px; }

@media (min-width: 860px) {
  .intro__grid { grid-template-columns: 5fr 6fr; gap: 80px; }
  .intro__portrait .deco { right: -40px; width: 150px; }
}

/* Follow along */
.follow { background: var(--blue-deep); color: var(--ivory); overflow: hidden; }
.follow__head { display: grid; gap: 8px; margin-bottom: 44px; }
.follow__head .serif-heading { margin: 0; }
.follow__head p { font-size: 1.1875rem; max-width: 28em; margin: 0; }

.channels { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.channel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  color: var(--navy);
  background: var(--ivory);
  border-radius: 20px;
  padding: 22px 24px;
  transition: transform .35s var(--ease), background-color .25s;
}
.channel:hover { transform: translateY(-4px); background: #FFFDF8; }
.channel__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blush);
  color: var(--coral-ink);
}
.channel__icon svg { width: 26px; height: 26px; }
.channel__name { font-family: var(--serif); font-size: 1.9rem; line-height: 1; display: block; }
.channel__handle { display: block; font-size: .9375rem; font-weight: 500; color: var(--coral-ink); margin-top: 6px; }
.channel__note { font-size: .9375rem; color: rgba(23,37,60,.72); display: block; margin-top: 6px; }
.channel__go {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--navy);
  display: grid; place-items: center;
  transition: background-color .25s, color .25s;
}
.channel:hover .channel__go { background: var(--coral); border-color: var(--coral); }
.channel__go svg { width: 16px; height: 16px; }

.follow .deco {
  position: absolute;
  width: 120px;
  right: -36px; bottom: -36px;
  opacity: .95;
  transform: rotate(18deg);
}

@media (min-width: 860px) {
  .follow__head { grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; }
  .channels { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .channel {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 40px;
    padding: 30px;
    min-height: 300px;
  }
  .channel__name { font-size: 2.6rem; }
  .channel__go { justify-self: start; }
  .follow .deco { right: 4%; top: 46px; bottom: auto; width: 150px; }
}

/* Work together band */
.together { background: var(--blush); text-align: center; overflow: hidden; }
.together .serif-heading { max-width: 14ch; margin-inline: auto; }
.together p { font-size: 1.1875rem; max-width: 30em; margin: 0 auto 32px; }
.together .deco-l, .together .deco-r { position: absolute; pointer-events: none; }
.together .deco-l { width: 100px; left: -30px; bottom: -14px; transform: rotate(-16deg); }
.together .deco-r { width: 110px; right: -20px; top: 40px; transform: rotate(22deg); }
@media (min-width: 860px) {
  .together .deco-l { width: 170px; left: 7%; bottom: 60px; }
  .together .deco-r { width: 140px; right: 8%; top: 70px; }
}

/* --------------------------------------------------------------------------
   Inner pages
   -------------------------------------------------------------------------- */
.page-head { padding-block: clamp(48px, 9vw, 110px) clamp(32px, 5vw, 56px); text-align: center; position: relative; }
.page-head h1 { font-size: clamp(3rem, 9vw, 6.6rem); margin: 0; }
.page-head h1 em { font-style: italic; }
.page-head .deco { width: 92px; margin: 0 auto 18px; }

/* About */
.about__grid { display: grid; gap: 48px; padding-bottom: clamp(72px, 10vw, 130px); }
.about__portrait .ph { aspect-ratio: 3 / 4; border-radius: 999px 999px 16px 16px; }
.about__copy { font-size: 1.1875rem; line-height: 1.8; }
.about__copy p { max-width: 34em; }
.about__copy p:first-child::first-letter {
  font-family: var(--serif);
  float: left;
  font-size: 4.6em;
  line-height: .78;
  padding: .08em .1em 0 0;
  color: var(--coral);
}
.about__aside {
  font-family: var(--script);
  color: var(--blue-deep);
  font-size: 1.7rem;
  line-height: 1.25;
  margin: 26px 0 0;
}

@media (min-width: 900px) {
  .about__grid { grid-template-columns: 5fr 7fr; gap: 96px; align-items: start; }
  .about__portrait { position: sticky; top: calc(var(--header-h) + 32px); }
}

.duo { display: grid; gap: 22px; padding-bottom: clamp(72px, 10vw, 130px); }
.duo figure { margin: 0; }
.duo .ph { aspect-ratio: 4 / 3; border-radius: 18px; }
.duo figure:nth-child(2) .ph { aspect-ratio: 4 / 5; }
.duo figcaption { font-size: .9375rem; color: rgba(23,37,60,.7); margin-top: 10px; }
@media (min-width: 860px) {
  .duo { grid-template-columns: 7fr 5fr; align-items: end; gap: 32px; }
}

/* Partnerships */
.partner__intro { display: grid; gap: 40px; padding-bottom: clamp(56px, 8vw, 100px); }
.partner__intro .copy { font-size: 1.1875rem; line-height: 1.8; }
.partner__intro .copy p { max-width: 34em; }

.brands {
  list-style: none;
  margin: 0;
  padding: 26px 0;
  border-block: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  line-height: 1.3;
}
.brands li:nth-child(odd) { font-style: italic; }
.brands li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: .32em; height: .32em;
  border-radius: 50%;
  background: var(--coral);
  margin-left: 24px;
  vertical-align: middle;
}
.brands__note { font-size: .875rem; color: rgba(23,37,60,.65); margin-top: 12px; }

.mgmt-card {
  background: var(--navy);
  color: var(--ivory);
  border-radius: 24px;
  padding: 32px;
  align-self: start;
}
.mgmt-card h2 { font-size: 1.9rem; margin-bottom: .4em; }
.mgmt-card p { color: rgba(255,249,240,.85); }
.mgmt-card .email {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  color: var(--yellow);
  text-decoration: none;
  overflow-wrap: anywhere;
  margin: 6px 0 22px;
}
.mgmt-card .email:hover { text-decoration: underline; }
.mgmt-card .copy-btn {
  background: transparent;
  color: var(--ivory);
  border: 1.5px solid rgba(255,249,240,.5);
  border-radius: 999px;
  padding: 10px 18px;
  font: 500 .875rem/1 var(--sans);
  cursor: pointer;
}
.mgmt-card .copy-btn:hover { border-color: var(--ivory); }

@media (min-width: 900px) {
  .partner__intro { grid-template-columns: 7fr 4fr; gap: 72px; }
}

.charter { background: var(--blue-deep); color: var(--ivory); }
.charter__grid { display: grid; gap: 44px; }
.charter h2 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
.charter__copy p { font-size: 1.1875rem; max-width: 30em; }
.charter__lede { font-family: var(--serif); font-style: italic; color: var(--yellow); font-size: clamp(1.4rem, 3vw, 1.75rem); line-height: 1.3; }
.charter__media .ph { aspect-ratio: 4 / 5; border-radius: 999px 999px 18px 18px; max-width: 360px; margin-top: 30px; }
.charter__note {
  font-size: .9375rem;
  color: rgba(255,249,240,.82);
  border-left: 2px solid var(--yellow);
  padding-left: 14px;
  max-width: 30em;
}
@media (min-width: 960px) {
  .charter__grid { grid-template-columns: 5fr 6fr; gap: 80px; align-items: start; }
}

/* --------------------------------------------------------------------------
   Forms (contact panel + charter form)
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--ivory);
  color: var(--navy);
  border-radius: 24px;
  padding: clamp(22px, 4vw, 40px);
}

.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label, .field legend { font-size: .9375rem; font-weight: 500; }
.field .opt { font-weight: 400; color: rgba(23,37,60,.6); }
.field input, .field select, .field textarea {
  width: 100%;
  font: 400 1rem/1.4 var(--sans);
  color: var(--navy);
  background: #fff;
  border: 1.5px solid rgba(23,37,60,.22);
  border-radius: 12px;
  padding: 13px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(8,127,156,.18);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--coral-ink); }
.field__error { font-size: .875rem; color: var(--coral-ink); min-height: 0; }
.field__error:empty { display: none; }

.field-row { display: grid; gap: 0 14px; }
@media (min-width: 560px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }

.charter-extra {
  border: 0;
  margin: 4px 0 16px;
  padding: 18px;
  background: var(--ivory-deep);
  border-radius: 16px;
  display: none;
}
.charter-extra.is-visible { display: block; animation: fadeIn .35s var(--ease); }
.charter-extra legend {
  float: left;
  width: 100%;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  margin-bottom: 12px;
  padding: 0;
}
.charter-extra legend + * { clear: both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.hp-field { position: absolute; left: -9999px; }

.form-status {
  border-radius: 14px;
  padding: 14px 16px;
  font-size: .9375rem;
  margin-bottom: 16px;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--preview { background: #FFF1CF; border: 1px solid #F1D48B; }
.form-status--error { background: #FDE3E1; border: 1px solid #F3B1AC; }

.form-submit { width: 100%; }
.form-fineprint { font-size: .8125rem; color: rgba(23,37,60,.62); margin: 12px 0 0; }

/* --------------------------------------------------------------------------
   Right-side contact panel
   -------------------------------------------------------------------------- */
.chat-tab {
  position: fixed;
  z-index: 70;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  background: var(--coral);
  color: var(--navy);
  font: 600 .875rem/1 var(--sans);
  letter-spacing: .14em;
  padding: 15px 20px;
  border-radius: 999px;
  box-shadow: 0 10px 30px -10px rgba(23,37,60,.5);
  transition: background-color .25s, color .25s, transform .3s var(--ease);
}
.chat-tab:hover { background: var(--navy); color: var(--ivory); }
.chat-tab svg { width: 16px; height: 16px; }
@media (max-width: 959px) {
  .chat-tab.is-tucked { transform: translateY(140%); }
}

@media (min-width: 960px) {
  .chat-tab {
    right: 0;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    padding: 26px 14px;
    border-radius: 16px 0 0 16px;
    box-shadow: -6px 0 24px -12px rgba(23,37,60,.5);
  }
  .chat-tab svg { transform: rotate(90deg); }
  .chat-tab:hover { padding-right: 18px; }
}

.chat-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(23,37,60,.4);
  opacity: 0; visibility: hidden;
  transition: opacity .35s, visibility 0s linear .35s;
}
.chat-scrim.is-open { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }

.chat-panel {
  position: fixed;
  z-index: 90;
  left: 0; right: 0; bottom: 0;
  max-height: 92svh;
  background: var(--ivory);
  border-radius: 26px 26px 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(105%);
  visibility: hidden;
  transition: transform .5s var(--ease), visibility 0s linear .5s;
  box-shadow: 0 -20px 60px -20px rgba(23,37,60,.45);
}
.chat-panel.is-open { transform: none; visibility: visible; transition: transform .5s var(--ease), visibility 0s; }

.chat-panel__grip {
  width: 44px; height: 5px; border-radius: 5px;
  background: rgba(23,37,60,.2);
  margin: 10px auto 0;
}

.chat-panel__head {
  position: relative;
  padding: 18px 24px 8px;
}
.chat-panel__head .script-heading { font-size: 2.8rem; margin: 0 0 6px; }
.chat-panel__head p { margin: 0; font-size: 1rem; max-width: 30em; }
.chat-panel__head .deco { position: absolute; width: 70px; right: 66px; top: 8px; transform: rotate(14deg); }

.chat-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  display: grid; place-items: center;
}
.chat-close:hover { background: var(--navy); color: var(--ivory); }
.chat-close svg { width: 16px; height: 16px; }

.chat-panel__mgmt {
  margin: 16px 24px 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--blush);
  font-size: .9375rem;
  line-height: 1.5;
}
.chat-panel__mgmt a { font-weight: 600; color: var(--navy); }

.chat-panel form { padding: 18px 24px 30px; }

@media (min-width: 960px) {
  .chat-panel {
    left: auto; top: 0; bottom: 0;
    width: 460px;
    max-height: none;
    border-radius: 26px 0 0 26px;
    transform: translateX(105%);
  }
  .chat-panel__grip { display: none; }
  .chat-panel__head { padding: 36px 32px 8px; }
  .chat-panel__mgmt { margin-inline: 32px; }
  .chat-panel form { padding: 18px 32px 36px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy); color: var(--ivory); padding-block: 64px 28px; }
.site-footer .wordmark { color: var(--ivory); font-size: 2.2rem; }
.site-footer .wordmark__of { color: var(--yellow); }
.footer__grid { display: grid; gap: 36px; }
.footer__tag { font-family: var(--serif); font-style: italic; font-size: 1.2rem; max-width: 26ch; margin: 14px 0 0; color: rgba(255,249,240,.85); }
.footer__col h2 { font-family: var(--sans); font-size: .9375rem; font-weight: 500; letter-spacing: .04em; color: var(--yellow); margin-bottom: 12px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer__col a { text-decoration: none; color: rgba(255,249,240,.88); }
.footer__col a:hover { color: var(--ivory); text-decoration: underline; }
.footer__social { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__social a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: rgba(255,249,240,.9); }
.footer__social a:hover { color: var(--ivory); }
.footer__social .icon-link { width: 38px; height: 38px; color: var(--ivory); border: 1px solid rgba(255,249,240,.25); }
.footer__social a:hover .icon-link { background: var(--coral); color: var(--navy); border-color: var(--coral); }
.footer__base {
  margin-top: 52px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,249,240,.15);
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  justify-content: space-between;
  font-size: .8125rem;
  color: rgba(255,249,240,.65);
}
.footer__base a { color: rgba(255,249,240,.8); }
@media (min-width: 860px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 48px; }
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  z-index: 120;
  transform: translate(-50%, 20px);
  background: var(--navy);
  color: var(--ivory);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: .9375rem;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, transform .3s var(--ease), visibility 0s linear .3s;
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .3s, transform .3s var(--ease), visibility 0s; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Shared helpers added for the Charters page
   -------------------------------------------------------------------------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: inherit; }
.together .btn-row { justify-content: center; }
.together--short .serif-heading { max-width: 22ch; }
.together a:not(.btn) { color: var(--navy); font-weight: 500; }
.form-card__title { font-size: 2.4rem; }
.text-link { color: var(--coral-ink); font-weight: 500; text-underline-offset: 4px; }

/* Placeholders for facts we don't have yet */
.tbc {
  display: inline-block;
  font-family: var(--sans);
  font-style: normal;
  font-size: .875rem;
  font-weight: 500;
  color: #7A5A0A;
  background: #FFF3D6;
  border: 1px dashed #E2BC5C;
  border-radius: 999px;
  padding: 3px 12px;
}
.tbc-block {
  border: 1.5px dashed #E2BC5C;
  background: #FFF8E6;
  border-radius: 16px;
  padding: 18px 20px;
  color: #6B5410;
  font-size: 1rem;
}
.tbc-block--sm { font-size: .9375rem; padding: 12px 14px; }

/* Yacht hero */
.yacht-hero { padding-block: clamp(32px, 6vw, 72px) clamp(56px, 8vw, 100px); }
.yacht-hero__grid { display: grid; gap: 40px; align-items: center; }
.yacht-hero h1 { font-size: clamp(3rem, 8vw, 5.8rem); line-height: 1; }
.yacht-hero h1 em { display: block; }
.yacht-hero__kicker { font-family: var(--script); color: var(--coral); font-size: 1.7rem; margin: 0 0 6px; }
.yacht-hero__lede { color: var(--blue-deep); }
.yacht-hero__copy p { font-size: 1.1875rem; max-width: 30em; }
.yacht-hero__copy .btn-row { margin-top: 12px; }
.yacht-hero__media { position: relative; }
.yacht-hero__media .ph { aspect-ratio: 4 / 5; border-radius: 999px 999px 20px 20px; }
.yacht-hero__media .deco { position: absolute; width: 90px; right: -18px; top: 18%; transform: rotate(14deg); }
@media (min-width: 900px) {
  .yacht-hero__grid { grid-template-columns: 6fr 5fr; gap: 80px; }
  .yacht-hero__media .deco { width: 120px; right: -56px; }
}

/* The yacht */
.yacht { background: var(--ivory-deep); }
.yacht__grid { display: grid; gap: 40px; }
.yacht__name { margin: 0 0 22px; }
.yacht__about p { max-width: 34em; }
.specs {
  background: var(--ivory);
  border-radius: 24px;
  padding: 28px;
  border: 1px solid var(--line);
}
.specs h3 { font-family: var(--script); color: var(--coral); font-size: 2rem; margin-bottom: 10px; }
.specs dl { margin: 0; }
.specs dl > div {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.specs dl > div:last-child { border-bottom: 0; }
.specs dt { font-size: .9375rem; color: rgba(23,37,60,.7); }
.specs dd { margin: 0; font-family: var(--serif); font-size: 1.15rem; text-align: right; }
.specs__note { font-size: .8125rem; color: rgba(23,37,60,.6); margin: 14px 0 0; }
@media (min-width: 900px) {
  .yacht__grid { grid-template-columns: 7fr 5fr; gap: 80px; align-items: start; }
}

/* Life on board */
.onboard__grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.onboard__grid figure { margin: 0; }
.onboard__grid .ph { height: 100%; min-height: 180px; border-radius: 18px; }
.onboard__grid .g-a { grid-column: 1 / -1; }
.onboard__grid .g-a .ph { aspect-ratio: 16 / 10; }
.onboard__grid .ph__label { font-size: .75rem; }
.onboard__note { font-size: .875rem; color: rgba(23,37,60,.62); margin-top: 14px; }
@media (min-width: 900px) {
  .onboard__grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: 260px 260px; gap: 18px; }
  .onboard__grid .g-a { grid-column: 1 / 3; grid-row: 1 / 3; }
  .onboard__grid .g-a .ph { aspect-ratio: auto; border-radius: 999px 999px 18px 18px; }
}

/* Crew */
.crew { padding-top: 0; }
.crew__grid { display: grid; gap: 28px; }
.crew-card { display: grid; gap: 20px; grid-template-columns: 120px 1fr; align-items: start; }
.crew-card__photo { display: block; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 999px 999px 14px 14px; }
.crew-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.crew-card__photo .ph__label { font-size: .6875rem; left: 8px; right: 8px; bottom: 10px; }
.crew-card h3 { font-size: 2rem; margin-bottom: .3em; }
.crew-card h3 span { font-family: var(--script); color: var(--coral); font-size: .7em; margin-left: 8px; }
.crew-card p { max-width: 30em; }
@media (min-width: 860px) {
  .crew__grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .crew-card { grid-template-columns: 170px 1fr; gap: 28px; }
}

.charter__deco { width: 110px; margin-top: 24px; transform: rotate(-10deg); }

/* Desktop hero: copy sits left of Lily (placed last so it wins over the base rules) */
@media (min-width: 960px) {
  .hero .hero__content { text-align: left; justify-self: start; padding-left: 6%; max-width: 820px; }
  .hero .hero__title { font-size: clamp(5rem, 8.4vw, 8.6rem); }
  .hero .hero__title .t-rest { white-space: nowrap; }
  .hero .hero__tagline { margin-left: 0; }
  .hero .hero__social { justify-content: flex-start; }
}

/* ==========================================================================
   COVER EDITION
   Bold travel-book direction: flat colour blocks, chunky display type,
   stacked two-size titles and cut-paper shapes. Overrides earlier rules.
   ========================================================================== */

:root {
  --display: "Bowlby One", "Arial Black", Impact, sans-serif;
  --serif: "Jost", "Futura", system-ui, sans-serif; /* former serif accents now set in Jost italic */
  --pink: #EE5BA6;
  --pink-soft: #FFB3CF;
  --green: #2E8F5A;
  --lilac: #C8D5F0;
  --tangerine: #F68B3C;
  --cobalt: #2340A0;
  --aqua: #8EDBEA;
  --red: #D62F3A;
  --sun: #FFD45C;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .98;
}
.footer__col h2, .specs h3, .form-card__title, .charter-extra legend { text-transform: none; }
.footer__col h2 { font-family: var(--sans); }

/* Cut-paper shapes */
.motif { display: block; aspect-ratio: 1; height: auto; filter: url(#cut); color: var(--coral); }
.motif--yellow { color: var(--sun); }
.motif--inline { width: 120px; margin-top: 22px; color: var(--green); transform: rotate(-12deg); }

/* Stacked two-size titles */
.cover-title {
  --s: clamp(2.7rem, 7vw, 5.4rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--s);
  line-height: .9;
  margin: 0 0 .45em;
}
.cover-title .ct-a { color: var(--coral); }
.cover-title .ct-b { font-size: .5em; margin: .12em 0 0 .9em; color: var(--blue-deep); }
.cover-title--sm { --s: clamp(2.1rem, 5vw, 3.6rem); }
.cover-title--panel { --s: 2.7rem; margin: 0 0 10px; }
.cover-title--panel .ct-b { color: var(--navy); }

/* Wordmark */
.wordmark { align-items: baseline; gap: 8px; }
.wordmark__lily { font-family: var(--display); text-transform: uppercase; color: var(--coral); font-size: 1.15em; line-height: 1; letter-spacing: .01em; }
.wordmark__rest { font-family: var(--script); color: var(--navy); font-size: .62em; transform: rotate(-4deg) translateY(-.1em); display: inline-block; }
.site-footer .wordmark__lily { color: var(--sun); }
.site-footer .wordmark__rest { color: var(--ivory); }

/* ---------- Hero ---------- */
.cover-hero {
  position: relative;
  overflow: hidden;
  background: var(--pink);
  color: var(--ivory);
  padding-block: 36px 84px;
}
.cover-hero__inner { position: relative; display: grid; gap: 52px; align-items: center; }
.cover-hero__copy { position: relative; z-index: 2; }
.cover-title--hero { --s: clamp(5rem, 24vw, 12.5rem); margin-bottom: .2em; }
.cover-title--hero .ct-a { color: var(--sun); line-height: .82; }
.cover-title--hero .ct-b { color: var(--navy); font-size: .3em; margin: .2em 0 0 .25em; }
.cover-hero .hero__tagline {
  font-family: var(--sans); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.4;
  max-width: 26ch; margin: 0 0 28px; color: var(--ivory);
}
.cover-hero .hero__social { justify-content: flex-start; }
.cover-hero .hero__social a { background: var(--ivory); }
.cover-hero .hero__social a:hover { background: var(--sun); }

.cover-hero__book {
  position: relative;
  z-index: 1;
  margin: 0 8px;
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  overflow: hidden;
  transform: rotate(3deg);
  box-shadow: 0 0 0 10px var(--ivory), 22px 30px 50px -18px rgba(23, 37, 60, .55);
}
.cover-hero__book .hero__photo { position: absolute; inset: 0; }
.cover-hero__book .hero__photo img { object-position: 66% 30%; }
.cover-hero__book .hero__concept { top: auto; bottom: 12px; left: 12px; right: auto; transform: none; }

.cover-hero__motif { position: absolute; z-index: 0; width: 200px; left: -40px; top: 34%; color: var(--red); transform: rotate(-18deg); }
.cover-hero__motif2 { position: absolute; z-index: 2; width: 120px; right: -10px; bottom: -60px; color: var(--sun); transform: rotate(14deg); }

@media (min-width: 960px) {
  .cover-hero { padding-block: 56px 96px; min-height: calc(100vh - var(--header-h) - 34px); display: grid; align-items: center; }
  .cover-hero__inner { grid-template-columns: 6fr 5fr; gap: 64px; }
  .cover-hero__book { aspect-ratio: 4 / 5; max-height: 74vh; margin: 0; }
  .cover-hero__motif { width: 300px; left: 30%; top: auto; bottom: -110px; }
  .cover-hero__motif2 { width: 170px; right: 40%; top: -30px; bottom: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  .cover-title--hero .ct-a, .cover-title--hero .ct-b, .cover-hero .hero__tagline, .cover-hero .hero__social { animation: rise .9s var(--ease) both; }
  .cover-title--hero .ct-b { animation-delay: .1s; }
  .cover-hero .hero__tagline { animation-delay: .22s; }
  .cover-hero .hero__social { animation-delay: .34s; }
  .cover-hero__book { animation: settle 1.1s var(--ease) .15s both; }
}
@keyframes settle { from { opacity: 0; transform: rotate(9deg) translateY(40px); } to { opacity: 1; transform: rotate(3deg); } }

/* ---------- Intro ---------- */
.cover-title--intro .ct-a { color: var(--navy); }
.cover-title--intro .ct-b { color: var(--coral); font-size: .9em; margin-left: .6em; }
.intro__portrait { isolation: isolate; }
.intro__portrait::before {
  content: ""; position: absolute; z-index: -1;
  inset: 4% -4% -3% 6%;
  max-width: 440px;
  background: var(--lilac);
  border-radius: 3px;
  transform: rotate(5deg);
}
.intro__portrait .ph { border-radius: 3px; transform: rotate(-2deg); box-shadow: 14px 20px 36px -16px rgba(23,37,60,.45); }
.intro__portrait .deco { color: var(--sun); }

/* ---------- Follow along: books on a table ---------- */
.shelf { background: var(--ivory); overflow: hidden; }
.shelf__head { display: grid; gap: 6px; }
.shelf__head .cover-title .ct-a { color: var(--navy); }
.shelf__head .cover-title .ct-b { color: var(--pink); }
.shelf__head p { font-size: 1.1875rem; max-width: 28em; margin: 0; }
.shelf__table { padding: 34px var(--gutter) 20px; }
.shelf__row {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1180px;
  display: grid; gap: 34px;
  justify-items: center;
}
.shelf__row li { width: 100%; max-width: 330px; }
.shelf__row li:nth-child(odd) .book { transform: rotate(-3deg); }
.shelf__row li:nth-child(even) .book { transform: rotate(2.5deg); }

.book {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  aspect-ratio: 3 / 4;
  padding: 28px 24px 22px 32px;
  border-radius: 3px 10px 10px 3px;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 4px 6px 0 rgba(23,37,60,.08), 20px 30px 44px -20px rgba(23,37,60,.55);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.book::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
  background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0));
}
.shelf__row li .book:hover, .shelf__row li .book:focus-visible { transform: translateY(-12px) rotate(0deg); box-shadow: 4px 6px 0 rgba(23,37,60,.08), 26px 44px 54px -20px rgba(23,37,60,.6); }
.book__title { display: flex; flex-direction: column; font-family: var(--display); text-transform: uppercase; line-height: .9; position: relative; z-index: 1; }
.book__title .ct-a { font-size: clamp(1.9rem, 2.7vw, 2.45rem); }
.book__title .ct-b { font-family: var(--sans); text-transform: none; font-weight: 600; font-size: 1rem; margin: 10px 0 0 4px; }
.book__motif { width: 64%; align-self: center; margin: auto 0; }
.book__foot { display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 500; position: relative; z-index: 1; }
.book__icon { width: 20px; height: 20px; flex: none; }

.book--pink { background: var(--pink); color: var(--navy); }
.book--pink .ct-a { color: var(--sun); }
.book--pink .book__motif { color: var(--red); }
.book--green { background: var(--green); color: var(--ivory); }
.book--green .ct-a { color: var(--pink-soft); }
.book--green .book__motif { color: var(--ivory); }
.book--blue { background: var(--cobalt); color: var(--ivory); }
.book--blue .ct-a { color: var(--ivory); }
.book--blue .ct-b { color: var(--aqua); }
.book--blue .book__motif { color: var(--sun); }

@media (min-width: 860px) {
  .shelf__head { grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; }
  .shelf__table { padding-block: 70px 50px; }
  .shelf__row { grid-template-columns: repeat(3, 1fr); gap: 44px; transform: rotate(-5deg); }
  .shelf__row li:nth-child(2) { transform: translateY(36px); }
  .shelf__row li:nth-child(3) { transform: translateY(72px); }
  .shelf__row li:nth-child(n) .book { transform: none; }
  .shelf { padding-bottom: clamp(110px, 13vw, 170px); }
}

/* ---------- Work together band ---------- */
.together { background: var(--tangerine); color: var(--navy); }
.together .cover-title { align-items: center; margin-inline: auto; }
.together .cover-title .ct-a { color: var(--navy); }
.together .cover-title .ct-b { color: var(--ivory); margin-left: 0; font-size: .62em; }
.together .btn--coral { background: var(--navy); color: var(--ivory); }
.together .btn--coral:hover { background: var(--ivory); color: var(--navy); }
.together .btn--outline { color: var(--navy); border-color: var(--navy); }
.together .deco-l { color: var(--pink); width: 140px; }
.together .deco-r { color: var(--sun); width: 120px; }
.together a:not(.btn) { color: var(--navy); }

/* ---------- Cover bands (inner page heads) ---------- */
.cover-band { position: relative; overflow: hidden; padding-block: clamp(56px, 10vw, 128px); }
.cover-band__inner { position: relative; }
.cover-band .cover-title { --s: clamp(3rem, 11vw, 8rem); margin: 0; position: relative; z-index: 1; }
.cover-band__motif { position: absolute; z-index: 0; right: -6%; top: 50%; width: clamp(150px, 26vw, 330px); transform: translateY(-50%) rotate(12deg); }
@media (min-width: 900px) { .cover-band__motif { right: 4%; } }

.cover-band--green { background: var(--green); }
.cover-band--green .ct-a { color: var(--pink-soft); }
.cover-band--green .ct-b { color: var(--ivory); }
.cover-band--green .cover-band__motif { color: var(--sun); }
.cover-band--lilac { background: var(--lilac); }
.cover-band--lilac .ct-a { color: var(--navy); }
.cover-band--lilac .ct-b { color: var(--coral-ink); }
.cover-band--lilac .cover-band__motif { color: var(--red); }

/* About */
.about__grid { padding-top: clamp(56px, 8vw, 100px); }
.about__portrait .ph { border-radius: 3px; transform: rotate(-2deg); box-shadow: 0 0 0 10px #fff, 18px 26px 40px -18px rgba(23,37,60,.45); }
.about__copy p:first-child::first-letter { font-family: var(--display); color: var(--green); }
.about__aside { color: var(--pink); }
.duo .ph { border-radius: 3px; }

/* Partnerships */
.partner__intro { padding-top: clamp(56px, 8vw, 100px); }
.brands { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1.35; gap: 6px 22px; }
.brands li:nth-child(odd) { font-style: normal; color: var(--coral-ink); }
.brands li:nth-child(even) { color: var(--blue-deep); }
.brands li:not(:last-child)::after { background: var(--navy); }
.mgmt-card { background: var(--cobalt); border-radius: 3px 14px 14px 3px; }
.mgmt-card h2 { font-size: 1.6rem; color: var(--sun); }
.mgmt-card .email { color: var(--ivory); font-family: var(--sans); font-style: normal; font-weight: 600; }

/* Charters */
.cover-band--blue { background: var(--cobalt); color: var(--ivory); }
.yacht-hero.cover-band { padding-block: clamp(48px, 8vw, 100px) clamp(72px, 9vw, 120px); }
.yacht-hero .cover-title { --s: clamp(2.6rem, 7.4vw, 5.6rem); }
.yacht-hero .cover-title .ct-a { color: var(--sun); }
.yacht-hero .cover-title .ct-b { color: var(--ivory); font-size: .62em; }
.yacht-hero__kicker { color: var(--aqua); font-family: var(--script); }
.yacht-hero__lede { color: var(--aqua); }
.yacht-hero__copy p { color: var(--ivory); }
.yacht-hero .btn--coral { background: var(--sun); color: var(--navy); }
.yacht-hero .btn--coral:hover { background: var(--ivory); }
.btn--ivory-outline { border-color: var(--ivory); color: var(--ivory); background: transparent; }
.btn--ivory-outline:hover { background: var(--ivory); color: var(--navy); }
.yacht-hero__media .ph { border-radius: 3px; transform: rotate(3deg); box-shadow: 0 0 0 10px var(--ivory), 22px 30px 50px -18px rgba(0,0,0,.5); }
.yacht-hero__media .deco { display: none; }
.yacht .cover-title .ct-a, .onboard .cover-title .ct-a, .crew .cover-title .ct-a { color: var(--navy); }
.yacht .cover-title .ct-b { color: var(--green); }
.onboard .cover-title .ct-b { color: var(--pink); }
.crew .cover-title .ct-b { color: var(--coral); }
.onboard__grid .ph { border-radius: 3px; }
@media (min-width: 900px) { .onboard__grid .g-a .ph { border-radius: 3px; } }
.specs { border-radius: 3px 14px 14px 3px; }
.specs dd { font-family: var(--sans); font-weight: 600; font-size: 1rem; }
.crew-card h3 { font-size: 1.9rem; }
.crew-card h3 span { text-transform: none; font-family: var(--script); }
.crew-card__photo { border-radius: 3px; }
.together--short .cover-title .ct-b { font-size: .7em; }
.charter h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--sun); }
.charter__deco { color: var(--pink-soft); }

/* Mega menu */
.mega__links a { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.7rem, 5vw, 2.7rem); }
.mega__links a[aria-current="page"] { font-style: normal; color: var(--coral); }
.mega__links li:nth-child(2) a:hover { color: var(--pink); }
.mega__links li:nth-child(3) a:hover { color: var(--green); }
.mega__links li:nth-child(4) a:hover { color: var(--cobalt); }
.mega__feature .ph { border-radius: 3px; }
.mega__statement { font-style: italic; font-weight: 500; font-size: 1.35rem; }
.footer__tag { font-family: var(--sans); }

/* Contact panel */
.chat-panel__head .deco { width: 64px; }
.chat-panel__head p { margin-top: 2px; }

/* Cover edition: phone refinements */
@media (max-width: 959px) {
  .cover-hero__motif { width: 120px; left: auto; right: -26px; top: 18px; transform: rotate(16deg); }
  .cover-hero__motif2 { width: 96px; right: auto; left: -24px; bottom: -40px; }
  .shelf__row li { max-width: 300px; }
  .book { aspect-ratio: 4 / 5; }
  .together .deco-r { width: 80px; right: -24px; top: 16px; }
  .together .deco-l { width: 96px; left: -28px; bottom: -18px; }
}
.mega__links a small { font-family: var(--sans); text-transform: none; font-size: .875rem; }
.yacht-hero .cover-title { margin-bottom: .35em; }
.yacht-hero__kicker { font-size: 1.5rem; margin-bottom: 10px; }

/* ==========================================================================
   Recipes (index + single). Hidden from visitors until switched on in the admin.
   ========================================================================== */
.hidden-note {
  background: var(--sun);
  color: var(--navy);
  text-align: center;
  font-size: .9375rem;
  padding: 12px var(--gutter);
}
.hidden-note a { color: var(--navy); font-weight: 600; }

/* Extra cover colours */
.cover-band--coral { background: var(--coral); }
.cover-band--coral .ct-a { color: var(--ivory); }
.cover-band--coral .ct-b { color: var(--navy); }
.cover-band--coral .cover-band__motif { color: var(--sun); }
.cover-band--sun { background: var(--sun); }
.cover-band--sun .ct-a { color: var(--navy); }
.cover-band--sun .cover-band__motif { color: var(--coral); }
.cover-band--pink { background: var(--pink); }
.cover-band--pink .ct-a { color: var(--sun); }
.cover-band--pink .cover-band__motif { color: var(--red); }
.cover-band--blue .ct-a { color: var(--sun); }
.cover-band--blue .cover-band__motif { color: var(--aqua); }
.cover-band--lilac .cover-band__motif { color: var(--coral); }
.cover-band--tangerine { background: var(--tangerine); }
.cover-band--tangerine .ct-a { color: var(--navy); }
.cover-band--tangerine .cover-band__motif { color: var(--sun); }
.cover-band--green .cover-band__motif { color: var(--sun); }

/* Index tools */
.recipes { padding-top: clamp(40px, 6vw, 72px); }
.recipe-tools { display: grid; gap: 16px; margin-bottom: 18px; }
.recipe-search { position: relative; max-width: 460px; }
.recipe-search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: rgba(23,37,60,.55); }
.recipe-search input {
  width: 100%;
  font: 400 1rem/1.4 var(--sans);
  padding: 14px 16px 14px 44px;
  border-radius: 999px;
  border: 1.5px solid rgba(23,37,60,.22);
  background: #fff;
  color: var(--navy);
}
.recipe-search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8,127,156,.18); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 500 .9375rem/1 var(--sans);
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--navy);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.chip:hover { background: var(--blush); }
.chip[aria-pressed="true"] { background: var(--navy); color: var(--ivory); }
.recipe-count { font-size: .9375rem; color: rgba(23,37,60,.65); margin: 0 0 18px; }

/* Index grid */
.recipe-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.recipe-card {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: var(--navy);
  border-radius: 3px 12px 12px 3px;
  overflow: hidden;
  box-shadow: 14px 22px 36px -22px rgba(23,37,60,.5);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.recipe-card:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 18px 30px 44px -22px rgba(23,37,60,.6); }
.recipe-card__photo { position: relative; aspect-ratio: 4 / 3; display: block; }
.recipe-card__motif { position: absolute; width: 38%; right: 12px; top: 12px; opacity: .9; }
.recipe-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; flex: 1; }
.recipe-card__title { font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; line-height: 1.05; }
.recipe-card__meta { font-size: .9375rem; font-weight: 500; }
.recipe-card__cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.recipe-card__cats span { font-size: .8125rem; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.55); }
.recipe-card--sun .recipe-card__body { background: var(--sun); }
.recipe-card--pink .recipe-card__body { background: var(--pink); }
.recipe-card--blue .recipe-card__body { background: var(--cobalt); color: var(--ivory); }
.recipe-card--blue .recipe-card__cats span { background: rgba(255,255,255,.18); }
.recipe-card--lilac .recipe-card__body { background: var(--lilac); }
.recipe-card--tangerine .recipe-card__body { background: var(--tangerine); }
.recipe-card--green .recipe-card__body { background: var(--green); color: var(--ivory); }
.recipe-card--green .recipe-card__cats span { background: rgba(255,255,255,.18); }
.recipe-card--pink .recipe-card__motif { color: var(--red); }
.recipe-card--sun .recipe-card__motif, .recipe-card--tangerine .recipe-card__motif { color: var(--coral); }
.recipe-card--blue .recipe-card__motif, .recipe-card--green .recipe-card__motif { color: var(--sun); }
.recipe-card--lilac .recipe-card__motif { color: var(--coral); }
.recipe-empty { grid-column: 1 / -1; padding: 30px; text-align: center; background: var(--ivory-deep); border-radius: 14px; }
.sample-note { font-size: .875rem; color: rgba(23,37,60,.6); margin-top: 26px; }

/* Single recipe */
.recipe-head { padding-block: clamp(36px, 6vw, 80px); }
.recipe-back { display: inline-block; margin-bottom: 18px; font-weight: 600; text-decoration: none; color: inherit; border-bottom: 2px solid currentColor; }
.cover-band--blue .recipe-back, .cover-band--green .recipe-back { color: var(--ivory); }
.cover-title--recipe { --s: clamp(2.2rem, 6vw, 4.6rem) !important; max-width: 15ch; }
.recipe-head__short { font-style: italic; font-weight: 500; font-size: 1.2rem; max-width: 34ch; margin: 18px 0 14px; position: relative; z-index: 1; }
.cover-band--blue .recipe-head__short, .cover-band--green .recipe-head__short { color: var(--ivory); }
.recipe-head__cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; }
.recipe-head__cats li { font-size: .8125rem; font-weight: 500; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.6); color: var(--navy); }

.recipe-body { padding-block: 36px clamp(72px, 10vw, 120px); }
.recipe-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 30px; }
.recipe-facts div { background: var(--ivory-deep); border-radius: 14px; padding: 14px 16px; }
.recipe-facts dt { font-size: .8125rem; color: rgba(23,37,60,.65); }
.recipe-facts dd { margin: 2px 0 0; font-family: var(--display); text-transform: uppercase; font-size: 1.1rem; }
@media (min-width: 700px) { .recipe-facts { grid-template-columns: repeat(4, 1fr); } }

.recipe-gallery { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); margin-bottom: 30px; }
.recipe-gallery .ph { border-radius: 3px; }
.recipe-gallery__main { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.recipe-gallery__thumb { aspect-ratio: 1; }
@media (min-width: 900px) {
  .recipe-gallery { grid-template-columns: 3fr 1fr; grid-template-rows: repeat(3, 1fr); height: 520px; }
  .recipe-gallery__main { grid-column: 1; grid-row: 1 / 4; aspect-ratio: auto; }
  .recipe-gallery__thumb { aspect-ratio: auto; }
}
.recipe-intro { font-size: 1.1875rem; line-height: 1.8; max-width: 40em; margin-bottom: 40px; }

.recipe-cols { display: grid; gap: 40px; }
.recipe-ingredients, .recipe-method { min-width: 0; }
.recipe-cols h2 { font-size: 1.6rem; color: var(--coral); margin-bottom: 18px; }
.recipe-ingredients { background: var(--ivory-deep); border-radius: 3px 16px 16px 3px; padding: 24px; align-self: start; }
.recipe-ingredients ul { list-style: none; margin: 0; padding: 0; }
.recipe-ingredients li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.recipe-ingredients li:last-child { border-bottom: 0; }
.ing-amt { font-weight: 600; }
.ing-note { color: rgba(23,37,60,.7); }
.ing-group { font-family: var(--script); color: var(--blue-deep); font-size: 1.4rem; border-bottom: 0 !important; padding-top: 16px !important; }
.ing-group:first-child { padding-top: 0 !important; }
.recipe-method ol { list-style: none; margin: 0 0 36px; padding: 0; display: grid; gap: 22px; }
.recipe-method ol > li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; }
.step-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: var(--ivory);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 1.1rem;
}
.recipe-method ol > li p { margin: 8px 0 0; font-size: 1.0625rem; }
.recipe-tips li { margin-bottom: 4px; }
.step-photo { margin-top: 12px; aspect-ratio: 16 / 10; max-width: 380px; border-radius: 3px; }
.recipe-notes, .recipe-tips { border-radius: 3px 16px 16px 3px; padding: 22px 24px; margin-bottom: 18px; }
.recipe-notes { background: var(--blush); }
.recipe-notes h2 { font-family: var(--script); text-transform: none; color: var(--coral-ink); font-size: 1.9rem; margin-bottom: 6px; }
.recipe-tips { background: var(--lilac); }
.recipe-tips h2 { color: var(--navy); font-size: 1.3rem; margin-bottom: 8px; }
.recipe-tips ul { margin: 0; padding-left: 20px; }
@media (min-width: 900px) {
  .recipe-cols { grid-template-columns: 380px 1fr; gap: 64px; }
  .recipe-ingredients { position: sticky; top: calc(var(--header-h) + 20px); }
}

/* ==========================================================================
   TYPE & COLOUR SYSTEM v3  (final layer, overrides everything above)
   Fonts: League Spartan 800-900 (headlines), Archivo Black (statements),
          Anton (occasional oversized), Outfit 400-600 (body, nav, buttons).
   Palette: Ibiza Pink, Coral Red, Sunshine Yellow, Palm Green,
            Mediterranean Blue, Sky Blue, Sunset Orange, Warm Ivory, Deep Navy.
   Flat colour only: no gradients, minimal crisp shadows.
   ========================================================================== */

:root {
  --pink: #F038A5;
  --coral: #EF4444;
  --sun: #FFD447;
  --yellow: #FFD447;
  --green: #16865D;
  --cobalt: #243D99;
  --sky: #C5D9F4;
  --tangerine: #FF812C;
  --ivory: #FFF9F0;
  --navy: #17233C;

  /* Aliases kept so earlier rules pick up the new palette */
  --blue: #243D99;
  --blue-deep: #243D99;
  --olive: #16865D;
  --lilac: #C5D9F4;
  --aqua: #C5D9F4;
  --red: #EF4444;
  --coral-ink: #C42B2B;          /* darker coral for small text on ivory */
  --pink-soft: #FFC6E6;          /* tint of Ibiza Pink for text on green */
  --blush: #FFE4F2;              /* tint of Ibiza Pink for soft panels */
  --ivory-deep: #FBF1E2;         /* tint of Warm Ivory for quiet panels */
  --line: rgba(23, 35, 60, .14);

  --sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Outfit", system-ui, sans-serif;
  --display: "League Spartan", "Arial Black", sans-serif;
  --statement: "Archivo Black", "Arial Black", sans-serif;
  --condensed: "Anton", "Impact", sans-serif;
  --script: "Archivo Black", "Arial Black", sans-serif;
  --flat-shadow: 10px 10px 0 rgba(23, 35, 60, .14);
}

body { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.7; }

/* Headlines: heavy, uppercase, tight */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.025em;
  line-height: .92;
}
.cover-title .ct-a { font-family: var(--display); font-weight: 900; letter-spacing: -.035em; }
.cover-title .ct-b { font-family: var(--statement); font-weight: 400; letter-spacing: -.01em; margin-top: .18em; }

/* Oversized condensed moment: the hero name */
.cover-title--hero { --s: clamp(7.5rem, 36vw, 17rem); }
.cover-title--hero .ct-a { font-family: var(--condensed); font-weight: 400; letter-spacing: 0; line-height: .82; }
.cover-title--hero .ct-b { font-size: .19em; margin: .25em 0 0 .12em; }

/* No italics in this system (Outfit is upright) */
.hero__tagline, .cover-hero .hero__tagline, .mega__statement, .footer__tag, .charter__lede,
.recipe-head__short, .mgmt-card .email, .charter-extra legend, .about__copy em, .page-head h1 em {
  font-style: normal;
}
.cover-hero .hero__tagline { font-weight: 500; }
.mega__statement { font-family: var(--statement); text-transform: uppercase; font-size: 1.2rem; line-height: 1.25; letter-spacing: -.01em; }
.footer__tag { font-weight: 400; }
.charter__lede { font-family: var(--statement); text-transform: uppercase; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.2; }
.charter-extra legend { font-family: var(--statement); text-transform: uppercase; font-size: 1rem; }
.charter-extra legend .opt { font-family: var(--sans) !important; text-transform: none; }

/* Former script accents become small statement labels */
.script-heading { font-family: var(--statement); text-transform: uppercase; letter-spacing: -.01em; color: var(--coral); font-size: clamp(1.8rem, 4vw, 2.4rem); }
.wordmark { gap: 6px; align-items: baseline; }
.wordmark__lily { font-family: var(--display); font-weight: 900; letter-spacing: -.03em; font-size: 1.25em; }
.wordmark__rest {
  font-family: var(--sans); font-weight: 600; text-transform: uppercase;
  font-size: .42em; letter-spacing: .14em; transform: none; color: var(--navy);
}
.site-footer .wordmark__rest { color: var(--ivory); }
.mega__sign { font-family: var(--statement); text-transform: uppercase; font-size: 1rem; color: var(--coral); }
.about__aside { font-family: var(--statement); text-transform: uppercase; font-size: 1.05rem; color: var(--pink); }
.yacht-hero__kicker { font-family: var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .9375rem; color: var(--sky); }
.specs h3 { font-family: var(--display); text-transform: uppercase; color: var(--coral); font-size: 1.5rem; }
.crew-card h3 span { font-family: var(--statement); text-transform: uppercase; font-size: .5em; color: var(--coral); margin-left: 10px; }
.ing-group { font-family: var(--statement); text-transform: uppercase; font-size: .9375rem; letter-spacing: .02em; color: var(--cobalt); }
.recipe-notes h2 { font-family: var(--statement); text-transform: uppercase; font-size: 1.3rem; color: var(--coral-ink); }
.brands { font-family: var(--statement); }
.recipe-card__title, .book__title, .mega__links a, .recipe-facts dd { font-family: var(--display); font-weight: 900; letter-spacing: -.02em; }
.step-num { font-family: var(--display); font-weight: 900; }
.footer__col h2 { font-family: var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .8125rem; }
.mega__links a small, .channel__note, .book__foot { font-family: var(--sans); }

/* Buttons: Outfit, bold enough for contrast on colour */
.btn { font-family: var(--sans); font-weight: 600; font-size: 1.0625rem; letter-spacing: .01em; }
.btn--coral { background: var(--coral); color: var(--navy); font-weight: 700; font-size: 1.1875rem; padding: 16px 28px; }
.btn--coral:hover { background: var(--navy); color: var(--ivory); }
.chip, .menu-trigger { font-family: var(--sans); font-weight: 600; }

/* ---------- Flat colour: placeholders, no gradients ---------- */
.ph { background: var(--sky); color: var(--navy); }
.ph--blue { background: var(--cobalt); color: var(--ivory); }
.ph--sun { background: var(--sun); color: var(--navy); }
.ph--olive { background: var(--green); color: var(--ivory); }
picture.ph { background: var(--sky); }
.ph__label strong { background: var(--navy); color: var(--ivory); }
.ph--blue .ph__label strong, .ph--olive .ph__label strong { background: var(--ivory); color: var(--navy); }
.book::before { background: rgba(23, 35, 60, .16); width: 8px; }

/* ---------- Crisp, minimal shadows ---------- */
.book { box-shadow: var(--flat-shadow); }
.shelf__row li .book:hover, .shelf__row li .book:focus-visible { box-shadow: 14px 16px 0 rgba(23, 35, 60, .16); }
.cover-hero__book { box-shadow: 0 0 0 10px var(--ivory), 16px 16px 0 10px rgba(23, 35, 60, .18); }
.yacht-hero__media .ph { box-shadow: 0 0 0 10px var(--ivory), 16px 16px 0 10px rgba(0, 0, 0, .22); }
.intro__portrait .ph { box-shadow: none; }
.about__portrait .ph { box-shadow: 0 0 0 10px #fff, var(--flat-shadow); }
.recipe-card { box-shadow: var(--flat-shadow); }
.recipe-card:hover { box-shadow: 14px 16px 0 rgba(23, 35, 60, .16); }
.channel, .mega, .chat-panel, .chat-tab, .site-header.is-scrolled { box-shadow: none; }
.site-header.is-scrolled { border-bottom: 1px solid var(--line); }
@media (min-width: 960px) { .mega { border-bottom: 1px solid var(--line); } }
.chat-panel { border-left: 1px solid var(--line); }

/* ---------- Colour pairings by section ---------- */
/* Hero: pink / yellow */
.cover-hero { background: var(--pink); }
.cover-title--hero .ct-a { color: var(--sun); }
.cover-title--hero .ct-b { color: var(--navy); }
.cover-hero__motif { color: var(--coral); }
.cover-hero__motif2 { color: var(--sun); }
.cover-hero .hero__tagline { color: var(--ivory); }

/* Intro on ivory */
.cover-title--intro .ct-a { color: var(--navy); }
.cover-title--intro .ct-b { color: var(--coral); }
.intro__portrait::before { background: var(--sky); }

/* Follow along books: pink/yellow, green/pink, blue/ivory */
.shelf__head .cover-title .ct-a { color: var(--navy); }
.shelf__head .cover-title .ct-b { color: var(--pink); }
.book--pink { background: var(--pink); color: var(--navy); }
.book--pink .ct-a { color: var(--sun); }
.book--pink .book__motif { color: var(--coral); }
.book--green { background: var(--green); }
.book--green .ct-a { color: var(--pink-soft); }
.book--blue { background: var(--cobalt); }
.book--blue .ct-b { color: var(--sky); }

/* Work together: sunset orange / navy / ivory */
.together { background: var(--tangerine); }
.together .btn--coral { background: var(--navy); color: var(--ivory); }
.together .btn--coral:hover { background: var(--ivory); color: var(--navy); }
.together .deco-l { color: var(--pink); }
.together .deco-r { color: var(--sun); }

/* Page covers */
.cover-band--green { background: var(--green); }
.cover-band--green .ct-a { color: var(--pink-soft); }
.cover-band--green .ct-b { color: var(--ivory); }
.cover-band--lilac { background: var(--sky); }
.cover-band--lilac .ct-a { color: var(--navy); }
.cover-band--lilac .ct-b { color: var(--coral-ink); }
.cover-band--lilac .cover-band__motif { color: var(--coral); }
.cover-band--blue { background: var(--cobalt); }
.cover-band--blue .ct-a, .yacht-hero .cover-title .ct-a { color: var(--sun); }
.cover-band--blue .ct-b, .yacht-hero .cover-title .ct-b { color: var(--ivory); }
.cover-band--blue .cover-band__motif { color: var(--sky); }
.yacht-hero__lede { color: var(--sky); }
.cover-band--coral { background: var(--coral); }
.cover-band--coral .ct-a { color: var(--ivory); }
.cover-band--coral .ct-b { color: var(--navy); }
.cover-band--pink { background: var(--pink); }
.cover-band--sun { background: var(--sun); }
.cover-band--tangerine { background: var(--tangerine); }

/* Charters page sections */
.charter { background: var(--green); }
.charter h2 { color: var(--sun); }
.charter__note { border-left-color: var(--sun); }
.charter__deco { color: var(--pink-soft); }
.yacht .cover-title .ct-b { color: var(--green); }
.onboard .cover-title .ct-b { color: var(--pink); }
.crew .cover-title .ct-b { color: var(--coral); }
.mgmt-card { background: var(--cobalt); }
.mgmt-card h2 { color: var(--sun); }

/* About */
.about__copy p:first-child::first-letter { font-family: var(--display); font-weight: 900; color: var(--green); }

/* Partnerships brand list */
.brands li:nth-child(odd) { color: var(--coral-ink); }
.brands li:nth-child(even) { color: var(--cobalt); }

/* Mega menu hover colours */
.mega__links a:hover { color: var(--coral-ink); }
.mega__links li:nth-child(2) a:hover { color: var(--pink); }
.mega__links li:nth-child(3) a:hover { color: var(--green); }
.mega__links li:nth-child(4) a:hover { color: var(--cobalt); }
.mega__links a[aria-current="page"] { color: var(--coral); }
.social-stack a { background: var(--ivory-deep); }
.social-stack a:hover { background: var(--sky); }
.social-stack svg { color: var(--coral); }

/* Contact tab and panel */
.chat-tab { background: var(--sun); color: var(--navy); font-family: var(--sans); font-weight: 700; }
.chat-tab:hover { background: var(--navy); color: var(--ivory); }
.chat-panel__mgmt { background: var(--sky); }
.cover-title--panel .ct-a { color: var(--coral); }
.form-status--preview { background: #FFF3C4; border-color: var(--sun); }

/* Small UI accents */
.hidden-note { background: var(--sun); }
.icon-link:hover { background: var(--sky); color: var(--navy); }
.channel__icon, .recipe-notes { background: var(--blush); }
.recipe-tips { background: var(--sky); }
.recipe-cols h2 { color: var(--coral); }
.tbc { background: #FFF3C4; border-color: var(--sun); color: #6A4E00; }
.tbc-block { background: #FFF8DC; border-color: var(--sun); color: #5E4600; }
:focus-visible { outline-color: var(--cobalt); }
.field input:focus, .field select:focus, .field textarea:focus, .recipe-search input:focus { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(36, 61, 153, .18); }
.primary-nav a { background-image: linear-gradient(var(--coral), var(--coral)); } /* solid underline */

/* Keep illustrations minimal: one shape per block */
.cover-hero__motif2, .together .deco-r { display: none; }
.yacht-hero__media .ph { background: var(--sky); color: var(--navy); }
.yacht-hero__media .ph .ph__label strong { background: var(--navy); color: var(--ivory); }

/* ==========================================================================
   IBIZA BOTANICALS: hand-painted gouache fruit illustrations
   Separate transparent images in assets/illustrations/ (WebP + PNG, 240 and
   440 wide). Purely decorative: empty alt, no pointer events, always behind
   text, never stretched (width set, height auto).
   ========================================================================== */
.fruit { display: block; pointer-events: none; user-select: none; filter: none; }
.fruit img { display: block; width: 100%; height: auto; }

/* Homepage hero: cherries peek out from behind Lily's photo */
.cover-hero__motif { width: 120px; left: auto; right: -18px; top: 14px; bottom: auto; transform: rotate(10deg); z-index: 0; }
@media (min-width: 960px) {
  .cover-hero__motif { width: 230px; right: -70px; top: -34px; transform: rotate(12deg); }
}

/* Intro: lemons tucked on the portrait corner */
.intro__portrait .deco { width: 130px; right: -14px; bottom: -40px; transform: rotate(-8deg); }
@media (min-width: 860px) { .intro__portrait .deco { width: 170px; right: -70px; bottom: -50px; } }

/* Social books */
.book__motif { width: 66%; max-width: 210px; margin: auto; }

/* Work together band */
.together .deco-l { width: 110px; left: -24px; bottom: -20px; transform: rotate(-10deg); }
@media (min-width: 860px) { .together .deco-l { width: 190px; left: 6%; bottom: 46px; } }

/* Page cover bands */
.cover-band__motif { width: clamp(130px, 24vw, 300px); right: -4%; transform: translateY(-50%) rotate(8deg); }
@media (min-width: 900px) { .cover-band__motif { right: 5%; } }
@media (max-width: 899px) { .cover-band .cover-title { max-width: 78%; } }

/* Charters enquiry */
.charter__deco { width: 160px; transform: rotate(-8deg); margin-top: 30px; }

/* Recipes */
.recipe-card__motif { width: 40%; right: 10px; top: 10px; opacity: 1; }

/* Mega menu */
.mega__aside { position: relative; }
.mega__statement { padding-right: 96px; }
.mega__fruit { position: absolute; top: -18px; right: -8px; width: 110px; transform: rotate(10deg); }

/* Contact panel */
.chat-panel__head .deco { width: 84px; right: 64px; top: 4px; transform: rotate(10deg); }
.chat-panel__head p { padding-right: 0; }
.chat-panel__head .cover-title--panel { padding-right: 150px; }

/* Footer detail */
.footer__fruit { width: 84px; margin-top: 18px; transform: rotate(-8deg); }

/* Respect reduced motion (illustrations never animate) */
.fruit { transition: none; }

/* ==========================================================================
   FOOTER OPTIONS (review page footers.html). The chosen one replaces
   .site-footer on every page.
   ========================================================================== */
.fo-intro { padding-block: 56px 36px; }
.fo-intro .cover-title .ct-a { color: var(--navy); }
.fo-intro .cover-title .ct-b { color: var(--pink); }
.fo-intro p { max-width: 40em; }
.fo-intro a { color: var(--cobalt); font-weight: 600; margin-right: 6px; }

.fo-label { background: var(--navy); color: var(--ivory); padding-block: 16px; margin-top: 70px; }
.fo-label .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.fo-label__letter { font-family: var(--statement); text-transform: uppercase; background: var(--sun); color: var(--navy); padding: 4px 12px; border-radius: 999px; font-size: .9375rem; }
.fo-label strong { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.4rem; letter-spacing: -.02em; }
.fo-label span:last-child { color: rgba(255,249,240,.8); font-size: .9375rem; }

.fo { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 96px) 26px; }
.fo a { color: inherit; }
.fo-h { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8125rem; margin: 0 0 12px; line-height: 1.2; }
.fo-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fo-links a { text-decoration: none; font-weight: 500; }
.fo-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fo-links--inline { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.fo-social { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fo-social a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 500; }
.fo-social svg { width: 22px; height: 22px; flex: none; }
.fo-social a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.fo-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: .8125rem; margin-top: 44px; padding-top: 18px; border-top: 1px solid currentColor; opacity: .8; position: relative; z-index: 1; }
.fo-wordmark .wordmark__lily { font-size: 1.9rem; }
.fo-btn-navy { background: var(--navy); color: var(--ivory) !important; }
.fo-btn-navy:hover { background: var(--ivory); color: var(--navy) !important; }
.fo-btn-yellow { background: var(--sun); color: var(--navy) !important; font-weight: 700; }
.fo-btn-yellow:hover { background: var(--ivory); }
.fo-btn-outline { border-color: var(--ivory); color: var(--ivory) !important; }
.fo-btn-outline:hover { background: var(--ivory); color: var(--navy) !important; }

/* A: Giant wordmark (yellow) */
.fo-a { background: var(--sun); color: var(--navy); padding-bottom: 26px; }
.fo-a__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 44px; }
.fo-a__tag { font-family: var(--statement); text-transform: uppercase; font-size: clamp(1.3rem, 3vw, 2rem); line-height: 1.1; max-width: 22ch; margin: 0; }
.fo-a__grid { display: grid; gap: 30px; }
.fo-a__grid p { margin: 0 0 18px; font-weight: 500; }
.fo-a__name { margin-top: 40px; line-height: .78; text-align: center; position: relative; z-index: 1; }
.fo-a__name span { display: block; font-family: var(--condensed); font-size: clamp(9rem, 44vw, 34rem); color: var(--coral); letter-spacing: -.01em; }
.fo-a__name em { display: block; font-style: normal; font-family: var(--statement); font-size: clamp(1.4rem, 6.5vw, 5.4rem); color: var(--navy); margin-top: .3em; letter-spacing: -.01em; }
.fo-a__fruit { position: absolute; width: clamp(110px, 18vw, 230px); right: 4%; top: 46%; transform: rotate(12deg); z-index: 2; }
@media (min-width: 860px) { .fo-a__grid { grid-template-columns: repeat(3, 1fr); } }

/* B: Last page of the book (pink) */
.fo-b { background: var(--pink); color: var(--ivory); }
.fo-b__grid { display: grid; gap: 44px; position: relative; }
.fo-b__title { --s: clamp(4.5rem, 16vw, 11rem); margin-bottom: .2em; }
.fo-b__title .ct-a { color: var(--sun); }
.fo-b__title .ct-b { color: var(--navy); font-size: .5em; margin-left: .5em; }
.fo-b__cta p { font-size: 1.1875rem; max-width: 30em; }
.fo-b__cta .btn-row { margin-top: 18px; }
.fo-b__side { display: grid; gap: 28px; align-content: start; }
.fo-b .wordmark__lily { color: var(--sun); }
.fo-b .wordmark__rest { color: var(--ivory); }
.fo-b__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fo-b .fo-social svg { color: var(--sun); }
.fo-b__fruit { position: absolute; width: clamp(110px, 16vw, 210px); right: 2%; top: -40px; transform: rotate(10deg); }
@media (min-width: 960px) {
  .fo-b__grid { grid-template-columns: 7fr 4fr; gap: 80px; align-items: end; }
  .fo-b__fruit { right: 38%; top: -30px; }
}

/* C: Social postcards (navy) */
.fo-c { background: var(--navy); color: var(--ivory); }
.fo-c__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.fo-c__title { --s: clamp(3.4rem, 10vw, 7.4rem); margin-bottom: 30px; }
.fo-c__title .ct-a { color: var(--ivory); }
.fo-c__title .ct-b { color: var(--sun); }
.fo-c__fruit { width: clamp(100px, 14vw, 170px); flex: none; transform: rotate(10deg); margin-bottom: 20px; }
.fo-c__tiles { list-style: none; margin: 0 0 44px; padding: 0; display: grid; gap: 14px; }
.fo-tile {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center;
  padding: 24px; border-radius: 3px 14px 14px 3px; text-decoration: none;
  transition: transform .35s var(--ease);
}
.fo-tile:hover { transform: translateY(-6px) rotate(-1deg); }
.fo-tile svg { width: 40px; height: 40px; grid-row: 1 / 3; }
.fo-tile strong { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; }
.fo-tile span { font-weight: 600; }
.fo-tile--pink { background: var(--pink); color: var(--sun) !important; }
.fo-tile--pink span { color: var(--navy); }
.fo-tile--green { background: var(--green); color: var(--pink-soft) !important; }
.fo-tile--green span { color: var(--ivory); }
.fo-tile--yellow { background: var(--sun); color: var(--navy) !important; }
.fo-tile--yellow svg { color: var(--coral); }
.fo-c__row { display: grid; gap: 18px; align-items: center; }
.fo-c .wordmark__rest { color: var(--ivory); }
.fo-c__mail { margin: 0; }
.fo-c__mail a { color: var(--sun); font-weight: 600; }
@media (min-width: 860px) {
  .fo-c__tiles { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .fo-tile { grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: 10px; min-height: 220px; align-content: end; }
  .fo-tile svg { grid-row: auto; margin-bottom: auto; }
  .fo-c__row { grid-template-columns: auto 1fr auto; gap: 30px; }
}

/* D: Tagline billboard (coral) */
.fo-d { background: var(--coral); color: var(--navy); }
.fo-d__bill { margin: 0 0 56px; font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -.035em; line-height: .9; position: relative; z-index: 1; }
.fo-d__bill span { display: block; }
.fo-d__bill .l1 { font-size: clamp(3rem, 10.5vw, 9.4rem); color: var(--sun); }
.fo-d__bill .l2 { font-size: clamp(2.3rem, 8vw, 7.2rem); color: var(--ivory); }
.fo-d__bill .l3 { font-family: var(--statement); font-weight: 400; font-size: clamp(1.4rem, 4.6vw, 4rem); color: var(--navy); letter-spacing: -.015em; margin-top: .12em; }
.fo-d__bill .l4 { font-family: var(--condensed); font-weight: 400; font-size: clamp(3.4rem, 12vw, 10.5rem); color: var(--pink-soft); letter-spacing: 0; line-height: .95; }
.fo-d__fruit { position: absolute; width: clamp(120px, 20vw, 260px); right: 3%; top: 40px; transform: rotate(10deg); }
.fo-d__grid { display: grid; gap: 28px; position: relative; z-index: 1; }
.fo-d__grid p { margin: 0 0 10px; font-weight: 500; }
.fo-d .wordmark__lily { color: var(--sun); }
.fo-d .wordmark__rest { color: var(--navy); }
@media (min-width: 860px) { .fo-d__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
@media (max-width: 859px) { .fo-d__fruit { top: auto; bottom: 330px; } }

/* ==========================================================================
   CHOSEN FOOTER: billboard + social postcards (options C + D combined)
   ========================================================================== */
.site-footer.fo-e, .fo-e { padding: 0; background: var(--navy); color: var(--ivory); }
.fo-e__bill { position: relative; background: var(--coral); color: var(--navy); padding-block: clamp(56px, 8vw, 96px) clamp(120px, 13vw, 170px); overflow: hidden; }
.fo-e__bill .wrap { position: relative; }
.fo-e .fo-d__bill { margin: 0; max-width: 92%; }
.fo-e__fruit { position: absolute; width: clamp(110px, 18vw, 250px); right: 0; top: -20px; transform: rotate(10deg); }
.fo-e__lower { padding-bottom: 26px; }
.fo-e__tiles { margin-top: clamp(-130px, -9vw, -80px); position: relative; z-index: 2; margin-bottom: 48px; }
.fo-e__row { display: grid; gap: 24px; align-items: center; }
.fo-e .wordmark__lily { color: var(--sun); }
.fo-e .wordmark__rest { color: var(--ivory); }
.fo-e__contact { display: grid; gap: 10px; justify-items: start; }
.fo-e__contact p { margin: 0; font-size: .9375rem; }
.fo-e__contact p a { color: var(--sun); font-weight: 600; }
.fo-e .fo-base { border-top-color: rgba(255, 249, 240, .25); }
@media (min-width: 960px) {
  .fo-e__row { grid-template-columns: auto 1fr auto; gap: 40px; }
  .fo-e__contact { justify-items: end; text-align: right; }
}
@media (max-width: 859px) {
  .fo-e__fruit { top: auto; bottom: 70px; right: -10px; }
  .fo-e .fo-d__bill { max-width: 100%; }
}
.fo-e__fruit { width: clamp(110px, 15vw, 200px); top: -70px; right: 0; }
@media (max-width: 859px) {
  .fo-e__bill { padding-top: 130px; }
  .fo-e__fruit { width: 100px; top: -100px; bottom: auto; right: 0; }
}
.fo-e__fruit { width: clamp(110px, 12vw, 170px); top: -84px; }
@media (max-width: 859px) { .fo-e__bill { padding-top: 140px; } .fo-e__fruit { width: 92px; top: -124px; } }

/* ==========================================================================
   DROPDOWNS PER MENU ITEM (desktop) + POSTER HERO + ART BAND
   ========================================================================== */
.primary-nav li { display: flex; align-items: center; gap: 2px; }
.drop-toggle {
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--navy); cursor: pointer;
  display: inline-grid; place-items: center;
  transition: background-color .2s, transform .3s var(--ease);
}
.drop-toggle svg { width: 12px; height: 12px; }
.drop-toggle:hover { background: var(--blush); }
.drop-toggle[aria-expanded="true"] { transform: rotate(180deg); }
.has-drop.is-open > a { background-size: 100% 2px; }

.drop { display: none; }
@media (min-width: 960px) {
  .menu-trigger { display: none; }
  .drop {
    display: block;
    position: absolute; left: 0; right: 0; top: 100%;
    z-index: 2;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
  }
  .drop.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s; }
}
.drop--pink   { background: var(--pink);   color: var(--ivory); }
.drop--green  { background: var(--green);  color: var(--ivory); }
.drop--cobalt { background: var(--cobalt); color: var(--ivory); }
.drop--navy   { background: var(--navy);   color: var(--ivory); }
.drop--yellow { background: var(--yellow); color: var(--navy); }

.drop__inner {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(220px, .85fr) minmax(200px, 300px);
  gap: 48px; align-items: center;
  padding-block: 44px 50px;
}
.drop__kicker { font: 600 .8125rem/1 var(--sans); text-transform: uppercase; letter-spacing: .18em; margin: 0 0 14px; opacity: .85; }
.drop__title { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: .9; font-size: clamp(2.2rem, 3.4vw, 3.9rem); hyphens: none; overflow-wrap: normal; }
.drop__title--long { font-size: clamp(1.9rem, 2.7vw, 3.1rem); }
.drop__title a { color: inherit; text-decoration: none; }
.drop__title a:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }
.drop__text { margin: 18px 0 0; font-size: 1.125rem; line-height: 1.45; max-width: 34ch; }
.drop__links { list-style: none; margin: 0; padding: 0; }
.drop__links li { border-top: 1.5px solid color-mix(in srgb, currentColor 30%, transparent); }
.drop__links li:last-child { border-bottom: 1.5px solid color-mix(in srgb, currentColor 30%, transparent); }
.drop__links a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 0; color: inherit; text-decoration: none;
  font-family: var(--statement); text-transform: uppercase; font-size: 1.0625rem; letter-spacing: .01em;
  transition: padding-left .25s var(--ease);
}
.drop__links a::after { content: "\2192"; font-family: var(--sans); opacity: 0; transition: opacity .2s; }
.drop__links a:hover, .drop__links a:focus-visible { padding-left: 8px; }
.drop__links a:hover::after, .drop__links a:focus-visible::after { opacity: 1; }
.drop a:focus-visible, .drop-toggle:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.drop__media { justify-self: end; width: 100%; }
.drop__photo { background: var(--ivory); padding: 10px 10px 34px; transform: rotate(2.5deg); }
.drop__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.drop__fruit { display: block; width: 210px; margin-left: auto; }
.drop__fruit img { width: 100%; height: auto; }

/* Poster hero: the artwork carries the name, so it is shown whole */
.poster-hero { background: #F04A64; }
.poster-hero__art { display: flex; justify-content: center; }
.poster-hero__art img {
  display: block; width: 100%; height: auto;
}
@media (min-width: 960px) {
  .poster-hero__art img { max-width: min(100%, calc((100vh - var(--header-h) - 84px) * 1.5)); }
}
.poster-hero__strip { background: var(--navy); color: var(--ivory); }
.poster-hero__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-block: 22px; }
.poster-hero .hero__tagline { margin: 0; max-width: 40ch; color: var(--ivory); text-align: left; font-size: clamp(1rem, 1.6vw, 1.25rem); }
.poster-hero .hero__social { justify-content: flex-start; }
.poster-hero .hero__social a:hover { background: var(--yellow); }

/* Pattern band behind "Let's work together" */
.together--art {
  background: var(--coral) var(--together-art) center / cover no-repeat;
  padding-block: clamp(70px, 10vw, 130px);
}
.together__card {
  background: var(--ivory); color: var(--navy);
  max-width: 720px; margin-inline: auto;
  padding: clamp(32px, 5vw, 56px) clamp(22px, 5vw, 60px);
  border-radius: 3px;
}
.together__card p:last-of-type { margin-bottom: 26px; }
.together__card .cover-title .ct-b { color: var(--pink); }

/* Painted logo badge: a different one on each page, hanging just below the header */
.logo-badge { position: relative; flex: none; align-self: stretch; width: 60px; display: block; z-index: 3; }
.logo-badge img {
  position: absolute; left: 0; top: 6px;
  width: 60px; height: 60px; display: block;
  transition: width .3s var(--ease), height .3s var(--ease), top .3s var(--ease), transform .3s var(--ease);
}
.logo-badge:hover img { transform: rotate(-3deg); }
.logo-badge:focus-visible { outline: none; }
.logo-badge:focus-visible img { outline: 3px solid var(--navy); outline-offset: 3px; }
@media (min-width: 960px) {
  .logo-badge { width: 104px; }
  .logo-badge img { width: 104px; height: 104px; top: 10px; }
  .site-header.is-scrolled .logo-badge img { width: 68px; height: 68px; top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .logo-badge img { transition: none; } }

/* ==========================================================================
   ANIMATED PAINTED SCENE HERO
   Layers cut from the poster: the bay (base), the sailboat and the lemon
   branch move separately. The title is real text, so Google can read it.
   ========================================================================== */
.scene-hero {
  --sky: #ED405A;
  position: relative; overflow: hidden;
  background: var(--sky);
  display: flex; flex-direction: column;
}
@media (min-width: 960px) { .scene-hero { min-height: calc(100svh - var(--header-h)); } }

.scene-hero__copy { position: relative; z-index: 3; padding-top: clamp(30px, 5vw, 70px); will-change: transform; }
.scene-title { margin: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: .8; }
.scene-title__a {
  display: flex;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(6.2rem, 13vw, 12.5rem); letter-spacing: -.035em;
  color: #F3DCB2;
}
.scene-title__a .ch { display: inline-block; transition: transform .35s var(--ease), color .35s; }
.scene-title__a .ch:hover { transform: translateY(-.06em) rotate(-4deg); color: #FFE7BE; }
.scene-title__b {
  font-family: var(--statement); text-transform: uppercase; letter-spacing: -.01em;
  font-size: clamp(1.75rem, 4.4vw, 4.4rem); line-height: 1;
  color: #F9C744; margin-top: .12em;
}
.scene-hero__tag {
  margin: clamp(14px, 1.6vw, 22px) 0 0; max-width: 36em;
  font: 600 clamp(.75rem, 1vw, .95rem)/1.6 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  color: var(--ivory);
}

.scene { position: relative; margin-top: auto; z-index: 1; }
.scene__base {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 7%);
}
.scene__layer { position: absolute; will-change: transform; }
.scene__layer img { display: block; width: 100%; height: auto; }
.scene__boat { left: 17.490%; top: 2.888%; width: 13.685%; z-index: 2; }
.scene__boat img { transform-origin: 50% 92%; animation: lotg-bob 6.5s ease-in-out infinite; }
.scene__branch { left: 58.879%; top: -84.84%; width: 41.122%; z-index: 2; }
.scene__branch img {
  transform-origin: 80% 0;
  animation: lotg-sway 8s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 9%);
}
.scene__branch.is-rustling img { animation: lotg-rustle 1.3s ease-out; }

.scene__glints { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.scene__glints line {
  stroke: #FFF4DC; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke;
  opacity: 0; transform-box: fill-box;
  animation: lotg-glint 4.6s ease-in-out infinite; animation-delay: var(--d);
}
.scene__twinkle {
  position: absolute; left: var(--x); top: var(--y); z-index: 3;
  width: 1.5%; aspect-ratio: 1; pointer-events: none;
  background: #FFF8E7;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  transform: translate(-50%, -50%) scale(0);
  animation: lotg-twinkle 4s ease-in-out infinite; animation-delay: var(--d);
}

.scene-hero .poster-hero__strip { position: relative; z-index: 3; }
.scene-hero__follow { margin: 0; font: 600 .8125rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ivory); }
.scene-hero__follow span { color: #F9C744; margin-left: .4em; }
.scene-hero .hero__social { justify-content: flex-start; }

@keyframes lotg-bob {
  0%, 100% { transform: translateY(0) rotate(-.7deg); }
  50% { transform: translateY(-3px) rotate(.9deg); }
}
@keyframes lotg-sway {
  from { transform: rotate(-1.1deg); }
  to { transform: rotate(1.3deg); }
}
@keyframes lotg-rustle {
  0% { transform: rotate(0); }
  20% { transform: rotate(2.6deg); }
  45% { transform: rotate(-1.8deg); }
  70% { transform: rotate(1deg); }
  100% { transform: rotate(0); }
}
@keyframes lotg-glint {
  0%, 100% { opacity: 0; transform: translateX(-8px); }
  45% { opacity: .9; }
  70% { opacity: .5; transform: translateX(6px); }
}
@keyframes lotg-twinkle {
  0%, 70%, 100% { transform: translate(-50%, -50%) scale(0) rotate(0); }
  80% { transform: translate(-50%, -50%) scale(1) rotate(45deg); }
  90% { transform: translate(-50%, -50%) scale(.3) rotate(90deg); }
}

/* Arrival: letters rise one by one, the branch swings in, the boat sails in */
@media (prefers-reduced-motion: no-preference) {
  .scene-title__a .ch { animation: lotg-letter .9s var(--ease) backwards; animation-delay: calc(var(--i) * .08s + .15s); }
  .scene-title__b { animation: rise .9s var(--ease) .5s backwards; }
  .scene-hero__tag { animation: rise .9s var(--ease) .65s backwards; }
  .scene__base { animation: lotg-fade 1.1s var(--ease) backwards; }
  .scene__branch { animation: lotg-swing-in 1.6s var(--ease) .2s backwards; transform-origin: 80% 0; }
  .scene__boat { animation: lotg-sail-in 2.2s var(--ease) .3s backwards; }
}
@keyframes lotg-letter { from { opacity: 0; transform: translateY(.45em) rotate(6deg); } to { opacity: 1; transform: none; } }
@keyframes lotg-fade { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes lotg-swing-in { from { opacity: 0; transform: translateY(-40px) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes lotg-sail-in { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .scene__boat img, .scene__branch img, .scene__glints line, .scene__twinkle { animation: none; }
  .scene__glints line { opacity: .55; }
}

@media (max-width: 959px) {
  .scene-hero__copy { padding-bottom: 8px; }
  .scene-title__a { font-size: clamp(5.4rem, 27vw, 9rem); }
  .scene-title__b { font-size: clamp(1.6rem, 8.4vw, 3rem); }
  .scene-hero__tag { max-width: 24em; padding-right: 32%; }
  .scene__branch { left: 66%; width: 34%; top: -60%; }
}

/* ==========================================================================
   ANIMATED PAGE HEADERS (About, Partnerships, Charters, Recipes, recipe pages)
   ========================================================================== */
.page-scene {
  --ps-bg: #E8305A; --ps-a: #FFF1D8; --ps-b: var(--yellow); --ps-text: var(--ivory);
  position: relative; overflow: hidden;
  background: var(--ps-bg); color: var(--ps-text);
}
.page-scene--red    { --ps-bg: #E8305A; }
.page-scene--green  { --ps-bg: #16865D; }
.page-scene--cobalt { --ps-bg: #243D99; }
.page-scene--pink   { --ps-bg: #F038A5; }
.page-scene--orange { --ps-bg: #FF812C; --ps-b: var(--navy); }
.page-scene--yellow { --ps-bg: #FFD447; --ps-a: var(--navy); --ps-b: #E8305A; --ps-text: var(--navy); }
.page-scene--sky    { --ps-bg: #C5D9F4; --ps-a: var(--navy); --ps-b: #243D99; --ps-text: var(--navy); }

.page-scene__inner {
  display: grid; gap: 18px; align-items: center;
  padding-top: clamp(34px, 6vw, 80px);
}
@media (min-width: 900px) {
  .page-scene__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; min-height: min(600px, calc(100svh - var(--header-h) - 40px)); padding-top: 50px; }
}
.page-scene__copy { position: relative; z-index: 3; padding-bottom: clamp(10px, 3vw, 60px); will-change: transform; }
.page-scene__back {
  display: inline-block; margin-bottom: 18px; color: inherit;
  font: 600 .875rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-underline-offset: 5px;
}
.page-scene__back::before { content: "\2190  "; }
.page-scene__kicker { margin: 0 0 14px; font: 600 .8125rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; opacity: .9; }
.page-scene__title { margin: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: .86; }
.page-scene__a {
  display: block;
  font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em;
  font-size: clamp(3rem, 7.2vw, 6.6rem); color: var(--ps-a);
}
.page-scene__a .w { display: inline-block; white-space: nowrap; }
@media (max-width: 899px) { .page-scene__a { font-size: clamp(2.8rem, 13.5vw, 5rem); } }
.page-scene__a--long { display: block; font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: .9; }
.page-scene__a .ch { display: inline-block; transition: transform .35s var(--ease); }
.page-scene__a .ch:hover { transform: translateY(-.06em) rotate(-4deg); }
.page-scene__b {
  font-family: var(--statement); text-transform: uppercase; letter-spacing: -.01em; line-height: 1;
  font-size: clamp(1.8rem, 4.2vw, 3.8rem); color: var(--ps-b); margin-top: .14em;
}
.page-scene__lede { margin: 20px 0 0; max-width: 30em; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.45; font-weight: 500; }
.page-scene__text { max-width: 32em; margin: 12px 0 0; opacity: .92; }
.page-scene__btns { margin-top: 26px; }
.page-scene .recipe-head__cats { margin-top: 18px; }
.btn--yellow { background: var(--yellow); color: var(--navy); }
.btn--yellow:hover { background: var(--ivory); }
.page-scene--yellow .btn--ivory-outline, .page-scene--sky .btn--ivory-outline { border-color: var(--navy); color: var(--navy); }

/* The art box: painted cutouts float, drift with the mouse and bounce when poked */
.page-scene__art { position: relative; width: 100%; aspect-ratio: 6 / 5; max-width: 640px; justify-self: end; align-self: end; z-index: 1; }
@media (max-width: 899px) { .page-scene__art { aspect-ratio: 5 / 4; max-width: 520px; margin-inline: auto; } }
.ps-layer { position: absolute; will-change: transform; }
.ps-layer__in { transform: rotate(var(--r)); }
.ps-layer__in img, .ps-layer__in picture { display: block; width: 100%; height: auto; }
.ps-layer[data-poke] { cursor: pointer; }
.ps-postcard { background: var(--ivory); padding: 10px 10px 30px; }
.ps-postcard img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

@media (prefers-reduced-motion: no-preference) {
  .ps-anim--float .ps-layer__in { animation: ps-float 6s ease-in-out infinite; animation-delay: calc(var(--delay) * -1); }
  .ps-anim--breathe .ps-layer__in { animation: ps-breathe 7s ease-in-out infinite; animation-delay: calc(var(--delay) * -1); transform-origin: 50% 100%; }
  .ps-anim--sail .ps-layer__in { animation: ps-sail 9s ease-in-out infinite; transform-origin: 50% 80%; }
  .ps-layer.is-poked .ps-layer__in { animation: ps-poke .9s cubic-bezier(.3, 1.6, .5, 1); }
  .page-scene__a .ch { animation: lotg-letter .9s var(--ease) backwards; animation-delay: calc(var(--i) * .05s + .1s); }
  .page-scene__a--long, .page-scene__b { animation: rise .9s var(--ease) .35s backwards; }
  .page-scene__lede, .page-scene__text, .page-scene__btns, .page-scene .recipe-head__cats { animation: rise .9s var(--ease) .5s backwards; }
  .ps-layer { animation: ps-pop 1s cubic-bezier(.3, 1.4, .5, 1) backwards; animation-delay: calc(.25s + var(--delay) * .25s); }
}
@keyframes ps-float {
  0%, 100% { transform: rotate(var(--r)) translateY(0); }
  50% { transform: rotate(calc(var(--r) + 4deg)) translateY(-14px); }
}
@keyframes ps-breathe {
  0%, 100% { transform: rotate(var(--r)) scale(1); }
  50% { transform: rotate(calc(var(--r) + 1deg)) scale(1.025); }
}
@keyframes ps-sail {
  0%, 100% { transform: translate(-3%, 0) rotate(-1.5deg); }
  25% { transform: translate(0, -6px) rotate(1deg); }
  50% { transform: translate(3%, 0) rotate(-1deg); }
  75% { transform: translate(0, -5px) rotate(1.5deg); }
}
@keyframes ps-poke {
  0% { transform: rotate(var(--r)) scale(1); }
  30% { transform: rotate(calc(var(--r) - 14deg)) scale(1.14) translateY(-18px); }
  60% { transform: rotate(calc(var(--r) + 8deg)) scale(.96); }
  100% { transform: rotate(var(--r)) scale(1); }
}
@keyframes ps-pop { from { opacity: 0; transform: translateY(40px) scale(.85); } to { opacity: 1; transform: none; } }

/* Sparkles and bubbles */
.ps-sparkle {
  position: absolute; left: var(--x); top: var(--y); width: 20px; aspect-ratio: 1; z-index: 6; pointer-events: none;
  background: #FFF8E7; transform: translate(-50%, -50%) scale(0);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: lotg-twinkle 4.4s ease-in-out infinite; animation-delay: var(--d);
}
.page-scene--yellow .ps-sparkle { background: #E8305A; }
.ps-bubble {
  position: absolute; left: var(--bx); bottom: 30%; width: var(--bs); aspect-ratio: 1; z-index: 2; pointer-events: none;
  border-radius: 50%; border: 2px solid rgba(255, 248, 231, .75); background: rgba(255, 248, 231, .12);
  opacity: 0; animation: ps-bubble var(--bt) ease-in infinite; animation-delay: var(--bd);
}
@keyframes ps-bubble {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translate(14px, -320%); }
}
@media (prefers-reduced-motion: reduce) { .ps-sparkle, .ps-bubble { display: none; } }

/* Sea along the bottom of the Charters header */
.page-scene--sea .page-scene__inner { padding-bottom: 46px; }
.page-scene__sun { position: absolute; left: 66%; top: 2%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); z-index: 0; }
.page-scene__sea { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 2; pointer-events: none; overflow: hidden; }
.page-scene__sea .wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; }
.page-scene__sea .wave--1 { fill: #3C58B8; height: 90px; animation: ps-wave 26s linear infinite; }
.page-scene__sea .wave--2 { fill: #1B2F7A; height: 66px; animation: ps-wave 18s linear infinite reverse; }
.page-scene__sea .wave--3 { fill: #2C47A8; height: 34px; animation: ps-wave 14s linear infinite; opacity: .9; }
@keyframes ps-wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .page-scene__sea .wave { animation: none; } }

/* Brand ticker under the Partnerships header */
.marquee { overflow: hidden; background: var(--navy); color: var(--ivory); padding: 16px 0; }
.marquee__track { display: flex; width: max-content; animation: ps-marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { font-family: var(--statement); text-transform: uppercase; font-size: clamp(1.1rem, 2vw, 1.6rem); white-space: nowrap; padding-inline: 26px; display: inline-flex; align-items: center; gap: 52px; }
.marquee__item::after { content: ""; width: 12px; height: 12px; background: var(--yellow); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); transform: scale(1.6); }
@keyframes ps-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

/* Body polish: postcards and stamps */
.about__photo, .crew-card__photo { background: var(--ivory); }
.about__portrait .about__photo { padding: 12px 12px 40px; background: #fff; transform: rotate(-2deg); }
.mgmt-card { position: relative; }
.mgmt-card::after {
  content: ""; position: absolute; top: -26px; right: -14px; width: 92px; aspect-ratio: 1;
  background: url("../logos/logo-spritz-180.webp") center / cover; transform: rotate(8deg);
  border: 5px solid var(--ivory); outline: 2px dashed rgba(23, 35, 60, .25); outline-offset: -9px;
}

/* Charters: cinematic yacht photo, yacht name, gallery captions on the photos */
.yacht__photo { margin: 0 auto clamp(40px, 6vw, 80px); }
.yacht__photo img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 45%; border: 10px solid #fff; transform: rotate(-.6deg); }
.yacht__name { font-family: var(--statement); text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--pink); letter-spacing: .04em; margin: 10px 0 22px; }
.yacht__name::before { content: "Aboard "; color: var(--navy); font-family: var(--sans); font-weight: 600; font-size: .5em; letter-spacing: .2em; vertical-align: middle; }
.onboard__grid figure { position: relative; min-height: 0; }
.onboard__grid figure .ph { height: 100%; }
.onboard__grid .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.onboard__grid figcaption {
  position: absolute; left: 12px; bottom: 12px; right: 12px; margin: 0; width: fit-content; max-width: calc(100% - 24px);
  background: var(--ivory); color: var(--navy); padding: 6px 12px; border-radius: 999px;
  font-size: .8125rem; font-weight: 600; line-height: 1.3;
}
@media (max-width: 899px) { .onboard__grid figure .ph { aspect-ratio: 1; height: auto; } .onboard__grid .g-a .ph { aspect-ratio: 16 / 10; } }
@media (min-width: 900px) { .onboard__grid--4 .g-d { grid-column: 3 / 5; } }

/* Main menu: bold, color-coded pills that match each dropdown */
@media (min-width: 960px) {
  .primary-nav ul { gap: clamp(2px, .5vw, 8px); }
  .primary-nav .nav-item {
    display: flex; align-items: center; gap: 0;
    border-radius: 999px; padding: 0 6px 0 0;
    transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  }
  .primary-nav .nav-item:not(.has-drop) { padding-right: 0; }
  .primary-nav .nav-item > a {
    font-family: var(--statement); font-weight: 400; text-transform: uppercase;
    font-size: clamp(.8rem, .95vw, .95rem); letter-spacing: .03em;
    color: var(--navy); padding: 11px 6px 10px 16px;
    background-image: none;
  }
  .primary-nav .nav-item:not(.has-drop) > a { padding-right: 16px; }
  .primary-nav .nav-item .drop-toggle { color: inherit; }
  .primary-nav .nav-item .drop-toggle:hover { background: transparent; }
  .primary-nav .nav-item > a[aria-current="page"] {
    color: var(--cl);
    text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 4px; text-underline-offset: 7px;
  }
  .primary-nav .nav-item:hover, .primary-nav .nav-item.is-open, .primary-nav .nav-item:focus-within {
    background: var(--c); color: var(--ct); transform: translateY(-1px);
  }
  .primary-nav .nav-item:hover > a, .primary-nav .nav-item.is-open > a, .primary-nav .nav-item:focus-within > a { color: var(--ct); text-decoration-color: currentColor; }
}
.drop--red { background: #E8305A; color: var(--ivory); }

/* ==========================================================================
   CONTACT PANEL AS A VINTAGE AIRMAIL POSTCARD
   ========================================================================== */
.chat-panel.postcard {
  --paper: #F7ECD6; --ink: #22305A; --air-red: #D9344F; --air-blue: #243D99;
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(180, 140, 80, .14), transparent 70%),
    repeating-radial-gradient(circle at 30% 40%, rgba(120, 90, 40, .025) 0 1px, transparent 1px 3px);
  color: var(--ink);
  border: 12px solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--air-red) 0 12px, var(--paper) 12px 18px, var(--air-blue) 18px 30px, var(--paper) 30px 36px) 12;
  border-radius: 0;
  box-shadow: 0 30px 70px -20px rgba(23, 35, 60, .55);
}
@media (min-width: 960px) {
  .chat-panel.postcard { width: 480px; top: 16px; bottom: 16px; right: 16px; transform: translateX(115%) rotate(5deg); transform-origin: 100% 50%; }
  .chat-panel.postcard.is-open { transform: rotate(-.8deg); transition: transform .65s cubic-bezier(.2, 1.25, .4, 1), visibility 0s; }
}
@media (max-width: 959px) { .chat-panel.postcard { border-bottom: 0; } }

.postcard__head { position: relative; padding-right: 150px !important; }
.postcard__airmail {
  display: inline-block; margin: 0 0 18px !important; padding: 5px 10px;
  border: 1.5px solid var(--air-blue); color: var(--air-blue);
  font: 700 .6875rem/1 var(--sans) !important; letter-spacing: .22em; text-transform: uppercase;
  transform: rotate(-2deg);
}
.postcard__airmail span { color: var(--air-red); margin: 0 4px; }

/* Perforated stamp: holes only around the edge */
.postcard__stamp {
  position: absolute; top: 18px; right: 62px; width: 92px; padding: 7px;
  background: #fff; transform: rotate(5deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle 3.4px, transparent 97%, #000) -4px -4px / 8px 8px;
          mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle 3.4px, transparent 97%, #000) -4px -4px / 8px 8px;
  filter: drop-shadow(0 2px 2px rgba(23, 35, 60, .18));
}
.postcard__stamp img { display: block; width: 100%; height: auto; }
.postcard__stamp span { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 700 .5rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
@media (min-width: 960px) { .postcard__stamp { right: 70px; top: 26px; } }

.postcard__postmark {
  position: absolute; top: 92px; right: 18px; width: 150px; height: auto;
  color: rgba(34, 48, 90, .62); transform: rotate(-9deg); pointer-events: none; mix-blend-mode: multiply;
}
.postcard__postmark text { font-family: var(--sans); }

.postcard__title {
  margin: 0 0 10px; font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.4rem, 5vw, 3rem); line-height: .9; letter-spacing: -.02em; color: var(--air-red);
}
.postcard__greet {
  display: block; margin-bottom: 8px;
  font-family: var(--statement); font-size: .9rem; letter-spacing: .12em; line-height: 1.2; color: var(--air-blue);
}
.postcard__head > p:not(.postcard__airmail) { font-size: 1rem; line-height: 1.5; }
.chat-close { background: var(--paper); }

.postcard__note {
  background: transparent !important; border: 1.5px dashed rgba(34, 48, 90, .45); border-radius: 0 !important;
  transform: rotate(-.6deg);
}
.postcard__note a { color: var(--air-red) !important; }
.postcard__rule { border: 0; border-top: 2px dashed rgba(34, 48, 90, .35); margin: 18px 24px 0; }
@media (min-width: 960px) { .postcard__rule { margin-inline: 32px; } }

/* Fields written on the card: no boxes, just lines */
.postcard .field label, .postcard .charter-extra legend { font: 700 .6875rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--air-blue); }
.postcard .field input, .postcard .field select, .postcard .field textarea {
  background: transparent; border: 0; border-bottom: 1.5px solid rgba(34, 48, 90, .55); border-radius: 0;
  padding: 8px 2px; font-size: 1.0625rem; color: var(--ink); box-shadow: none;
}
.postcard .field textarea {
  border: 0; padding: 0 2px; line-height: 30px; min-height: 150px;
  background-image: repeating-linear-gradient(transparent 0 29px, rgba(34, 48, 90, .45) 29px 30px);
  background-attachment: local;
}
.postcard .field input:focus, .postcard .field select:focus, .postcard .field textarea:focus {
  outline: none; box-shadow: none; border-bottom-color: var(--air-red);
  background-color: rgba(255, 255, 255, .45);
}
.postcard .charter-extra { background: rgba(255, 255, 255, .35); border: 1.5px dashed rgba(34, 48, 90, .3); border-radius: 0; }
.postcard .form-submit { background: var(--air-red); color: #fff; border-radius: 0; letter-spacing: .14em; text-transform: uppercase; font-size: 1rem; }
.postcard .form-submit:hover { background: var(--air-blue); }
.postcard .form-fineprint { color: rgba(34, 48, 90, .7); }

/* The tab gets an airmail edge too */
@media (min-width: 960px) {
  .chat-tab { border-left: 6px solid transparent; border-image: repeating-linear-gradient(-45deg, #D9344F 0 8px, #FFD447 8px 12px, #243D99 12px 20px, #FFD447 20px 24px) 6; border-radius: 0; }
}

@media (min-width: 960px) { .postcard__postmark { top: 104px; right: 24px; } }
.postcard__head { padding-top: 26px !important; }

/* ==========================================================================
   FOLLOW ALONG: bold color tiles with painted art bursting out the top
   ========================================================================== */
.follow-tiles { background: var(--ivory); padding: clamp(70px, 9vw, 120px) 0 0; overflow: hidden; }
.follow-tiles .cover-title .ct-a { color: var(--navy); }
.follow-tiles .cover-title .ct-b { color: var(--green); }
.follow-tiles__text { margin: 16px 0 0; font-size: 1.15rem; line-height: 1.5; max-width: 30em; }
.follow-tiles__grid { list-style: none; margin: clamp(100px, 10vw, 130px) 0 0; padding: 0; display: grid; gap: 110px 18px; }
@media (min-width: 760px) { .follow-tiles__grid { grid-template-columns: repeat(3, 1fr); } }
.ftile {
  --c: var(--pink); --t: var(--ivory);
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(320px, 30vw, 400px); padding: clamp(20px, 2.4vw, 28px);
  background: var(--c); color: var(--t); text-decoration: none; border-radius: 4px;
  transition: transform .45s var(--ease);
}
.ftile--pink { --c: var(--pink); }
.ftile--green { --c: var(--green); }
.ftile--yellow { --c: var(--yellow); --t: var(--navy); }
.ftile:hover, .ftile:focus-visible { transform: translateY(-10px) rotate(-1deg); }
.ftile:focus-visible { outline: 4px solid var(--navy); outline-offset: 4px; }
.ftile__art {
  position: absolute; left: 50%; top: -90px; width: var(--w); pointer-events: none;
  transform: translateX(-50%) rotate(var(--r));
  filter: drop-shadow(0 14px 18px rgba(23, 35, 60, .25));
  transition: transform .6s cubic-bezier(.3, 1.5, .5, 1);
}
.ftile--yellow .ftile__art { top: -60px; }
.ftile__art img { display: block; width: 100%; height: auto; }
.ftile:hover .ftile__art, .ftile:focus-visible .ftile__art { transform: translateX(-50%) translateY(-18px) rotate(calc(var(--r) * -1)) scale(1.06); }
.ftile__name { font: 900 clamp(2.6rem, 4.6vw, 4.2rem)/.86 var(--display); text-transform: uppercase; letter-spacing: -.03em; }
.ftile__handle { font: 400 1.1rem/1 var(--statement); margin: 12px 0 20px; opacity: .92; }
.ftile__go {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 2px solid currentColor; padding-top: 14px;
  font: 700 1rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.ftile__go > span:first-child { display: inline-flex; align-items: center; gap: 9px; }
.ftile__go svg { width: 18px; height: 18px; }
.ftile__go > span:last-child { transition: transform .3s var(--ease); }
.ftile:hover .ftile__go > span:last-child { transform: translateX(6px); }
.follow-tiles__ticker { margin-top: clamp(50px, 6vw, 70px); background: var(--navy); color: var(--yellow); overflow: hidden; padding: 18px 0; }
.follow-tiles__track { display: flex; width: max-content; animation: ps-marquee 36s linear infinite; font: 400 clamp(1.4rem, 3vw, 2.2rem)/1 var(--statement); text-transform: uppercase; white-space: nowrap; }
.follow-tiles__ticker:hover .follow-tiles__track { animation-play-state: paused; }
.follow-tiles__track span { padding: 0 26px; }
.follow-tiles__track i { color: var(--pink); font-style: normal; margin-left: 26px; }
@media (prefers-reduced-motion: reduce) { .follow-tiles__track { animation: none; } .ftile, .ftile__art { transition: none; } }
@media (max-width: 759px) { .ftile { min-height: 280px; } .ftile__art { width: min(var(--w), 210px); top: -76px; } .ftile--yellow .ftile__art { width: min(var(--w), 260px); top: -54px; } .follow-tiles__grid { gap: 96px; } }

/* Follower count: a rolling scoreboard in the navy strip under the hero */
.fcount { margin: 0; display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); color: var(--ivory); }
.fcount__num { display: inline-flex; align-items: flex-end; font: 400 clamp(2.6rem, 5vw, 4.2rem)/1 var(--statement); color: var(--yellow); letter-spacing: -.01em; }
.odo { display: inline-block; height: 1em; overflow: hidden; position: relative; }
.odo__reel { display: flex; flex-direction: column; transform: translateY(0); }
.odo__reel span { height: 1em; line-height: 1; text-align: center; }
.fcount.is-in .odo__reel { transform: translateY(calc((var(--d) + 10) * -1em)); transition: transform 1.8s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i) * .12s); }
.odo__ch { display: inline-block; }
.odo__plus { color: var(--pink); font-size: .7em; align-self: flex-start; margin-left: 2px; transform: scale(0) rotate(-90deg); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) 1.6s; }
.fcount.is-in .odo__plus { transform: none; }
.fcount__label { display: grid; gap: 6px; font: 600 .8125rem/1.25 var(--sans); letter-spacing: .2em; text-transform: uppercase; max-width: 15em; }
.fcount__label span { color: var(--yellow); letter-spacing: .16em; }
.hero__social a .hero__count {
  margin-left: 2px; padding: 4px 9px; border-radius: 999px; background: var(--navy); color: var(--yellow);
  font: 400 .8125rem/1 var(--statement); letter-spacing: .02em;
}
.hero__social a:hover .hero__count { background: var(--pink); color: #fff; }
@media (prefers-reduced-motion: reduce) { .odo__reel { transform: translateY(calc((var(--d) + 10) * -1em)) !important; transition: none !important; } .odo__plus { transform: none; } }
@media (max-width: 599px) { .fcount__num { font-size: 2.6rem; } .fcount__label { font-size: .72rem; } }

/* ==========================================================================
   ABOUT: Lily & Nik collage, snapshots taped to a pink board
   ========================================================================== */
.couple { background: #FFE4F2; padding: clamp(70px, 9vw, 120px) 0; overflow: hidden; position: relative; }
.couple::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(240, 56, 165, .18) 1.5px, transparent 1.6px); background-size: 22px 22px; pointer-events: none; }
.couple__inner { position: relative; display: grid; gap: 40px; }
@media (min-width: 1000px) { .couple__inner { grid-template-columns: minmax(240px, .55fr) 1.45fr; align-items: center; } }
.couple .cover-title .ct-a { color: var(--navy); }
.couple .cover-title .ct-b { color: var(--pink); }
.couple__text { font-size: 1.15rem; line-height: 1.55; max-width: 24em; margin: 18px 0 0; }

.couple__board { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.snap {
  margin: 0; background: #fff; padding: 10px 10px 46px; position: relative;
  transform: rotate(var(--r, 0deg)); box-shadow: 0 22px 34px -22px rgba(23, 35, 60, .6);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.snap img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.snap figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; font-family: var(--statement); text-transform: uppercase; font-size: .95rem; color: var(--navy); }
.snap::before { content: ""; position: absolute; top: -13px; left: 50%; width: 92px; height: 26px; transform: translateX(-50%) rotate(-4deg); background: rgba(255, 212, 71, .8); }
.snap:nth-child(even)::before { background: rgba(197, 217, 244, .9); transform: translateX(-50%) rotate(5deg); }
.snap:hover { transform: rotate(0) scale(1.05); z-index: 10; box-shadow: 0 30px 50px -24px rgba(23, 35, 60, .7); }
.snap--1 { --r: -3deg; grid-column: 1 / -1; }
.snap--1 img { aspect-ratio: 3 / 2; }
.snap--2 { --r: 3deg; } .snap--3 { --r: -2deg; } .snap--4 { --r: 4deg; } .snap--5 { --r: -4deg; grid-column: 1 / -1; }
.snap--5 img { aspect-ratio: 3 / 2; }

@media (min-width: 760px) {
  .couple__board { display: block; height: 640px; }
  .snap { position: absolute; }
  .snap--1 { left: 0; top: 40px; width: 38%; --r: -5deg; z-index: 2; }
  .snap--1 img { aspect-ratio: 4 / 5; }
  .snap--2 { left: 31%; top: 0; width: 34%; --r: 3deg; z-index: 3; }
  .snap--3 { left: 63%; top: 30px; width: 34%; --r: -3deg; z-index: 2; }
  .snap--4 { left: 13%; top: 330px; width: 31%; --r: 4deg; z-index: 4; }
  .snap--4 img, .snap--5 img { aspect-ratio: 1; }
  .snap--5 { left: 50%; top: 320px; width: 34%; --r: -4deg; z-index: 5; grid-column: auto; }
  .snap--5 img { aspect-ratio: 1; }
  .couple__board--1 { height: auto; } .couple__board--1 .snap--1 { position: relative; top: 0; width: 70%; margin-inline: auto; }
  .couple__board--2 { height: 520px; } .couple__board--3 { height: 560px; }
}
@media (min-width: 1000px) { .couple__board { height: 700px; } .snap--4 { top: 360px; } .snap--5 { top: 350px; } }

.couple__sticker { position: absolute; z-index: 6; pointer-events: none; height: auto; filter: drop-shadow(0 10px 14px rgba(23, 35, 60, .25)); }
.couple__sticker--spritz { width: 110px; right: -8px; bottom: 30px; transform: rotate(10deg); animation: couple-float 6s ease-in-out infinite; }
.couple__sticker--lemon { width: 120px; left: -14px; bottom: -10px; transform: rotate(-14deg); animation: couple-float 7s ease-in-out infinite reverse; }
@media (max-width: 759px) { .couple__sticker--spritz { width: 80px; right: -14px; bottom: auto; top: -30px; } .couple__sticker--lemon { width: 84px; } }
@keyframes couple-float { 50% { translate: 0 -10px; } }
.couple__stamp {
  position: absolute; z-index: 7; right: 8%; top: 300px; width: 128px; aspect-ratio: 1; border-radius: 50%;
  background: var(--pink); color: #fff; display: grid; place-content: center; text-align: center; gap: 2px;
  transform: rotate(-12deg); outline: 3px dashed rgba(255, 255, 255, .8); outline-offset: -9px;
  font: 600 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 16px 26px -14px rgba(23, 35, 60, .55);
}
.couple__stamp b { font: 400 1.7rem/1 var(--statement); letter-spacing: 0; color: var(--yellow); }
@media (min-width: 1000px) { .couple__stamp { top: 330px; right: 2%; } }
@media (max-width: 759px) { .couple__stamp { position: relative; top: auto; right: auto; margin: 10px auto 0; grid-column: 1 / -1; width: 112px; } }
@media (prefers-reduced-motion: reduce) { .couple__sticker { animation: none; } .snap { transition: none; } }
@media (max-width: 759px) {
  .snap--5 { grid-column: auto; } .snap--5 img { aspect-ratio: 4 / 5; }
  .snap { padding: 8px 8px 36px; } .snap figcaption { font-size: .74rem; bottom: 10px; left: 10px; right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .couple__board--5 .snap--4 { --r: 3deg; } 
}
@media (min-width: 760px) {
  .couple__board { height: 760px; }
  .snap--1 img { aspect-ratio: 1; }
  .snap--4 { top: 450px; left: 4%; }
  .snap--5 { top: 420px; left: 44%; }
  .couple__stamp { top: 380px; right: 0; }
}
@media (min-width: 1000px) { .couple__board { height: 780px; } .snap--4 { top: 470px; } .snap--5 { top: 440px; } .couple__stamp { top: 400px; } }
@media (min-width: 760px) { .couple__sticker--lemon { left: -70px; bottom: auto; top: 330px; width: 110px; } }
@media (min-width: 760px) { .couple__sticker--lemon { left: -40px; top: 520px; width: 100px; } }