:root{
    --brown-950:#20100a;
    --brown-900:#33190f;
    --brown-800:#472315;
    --brown-700:#603222;
    --maroon-800:#5c1a1d;
    --maroon-900:#3f1114;
    --cream-050:#fbf4e4;
    --cream-100:#f3e4c0;
    --cream-200:#e9d3a2;
    --gold-400:#e4b658;
    --gold-500:#d9a441;
    --gold-600:#b9852a;
    --rust-500:#c1502e;
    --rust-600:#9c3f24;
    --ink-900:#2a1710;
    --ink-700:#4a3324;
    --cream-text:#f6ead2;
    --shadow-lg: 0 30px 60px -25px rgba(32,16,10,0.45);
    --shadow-sm: 0 10px 24px -14px rgba(32,16,10,0.35);
    --radius-lg: 28px;
    --radius-md: 18px;
    --serif: "Fraunces", Georgia, serif;
    --sans: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  body{
    margin:0;
    font-family:var(--sans);
    color:var(--ink-900);
    background:var(--cream-050);
    -webkit-font-smoothing:antialiased;
  }

  img{max-width:100%; display:block;}

  a{color:inherit;}

  h1,h2,h3{
    font-family:var(--serif);
    font-weight:700;
    margin:0;
    line-height:1.05;
  }

  .eyebrow{
    font-family:var(--sans);
    font-weight:600;
    font-size:0.78rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
  }

  .wrap{
    max-width:1160px;
    margin:0 auto;
    padding:0 clamp(20px,5vw,56px);
  }

  :focus-visible{
    outline:3px solid var(--gold-500);
    outline-offset:3px;
  }

  /* ---------- Smoke divider (signature element) ---------- */
  .smoke-divider{
    display:block;
    width:100%;
    height:46px;
    margin:0;
  }
  .smoke-divider svg{ width:100%; height:100%; display:block; }
  .smoke-divider path{ animation: drift 9s ease-in-out infinite; transform-origin:center; }
  .smoke-divider path:nth-child(2){ animation-delay:-3s; opacity:0.55; }
  @keyframes drift{
    0%,100%{ transform:translateY(0) scaleX(1); }
    50%{ transform:translateY(-3px) scaleX(1.01); }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    background:
      radial-gradient(ellipse 900px 600px at 85% -10%, rgba(217,164,65,0.16), transparent 60%),
      linear-gradient(165deg, var(--brown-800) 0%, var(--brown-900) 55%, var(--brown-950) 100%);
    color:var(--cream-text);
    overflow:hidden;
  }
  .hero::before{
    /* subtle leaf/texture motif, hand-drawn feel, echoes the poster illustration */
    content:"";
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='none' stroke='%23e4b658' stroke-width='1' opacity='0.10'%3E%3Cpath d='M30 190 C10 150 20 90 60 60 C80 45 95 40 100 20 C105 45 100 65 115 85 C140 70 150 40 150 40 C150 70 130 95 140 120 C160 110 180 90 190 60 C185 100 165 130 175 160'/%3E%3C/g%3E%3C/svg%3E");
    background-size:340px 340px;
    pointer-events:none;
  }
  .hero-top{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:26px 0 0;
    gap:16px;
  }
  .brandmark{
    font-family:var(--serif);
    font-weight:900;
    font-size:clamp(1.3rem,2.4vw,1.7rem);
    letter-spacing:-0.01em;
    color:var(--cream-text);
    display:flex;
    align-items:baseline;
    gap:8px;
  }
  .brandmark small{
    font-family:var(--sans);
    font-weight:500;
    font-size:0.62rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--gold-400);
  }
  .date-pill{
    font-family:var(--sans);
    font-weight:700;
    font-size:0.78rem;
    letter-spacing:0.04em;
    background:rgba(246,234,210,0.08);
    border:1px solid rgba(228,182,88,0.4);
    color:var(--gold-400);
    padding:8px 16px;
    border-radius:999px;
    white-space:nowrap;
  }

  .hero-grid{
    position:relative;
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:clamp(28px,5vw,64px);
    align-items:start;
    padding:clamp(36px,7vw,72px) 0 clamp(28px,4vw,44px);
  }
  .hero-copy .eyebrow{ color:var(--gold-400); margin-bottom:14px; }
  .hero-copy h1{
    font-size:clamp(2.3rem,4.6vw,3.6rem);
    color:var(--cream-text);
  }
  .hero-copy h1 em{
    font-style:italic;
    color:var(--gold-400);
  }
  .hero-copy p.lede{
    font-size:clamp(1.02rem,1.6vw,1.18rem);
    line-height:1.6;
    color:rgba(246,234,210,0.86);
    margin:22px 0 0;
    max-width:52ch;
  }
  .hero-support{
    margin-top:6px;
    padding-top:28px;
    padding-bottom:clamp(8px,2vw,16px);
    border-top:1px solid rgba(228,182,88,0.25);
  }
  .hero-support h2{
    font-size:clamp(1.3rem,2.2vw,1.6rem);
    color:var(--gold-400);
    margin-bottom:16px;
  }
  .hero-support-body{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px 48px;
  }
  .hero-support p{
    font-size:0.96rem;
    line-height:1.7;
    color:rgba(246,234,210,0.86);
    margin:0;
  }
  @media (max-width:760px){
    .hero-support-body{ grid-template-columns:1fr; gap:14px; }
  }
    .cta-row{
    display:flex;
    flex-wrap:nowrap;
    gap:14px;
    margin-top:28px;
    margin-bottom:clamp(8px,2vw,20px);
    }
    .cta-row .btn{
    min-width:0;
    flex:1 1 0;
    }
    @media (max-width:760px){
    .cta-row{ flex-direction:column; }
    }
    .btn{
    font-family:var(--sans);
    font-weight:700;
    font-size:0.98rem;
    padding:15px 28px;
    border-radius:999px;
    border:2px solid transparent;
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:8px;
    transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

  .btn:hover{ transform:translateY(-2px); }
  .btn-primary{
    background:var(--gold-500);
    color:var(--brown-950);
    box-shadow:0 14px 30px -12px rgba(217,164,65,0.55);
  }
  .btn-primary:hover{ background:var(--gold-400); }
  .btn-ghost{
    background:transparent;
    border-color:rgba(246,234,210,0.5);
    color:var(--cream-text);
  }
  .btn-ghost:hover{ border-color:var(--gold-400); color:var(--gold-400); }

  .hero-art{
    position:relative;
  }
  .hero-art figure{
    margin:0;
    transform:rotate(2.2deg);
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--shadow-lg);
    border:6px solid var(--cream-050);
  }
  .hero-art img{ width:100%; height:auto; display:block; }
  .hero-art figcaption{
    position:absolute;
    bottom:-18px; left:-18px;
    background:var(--rust-500);
    color:var(--cream-text);
    font-family:var(--serif);
    font-weight:700;
    font-style:italic;
    font-size:0.92rem;
    padding:12px 20px;
    border-radius:14px;
    box-shadow:var(--shadow-sm);
    transform:rotate(-3deg);
  }

  @media (max-width:900px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-art{ order:-1; }
    .hero-art figure{ transform:none; max-width:420px; margin:0 auto; }
    .hero-art figcaption{ display:none; }
  }
  @media (max-width:560px){
    .hero-top{ flex-direction:column; align-items:flex-start; gap:14px; }
    .brandmark{ flex-direction:column; align-items:flex-start; gap:2px; }
  }

  /* ---------- SECTION BASICS ---------- */
  section{ padding:clamp(5px,5px,5px) 0; }
  .section-head{ max-width:640px; margin:0 0 40px; }
  .section-head .eyebrow{ color:var(--rust-500); margin-bottom:12px; }
  .section-head h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); color:var(--ink-900); }
  .section-head p{ font-size:1.05rem; line-height:1.65; color:var(--ink-700); margin-top:16px; }

  /* ---------- BEER SECTION ---------- */
  .beer{ background:var(--cream-050); }
  .beer-grid{
    display:grid;
    grid-template-columns:0.8fr 1.2fr;
    gap:clamp(32px,5vw,64px);
    align-items:start;
  }
  .label-frame{
    position:relative;
    background:var(--maroon-800);
    border-radius:var(--radius-lg);
    padding:28px;
    box-shadow:var(--shadow-lg);
  }
  .label-frame img{
    border-radius:12px;
    border:3px solid var(--cream-200);
  }
  
 .medals{
    display:flex;
    align-items:flex-end;
    gap:22px;
    margin-top:22px;
    flex-wrap:wrap;
  }
  .medal-badge{
    height:104px;
    width:auto;
    filter:drop-shadow(0 6px 14px rgba(92,26,29,0.28));
  }
  @media (max-width:480px){
    .medal-badge{ height:78px; }
    .medals{ gap:16px; justify-content:center; }
  }

  .beer-copy p.intro{
    font-size:1.14rem;
    line-height:1.7;
    color:var(--ink-700);
  }
  .beer-copy p.intro strong{ color:var(--ink-900); }

  .spec-sheet{
    margin-top:30px;
    background:var(--cream-100);
    border:1px solid var(--cream-200);
    border-radius:var(--radius-md);
    padding:26px 28px;
  }
  .spec-sheet dl{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px 28px;
    margin:0;
  }
  .spec-sheet .full{ grid-column:1/-1; }
  .spec-sheet dt{
    font-size:0.7rem;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--rust-600);
    margin-bottom:4px;
  }
  .spec-sheet dd{
    margin:0;
    font-size:0.96rem;
    color:var(--ink-900);
    line-height:1.4;
  }

  .tasting-note{
    margin-top:24px;
    font-family:var(--serif);
    font-style:italic;
    font-size:1.12rem;
    line-height:1.7;
    color:var(--ink-900);
    border-left:3px solid var(--gold-500);
    padding-left:20px;
  }

  .dumarron-callout{
    margin-top:34px;
    display:flex;
    align-items:center;
    gap:22px;
    background:var(--brown-800);
    color:var(--cream-text);
    border-radius:var(--radius-md);
    padding:24px 26px;
    box-shadow:var(--shadow-sm);
  }
  .dumarron-callout .icon{
    flex-shrink:0;
    width:56px; height:56px;
    border-radius:50%;
    background:rgba(228,182,88,0.15);
    display:flex; align-items:center; justify-content:center;
  }
  .dumarron-callout .icon svg{ width:28px; height:28px; }
  .dumarron-callout h3{
    font-size:1.1rem;
    color:var(--gold-400);
    margin-bottom:4px;
  }
  .dumarron-callout p{
    margin:0;
    font-size:0.94rem;
    line-height:1.55;
    color:rgba(246,234,210,0.86);
  }

  @media (max-width:900px){
    .beer-grid{ grid-template-columns:1fr; }
    .spec-sheet dl{ grid-template-columns:1fr 1fr; }
    .dumarron-callout{ flex-direction:column; text-align:center; }
  }
  @media (max-width:480px){
    .spec-sheet dl{ grid-template-columns:1fr; }
  }

  /* ---------- STORY / TIMELINE ---------- */
  .story{ background:var(--maroon-900); color:var(--cream-text); position:relative; overflow:hidden;}
  .story::before{
    content:"";
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='none' stroke='%23e4b658' stroke-width='1' opacity='0.08'%3E%3Cpath d='M30 190 C10 150 20 90 60 60 C80 45 95 40 100 20 C105 45 100 65 115 85 C140 70 150 40 150 40 C150 70 130 95 140 120 C160 110 180 90 190 60 C185 100 165 130 175 160'/%3E%3C/g%3E%3C/svg%3E");
    background-size:300px 300px;
  }
  .story .section-head{ position:relative; }
  .story .section-head .eyebrow{ color:var(--gold-400); }
  .story .section-head h2{ color:var(--cream-text); }
  .story .section-head p{ color:rgba(246,234,210,0.82); }

  .story-copy{
    position:relative;
    max-width:760px;
    font-size:1.05rem;
    line-height:1.75;
    color:rgba(246,234,210,0.9);
  }
  .story-copy p{ margin:0 0 18px; }

  .timeline{
    position:relative;
    margin-top:56px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
  }
  .timeline::before{
    content:"";
    position:absolute;
    top:11px; left:0; right:0;
    height:2px;
    background:linear-gradient(90deg, rgba(228,182,88,0.15), var(--gold-500) 15%, var(--gold-500) 85%, rgba(228,182,88,0.15));
  }
  .t-item{ position:relative; padding-top:36px; }
  .t-item::before{
    content:"";
    position:absolute; top:0; left:0;
    width:24px; height:24px;
    border-radius:50%;
    background:var(--maroon-900);
    border:3px solid var(--gold-500);
  }
  .t-item .year{
    font-family:var(--serif);
    font-weight:700;
    font-size:1.3rem;
    color:var(--gold-400);
    display:block;
    margin-bottom:8px;
  }
  .t-item p{
    margin:0;
    font-size:0.9rem;
    line-height:1.55;
    color:rgba(246,234,210,0.82);
  }
  @media (max-width:760px){
    .timeline{ grid-template-columns:1fr 1fr; gap:32px 20px; }
  }
  @media (max-width:480px){
    .timeline{ grid-template-columns:1fr; }
    .timeline::before{ display:none; }
  }

  /* ---------- FEATURE TRIO: castagne / du marron / formaggio ---------- */
  .trio{ background:var(--cream-050); }
  .trio-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
  }
  .trio-card{
    background:#fff;
    border:1px solid var(--cream-200);
    border-radius:var(--radius-md);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    display:flex;
    flex-direction:column;
  }
  .trio-media{
    aspect-ratio:4/3;
    background:linear-gradient(140deg, var(--brown-700), var(--brown-900));
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gold-400);
  }
  .trio-media svg{ width:64px; height:64px; opacity:0.9; }
  .trio-media .tag{
    position:absolute;
    top:14px; left:14px;
    background:rgba(32,16,10,0.55);
    color:var(--cream-text);
    font-size:0.68rem;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:6px 11px;
    border-radius:999px;
  }
  .trio-body{ padding:24px 24px 28px; }
  .trio-body h3{
    font-size:1.2rem;
    color:var(--ink-900);
    margin-bottom:10px;
  }
  .trio-body p{
    font-size:0.92rem;
    line-height:1.6;
    color:var(--ink-700);
    margin:0;
  }
  @media (max-width:900px){
    .trio-grid{ grid-template-columns:1fr; }
  }

  /* ---------- MAP ---------- */
  .map-section{ background:var(--cream-100); }
  .venue-filter{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:22px;
  }
  .venue-filter label{
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--rust-600);
  }
  .venue-filter select{
    font-family:var(--sans);
    font-size:0.95rem;
    font-weight:600;
    color:var(--ink-900);
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239c3f24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;
    background-size:14px;
    border:1.5px solid var(--cream-200);
    border-radius:10px;
    padding:11px 40px 11px 16px;
    min-width:220px;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
  }
  .venue-filter select:focus{
    border-color:var(--gold-500);
    outline:none;
    box-shadow:0 0 0 3px rgba(217,164,65,0.25);
  }
  #map{
    width:100%;
    height:440px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    border:6px solid #fff;
  }
  .map-note{
    margin-top:18px;
    font-size:0.85rem;
    color:var(--ink-700);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .venue-list{
    margin-top:28px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
  }
  .venue-card{
    background:#fff;
    border:1px solid var(--cream-200);
    border-radius:14px;
    padding:16px 18px;
  }
  .venue-card strong{ display:block; font-size:0.98rem; color:var(--ink-900); }
  .venue-card span{ font-size:0.83rem; color:var(--ink-700); }
  @media (max-width:760px){
    .venue-list{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:480px){
    .venue-list{ grid-template-columns:1fr; }
    #map{ height:320px; }
  }

  /* ---------- PARTECIPA / FORM ---------- */
  .participate{ background:var(--brown-900); color:var(--cream-text); position:relative; overflow:hidden; }
  .participate::before{
    content:"";
    position:absolute; inset:0;
    background-image:radial-gradient(ellipse 700px 500px at 10% 110%, rgba(217,164,65,0.14), transparent 60%);
  }
  .participate .section-head{ position:relative; }
  .participate .section-head .eyebrow{ color:var(--gold-400); }
  .participate .section-head h2{ color:var(--cream-text); }
  .participate .section-head p{ color:rgba(246,234,210,0.82); }

  .participate-grid{
    position:relative;
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:clamp(30px,5vw,64px);
    align-items:start;
  }
  .steps{ list-style:none; margin:0; padding:0; }
  .steps li{
    display:flex;
    gap:16px;
    padding:18px 0;
    border-bottom:1px solid rgba(246,234,210,0.14);
  }
  .steps li:first-child{ padding-top:0; }
  .steps .num{
    font-family:var(--serif);
    font-weight:700;
    font-size:1.3rem;
    color:var(--gold-400);
    flex-shrink:0;
    width:32px;
  }
  .steps h4{
    margin:0 0 4px;
    font-size:1.02rem;
    color:var(--cream-text);
    font-weight:700;
  }
  .steps p{
    margin:0;
    font-size:0.88rem;
    line-height:1.55;
    color:rgba(246,234,210,0.75);
  }

  form.adesione{
    background:var(--cream-050);
    color:var(--ink-900);
    border-radius:var(--radius-lg);
    padding:clamp(26px,4vw,40px);
    box-shadow:var(--shadow-lg);
  }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .field{ margin-bottom:18px; }
  .field label{
    display:block;
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--rust-600);
    margin-bottom:7px;
  }
  .field input, .field textarea{
    width:100%;
    font-family:var(--sans);
    font-size:0.98rem;
    padding:12px 14px;
    border-radius:10px;
    border:1.5px solid var(--cream-200);
    background:#fff;
    color:var(--ink-900);
  }
  .field input:focus, .field textarea:focus{
    border-color:var(--gold-500);
    outline:none;
    box-shadow:0 0 0 3px rgba(217,164,65,0.25);
  }
  .field textarea{ resize:vertical; min-height:90px; }
  .form-foot{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:6px;
    flex-wrap:wrap;
  }
  .form-note{ font-size:0.78rem; color:var(--ink-700); }
  .confirm-msg{
    display:none;
    margin-top:18px;
    background:rgba(193,80,46,0.1);
    border:1px solid rgba(193,80,46,0.3);
    color:var(--rust-600);
    padding:14px 16px;
    border-radius:12px;
    font-size:0.9rem;
    font-weight:600;
  }
  .confirm-msg.show{ display:block; }

  @media (max-width:900px){
    .participate-grid{ grid-template-columns:1fr; }
  }
  @media (max-width:560px){
    .field-row{ grid-template-columns:1fr; }
  }

  /* ---------- NUMBERS / GALLERY ---------- */
  .numbers{ background:var(--cream-050); }
  .stat-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-bottom:48px;
  }
  .stat{
    background:var(--cream-100);
    border-radius:var(--radius-md);
    padding:26px 24px;
    text-align:center;
  }
  .stat .num{
    font-family:var(--serif);
    font-weight:900;
    font-size:clamp(2rem,4vw,2.6rem);
    color:var(--rust-500);
    display:block;
  }
  .stat .label{
    font-size:0.82rem;
    color:var(--ink-700);
    margin-top:6px;
  }
  .gallery{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
  }
  .gallery-item{
    aspect-ratio:1;
    border-radius:14px;
    background:linear-gradient(150deg, var(--maroon-800), var(--brown-800));
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(228,182,88,0.7);
    font-size:0.72rem;
    text-align:center;
    padding:10px;
    line-height:1.4;
  }
  @media (max-width:760px){
    .stat-row{ grid-template-columns:1fr; }
    .gallery{ grid-template-columns:1fr 1fr; }
  }

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--brown-950);
    color:rgba(246,234,210,0.7);
    padding:48px 0 32px;
  }
  .footer-grid{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
    padding-bottom:28px;
    border-bottom:1px solid rgba(246,234,210,0.12);
  }
  .footer-brand{
    font-family:var(--serif);
    font-weight:900;
    font-size:1.3rem;
    color:var(--cream-text);
  }
  .footer-brand span{
    display:block;
    font-family:var(--sans);
    font-weight:500;
    font-size:0.76rem;
    letter-spacing:0.04em;
    color:rgba(246,234,210,0.55);
    margin-top:2px;
  }
  .footer-links{
    display:flex;
    gap:26px;
    flex-wrap:wrap;
    font-size:0.9rem;
  }
  .footer-links a{ text-decoration:none; }
  .footer-links a:hover{ color:var(--gold-400); }
  .footer-bottom{
    padding-top:22px;
    font-size:0.78rem;
    color:rgba(246,234,210,0.4);
    text-align:center;
  }

  .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;
  }