/* ============================================================
   Viva · Azimut Verve 48 · Coconut Grove
   ------------------------------------------------------------
   Photographs drop in without touching the markup: put a file
   in /assets/photos with the name listed in the PHOTO SLOTS
   block below and it replaces the painted placeholder. If the
   file is not there, the gradient underneath simply shows.
   ============================================================ */

:root{
  --ink:      #06111c;
  --deep:     #0a1a29;
  --navy:     #0f2537;
  --sea:      #1b3d52;
  --ivory:    #f2eee5;
  --paper:    #faf7f0;
  --brass:    #b7935c;
  --brass-lt: #d9bd8b;
  --mist:     rgba(242,238,229,.62);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --wrap: 1120px;
  --rule: 1px solid rgba(183,147,92,.32);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── PHOTO SLOTS ─────────────────────────────────────────── */
.hero__media        { --photo: url("../photos/hero.jpg"); }
.shot[data-shot="1"]{ --photo: url("../photos/01-bow.jpg"); }
.shot[data-shot="2"]{ --photo: url("../photos/02-cockpit.jpg"); }
.shot[data-shot="3"]{ --photo: url("../photos/03-beach-club.jpg"); }
.shot[data-shot="4"]{ --photo: url("../photos/04-helm.jpg"); }
.shot[data-shot="5"]{ --photo: url("../photos/05-master-cabin.jpg"); }
.shot[data-shot="6"]{ --photo: url("../photos/06-marina.jpg"); }

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,.55vw + 13.6px,17px);
  line-height:1.72;
  letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
}

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

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

a{ color:inherit; }

::selection{ background:var(--brass); color:var(--ink); }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--brass); color:var(--ink); padding:.75rem 1.25rem;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
}
.skip:focus{ left:0; }

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

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2.5rem, 720px); }
.center{ text-align:center; }

/* ── LANGUAGE SWITCH ─────────────────────────────────────── */
[data-lang="it"] .lang-en,
[data-lang="en"] .lang-it{ display:none; }

/* ── TOP BAR ─────────────────────────────────────────────── */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; gap:2rem;
  padding:1.15rem clamp(1.25rem,4vw,2.75rem);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.topbar.is-stuck{
  background:rgba(6,17,28,.9);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:rgba(183,147,92,.22);
  padding-block:.7rem;
}

.wordmark{
  display:flex; align-items:center; margin-right:auto; text-decoration:none;
  background:#f3f2ed;
  padding:.2rem .55rem .22rem;
  border-radius:2px;
}
.wordmark__logo{
  display:block;
  height:48px;
  width:auto;
}

