/* ==========================================================================
   Vertige Club
   --------------------------------------------------------------------------
   Wide, left-aligned layout. Burgundy and blush — no black anywhere; the
   darkest value on the page is --wine. Cardo carries headings and body,
   Josefin Sans is kept for small letterspaced labels and navigation.
   ========================================================================== */
:root{
  --wine:#721c24;
  --wine-deep:#5a151c;
  --wine-soft:#8a565c;
  --blush:#f8d7da;
  --blush-pale:#fdf3f4;
  --line:#eed9db;
  --paper:#fffdfc;

  --display:'Cardo', Georgia, serif;
  --label:'Josefin Sans', system-ui, sans-serif;

  --gutter:clamp(20px, 4.5vw, 72px);
  --header-h:96px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--display);
  background:var(--paper);
  color:var(--wine);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}

.label{
  font-family:var(--label);
  font-weight:400;
  font-size:10.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--wine-soft);
}

/* ==========================================================================
   HEADER — logo left, navigation right, one row
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  height:var(--header-h);
  display:flex;align-items:center;
}
.site-header .wrap{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{display:block;flex-shrink:0;line-height:0;text-decoration:none}
.logo svg{width:76px;height:76px;display:block;transition:opacity .3s}
.logo:hover svg{opacity:.7}

/* ---- desktop navigation with hover menus ---- */
.nav{display:flex;align-items:center;gap:clamp(18px,3vw,44px)}
.nav > li{position:relative;list-style:none}
.nav > li > a{
  font-family:var(--label);
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--wine);text-decoration:none;
  display:flex;align-items:center;gap:7px;
  padding:calc((var(--header-h) - 20px) / 2) 0;
}
.nav > li > a .chev{
  width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .3s;
}
.nav > li:hover > a .chev,
.nav > li:focus-within > a .chev{transform:rotate(225deg) translateY(-3px)}

.submenu{
  position:absolute;top:100%;left:-22px;
  min-width:210px;
  background:var(--paper);
  border:1px solid var(--line);
  padding:14px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s, transform .25s, visibility .25s;
  list-style:none;
}
.nav > li:hover .submenu,
.nav > li:focus-within .submenu{opacity:1;visibility:visible;transform:none}
/* the last menu opens to the left so it never runs off the right edge */
.nav > li:last-child .submenu{left:auto;right:-22px}
.submenu a{
  display:block;padding:8px 22px;
  font-family:var(--display);font-size:16px;color:var(--wine-soft);
  text-decoration:none;transition:color .2s, background .2s;
}
.submenu a:hover{color:var(--wine);background:var(--blush-pale)}

/* ---- mobile menu button ---- */
.burger{
  display:none;
  background:none;border:none;cursor:pointer;padding:10px 0 10px 10px;
  font-family:var(--label);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--wine);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  isolation:isolate;              /* keeps the two layers below inside the hero */
  overflow:hidden;
  background-color:var(--blush-pale);   /* what shows if the photograph is missing */
  border-bottom:1px solid var(--line);
  min-height:calc(100svh - var(--header-h));
  display:flex;align-items:center;
  padding-top:clamp(56px,9vh,110px);
  padding-bottom:clamp(56px,9vh,110px);
}
/* the photograph, left as it was taken */
.hero::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background:url('photos/1.jpg') center 42% / cover no-repeat;
}
/* a burgundy scrim: it darkens the picture just enough to carry white type,
   and is graded so the right-hand side keeps its light */
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(40,7,11,.68) 0%,
    rgba(40,7,11,.62) 42%,
    rgba(40,7,11,.44) 74%,
    rgba(40,7,11,.34) 100%);
}
.hero-box{max-width:min(1180px, 78vw)}
.hero h1{
  color:#fff;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.3rem,5.4vw,5.2rem);
  line-height:1.08;
  letter-spacing:-.015em;
}
.hero h1 em{font-style:italic}
.hero .sub{
  margin-top:clamp(24px,3vw,38px);
  font-size:clamp(18px,2.2vw,26px);
  line-height:1.5;
  color:rgba(255,255,255,.92);
  max-width:40ch;
}
.hero .cta{
  display:inline-block;margin-top:clamp(30px,4vw,48px);
  font-family:var(--label);font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase;text-decoration:none;color:#fff;
  border:1px solid rgba(255,255,255,.75);
  padding:16px 30px;
  transition:background .3s, color .3s, border-color .3s;
}
.hero .cta:hover{background:#fff;color:var(--wine);border-color:#fff}

/* ==========================================================================
   WIDE SECTIONS
   ========================================================================== */
section{padding-top:clamp(74px,9.5vw,150px);padding-bottom:clamp(74px,9.5vw,150px)}
section.blush{background:var(--blush-pale);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* a section that continues the one above it, rather than starting anew */
section.follows{padding-top:0}

h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.05rem,4.4vw,3.9rem);
  line-height:1.12;letter-spacing:-.015em;
}
h3{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.3;
}
.lede{font-size:clamp(18px,1.9vw,21px);line-height:1.7}
.muted{color:var(--wine-soft)}
p + p{margin-top:1.1em}

