:root {
  --red: #ed3023;
  --red-deep: #d92721;
  --gold: #cda052;
  --gold-light: #d9b367;
  --cream: #fff8e9;
  --charcoal: #392b35;
  --ink: #372630;
  --page-width: 1440px;
  --font-display: "Montserrat", "Arial Black", Arial, sans-serif;
  --font-narrow: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--cream); font-family: var(--font-display); background: var(--cream); }
img { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible { outline: 3px solid #1b5dfb; outline-offset: 5px; }
.skip-link { position:absolute; z-index:100; top:-100px; left:12px; padding:12px 16px; background:#fff; color:#000; }
.skip-link:focus { top:12px; }
.content-shell { position:relative; width:min(100% - 88px, var(--page-width)); margin-inline:auto; }
.red-paper, .gold-paper, .dark-paper { position:relative; isolation:isolate; }
.red-paper { background-color:var(--red); background-image:radial-gradient(ellipse at 48% 45%,rgba(255,104,62,.16),transparent 70%),url('../images/grain.png'); background-blend-mode:normal,soft-light; }
.gold-paper { background-color:var(--gold); background-image:radial-gradient(ellipse at center,rgba(244,206,115,.25),transparent 72%),url('../images/grain.png'); background-blend-mode:normal,soft-light; }
.dark-paper { background-color:var(--charcoal); background-image:linear-gradient(135deg,rgba(25,14,24,.30),rgba(104,84,95,.16)),url('../images/grain.png'); background-blend-mode:normal,soft-light; }

/* HERO / NAV */
.hero { height:max(650px, 64vw); overflow:hidden; }
.hero::after { content:""; pointer-events:none; position:absolute; z-index:1; inset:auto 0 0; height:24%; background:linear-gradient(to bottom,transparent,rgba(106,0,4,.09)); }
.site-nav { position:absolute; top:24px; left:0; right:0; z-index:7; display:flex; align-items:center; justify-content:space-between; padding-inline:clamp(26px,4vw,62px); }
.nav-identity { text-decoration:none; color:var(--red-deep); background:var(--cream); font-family:var(--font-display); font-size:20px; font-weight:800; letter-spacing:-.055em; line-height:1; border-radius:50px; padding:10px 15px 9px; }
.nav-links { display:flex; align-items:center; gap:clamp(50px,10.5vw,180px); }
.nav-links a { font-family:var(--font-narrow); text-transform:uppercase; text-decoration:none; font-weight:700; font-size:19px; letter-spacing:.01em; }
.nav-links a:hover, .nav-links a:focus-visible { text-decoration:underline; text-underline-offset:7px; }
.hero-logo-wrap { position:absolute; z-index:3; width:min(46%,650px); top:clamp(60px,6vw,85px); left:50%; transform:translateX(-50%); }
.hero-wordmark { width:100%; height:auto; }
.hero-products { position:absolute; z-index:2; width:100%; height:auto; max-width:none; bottom:-2px; left:0; }

/* STATEMENT SECTION */
.statement { min-height:clamp(540px, 51.5vw, 760px); overflow:hidden; }
.statement-headline { position:relative; z-index:2; padding:0; margin:0; width:62%; padding-top:9%; padding-left:4.8%; font-size:clamp(73px,9.3vw,143px); font-weight:900; line-height:.86; letter-spacing:-.063em; }
.statement-can { position:absolute; z-index:1; right:5%; bottom:0; height:105%; width:auto; max-width:none; }

/* SHOPS */
.merch { overflow:hidden; padding:112px 0 135px; }
.watermark { position:absolute; z-index:0; pointer-events:none; opacity:.075; width:88%; left:10%; top:10%; max-width:none; transform:rotate(-12deg); filter:grayscale(1); }
.section-eyebrow { margin:0 0 68px; font-size:clamp(22px,2.25vw,32px); letter-spacing:.035em; font-weight:700; }
.merch-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,44px); }
.merch-card { display:block; background:#f0f0ee; border-radius:6px; overflow:hidden; aspect-ratio:1.07; transition:transform .18s ease, box-shadow .18s ease; }
.merch-card:hover { transform:translateY(-5px); box-shadow:0 12px 20px #0003; }
.merch-card img { width:100%; height:100%; object-fit:cover; }

/* BEER */
.beers { text-align:center; overflow:hidden; padding:38px 0 90px; }
.beer-heading { font-family:var(--font-display); color:#fff6e4; font-size:clamp(70px,8.5vw,126px); letter-spacing:.03em; line-height:1; font-weight:800; margin:0 0 clamp(22px,2.3vw,34px); -webkit-text-stroke:5px #cfa34c; paint-order:stroke fill; text-shadow:3px 3px 0px #a73e18; }
.beer-grid { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:0; }
.beer-variant { min-width:0; display:flex; flex-direction:column; align-items:center; }
.beer-photo { width:100%; height:auto; max-width:690px; object-fit:contain; }
.beer-variant h3 { margin:4px 0 11px; font:normal clamp(35px,3.5vw,55px)/1.1 Georgia,"Times New Roman",serif; letter-spacing:-.045em; }
.beer-abv { margin:0; font-size:clamp(16px,1.3vw,20px); font-weight:600; }
.beer-packs { margin:0; font-size:clamp(13px,1.16vw,18px); font-weight:500; }
.beer-description { margin:40px auto 0; max-width:1080px; font-size:clamp(17px,1.55vw,23px); line-height:1.44; letter-spacing:.015em; font-weight:500; }

/* LOCATOR SECTION */
.locator-section { color:#fff8ec; text-align:center; border-top:9px solid #fff4d5; border-bottom:9px solid #fff4d5; padding:82px 0 94px; }
.finder-shell { max-width:1050px; }
.locator-section h2 { font-size:clamp(48px,6.8vw,92px); margin:0; font-weight:900; line-height:1; letter-spacing:-.04em; }
.finder-intro { font-size:clamp(18px,2vw,25px); font-weight:600; margin:14px 0 42px; }
.finder-container { background:rgba(255,252,245,.97); color:#4b3b3d; width:100%; border:2px solid rgba(255,255,255,.75); border-radius:12px; box-shadow:0 17px 35px rgba(85,43,12,.16); min-height:310px; display:block; padding:32px; }
.finder-placeholder { min-height:244px; display:flex; flex-direction:column; justify-content:center; }
.finder-placeholder-title { font-size:23px; font-weight:700; margin:0 0 12px; }
.finder-placeholder-detail { font-size:15px; line-height:1.7; font-weight:500; margin:0 auto; max-width:550px; }

/* BILLBOARD */
.billboard { width:100%; overflow:hidden; line-height:0; }
.billboard img { display:block; width:100%; height:auto; }

/* SOCIAL */
.social { padding:76px 0 119px; overflow:hidden; border-top:12px solid #cca24f; border-bottom:12px solid #cca24f; }
.social .section-eyebrow { margin-bottom:35px; }
.watermark-social { transform:rotate(-12deg); left:17%; top:5%; width:78%; }
.social-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.5vw,23px); }
.social-grid a { display:block; border-radius:7px; overflow:hidden; aspect-ratio:1; transition:transform .18s ease; }
.social-grid a:hover { transform:translateY(-5px); }
.social-grid img { height:100%; width:100%; object-fit:cover; }

/* FOOTER */
.site-footer { background:#fbf8ed; color:#2a2026; min-height:224px; padding:40px 4.5% 36px; }
.footer-top { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.footer-marks { display:flex; gap:clamp(12px,1.4vw,25px); align-items:center; min-width:0; }
.footer-main-mark { display:flex; flex-direction:column; align-items:center; width:95px; }
.footer-main-mark img { width:100%; height:auto; }
.footer-main-mark small { font-family:var(--font-narrow); font-size:9px; line-height:1; font-weight:700; color:#c91e16; margin-top:-5px; }
.footer-agd-badge { border-radius:30px; background:#f22720; color:#fff8ec; font:800 15px/1 var(--font-display); padding:8px 12px; }
.footer-script { color:#e42b1e; font:italic 27px/1 Georgia,"Times New Roman",serif; white-space:nowrap; }
.footer-classic, .footer-light { padding:7px 17px 8px; border-radius:40px; background:#e7261d; color:#fff5e5; font:normal 17px/1 Georgia,"Times New Roman",serif; white-space:nowrap; }
.footer-light { background:#34437e; }
.footer-social { display:flex; gap:11px; align-items:center; color:#c9962d; }
.footer-social a { display:flex; color:inherit; width:38px; height:38px; align-items:center; justify-content:center; text-decoration:none; }
.footer-social a:hover { color:#a46d1d; }
.footer-social svg { width:34px; height:34px; }
.footer-social .footer-tiktok { width:42px; height:50px; flex-direction:column; justify-content:center; }
.footer-tiktok svg { width:23px; height:23px; }
.footer-tiktok span { font:600 9px var(--font-narrow); }
.footer-tagline { margin:57px 0 0; font:normal 21px Georgia,"Times New Roman",serif; letter-spacing:-.035em; text-align:center; }

@media (min-width:1440px) {
  .hero-products { width:100%; }
}
@media (max-width:1000px) {
  .content-shell { width:min(100% - 52px, var(--page-width)); }
  .hero { height:clamp(530px,68vw,680px); min-height:0; }
  .site-nav { top:16px; }
  .nav-links { gap:clamp(22px,6.5vw,90px); }
  .statement-headline { font-size:8.2vw; }
  .statement-can { right:1%; }
  .merch { padding:75px 0 90px; }
  .section-eyebrow { margin-bottom:38px; }
  .social { padding:60px 0 90px; }
  .site-footer { padding-inline:25px; }
  .footer-marks { gap:11px; }
  .footer-script { font-size:20px; }
  .footer-classic,.footer-light { font-size:14px; padding:7px 12px; }
}
@media (max-width:700px) {
  .content-shell { width:calc(100% - 36px); }
  .hero { height: min(125vw,750px); min-height:400px; }
  .site-nav { top:16px; padding-inline:18px; }
  .nav-identity { padding:7px 10px 8px; font-size:15px; }
  .nav-links { gap:clamp(15px,5.5vw,31px); }
  .nav-links a { font-size:16px; }
  .hero-logo-wrap { top:15%; width:83%; }
  .hero-products { bottom:0; width:148%; max-width:none; left:50%; transform:translateX(-50%); }

  .statement { display:flex; flex-direction:column; min-height:0; padding:56px 0 0; }
  .statement-headline { width:100%; padding:0 6.5%; font-size:clamp(56px,13.1vw,94px); letter-spacing:-.065em; line-height:.9; }
  .statement-can { position:relative; right:auto; bottom:auto; align-self:flex-end; width:70%; height:auto; margin:26px 0 -1px; }

  .merch { padding:54px 0 66px; }
  .merch-grid { gap:14px; }
  .merch-card { aspect-ratio:1.07; }
  .section-eyebrow { font-size:21px; margin-bottom:24px; }
  .watermark-merch { width:150%; left:-20%; top:25%; }

  .beers { padding:40px 0 65px; }
  .beer-heading { font-size:clamp(62px,12vw,92px); -webkit-text-stroke:3px #cfa34c; margin:0 0 26px; }
  .beer-grid { grid-template-columns:1fr; gap:32px; }
  .beer-variant { width:100%; }
  .beer-photo { max-width:480px; width:95%; }
  .beer-variant h3 { font-size:43px; margin:-4px 0 8px; }
  .beer-packs { font-size:13px; }
  .beer-description { margin-top:38px; font-size:16px; line-height:1.55; padding:0 8px; }
  .desktop-break { display:none; }

  .locator-section { padding:62px 0 70px; }
  .finder-container { padding:28px 22px; min-height:260px; }
  .finder-placeholder { min-height:202px; }
  .finder-placeholder-title { font-size:19px; }
  .finder-intro { margin-bottom:24px; }

  .billboard { aspect-ratio:1.2; }
  .billboard img { width:100%; height:100%; object-fit:cover; object-position:center; }

  .social { padding:50px 0 65px; }
  .social-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
  .social .section-eyebrow { margin-bottom:27px; }
  .site-footer { min-height:0; padding:35px 18px; }
  .footer-top { flex-direction:column; gap:27px; }
  .footer-marks { justify-content:center; flex-wrap:wrap; column-gap:13px; row-gap:17px; }
  .footer-main-mark { width:82px; }
  .footer-tagline { margin:27px 0 0; font-size:18px; }
}
@media (max-width:390px) {
  .hero { min-height:390px; }
  .nav-links { gap:13px; }
  .nav-links a { font-size:14px; }
  .statement-headline { font-size:13vw; }
  .merch-grid { gap:9px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .merch-card,.social-grid a { transition:none; }
}
