/* ==========================================================================
   yachtsup design system. token rationale documented in BRAND.md
   ========================================================================== */

:root {
  /* logo colours, sourced from images/YUstacked.svg */
  --violet: #cd4c96;
  --blue: #54ace1;

  /* darkened variants for text, links and buttons. hold 4.5:1 contrast on white */
  --ink-violet: #c3488f;
  --ink-blue: #3c7ca2;

  --ink: #1a1b1f;
  /* secondary text. 7.1:1 on white, so it stays AA at small sizes */
  --ink-soft: #55575e;
  --paper: #fff;
  --paper-dim: #f7f9fb;
  --line: #e6e6e6;

  --font-sans: 'Montserrat', sans-serif;
  --font-serif: 'Baskervville', serif;

  --step-h1: clamp(2.25rem, 6vw, 4rem);
  --step-h2: clamp(1.75rem, 4vw, 2.75rem);
  --step-h3: clamp(1.25rem, 2.5vw, 1.6rem);
  --step-lede: clamp(1.05rem, 1.6vw, 1.3rem);

  --space-s: 0.5rem;
  --space-m: 1rem;
  --space-l: 2rem;
  --space-xl: 4rem;

  --radius: 1.2rem;
  --container: 1180px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  text-transform: lowercase;
  background: var(--paper);
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--space-m);
  color: var(--ink);
}

h1 { font-size: var(--step-h1); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); }

p {
  margin: 0 0 var(--space-m);
}

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

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.accent-violet { color: var(--ink-violet); }
.accent-blue { color: var(--ink-blue); }

.serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
}

/*
  the signature device: the horizontal logo dropped inline mid-sentence.
  the source art carries a flag mast above the letters and a descender
  curl below, so the lettering itself only fills the middle ~45% of the
  image. scale up so that band reads at normal text size, not the frame.
*/
.inline-logo {
  display: inline-block;
  height: 1.15em;
  width: auto;
  vertical-align: middle;
  margin: 0 0.12em;
  transform: translateY(-0.03em);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-l);
}

/* ---------------------------------- scroll progress ---------------------------------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ink-violet), var(--ink-blue));
  transform: scaleX(0);
  transform-origin: left;
  z-index: 200;
  pointer-events: none;
}

/* ---------------------------------- nav ---------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-s) var(--space-l);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: padding 0.25s ease;
}

.site-nav__logo {
  height: 48px;
  width: auto;
  transition: height 0.25s ease;
}

.site-nav.is-condensed {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 20px rgba(10, 30, 50, 0.08);
}

.site-nav.is-condensed .site-nav__inner {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.site-nav.is-condensed .site-nav__logo {
  height: 38px;
}

.site-nav__toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: var(--space-s);
  cursor: pointer;
}

.site-nav__toggle-bar {
  width: 22px;
  height: 2px;
  background: var(--ink);
  display: block;
}

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-l);
}

.site-nav__link {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--ink-violet);
}

.site-nav__link--cta {
  color: #fff;
  background: var(--ink-blue);
  padding: 0.5em 1.1em;
  border-radius: 999px;
}

.site-nav__link--cta:hover {
  background: var(--ink-violet);
  color: #fff;
}

@media (max-width: 767px) {
  .site-nav__toggle {
    display: flex;
  }

  .site-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-m) var(--space-l) var(--space-l);
    display: none;
  }

  .site-nav__menu.is-open {
    display: flex;
  }

  .site-nav__link {
    width: 100%;
    padding: var(--space-m) 0;
    border-bottom: 1px solid var(--line);
  }

  .site-nav__link--cta {
    margin-top: var(--space-m);
    text-align: center;
    border-bottom: none;
  }
}

/* ---------------------------------- buttons ---------------------------------- */

.button {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  background: var(--ink-blue);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.button:hover {
  background: var(--ink-violet);
  transform: translateY(-2px);
  color: #fff;
}

.button--outline {
  background: transparent;
  color: var(--ink-blue);
  border: 2px solid var(--ink-blue);
}

.button--outline:hover {
  background: var(--ink-blue);
  color: #fff;
}

/* ---------------------------------- hero ---------------------------------- */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0a3d62;
}

.hero__media video,
.hero__media img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 30, 50, 0.15) 0%, rgba(10, 30, 50, 0.72) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-l);
  width: 100%;
}

.hero__eyebrow {
  text-transform: lowercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: #fff;
  opacity: 0.85;
  margin-bottom: var(--space-s);
}

.hero h1 {
  color: #fff;
  max-width: 16ch;
  margin-bottom: var(--space-m);
  text-shadow: 0 2px 20px rgba(10, 30, 50, 0.45);
}

.hero p {
  max-width: 42ch;
  font-size: var(--step-lede);
  color: #fff;
  text-shadow: 0 1px 12px rgba(10, 30, 50, 0.45);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-top: var(--space-l);
}

@media (max-width: 767px) {
  .hero {
    min-height: 78vh;
  }
}

/* ---------------------------------- sections ---------------------------------- */

section {
  padding: var(--space-xl) 0;
}

.section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.section-split--reverse .section-split__media {
  order: 2;
}

