:root {
  --ink: #0b2319;
  --paper: #f3f0e9;
  --cream: #e7e0d2;
  --blue: #a9ccdb;
  --pink: #ef9dab;
  --yellow: #e6bd57;
  --green: #b8cbb8;
  --acid: #d9ef54;
  --line: rgba(11, 35, 25, 0.25);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", sans-serif;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }

.site-header {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3vw;
  border-bottom: 1px solid var(--line);
  background: rgba(243, 240, 233, 0.94);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
}
.wordmark, .footer-wordmark {
  font: 400 clamp(1.7rem, 3vw, 2.7rem)/1 "Archivo Black", sans-serif;
  letter-spacing: -0.08em;
}
.site-nav { display: flex; gap: 2.2rem; font: 700 1rem "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.site-nav a { border-bottom: 2px solid transparent; }
.site-nav a:hover { border-color: var(--ink); }
.menu-button { display: none; border: 0; background: transparent; width: 42px; padding: 10px; }
.menu-button span { display: block; height: 2px; background: var(--ink); margin: 7px 0; }

.hero { min-height: calc(100vh - 84px); display: grid; grid-template-columns: 36% 64%; border-bottom: 1px solid var(--line); }
.hero-copy { padding: 7vw 3vw 4vw; display: flex; align-items: flex-start; flex-direction: column; }
.eyebrow, .section-number { margin: 0 0 1.8rem; font: 700 .9rem "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .16em; }
h1, h2, h3 { margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -.04em; line-height: .98; }
h1 { font-size: clamp(5.1rem, 9vw, 9.5rem); line-height: .94; }
h1 em, .manifesto em { color: var(--pink); font-style: normal; }
h1 em { display: inline-block; }
.hero-intro { max-width: 28rem; margin: auto 0 1.8rem; font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.55; }
.text-link { display: flex; justify-content: space-between; width: 100%; padding: 1rem 0; border-top: 1px solid var(--ink); text-transform: uppercase; font: 700 1rem "Barlow Condensed", sans-serif; letter-spacing: .05em; }

.hero-stage { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; gap: 1.8vw; padding: 7vw 3vw 4.5vw; background: var(--blue); }
.sun { position: absolute; width: 33vw; height: 33vw; border-radius: 50%; background: #f0cd73; top: -8vw; right: -5vw; opacity: .85; }
.hero-stage:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 17%; background: rgba(25, 70, 55, .25); border-radius: 50% 50% 0 0; transform: scaleX(1.5); }
.can { width: 19%; aspect-ratio: .49; border-radius: 9% 9% 7% 7%; position: relative; z-index: 2; display: flex; align-items: center; flex-direction: column; justify-content: center; box-shadow: inset -15px 0 22px rgba(0,0,0,.1), inset 12px 0 18px rgba(255,255,255,.35), 0 20px 25px rgba(10,35,25,.18); transform-origin: bottom; transition: transform .35s ease; }
.can:hover { transform: translateY(-18px) rotate(-2deg); }
.can-top { position: absolute; top: -.8%; left: 1%; width: 98%; height: 3%; border-radius: 50%; background: #bbb9b0; box-shadow: inset 0 2px 2px white; }
.can strong, .mini-can strong { font: 400 clamp(4rem, 7vw, 8rem)/.8 "Archivo Black", sans-serif; letter-spacing: -.14em; transform: translateX(-.07em); }
.can p { margin: 2.2rem 0 .8rem; text-align: center; font: 800 clamp(.7rem, 1.1vw, 1.2rem)/1.1 "Barlow Condensed"; letter-spacing: .05em; }
.can p span { color: rgba(11,35,25,.55); }
.can small { font: 700 clamp(.45rem, .65vw, .72rem) "DM Sans"; white-space: nowrap; }
.can-cream { background: var(--cream); }
.can-blue { background: var(--blue); color: var(--pink); transform: translateY(2vw); }
.can-blue:hover { transform: translateY(calc(2vw - 18px)) rotate(2deg); }
.can-yellow { background: var(--yellow); }
.can-green { background: var(--green); transform: translateY(1vw); }
.can-green:hover { transform: translateY(calc(1vw - 18px)) rotate(2deg); }
.hero-stage-two { gap: 4vw; }
.hero-stage-two .can { width: 25%; }
.stage-note { position: absolute; right: 1rem; bottom: 1rem; z-index: 3; color: var(--paper); margin: 0; font: 700 .72rem "Barlow Condensed"; text-transform: uppercase; letter-spacing: .08em; }

.ticker { overflow: hidden; padding: 1.1rem 0; background: var(--acid); border-bottom: 1px solid var(--ink); }
.ticker-track { display: flex; width: max-content; align-items: center; animation: ticker 24s linear infinite; font: 800 1.15rem "Barlow Condensed"; letter-spacing: .04em; will-change: transform; }
.ticker-group { display: flex; flex-shrink: 0; min-width: 100vw; justify-content: space-around; align-items: center; gap: 2rem; padding-right: 2rem; }
.ticker-group span, .ticker-group b { flex-shrink: 0; }
@keyframes ticker { to { transform: translateX(-50%); } }

.intro { min-height: 80vh; display: grid; grid-template-columns: 1.35fr 1fr; gap: 8vw; padding: 8vw 3vw; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.intro h2, .section-heading h2, .find-copy h2 { font-size: clamp(4rem, 7vw, 8rem); }
.intro-copy { max-width: 34rem; padding-top: 3rem; }
.intro-copy p { line-height: 1.7; }
.intro-copy .lead { font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.35; font-weight: 500; margin-top: 0; }
.island-mark { position: absolute; bottom: -13vw; left: 25%; width: 38vw; aspect-ratio: 1.6; background: var(--green); border-radius: 51% 49% 62% 38% / 61% 39% 61% 39%; transform: rotate(-12deg); display: flex; align-items: center; justify-content: center; flex-direction: column; font: 700 1rem "Barlow Condensed"; }
.island-mark span { transform: rotate(12deg); }

.beers { padding: 8vw 3vw; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 5vw; }
.section-heading > p { max-width: 28rem; line-height: 1.6; }
.beer-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ink); }
.beer-card { min-height: 44rem; padding: 1rem; border-right: 1px solid var(--ink); display: flex; flex-direction: column; }
.future-beer { position: relative; }
.future-beer .mini-can { opacity: .58; }
.coming-label { position: absolute; z-index: 2; top: 1rem; left: 1rem; right: 1rem; padding: .7rem; color: var(--paper); background: var(--ink); text-align: center; text-transform: uppercase; font: 800 .9rem "Barlow Condensed"; letter-spacing: .12em; }
.future-note { border-top: 1px solid var(--ink); padding-top: .8rem; margin-top: auto; text-transform: uppercase; font: 700 .85rem "Barlow Condensed"; letter-spacing: .08em; }
.beer-card:last-child { border-right: 0; }
.mini-can { width: 70%; margin: 1.5rem auto 2.5rem; aspect-ratio: .54; border-radius: 12% 12% 9% 9%; background: rgba(255,255,255,.32); box-shadow: inset -10px 0 18px rgba(0,0,0,.1), inset 8px 0 16px rgba(255,255,255,.25), 0 15px 20px rgba(11,35,25,.15); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .3s; }
.beer-card:hover .mini-can { transform: rotate(3deg) translateY(-8px); }
.mini-can strong { font-size: clamp(5rem, 7.5vw, 8rem); }
.mini-can span { margin-top: 1.3rem; font: 800 1rem "Barlow Condensed"; }
.beer-meta { display: flex; justify-content: space-between; border-top: 1px solid var(--ink); padding-top: .6rem; font: 700 .85rem "Barlow Condensed"; }
.beer-card h3 { font-size: clamp(3.2rem, 4vw, 5rem); line-height: 1; margin-top: 1rem; }
.beer-card p { line-height: 1.5; min-height: 4.5rem; }
.detail-button { border: 0; border-top: 1px solid var(--ink); background: transparent; padding: .8rem 0 0; margin-top: auto; text-align: left; cursor: pointer; text-transform: uppercase; font: 700 .85rem "Barlow Condensed"; }
.card-cream { background: var(--cream); }.card-blue { background: var(--blue); }.card-yellow { background: var(--yellow); }.card-green { background: var(--green); }

.manifesto { min-height: 90vh; padding: 5vw 3vw 3vw; color: var(--paper); background: var(--ink); display: flex; flex-direction: column; text-align: center; justify-content: space-between; }
.manifesto > p { font: 700 .9rem "Barlow Condensed"; text-transform: uppercase; letter-spacing: .16em; }
.manifesto h2 { font-size: clamp(5rem, 13vw, 14rem); line-height: .94; }
.manifesto-footer { display: flex; justify-content: space-between; border-top: 1px solid rgba(243,240,233,.35); padding-top: 1rem; font: 600 .85rem "DM Sans"; }

.find-us { display: grid; grid-template-columns: 1fr 1fr; min-height: 75vh; }
.find-copy { padding: 8vw 3vw; display: flex; flex-direction: column; align-items: flex-start; }
.find-copy p:not(.section-number) { max-width: 29rem; line-height: 1.6; margin: 2rem 0; }
.button { display: inline-block; border: 1px solid var(--ink); padding: 1rem 1.4rem; text-transform: uppercase; font: 700 1rem "Barlow Condensed"; transition: .2s; }
.button:hover { color: var(--paper); background: var(--ink); }
.map-card { background: var(--blue); position: relative; overflow: hidden; }
.map-card:before, .map-card:after, .map-water { content: ""; position: absolute; border: 1px solid rgba(11,35,25,.18); border-radius: 50%; }
.map-card:before { width: 70%; height: 35%; left: -15%; top: 10%; }
.map-card:after { width: 85%; height: 45%; right: -30%; bottom: 5%; }
.map-water { width: 50%; height: 30%; right: 5%; top: 12%; }
.island { position: absolute; background: var(--green); filter: drop-shadow(8px 8px 0 rgba(11,35,25,.14)); }
.island-one { width: 55%; height: 36%; left: 20%; top: 27%; border-radius: 71% 29% 48% 52% / 48% 48% 52% 52%; transform: rotate(-20deg); }
.island-two { width: 28%; height: 18%; right: -4%; bottom: 16%; border-radius: 50%; transform: rotate(16deg); }
.map-pin { position: absolute; z-index: 2; top: 42%; left: 44%; font: 800 .8rem "Barlow Condensed"; letter-spacing: .08em; display: flex; gap: .5rem; align-items: center; }
.map-pin span { display: block; width: 15px; height: 15px; border-radius: 50%; background: var(--pink); border: 3px solid var(--ink); box-shadow: 0 0 0 5px var(--paper); }
.map-card p { position: absolute; left: 1rem; bottom: .5rem; font: 800 1.2rem "Barlow Condensed"; letter-spacing: .18em; opacity: .5; }

footer { padding: 3vw; color: var(--paper); background: var(--ink); }
.footer-wordmark { font-size: clamp(7rem, 22vw, 24rem); letter-spacing: -.09em; line-height: .8; border-bottom: 1px solid rgba(243,240,233,.35); overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; padding-top: 2rem; font-size: .85rem; line-height: 1.5; }
.footer-grid div { display: flex; flex-direction: column; }
.footer-grid p:last-child { text-align: right; }

.beer-dialog { width: min(92vw, 32rem); border: 1px solid var(--ink); padding: 3rem; color: var(--ink); background: var(--paper); }
.beer-dialog::backdrop { background: rgba(11,35,25,.72); backdrop-filter: blur(4px); }
.beer-dialog h2 { font-size: 5rem; }
.close-dialog { position: absolute; top: .7rem; right: .9rem; border: 0; background: transparent; font-size: 2rem; cursor: pointer; }
.dialog-copy { line-height: 1.6; }
.taste-bars { display: grid; gap: .6rem; margin-top: 2rem; }
.taste-row { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; align-items: center; text-transform: uppercase; font: 700 .8rem "Barlow Condensed"; }
.bar { height: 8px; border: 1px solid var(--ink); }
.bar span { display: block; height: 100%; background: var(--ink); }

@media (max-width: 900px) {
  .site-header { height: 68px; }
  .menu-button { display: block; }
  .site-nav { display: none; position: absolute; top: 68px; left: 0; width: 100%; padding: 2rem 3vw; background: var(--paper); border-bottom: 1px solid var(--ink); flex-direction: column; }
  .site-nav.open { display: flex; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 80vh; padding: 4rem 5vw 2rem; }
  h1 { font-size: clamp(5rem, 24vw, 8rem); }
  .hero-stage { min-height: 60vh; padding: 10vw 2vw 7vw; gap: 1vw; }
  .can { width: 23%; }
  .hero-stage-two { gap: 8vw; }
  .hero-stage-two .can { width: 31%; }
  .can strong { font-size: 14vw; }
  .can p { font-size: 2.4vw; margin: 1.3rem 0 .5rem; }
  .can small { font-size: 1.4vw; }
  .intro, .find-us { grid-template-columns: 1fr; }
  .intro { min-height: 95vh; padding: 5rem 5vw; }
  .island-mark { width: 70vw; bottom: -16vw; left: 15%; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 2rem; }
  .beers { padding: 5rem 5vw; }
  .beer-grid { grid-template-columns: 1fr 1fr; }
  .beer-card:nth-child(2) { border-right: 0; }
  .beer-card:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
  .mini-can strong { font-size: 16vw; }
  .manifesto { min-height: 70vh; padding: 4rem 5vw 2rem; }
  .find-copy { padding: 5rem 5vw; }
  .map-card { min-height: 60vh; }
}

@media (max-width: 560px) {
  .hero-copy { min-height: 72vh; }
  .hero-stage { min-height: 49vh; }
  .can { border-radius: 7% 7% 5% 5%; }
  .can p { margin: .9rem 0 .3rem; }
  .can small { display: none; }
  .beer-grid { grid-template-columns: 1fr; }
  .beer-card { min-height: 36rem; border-right: 0; border-bottom: 1px solid var(--ink); }
  .beer-card:last-child { border-bottom: 0; }
  .mini-can { width: 54%; }
  .mini-can strong { font-size: 28vw; }
  .manifesto h2 { font-size: 20vw; }
  .manifesto-footer, .footer-grid { grid-template-columns: 1fr; flex-direction: column; gap: .6rem; }
  .footer-grid { display: grid; }
  .footer-grid p:last-child { text-align: left; }
  .footer-wordmark { font-size: 30vw; }
}