/* ============================================================
   STRAKER'S NEW YORK — shared styles
   Palette + type measured from strakers.london (Readymag) ref.
   ============================================================ */

@font-face {
  font-family: "MD Lorien";
  src: url("../assets/fonts/md-lorien-regular.woff2") format("woff2"),
       url("../assets/fonts/md-lorien-regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Theinhardt";
  src: url("../assets/fonts/theinhardt-regular.woff2") format("woff2"),
       url("../assets/fonts/theinhardt-regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --cream: #fff9f4;
  --ink: #181310;
  --green: #125f38;
  --serif: "MD Lorien", "Times New Roman", serif;
  --sans: "Theinhardt", "Helvetica Neue", sans-serif;
  --pad: clamp(20px, 2.2vw, 32px);
  --track: 0.08em;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

/* ---------- fixed header, blends over photos and cream ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--pad);
  pointer-events: none;
  color: var(--ink);
  transition: color 0.35s ease;
}
.site-header.on-dark { color: var(--cream); }
.site-header a { pointer-events: auto; }

/* Wordmark artwork masked with currentColor so it follows the header colour swap */
.wordmark {
  display: block;
  width: clamp(180px, 22vw, 320px);
  aspect-ratio: 4394 / 586;
  background: currentColor;
  -webkit-mask: url("../assets/img/web/wordmark.png") no-repeat left center / contain;
  mask: url("../assets/img/web/wordmark.png") no-repeat left center / contain;
}

.site-nav {
  display: flex;
  gap: clamp(18px, 2.6vw, 44px);
  padding-top: 0.5em;
  font-size: 14px;
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.site-nav a:hover { opacity: 0.6; }

/* hamburger — mobile only */
.nav-toggle { display: none; }

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

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video { display: block; }
.hero-reel--mobile { display: none; }
.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-address {
  position: absolute;
  left: var(--pad);
  bottom: var(--pad);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.hero-address img { height: 34px; width: auto; }

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

.section {
  padding: clamp(70px, 9vw, 130px) var(--pad);
}

.eyebrow {
  font-size: 13px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  margin-bottom: 2.2em;
}

.intro {
  display: grid;
  grid-template-columns: minmax(0, 620px) 1fr minmax(0, 240px);
  gap: 40px;
  align-items: start;
}

/* trumpet artwork, left column — masked so it paints in the page ink colour
   (the source art is white on transparent). Cropped to its own bounds, so the
   top of the image is the top of the artwork and lines up with the hours. */
.intro-mark {
  display: block;
  width: min(57.5%, 299px);
  margin-left: clamp(16px, 7vw, 112px);
  aspect-ratio: 1400 / 601;
  background: currentColor;
  -webkit-mask: url("../assets/img/web/trumpet.png") no-repeat left top / contain;
  mask: url("../assets/img/web/trumpet.png") no-repeat left top / contain;
}
.intro-copy { font-size: clamp(21px, 1.9vw, 26px); line-height: 1.4; }
.hours { font-size: 15px; line-height: 1.5; }
.hours p + p { margin-top: 1em; }

/* editorial photo pairs */
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pad);
  padding: 0 clamp(60px, 8vw, 148px);
  align-items: start;
}
.pair img { width: 100%; height: auto; }
.pair .drop { margin-top: clamp(40px, 6vw, 96px); }

/* flush pair: images meet in the middle at the same height, but the section
   keeps the standard side margin */
.pair.pair-flush {
  gap: 0;
  align-items: stretch;
}
.pair.pair-flush .drop { margin-top: 0; }
.pair.pair-flush img {
  height: 100%;
  max-height: 86svh;
  object-fit: cover;
}

/* big serif statement (reservations) */
.statement {
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.statement a { border-bottom: 1px solid currentColor; }
.statement a:hover { opacity: 0.6; }

/* space consecutive editorial image sections apart */
:is(.pair, .wide, .portrait) + :is(.pair, .wide, .portrait) {
  margin-top: clamp(70px, 9vw, 130px);
}

/* wide interior image / reel */
.wide { padding: 0 var(--pad); }
.wide img { width: 100%; height: auto; }
.wide video { display: block; width: 100%; height: auto; }

/* sample menus links */
.menu-links { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.35; }
.menu-links a { display: table; }
.menu-links a:hover { font-style: italic; }

/* centered portrait */
.portrait { display: flex; justify-content: center; padding: 0 var(--pad); }
.portrait img { width: min(620px, 72vw); height: auto; }
.portrait img.portrait--wide { width: min(920px, 86vw); }

/* careers */
.careers p { max-width: 460px; }
.careers a { border-bottom: 1px solid currentColor; }

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

.site-footer {
  background: var(--green);
  color: var(--cream);
  padding: clamp(44px, 5vw, 64px) var(--pad);
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1.3fr 0.9fr 0.6fr;
  gap: 36px;
  align-items: start;
  font-size: 13px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  line-height: 1.6;
}
.footer-loc { display: flex; gap: 16px; align-items: flex-start; }
.footer-loc img { height: 40px; width: auto; flex: none; }
.site-footer a:hover { opacity: 0.7; }

.signup-label { margin-bottom: 1em; }
.signup button {
  border: none;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  padding: 10px 16px;
  cursor: pointer;
}
.signup button:hover { opacity: 0.7; }
/* Loyalist's reCAPTCHA badge */
.grecaptcha-badge { visibility: hidden !important; }
.footer-insta { text-align: right; }

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

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- mobile ---------- */

@media (max-width: 760px) {
  /* Portrait build of the reel — already stacked in the file itself. */
  .hero-reel--full { display: none; }
  .hero-reel--mobile { display: block; }

  /* single full-height hero image */
  .hero { grid-template-columns: 1fr; }
  .hero img + img { display: none; }

  /* hamburger toggling a full-screen green menu */
  .nav-toggle {
    display: block;
    pointer-events: auto;
    position: relative;
    z-index: 30;
    width: 30px;
    height: 22px;
    margin-top: 0.4em;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
  }
  .nav-toggle span {
    position: absolute;
    left: 0;
    top: 5px;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform 0.3s ease, top 0.3s ease;
  }
  .nav-toggle span + span { top: 15px; }
  body.nav-open .nav-toggle span { top: 10px; transform: rotate(45deg); }
  body.nav-open .nav-toggle span + span { top: 10px; transform: rotate(-45deg); }

  .site-nav { display: none; }
  body.nav-open .site-nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 20;
    flex-direction: column;
    justify-content: center;
    gap: 34px;
    padding: var(--pad);
    background: var(--green);
    color: var(--cream);
    font-size: 22px;
    pointer-events: auto;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .site-header { color: var(--cream); }
  body.nav-open .wordmark { position: relative; z-index: 30; }

  .intro { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; padding: 0 var(--pad); }
  .pair .drop { margin-top: 0; }
  .site-footer { grid-template-columns: 1fr; gap: 28px; }
  .footer-insta { text-align: left; }
}

/* centred illustration block (Lucky Strakers pack) */
.poster {
  display: flex;
  justify-content: center;
}
.poster img {
  width: min(100%, 420px);
  height: auto;
}

/* ---------- booking chooser: Resy | Dorsia ---------- */

.book {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 0;
  background: var(--green);
  color: var(--cream);
}
.book[open] { display: grid; grid-template-columns: 1fr 1fr; }
.book::backdrop { background: var(--green); }

.book-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: var(--pad);
  transition: opacity 0.2s ease;
}
.book-side + .book-side { border-left: 1px solid rgba(255, 249, 244, 0.25); }
@media (hover: hover) { .book-side:hover { opacity: 0.6; } }

.book-logo--resy { width: clamp(120px, 14vw, 190px); height: auto; }
.book-logo--dorsia {
  font-family: var(--sans);
  font-size: clamp(30px, 3.6vw, 48px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}

/* Dorsia's injected prime-time badge, kept in cream */
.book-side .dorsia-pt-line { color: var(--cream); text-transform: none; letter-spacing: normal; }
.book-side .dorsia-pt { --dorsia-pt-divider-color: rgba(255, 249, 244, 0.35); }

.book-close {
  position: absolute;
  top: var(--pad);
  right: var(--pad);
  z-index: 1;
  background: none;
  border: 0;
  color: inherit;
  font: 14px var(--sans);
  letter-spacing: var(--track);
  text-transform: uppercase;
  cursor: pointer;
}
.book-close:hover { opacity: 0.6; }

@media (max-width: 760px) {
  .book[open] { grid-template-columns: none; grid-template-rows: 1fr 1fr; }
  .book-side + .book-side { border-left: 0; border-top: 1px solid rgba(255, 249, 244, 0.25); }
}