.section-split__media img {
  border-radius: var(--radius);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-split__body .step-lede {
  font-size: var(--step-lede);
}

@media (max-width: 900px) {
  .section-split {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }

  .section-split--reverse .section-split__media {
    order: 0;
  }
}

.section--tint {
  background: var(--paper-dim);
}

/* ---------------------------------- section divider ---------------------------------- */

/*
  a burgee flying from the centre of a hairline, the rule fading away either
  side of it. the mark sits in normal flow inside a flex row, so it is centred
  by the layout rather than by a transform. it points right, the way the
  burgee does in the logo.
*/
.section-divider {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-l);
}

.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line));
}

.section-divider::after {
  background: linear-gradient(90deg, var(--line), transparent);
}

.section-divider__mark {
  flex: none;
  width: 60px;
  height: auto;
  color: var(--ink-violet);
}

.section-divider--blue .section-divider__mark {
  color: var(--ink-blue);
}

/*
  the luff: one gentle wave travelling from the mast out to the fly, on a
  loop. driven by an SMIL <animate> on the path's `d` in flag-mark.njk, not
  CSS @keyframes — Safari has never animated `d` via CSS, so the flag would
  render frame 0 and sit still there. prefers-reduced-motion is handled in
  js/site.js, which starts/stops the SMIL animation.
*/

/* ---------------------------------- legal / prose content ---------------------------------- */

.legal {
  max-width: 760px;
  /*
    the global lowercase is the brand voice for marketing copy, but it makes
    legal and safety text read as careless in exactly the place the reader
    needs us to sound careful. prose inside .legal keeps its written case.
  */
  text-transform: none;
}

/* the page heading is still brand voice, so it stays lowercase */
.legal h1 {
  text-transform: lowercase;
}

.legal h1 {
  font-size: var(--step-h2);
  margin-bottom: var(--space-l);
}

.legal h3 {
  margin-top: var(--space-l);
}

.legal h4 {
  font-size: 1.05rem;
  margin-top: var(--space-m);
}

.legal ul {
  padding-left: 1.3em;
  margin: 0 0 var(--space-m);
}

.legal li {
  margin-bottom: 0.4em;
}

/* ---------------------------------- CTA banner ---------------------------------- */

.cta-banner {
  /* ink variants keep white text above 4.5:1 contrast */
  background: linear-gradient(135deg, var(--ink-violet), var(--ink-blue));
  color: #fff;
  border-radius: var(--radius);
  padding: var(--space-xl) var(--space-l);
  text-align: center;
}

.cta-banner h2 {
  color: #fff;
}

.cta-banner p {
  color: #fff;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

.cta-banner .button {
  background: #fff;
  color: var(--ink-violet);
}

.cta-banner .button:hover {
  background: var(--ink);
  color: #fff;
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  justify-content: center;
}

/* secondary action inside a coloured banner: outlined in white, not in ink */
.cta-banner .button--ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

.cta-banner .button--ghost:hover {
  background: #fff;
  color: var(--ink-violet);
  border-color: #fff;
}

/* ---------------------------------- feedback quotes ---------------------------------- */

.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-l);
}

.quote-card {
  margin: 0;
  padding: var(--space-l);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.quote-card blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.5;
}

.quote-card figcaption {
  margin-top: auto;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/*
  always on its own line. inline, it lands mid-sentence on some cards and at
  the end on others, depending on where the attribution happens to wrap.
*/
.quote-card__year {
  display: block;
  color: var(--ink-violet);
  font-weight: 600;
}

/* ---------------------------------- instagram showcase ---------------------------------- */

.showcase__head {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto var(--space-l);
}

.showcase__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-s);
}

.showcase__grid img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.6rem;
  width: 100%;
  height: 100%;
}

/* live feed tiles link out to the post; curated fallback tiles are plain imgs */
.showcase__item {
  display: block;
  border-radius: 0.6rem;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.showcase__item:hover,
.showcase__item:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.showcase__cta {
  text-align: center;
  margin-top: var(--space-l);
}

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

/* ---------------------------------- committee / trust strip ---------------------------------- */

.trust-strip {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-l);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-l);
  align-items: center;
}

.trust-strip p {
  margin: 0;
}

.trust-strip p + p {
  margin-top: var(--space-m);
}

.trust-strip__note {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

@media (max-width: 700px) {
  .trust-strip {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* ---------------------------------- footer ---------------------------------- */

.site-footer {
  background: var(--ink);
  color: #fff;
  padding: var(--space-xl) 0 var(--space-l);
}

.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-l);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  justify-content: space-between;
}

.site-footer__brand {
  max-width: 260px;
}

.site-footer__logo {
  filter: brightness(0) invert(1);
  margin-bottom: var(--space-s);
}

.site-footer__tagline {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.site-footer__heading {
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-s);
}

.site-footer__link {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  padding: 0.2em 0;
}

.site-footer__link:hover {
  color: #fff;
}

.site-footer__link--icon {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.site-footer__icon {
  filter: brightness(0) invert(1);
  opacity: 0.75;
}

.site-footer__copy {
  max-width: var(--container);
  margin: var(--space-xl) auto 0;
  padding: var(--space-m) var(--space-l) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

/* ---------------------------------- focus ---------------------------------- */

/*
  one ring everywhere, so keyboard users always know where they are. the
  outline follows each control's own border-radius, so the pill buttons keep
  their shape. over the hero video and inside the coloured cta banner the
  blue has nothing to sit against, so it switches to white there.
*/
:focus-visible {
  outline: 3px solid var(--ink-blue);
  outline-offset: 3px;
}

.hero :focus-visible,
.cta-banner :focus-visible {
  outline-color: #fff;
}

/* ---------------------------------- scroll reveal ---------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}