.nav{ display:flex; gap:clamp(1.1rem,2.4vw,2.1rem); }
.nav a{
  position:relative; text-decoration:none;
  font-size:.735rem; letter-spacing:.185em; text-transform:uppercase;
  color:var(--mist); transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-.42rem; width:100%;
  height:1px; background:var(--brass); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav a:hover{ color:var(--ivory); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.lang{ display:flex; align-items:center; gap:.42rem; color:rgba(242,238,229,.42); font-size:.7rem; }
.lang button{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; letter-spacing:.16em; color:rgba(242,238,229,.5);
  transition:color .3s var(--ease);
}
.lang button:hover{ color:var(--ivory); }
.lang button.is-active{ color:var(--brass-lt); }

.burger{
  display:none; width:2rem; height:2rem; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:.36rem; padding:0;
}
.burger span{ display:block; height:1px; width:100%; background:var(--ivory); transition:transform .35s var(--ease), opacity .25s; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(.185rem) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-.185rem) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:45;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6rem;
  background:rgba(6,17,28,.97);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.drawer a{
  font-family:var(--serif); font-size:2rem; text-decoration:none; color:var(--ivory);
  letter-spacing:.03em;
}
.drawer[hidden]{ display:none; }

/* ── HERO ────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:end center;
  padding:0 1.5rem clamp(4.5rem,11vh,8rem);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{
  position:absolute; inset:0; z-index:-2; overflow:hidden;
  background-color:var(--ink);
}

/* ---- painted seascape (fallback when no photograph is in place) ---- */
.hero__sky{
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(to bottom,
      #04101c 0%, #0a1f31 19%, #1c4058 34%, #476574 42.5%,
      #9c7859 45.5%, #cf9d72 47.4%,
      #4a6373 48.2%, #23465c 57%, #102a3d 73%, #071522 89%, #050f1a 100%);
}
.hero__sun{
  position:absolute; z-index:1;
  left:71%; top:47.2%; translate:-50% -50%;
  width:clamp(230px,32vw,480px); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,216,163,.5) 0%, rgba(255,201,142,.14) 36%, transparent 68%);
}
.hero__sun::after{
  content:""; position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:8%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, #fffaf0 0%, #ffe3b4 62%, rgba(255,206,150,.35) 100%);
  box-shadow:0 0 30px 12px rgba(255,214,164,.55);
}
.hero__path{
  position:absolute; z-index:1;
  left:71%; top:48%; translate:-50% 0;
  width:clamp(120px,17vw,260px); height:26%;
  background:repeating-linear-gradient(
    to bottom,
    rgba(246,206,158,.4) 0 2px,
    transparent 2px 14px);
  -webkit-mask-image:radial-gradient(58% 78% at 50% 0%, #000 10%, transparent 76%);
          mask-image:radial-gradient(58% 78% at 50% 0%, #000 10%, transparent 76%);
}
.hero__swell{
  position:absolute; z-index:2; left:0; right:0; bottom:0; height:56%;
  background:linear-gradient(to top, rgba(4,13,22,.96) 18%, rgba(5,15,26,.55) 62%, rgba(5,15,26,0) 100%);
}

/* ---- a real photograph, when present, paints over all of it ---- */
.hero__media::before{
  content:""; position:absolute; inset:0; z-index:3;
  background-image:var(--photo);
  background-size:cover; background-position:center 44%;
}
.hero__media::after{
  content:""; position:absolute; inset:0; z-index:4;
  background:linear-gradient(to top, rgba(5,15,26,.93) 0%, rgba(5,15,26,.62) 30%, rgba(5,15,26,.2) 58%, rgba(5,15,26,.34) 100%);
}
.hero__inner{ position:relative; z-index:1; text-align:center; max-width:46rem; }
.hero .eyebrow{ text-shadow:0 1px 14px rgba(5,15,26,.75); }

.eyebrow{
  margin:0 0 1.5rem; font-size:.7rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--brass-lt);
}
.eyebrow .dot{
  display:inline-block; width:3px; height:3px; border-radius:50%;
  background:var(--brass); vertical-align:middle; margin:0 .55em .18em;
}

.hero__title{
  font-size:clamp(4.6rem,17vw,11rem);
  letter-spacing:.03em; line-height:.9;
  margin:0 0 .55rem;
  text-shadow:0 .04em .5em rgba(6,17,28,.55);
}
.hero__sub{
  margin:0 auto 2.6rem; max-width:34rem;
  font-size:clamp(.92rem,1.3vw,1.06rem);
  letter-spacing:.05em; color:rgba(242,238,229,.88);
  text-shadow:0 1px 14px rgba(5,15,26,.65);
}

.btn{
  display:inline-block; text-decoration:none;
  padding:.95rem 2.5rem;
  border:1px solid var(--brass);
  color:var(--brass-lt);
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.btn:hover{ background:var(--brass); color:var(--ink); }
.btn--ghost{ margin-top:2rem; }

.hero__scroll{
  position:absolute; left:50%; bottom:1.6rem; translate:-50% 0;
  width:1px; height:3.2rem; background:rgba(183,147,92,.3); overflow:hidden;
}
.hero__scroll span{
  position:absolute; inset:0; background:var(--brass);
  animation:drop 2.6s var(--ease) infinite;
}
@keyframes drop{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(100%);} }
@media (prefers-reduced-motion:reduce){ .hero__scroll span{ animation:none; } }

/* ── MANIFESTO ───────────────────────────────────────────── */
.manifesto{
  background:var(--deep);
  padding:clamp(5rem,13vh,9rem) 0;
  text-align:center;
  border-block:var(--rule);
}
.lead{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.4rem,2.9vw,2.1rem); line-height:1.44; letter-spacing:.008em;
  margin:0 auto; max-width:46rem; color:rgba(242,238,229,.93);
}
.signature{
  margin:2.4rem 0 0; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--brass);
}

