/* =========================================================
   The Atlantic Coast Yacht Club
   Palette:  navy #0D3B6C · cream #F6E8CD · shade #EBD9B6
   Type:     Bodoni Moda (display) · Libre Franklin (utility)
   ========================================================= */

:root {
  --navy:        #0D3B6C;   /* sampled from the crest */
  --navy-soft:   #2C5A8C;
  --cream:       #F6E8CD;
  --cream-shade: #EBD9B6;

  --rule:   2px;
  --frame:  12px;   /* navy side strips */
  --band:   20px;   /* navy top band */

  --measure: 42rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --step:   clamp(2.5rem, 7vw, 4.5rem);

  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --utility: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: var(--band) var(--frame) 0;
  background: var(--navy);
  color: var(--navy);
  font-family: var(--utility);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.page {
  background: var(--cream);
  padding: clamp(2rem, 6vw, 3.5rem) var(--gutter) var(--step);
}

/* Paper grain — the one texture on the page. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 1000;
  background: var(--navy); color: var(--cream);
  padding: .6rem 1.2rem;
  font: 600 .75rem/1 var(--utility);
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { transform: translate(-50%, 0); }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* ---------- Masthead ---------- */

.masthead { margin: 0 auto; max-width: 46rem; }

.crest-wrap { margin: 0; text-align: center; }

.crest {
  display: block;
  width: 100%;
  max-width: 25rem;
  height: auto;
  margin: 0 auto;
}

/* ---------- Nav ---------- */

.nav {
  margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
  padding: .9rem 0;
  border-top: var(--rule) solid var(--navy);
  border-bottom: var(--rule) solid var(--navy);
}

.nav ul {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: .5rem clamp(1rem, 5vw, 3rem);
  margin: 0; padding: 0; list-style: none;
}

.nav a {
  position: relative;
  display: block;
  padding: .2rem .1rem;
  color: var(--navy);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.15rem;
  height: 1.5px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after,
.nav a:focus-visible::after { transform: scaleX(1); }

/* ---------- Featured video ---------- */

.feature { margin: var(--step) auto 0; max-width: var(--measure); }

.mat {
  padding: 6px;
  border: var(--rule) solid var(--navy);
  background: var(--cream);
}
.mat-inner { border: 8px solid var(--navy); }

.facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0; padding: 0;
  border: 0;
  cursor: pointer;
  background: var(--navy-soft) center / cover no-repeat;
}
.facade::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(13,59,108,.18);
  transition: background .3s ease;
}
.facade:hover::after { background: rgba(13,59,108,.04); }

.facade-play {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  z-index: 1;
  width: clamp(58px, 14%, 92px);
  transition: scale .3s cubic-bezier(.2,.7,.3,1);
}
.facade-play svg { display: block; width: 100%; height: auto; }
.facade-play circle { fill: none; stroke: var(--cream); stroke-width: 4; }
.facade-play path { fill: var(--cream); }
.facade:hover .facade-play,
.facade:focus-visible .facade-play { scale: 1.08; }

.mat-inner iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* ---------- Pennant divider (signature) ---------- */

.pennant { margin: var(--step) auto; max-width: 16rem; }
.pennant svg { display: block; width: 100%; height: auto; }
.pennant line { stroke: var(--navy); stroke-width: 1.5; }
.pennant path { fill: var(--navy); stroke: var(--navy); stroke-width: 2; stroke-linecap: round; }

/* ---------- Prose ---------- */

.eyebrow {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.about { margin: 0 auto; max-width: var(--measure); }

.lead {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.35rem, 3.4vw, 1.7rem);
  line-height: 1.45;
}

.about p + p { margin: 0 0 1.1rem; }
.about p:last-child { margin-bottom: 0; }

/* ---------- Panels ---------- */

.panel {
  margin: 0 auto;
  padding: var(--step) 0 0;
  max-width: var(--measure);
}
.panel:first-of-type { padding-top: 0; }
.panel p { margin: 0 0 1rem; }
.panel p:last-child { margin-bottom: 0; }

.panel a { color: var(--navy); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.panel a:hover { text-decoration-thickness: 2px; }

.contacts {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr;
  gap: .4rem 1.5rem;
  margin: 0;
  padding-top: .75rem;
  border-top: 1px solid var(--cream-shade);
}
.contacts dt {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding-top: .25rem;
}
.contacts dd { margin: 0; }

.btn {
  display: inline-block;
  margin-top: .25rem;
  padding: .7rem 1.6rem;
  border: var(--rule) solid var(--navy);
  color: var(--navy);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}
.btn:hover, .btn:focus-visible { background: var(--navy); color: var(--cream); }

.fallback { font-size: .9375rem; }
.bit-widget-initializer:not(:empty) + .fallback { display: none; }

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

.footer {
  background: var(--navy);
  color: var(--cream);
  padding: clamp(2.5rem, 7vw, 4rem) var(--gutter);
  text-align: center;
}

.social {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.social a {
  color: var(--cream);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.social a:hover, .social a:focus-visible { border-bottom-color: var(--cream); }
.footer :focus-visible { outline-color: var(--cream); }

.colophon {
  margin: 0;
  font-family: var(--display);
  font-size: .875rem;
  letter-spacing: .1em;
  opacity: .8;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 34rem) {
  :root { --frame: 8px; --band: 12px; }
  .nav ul { justify-content: center; }
  .nav a { font-size: .75rem; letter-spacing: .16em; }
  .contacts { grid-template-columns: 1fr; gap: .1rem; }
  .contacts dd { margin-bottom: .75rem; }
}

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