:root{
  --orange:#FF9961;
  --orange-strong:#F2854B;
  --ink:#17130F;
  --ink-soft:#4A423B;
  --muted:#6E6358;
  --paper:#FBF8F4;
  --surface:#FFFFFF;
  --line:#ECE4DA;
  --line-strong:#DED3C6;
  --red:#D43A2F;
  --yellow:#F4B400;
  --black:#101010;
  --shadow-sm:0 1px 2px rgba(23,19,15,.06), 0 2px 8px rgba(23,19,15,.05);
  --shadow-md:0 6px 22px rgba(23,19,15,.10);
  --radius:16px;
  --radius-sm:10px;
  --maxw:1140px;
  --pad:20px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji",sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.1;letter-spacing:-.02em;margin:0}
p{margin:0}
ul,ol{margin:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;border-radius:0 0 8px 0;z-index:100}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--orange-strong);outline-offset:2px;border-radius:4px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:650;font-size:16px;line-height:1;
  padding:14px 22px;border-radius:999px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .04s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--orange);color:var(--ink);border-color:var(--orange)}
.btn--primary:hover{background:var(--orange-strong);border-color:var(--orange-strong)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--small{padding:10px 16px;font-size:15px}

.eyebrow{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#B5500F;margin:0 0 14px;
}

/* Announcement bar */
.announce{background:var(--ink);color:#F6EFE7;font-size:14px}
.announce__inner{display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 16px;text-align:center}
.announce__dot{width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none}
.announce a{color:var(--orange);text-decoration:none;font-weight:600}
.announce a:hover{text-decoration:underline}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,248,244,.86);backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand__mark{height:48px;width:auto;display:block;flex:none}
.brand__lockup{display:flex;flex-direction:column;line-height:1}
.brand__name{font-weight:800;font-size:21px;letter-spacing:-.01em;color:var(--ink)}
.brand__by{display:inline-flex;align-items:center;gap:5px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.brand__vercadence{height:18px;width:auto;display:block}
@media (max-width:400px){.brand__mark{height:40px}}
.nav{display:none;align-items:center;gap:26px}
.nav a{text-decoration:none;color:var(--ink-soft);font-weight:550;font-size:15.5px}
.nav a:hover{color:var(--ink)}
.header__actions{display:flex;align-items:center;gap:12px}
.cart{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px}

/* Mobile disclosure menu (no JavaScript) */
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1.5px solid var(--line-strong);border-radius:10px;font-weight:600;font-size:15px}
.menu summary::-webkit-details-marker{display:none}
.menu__panel{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md);padding:8px;min-width:200px;display:flex;flex-direction:column}
.menu__panel a{text-decoration:none;color:var(--ink);padding:11px 12px;border-radius:9px;font-weight:550}
.menu__panel a:hover{background:var(--paper)}

/* Hero */
.hero{padding:54px 0 28px}
.hero__inner{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
.hero h1{font-size:clamp(34px,8.5vw,58px);font-weight:820;margin:0 0 16px}
.lede{font-size:clamp(17px,2.3vw,20px);color:var(--ink-soft);max-width:34ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);padding:7px 13px;border-radius:999px}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.hero__art{display:flex;justify-content:center}

