:root{
  --cream:#F6F1E7;
  --panel:#FBF8F1;
  --burgundy:#7E2231;
  --burgundy-dark:#5E1822;
  --gold:#A98D4B;
  --gold-deep:#8A7038;
  --gold-light:#D9BE81;
  --ink:#3A3126;
  --ink-soft:#5C5142;
  --rule:rgba(169,141,75,.42);
  --card-line:rgba(126,34,49,.34);
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Source Sans 3','Lato',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;
     font-weight:400;line-height:1.72;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{width:min(1160px,90vw);margin:0 auto}
.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}

/* ---------- header ---------- */
/* The header, not the inner .wrap, is the positioning context: the mobile nav panel drops
   full-bleed instead of leaving gutters that show the page scrolling behind it. */
.site-header{position:sticky;top:0;z-index:60;background:var(--cream);
             border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-mark{width:36px;height:36px;flex:none}
.wordmark{font-family:var(--serif);font-variant:small-caps;font-weight:600;font-size:1.24rem;
          letter-spacing:.14em;color:var(--gold);line-height:1;white-space:nowrap}
.site-nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,26px)}
.site-nav a{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
            color:var(--gold-deep);white-space:nowrap;transition:color .2s,background .2s}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--burgundy)}
.site-nav .pill{background:var(--burgundy);color:var(--cream);padding:11px 21px;border-radius:999px}
.site-nav .pill:hover{background:var(--burgundy-dark);color:var(--cream)}
.nav-toggle{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0}
.nav-burger{display:none;width:40px;height:34px;flex-direction:column;justify-content:center;
            gap:6px;cursor:pointer;padding:5px}
.nav-burger span{display:block;height:2px;background:var(--gold-deep);border-radius:2px}
.nav-toggle:focus-visible~.nav-burger{outline:2px solid var(--burgundy);outline-offset:3px}
/* Seven links plus the pill outgrow the bar before the old 1000px stop; collapse earlier. */
@media(max-width:1120px){
  .nav-burger{display:flex}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
            align-items:flex-start;gap:0;padding:6px 5vw 18px;background:var(--cream);
            border-bottom:1px solid var(--rule)}
  .site-nav a{width:100%;padding:12px 2px}
  .site-nav .pill{width:auto;margin-top:12px;padding:12px 24px}
  .nav-toggle:checked~.site-nav{display:flex}
}

/* ---------- type + sections ---------- */
h1{font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:-.005em;
   font-size:clamp(2.15rem,5.2vw,3.5rem)}
h2{font-family:var(--serif);font-weight:500;line-height:1.16;
   font-size:clamp(1.7rem,3.5vw,2.6rem)}
h3{font-family:var(--serif);font-weight:500;font-size:1.24rem;line-height:1.25}
.eyebrow{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
         margin-bottom:18px;font-weight:600}
.lede{margin-top:20px;max-width:64ch;color:var(--ink-soft);font-size:1.06rem}
.section{padding:clamp(56px,8vw,104px) 0}
.section-alt{background:var(--panel);border-top:1px solid var(--rule);
             border-bottom:1px solid var(--rule)}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
.page-head{padding:clamp(46px,6vw,80px) 0 clamp(28px,4vw,44px)}

/* ---------- buttons ---------- */
.btn{display:inline-block;text-decoration:none;font-size:.73rem;font-weight:600;
     letter-spacing:.13em;text-transform:uppercase;padding:15px 30px;border-radius:4px;
     border:1px solid transparent;transition:background .22s,color .22s,border-color .22s}
.btn-solid{background:var(--burgundy);color:var(--cream)}
.btn-solid:hover{background:var(--burgundy-dark)}
.btn-outline{border-color:var(--burgundy);color:var(--burgundy)}
.btn-outline:hover{background:var(--burgundy);color:var(--cream)}
.btn-cream{background:var(--cream);color:var(--burgundy)}
.btn-cream:hover{background:#fff}
.btn-row{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{padding:clamp(44px,6vw,84px) 0 clamp(52px,7vw,92px)}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,68px);
           align-items:center}
.hero-art{display:flex;justify-content:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* ---------- can artwork ---------- */
.can{width:min(340px,74vw);height:auto}
.can-sm{width:min(210px,52vw)}
/* Gradients are declared once per page in this node so several cans can share them:
   repeating the <defs> would repeat their ids, and a duplicate id resolves to the first. */
.can-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- can grid + detail reveal ---------- */
.can-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(218px,1fr));
          gap:clamp(16px,2.2vw,26px);margin-top:clamp(34px,4vw,48px)}
/* .can-tile is a <button>, so every property the global button rule sets is restated here. */
.can-tile{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;
          background:var(--panel);color:inherit;border:1px solid var(--card-line);
          border-radius:8px;padding:26px 18px 22px;text-align:center;cursor:pointer;
          justify-self:stretch;font-family:var(--sans);font-size:1rem;font-weight:400;
          letter-spacing:normal;text-transform:none;
          transition:background .22s,border-color .22s,transform .22s}
