:root { --ink: #070707; --paper: #f3efe5; --gold: #d8aa3f; --muted: #a39d90; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.nav-shell { height: 84px; padding: 0 clamp(24px, 5vw, 78px); display: flex; align-items: center; justify-content: space-between; background: #080808; color: white; border-bottom: 1px solid #262626; position: relative; z-index: 10; }
.brand { display: flex; align-items: center; gap: 12px; font: 900 18px/1 Arial; letter-spacing: .08em; }
.brand img { width: 42px; height: 42px; object-fit: contain; }
nav { display: flex; gap: 34px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
nav a, .text-link { transition: color .2s; }
nav a:hover, .text-link:hover { color: var(--gold); }
.nav-order { border-bottom: 1px solid var(--gold); padding: 8px 0; color: var(--gold); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.nav-order span, .button span { margin-left: 12px; }

.hero { min-height: calc(100vh - 84px); background: #080808; color: white; padding: 72px clamp(24px, 7vw, 110px) 58px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; overflow: hidden; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 24px; color: var(--gold); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .22em; }
.eyebrow span { width: 28px; height: 1px; background: currentColor; display: inline-block; }
h1, h2, h3 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.045em; }
h1 { max-width: 760px; font-size: clamp(64px, 7.6vw, 124px); line-height: .84; }
h1 em, h2 em, h3 em { color: var(--gold); font-weight: 400; }
.hero-lede { max-width: 575px; margin: 35px 0 31px; color: #bdb8af; font: 400 clamp(16px, 1.35vw, 20px)/1.65 Georgia, serif; }
.hero-actions { display: flex; align-items: center; gap: 34px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; min-width: 185px; padding: 17px 19px; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-gold { background: var(--gold); color: #080808; }
.button-gold:hover { background: #ecc45e; }
.text-link { color: white; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.text-link span { color: var(--gold); margin-left: 10px; }
.hero-notes { display: flex; margin-top: 62px; padding-top: 22px; border-top: 1px solid #292929; max-width: 580px; gap: 55px; }
.hero-notes p { margin: 0; display: flex; gap: 13px; color: #a9a49b; font-size: 11px; line-height: 1.55; text-transform: uppercase; letter-spacing: .08em; }
.hero-notes strong { color: var(--gold); }
.hero-art { position: relative; height: 650px; display: grid; place-items: center; }
.hero-art img { position: relative; z-index: 2; max-height: 630px; width: auto; filter: drop-shadow(0 30px 50px #000); }
.gold-orbit { position: absolute; width: min(38vw, 530px); aspect-ratio: 1; border: 1px solid #664f1e; border-radius: 50%; box-shadow: 0 0 130px rgba(216,170,63,.11) inset; }
.gold-orbit:after { content: ''; position: absolute; inset: 9%; border: 1px dashed #3d321b; border-radius: 50%; }
.stamp { position: absolute; z-index: 3; bottom: 50px; right: 2%; width: 86px; height: 86px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); display: grid; place-items: center; text-align: center; font-size: 9px; font-weight: 900; line-height: 1.5; letter-spacing: .2em; transform: rotate(8deg); }

.ticker { overflow: hidden; background: var(--gold); color: #090909; border-block: 1px solid #090909; white-space: nowrap; }
.ticker div { width: max-content; padding: 12px 0; font: 900 11px/1 Arial; letter-spacing: .2em; word-spacing: 14px; animation: marquee 24s linear infinite; }
@keyframes marquee { to { transform: translateX(-30%); } }
.section { padding: 110px clamp(24px, 7vw, 110px); }
.flavors { background: var(--paper); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 55px; }
.section-heading .eyebrow { color: #8c681d; }
.section-heading h2 { font-size: clamp(52px, 6.5vw, 98px); line-height: .9; }
.section-heading > p { max-width: 365px; color: #666158; font: 16px/1.6 Georgia, serif; }
.flavor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.flavor-card { min-height: 560px; position: relative; overflow: hidden; }
.pina, .punch { display: grid; grid-template-columns: 1fr 1fr; align-items: end; padding: 38px; color: white; background: #171714; }
.punch { background: #70291f; }
.flavor-number { position: absolute; top: 28px; left: 32px; z-index: 2; color: #d4cdbf; font-size: 10px; letter-spacing: .16em; }
.flavor-visual { position: absolute; inset: 0; display: grid; place-items: center; opacity: .4; }
.fruit { width: 280px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #cba84d; border-radius: 50%; font: italic 210px/.8 Georgia, serif; color: #e8c964; transform: rotate(-10deg); }
.flavor-copy { grid-column: 2; position: relative; z-index: 2; padding-bottom: 6px; }
.tag { color: #d3b55c; font-size: 9px; text-transform: uppercase; letter-spacing: .15em; }
.flavor-copy h3 { font-size: clamp(43px, 4vw, 67px); line-height: .82; }
.flavor-copy > p:not(.tag) { color: #cdc8bf; font: 14px/1.6 Georgia, serif; }
.flavor-copy a, .coming a { display: inline-flex; justify-content: space-between; gap: 35px; padding: 12px 0; border-bottom: 1px solid #8c742f; color: #e2c66e; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.coming { min-height: 360px; grid-column: 1 / -1; padding: 65px; background: #d8aa3f; }
.coming .eyebrow, .coming h3 em { color: #17140d; }
.coming h3 { font-size: clamp(52px, 6.2vw, 92px); line-height: .88; }
.coming > p:not(.eyebrow) { max-width: 410px; font: 16px/1.6 Georgia, serif; }
.coming a { color: #111; border-color: #111; }

.reviews { background: #0b0b0b; color: white; }
.light-heading > p { color: #aaa59b; }
.video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.review-card { margin: 0; background: #161616; border: 1px solid #2a2926; }
.review-card:nth-child(1), .review-card:nth-child(6) { grid-column: span 2; }
.review-card video { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; display: block; background: #050505; }
.review-card:nth-child(1) video, .review-card:nth-child(6) video { aspect-ratio: 18 / 14; }
.review-card figcaption { display: flex; justify-content: space-between; padding: 13px 15px; color: #aaa49a; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.review-card figcaption strong { color: var(--gold); }

.events { background: var(--paper); }
.event-panel { display: grid; grid-template-columns: 1.05fr .95fr; background: var(--gold); min-height: 580px; }
.event-copy { padding: clamp(45px, 6vw, 90px); }
.event-copy .eyebrow { color: #2a2417; }
.event-copy h2 { font-size: clamp(58px, 6.5vw, 100px); line-height: .86; }
.event-copy h2 em { color: #111; }
.event-copy > p:not(.eyebrow) { max-width: 490px; margin: 28px 0 32px; font: 16px/1.65 Georgia, serif; }
.button-dark { background: #0b0b0b; color: white; }
.occasion-list { background: #111; color: white; padding: 60px; display: flex; flex-direction: column; justify-content: center; }
.occasion-list div { padding: 26px 0; display: grid; grid-template-columns: 40px 1fr 20px; align-items: center; border-bottom: 1px solid #383632; }
.occasion-list span { color: var(--gold); font-size: 9px; }
.occasion-list strong { font: 400 20px Georgia, serif; }
.occasion-list b { color: var(--gold); }
.order-banner { padding: 65px clamp(24px, 7vw, 110px); display: grid; grid-template-columns: 100px 1fr auto; gap: 40px; align-items: center; background: #0b0b0b; color: white; border-bottom: 1px solid #2e2d29; }
.order-banner img { width: 90px; }
.order-banner .eyebrow { margin-bottom: 10px; }
.order-banner h2 { font-size: clamp(40px, 5vw, 74px); }
footer { padding: 55px clamp(24px, 7vw, 110px); background: #080808; color: white; display: grid; grid-template-columns: 1fr 1fr auto; gap: 50px; align-items: center; }
.footer-brand { display: flex; gap: 14px; align-items: center; }
.footer-brand img { width: 54px; }
.footer-brand div, .footer-contact { display: flex; flex-direction: column; gap: 5px; }
.footer-brand strong { letter-spacing: .08em; }
.footer-brand span, .footer-contact span, .legal { color: #817e77; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.footer-contact a { color: var(--gold); font: 16px Georgia, serif; }
.legal { line-height: 1.7; text-align: right; }

@media (max-width: 900px) {
  nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 60px; }
  .hero-art { height: 500px; }
  .gold-orbit { width: 430px; }
  .section-heading { align-items: start; flex-direction: column; }
  .flavor-grid, .event-panel { grid-template-columns: 1fr; }
  .pina, .punch { min-height: 530px; }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .review-card:nth-child(1), .review-card:nth-child(6) { grid-column: span 1; }
  .review-card:nth-child(1) video, .review-card:nth-child(6) video { aspect-ratio: 9 / 14; }
  .order-banner { grid-template-columns: 80px 1fr; }
  .order-banner .button { grid-column: 2; justify-self: start; }
  footer { grid-template-columns: 1fr 1fr; }
  .legal { text-align: left; grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  body { overflow-x: hidden; }
  .nav-shell { height: 66px; padding-inline: 18px; position: sticky; top: 0; }
  .nav-order { font-size: 9px; padding: 10px 0; }
  .nav-order span { margin-left: 6px; }
  .brand span { display: none; }
  .brand img { width: 38px; height: 38px; }
  .hero { min-height: auto; padding: 44px 20px 28px; display: flex; flex-direction: column; }
  .hero-copy { width: 100%; }
  .hero .eyebrow { margin-bottom: 18px; font-size: 9px; letter-spacing: .16em; }
  h1 { font-size: clamp(54px, 17.2vw, 76px); line-height: .88; max-width: 100%; }
  .hero-lede { margin: 25px 0 24px; font-size: 16px; line-height: 1.55; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 18px; }
  .hero-actions .button { width: 100%; min-height: 52px; }
  .hero-actions .text-link { padding: 8px 2px; }
  .hero-notes { margin-top: 34px; padding-top: 18px; gap: 12px; justify-content: space-between; }
  .hero-notes p { gap: 8px; font-size: 8px; }
  .hero-art { height: 385px; width: 100%; margin-top: 8px; }
  .hero-art img { max-height: 370px; max-width: 88%; }
  .gold-orbit { width: min(86vw, 340px); }
  .stamp { width: 68px; height: 68px; right: -2px; bottom: 18px; font-size: 7px; }
  .ticker div { padding-block: 10px; font-size: 9px; }
  .section { padding: 68px 20px; }
  .section-heading { gap: 18px; margin-bottom: 34px; }
  .section-heading h2 { font-size: clamp(48px, 15vw, 66px); }
  .section-heading > p { margin: 0; font-size: 15px; }
  .eyebrow { margin-bottom: 16px; }
  .pina, .punch { display: block; padding: 30px; min-height: 540px; }
  .flavor-copy { position: absolute; left: 30px; right: 30px; bottom: 32px; }
  .fruit { width: 235px; font-size: 170px; }
  .flavor-copy h3 { font-size: 48px; }
  .coming { padding: 42px 28px; min-height: 380px; }
  .coming h3 { font-size: 52px; }
  .reviews { padding-right: 0; }
  .reviews .section-heading { padding-right: 20px; }
  .video-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px 18px 0; scrollbar-width: none; }
  .video-grid::-webkit-scrollbar { display: none; }
  .review-card, .review-card:nth-child(1), .review-card:nth-child(6) { flex: 0 0 78vw; scroll-snap-align: start; }
  .review-card video, .review-card:nth-child(1) video, .review-card:nth-child(6) video { aspect-ratio: 9 / 13; }
  .review-card figcaption { min-height: 42px; align-items: center; }
  .event-copy, .occasion-list { padding: 40px 24px; }
  .event-copy h2 { font-size: 56px; }
  .event-copy .button { width: 100%; }
  .occasion-list div { padding: 22px 0; grid-template-columns: 32px 1fr 16px; }
  .occasion-list strong { font-size: 17px; }
  .order-banner { grid-template-columns: 58px 1fr; gap: 20px; }
  .order-banner img { width: 58px; }
  .order-banner h2 { font-size: 40px; line-height: .95; }
  .order-banner .button { grid-column: 1 / -1; width: 100%; }
  footer { grid-template-columns: 1fr; padding: 44px 20px; gap: 30px; }
  .footer-contact a { font-size: 15px; overflow-wrap: anywhere; }
  .legal { grid-column: auto; }
}

@media (max-width: 380px) {
  h1 { font-size: 52px; }
  .hero-art { height: 345px; }
  .hero-art img { max-height: 332px; }
  .hero-notes p { letter-spacing: .04em; }
  .pina, .punch { min-height: 520px; padding: 24px; }
  .flavor-copy { left: 24px; right: 24px; bottom: 26px; }
  .flavor-copy h3 { font-size: 43px; }
  .event-copy h2 { font-size: 49px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ticker div { animation: none; } }