/* E-paper handle + label mock (CSS only, no image needed) */
.handle{
  --w:230px;
  width:var(--w);
  background:linear-gradient(180deg,#1b1714,#0e0b09);
  border-radius:26px;padding:16px 16px 30px;
  box-shadow:var(--shadow-md);
  transform:rotate(-2deg);
}
.handle--sm{--w:150px;border-radius:18px;padding:11px 11px 20px;transform:rotate(0)}
.handle__screen{
  background:#fff;border-radius:12px;overflow:hidden;
  aspect-ratio:24/53;display:flex;flex-direction:column;
  border:2px solid #000;
}
.label{display:flex;flex-direction:column;height:100%;padding:14px 13px;text-align:center}
.handle--sm .label{padding:9px 8px}
.label__brewery{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--black)}
.handle--sm .label__brewery{font-size:8px}
.label__rule{height:3px;background:var(--red);margin:9px auto;width:42px;border-radius:2px}
.label__name{font-weight:850;color:var(--black);font-size:27px;line-height:1.02;margin-top:6px;letter-spacing:-.01em}
.handle--sm .label__name{font-size:17px}
.label__style{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#534b44;margin-top:8px}
.handle--sm .label__style{font-size:8px}
.label__burst{margin:14px auto 0;width:46px;height:46px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:850;color:var(--black);font-size:13px}
.handle--sm .label__burst{width:30px;height:30px;font-size:9px;margin-top:8px}
.label__spacer{flex:1}
.label__abv{align-self:center;background:var(--black);color:#fff;font-weight:800;font-size:12px;letter-spacing:.04em;padding:6px 12px;border-radius:999px}
.handle--sm .label__abv{font-size:9px;padding:4px 9px}
.handle__neck{width:34%;height:14px;background:#0e0b09;border-radius:0 0 8px 8px;margin:0 auto}

/* Sections */
.section{padding:56px 0}
.section--tint{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section__head{max-width:46ch;margin:0 0 30px}
.section__title{font-size:clamp(26px,4.5vw,38px);font-weight:800}
.section__sub{color:var(--ink-soft);margin-top:12px;font-size:18px}

.grid{display:grid;gap:18px;grid-template-columns:1fr}

/* Value cards */
.vcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;box-shadow:var(--shadow-sm)}
.vcard__bar{width:38px;height:5px;border-radius:3px;margin-bottom:16px}
.vcard--orange .vcard__bar{background:var(--orange)}
.vcard--red .vcard__bar{background:var(--red)}
.vcard--yellow .vcard__bar{background:var(--yellow)}
.vcard--ink .vcard__bar{background:var(--ink)}
.vcard h3{font-size:19px;font-weight:750;margin-bottom:8px}
.vcard p{color:var(--ink-soft);font-size:15.5px}

/* Steps */
.steps{display:grid;gap:20px;grid-template-columns:1fr;padding:0;list-style:none;counter-reset:step}
.step{display:flex;gap:16px;align-items:flex-start}
.step__num{flex:none;width:46px;height:46px;border-radius:50%;background:var(--orange);color:var(--ink);font-weight:850;font-size:20px;display:flex;align-items:center;justify-content:center}
.step h3{font-size:18px;font-weight:750;margin-bottom:5px}
.step p{color:var(--ink-soft);font-size:15.5px}
.note{margin-top:26px;color:var(--muted);font-size:15px}

/* Products */
.products{display:grid;gap:20px;grid-template-columns:1fr}
.product{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:transform .12s ease, box-shadow .12s ease}
.product:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.product__media{background:linear-gradient(160deg,#FFF4EC,#FBE9DC);padding:30px 20px;display:flex;justify-content:center;min-height:220px;align-items:center}
.product__body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.product__body h3{font-size:20px;font-weight:780}
.product__tag{color:var(--ink-soft);font-size:15px;flex:1}
.product__foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.price{font-weight:750;font-size:17px}
.price--tbd{color:var(--muted);font-weight:600;font-size:14px}
.badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--red);background:#FCE9E7;padding:4px 10px;border-radius:999px;align-self:flex-start}
.microcopy{margin-top:22px;color:var(--muted);font-size:13.5px}

/* About + final CTA */
.about{background:var(--ink);color:#F6EFE7;border-radius:var(--radius);padding:44px 30px;margin:8px 0}
.about h2{font-size:clamp(24px,4vw,34px);font-weight:800;margin-bottom:14px}
.about p{color:#D9CEC1;font-size:18px;max-width:60ch}
.about .eyebrow{color:var(--orange)}

.cta-band{text-align:center;padding:60px 0}
.cta-band h2{font-size:clamp(26px,5vw,40px);font-weight:820;margin-bottom:10px}
.cta-band p{color:var(--ink-soft);font-size:18px;margin-bottom:24px}

/* Footer */
.site-footer{background:#fff;border-top:1px solid var(--line);margin-top:20px;padding:46px 0 30px}
.footer__grid{display:grid;gap:30px;grid-template-columns:1fr}
.footer__brand .brand__name{font-size:22px}
.footer__brand p{color:var(--muted);font-size:14px;margin-top:10px;max-width:30ch}
.footer__col h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-weight:700}
.footer__col ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:9px}
.footer__col a{text-decoration:none;color:var(--ink-soft);font-size:15px}
.footer__col a:hover{color:var(--ink)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;align-items:center;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px}

/* Simple page (FAQ, policies, coming-soon) */
.page{padding:46px 0 10px}
.page h1{font-size:clamp(30px,5vw,44px);font-weight:820;margin-bottom:14px}
.page .lede{margin-bottom:8px}
.prose{max-width:70ch}
.prose h2{font-size:22px;font-weight:760;margin:30px 0 10px}
.prose p{color:var(--ink-soft);margin:0 0 14px}
.faq-item{border-top:1px solid var(--line);padding:20px 0}
.faq-item h3{font-size:18px;font-weight:740;margin-bottom:8px}
.faq-item p{color:var(--ink-soft)}

/* Forms + alerts */
.form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-weight:600;font-size:14.5px}
.field input,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:10px;padding:12px 14px;width:100%}
.field textarea{min-height:210px;resize:vertical;line-height:1.5}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--orange-strong);box-shadow:0 0 0 3px rgba(255,153,97,.28)}
.field--hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.required{color:var(--red)}
.alert{margin-top:18px;padding:14px 16px;border-radius:12px;font-size:15px}
.alert--error{background:#FCE9E7;border:1px solid #F1C0BA;color:#8A2018}
.alert--info{background:#FFF3EA;border:1px solid #F5D5BE;color:#7A3E16}
.alert--success{background:#E9F6EC;border:1px solid #BCE2C4;color:#1E6B2E}
.form-hint{color:var(--muted);font-size:14px;margin:0}
.form-actions{margin-top:4px}
.contact-grid{display:grid;grid-template-columns:1fr;gap:26px;margin-top:30px;align-items:start}
.contact-intro h2{font-size:19px;font-weight:740;margin-bottom:14px}
.contact-points{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.contact-points li{position:relative;padding-left:22px;color:var(--ink-soft);font-size:15.5px}
.contact-points li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.form.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow-sm)}
.doc-meta{color:var(--muted);font-size:14px;margin:0 0 12px}

/* Breadcrumb */
.crumbs{font-size:14px;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 6px}

/* Product detail */
.pdp{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
.pdp__media{background:linear-gradient(160deg,#FFF4EC,#FBE9DC);border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:flex;justify-content:center}
.pdp__img{border-radius:10px;width:100%;max-width:420px;height:auto;object-fit:contain}
.pdp__buy h1{font-size:clamp(28px,5vw,40px);font-weight:820;margin-bottom:10px}
.pdp__price{font-size:22px;font-weight:750;margin-bottom:22px}
.pdp__note{color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.pdp__desc{margin-top:38px}
.buy{display:flex;flex-direction:column;gap:16px;max-width:340px}
.buy select{font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink)}
.buy__qty{max-width:150px}
.buy__qty input{font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:10px;width:100%}
.buy__submit{margin-top:4px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* Cart */
.cart-grid{display:grid;grid-template-columns:1fr;gap:30px;margin-top:28px;align-items:start}
.cart-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.cart-line{display:grid;grid-template-columns:90px 1fr auto;gap:16px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.cart-line__media{background:linear-gradient(160deg,#FFF4EC,#FBE9DC);border-radius:10px;padding:8px;display:flex;justify-content:center;align-items:center}
.cart-line__media img{border-radius:6px;width:auto;height:88px}
.cart-line__title{font-weight:740;font-size:17px;text-decoration:none;color:var(--ink)}
.cart-line__title:hover{color:var(--orange-strong)}
.cart-line__variant{color:var(--muted);font-size:14px;margin-top:3px}
.cart-line__price{color:var(--ink-soft);font-size:14.5px;margin-top:4px}
.cart-line__actions{display:flex;align-items:center;gap:16px;margin-top:12px;flex-wrap:wrap}
.cart-qty{display:flex;align-items:center;gap:8px}
.cart-qty input{font:inherit;font-size:15px;width:64px;padding:8px 10px;border:1.5px solid var(--line-strong);border-radius:8px}
.cart-line__total{font-weight:740;font-size:16px;white-space:nowrap}
.linkbtn{background:none;border:none;color:var(--ink-soft);font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;padding:0}
.linkbtn:hover{color:var(--red)}
.cart-summary{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow-sm)}
.cart-summary__row{display:flex;justify-content:space-between;font-weight:750;font-size:18px}
.cart-summary__note{color:var(--muted);font-size:13.5px;margin:10px 0 18px}
.btn--block{display:flex;width:100%;margin-bottom:10px}

/* Responsive */
@media (min-width:560px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .products{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
}
@media (min-width:820px){
  .nav{display:flex}
  .menu{display:none}
  .hero{padding:74px 0 40px}
  .hero__inner{grid-template-columns:1.05fr .95fr;gap:48px}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
  .products{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .section{padding:72px 0}
  .about{padding:60px 54px}
  .contact-grid{grid-template-columns:.82fr 1.18fr;gap:46px}
  .form.card{padding:30px}
  .pdp{grid-template-columns:1fr 1fr;gap:44px}
  .cart-grid{grid-template-columns:1.5fr .8fr;gap:40px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .handle{transform:none}
}