.can-tile:hover{background:var(--panel);border-color:var(--burgundy);transform:translateY(-2px)}
.can-tile:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px}
.can-tile[aria-expanded="true"]{border-color:var(--burgundy)}
.can-tile .can{width:min(158px,42vw)}
.can-name{font-family:var(--serif);font-weight:500;font-size:1.1rem;line-height:1.25;
          color:var(--burgundy)}
.can-cue{font-size:.63rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
         color:var(--gold-deep)}
.menu-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
           background:var(--panel);border:1px solid var(--card-line);border-radius:8px;
           padding:30px 22px;text-align:center;text-decoration:none;color:inherit;
           transition:border-color .22s,transform .22s}
.menu-tile:hover{border-color:var(--burgundy);transform:translateY(-2px)}
.menu-tile h3{color:var(--burgundy)}
.menu-tile p{color:var(--ink-soft);font-size:.97rem}
.menu-tile em{font-style:normal;font-size:.63rem;font-weight:600;letter-spacing:.16em;
              text-transform:uppercase;color:var(--gold-deep)}
.grid-note{margin-top:26px;font-size:.97rem;color:var(--ink-soft)}
.grid-note a{color:var(--burgundy);text-underline-offset:3px}
.detail-card{margin-top:clamp(20px,3vw,30px);background:var(--panel);
             border:1px solid var(--card-line);border-radius:8px;padding:clamp(24px,3.2vw,38px);
             display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,52px);align-items:center}
.detail-card h3{font-size:1.5rem;color:var(--burgundy);margin-bottom:12px}
.detail-card p{color:var(--ink-soft);font-size:1rem}
/* Author display:grid outranks the UA rule for [hidden], so restate it. */
.detail-card[hidden]{display:none}
@media(max-width:720px){.detail-card{grid-template-columns:1fr}}

/* ---------- nutrition panel ---------- */
/* Helvetica/Arial rather than the site sans: the FDA panel is set in Helvetica, and the
   loaded Source Sans 3 weights stop at 600, which is too light for the rule hierarchy. */
.nf{background:#fff;color:#000;border:1px solid #000;border-top-width:9px;
    padding:8px 11px 11px;width:100%;max-width:318px;
    font-family:Helvetica,Arial,sans-serif;font-size:13px;line-height:1.22}
.nf-title{font-size:1.9rem;font-weight:700;letter-spacing:-.035em;line-height:1}
.nf-serving{display:flex;justify-content:space-between;gap:12px;font-weight:700;padding-top:5px}
.nf-bar{height:9px;background:#000;margin:5px -11px}
.nf-bar-thin{height:4px;background:#000;margin:4px -11px}
.nf-amount{font-size:11px;font-weight:700}
.nf-cal{display:flex;justify-content:space-between;align-items:baseline;
        font-size:1.5rem;font-weight:700;line-height:1.05}
.nf-dv{text-align:right;font-weight:700;font-size:11px;padding:3px 0;border-bottom:1px solid #000}
.nf-row{display:flex;justify-content:space-between;gap:14px;padding:3px 0;
        border-bottom:1px solid #000}
.nf-row.sub{padding-left:16px}
.nf-row.last{border-bottom:0}
.nf-foot{font-size:10px;line-height:1.4;padding-top:7px}

/* ---------- reserved-content frames ---------- */
/* Deliberate fill-in-later frames. Dashed gold reads as space held on purpose rather than
   as a section someone forgot to finish. */
.fill-note{margin-top:14px;padding-left:14px;border-left:2px solid var(--rule);
           max-width:44ch;font-size:.86rem;line-height:1.5;color:var(--ink-soft)}
.empty-card{margin-top:30px;background:var(--panel);border:1px dashed var(--gold);
            border-radius:8px;padding:clamp(28px,3.6vw,42px);text-align:center;
            font-family:var(--serif);font-size:1.16rem;line-height:1.5;color:var(--ink-soft)}

/* ---------- badges ---------- */
.badge-row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(26px,5vw,66px)}
.badge{width:132px;text-align:center}
.badge svg{width:72px;height:72px;margin:0 auto}
.badge span{display:block;margin-top:12px;font-size:.68rem;font-weight:600;letter-spacing:.15em;
            text-transform:uppercase;color:var(--gold-deep)}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
       gap:clamp(18px,2.4vw,28px);margin-top:40px}
.card{background:var(--panel);border:1px solid var(--card-line);border-radius:8px;
      padding:clamp(24px,3vw,34px)}
.card-icon{width:36px;height:36px;margin-bottom:18px}
.card h3{margin-bottom:10px}
.card p{color:var(--ink-soft);font-size:1rem}
/* Fixed three-track grid so a span-2 flagship card leaves no orphan gap in the next row. */
.cards-3{grid-template-columns:repeat(3,1fr)}
.card-wide{grid-column:span 2}
@media(max-width:980px){.cards-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.cards-3{grid-template-columns:1fr}.card-wide{grid-column:span 1}}
.card-flag{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,34px);align-items:center}
@media(max-width:620px){.card-flag{grid-template-columns:1fr}}

/* ---------- burgundy bands ---------- */
.band{background:var(--burgundy);color:var(--cream)}
.band h2,.band h3{color:var(--cream)}
.band .lede,.band p{color:rgba(246,241,231,.86)}
.band .eyebrow{color:var(--gold-light)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
       gap:clamp(16px,2.2vw,26px);margin-top:42px}
.tile{border:1px solid rgba(217,190,129,.38);border-radius:8px;padding:24px 24px 26px}
.tile b{display:block;font-family:var(--serif);font-weight:500;font-size:1.16rem;
        color:var(--gold-light);margin-bottom:6px}
.tile span{display:block;font-size:.97rem;color:rgba(246,241,231,.84);line-height:1.6}
.cta-band{padding:clamp(48px,6vw,80px) 0;text-align:center}
.cta-band h2{max-width:22ch;margin:0 auto}
.cta-band .btn{margin-top:30px}

/* ---------- brand tiles ---------- */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
            gap:clamp(16px,2.2vw,24px);margin-top:40px}
