/* GarageBrewer: foam cream + stout dark, amber and copper, hop green accent. Alfa Slab One (display) + Libre Franklin (text), both SIL OFL, self-hosted.
   Motifs: bottle caps, rising bubbles, foam heads, garage-door slats. Decorative motion only under prefers-reduced-motion: no-preference. Mobile-first. */
@font-face { font-family: 'Alfa Slab One'; src: url('/fonts/alfa-slab-one-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('/fonts/libre-franklin-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --foam: #FBF5EA; --foam-2: #F4EAD8; --paper: #FFFDF8; --malt: #F0E2CC;
  --stout: #21160F; --stout-2: #3A271C; --stout-3: #4E3626;
  --ink: #21160F; --ink-2: #4E3A2B; --ink-3: #6B5544;
  --amber: #E39A2D; --amber-d: #B9701A; --amber-dd: #8E520F; --amber-l: #FCE9C8; --amber-ll: #FFF6E6;
  --copper: #B4602E; --copper-d: #8A4520;
  --hop: #6FA032; --hop-d: #4A7120; --hop-l: #E6F0D3; --hop-ll: #F3F8EA;
  --steel: #3C6788; --steel-l: #E4EDF4;
  --red: #A8322A; --red-l: #FBE6E1;
  --line: #E8D9C1; --line-2: #D5C09F;
  --r: 16px; --r-s: 10px;
  --sh-1: 0 1px 0 rgba(33, 22, 15, .05), 0 8px 22px -14px rgba(33, 22, 15, .35);
  --sh-2: 0 2px 0 rgba(33, 22, 15, .04), 0 22px 40px -22px rgba(142, 82, 15, .55);
  --ease: cubic-bezier(.22, .8, .25, 1); --pop: cubic-bezier(.34, 1.5, .6, 1);
  --display: 'Alfa Slab One', 'Rockwell', Georgia, serif;
  --text: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1200px;
  --cap: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M50.0 0.5L56.9 4.5L64.6 2.7L70.0 8.5L77.9 9.1L81.3 16.3L88.7 19.1L89.9 27.0L96.1 31.9L94.9 39.8L99.4 46.3L95.9 53.4L98.3 61.0L92.9 66.8L92.9 74.8L86.0 78.7L83.7 86.3L75.9 88.0L71.5 94.6L63.6 94.0L57.4 98.9L50.0 96.0L42.6 98.9L36.4 94.0L28.5 94.6L24.1 88.0L16.3 86.3L14.0 78.7L7.1 74.8L7.1 66.8L1.7 61.0L4.1 53.4L0.6 46.3L5.1 39.8L3.9 31.9L10.1 27.0L11.3 19.1L18.7 16.3L22.1 9.1L30.0 8.5L35.4 2.7L43.1 4.5L50.0 0.5Z%22/%3E%3C/svg%3E");
  --foam-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16V9c4-7 9-7 12-2 3-6 10-7 13 0 3-5 9-5 11 1 3-6 10-6 13 0 4-5 9-4 11 1v7z' fill='%23FBF5EA'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
body { margin: 0; background: var(--foam); color: var(--ink); font: 400 17px/1.62 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--copper-d); text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--amber) 70%, transparent); }
a:hover { color: var(--amber-dd); text-decoration-color: var(--amber); }
:focus-visible { outline: 3px solid var(--steel); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0 0 .5em; color: var(--ink); letter-spacing: .005em; }
h1 { font-size: clamp(2rem, 5.4vw, 3.5rem); }
h2 { font-size: clamp(1.45rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.16rem; }
p { margin: 0 0 1em; }
small { font-size: .84em; }
code { font: 500 .88em/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.narrow { max-width: 820px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--stout); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.demo-bar { background: var(--red); color: #fff; text-align: center; font: 700 .85rem/1.3 var(--text); padding: 7px 12px; }
.muted { color: var(--ink-3); } .small { font-size: .88rem; } .center { text-align: center; }

/* ---------- buttons: amber pours and foams up; line buttons release bubbles ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .7em 1.35em; border-radius: 14px; border: 2px solid var(--stout); font: 700 1rem/1.1 var(--text); letter-spacing: .01em; text-decoration: none; cursor: pointer; background: var(--paper); color: var(--ink); isolation: isolate; overflow: hidden; transition: transform .3s var(--pop), box-shadow .3s, color .2s; box-shadow: 0 4px 0 -1px var(--stout); }
.btn > * { position: relative; z-index: 2; }
.btn .ic { position: relative; z-index: 2; transition: transform .35s var(--pop); }
.btn:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 0 -1px var(--stout); }
.btn:hover .ic { transform: translateX(3px); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 -1px var(--stout); }
.btn-sm { min-height: 40px; padding: .5em 1em; font-size: .92rem; border-radius: 12px; box-shadow: 0 3px 0 -1px var(--stout); }
.btn-amber { background: var(--amber); color: var(--stout); }
.btn-amber::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 20% 70%, rgba(255, 246, 222, .7) 0 1.6px, transparent 2.2px) 0 0/22px 18px, radial-gradient(circle at 70% 30%, rgba(255, 246, 222, .6) 0 1.2px, transparent 1.8px) 0 0/26px 22px, linear-gradient(0deg, #B9701A, #F2B23C); transform: translateY(105%); transition: transform .55s var(--ease); }
.btn-amber::after { content: ''; position: absolute; z-index: 1; left: -6px; right: -6px; top: 100%; height: 14px; background: radial-gradient(circle at 7px 9px, #FFF8EA 6.5px, transparent 7px) 0 0/15px 14px repeat-x, radial-gradient(circle at 15px 6px, #FFF8EA 5px, transparent 5.5px) 0 0/15px 14px repeat-x; transition: top .55s var(--ease); pointer-events: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn-amber:hover::before { transform: translateY(0); animation: rise 1.6s linear .5s infinite; }
  .btn-amber:hover::after { top: -7px; animation: fizz .9s ease-in-out .5s infinite alternate; }
}
@keyframes rise { to { background-position: 0 -36px, 0 -44px, 0 0; } }
@keyframes fizz { to { transform: translateY(1.5px) scaleY(.9); } }
.btn-line { background: var(--paper); }
.btn-line:hover { background: var(--amber-ll); }
.btn-line::before, .btn-line::after { content: ''; position: absolute; z-index: 1; bottom: 4px; width: 9px; height: 9px; border-radius: 50%; border: 1.6px solid var(--amber-d); background: rgba(255, 255, 255, .6); opacity: 0; pointer-events: none; }
.btn-line::before { left: 22%; } .btn-line::after { right: 26%; width: 6px; height: 6px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn-line:hover::before { animation: bubble 1.1s ease-out infinite; }
  .btn-line:hover::after { animation: bubble 1.1s ease-out .4s infinite; }
}
@keyframes bubble { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 80% { opacity: 1; transform: translateY(-26px) scale(1); } 100% { opacity: 0; transform: translateY(-32px) scale(1.5); } }
.btn-dark { background: var(--stout); color: var(--foam); }
.btn-dark:hover { color: var(--foam); background: var(--stout-2); }

/* ---------- header (stout dark) ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--stout); color: var(--foam); transition: box-shadow .25s; }
.site-header.scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .7); }
.bar { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--foam); flex: none; }
.logo:hover { color: var(--foam); }
.logo-mark svg { width: 42px; height: 42px; display: block; }
.logo-mark svg path:first-child { fill: #3A271C; }
@media (prefers-reduced-motion: no-preference) { .logo:hover .lm-foam { animation: foamUp .9s var(--pop); transform-box: fill-box; transform-origin: 50% 100%; } }
@keyframes foamUp { 40% { transform: translateY(-3px) scale(1.12, 1.2); } }
.logo-word { font: 400 1.3rem/1 var(--display); letter-spacing: .01em; }
.logo-word i { font-style: normal; color: var(--amber); }
.search { position: relative; flex: 1; min-width: 0; display: none; }
.search > .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #B9A48C; }
.search input { width: 100%; height: 42px; border-radius: 12px; border: 1.5px solid #4E3626; background: #2E1F16; padding: 0 16px 0 42px; font: 500 .95rem var(--text); color: var(--foam); }
.search input::placeholder { color: #A8927A; }
.search input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px rgba(227, 154, 45, .25); }
.search-results { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2); padding: 6px; max-height: 70vh; overflow: auto; }
.search-results.open { display: block; }
.search-results a { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.search-results a:hover, .search-results a.on { background: var(--amber-ll); }
.search-results img, .search-results .sr-ic { width: 42px; height: 42px; border-radius: 10px; object-fit: contain; background: var(--foam-2); flex: none; }
.search-results b { display: block; font-size: .93rem; line-height: 1.25; }
.search-results span { font-size: .8rem; color: var(--ink-3); }
.head-cta { display: none; }
.site-header .btn { border-color: var(--amber); box-shadow: 0 3px 0 -1px #000; }
.nav-toggle { margin-left: auto; width: 46px; height: 46px; border-radius: 12px; border: 1.5px solid #5A4030; background: #2E1F16; display: grid; place-items: center; cursor: pointer; }
.bars { display: grid; gap: 4px; } .bars i { display: block; width: 20px; height: 2.5px; background: var(--amber); border-radius: 2px; transition: transform .25s, opacity .2s; }
.open .bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .open .bars i:nth-child(2) { opacity: 0; } .open .bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mainnav { display: none; border-top: 1px solid #3A271C; }
.open .mainnav { display: block; max-height: calc(100vh - 70px); overflow: auto; }
.navrow { display: flex; flex-direction: column; padding: 8px 0 14px; }
.navrow > a, .mega-btn { display: flex; align-items: center; gap: .4em; padding: 11px 8px; font: 650 1rem var(--text); color: #F1E3CC; text-decoration: none; background: none; border: 0; cursor: pointer; border-radius: 10px; text-align: left; }
.navrow > a:hover, .mega-btn:hover, .navrow > a[aria-current] { color: var(--stout); background: var(--amber); }
.navrow > a.hot::after { content: 'free'; font: 800 .64rem/1 var(--text); text-transform: uppercase; letter-spacing: .08em; background: var(--hop); color: var(--stout); padding: 4px 6px; border-radius: 6px; margin-left: 4px; }
.mega-btn .ic { transition: transform .25s; } .mega-wrap.open .mega-btn .ic { transform: rotate(180deg); }
.mega { display: none; padding: 6px 0 10px; color: var(--ink); }
.mega-wrap.open .mega { display: grid; gap: 14px; }
.mega-cats { display: grid; gap: 4px; background: var(--paper); border-radius: var(--r); padding: 8px; }
.mega-cats a { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.mega-cats a:hover { background: color-mix(in srgb, var(--c) 12%, white); }
.mega-cats .mi { width: 42px; height: 42px; display: grid; place-items: center; -webkit-mask: var(--cap) center/contain no-repeat; mask: var(--cap) center/contain no-repeat; background: color-mix(in srgb, var(--c) 24%, white); color: color-mix(in srgb, var(--c) 70%, black); flex: none; }
.mega-cats .mi .ic { width: 20px; height: 20px; }
.mega-cats b { display: block; font-size: .95rem; } .mega-cats small { color: var(--ink-3); display: block; line-height: 1.35; }
.mega-side { background: var(--amber-ll); border-radius: var(--r); padding: 14px; }
.mega-h { display: block; font: 400 1rem var(--display); margin-bottom: 6px; }
.mega-side ul { list-style: none; margin: 0 0 10px; padding: 0; }
.mega-side li a { display: flex; gap: 8px; align-items: center; padding: 6px 0; color: var(--ink); text-decoration: none; font-weight: 600; }
.mega-side li a:hover { color: var(--copper-d); }
.mega-tool { display: flex; gap: 10px; align-items: center; background: var(--stout); color: var(--foam); border-radius: 12px; padding: 10px 12px; text-decoration: none; }
.mega-tool:hover { color: var(--amber); } .mega-tool b { display: block; } .mega-tool small { color: #CDB89C; }
/* progress bar: amber beer with rising bubbles and a foam head */
.scroll-track { position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; pointer-events: none; background: rgba(33, 22, 15, .12); }
.scroll-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: linear-gradient(180deg, #F2B23C, #C77814); overflow: hidden; }
.scroll-bubbles { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 248, 234, .9) 0 1px, transparent 1.5px) 0 0/9px 6px, radial-gradient(circle, rgba(255, 248, 234, .7) 0 .8px, transparent 1.3px) 4px 3px/13px 6px; }
.scroll-foam { position: absolute; top: -3px; left: calc(var(--p, 0) * 100% - 7px); width: 14px; height: 12px; border-radius: 50%; background: #FFF8EA; box-shadow: -5px 2px 0 -1px #FFF8EA, 5px 3px 0 -2px #FFF8EA; opacity: 0; transition: opacity .3s; }
.scrolled .scroll-foam { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .scroll-bubbles { animation: fizzUp 1.2s linear infinite; } .pouring .scroll-foam { animation: fizz .25s ease-in-out infinite alternate; } }
@keyframes fizzUp { to { background-position: 0 -6px, 4px -3px; } }

/* ---------- sections & heads ---------- */
.section { padding: clamp(44px, 7vw, 84px) 0; position: relative; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-bottom: 26px; }
.section-head > div { max-width: 720px; }
.section-head h2 { margin-bottom: .25em; }
.section-head p { color: var(--ink-2); margin: 0; }
.section-head h2 .ic { width: .9em; height: .9em; color: var(--copper); }
.eyebrow { display: inline-flex; align-items: center; gap: .45em; font: 800 .76rem/1 var(--text); text-transform: uppercase; letter-spacing: .14em; color: var(--hop-d); margin-bottom: 12px; padding: 0 0 6px; border-bottom: 2px solid var(--hop); }
.eyebrow .ic { width: 16px; height: 16px; }
.more-link { display: inline-flex; align-items: center; gap: .35em; font-weight: 700; text-decoration: none; white-space: nowrap; color: var(--copper-d); }
.more-link .ic { transition: transform .3s var(--pop); } .more-link:hover .ic { transform: translateX(4px); }
.foamline { position: relative; display: inline-block; white-space: nowrap; color: var(--copper); }
.foamline svg { position: absolute; left: -2%; bottom: -.36em; width: 104%; height: .55em; overflow: visible; }
.foamline path { fill: none; stroke: var(--amber); stroke-width: 6; stroke-linecap: round; }
.foamline .fb { fill: #FFF8EA; stroke: var(--amber-d); stroke-width: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  .js .foamline path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 1.1s .3s var(--ease) forwards; }
  .js .foamline .fb { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: popUp 2.4s 1.2s ease-out infinite; }
  .js .foamline .fb2 { animation-delay: 1.6s; } .js .foamline .fb3 { animation-delay: 2s; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes popUp { 0% { opacity: 0; transform: translateY(6px) scale(.4); } 25% { opacity: 1; transform: none; } 70% { opacity: 1; transform: translateY(-8px); } 100% { opacity: 0; transform: translateY(-12px) scale(1.4); } }
.hop-band { background: var(--hop-ll); }
.malt-band { background: var(--foam-2); }
.season-band { background: linear-gradient(180deg, var(--amber-ll), var(--foam) 85%); }
.hop-band::before, .malt-band::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 16px; background: var(--foam-edge) 0 0/60px 16px repeat-x; transform: scaleY(-1); pointer-events: none; }
.stout-band { background: radial-gradient(120% 80% at 80% 0%, #4E3626 0, var(--stout) 60%); color: #EBDCC4; }
.stout-band h2, .stout-band .section-head p { color: #FFF3DE; } .stout-band .section-head p { color: #D8C4A6; }
.stout-band .eyebrow { color: #B6DA7E; border-color: #8FC14F; } .stout-band .more-link { color: var(--amber); }
.stout-band .foamline { color: var(--amber); }

/* ---------- page hero backdrop: garage-door slats + bubbles ---------- */
.brew-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, var(--amber-ll) 0%, var(--foam) 85%); }
.brew-bg svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
.bb-door rect { fill: rgba(142, 82, 15, .045); }
.bb { fill: none; stroke: rgba(185, 112, 26, .32); stroke-width: 1.4; }
.bb.b1 { stroke: rgba(111, 160, 50, .3); } .bb.b3 { fill: rgba(255, 255, 255, .6); }
@media (prefers-reduced-motion: no-preference) {
  .bb { animation: bgRise 14s linear infinite; transform-box: fill-box; }
  .bb.b1 { animation-duration: 18s; animation-delay: -6s; } .bb.b2 { animation-duration: 11s; animation-delay: -3s; } .bb.b3 { animation-duration: 16s; animation-delay: -9s; } .bb.b4 { animation-duration: 20s; animation-delay: -12s; }
}
@keyframes bgRise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-300px); opacity: 0; } }

/* ---------- home hero ---------- */
.hero { position: relative; isolation: isolate; padding: 28px 0 44px; overflow: hidden; }
.hero-grid { display: grid; gap: 26px; align-items: center; }
.hero-copy { min-width: 0; }
.hero h1 { margin-bottom: .35em; }
.lede { font-size: 1.12rem; color: var(--ink-2); max-width: 60ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.hero-stats li { position: relative; background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: 8px 14px 8px 44px; display: flex; align-items: baseline; gap: 8px; }
.hero-stats li::before { content: ''; position: absolute; left: 10px; top: 50%; width: 24px; height: 24px; margin-top: -12px; background: var(--amber); -webkit-mask: var(--cap) center/contain no-repeat; mask: var(--cap) center/contain no-repeat; }
.hero-stats li:nth-child(2)::before { background: var(--hop); } .hero-stats li:nth-child(3)::before { background: var(--copper); }
.hero-stats b { font: 400 1.5rem/1 var(--display); color: var(--copper-d); font-variant-numeric: tabular-nums; }
.hero-stats span { font-size: .86rem; color: var(--ink-2); font-weight: 600; }
.hero-art { position: relative; min-width: 0; }
.brew-art { width: 100%; height: auto; display: block; filter: drop-shadow(0 26px 34px rgba(142, 82, 15, .32)); }
.brew-art .frame { fill: none; stroke: var(--stout); stroke-width: 4; }
.door-slats rect { fill: rgba(255, 255, 255, .025); }
.wire { fill: none; stroke: #120B07; stroke-width: 2; } .wire-drop { stroke: #120B07; stroke-width: 2; }
.bulb circle { fill: #FFD27A; } .bulb.k1 circle { fill: #FFC25C; } .bulb.k2 circle { fill: #FFE0A0; }
.pegboard circle { fill: rgba(255, 255, 255, .07); }
.paddle path { stroke: #9A6B3F; stroke-width: 5; stroke-linecap: round; } .paddle rect { fill: #9A6B3F; }
.shelf > rect { fill: #6B4A30; } .sbottle path { fill: #7A3E0E; } .sbottle:nth-child(3) path { fill: #2F5A2A; } .sb-label { fill: #F6E7CB; }
.hopjar rect { fill: rgba(255, 255, 255, .14); stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; } .hopjar path { stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; } .hopjar circle { fill: #7FB241; }
.bench-top { fill: #A8763F; } .bench-front { fill: #7C5329; } .bench-line { stroke: #5E3D1C; stroke-width: 2; fill: none; }
.k-rim { fill: #C9D2D8; stroke: #5D6870; stroke-width: 2; } .k-lid { fill: #DCE3E7; stroke: #5D6870; stroke-width: 2; } .k-knob { fill: #2B2B2B; }
.k-body { stroke: #5D6870; stroke-width: 2; } .k-panel { fill: #111A20; stroke: #5D6870; stroke-width: 2; } .k-read { font: 700 17px var(--text); fill: #FFB84D; letter-spacing: .04em; }
.k-led { fill: #7FD13B; } .k-tap { fill: #8E99A1; stroke: #5D6870; stroke-width: 1.5; } .k-cord { fill: none; stroke: #111; stroke-width: 4; stroke-linecap: round; }
.wisp { fill: none; stroke: rgba(255, 248, 234, .55); stroke-width: 7; stroke-linecap: round; }
.c-krausen { fill: #F6E3BC; } .c-bub, .p-bub { fill: rgba(255, 245, 220, .85); }
.c-outline, .p-outline { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 3; stroke-linejoin: round; }
.c-bung { fill: #2B2B2B; } .al-tube { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.al-water { fill: none; stroke: #74B9E0; stroke-width: 4; stroke-linecap: round; } .al-bub { fill: #CDEBFA; stroke: #fff; stroke-width: 1; }
.c-label { fill: #F6E7CB; stroke: #B4602E; stroke-width: 2; } .c-label-t { font: 400 12px var(--display); fill: var(--stout); letter-spacing: .08em; }
.p-foam path { fill: #FFF8EA; } .p-foam circle { fill: #FFF8EA; }
.hop-cone { fill: #8DC24E; stroke: #4A7120; stroke-width: 2; } .hop-scale { fill: none; stroke: #4A7120; stroke-width: 1.6; stroke-linecap: round; } .hop-stem { fill: none; stroke: #4A7120; stroke-width: 2.4; stroke-linecap: round; }
.bcap { fill: #C9A227; stroke: #8E6F12; stroke-width: 10; }
.brew-art .wisp, .brew-art .c-bub, .brew-art .p-bub, .brew-art .al-bub, .brew-art .p-foam, .brew-art .hop-fall, .brew-art .bulb, .brew-art .c-krausen, .brew-art .k-led { transform-box: fill-box; }
.p-foam { transform-origin: 50% 100%; } .c-krausen { transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .wisp { animation: steam 4.2s ease-in-out infinite; } .wisp.w1 { animation-delay: -1.4s; } .wisp.w2 { animation-delay: -2.8s; }
  .c-bub { animation: bubRise 3.4s ease-in infinite; } .p-bub { animation: bubRise 2.6s ease-in infinite; }
  .q1 { animation-delay: -.6s !important; } .q2 { animation-delay: -1.2s !important; } .q3 { animation-delay: -1.8s !important; } .q4 { animation-delay: -2.3s !important; } .q5 { animation-delay: -2.9s !important; }
  .al-bub { animation: airlock 2.8s ease-in-out infinite; }
  .p-foam { animation: foamSettle 6s ease-in-out infinite; } .p-foam .fb1, .p-foam .fb2 { animation: popUp 3s ease-out infinite; transform-box: fill-box; } .p-foam .fb2 { animation-delay: -1.5s; }
  .c-krausen { animation: krausen 5s ease-in-out infinite alternate; }
  .hop-fall { animation: hopFall 11s linear infinite; } .hop-fall.h1 { animation-delay: -4s; animation-duration: 13s; } .hop-fall.h2 { animation-delay: -8s; animation-duration: 10s; }
  .bulb { animation: glow 3s ease-in-out infinite alternate; } .bulb.k1 { animation-delay: -1s; } .bulb.k2 { animation-delay: -2s; }
  .k-led { animation: blink 1.4s steps(2) infinite; }
}
@keyframes steam { 0% { opacity: 0; transform: translateY(18px) scaleX(.8); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px) scaleX(1.3); } }
@keyframes bubRise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-96px); opacity: 0; } }
@keyframes airlock { 0%, 55% { transform: translate(0, 0); opacity: 0; } 60% { opacity: 1; } 85% { transform: translate(0, -26px); opacity: 1; } 100% { transform: translate(0, -34px) scale(1.5); opacity: 0; } }
@keyframes foamSettle { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.92) translateY(2px); } }
@keyframes krausen { to { transform: scaleY(1.25); } }
@keyframes hopFall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: 1; } 50% { transform: translate(-30px, 250px) rotate(140deg); } 92% { opacity: 1; } 100% { transform: translate(10px, 470px) rotate(300deg); opacity: 0; } }
@keyframes glow { to { opacity: .55; } }
@keyframes blink { 50% { opacity: .2; } }

/* trust strip */
.trust { list-style: none; margin: -8px 0 0; padding: 14px; display: grid; gap: 12px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); position: relative; z-index: 2; }
.trust li { display: flex; gap: 12px; align-items: center; }
.trust li > .ic { width: 44px; height: 44px; padding: 10px; background: var(--amber-l); color: var(--copper-d); -webkit-mask: var(--cap) center/contain no-repeat; mask: var(--cap) center/contain no-repeat; }
.trust li:nth-child(2) > .ic { background: var(--hop-l); color: var(--hop-d); } .trust li:nth-child(3) > .ic { background: var(--steel-l); color: var(--steel); }
.trust b { display: block; font-size: .98rem; } .trust small { color: var(--ink-3); display: block; line-height: 1.35; }
.home .trust { margin-bottom: 34px; }

/* ---------- seasonal panel ---------- */
.season { --tc: var(--amber); --tl: var(--amber-l); display: grid; background: var(--paper); border: 1.5px solid var(--line); border-radius: 22px; box-shadow: var(--sh-1); overflow: hidden; }
.theme-lager { --tc: #3C6788; --tl: #E2ECF4; } .theme-brewday { --tc: #D9821C; --tl: #FCE9C8; } .theme-heat { --tc: #C2561C; --tl: #FFE2CF; } .theme-harvest { --tc: #8C2E4E; --tl: #F6E0E7; } .theme-gifts { --tc: #5F8F2A; --tl: #E6F0D3; }
.season-art { background: var(--tl); display: grid; place-items: center; padding: 14px; transition: background .4s; }
.sa-wrap { width: min(240px, 70%); }
.sa { width: 100%; height: auto; display: block; overflow: visible; }
.sa-floor { fill: color-mix(in srgb, var(--tc) 30%, white); }
.sa-flake { fill: #fff; stroke: #8DB1CC; stroke-width: 1.6; }
.sa-glass { fill: rgba(255, 255, 255, .55); stroke: var(--stout); stroke-width: 2.4; } .sa-beer { fill: #F2B23C; } .sa-krausen { fill: none; stroke: #FFF8EA; stroke-width: 5; stroke-linecap: round; }
.sa-b { fill: #FFF8EA; } .sa-tube { fill: none; stroke: var(--stout); stroke-width: 3; stroke-linecap: round; } .sa-blip { fill: #CDEBFA; stroke: var(--stout); stroke-width: 1.4; }
.sa-temp { font: 400 18px var(--display); fill: var(--tc); }
.sa-wisp { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; opacity: .9; }
.sa-pot { fill: #D9E0E5; stroke: var(--stout); stroke-width: 2.4; } .sa-rim { fill: #B9C3CA; stroke: var(--stout); stroke-width: 2.4; } .sa-panel { fill: #111A20; } .sa-read { font: 700 13px var(--text); fill: #FFB84D; }
.sa-hop { fill: #8DC24E; stroke: #4A7120; stroke-width: 1.6; } .sa-hopl { fill: none; stroke: #4A7120; stroke-width: 1.2; }
.sa-sun { fill: #FFC24D; stroke: var(--stout); stroke-width: 2.2; } .sa-rays path { stroke: #E39A2D; stroke-width: 4; stroke-linecap: round; }
.sa-tub { fill: #9FC3DA; stroke: var(--stout); stroke-width: 2.4; } .sa-water { stroke: #fff; stroke-width: 3; stroke-linecap: round; fill: none; }
.sa-cube { fill: #F2FAFF; stroke: #6FA0C2; stroke-width: 1.6; } .sa-ferm { fill: #fff; stroke: var(--stout); stroke-width: 2.2; } .sa-fbeer { fill: #F2B23C; } .sa-towel { fill: #C2561C; }
.sa-thermo rect { fill: #fff; stroke: var(--stout); stroke-width: 2; } .sa-thermo .sa-merc { fill: #C2561C; stroke: none; }
.sa-branch { fill: none; stroke: #6B4A30; stroke-width: 5; stroke-linecap: round; } .sa-stem { stroke: #6B4A30; stroke-width: 2; } .sa-fruit { fill: #C7362F; stroke: var(--stout); stroke-width: 1.8; }
.sa-jug { fill: rgba(255, 255, 255, .6); stroke: var(--stout); stroke-width: 2.4; } .sa-cider { fill: #E8A93B; } .sa-grapes circle { fill: #7A2E5A; stroke: var(--stout); stroke-width: 1.4; }
.sa-gbox { fill: #8C2E4E; stroke: var(--stout); stroke-width: 2.4; } .sa-ribbon { stroke: #FFC24D; stroke-width: 6; fill: none; } .sa-bow { fill: #FFC24D; stroke: var(--stout); stroke-width: 1.8; }
.sa-bglass { fill: #7A3E0E; stroke: var(--stout); stroke-width: 2.2; } .sa-label { fill: #F6E7CB; } .sa-bcap { fill: #C9A227; stroke: var(--stout); stroke-width: 1.6; }
.sa-spark { fill: #FFC24D; }
.sa-b, .sa-blip, .sa-wisp, .sa-fall, .sa-flake, .sa-apple, .sa-cube, .sa-merc, .sa-spark, .sa-rays, .sa-bottle { transform-box: fill-box; }
.sa-rays { transform-origin: 50% 50%; } .sa-merc { transform-origin: 50% 100%; } .sa-apple { transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .sa-b { animation: bubRise 3s ease-in infinite; } .sa-b.r1 { animation-delay: -.8s; } .sa-b.r2 { animation-delay: -1.6s; } .sa-b.r3 { animation-delay: -2.3s; }
  .sa-blip { animation: airlock 2.6s ease-in-out infinite; }
  .sa-flake { animation: snow 6s linear infinite; } .sa-flake.s1 { animation-delay: -1.5s; } .sa-flake.s2 { animation-delay: -3s; } .sa-flake.s3 { animation-delay: -4.5s; }
  .sa-wisp { animation: steam 3.6s ease-in-out infinite; } .sa-wisp.w1 { animation-delay: -1.2s; } .sa-wisp.w2 { animation-delay: -2.4s; }
  .sa-fall { animation: fall 7s ease-in infinite; } .sa-fall.f1 { animation-delay: -2.4s; } .sa-fall.f2 { animation-delay: -4.6s; }
  .sa-rays { animation: spin 30s linear infinite; } .sa-merc { animation: merc 3s ease-in-out infinite alternate; } .sa-cube { animation: bob 1.6s ease-in-out infinite alternate; } .sa-cube.c1 { animation-delay: -.8s; }
  .sa-apple { animation: swing 3s ease-in-out infinite alternate; } .sa-apple.a1 { animation-delay: -1s; } .sa-apple.a2 { animation: appleDrop 6s ease-in infinite; }
  .sa-spark { animation: twinkle 2s ease-in-out infinite; } .sa-spark.k1 { animation-delay: -.5s; } .sa-spark.k2 { animation-delay: -1s; } .sa-spark.k3 { animation-delay: -1.5s; }
  .sa-bottle { animation: bob 2.4s ease-in-out infinite alternate; }
}
@keyframes snow { from { transform: translateY(-20px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(120px); opacity: 0; } }
@keyframes fall { 0% { transform: translateY(-30px) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(18px, 130px) rotate(160deg); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes merc { from { transform: scaleY(.7); } to { transform: scaleY(1); } }
@keyframes bob { to { transform: translateY(-4px); } }
@keyframes swing { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes appleDrop { 0%, 55% { transform: none; opacity: 1; } 85% { transform: translateY(118px) rotate(40deg); opacity: 1; } 100% { transform: translateY(118px) rotate(40deg); opacity: 0; } }
@keyframes twinkle { 0%, 100% { transform: scale(.5); opacity: .3; } 50% { transform: scale(1.2); opacity: 1; } }
.season-body { padding: 18px 18px 16px; min-width: 0; }
.season-top { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.season-month { display: flex; align-items: center; gap: 6px; }
.mon-name { font: 400 1.35rem/1 var(--display); min-width: 7.4ch; text-align: center; }
.mon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--paper); display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: transform .25s var(--pop), background .2s; }
.mon-btn:not(.next) .ic { transform: rotate(180deg); }
.mon-btn:hover { background: var(--amber); border-color: var(--stout); transform: scale(1.08); }
.region-toggle { display: inline-flex; flex-wrap: wrap; background: var(--foam-2); border-radius: 12px; padding: 3px; }
.region-toggle button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 7px 12px; border-radius: 10px; font: 700 .86rem var(--text); color: var(--ink-2); cursor: pointer; min-height: 36px; }
.region-toggle button[aria-pressed="true"] { background: var(--stout); color: var(--foam); }
.season-kicker { margin: 0 0 4px; } .season-kicker span { display: inline-block; font: 800 .74rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--tc); background: var(--tl); padding: 6px 10px; border-radius: 8px; }
.season-focus { font-size: clamp(1.25rem, 3vw, 1.65rem); margin: 6px 0; }
.season-blurb { color: var(--ink-2); margin-bottom: 12px; }
.tasks { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.tasks li { display: flex; gap: 10px; align-items: flex-start; background: var(--foam); border-radius: 12px; padding: 10px 12px; line-height: 1.45; }
.tasks li a { font-weight: 700; white-space: nowrap; text-decoration: none; }
.tasks li a .ic { width: .9em; }
.tk-dot { width: 16px; height: 16px; margin-top: 3px; flex: none; background: var(--tc, var(--amber)); -webkit-mask: var(--cap) center/contain no-repeat; mask: var(--cap) center/contain no-repeat; }
.tasks.small li { padding: 7px 9px; font-size: .9rem; } .tasks.small .tk-dot { width: 12px; height: 12px; }
.season-note { display: flex; gap: 8px; font-size: .85rem; color: var(--ink-3); margin: 0; }
.season-note .ic { margin-top: 2px; }
.season.loading [data-tasks] { opacity: .5; transition: opacity .2s; }
@media (prefers-reduced-motion: no-preference) { .season.swap [data-tasks] li { animation: popIn .45s var(--pop) both; } .season.swap [data-tasks] li:nth-child(2) { animation-delay: .06s; } .season.swap [data-tasks] li:nth-child(3) { animation-delay: .12s; } .season.swap [data-tasks] li:nth-child(4) { animation-delay: .18s; } }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- category tiles: bottle-cap frames ---------- */
.cat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ctile { --c: var(--amber); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 10px 14px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none; transition: transform .4s var(--pop), box-shadow .3s, border-color .2s; min-width: 0; overflow: hidden; }
.ctile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c); }
.ctile .ex { position: relative; width: min(120px, 80%); aspect-ratio: 1; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, white); -webkit-mask: var(--cap) center/contain no-repeat; mask: var(--cap) center/contain no-repeat; }
.ctile .ex > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ctile .ex .collage { position: absolute; inset: 10%; }
.ctile .ex-plain { width: 60%; fill: color-mix(in srgb, var(--c) 30%, white); }
.ex-ic { position: absolute; top: 12px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 0 0 3px var(--paper); }
.ex-ic .ic { width: 18px; height: 18px; }
.ctile b { font: 400 1rem/1.2 var(--display); margin-top: 6px; }
.ctile .ex-t { font-size: .84rem; color: var(--ink-3); line-height: 1.4; display: none; }
.ctile small { font-weight: 700; color: var(--copper-d); }
/* lift for every card-like element */
.ctile:hover, .card:hover, .need:hover, .acard:hover, .brand-tile:hover, .toolcard:hover, .safe-card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--c, var(--amber)) 60%, var(--line)); }
@media (prefers-reduced-motion: no-preference) {
  .ctile:hover .ex-ic, .toolcard:hover .tc-ic, .need:hover .need-ic, .safe-card:hover .safe-ic { animation: capSpin .8s var(--pop); }
  .ctile:hover .ex > img, .card:hover .ph img { transform: scale(1.06); }
  .tilt.tilting { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px); }
}
@keyframes capSpin { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(160deg) scale(1.18); } 100% { transform: rotate(360deg) scale(1); } }

/* situations */
.needs { display: grid; gap: 12px; }
.need { --c: var(--amber); display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none; transition: transform .4s var(--pop), box-shadow .3s, border-color .2s; min-width: 0; }
.need-ic { width: 52px; height: 52px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 22%, white); color: color-mix(in srgb, var(--c) 72%, black); -webkit-mask: var(--cap) center/contain no-repeat; mask: var(--cap) center/contain no-repeat; }
.need-ic .ic { width: 24px; height: 24px; }
.need b { display: block; font: 400 1.04rem/1.2 var(--display); } .need small { display: block; color: var(--ink-3); line-height: 1.4; margin-top: 2px; } .need em { display: block; font-style: normal; font-weight: 700; color: var(--copper-d); font-size: .85rem; margin-top: 4px; }

/* tools grid */
.toolgrid { display: grid; gap: 14px; }
.toolcard { --c: var(--amber); position: relative; display: grid; gap: 6px; padding: 18px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none; transition: transform .4s var(--pop), box-shadow .3s, border-color .2s; overflow: hidden; align-content: start; }
.toolcard::after { content: ''; position: absolute; right: -30px; bottom: -40px; width: 110px; height: 110px; background: var(--amber-l); -webkit-mask: var(--cap) center/contain no-repeat; mask: var(--cap) center/contain no-repeat; transition: transform .6s var(--pop); }
.toolcard:hover::after { transform: rotate(60deg) scale(1.2); }
.toolcard > * { position: relative; z-index: 1; }
.toolcard b { font: 400 1.08rem/1.2 var(--display); } .toolcard span:not(.tc-ic) { color: var(--ink-2); font-size: .93rem; }
.tc-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--amber); color: var(--stout); }
.tc-ic .ic { width: 24px; height: 24px; }
.stout-band .toolcard { background: #2E1F16; border-color: #4E3626; color: #F1E3CC; }
.stout-band .toolcard span:not(.tc-ic) { color: #CDB89C; }
.stout-band .toolcard::after { background: rgba(227, 154, 45, .12); }
.stout-band .toolcard:hover { border-color: var(--amber); box-shadow: 0 20px 40px -22px rgba(227, 154, 45, .6); }

/* safety band */
.safety { display: grid; gap: 14px; }
.safe-card { --c: var(--red); position: relative; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); padding: 18px; transition: transform .4s var(--pop), box-shadow .3s, border-color .2s; }
.safe-card::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: var(--c); }
.safe-ic { width: 48px; height: 48px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, white); color: var(--c); margin-bottom: 10px; -webkit-mask: var(--cap) center/contain no-repeat; mask: var(--cap) center/contain no-repeat; }
.safe-ic .ic { width: 24px; height: 24px; }
.safe-card b { display: block; font: 400 1.1rem/1.25 var(--display); margin-bottom: 6px; } .safe-card p { color: var(--ink-2); font-size: .95rem; }
.safe-card a { font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }

/* ---------- product cards ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card { --c: var(--amber); position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform .4s var(--pop), box-shadow .3s, border-color .2s; min-width: 0; }
.card .ph { position: relative; display: block; aspect-ratio: 1; background: radial-gradient(circle at 50% 58%, #fff 0 52%, color-mix(in srgb, var(--c) 9%, var(--foam)) 53%); padding: 14px; border-bottom: 1px solid var(--line); }
.card .ph::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c); transform: scaleX(.18); transform-origin: left; transition: transform .5s var(--ease); }
.card:hover .ph::after { transform: scaleX(1); }
.card .ph picture { display: block; width: 100%; height: 100%; }
.card .ph img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s; mix-blend-mode: multiply; }
.badge { position: absolute; z-index: 2; top: 10px; left: 10px; background: var(--stout); color: var(--amber); font: 800 .7rem/1 var(--text); letter-spacing: .04em; padding: 6px 9px; border-radius: 8px; }
.badge.inline { position: static; display: inline-block; margin-bottom: 10px; }
.card .body { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card .brand { font: 800 .7rem/1 var(--text); text-transform: uppercase; letter-spacing: .1em; color: var(--copper); }
.card h3 { font: 700 1rem/1.28 var(--text); margin: 0; overflow-wrap: anywhere; }
.card h3 a { color: var(--ink); text-decoration: none; } .card h3 a:hover { color: var(--copper-d); }
.kspecs { margin: 0; display: grid; gap: 3px; }
.kspecs div { display: flex; gap: 6px; font-size: .82rem; line-height: 1.3; min-width: 0; }
.kspecs dt { color: var(--ink-3); flex: none; } .kspecs dt::after { content: ':'; }
.kspecs dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.kspecs.row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.kspecs.row div { flex-direction: column; gap: 1px; background: var(--foam); border-radius: 10px; padding: 6px 10px; }
.kspecs.row dt::after { content: none; } .kspecs.row dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; } .kspecs.row dd { font-size: .92rem; }
.blurb { color: var(--ink-2); font-size: .9rem; }
.bestfor { font-size: .85rem; margin: 0; } .bestfor b { color: var(--hop-d); } .bestfor.big { font-size: 1rem; }
.card .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.card .actions .btn { flex: 1 1 auto; padding-inline: .7em; font-size: .84rem; min-height: 40px; }
.rail-wrap { position: relative; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 72%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
.rail-btn { display: none; position: absolute; top: 38%; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--stout); color: var(--amber); cursor: pointer; place-items: center; box-shadow: var(--sh-1); }
.rail-btn.prev { left: -14px; } .rail-btn.prev .ic { transform: rotate(180deg); } .rail-btn.next { right: -14px; }

/* article cards */
.acards { display: grid; gap: 14px; }
.acard { --c: var(--amber); display: flex; flex-direction: column; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); overflow: hidden; color: var(--ink); text-decoration: none; transition: transform .4s var(--pop), box-shadow .3s, border-color .2s; min-width: 0; }
.acard:hover { color: var(--ink); }
.acard .art { position: relative; display: block; aspect-ratio: 16 / 9; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 18%, white), color-mix(in srgb, var(--c) 6%, var(--foam))); overflow: hidden; }
.acard .art.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.acard:hover .art.photo img { transform: scale(1.05); }
.acard .art .collage { position: absolute; inset: 8px; }
.acard .art.plain { display: grid; place-items: center; }
.acard .art.plain .art-cap { position: absolute; height: 80%; fill: color-mix(in srgb, var(--c) 22%, white); }
.acard .art.plain > .ic { position: relative; width: 52px; height: 52px; color: color-mix(in srgb, var(--c) 70%, black); }
.badge-ic { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--stout); color: var(--amber); z-index: 3; }
.badge-ic .ic { width: 20px; height: 20px; }
.acard .txt { padding: 14px 16px 18px; display: grid; gap: 6px; }
.acard .kind { font: 800 .7rem/1 var(--text); text-transform: uppercase; letter-spacing: .12em; color: var(--hop-d); }
.acard h3 { margin: 0; font-size: 1.1rem; } .acard p { margin: 0; color: var(--ink-2); font-size: .92rem; }
/* collage of product photos in bottle-cap frames */
.collage { position: relative; display: block; }
.collage .cg-cap { position: absolute; inset: 0; display: grid; place-items: center; }
.collage .cg-bg { width: 74%; height: 92%; fill: rgba(255, 255, 255, .55); }
.cg-item { position: absolute; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--sh-1); border: 1.5px solid var(--line); transition: transform .5s var(--pop); }
.cg-item picture, .cg-item img { width: 100%; height: 100%; }
.cg-item img { object-fit: contain; padding: 8%; }
.collage.n1 .i0 { inset: 6% 26%; }
.collage.n2 .i0 { left: 10%; top: 8%; width: 38%; height: 84%; } .collage.n2 .i1 { right: 10%; top: 8%; width: 38%; height: 84%; }
.collage.n3 .i0 { left: 33%; top: 4%; width: 34%; height: 82%; z-index: 2; } .collage.n3 .i1 { left: 6%; top: 18%; width: 30%; height: 70%; transform: rotate(-7deg); } .collage.n3 .i2 { right: 6%; top: 18%; width: 30%; height: 70%; transform: rotate(7deg); }
.ctile .collage.n1 .i0 { inset: 0; border: 0; border-radius: 0; box-shadow: none; background: #fff; }
.ctile .collage.n1 .i0 img { padding: 12%; }
.ctile .cg-cap { display: none !important; }
.acard:hover .collage .i1 { transform: rotate(-13deg) translateX(-4px); }
.acard:hover .collage .i2 { transform: rotate(13deg) translateX(4px); }
.acard:hover .collage .i0 { transform: translateY(-4px); }

/* ---------- charts & stats ---------- */
.chart { margin: 24px 0; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); padding: 18px; }
.chart h4 { font-size: 1.05rem; margin-bottom: 2px; } .chart .sub { color: var(--ink-3); font-size: .9rem; margin-bottom: 12px; }
.chart svg { width: 100%; height: auto; display: block; font-family: var(--text); }
.chart .legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; font-size: .85rem; }
.chart .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.chart .src { font-size: .8rem; color: var(--ink-3); margin-top: 10px; }
.bar-anim .bar, .vbar-anim .bar { transition: transform 1.1s var(--pop); transform-box: fill-box; }
.bar-anim .bar { transform-origin: left center; } .vbar-anim .bar { transform-origin: center bottom; }
.motion .bar-anim:not(.in) .bar { transform: scaleX(0); } .motion .vbar-anim:not(.in) .bar { transform: scaleY(0); }
.donut-anim .seg { transition: stroke-dasharray 1.2s ease; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 20px 0; }
.stat { position: relative; background: var(--stout); color: #F1E3CC; border-radius: var(--r); padding: 16px 16px 14px; overflow: hidden; }
.stat::after { content: ''; position: absolute; right: -20px; top: -20px; width: 70px; height: 70px; background: rgba(227, 154, 45, .18); -webkit-mask: var(--cap) center/contain no-repeat; mask: var(--cap) center/contain no-repeat; }
.stat b { display: block; font: 400 1.9rem/1.05 var(--display); color: var(--amber); font-variant-numeric: tabular-nums; } .stat.long b { font-size: 1.35rem; }
.stat span { display: block; font-size: .9rem; font-weight: 600; margin-top: 4px; } .stat small { display: block; margin-top: 6px; color: #CDB89C; } .stat small a { color: #FFD38A; }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: var(--amber); box-shadow: var(--sh-1); }
.faq summary { list-style: none; cursor: pointer; padding: 14px 54px 14px 18px; font: 700 1.03rem/1.35 var(--text); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 16px; top: 50%; width: 24px; height: 24px; margin-top: -12px; background: var(--amber); -webkit-mask: var(--cap) center/contain no-repeat; mask: var(--cap) center/contain no-repeat; transition: transform .45s var(--pop), background .2s; }
.faq details[open] summary::after { transform: rotate(180deg) scale(.85); background: var(--hop); }
.faq details > div { padding: 0 18px 16px; color: var(--ink-2); }

/* CTA band */
.cta-band { position: relative; overflow: hidden; display: grid; gap: 16px; align-items: center; background: linear-gradient(120deg, var(--stout) 30%, #5A3A22); color: #fff; border-radius: 24px; padding: 28px 22px; }
.cta-band h2 { color: #FFF3DE; } .cta-band p { color: #D8C4A6; margin: 0; }
.cta-band > div, .cta-band > .btn { position: relative; z-index: 2; }
.cta-band .btn { justify-self: start; border-color: var(--amber); }
.cta-cap { position: absolute; right: -50px; top: -60px; width: 240px; fill: rgba(227, 154, 45, .14); }
@media (prefers-reduced-motion: no-preference) { .cta-cap { animation: spin 50s linear infinite; } }

/* ---------- page heroes ---------- */
.cat-hero, .article-hero, .page-hero { position: relative; isolation: isolate; padding: 6px 0 34px; overflow: hidden; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px; font-size: .85rem; padding: 16px 0 10px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; font-weight: 600; } .crumbs a:hover { color: var(--copper-d); }
.crumbs span::before { content: '›'; margin: 0 6px 0 2px; color: var(--ink-3); }
.hero-split { display: grid; gap: 22px; align-items: center; }
.hero-text { min-width: 0; }
.hero-text h1 { font-size: clamp(1.85rem, 4.8vw, 2.9rem); overflow-wrap: anywhere; }
.cat-ic { width: 64px; height: 64px; display: grid; place-items: center; background: var(--c); color: #fff; margin-bottom: 12px; -webkit-mask: var(--cap) center/contain no-repeat; mask: var(--cap) center/contain no-repeat; }
.cat-ic .ic { width: 30px; height: 30px; }
.kicker { display: inline-flex; align-items: center; gap: 6px; font: 800 .76rem/1 var(--text); text-transform: uppercase; letter-spacing: .12em; color: var(--hop-d); margin-bottom: 10px; }
.meta { font-size: .86rem; color: var(--ink-3); }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.quick a { background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; padding: 7px 13px; font-weight: 700; font-size: .9rem; text-decoration: none; color: var(--ink); transition: border-color .2s, transform .25s var(--pop); }
.quick a:hover { border-color: var(--amber); transform: translateY(-2px); } .quick small { color: var(--ink-3); }
.hero-photo { margin: 0; position: relative; min-width: 0; }
.ph-frame { border-radius: 22px; overflow: hidden; box-shadow: var(--sh-2); background: var(--foam-2); border: 1.5px solid var(--line); }
.ph-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.credit { display: block; font-size: .74rem; color: var(--ink-3); margin-top: 8px; } .credit a { color: inherit; }
.hero-strip { display: flex; gap: 8px; margin-top: -26px; padding: 0 14px; position: relative; z-index: 2; overflow: hidden; }
.hero-strip a { width: 58px; height: 58px; flex: none; border-radius: 14px; background: #fff; border: 1.5px solid var(--line); overflow: hidden; transition: transform .3s var(--pop); box-shadow: var(--sh-1); }
.hero-strip a:nth-child(even) { transform: translateY(6px); } .hero-strip a:hover { transform: translateY(-4px) scale(1.06); }
.hero-strip picture, .hero-strip img { width: 100%; height: 100%; } .hero-strip img { object-fit: contain; padding: 6px; }
.hero-collage .collage { aspect-ratio: 4 / 3; background: linear-gradient(160deg, color-mix(in srgb, var(--c, var(--amber)) 18%, white), var(--paper)); border-radius: 22px; border: 1.5px solid var(--line); box-shadow: var(--sh-2); }
.hero-collage .hero-strip { margin-top: 14px; padding: 0; }
.hero-season-art { max-width: 300px; width: 100%; justify-self: center; }
.small-photo .ph-frame img { aspect-ratio: 16 / 9; }

/* hubs */
.hub { padding: 10px 0 40px; }
.chipbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 18px; }
.chipbar-l { font-weight: 700; font-size: .88rem; color: var(--ink-2); width: 100%; }
.fchip { --c: var(--amber); display: inline-flex; gap: 6px; align-items: center; border: 1.5px solid var(--line); background: var(--paper); border-radius: 10px; padding: 7px 12px; font: 700 .86rem var(--text); color: var(--ink); cursor: pointer; min-height: 40px; transition: border-color .2s, background .2s, transform .25s var(--pop); }
.fchip:hover { border-color: var(--c); transform: translateY(-1px); }
.fchip.on { background: color-mix(in srgb, var(--c) 18%, white); border-color: var(--c); }
.fchip small { color: var(--ink-3); }
.chipbar .reset { border: 0; background: none; font-weight: 700; color: var(--red); cursor: pointer; text-decoration: underline; }
.chipbar .count { margin-left: auto; font-size: .88rem; color: var(--ink-3); }
.empty, .empty-state { padding: 20px; background: var(--foam-2); border-radius: var(--r); text-align: center; color: var(--ink-2); }
.show-more { display: flex; margin: 18px auto 0; }
.tool-ctas { display: grid; gap: 12px; margin: 26px 0; }
.tool-cta { display: flex; gap: 12px; align-items: center; background: var(--stout); border-radius: var(--r); padding: 14px 16px; text-decoration: none; color: #F1E3CC; transition: transform .35s var(--pop), box-shadow .25s; }
.tool-cta:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(142, 82, 15, .8); }
.tool-cta > span:nth-child(2) { flex: 1; min-width: 0; }
.tool-cta b { display: block; font: 400 1.04rem/1.25 var(--display); color: #FFF3DE; } .tool-cta small { color: #CDB89C; }
.tool-cta > .ic { color: var(--amber); }
.tool-cta.slim { padding: 10px 14px; margin: 14px 0; }
.hub-prose { margin-top: 36px; } .hub-read { margin-top: 40px; }
.hub-safety { display: grid; gap: 0; margin-top: 10px; }
.need-group { margin: 30px 0; } .need-group h2 { font-size: 1.35rem; display: flex; gap: 8px; align-items: center; }

/* ---------- prose ---------- */
.prose { min-width: 0; font-size: 1.04rem; }
.prose h2 { margin: 1.7em 0 .55em; scroll-margin-top: 96px; } .prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.3em 0 .45em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.1em; } .prose li { margin: .32em 0; }
.prose ul > li::marker { color: var(--amber); font-size: 1.1em; }
.callout { display: flex; gap: 12px; background: var(--steel-l); border-left: 5px solid var(--steel); border-radius: 0 var(--r) var(--r) 0; padding: 14px 16px; margin: 20px 0; }
.callout > .ic { color: var(--steel); width: 24px; height: 24px; margin-top: 2px; }
.callout > div { min-width: 0; }
.callout.warn { background: var(--red-l); border-color: var(--red); } .callout.warn > .ic { color: var(--red); }
.callout b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.04rem; margin-bottom: 2px; }
.callout .src { display: block; margin-top: 6px; color: var(--ink-3); }
.table-wrap { overflow-x: auto; margin: 18px 0 6px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--paper); -webkit-overflow-scrolling: touch; }
.table-cap { font: 400 .98rem var(--display); margin: 0; padding: 12px 14px 0; }
.t { width: 100%; border-collapse: collapse; font-size: .92rem; }
.t caption { text-align: left; font: 400 1rem var(--display); padding: 12px 14px 4px; }
.t th, .t td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.t thead th { background: var(--foam-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); white-space: nowrap; }
.t tbody tr:last-child td { border-bottom: 0; }
.t tbody th { font-weight: 700; white-space: nowrap; } .t tbody th small { display: block; font-weight: 500; color: var(--ink-3); }
.yes { color: var(--hop-d); font-weight: 800; } .no { color: var(--red); font-weight: 800; } .maybe { color: var(--amber-dd); font-weight: 800; }
.src-note { font-size: .8rem; color: var(--ink-3); margin: 6px 0 18px; }
.steps { list-style: none; padding: 0 !important; display: grid; gap: 12px; }
.steps > li { display: flex; gap: 14px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); padding: 14px; margin: 0 !important; }
.steps .sn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--amber); color: var(--stout); font: 400 1.05rem var(--display); -webkit-mask: var(--cap) center/contain no-repeat; mask: var(--cap) center/contain no-repeat; }
.steps b { display: block; font-size: 1.04rem; } .steps p { margin: 4px 0 0; }
.step-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.step-picks a { display: flex; gap: 8px; align-items: center; background: var(--foam); border-radius: 10px; padding: 4px 12px 4px 4px; font-size: .85rem; font-weight: 600; text-decoration: none; }
.step-picks img { width: 32px; height: 32px; object-fit: contain; border-radius: 8px; background: #fff; }
blockquote { margin: 20px 0; padding: 14px 18px; border-left: 5px solid var(--hop); background: var(--hop-ll); border-radius: 0 var(--r-s) var(--r-s) 0; }
blockquote cite { display: block; margin-top: 6px; font-size: .86rem; color: var(--ink-3); font-style: normal; }
.fig { margin: 24px 0; }
.fig figcaption { font-size: .86rem; color: var(--ink-2); margin-top: 8px; display: grid; gap: 2px; }
.tldr { position: relative; background: var(--amber-ll); border: 1.5px solid var(--amber); border-radius: var(--r); padding: 16px 18px 6px; margin-bottom: 24px; }
.tldr b { font: 400 1.08rem var(--display); } .tldr ul { margin-top: 8px; }
.verdict, .method { border-radius: var(--r); padding: 16px 18px; margin: 26px 0; }
.verdict { background: var(--hop-ll); border: 1.5px solid var(--hop); }
.verdict > b, .method > b { display: block; font: 400 1.12rem var(--display); margin-bottom: 6px; }
.method { background: var(--foam-2); border: 1.5px dashed var(--line-2); font-size: .95rem; } .method p:last-child { margin-bottom: 0; }
.sources { font-size: .9rem; padding-left: 1.3em; } .sources li { margin: 6px 0; overflow-wrap: anywhere; }
.article-layout { display: grid; gap: 30px; padding: 24px 0 50px; }
.aside { display: grid; gap: 14px; align-content: start; min-width: 0; }
.box { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); padding: 16px; }
.box h3 { font-size: 1.02rem; } .box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.box a { display: flex; gap: 8px; align-items: flex-start; text-decoration: none; font-weight: 600; font-size: .93rem; color: var(--ink); } .box a:hover { color: var(--copper-d); }

/* data blocks */
.carb-t td { text-align: center; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--amber) calc(var(--h) * 55%), white); transition: background .3s, box-shadow .3s; }
.carb-t td.on { background: var(--stout); color: var(--amber); font-weight: 800; box-shadow: inset 0 0 0 2px var(--amber); }
.carb-t thead th { text-align: center; }
.vbar { display: inline-block; position: relative; width: 90px; height: 10px; border-radius: 6px; background: var(--malt); margin-right: 8px; vertical-align: 0; }
.vbar i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); border-radius: 6px; background: linear-gradient(90deg, var(--amber), var(--copper)); }
.swatch { display: inline-block; width: 30px; height: 14px; border-radius: 4px; margin-right: 8px; vertical-align: -2px; background: linear-gradient(90deg, var(--s1), var(--s2)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.style-t td, .yeast-t td { white-space: nowrap; } .yeast-t td:last-child { white-space: normal; min-width: 220px; }
.lawbox { background: var(--paper); border: 1.5px solid var(--line); border-radius: 20px; padding: 18px; margin: 22px 0; box-shadow: var(--sh-1); }
.law-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.law-head h3 { margin: 0 0 4px; font-size: 1.25rem; } .law-head p { margin: 0; color: var(--ink-2); font-size: .94rem; }
.law-ic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: var(--steel); color: #fff; -webkit-mask: var(--cap) center/contain no-repeat; mask: var(--cap) center/contain no-repeat; }
.law-ic .ic { width: 24px; height: 24px; }
.law-rows { margin: 0; display: grid; gap: 8px; }
.law-rows > div { display: grid; gap: 2px; background: var(--foam); border-radius: 12px; padding: 10px 12px; }
.law-rows > div.warn { background: var(--red-l); }
.law-rows dt { display: flex; gap: 8px; align-items: center; font-weight: 800; } .law-rows dt .ic { color: var(--hop-d); } .law-rows .warn dt .ic { color: var(--red); }
.law-rows dd { margin: 0; color: var(--ink-2); font-size: .94rem; } .law-rows dd small { display: block; margin-top: 2px; }
.law-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.law-gal > div { background: var(--stout); color: #D8C4A6; border-radius: 12px; padding: 10px; text-align: center; }
.law-gal b { display: block; font: 400 1.7rem/1 var(--display); color: var(--amber); } .law-gal span { font-size: .78rem; }

/* ranked list */
.rank { --c: var(--amber); position: relative; display: grid; gap: 14px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); padding: 18px 16px 16px; margin: 26px 0; scroll-margin-top: 96px; }
.rank .num { position: absolute; top: -16px; left: -6px; width: 46px; height: 46px; display: grid; place-items: center; background: var(--c); color: #fff; font: 400 1.25rem var(--display); z-index: 2; -webkit-mask: var(--cap) center/contain no-repeat; mask: var(--cap) center/contain no-repeat; }
.rank .ph { display: block; background: radial-gradient(circle at 50% 55%, #fff 0 55%, var(--foam) 56%); border-radius: 14px; aspect-ratio: 4 / 3; padding: 10px; }
.rank .ph picture, .rank .ph img { width: 100%; height: 100%; } .rank .ph img { object-fit: contain; mix-blend-mode: multiply; }
.rbody { min-width: 0; }
.rank h3 { font-size: 1.22rem; margin: 6px 0 2px; } .rank h3 a { color: var(--ink); text-decoration: none; }
.rbrand { margin: 0; font: 800 .72rem/1.2 var(--text); text-transform: uppercase; letter-spacing: .1em; color: var(--copper); }
.award { display: inline-block; background: var(--stout); color: var(--amber); font: 800 .72rem/1.2 var(--text); text-transform: uppercase; letter-spacing: .08em; padding: 6px 10px; border-radius: 8px; }
.fit { display: grid; gap: 4px; margin: 8px 0; } .fit p { margin: 0; font-size: .93rem; }
.yes-fit b { color: var(--hop-d); } .no-fit b { color: var(--red); }
.pc { display: grid; gap: 10px; margin: 10px 0; } .pc > div { background: var(--foam); border-radius: 12px; padding: 10px 14px; }
.pc ul { margin: 4px 0 0; padding-left: 1.1em; font-size: .92rem; }
.pros b { color: var(--hop-d); } .cons b { color: var(--red); }
.ractions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* comparison */
.vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; margin: 20px 0; }
.vs .side { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); padding: 12px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; min-width: 0; }
.vs .side .ph { width: 100%; aspect-ratio: 1; border-radius: 14px; background: var(--foam); display: grid; place-items: center; overflow: hidden; position: relative; }
.vs .side .ph picture, .vs .side .ph img { width: 100%; height: 100%; } .vs .side .ph img { object-fit: contain; padding: 10px; }
.vs .side .ph.art { background: color-mix(in srgb, var(--c) 16%, white); }
.vs .side .ph .art-cap { position: absolute; height: 76%; fill: rgba(255, 255, 255, .7); }
.vs .side .ph .mono { position: relative; font: 400 2rem var(--display); }
.vs .side .ph > .ic { position: relative; width: 46%; height: 46%; color: color-mix(in srgb, var(--c) 70%, black); }
.vs .side .ph .collage { width: 100%; height: 100%; }
.vs .side h3 { font-size: 1rem; margin: 4px 0 0; overflow-wrap: anywhere; } .vs .side p { font-size: .85rem; color: var(--ink-2); margin: 0; }
.vs .mid { align-self: center; width: 48px; height: 48px; display: grid; place-items: center; background: var(--stout); color: var(--amber); font: 400 1.05rem var(--display); -webkit-mask: var(--cap) center/contain no-repeat; mask: var(--cap) center/contain no-repeat; }
.vs-picks { display: grid; gap: 18px; } .grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-in { margin: 18px 0; }

/* ---------- product page ---------- */
.product { display: grid; gap: 22px; padding: 6px 0 28px; }
.gallery { min-width: 0; }
.gallery .main { position: relative; aspect-ratio: 1; background: radial-gradient(circle at 50% 55%, #fff 0 60%, var(--foam-2) 61%); border: 1.5px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--sh-1); }
.gallery .main picture { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; padding: 18px; }
.gallery .main picture.on { opacity: 1; }
.gallery .main img { width: 100%; height: 100%; object-fit: contain; }
.thumbs { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; padding: 2px; }
.thumbs button { width: 64px; height: 64px; flex: none; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; padding: 6px; cursor: pointer; transition: border-color .2s, transform .25s var(--pop); }
.thumbs button:hover { transform: translateY(-2px); } .thumbs button.on { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-l); }
.thumbs picture, .thumbs img { width: 100%; height: 100%; } .thumbs img { object-fit: contain; }
.pinfo { min-width: 0; }
.pinfo .brand { font: 800 .78rem/1 var(--text); text-transform: uppercase; letter-spacing: .12em; color: var(--copper); text-decoration: none; }
.pinfo h1 { font-size: clamp(1.65rem, 4.2vw, 2.4rem); margin: 8px 0 12px; overflow-wrap: anywhere; }
.pinfo .blurb { font-size: 1.02rem; }
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.tagrow a { --c: var(--amber); display: inline-flex; gap: 6px; align-items: center; background: color-mix(in srgb, var(--c) 14%, white); color: var(--ink); border-radius: 8px; padding: 5px 11px; font-size: .84rem; font-weight: 700; text-decoration: none; }
.hl { padding-left: 1.2em; } .hl li::marker { color: var(--amber); }
.buybox { background: var(--amber-ll); border: 1.5px solid var(--amber-l); border-radius: var(--r); padding: 16px; margin-top: 16px; }
.buybox p { font-size: .84rem; color: var(--ink-3); margin: 10px 0 0; }
.product-more { display: grid; gap: 26px; padding-bottom: 40px; } .product-more > * { min-width: 0; }
.spec { width: 100%; border-collapse: collapse; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-s); overflow: hidden; font-size: .94rem; }
.spec th, .spec td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.spec th { width: 38%; background: var(--foam-2); font-weight: 700; color: var(--ink-2); }
.facts { padding-left: 1.2em; } .facts li { margin: 6px 0; }

/* review */
.review-hero { display: grid; gap: 22px; padding: 6px 0 20px; }
.rv-info { min-width: 0; } .rv-info h1 { font-size: clamp(1.75rem, 4.4vw, 2.5rem); }
.verdict-card { background: var(--stout); color: #EBDCC4; border-radius: 20px; padding: 18px 18px 16px; margin: 14px 0; box-shadow: var(--sh-2); }
.verdict-card .kspecs.row div { background: #2E1F16; } .verdict-card .kspecs dt { color: #B9A48C; } .verdict-card .vc-long a { color: var(--amber); }
.vc-label { display: inline-flex; gap: 6px; align-items: center; font: 800 .76rem/1 var(--text); text-transform: uppercase; letter-spacing: .12em; color: var(--amber); }
.vc-label .ic { width: 22px; height: 22px; }
.vc-short { font: 400 1.18rem/1.35 var(--display); margin: 8px 0; color: #FFF3DE; } .vc-long p:last-child { margin-bottom: 0; }
.fit-grid { display: grid; gap: 12px; }
.fit-grid > div { border-radius: var(--r); padding: 14px 16px; }
.fit-grid b { display: flex; gap: 8px; align-items: center; font-family: var(--display); font-weight: 400; font-size: 1.04rem; }
.fit-grid ul { margin: 8px 0 0; }
.fit-yes { background: var(--hop-ll); border: 1.5px solid var(--hop); } .fit-no { background: var(--red-l); border: 1.5px solid var(--red); }
.alts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .alt { display: grid; gap: 8px; align-content: start; } .alt-why { font-size: .9rem; margin: 0; }

/* ---------- calendar page ---------- */
.cal-wrap { padding: 10px 0 50px; }
.cal-h { margin-top: 1.6em; }
.region-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; }
.region-tabs button { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--paper); border-radius: 10px; padding: 9px 16px; font: 700 .92rem var(--text); color: var(--ink); cursor: pointer; white-space: nowrap; min-height: 42px; }
.region-tabs button:hover { border-color: var(--amber); } .region-tabs button[aria-selected="true"] { background: var(--stout); color: var(--foam); border-color: var(--stout); }
.year-meta { color: var(--ink-2); }
.theme-key { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.tchip { display: inline-block; font: 800 .68rem/1 var(--text); text-transform: uppercase; letter-spacing: .07em; padding: 5px 8px; border-radius: 6px; background: var(--tl); color: var(--tc); }
.months { display: grid; gap: 12px; }
.month-card { background: var(--paper); border: 1.5px solid var(--line); border-top: 5px solid var(--tc); border-radius: var(--r); padding: 14px; }
.month-card.now { box-shadow: 0 0 0 2px var(--tc), var(--sh-2); }
.month-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1.12rem; }
.month-card h3 .tchip { margin-left: auto; }
.mc-n { font: 800 .8rem/1 var(--text); color: var(--ink-3); }
.mc-focus { font-weight: 600; color: var(--ink-2); font-size: .94rem; }

/* ---------- tools ---------- */
.tool-wrap { padding: 0 0 20px; display: grid; gap: 16px; }
.tool { display: grid; background: var(--paper); border: 1.5px solid var(--line); border-radius: 22px; box-shadow: var(--sh-2); overflow: hidden; min-width: 0; }
.tool-in, .tool-out { padding: 18px; min-width: 0; }
.tool-out { background: linear-gradient(180deg, var(--amber-ll), var(--paper)); border-top: 1.5px solid var(--line); }
.field { display: grid; gap: 5px; margin-bottom: 12px; min-width: 0; }
.field label { font-weight: 700; font-size: .93rem; }
.field small { color: var(--ink-3); line-height: 1.4; }
.field input, .field select, .field textarea, .hrow input { width: 100%; min-height: 46px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; padding: 9px 12px; font: 500 1rem var(--text); color: var(--ink); min-width: 0; font-variant-numeric: tabular-nums; }
.field textarea { min-height: 64px; resize: vertical; }
.field :is(select, input, textarea):focus, .hrow input:focus, .budget-t input:focus { outline: none; border-color: var(--amber-d); box-shadow: 0 0 0 4px var(--amber-l); }
.u { font-weight: 600; color: var(--ink-3); font-size: .86em; }
.field-row { display: grid; gap: 0 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
fieldset legend { font-weight: 800; font-size: .95rem; margin-bottom: 8px; padding: 0; }
fieldset legend small { font-weight: 500; color: var(--ink-3); }
fieldset.fit, fieldset.hops { background: var(--foam); border-radius: 16px; padding: 12px 14px 6px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg legend { width: 100%; }
.seg label { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line-2); border-radius: 10px; padding: 8px 12px; font-weight: 700; font-size: .9rem; cursor: pointer; background: #fff; min-height: 42px; transition: border-color .2s, background .2s; }
.seg label:hover { border-color: var(--amber-d); }
.seg input { accent-color: var(--copper); margin: 0; }
.seg label:has(input:checked) { background: var(--stout); color: var(--foam); border-color: var(--stout); }
.seg.units label { font-size: .82rem; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; font-weight: 600; margin: 4px 0 12px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--copper); margin: 1px 0 0; flex: none; }
.res-main { display: grid; gap: 2px; margin-bottom: 12px; }
.res-main span, .res-row span { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); }
.res-main b { font: 400 clamp(1.9rem, 5.4vw, 2.7rem)/1.05 var(--display); color: var(--copper-d); font-variant-numeric: tabular-nums; }
.res-main b small, .res-row b small { font: 600 .5em var(--text); color: var(--ink-3); }
.res-main small { color: var(--ink-2); font-weight: 600; }
.res-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.res-row > div { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 12px; min-width: 0; }
.res-row b { display: block; font: 400 1.25rem/1.2 var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.res-row small { display: block; color: var(--ink-3); font-size: .78rem; margin-top: 2px; }
.ic-note { font-size: .9rem; background: var(--amber-l); border-radius: 12px; padding: 8px 12px; } .ic-note:empty { display: none; }
.cs-warn { background: var(--red-l); border-radius: 12px; padding: 8px 12px; font-size: .9rem; color: var(--red); font-weight: 600; }
.ck-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 4px; }
.ck-actions small { color: var(--ink-3); flex: 1 1 220px; }
.ck-actions .field { margin: 0; }
/* tool visuals */
.gauge-bar { position: relative; height: 16px; border-radius: 10px; background: var(--malt); margin: 4px 0 26px; }
.gauge-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 10px; background: linear-gradient(90deg, #F2C14E, var(--amber), var(--copper)); transition: width .8s var(--pop); }
.gauge-bar span { position: absolute; top: 20px; font-size: .74rem; color: var(--ink-3); } .gauge-bar span:nth-of-type(1) { left: 0; } .gauge-bar span:nth-of-type(2) { left: 50%; transform: translateX(-50%); } .gauge-bar span:nth-of-type(3) { right: 0; }
.vol-meter { position: relative; height: 20px; border-radius: 10px; background: var(--malt); margin: 4px 0 30px; overflow: visible; }
.vol-meter i { position: absolute; top: 0; bottom: 0; transition: width .7s var(--pop), left .7s var(--pop); }
.vm-res { left: 0; background: var(--steel); border-radius: 10px 0 0 10px; } .vm-add { background: repeating-linear-gradient(135deg, var(--amber) 0 8px, #F2C14E 8px 14px); }
.vm-max { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--red); font: 700 .7rem/1 var(--text); color: var(--red); }
.vm-max::after { content: 'bottle limit'; position: absolute; top: 30px; left: -30px; white-space: nowrap; }
.vm-max { font-size: 0; }
.budget-t tr.on td, #pr-all tr.on td { background: var(--amber-ll); font-weight: 700; }
.psi-dial { max-width: 260px; margin: 0 auto 6px; }
.psi-dial svg { width: 100%; height: auto; display: block; overflow: visible; }
.pd-track { fill: none; stroke: var(--malt); stroke-width: 16; stroke-linecap: round; }
.pd-fill { fill: none; stroke: var(--amber); stroke-width: 16; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray .9s var(--pop); }
.psi-dial text { font: 700 10px var(--text); fill: var(--ink-3); }
.pd-needle { transform-origin: 100px 104px; transform: rotate(-90deg); transition: transform .9s var(--pop); }
.pd-needle path { stroke: var(--stout); stroke-width: 4; stroke-linecap: round; } .pd-needle circle { fill: var(--stout); }
.hop-rows { display: grid; gap: 8px; margin-bottom: 10px; }
.hrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px 8px; align-items: end; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 8px; }
.hrow > input[data-k="n"] { grid-column: 1 / -1; min-height: 40px; font-weight: 700; }
.hrow label { display: grid; gap: 3px; font-size: .74rem; font-weight: 700; color: var(--ink-3); min-width: 0; }
.hrow label input { min-height: 40px; padding: 6px 8px; }
.hrow .del, .log-table .del { border: 0; background: none; color: var(--red); font-weight: 800; cursor: pointer; font-size: 1.2rem; min-width: 32px; min-height: 40px; }
.log-table .del { font-size: .86rem; text-decoration: underline; }
.ibu-bars, .ion-bars, .budget-bars { display: grid; gap: 8px; margin: 6px 0 14px; }
.ib { display: grid; grid-template-columns: 90px minmax(0, 1fr) 52px; gap: 4px 10px; align-items: center; font-size: .86rem; font-weight: 700; }
.ib span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib i { display: block; height: 16px; border-radius: 8px; background: var(--malt); position: relative; overflow: hidden; }
.ib i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, var(--hop), var(--hop-d)); border-radius: 8px; transition: width .8s var(--pop); }
.ion-bars .ib i::after { background: linear-gradient(90deg, var(--steel), #2A4C66); } .ion-SO4 i::after { background: linear-gradient(90deg, var(--amber), var(--copper)) !important; } .ion-Cl i::after { background: linear-gradient(90deg, #8FC14F, var(--hop-d)) !important; }
.budget-bars .ib i::after { background: linear-gradient(90deg, var(--amber), var(--copper)); }
.ib b { text-align: right; font: 400 1rem var(--display); font-variant-numeric: tabular-nums; }
.ib small { grid-column: 2 / -1; color: var(--ink-3); font-weight: 600; margin-top: -4px; }
.srm-glass { width: 120px; margin: 0 auto 8px; }
.srm-glass svg { width: 100%; height: auto; display: block; }
#srm-fill { fill: #DE7C00; transition: fill .6s ease; }
.srm-foam { fill: #FFF8EA; } .srm-glass-o { fill: none; stroke: var(--stout); stroke-width: 3; stroke-linejoin: round; }
.srm-scale { position: relative; display: flex; height: 14px; border-radius: 7px; overflow: visible; margin: 0 0 18px; }
.srm-scale i { flex: 1; } .srm-scale i:first-child { border-radius: 7px 0 0 7px; } .srm-scale i:last-of-type { border-radius: 0 7px 7px 0; }
.srm-scale b { position: absolute; top: -5px; width: 4px; height: 24px; margin-left: -2px; background: var(--stout); border-radius: 2px; transition: left .7s var(--pop); box-shadow: 0 0 0 2px #fff; }
.thermo-bar { position: relative; width: 34px; height: 150px; margin: 0 auto 12px; border-radius: 17px; background: var(--malt); border: 2px solid var(--stout); }
.thermo-bar i { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 0; max-height: calc(100% - 8px); border-radius: 12px; background: linear-gradient(0deg, var(--red), var(--amber)); transition: height .8s var(--pop); }
.thermo-bar b { position: absolute; left: 42px; width: 90px; border-top: 2px dashed var(--stout); font: 700 .74rem/1.4 var(--text); color: var(--ink-2); transition: bottom .8s var(--pop); }
.ion-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.ion-grid .field { margin-bottom: 8px; } .ion-grid .field input { min-height: 40px; }
.cell-dots { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 14px; min-height: 12px; }
.cell-dots i { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF3D6, #D9A55A); box-shadow: inset 0 0 0 1px rgba(142, 82, 15, .4); }
@media (prefers-reduced-motion: no-preference) { .cell-dots i { animation: popIn .4s var(--pop) both; } .cell-dots i:nth-child(3n) { animation-delay: .05s; } .cell-dots i:nth-child(3n+1) { animation-delay: .1s; } }
.kettle-lines { position: relative; height: 110px; width: 120px; margin: 4px auto 18px; border: 3px solid var(--stout); border-top: 0; border-radius: 0 0 18px 18px; background: #fff; }
.kettle-lines i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 14px 14px; transition: height .8s var(--pop); }
#dl-kpre { background: rgba(242, 178, 60, .35); } #dl-kpost { background: linear-gradient(0deg, var(--copper), var(--amber)); }
.kettle-lines span { position: absolute; right: -40px; font: 700 .72rem var(--text); color: var(--ink-3); } .kettle-lines span:nth-of-type(1) { top: 0; } .kettle-lines span:nth-of-type(2) { bottom: 4px; }
.budget-t td { vertical-align: middle; } .budget-t input { width: 100%; min-width: 70px; min-height: 40px; border: 1.5px solid var(--line-2); border-radius: 10px; padding: 6px 8px; font: 500 .95rem var(--text); }
.budget-t td:nth-child(2) input { max-width: 70px; }
.budget-t .lt, .budget-t tfoot td { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.budget-t tfoot th, .budget-t tfoot td { background: var(--stout); color: var(--amber); font: 400 1.1rem var(--display); }
.budget-t .opt { color: var(--ink-3); font-weight: 600; } .bg-link { font-size: .82rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
/* formula box */
.formula-box { background: var(--stout); color: #EBDCC4; border-radius: 22px; padding: 20px; }
.formula-box h2, .formula-box h3 { color: #FFF3DE; } .formula-box h2 { margin: 0; font-size: 1.35rem; } .formula-box h3 { font-size: 1rem; margin: 14px 0 6px; }
.fx-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.fx-ic { width: 44px; height: 44px; display: grid; place-items: center; background: var(--amber); color: var(--stout); -webkit-mask: var(--cap) center/contain no-repeat; mask: var(--cap) center/contain no-repeat; flex: none; }
.fx-lines { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.fx-lines li::marker { color: var(--amber); font-weight: 800; }
.fx-lines code { display: block; background: #2E1F16; color: #FFE1A8; border: 1px solid #4E3626; border-radius: 10px; padding: 8px 10px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.formula-box ul { margin: 0; padding-left: 1.2em; font-size: .94rem; } .formula-box a { color: var(--amber); }
.fx-ex { margin: 14px 0 8px; background: rgba(111, 160, 50, .16); border-left: 4px solid var(--hop); padding: 10px 12px; border-radius: 0 10px 10px 0; }
.fx-src { font-size: .9rem; } .fx-note { font-size: .82rem; color: #B9A48C; margin: 0; }
/* logs */
.log-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.log-head h3 { margin: 0; }
.field-row.four { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.field-row.three { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.hl-h { margin-top: 10px; font-size: 1.05rem; }
.bl-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.bl-summary span { background: var(--stout); color: var(--amber); border-radius: 8px; padding: 6px 12px; font-weight: 700; font-size: .88rem; }
.bl-summary:empty { display: none; }
.log-table td { font-size: .88rem; }
.empty-row td { text-align: center; color: var(--ink-3); padding: 18px; }
.blank-sheet { display: none; }

/* misc pages */
.page-body { padding: 10px 0 50px; }
.credits { list-style: none; padding: 0; display: grid; gap: 14px; }
.credit-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); padding: 12px; }
.credit-row img { border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; } .credit-row p { font-size: .86rem; margin: 4px 0; overflow-wrap: anywhere; }
.brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.brand-tile { --c: var(--amber); display: grid; justify-items: center; gap: 6px; padding: 18px 12px; text-align: center; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); transition: transform .4s var(--pop), box-shadow .3s, border-color .2s; }
.brand-tile .mono { width: 66px; height: 66px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 24%, white); font: 400 1.35rem var(--display); -webkit-mask: var(--cap) center/contain no-repeat; mask: var(--cap) center/contain no-repeat; }
.brand-tile small { color: var(--ink-3); }
.nf { padding: 60px 0; } .nf-art { position: relative; width: 180px; height: 180px; margin: 0 auto 14px; display: grid; place-items: center; }
.nf-cap { position: absolute; inset: 0; fill: var(--amber); } .nf-ic { position: relative; color: var(--stout); } .nf-ic .ic { width: 70px; height: 70px; }
@media (prefers-reduced-motion: no-preference) { .nf-cap { animation: spin 18s linear infinite; } }
.nf .needs { margin-top: 24px; text-align: left; }

/* reveal on scroll (classes added by site.js only when motion is allowed) */
.motion .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .75s var(--pop), box-shadow .3s, border-color .2s; }
.motion .reveal.in { opacity: 1; transform: none; }
.motion .reveal.in:hover { transform: translateY(-6px); }
.motion .formula-box.reveal.in:hover, .motion .carb-wrap.reveal.in:hover, .motion .lawbox.reveal.in:hover, .motion .season.reveal.in:hover, .motion .section-head.reveal.in:hover, .motion .trust.reveal.in:hover, .motion .chart.reveal.in:hover { transform: none; }

/* ---------- footer ---------- */
.site-footer { position: relative; margin-top: 80px; background: var(--stout); color: #D8C4A6; padding: 46px 0 30px; }
.foot-foam { position: absolute; left: 0; right: 0; top: -38px; width: 100%; height: 40px; }
.foot-foam path { fill: var(--stout); }
.site-footer a { color: #F6E7CB; text-decoration: none; } .site-footer a:hover { color: var(--amber); text-decoration: underline; }
.site-footer .logo { color: var(--foam); }
.cols { display: grid; gap: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols > div { min-width: 0; }
.fbrand { grid-column: 1 / -1; } .fbrand p { margin-top: 12px; max-width: 46ch; font-size: .94rem; }
.site-footer h4 { color: var(--amber); font-size: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .92rem; }
.legal { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 30px; padding-top: 18px; }
.legal p { font-size: .82rem; color: #C3AE90; }
.legal a { text-decoration: underline; }
.age-line { display: flex; gap: 10px; align-items: flex-start; background: #2E1F16; border-radius: 12px; padding: 10px 12px; color: #EBDCC4 !important; }
.age-line .ic { color: var(--amber); margin-top: 2px; width: 20px; height: 20px; }
.age-line b { color: #FFF3DE; }

/* age notice: light one-time bar */
.agebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(33, 22, 15, .97); color: #EBDCC4; border-top: 3px solid var(--amber); transform: translateY(100%); transition: transform .45s var(--ease); }
.agebar.show { transform: none; }
.agebar-in { display: grid; gap: 10px; padding: 12px 0; align-items: center; }
.agebar p { margin: 0; font-size: .9rem; } .agebar b { color: #FFF3DE; }
.agebar-ic { display: none; }
.agebar-act { display: flex; gap: 8px; flex-wrap: wrap; }
.agebar .btn-line { background: transparent; color: #F1E3CC; border-color: #6B5544; box-shadow: none; } .agebar .btn-line:hover { background: #2E1F16; color: #fff; }

/* ---------- breakpoints ---------- */
@media (min-width: 600px) {
  .cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ctile .ex-t { display: block; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .needs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolgrid, .acards, .safety { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail { grid-auto-columns: minmax(220px, 38%); }
  .cta-band { grid-template-columns: minmax(0, 1fr) auto; padding: 32px 36px; }
  .rank { grid-template-columns: 200px minmax(0, 1fr); } .pc { grid-template-columns: 1fr 1fr; }
  .fit-grid { grid-template-columns: 1fr 1fr; }
  .months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vs-picks { grid-template-columns: 1fr 1fr; }
  .cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .season { grid-template-columns: 240px minmax(0, 1fr); }
  .sa-wrap { width: 100%; }
  .ion-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .law-rows > div { grid-template-columns: 220px minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .agebar-in { grid-template-columns: auto minmax(0, 1fr) auto; }
  .agebar-ic { display: grid; width: 40px; height: 40px; place-items: center; background: var(--amber); color: var(--stout); -webkit-mask: var(--cap) center/contain no-repeat; mask: var(--cap) center/contain no-repeat; } .agebar-ic .ic { width: 20px; height: 20px; }
}
@media (min-width: 960px) {
  .search { display: block; max-width: 420px; margin-left: 10px; }
  .head-cta { display: inline-flex; margin-left: auto; }
  .nav-toggle { display: none; }
  .mainnav { display: block; border-top: 0; }
  .open .mainnav { max-height: none; overflow: visible; }
  .navrow { flex-direction: row; align-items: center; gap: 2px; padding: 0 0 10px; position: relative; }
  .navrow > a, .mega-btn { padding: 7px 12px; font-size: .94rem; }
  .mega { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--paper); border: 1.5px solid var(--line); border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); padding: 16px; }
  .mega-wrap.open .mega { grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
  .mega-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
  .hero { padding: 36px 0 60px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 46px; }
  .cat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .needs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .toolgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acards, .safety { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail { grid-auto-columns: calc((100% - 36px) / 4); } .rail-btn { display: grid; }
  .hero-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; }
  .article-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 44px; }
  .aside { position: sticky; top: 130px; }
  .product, .review-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .product-more { max-width: 900px; }
  .months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .tool-out { border-top: 0; border-left: 1.5px solid var(--line); }
  .tool:not(.log) .tool-in { position: sticky; top: 130px; align-self: start; }
  .tool.log { grid-template-columns: minmax(0, 1fr); }
  .tool.log .tool-out { border-left: 0; border-top: 1.5px solid var(--line); }
  .cols { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); } .fbrand { grid-column: auto; }
  .season { grid-template-columns: 300px minmax(0, 1fr); }
  .season-body { padding: 24px 28px 20px; }
  .tasks { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px) { .cat-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ctile .ex-t { display: none; } }
@media (max-width: 599px) {
  .hero-stats { gap: 8px; }
  .hero-stats li { padding: 6px 10px 6px 36px; gap: 6px; } .hero-stats li::before { width: 18px; height: 18px; margin-top: -9px; left: 10px; }
  .hero-stats b { font-size: 1.2rem; } .hero-stats span { font-size: .8rem; }
  .season-art { padding: 8px; } .sa-wrap { width: min(170px, 52%); }
  .card .kspecs div { flex-direction: column; gap: 0; }
  .card .kspecs dt::after { content: none; }
  .card .kspecs dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
  .card .body { padding: 10px 10px 12px; }
  .res-row b { font-size: 1.05rem; }
  .vs { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 6px; } .vs .mid { width: 40px; height: 40px; }
  .law-gal b { font-size: 1.3rem; }
  .ib { grid-template-columns: 70px minmax(0, 1fr) 44px; }
}

/* ---------- print ---------- */
@media print {
  body { background: #fff; font-size: 11pt; }
  .site-header, .site-footer, .demo-bar, .agebar, .crumbs, .aside, .article-hero, .brew-bg, .ck-actions, .tool-ctas, .article-layout, .tool-wrap > .callout, .seg.units, .psi-dial, .formula-box .fx-note { display: none !important; }
  .tool { box-shadow: none; border: 1px solid #999; display: block; }
  .tool-out { background: none; border: 0 !important; }
  .formula-box { background: #fff; color: #000; border: 1px solid #999; } .formula-box h2, .formula-box h3 { color: #000; } .fx-lines code { background: #fff; color: #000; border-color: #bbb; }
  .print-log .tool-in .ck-actions, .print-log .log-head .ck-actions { display: none !important; }
  .print-blank .tool-in, .print-blank .log-out > *:not(.blank-sheet), .print-blank .formula-box { display: none !important; }
  .print-blank .blank-sheet { display: block; }
  .blank-sheet h2 { font-size: 16pt; } .bs-row { display: grid; grid-template-columns: 170px 1fr; gap: 8px; border-bottom: 1px solid #999; padding: 8px 0; font-size: 10pt; }
  .blank-sheet table { width: 100%; border-collapse: collapse; margin-top: 12px; } .blank-sheet td, .blank-sheet th { border: 1px solid #777; height: 24px; padding: 2px 6px; font-size: 9pt; text-align: left; }
  .log-table .del, .hrow .del, [data-add] { display: none !important; }
  .btn { display: none !important; }
  .motion .reveal { opacity: 1 !important; transform: none !important; }
}
@media (min-width: 960px) { .tool[data-tool="keg"] { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); } }