@property --fill { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --cream: #f3eddf;
  --paper: #faf6ed;
  --ink: #171815;
  --muted: #6e6b64;
  --copper: #bd643b;
  --copper-dark: #8d4529;
  --sage: #63705c;
  --line: #dcd2c1;
  --display: 'Newsreader', Georgia, serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'DM Mono', monospace;
  --page: min(92vw, 1440px);
  --radius: clamp(20px, 2vw, 34px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--body); overflow-x: clip; }
body::selection { background: var(--copper); color: var(--paper); }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
canvas { display: block; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 10px 14px; background: var(--ink); color: white; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.grain { position: fixed; inset: -80%; z-index: 90; pointer-events: none; opacity: .055; animation: grain .22s steps(2) infinite; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
@keyframes grain { 0% { transform: translate(2%, -1%); } 50% { transform: translate(-1%, 2%); } 100% { transform: translate(1%, 1%); } }
.progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 110; background: transparent; }
.progress span { display: block; height: 100%; width: var(--fill); background: var(--copper); box-shadow: 0 0 14px #d78358; }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 84px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: var(--page); margin: auto; color: var(--paper); transition: color .35s, transform .45s, background .35s, padding .35s, width .35s; }
.site-header.scrolled { top: 10px; width: min(94vw, 1480px); height: 64px; padding: 0 12px 0 20px; border: 1px solid color-mix(in oklab, var(--line) 76%, transparent); border-radius: 999px; color: var(--ink); background: color-mix(in oklab, var(--paper) 88%, transparent); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 12px 50px #4e311b12; }
.site-header.hidden { transform: translateY(-130%); }
.brand-lockup { display: flex; align-items: center; gap: 11px; width: max-content; }
.brand-lockup img { width: 45px; height: 45px; border-radius: 11px; box-shadow: 0 8px 24px #0002; }
.brand-lockup span,.footer-brand span { display: flex; flex-direction: column; line-height: 1; }
.brand-lockup b,.footer-brand b { font: 600 17px/1 var(--body); letter-spacing: .16em; }
.brand-lockup small,.footer-brand small { margin-top: 5px; font: 500 7px/1 var(--mono); letter-spacing: .13em; color: var(--copper); }
.wordmark { width: 72px; display: block; }
.wordmark svg { width: 100%; overflow: visible; }
.wordmark path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: square; stroke-linejoin: round; }
.site-header nav { display: flex; gap: 34px; font-size: 12px; font-weight: 500; letter-spacing: .06em; }
.site-header nav a { position: relative; }
.site-header nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px; background: currentColor; transition: right .3s; }
.site-header nav a:hover::after { right: 0; }
.header-cta { justify-self: end; display: flex; align-items: center; gap: 20px; min-width: 172px; padding: 12px 14px 12px 20px; border: 1px solid currentColor; border-radius: 99px; font-size: 12px; font-weight: 600; }
.header-cta i { width: 28px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: currentColor; color: var(--ink); font-style: normal; }
.scrolled .header-cta { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.scrolled .header-cta i { background: var(--copper); color: white; }

.hero { position: relative; min-height: 100svh; isolation: isolate; overflow: hidden; background: #171612; color: var(--paper); }
#brew-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; opacity: .96; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, #11120ef2 0%, #181611a6 40%, transparent 74%), linear-gradient(0deg, #171612 0%, transparent 30%); }
.hero-glow { position: absolute; z-index: -1; width: 55vw; height: 55vw; right: -12vw; top: -10vw; border-radius: 50%; background: #d9793540; filter: blur(80px); mix-blend-mode: screen; }
.hero-copy { width: var(--page); min-height: 100svh; margin: auto; display: flex; flex-direction: column; justify-content: center; padding: 140px 0 62px; position: relative; z-index: 3; }
.eyebrow { margin: 0 0 26px; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--copper-dark); }
.eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; margin: 0 12px 3px 0; background: currentColor; }
.eyebrow.light { color: #d79874; }
.hero-title { margin: 0; max-width: 1030px; font: 500 clamp(67px, 9.1vw, 150px)/.82 var(--display); letter-spacing: -.055em; }
.title-line { display: block; opacity: 0; transform: translateY(110%) rotate(3deg); animation: title-in 1.25s cubic-bezier(.16, 1, .3, 1) forwards; }
.title-line:nth-child(2) { animation-delay: .1s; }
.title-italic { font-weight: 400; font-style: italic; color: #e0a17c; padding-left: .32em; }
@keyframes title-in { to { opacity: 1; transform: translateY(0) rotate(0); } }
.hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: clamp(42px, 8vh, 90px); max-width: 890px; }
.hero-bottom > p { max-width: 580px; margin: 0; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.65; color: #d7d0c3; }
.round-cta { flex: 0 0 122px; aspect-ratio: 1; border: 1px solid #7f796d; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; font-size: 11px; text-align: center; transition: background .35s, color .35s, border-color .35s; }
.round-cta b { font-size: 20px; font-weight: 400; }
.round-cta:hover { background: var(--copper); border-color: var(--copper); }
.hero-vessel { position: absolute; z-index: 1; right: 5vw; top: 17%; width: clamp(230px, 28vw, 470px); height: 70%; filter: drop-shadow(0 50px 40px #0008); transform: rotate(2deg); }
.vessel-neck { position: absolute; top: 0; left: 38%; width: 24%; height: 15%; border: 1px solid #ffffff40; border-bottom: 0; border-radius: 20px 20px 0 0; background: linear-gradient(90deg, #ffffff0d, #fff4, #ffffff08); backdrop-filter: blur(3px); }
.vessel-glass { position: absolute; inset: 13% 0 5%; overflow: hidden; border: 2px solid #ffffff4f; border-radius: 34% 34% 22% 22% / 18% 18% 12% 12%; background: linear-gradient(90deg, #fff1, transparent 18% 72%, #fff2); box-shadow: inset 20px 0 40px #fff1, inset -20px 0 40px #0002; }
.vessel-beer { position: absolute; inset: 35% 0 0; background: linear-gradient(#e89a47, #a7431c 45%, #4b1b0e); opacity: .88; animation: beer-wave 4s ease-in-out infinite alternate; transform-origin: bottom; }
.vessel-beer::before { content: ''; position: absolute; left: -10%; top: -12px; width: 120%; height: 30px; border-radius: 50%; background: #e5a657; }
.vessel-foam { position: absolute; top: 32%; left: 0; width: 100%; height: 9%; background: linear-gradient(#f5e3b9, #ddb06b); filter: url('#none'); border-radius: 50% 50% 25% 25%; opacity: .85; }
.vessel-glass i { position: absolute; z-index: 2; bottom: -20px; width: 8px; height: 8px; border: 1px solid #ffe4ae; border-radius: 50%; animation: bubble-up 4s infinite ease-in; }
.vessel-glass i:nth-of-type(1) { left: 20%; animation-delay: 0s; }.vessel-glass i:nth-of-type(2) { left: 42%; width: 5px; height: 5px; animation-delay: -2s; }.vessel-glass i:nth-of-type(3) { left: 68%; width: 11px; height: 11px; animation-delay: -1s; }.vessel-glass i:nth-of-type(4) { left: 78%; width: 4px; height: 4px; animation-delay: -3s; }
.vessel-shadow { position: absolute; left: 12%; bottom: 0; width: 76%; height: 5%; background: #0008; filter: blur(14px); border-radius: 50%; }
@keyframes beer-wave { to { transform: rotate(-1.6deg) scaleY(1.02); } }
@keyframes bubble-up { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(-340px) scale(1.2); opacity: 0; } }
.hero-note { position: absolute; right: 3vw; bottom: 32px; writing-mode: vertical-rl; display: flex; gap: 18px; font: 10px var(--mono); letter-spacing: .12em; color: #b9afa0; }

.section-pad { width: var(--page); margin: auto; padding-block: clamp(110px, 15vw, 230px); }
.intro-kicker { display: flex; align-items: center; gap: 18px; font: 11px var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--copper-dark); }
.intro-kicker span { width: 8px; height: 8px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 7px #bd643b18; }
.statement { max-width: 1240px; margin: 55px 0 70px; font: 500 clamp(50px, 7.5vw, 118px)/.96 var(--display); letter-spacing: -.045em; }
.split-reveal { background: linear-gradient(90deg, var(--ink) var(--fill), #c8bdab var(--fill)); background-clip: text; -webkit-background-clip: text; color: transparent; }
.intro-foot { display: grid; grid-template-columns: 1.3fr .7fr; gap: 12vw; margin-left: 31%; }
.intro-foot p { margin: 0; max-width: 520px; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.7; }
.intro-foot .aside-copy { font: italic 400 clamp(17px, 1.5vw, 22px)/1.5 var(--display); color: var(--muted); }

.brew-photo-break { position: relative; width: min(94vw, 1760px); min-height: min(79vw, 940px); margin: 0 auto clamp(100px, 14vw, 210px); overflow: hidden; border-radius: 3px; background: #1b1915; color: var(--paper); }
.brew-photo-break::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#11100dda 0%,transparent 62%),linear-gradient(0deg,#11100d88,transparent 45%); }
.brew-photo-break img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.8,.2,1); }
.brew-photo-break:hover img { transform: scale(1.025); }
.brew-photo-break figcaption { position: absolute; left: clamp(28px, 6vw, 100px); bottom: clamp(30px, 7vw, 110px); z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.brew-photo-break figcaption span,.brew-editorial figcaption span { font: 9px var(--mono); letter-spacing: .16em; color: #e1a27d; }
.brew-photo-break figcaption b { margin: 18px 0; font: 500 clamp(52px, 8vw, 118px)/.88 var(--display); letter-spacing: -.045em; }
.brew-photo-break figcaption small { color: #d2cbc0; font-size: 13px; }

.brew-story { position: relative; background: var(--ink); color: var(--paper); }
.story-sticky { position: sticky; top: 0; min-height: 100svh; width: var(--page); margin: auto; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; overflow: hidden; }
.story-copy { position: relative; align-self: center; width: 100%; max-width: 510px; }
.story-intro { transition: opacity .32s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.story-copy h2 { margin: 0; font: 500 clamp(56px, 6.2vw, 96px)/.92 var(--display); letter-spacing: -.045em; }
.story-copy h2 em { font-weight: 400; color: #d99771; }
.story-lede { max-width: 430px; margin: 35px 0; color: #b8b2a7; font-size: 17px; line-height: 1.7; }
.story-stage-copy { position: absolute; left: 0; top: 52px; width: 100%; max-width: 470px; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .32s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.story-stage-copy > span { font: 10px var(--mono); letter-spacing: .15em; color: #d78861; }
.story-stage-copy h3 { margin: 25px 0 17px; font: 500 clamp(36px, 4vw, 58px)/1 var(--display); }
.story-stage-copy p { margin: 0; max-width: 430px; color: #b5afa4; font-size: 15px; line-height: 1.7; }
.story-sticky.in-stages .story-intro { opacity: 0; transform: translateY(-18px); }
.story-sticky.in-stages .story-stage-copy { opacity: 1; transform: none; }
.story-index { width: 180px; display: flex; align-items: center; gap: 12px; font: 11px var(--mono); color: #938b7d; }
.story-index span:first-child { color: #df9d77; font-size: 16px; }
.story-index i { flex: 1; height: 1px; background: linear-gradient(90deg, #d2764b calc(var(--stage-progress, 0) * 100%), #4b4a45 0); transition: background .5s; }
.phone-wrap { justify-self: center; position: relative; width: min(70vw, 680px); height: min(88vh, 820px); display: grid; place-items: center; }
.phone-aura { position: absolute; width: 75%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #bd643b36, transparent 68%); filter: blur(30px); animation: aura 6s ease-in-out infinite alternate; }
@keyframes aura { to { transform: scale(1.18); opacity: .65; } }
.phone { position: relative; z-index: 2; width: min(350px, 52vh); aspect-ratio: .505; border: 7px solid #090a08; border-radius: 50px; padding: 10px; background: #090a08; box-shadow: 0 60px 100px #0009, inset 0 0 0 1px #ffffff22; transform: perspective(1200px) rotateY(-5deg) rotateX(2deg); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.phone:hover { transform: perspective(1200px) rotateY(0) rotateX(0) scale(1.01); }
.phone::before { content: ''; position: absolute; top: 13px; left: 50%; z-index: 3; transform: translateX(-50%); width: 31%; height: 25px; border-radius: 20px; background: #0a0a09; }
.phone-top { height: 26px; padding: 0 13px; display: flex; justify-content: space-between; align-items: center; color: #171815; background: var(--cream); border-radius: 35px 35px 0 0; font: 600 9px var(--body); }
.phone-top i { width: 55px; height: 17px; border-radius: 12px; background: #090a08; }
.phone-top b { font-size: 7px; }
.phone-head { height: 54px; padding: 0 13px; display: flex; justify-content: space-between; align-items: center; background: var(--cream); color: var(--ink); }
.phone-head strong { font: 600 20px var(--display); letter-spacing: .08em; }
.phone-screen { position: relative; height: calc(100% - 80px); border-radius: 0 0 35px 35px; background: var(--cream); color: var(--ink); overflow: hidden; }
.phone-view { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 22px 22px 18px; opacity: 0; transform: translateY(14px) scale(.985); pointer-events: none; transition: opacity .28s ease, transform .48s cubic-bezier(.2,.8,.2,1); }
.phone-view.active { z-index: 2; opacity: 1; transform: none; pointer-events: auto; }
.stage-chip { padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; font: 500 9px var(--mono); letter-spacing: .14em; color: var(--copper-dark); }
.stage-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 17px 0 12px; border-radius: 50%; background: #ead8c3; color: var(--copper-dark); font-size: 26px; }
.phone-overline { margin: 0; font: 10px var(--mono); letter-spacing: .15em; color: var(--muted); }
.phone-view h3 { margin: 7px 0 5px; font: 600 28px/1 var(--display); }
.phone-copy { min-height: 61px; margin: 5px 0 10px; text-align: center; color: var(--muted); font-size: 10px; line-height: 1.55; }
.timer-ring { position: relative; width: 122px; height: 122px; }
.timer-ring svg { width: 100%; transform: rotate(-90deg); }
.timer-ring circle { fill: none; stroke: #ded4c2; stroke-width: 4; }
.timer-ring .timer-progress { stroke: var(--copper); stroke-dasharray: 327; stroke-dashoffset: 76; stroke-linecap: round; transition: stroke-dashoffset .8s; }
.timer-ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.timer-ring b { font: 500 23px var(--mono); }
.timer-ring span { margin-top: 4px; font: 8px var(--mono); letter-spacing: .1em; color: var(--muted); }
.phone-view button { width: 100%; min-height: 48px; margin-top: auto; border: 0; border-radius: 14px; display: flex; justify-content: space-between; align-items: center; padding: 0 17px; background: var(--copper); color: white; font: 600 11px var(--body); }
.phone-view button i { font-style: normal; font-size: 17px; }
.screen-title { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
.screen-title small { font: 8px var(--mono); letter-spacing: .1em; color: var(--muted); }

/* Every chapter uses a genuinely different product screen, not a reskinned timer. */
.boil-view { align-items: stretch; }
.boil-view > h3 { max-width: 250px; margin: 11px 0 21px; font-size: 31px; }
.hop-now { position: relative; padding: 18px; border-radius: 16px; color: #fff7eb; background: var(--copper); box-shadow: 0 14px 30px #9a482c2b; }
.hop-now small { display: block; margin-bottom: 8px; font: 8px var(--mono); letter-spacing: .14em; opacity: .72; }
.hop-now b { display: block; font: 600 18px var(--display); }
.hop-now span { display: block; margin-top: 5px; font-size: 9px; opacity: .8; }
.hop-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 14px 3px; border-bottom: 1px solid var(--line); }
.hop-row > i { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: #eadfce; font: 500 9px var(--mono); font-style: normal; }
.hop-row span b, .hop-row span small { display: block; }
.hop-row span b { font-size: 10px; }.hop-row span small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.hop-row em { font: 7px var(--mono); font-style: normal; letter-spacing: .1em; color: var(--copper-dark); }

.chill-view .screen-title { margin-bottom: 11px; }
.snow-mark { display: grid; place-items: center; width: 58px; height: 58px; margin: 4px 0 12px; border-radius: 18px; background: #dce9e6; color: #426d6e; font-size: 25px; }
.chill-view h3 { font-size: 31px; }.temperature { margin: 14px 0 4px; line-height: 1; }.temperature b { font: 500 61px var(--mono); letter-spacing: -.08em; }.temperature span { margin-left: 3px; color: var(--muted); font: 20px var(--mono); }
.temp-track { position: relative; width: 100%; height: 7px; margin: 17px 0 13px; border-radius: 9px; background: #d8d2c7; }
.temp-track i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg,#6e9994,var(--copper)); }.temp-track em { position: absolute; top: 12px; left: 8%; font: 8px var(--mono); font-style: normal; color: var(--muted); }
.safety-note { margin: 17px 5px 10px; padding: 12px; border-radius: 12px; background: #e7dfd0; color: var(--muted); font-size: 9px; line-height: 1.45; }.safety-note b { color: var(--ink); }

.ferment-view { align-items: stretch; }.ferment-view .screen-title { margin-bottom: 15px; }.live-chip { color: #587155; border-color: #a8b7a2; }.ferment-view > h3 { margin-bottom: 2px; font-size: 29px; }.batch-name { margin: 0; color: var(--muted); font-size: 9px; }
.ferment-vessel { position: relative; width: 78px; height: 103px; margin: 16px auto 12px; border: 2px solid #c9b69e; border-radius: 15px 15px 24px 24px; overflow: hidden; }.ferment-vessel i { position: absolute; inset: 48% 3px 3px; border-radius: 0 0 19px 19px; background: linear-gradient(#d69a43,#b66b36); }.ferment-vessel span,.ferment-vessel b { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #f6e0ad; animation: bubble 2.4s infinite; }.ferment-vessel span { left: 25px; bottom: 18px; }.ferment-vessel b { right: 19px; bottom: 8px; animation-delay: -.9s; }
@keyframes bubble { to { transform: translateY(-42px); opacity: 0; } }
.stat-strip { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }.stat-strip span { padding: 10px 5px; text-align: center; border-right: 1px solid var(--line); }.stat-strip span:last-child { border: 0; }.stat-strip small,.stat-strip b { display: block; }.stat-strip small { font: 7px var(--mono); color: var(--muted); }.stat-strip b { margin-top: 3px; font: 500 12px var(--mono); }
.gravity-chart { margin: 11px 0 8px; }.gravity-chart svg { width: 100%; height: 47px; overflow: visible; }.gravity-chart path { fill: none; stroke: var(--copper); stroke-width: 2; }.gravity-chart .chart-fill { fill: #c0673b14; stroke: none; }.gravity-chart small { display: block; color: var(--muted); font-size: 8px; }

.package-view { align-items: stretch; }.package-view .screen-title { margin-bottom: 15px; }.package-view > h3 { text-align: center; font-size: 32px; }.package-view .phone-overline { text-align: center; }.package-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: 100%; margin-top: 7px; }.package-options > div { position: relative; min-height: 127px; padding: 15px 11px; border: 1px solid var(--line); border-radius: 15px; display: flex; flex-direction: column; }.package-options > .selected { border: 2px solid var(--copper); background: #f3e7d5; }.package-options i { font-size: 23px; font-style: normal; }.package-options b { margin-top: auto; font: 600 16px var(--display); }.package-options small { margin-top: 4px; color: var(--muted); font-size: 8px; }.package-options em { position: absolute; top: 9px; right: 9px; color: var(--copper); font-style: normal; }.carb-line { display: flex; justify-content: space-between; align-items: center; margin-top: 11px; padding: 12px; border-radius: 11px; background: #e9e0d1; }.carb-line small,.carb-line b { display: block; }.carb-line small { font: 7px var(--mono); color: var(--muted); }.carb-line b { margin-top: 2px; font: 500 13px var(--mono); }.carb-line > i { font: 7px var(--mono); font-style: normal; color: var(--copper-dark); }

.finished-view { padding: 13px 14px 18px; align-items: stretch; }.finished-hero { position: relative; min-height: 205px; padding: 17px; border-radius: 17px; overflow: hidden; color: #f8efe1; background: radial-gradient(circle at 76% 42%,#8f4c30,#24231f 48%); }.finished-hero small { font: 7px var(--mono); letter-spacing: .12em; opacity: .65; }.finished-hero h3 { position: absolute; left: 17px; bottom: 35px; margin: 0; font-size: 29px; }.finished-hero p { position: absolute; left: 17px; bottom: 13px; margin: 0; font-size: 9px; opacity: .65; }.beer-glass { position: absolute; top: 39px; right: 29px; width: 55px; height: 112px; border: 2px solid #f7e8ceaa; border-radius: 4px 4px 15px 15px; overflow: hidden; transform: rotate(4deg); }.beer-glass i { position: absolute; inset: 23% 4px 4px; border-radius: 3px 3px 11px 11px; background: linear-gradient(#f3dfaa 0 13%,#d78b31 14%); }.finished-stats { display: grid; grid-template-columns: 1fr 1fr 1.5fr; margin: 10px 0; border: 1px solid var(--line); border-radius: 11px; }.finished-stats span { padding: 9px 4px; text-align: center; border-right: 1px solid var(--line); }.finished-stats span:last-child { border: 0; }.finished-stats b,.finished-stats small { display: block; }.finished-stats b { font: 500 11px var(--mono); }.finished-stats span:last-child b { color: var(--copper); font-size: 8px; letter-spacing: -.1em; }.finished-stats small { margin-top: 3px; font: 6px var(--mono); color: var(--muted); }.finish-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.finish-actions span { min-height: 48px; padding: 9px; border-radius: 10px; display: flex; align-items: center; gap: 8px; background: #e9e0d1; }.finish-actions i { font-style: normal; color: var(--copper-dark); }.finish-actions b { font-size: 8px; }
.phone-home { position: absolute; bottom: 7px; left: 36%; width: 28%; height: 4px; border-radius: 4px; background: #111; }
.float-card { position: absolute; z-index: 4; padding: 16px 18px; border: 1px solid #ffffff1c; border-radius: 16px; background: #2a2925e6; box-shadow: 0 20px 50px #0005; backdrop-filter: blur(18px); }
.float-card small { display: block; font: 8px var(--mono); letter-spacing: .15em; color: #958e82; }
.float-temp { top: 24%; right: 0; }
.float-temp b { display: block; margin: 5px 0 3px; font: 500 21px var(--mono); color: #eee6d8; }
.float-temp span { font-size: 9px; color: #8fa285; }
.float-alert { left: 1%; bottom: 23%; display: flex; align-items: center; gap: 11px; }
.float-alert > i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--copper); font-style: normal; }
.float-alert b { display: block; margin-top: 5px; font-size: 10px; color: #eee6d8; }
.story-steps { position: relative; z-index: 4; width: 43%; margin-left: 5%; padding-top: 100vh; pointer-events: none; }
.story-step { min-height: 100vh; display: grid; grid-template-columns: 50px 1fr; gap: 20px; align-content: center; visibility: hidden; }
.story-step > span { font: 11px var(--mono); color: #d78861; }
.story-step h3 { margin: 0 0 14px; font: 500 clamp(29px, 3vw, 45px)/1.05 var(--display); }
.story-step p { margin: 0; max-width: 430px; font-size: 14px; line-height: 1.65; color: #b5afa4; }
.story-step.active { visibility: hidden; }

.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 70px; }
.section-heading h2 { margin: 0; max-width: 1000px; font: 500 clamp(52px, 6.5vw, 96px)/.95 var(--display); letter-spacing: -.045em; }
.section-heading h2 em { font-weight: 400; color: var(--copper-dark); }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feature { position: relative; min-height: 580px; overflow: hidden; padding: clamp(28px, 4vw, 60px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.feature-copy { position: relative; z-index: 2; max-width: 500px; }
.feature-copy > span { font: 10px var(--mono); letter-spacing: .15em; color: var(--copper-dark); }
.feature h3 { margin: 27px 0 19px; font: 500 clamp(37px, 4vw, 58px)/.98 var(--display); letter-spacing: -.035em; }
.feature p { max-width: 430px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.feature-wide { grid-column: 1 / -1; min-height: 680px; }

.brew-editorial { width: min(94vw, 1760px); min-height: 1150px; margin: 0 auto clamp(120px, 15vw, 240px); display: grid; grid-template-columns: .82fr .35fr .83fr; grid-template-rows: 230px 1fr 180px; gap: clamp(18px, 3vw, 52px); }
.brew-editorial figure { position: relative; margin: 0; overflow: hidden; background: #24211c; }
.brew-editorial figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#171612d9,transparent 48%); pointer-events: none; }
.brew-editorial figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.brew-editorial figure:hover img { transform: scale(1.035); }
.editorial-pint { grid-column: 1; grid-row: 1 / 4; }
.editorial-labels { grid-column: 2 / 4; grid-row: 2 / 4; }
.brew-editorial figcaption { position: absolute; left: clamp(22px, 3vw, 48px); right: 24px; bottom: clamp(23px, 3vw, 48px); z-index: 2; color: var(--paper); }
.brew-editorial figcaption b { display: block; margin-top: 11px; font: 500 clamp(25px, 3.2vw, 52px)/1 var(--display); }
.editorial-copy { grid-column: 2 / 4; grid-row: 1; align-self: end; display: grid; grid-template-columns: 1.1fr .9fr; gap: 45px; align-items: end; }
.editorial-copy .eyebrow { grid-column: 1 / -1; margin-bottom: -20px; }
.editorial-copy h2 { margin: 0; font: 500 clamp(45px, 5vw, 78px)/.9 var(--display); letter-spacing: -.045em; }
.editorial-copy h2 em { color: var(--copper-dark); font-weight: 400; }
.editorial-copy > p:last-child { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.recipe-stack { position: absolute; right: 5%; bottom: -13%; width: 56%; height: 90%; perspective: 1200px; }
.recipe-stack > div { position: absolute; width: 43%; aspect-ratio: .72; padding: 28px; border-radius: 10px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 30px 80px #3f251b27; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.recipe-stack small { font: 9px var(--mono); letter-spacing: .14em; }
.recipe-stack b { font: 500 clamp(23px, 2.4vw, 37px)/1 var(--display); }
.recipe-stack i { font: 11px var(--mono); font-style: normal; }
.recipe-stack div:nth-child(1) { z-index: 3; left: 28%; top: 4%; color: #42200e; background: #d7953e; transform: rotate(-5deg); }
.recipe-stack div:nth-child(2) { z-index: 2; right: 0; top: 17%; color: #f4eadd; background: #8a3f2c; transform: rotate(8deg); }
.recipe-stack div:nth-child(3) { left: 0; top: 23%; color: #203026; background: #92ad7f; transform: rotate(-14deg); }
.feature-wide:hover .recipe-stack div:nth-child(1) { transform: rotate(-2deg) translateY(-22px); }.feature-wide:hover .recipe-stack div:nth-child(2) { transform: rotate(13deg) translate(24px,-8px); }.feature-wide:hover .recipe-stack div:nth-child(3) { transform: rotate(-19deg) translate(-25px,8px); }
.curve { position: absolute; left: 0; right: 0; bottom: 30px; height: 280px; }
.curve-grid { position: absolute; inset: 0; background-image: linear-gradient(#ded5c555 1px, transparent 1px), linear-gradient(90deg, #ded5c555 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(transparent, #000); }
.curve svg { position: absolute; bottom: 15px; width: 100%; height: 220px; overflow: visible; }
.curve path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.curve-ghost { stroke: #b7ad9f; stroke-dasharray: 5 6; }
.curve-line { stroke: var(--copper); stroke-width: 4!important; stroke-dasharray: 720; stroke-dashoffset: 720; transition: stroke-dashoffset 1.8s .3s ease; }
.feature-tall.in-view .curve-line { stroke-dashoffset: 0; }
.curve circle { fill: var(--paper); stroke: var(--copper); stroke-width: 4; }
.curve-label { position: absolute; left: 20px; top: 25px; font: 11px var(--mono); }.curve-label.end { left: auto; right: 20px; bottom: 5px; top: auto; }
.live-pill { position: absolute; left: 42%; bottom: 42px; padding: 8px 12px; background: var(--ink); color: var(--paper); border-radius: 99px; font: 8px var(--mono); letter-spacing: .08em; }
.live-pill i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #83a576; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px #83a57622; } }
.pantry-lines { position: absolute; left: 7%; right: 7%; bottom: 55px; }
.pantry-lines p { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.pantry-lines i { font-style: normal; font-size: 24px; color: var(--copper); }
.pantry-lines span { color: var(--ink); font-weight: 600; }.pantry-lines small { display: block; margin-top: 4px; color: var(--muted); font: 10px var(--mono); }.pantry-lines b { font: 8px var(--mono); letter-spacing: .1em; color: var(--sage); }.pantry-lines b.low { color: var(--copper); }
.feature-dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.feature-dark .feature-copy span { color: #d98c66; }.feature-dark .feature-copy p { color: #a9a499; }
.cost { position: absolute; left: 10%; right: 10%; bottom: 62px; padding-top: 30px; border-top: 1px solid #4c4b46; }
.cost small { font: 9px var(--mono); color: #9a958b; letter-spacing: .15em; }.cost > b { display: block; font: 500 clamp(70px, 8vw, 126px)/1 var(--display); color: #df9d77; }.cost > span { display: block; margin-top: 20px; color: #aaa49a; }.cost span i { font-style: normal; color: var(--paper); }.cost span strong { color: var(--paper); }

.community { position: relative; min-height: 100svh; padding: clamp(100px, 12vw, 190px) max(4vw, calc((100vw - 1440px)/2)); display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 5vw; overflow: hidden; background: #a95332; color: var(--paper); }
.community::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 75% 50%, #e495624d, transparent 35%), linear-gradient(130deg, #9d472d, #be603b); }
.community-copy { position: relative; z-index: 2; max-width: 600px; }
.community-copy h2 { margin: 0; font: 500 clamp(57px, 7vw, 108px)/.92 var(--display); letter-spacing: -.05em; }
.community-copy > p:not(.eyebrow) { max-width: 520px; margin: 34px 0 0; font-size: 17px; line-height: 1.7; color: #f0d8c8; }.community-copy .community-note { padding-left: 20px; border-left: 1px solid #f0c3a5; font: italic 18px/1.5 var(--display)!important; }
.community-orbit { position: absolute; right: -15vw; width: 70vw; aspect-ratio: 1; border: 1px solid #fff2; border-radius: 50%; animation: orbit 35s linear infinite; }.community-orbit::before,.community-orbit::after { content: ''; position: absolute; inset: 15%; border: 1px solid #fff2; border-radius: inherit; }.community-orbit::after { inset: 31%; }.community-orbit i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #f3d4bd; }.community-orbit i:nth-child(1){left:8%;top:24%}.community-orbit i:nth-child(2){right:12%;top:18%}.community-orbit i:nth-child(3){right:22%;bottom:8%}.community-orbit i:nth-child(4){left:20%;bottom:13%}.community-orbit i:nth-child(5){left:48%;top:-6px}@keyframes orbit{to{transform:rotate(1turn)}}
.post-deck { position: relative; z-index: 3; min-height: 700px; perspective: 1400px; }
.post { position: absolute; overflow: hidden; border-radius: 25px; background: var(--paper); color: var(--ink); box-shadow: 0 50px 100px #62241455; }
.post-main { z-index: 3; left: 20%; top: 2%; width: min(410px, 70%); padding: 17px; transform: rotate(2deg); }.post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }.avatar { display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:white;font:10px var(--mono)}.post-head p{flex:1;margin:0}.post-head b,.post-head small{display:block}.post-head b{font-size:12px}.post-head small{margin-top:3px;color:var(--muted);font-size:9px}.post-head>i{font-style:normal}.beer-photo{position:relative;overflow:hidden;aspect-ratio:1;border-radius:16px}.beer-gold{background:radial-gradient(circle at 65% 25%,#ffc86b,#a94c22 60%,#542014)}.beer-gold em{position:absolute;left:22px;bottom:22px;color:#fff4df;font:italic 28px/1 var(--display)}.glass{position:absolute;right:15%;top:13%;width:36%;height:70%;border:2px solid #fff9;border-radius:8px 8px 22px 22px;box-shadow:inset 0 0 20px #fff4}.glass span{position:absolute;inset:14% 4% 3%;border-radius:4px 4px 18px 18px;background:linear-gradient(#fff1bb,#d97a29 12%,#9c3d16)}.post-meta{display:flex;justify-content:space-between;align-items:center;padding:15px 2px 10px}.post-meta p{margin:0}.post-meta b,.post-meta span{display:block}.post-meta b{font:500 18px var(--display)}.post-meta span{margin-top:3px;color:var(--muted);font-size:9px}.post-meta>div{display:flex;gap:12px}.post-meta i{font-style:normal;font-size:18px}.post button{width:100%;height:44px;border:1px solid var(--line);border-radius:12px;background:transparent;font:600 11px var(--body)}
.post-back,.post-front{width:230px;padding:12px}.post-back{z-index:1;right:0;top:14%;transform:rotate(13deg)}.post-front{z-index:4;left:0;bottom:4%;transform:rotate(-10deg)}.post-back>div:last-child,.post-front>div:last-child{padding:13px 4px 3px}.post-back b,.post-front b,.post-back small,.post-front small{display:block}.post-back b,.post-front b{font-size:11px}.post-back small,.post-front small{margin-top:4px;color:var(--muted);font-size:8px}.beer-amber{background:linear-gradient(135deg,#efb447,#8e391f)}.beer-dark{background:linear-gradient(135deg,#38261f,#0e0f0c)}.beer-amber>span,.beer-dark>span{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:600 35px/.84 var(--display);color:#fff1dd;letter-spacing:-.04em}

.labels { display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; gap: 7vw; }
.label-copy h2 { margin: 0 0 30px; font: 500 clamp(50px, 5.7vw, 87px)/.96 var(--display); letter-spacing: -.045em; }.label-copy>p:not(.eyebrow){color:var(--muted);font-size:16px;line-height:1.7}.label-copy ul{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:13px}.label-copy li{font-size:11px;font-weight:600}.label-copy li::before{content:'✓';margin-right:8px;color:var(--copper)}
.label-lab { position: relative; min-height: 720px; border: 1px solid var(--line); border-radius: var(--radius); background: #ded4c3; overflow: hidden; box-shadow: inset 0 0 90px #a5988030; }
.label-tools { position:absolute;z-index:4;left:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;padding:8px;gap:6px;border-radius:14px;background:var(--paper);box-shadow:0 15px 40px #67554224}.label-tools span{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;font:500 15px var(--mono)}.label-tools span.active{background:var(--ink);color:white}
.bottle{position:absolute;left:15%;bottom:-11%;width:38%;height:90%;filter:drop-shadow(25px 40px 25px #5e4c3a43)}.bottle-cap{position:absolute;left:33%;top:0;width:34%;height:5%;background:#201a15;border-radius:5px}.bottle-neck{position:absolute;left:29%;top:4%;width:42%;height:22%;border-radius:14px 14px 0 0;background:linear-gradient(90deg,#2b321d,#62733e 50%,#1e2817)}.bottle-body{position:absolute;inset:21% 0 0;border-radius:30% 30% 9% 9%/12% 12% 8% 8%;background:linear-gradient(90deg,#1c2816,#62753d 40%,#30431f 70%,#14200f);box-shadow:inset 16px 0 22px #ffffff14,inset -18px 0 25px #0005}.beer-label{position:absolute;left:10%;right:10%;top:27%;padding:19px 16px;aspect-ratio:.92;background:#e2aa4e;color:#39200f;transform:rotate(-1deg)}.beer-label small{font:7px var(--mono);letter-spacing:.1em}.beer-label h3{margin:15px 0 10px;font:600 clamp(32px,3.2vw,50px)/.76 var(--display);letter-spacing:-.05em}.beer-label p{font:6px var(--mono);letter-spacing:.08em}.fake-qr{position:absolute;right:13px;bottom:12px;font-size:28px}.beer-label>i{position:absolute;left:16px;bottom:12px;font:6px var(--mono);font-style:normal;writing-mode:vertical-rl;transform:rotate(180deg)}
.label-controls{position:absolute;z-index:3;right:4%;top:16%;width:39%;padding:24px;border:1px solid #d2c5b3;border-radius:20px;background:#f8f3e9;box-shadow:0 25px 70px #65533b22}.label-controls p{margin:0;padding:17px 0;border-bottom:1px solid var(--line)}.label-controls p>span{display:block;margin-bottom:9px;font:8px var(--mono);letter-spacing:.14em;color:var(--muted)}.label-controls p>b{font:500 13px var(--body)}.label-controls p>i{display:inline-block;width:24px;height:24px;margin-right:8px;border-radius:50%;background:#171815}.label-controls p>i:nth-of-type(2){background:#bd643b}.label-controls p>i:nth-of-type(3){background:#e3a94d}.label-controls p>i:nth-of-type(4){background:#63705c}.label-controls p>i.selected{outline:2px solid var(--ink);outline-offset:3px}.label-controls button{width:100%;height:49px;margin-top:20px;padding:0 16px;display:flex;justify-content:space-between;align-items:center;border:0;border-radius:12px;background:var(--ink);color:white;font:600 11px var(--body)}.label-controls button i{font-style:normal;color:#e5a07d}

.no-nonsense { padding-top: 40px; }
.big-line { margin: 0; font: 500 clamp(54px, 8vw, 130px)/.98 var(--display); letter-spacing: -.055em; white-space: nowrap; }.big-line.outline { color: transparent; -webkit-text-stroke: 1px #8d877d; }.big-line.accent { color: var(--copper); font-style: italic; text-align: right; }

.final-cta { position: relative; min-height: 92svh; display: grid; place-items: center; overflow: hidden; background: var(--ink); color: var(--paper); text-align: center; }
#foam-field { position:absolute;inset:0;width:100%;height:100%;opacity:.55 }.final-cta::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,transparent,#171815 72%);pointer-events:none}.cta-inner{position:relative;z-index:2;width:min(90vw,920px)}.cta-inner h2{margin:0;font:500 clamp(65px,9vw,138px)/.86 var(--display);letter-spacing:-.055em}.cta-inner h2 em{color:#e09c76;font-weight:400}.cta-inner>p:not(.eyebrow){max-width:610px;margin:35px auto;color:#b9b2a5;font-size:17px;line-height:1.7}.store-button{width:210px;height:65px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:13px;border-radius:13px;background:var(--paper);color:var(--ink);text-align:left;box-shadow:0 20px 80px #0005}.store-button svg{width:27px;fill:currentColor}.store-button small,.store-button b{display:block}.store-button small{font:8px var(--body)}.store-button b{font:500 20px var(--body);letter-spacing:-.04em}.cta-small{display:block;margin-top:18px;color:#77736c;font-size:9px}.cta-rings{position:absolute;width:min(75vw,900px);aspect-ratio:1;border:1px solid #ffffff0c;border-radius:50%;animation:spin 40s linear infinite}.cta-rings i{position:absolute;inset:18%;border:1px solid #ffffff10;border-radius:inherit}.cta-rings i:nth-child(2){inset:34%}.cta-rings i:nth-child(3){inset:48%}@keyframes spin{to{transform:rotate(1turn)}}
footer{min-height:170px;width:var(--page);margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;font-size:11px;color:var(--muted)}.footer-brand{display:flex;align-items:center;gap:12px;color:var(--ink)}.footer-brand img{width:54px;height:54px;border-radius:13px}footer p{font:italic 17px var(--display)}footer>div{justify-self:end;display:flex;gap:22px}

.reveal,.reveal-card { opacity: 0; transform: translateY(35px); transition: opacity .8s, transform .9s cubic-bezier(.2,.8,.2,1); }.reveal.in-view,.reveal-card.in-view { opacity: 1; transform: translateY(0); }.reveal-card:nth-child(2){transition-delay:.08s}.reveal-card:nth-child(3){transition-delay:.12s}.cursor{position:fixed;z-index:200;left:0;top:0;width:40px;height:40px;border:1px solid #fff8;border-radius:50%;pointer-events:none;mix-blend-mode:difference;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s;display:none}.cursor i{position:absolute;left:50%;top:50%;width:4px;height:4px;transform:translate(-50%,-50%);border-radius:50%;background:white}.cursor.hover{width:72px;height:72px;background:#fff2}

@supports (animation-timeline: view()) {
  .reveal-card { animation: card-in 1ms linear both; animation-timeline: view(); animation-range: entry 10% cover 34%; }
  @keyframes card-in { from { opacity: 0; transform: translateY(70px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
  .big-line { animation: line-slide 1ms linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes line-slide { from { transform: translateX(-10vw); opacity: .2; } to { transform: translateX(0); opacity: 1; } }
  .big-line:nth-child(even) { animation-name: line-slide-right; }
  @keyframes line-slide-right { from { transform: translateX(10vw); opacity: .2; } to { transform: translateX(0); opacity: 1; } }
}

@media (pointer:fine){.cursor{display:block}a,button{cursor:none}}
@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr 1fr; }.site-header nav{display:none}.hero-copy{padding-top:120px}.hero-title{font-size:clamp(62px,12vw,110px)}.hero-vessel{right:-13vw;top:20%;opacity:.67}.hero-bottom{max-width:70%}.intro-foot{margin-left:12%}.story-sticky{grid-template-columns:.72fr 1.28fr}.story-copy h2{font-size:55px}.float-card{display:none}.feature{min-height:540px}.brew-editorial{min-height:900px;grid-template-columns:.85fr 1.15fr;grid-template-rows:260px 1fr}.editorial-pint{grid-column:1;grid-row:1 / 3}.editorial-labels{grid-column:2;grid-row:2}.editorial-copy{grid-column:2;grid-row:1;display:block}.editorial-copy .eyebrow{margin-bottom:22px}.editorial-copy>p:last-child{margin-top:18px}.labels{grid-template-columns:1fr}.label-copy{max-width:760px}.community{grid-template-columns:1fr;padding-top:120px}.community-copy{max-width:760px}.post-deck{min-height:650px;width:min(850px,100%)}.big-line{white-space:normal}footer{grid-template-columns:1fr 1fr}footer p{display:none}
}
@media (max-width: 680px) {
  :root{--page:calc(100vw - 32px)}.site-header{height:70px}.site-header.scrolled{height:58px;padding-left:15px}.wordmark{width:58px}.header-cta{min-width:0;padding:10px 12px 10px 15px}.header-cta span{display:none}.header-cta i{width:25px}.hero::after{background:linear-gradient(0deg,#171612 0%,#17161288 52%,transparent),linear-gradient(90deg,#11120ecc,transparent)}.hero-copy{justify-content:flex-end;padding:110px 0 50px}.hero-title{font-size:clamp(57px,17vw,78px);line-height:.88}.title-italic{padding-left:0}.hero-vessel{width:65vw;height:55%;right:-3vw;top:8%;opacity:.62}.hero-bottom{max-width:100%;align-items:center;margin-top:42px}.hero-bottom>p{font-size:14px;line-height:1.55}.round-cta{flex-basis:88px;font-size:8px}.hero-note{display:none}.section-pad{padding-block:100px}.statement{margin:35px 0 45px;font-size:clamp(45px,14vw,66px)}.intro-foot{margin-left:0;grid-template-columns:1fr;gap:30px}.intro-foot p{font-size:15px}.story-sticky{grid-template-columns:1fr;align-content:start;padding-top:88px;pointer-events:none}.story-copy{position:relative;z-index:5}.story-copy h2{font-size:50px}.story-lede{display:none}.story-stage-copy{top:0;max-width:100%}.story-stage-copy h3{margin:15px 0 10px;font-size:34px}.story-stage-copy p{max-width:92%;font-size:12px;line-height:1.5}.story-index{margin-top:20px}.phone-wrap{position:absolute;left:0;right:0;bottom:-3vh;width:100%;height:68vh}.phone{width:min(290px,43vh)}.story-steps{width:calc(100% - 32px);margin:0 16px;padding-top:100vh}.story-step{align-content:start;padding-top:25vh;grid-template-columns:34px 1fr}.story-step h3{font-size:32px}.story-step p{font-size:12px}.section-heading{display:block;margin-bottom:40px}.section-heading h2{font-size:48px}.feature-grid{grid-template-columns:1fr}.feature-wide{grid-column:auto;min-height:650px}.feature{min-height:550px;padding:28px}.feature h3{font-size:41px}.recipe-stack{width:100%;height:58%;right:0}.recipe-stack>div{padding:18px}.feature-tall{min-height:620px}.cost> b{font-size:80px}.community{padding-inline:16px;min-height:auto}.community-copy h2{font-size:58px}.community-copy>p:not(.eyebrow){font-size:14px}.post-deck{min-height:570px}.post-main{left:8%;width:84%}.post-back{right:-80px;width:190px}.post-front{left:-70px;width:180px}.labels{gap:55px}.label-copy h2{font-size:52px}.label-copy ul{grid-template-columns:1fr}.label-lab{min-height:640px}.label-tools{left:10px}.bottle{left:6%;width:55%;height:80%}.label-controls{right:3%;top:9%;width:48%;padding:16px}.beer-label{padding:14px 10px}.beer-label h3{font-size:37px}.no-nonsense{padding-block:50px 120px}.big-line{font-size:54px;line-height:1.02;margin-bottom:15px}.final-cta{min-height:90svh}.cta-inner h2{font-size:64px}.cta-inner>p:not(.eyebrow){font-size:14px}.cta-rings{width:130vw}footer{min-height:220px;grid-template-columns:1fr;align-content:center;gap:25px}.footer-mark{margin:auto}footer>div{justify-self:center;flex-wrap:wrap;justify-content:center}
}
@media (max-width: 680px) {
  .brand-lockup{gap:8px}.brand-lockup img{width:38px;height:38px;border-radius:9px}.brand-lockup b{font-size:14px}.brand-lockup small{font-size:6px}
  .brew-photo-break{width:100%;min-height:78svh;margin-bottom:110px;border-radius:0}.brew-photo-break img{inset:0;width:100%;height:100%}.brew-photo-break figcaption{left:24px;right:24px;bottom:35px}.brew-photo-break figcaption b{font-size:55px}.brew-photo-break figcaption small{font-size:11px}
  .brew-editorial{width:calc(100% - 32px);min-height:0;margin-bottom:120px;display:flex;flex-direction:column;gap:28px}.brew-editorial figure{width:100%}.editorial-pint{height:125vw;max-height:650px}.editorial-labels{height:72vw}.editorial-copy{order:-1;padding:65px 0 25px}.editorial-copy h2{font-size:52px}.editorial-copy>p:last-child{font-size:13px}.brew-editorial figcaption b{font-size:28px}
  .footer-brand span{display:none}.footer-brand img{width:58px;height:58px}
}

@media (max-width: 680px) {
  .hero-title { font-size: clamp(55px, 15vw, 68px); }
}

@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.grain,.cursor{display:none}.reveal,.reveal-card,.title-line{opacity:1;transform:none}.split-reveal{background:none;color:var(--ink)}
}