.brand-tile{display:block;text-decoration:none;background:var(--panel);
            border:1px solid var(--card-line);border-radius:8px;padding:30px 20px;
            text-align:center;transition:border-color .22s,transform .22s}
.brand-tile:hover{border-color:var(--burgundy);transform:translateY(-2px)}
.brand-tile b{display:block;font-family:var(--serif);font-weight:500;font-size:1.26rem;
              color:var(--gold);letter-spacing:.01em}
.brand-tile em{display:block;margin-top:8px;font-style:normal;font-size:.68rem;
               letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- facts strip ---------- */
/* Fixed track count, not auto-fit: the 1px-gap hairline technique turns any orphan cell
   into a visible block of rule colour, so the column count must divide the cell count. */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
       margin-top:38px;background:var(--rule);border:1px solid var(--rule);
       border-radius:8px;overflow:hidden}
@media(max-width:880px){.facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.facts{grid-template-columns:1fr}}
.fact{background:var(--panel);padding:22px 20px}
.fact b{display:block;font-family:var(--serif);font-weight:500;font-size:1.14rem;color:var(--burgundy)}
.fact span{display:block;margin-top:4px;font-size:.72rem;letter-spacing:.13em;
           text-transform:uppercase;color:var(--gold-deep)}

/* ---------- support tiles ---------- */
.support{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;list-style:none}
.support li{border:1px solid var(--rule);background:var(--panel);border-radius:999px;
            padding:11px 24px;font-size:.72rem;font-weight:600;letter-spacing:.15em;
            text-transform:uppercase;color:var(--gold-deep)}

/* ---------- feature split ---------- */
.split{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:760px){.split{grid-template-columns:1fr}}

/* ---------- form ---------- */
.form-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,72px);
           align-items:start}
@media(max-width:860px){.form-grid{grid-template-columns:1fr}}
form{display:grid;gap:18px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.row{grid-template-columns:1fr}}
label{display:block;font-size:.67rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
      color:var(--gold-deep);margin-bottom:8px}
input,textarea{width:100%;background:var(--panel);border:1px solid var(--card-line);
               color:var(--ink);font-family:var(--sans);font-size:1rem;padding:13px 14px;
               border-radius:4px;transition:border-color .2s}
input:focus,textarea:focus{outline:none;border-color:var(--gold)}
textarea{min-height:150px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button{font-family:var(--sans);font-size:.73rem;font-weight:600;letter-spacing:.13em;
       text-transform:uppercase;background:var(--burgundy);color:var(--cream);border:0;
       padding:16px 34px;border-radius:4px;cursor:pointer;justify-self:start;
       transition:background .22s}
button:hover{background:var(--burgundy-dark)}
button:disabled{opacity:.55;cursor:default}
.note{font-size:.95rem;min-height:1.3em}
.note.ok{color:var(--burgundy)}
.note.err{color:#A3402C}

/* ---------- footer ---------- */
.site-footer{background:var(--cream);border-top:1px solid var(--rule);
             padding:42px 0 46px;text-align:center}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2.4vw,30px)}
.footer-nav a{font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;
              text-decoration:none;color:var(--gold-deep);transition:color .2s}
.footer-nav a:hover{color:var(--burgundy)}
.copyright{margin-top:22px;font-size:.85rem;color:var(--ink-soft)}