/* heading left, copy right — fills the page horizontally */
.duo{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(30px,6vw,110px);
  align-items:start;
}
.duo .col-copy{max-width:54ch}
.duo .col-copy p:not(.label):not(.accent){font-size:clamp(17px,1.55vw,19.5px);line-height:1.72}

/* a photograph on the left, the text block on the right */
.split-photo{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(30px,6vw,110px);
  align-items:center;
}

/* heading above, copy below */
.stack h2{max-width:20ch}
.stack .col-copy{max-width:66ch;margin-top:clamp(24px,3vw,40px)}
.stack .col-copy p:not(.label):not(.accent){font-size:clamp(17px,1.55vw,19.5px);line-height:1.72}

/* a single emphasised line closing a section */
.accent{
  font-family:var(--display);font-style:italic;
  font-size:clamp(20px,2.4vw,30px);line-height:1.4;
  margin-top:1.1em;color:var(--wine);
}


/* shop */
.shop-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(34px,5vw,80px);
  margin-top:clamp(36px,5vw,60px);
}
.item .meta{margin-top:20px}
.item h3{font-size:clamp(1.35rem,2.1vw,1.7rem);margin-top:12px}
.item .by{color:var(--wine-soft);margin-top:6px;font-size:16px}
.item .desc{max-width:40ch;margin-top:14px;font-size:16px;line-height:1.7}

.product{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,6vw,100px);
  align-items:center;
}
.product .price, .item .price{
  font-family:var(--display);
  font-size:clamp(20px,2.4vw,28px);
  margin:18px 0 26px;
}
.product .desc{max-width:46ch}
.product .desc p + p{margin-top:1.1em}
.buy{
  display:inline-block;margin-top:clamp(26px,3.5vw,38px);
  background:var(--wine);color:var(--paper);border:1px solid var(--wine);
  font-family:var(--label);font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase;text-decoration:none;
  padding:16px 30px;cursor:pointer;
  transition:background .3s,color .3s;
}
.buy:hover{background:none;color:var(--wine)}
/* until payments are connected the button is not a button */
.buy[disabled]{
  border-color:var(--line);color:var(--wine-soft);
  cursor:default;
}
.buy[disabled]:hover{background:none;color:var(--wine-soft)}
.stock{
  display:block;margin-top:16px;
  font-family:var(--body);font-size:14.5px;font-style:italic;color:var(--wine-soft);
}

/* gallery */
.gallery{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.2vw,34px);
  margin-top:clamp(30px,4vw,52px);
}
.gallery figure{margin:0}
.shot{
  background:var(--blush-pale);
  border:1px solid var(--line);
  aspect-ratio:4/5;
  overflow:hidden;
}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
/* 2.jpg has a wide stretch of open water above the group: pull the crop down
   so the boards and the people fill the frame instead of the sea */
