:root{
    --bg: #faf7f0;
    --bg-panel: #f1ead9;
    --hairline: rgba(33,29,23,0.12);
    --ivory: #211d17;
    --muted: #6f6656;
    --gold: #a3742c;
    --gold-bright: #8a731e;
    --amber-deep: #5c3d15;
  }
  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--ivory);
    font-family: 'Archivo', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  ::selection{ background: var(--gold); color: #faf7f0; }

  .label{
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
  }

  a{ color: inherit; }

  /* NAV */
  nav{
    position: fixed; top:0; left:0; right:0; z-index: 50;
    display:flex; align-items:center; justify-content:space-between;
    padding: 26px 6vw;
    background: linear-gradient(to bottom, rgba(250,247,240,0.92), rgba(250,247,240,0));
  }
  .wordmark{
    font-family:'Fraunces', serif;
    font-size: 19px;
    letter-spacing: 0.03em;
    font-weight: 500;
  }
  .wordmark span{ color: var(--gold); }
  nav .nav-cta{
    font-family:'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid var(--hairline);
    padding: 10px 18px;
    border-radius: 100px;
    transition: border-color .25s ease, color .25s ease;
  }
  nav .nav-cta:hover{ border-color: var(--gold); color: var(--gold-bright); }

  /* HERO */
  .hero{
    min-height: 100vh;
    display:flex;
    align-items:center;
    position: relative;
    padding: 140px 6vw 80px;
    background:
      radial-gradient(ellipse 60% 50% at 78% 30%, rgba(163,116,44,0.10), transparent 60%),
      var(--bg);
  }
  .hex-bg{
    position:absolute; inset:0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'><path d='M42 0 L84 24 L84 72 L42 96 L0 72 L0 24 Z' fill='none' stroke='%23211d17' stroke-opacity='0.05' stroke-width='1'/></svg>");
    background-size: 84px 96px;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black,  var(--bg));
  }
  .hero-grid{
    position: relative;
    width:100%;
    display:grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items:center;
  }
  .hero-copy .label{ display:block; margin-bottom: 22px; }
  h1{
    font-family:'Fraunces', serif;
    font-weight: 400;
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.03;
    margin: 0 0 26px;
    letter-spacing: -0.01em;
  }
  h1 em{
    font-style: italic;
    font-weight: 300;
    color: var(--gold-bright);
  }
  .hero-copy p{
    font-size: 17px;
    line-height: 1.65;
    color: var(--muted);
    max-width: 440px;
    margin: 0 0 40px;
  }
  .btn-row{ display:flex; align-items:center; gap: 22px; }
  .btn-primary{
    font-family:'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--gold);
    color: #faf7f0;
    padding: 17px 30px;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    transition: background .25s ease, transform .2s ease;
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .btn-primary:hover{ background: var(--gold-bright); transform: translateY(-1px); }
  .price-tag{
    font-family:'Space Mono', monospace;
    font-size: 13px;
    color: var(--muted);
  }
  .price-tag b{ color: var(--ivory); font-weight: 600; }

  /* JAR VISUAL */
  .jar-wrap{
    position: relative;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    height: 520px;
  }
  .drip{
    stroke-dasharray: 14 210;
    animation: dripfall 5.5s linear infinite;
  }
  .drip2{ animation-delay: 1.9s; }
  .drip3{ animation-delay: 3.4s; }
  @keyframes dripfall{
    0%{ stroke-dashoffset: 0; opacity: 0; }
    6%{ opacity: 1; }
    85%{ opacity: 1; }
    100%{ stroke-dashoffset: -230; opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .drip, .drip2, .drip3{ animation: none; opacity: .6; }
  }

  /* SPEC STRIP */
  .specs{
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    display:grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .spec{
    padding: 46px 6vw;
    border-right: 1px solid var(--hairline);
  }
  .spec:last-child{ border-right: none; }
  .spec .label{ margin-bottom: 14px; }
  .spec .val{
    font-family:'Fraunces', serif;
    font-size: 30px;
    font-weight: 400;
  }
  .spec .val small{
    font-family:'Archivo', sans-serif;
    font-size: 14px;
    color: var(--muted);
    margin-left: 4px;
  }

  /* STORY */
  .story{
    padding: 130px 6vw;
    display:grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 80px;
    align-items:start;
  }
  .story .label{ margin-bottom: 26px; }
  .story h2{
    font-family:'Fraunces', serif;
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.2;
    margin: 0;
    max-width: 420px;
  }
  .story-copy p{
    font-size: 16.5px;
    line-height: 1.8;
    color: var(--muted);
    max-width: 560px;
  }
  .story-copy p + p{ margin-top: 22px; }
  .story-copy strong{ color: var(--ivory); font-weight: 500; }

  /* NOTES */
  .notes{
    padding: 0 6vw 130px;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
  }
  .note{
    background: var(--bg);
    padding: 44px 34px;
  }
  .note .num{
    font-family:'Space Mono', monospace;
    font-size: 12px;
    color: var(--gold);
    display:block;
    margin-bottom: 18px;
  }
  .note h3{
    font-family:'Fraunces', serif;
    font-weight: 500;
    font-size: 21px;
    margin: 0 0 12px;
  }
  .note p{
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
  }

  /* CTA FOOTER */
  footer{
    padding: 110px 6vw 50px;
    text-align:center;
    position: relative;
    background: linear-gradient(to top, rgba(163,116,44,0.08), transparent 55%);
  }
  footer h2{
    font-family:'Fraunces', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(30px, 4.5vw, 52px);
    margin: 0 0 40px;
    color: var(--gold-bright);
  }
  .foot-bottom{
    margin-top: 90px;
    padding-top: 26px;
    border-top: 1px solid var(--hairline);
    display:flex;
    justify-content:space-between;
    font-family:'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--muted);
    text-transform: uppercase;
  }

  @media (max-width: 860px){
    .hero-grid{ grid-template-columns: 1fr; }
    .jar-wrap{ height: 340px; order: -1; }
    .specs{ grid-template-columns: repeat(2, 1fr); }
    .spec{ border-bottom: 1px solid var(--hairline); }
    .story{ grid-template-columns: 1fr; gap: 30px; }
    .notes{ grid-template-columns: 1fr; }
    .foot-bottom{ flex-direction: column; gap: 10px; text-align:center; }
  }