/* ── SECTIONS ────────────────────────────────────────────── */
.section{ padding:clamp(5rem,14vh,9.5rem) 0; scroll-margin-top:4.5rem; }
.section--dark { background:var(--ink); }
.section--deep { background:var(--sea); }
.section--ivory{ background:var(--paper); color:#14212b; }
.section--ivory .kicker{ color:#8a6b35; }
.section--ivory .section__intro{ color:#41505c; }

.section__head{ max-width:42rem; margin-bottom:clamp(2.75rem,6vh,4.5rem); }
.center .section__head{ margin-inline:auto; }

.kicker{
  margin:0 0 1.1rem; font-size:.68rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--brass);
}
.section h2{ font-size:clamp(2.2rem,5.2vw,3.5rem); margin-bottom:1.4rem; }
.section__intro{ margin:0; color:rgba(242,238,229,.74); max-width:38rem; }
.center .section__intro{ margin-inline:auto; }

/* ── CARDS ───────────────────────────────────────────────── */
.cards{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  background:rgba(183,147,92,.24);
  border:1px solid rgba(183,147,92,.24);
}
.card{
  background:var(--ink);
  padding:clamp(1.9rem,3.4vw,2.7rem);
  transition:background .5s var(--ease);
}
.card:hover{ background:var(--navy); }
.card__num{
  margin:0 0 1.1rem; font-family:var(--serif); font-size:1.15rem;
  color:var(--brass); letter-spacing:.1em;
}
.card h3{ font-size:1.6rem; margin-bottom:.85rem; }
.card p{ margin:0; font-size:.92rem; color:rgba(242,238,229,.7); }

/* ── FIGURES ─────────────────────────────────────────────── */
.figures{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1.6rem 1rem; margin-bottom:clamp(2.75rem,6vh,4rem);
}
.figure{ display:flex; flex-direction:column; align-items:flex-start; }
.figure__v{ font-family:var(--serif); font-size:clamp(2.6rem,5.4vw,3.6rem); line-height:1; color:#14212b; }
.figure__u{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:#8a6b35; margin-top:.35rem; }
.figure__l{ font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; color:#6a7783; margin-top:.5rem; }

/* ── SPEC TABLE ──────────────────────────────────────────── */
.spec{ width:100%; border-collapse:collapse; }
.spec tr{ border-bottom:1px solid rgba(20,33,43,.11); }
.spec tr:first-child{ border-top:1px solid rgba(20,33,43,.11); }
.spec th,.spec td{ text-align:left; padding:1.05rem .4rem; vertical-align:baseline; }
.spec th{
  font-weight:400; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:#6a7783; width:42%;
}
.spec td{ font-family:var(--serif); font-size:1.25rem; color:#14212b; }

.footnote{
  margin:1.8rem 0 0; font-size:.76rem; letter-spacing:.04em;
  color:#7d8994; max-width:44rem;
}
.section--dark .footnote{ color:rgba(242,238,229,.45); }

/* ── GALLERY ─────────────────────────────────────────────── */
.gallery{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr));
}
.shot{
  position:relative; margin:0; min-height:clamp(230px,32vh,330px);
  display:flex; align-items:flex-end;
  padding:1.35rem 1.5rem;
  overflow:hidden;
  border:1px solid rgba(183,147,92,.2);
  background-image:var(--photo), var(--placeholder,linear-gradient(155deg,#12293c 0%,#1d4257 52%,#0a1a29 100%));
  background-size:cover; background-position:center;
}
.shot--wide{ grid-column:span 2; }
@media (max-width:700px){ .shot--wide{ grid-column:span 1; } }

.shot::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(217,189,139,.16), transparent 58%),
    linear-gradient(to top, rgba(6,17,28,.86) 0%, rgba(6,17,28,.06) 62%);
}
.shot figcaption{
  position:relative; z-index:1;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(242,238,229,.92);
}
.shot figcaption::before{
  content:""; display:block; width:1.6rem; height:1px;
  background:var(--brass); margin-bottom:.75rem;
}

/* ── ROUTES ──────────────────────────────────────────────── */
.routes{ list-style:none; margin:0; padding:0; counter-reset:leg; }
.routes li{
  counter-increment:leg;
  display:grid; grid-template-columns:1fr auto auto; gap:1.25rem; align-items:baseline;
  padding:1.3rem .3rem;
  border-bottom:1px solid rgba(20,33,43,.11);
  transition:padding-left .4s var(--ease);
}
.routes li:first-child{ border-top:1px solid rgba(20,33,43,.11); }
.routes li:hover{ padding-left:1rem; }
.routes__name{ font-family:var(--serif); font-size:clamp(1.35rem,3vw,1.85rem); color:#14212b; }
.routes__name::before{
  content:counter(leg,decimal-leading-zero);
  font-family:var(--sans); font-size:.68rem; letter-spacing:.2em;
  color:#a8823f; margin-right:1.1rem; vertical-align:.32em;
}
.routes__d{ font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:#6a7783; }
.routes__t{ font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:#8a6b35; min-width:5.6rem; text-align:right; }

/* ── FOOTER ──────────────────────────────────────────────── */
.footer{ background:var(--ink); padding:3.5rem 0; border-top:var(--rule); text-align:center; }
.footer__logo{
  display:block;
  height:52px;
  width:auto;
  margin:0 auto 1.2rem;
}
.footer p{ margin:.4rem 0; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(242,238,229,.5); }
.footer__fine{ text-transform:none !important; letter-spacing:.03em !important; font-size:.7rem !important; color:rgba(242,238,229,.3) !important; max-width:40rem; margin-inline:auto !important; }

/* ── REVEAL ──────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:880px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .topbar{ gap:1.1rem; }
  .wordmark__logo{ height:44px; }
}
@media (max-width:560px){
  .spec th,.spec td{ display:block; width:auto; padding-block:.35rem; }
  .spec th{ padding-top:1rem; }
  .spec td{ padding-bottom:1rem; }
  .routes li{ grid-template-columns:1fr auto; row-gap:.2rem; }
  .routes__d{ grid-column:2; }
  .routes__t{ grid-column:2; text-align:right; }
}