.shot.low img{object-position:center 82%}
/* a book cover is shown whole, not cropped to the frame: clipping its own
   border reads as a mistake rather than a crop */
.shot.fit{background:var(--blush-pale)}
.shot.fit img{object-fit:contain;padding:clamp(18px,2.6vw,38px)}
.gallery figcaption{
  font-family:var(--display);
  font-size:clamp(17px,1.6vw,20px);
  margin-top:14px;
}
.gallery .where{display:block;font-size:14.5px;color:var(--wine-soft);margin-top:2px}

/* contact band */
.contact{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:30px}
.mail{
  font-family:var(--display);font-size:clamp(22px,3.4vw,40px);
  color:var(--wine);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:6px;
  transition:border-color .3s,color .3s;
}
.mail:hover{color:var(--wine-deep);border-color:var(--wine)}

/* image band, ready for a photograph */
.plate{
  background:var(--blush-pale);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  aspect-ratio:2.7/1;
}
/* 1.jpg is a portrait in a wide band: bias the crop downwards so the figure
   on the grass is not cut off at the bottom edge */
.plate img{width:100%;height:100%;object-fit:cover;object-position:center 72%}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  border-top:1px solid var(--line);
  padding-top:clamp(50px,6vw,80px);padding-bottom:clamp(32px,4vw,50px);
}
.foot-grid{display:flex;flex-wrap:wrap;gap:34px clamp(40px,8vw,120px);justify-content:space-between}
.foot-grid ul{list-style:none}
.foot-grid li + li{margin-top:9px}
.foot-grid a{font-size:16px;color:var(--wine-soft);text-decoration:none;transition:color .2s}
.foot-grid a:hover{color:var(--wine)}
.foot-note{
  margin-top:clamp(36px,5vw,60px);padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
}

/* ---------- entrance ---------- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rise{animation:rise 1.1s cubic-bezier(.22,1,.36,1) both}
.rise.d1{animation-delay:.14s}
.rise.d2{animation-delay:.28s}
@media (prefers-reduced-motion:reduce){.rise{animation:none}}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width:900px){
  :root{--header-h:72px}
  .logo svg{width:60px;height:60px}
  .burger{display:block}

  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 30px;
    max-height:calc(100svh - var(--header-h));
    overflow-y:auto;
    display:none;
  }
  .nav.open{display:flex}
  .nav > li{width:100%;border-bottom:1px solid var(--line)}
  .nav > li:last-child{border-bottom:none}
  .nav > li > a{padding:20px 0;font-size:12px}
  .nav > li > a .chev{display:none}

  /* on a touch screen there is no hover: the lists are simply open */
  .submenu{
    position:static;opacity:1;visibility:visible;transform:none;
    border:none;padding:0 0 18px;min-width:0;
  }
  .submenu a{padding:7px 0;font-size:16.5px}

  .duo{grid-template-columns:1fr;gap:22px}
  .stack h2{max-width:none}
  .hero::before{background-position:center center}
  .hero::after{background:rgba(40,7,11,.56)}
  .split-photo{grid-template-columns:1fr;gap:30px}
  .product{grid-template-columns:1fr;gap:28px}
  .shop-grid{grid-template-columns:1fr;gap:52px}

  .gallery{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  .gallery::-webkit-scrollbar{display:none}
  .gallery figure{flex:0 0 66%;scroll-snap-align:start}
  .hero-box{max-width:none}
  .hero h1{font-size:clamp(2.1rem,8.4vw,3.4rem)}
  .hero .sub{max-width:32ch}
  .plate{aspect-ratio:3/2}
}
@media (max-width:420px){
  body{font-size:16px}
  .hero .cta{padding:15px 22px;letter-spacing:.18em}
}