:root {
  --ink: #2a2118;
  --wine: #6b2635;
  --wine-dark: #351b1b;
  --cream: #e9e0cf;
  --paper: #f5efe3;
  --gold: #b07b3f;
  --sage: #687158;
  --oak: #8b623d;
  --clay: #a75f42;
  --line: rgba(58, 43, 29, .19);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; }
button, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header { height: 82px; padding: 0 clamp(22px, 5vw, 72px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); background: rgba(245,239,227,.92); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); }
.jastorm-link { width: fit-content; display: flex; align-items: center; }
.jastorm-link img { width: 118px; max-height: 34px; object-fit: contain; object-position: left center; filter: brightness(0); }
.wordmark, .footer-brand { color: var(--ink); text-decoration: none; font-size: 13px; letter-spacing: .2em; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.wordmark-dot, .footer-brand span { width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--wine); display: block; }
.learn-link { justify-self: end; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; }
.learn-link span { color: var(--wine); padding-left: 7px; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 24px; }

.hero { min-height: 715px; position: relative; overflow: hidden; display: grid; place-items: center; padding: 86px 22px 106px; color: #fffaf0; background: var(--wine-dark); }
.hero::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(32,20,13,.76), rgba(48,25,21,.53) 52%, rgba(24,21,14,.66)), linear-gradient(0deg, rgba(35,24,16,.7), transparent 55%); }
.hero-media { position: absolute; inset: 0; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) sepia(.15) contrast(1.06); }
.hero-copy { position: relative; z-index: 2; width: min(920px, 100%); text-align: center; }
.eyebrow { margin: 0 0 22px; color: var(--wine); font-size: 11px; letter-spacing: .22em; font-weight: 700; }
.hero .eyebrow { color: #e0bb7b; }
h1, h2 { font-family: "Playfair Display", serif; letter-spacing: -.035em; }
h1 { font-size: clamp(62px, 9vw, 112px); line-height: .82; margin: 0; font-weight: 600; }
h1 em, h2 em { color: var(--wine); font-weight: 600; }
.hero h1 em { color: #e3b971; }
.intro { max-width: 580px; margin: 34px auto 30px; line-height: 1.7; font-size: 17px; color: rgba(255,250,240,.84); }
.vine { display: none; }
.vine::before, .vine::after { content: ""; position: absolute; width: 100px; height: 180px; border: 2px solid var(--sage); border-radius: 100% 0 100% 0; }
.vine::before { top: 120px; left: 90px; transform: rotate(35deg); }
.vine::after { top: 280px; right: 40px; transform: rotate(210deg); }
.vine-left { left: -225px; bottom: -130px; transform: rotate(-25deg); }
.vine-right { right: -235px; top: -90px; transform: rotate(155deg); }

.ask-card { background: white; padding: 16px 16px 16px 22px; text-align: left; box-shadow: 0 18px 50px rgba(55,31,23,.12); border: 1px solid rgba(111,24,50,.09); max-width: 850px; margin: auto; }
.ask-card label { display: block; font-size: 10px; text-transform: uppercase; font-weight: 700; color: var(--wine); letter-spacing: .18em; margin: 0 0 3px; }
.ask-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; }
.ask-row textarea { width: 100%; border: 0; outline: 0; resize: none; background: transparent; padding: 6px 0 0; color: var(--ink); line-height: 1.45; }
.ask-row textarea::placeholder { color: #9b918c; }
.voice-button { height: 52px; min-width: 74px; color: var(--wine); background: #f7f1f0; border: 0; cursor: pointer; padding: 0 13px; display: grid; place-items: center; gap: 1px; }
.voice-button svg { width: 21px; fill: currentColor; }
.voice-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.voice-button.listening { color: white; background: var(--wine); animation: pulse 1.25s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(111,24,50,.12); } }
.submit-button { height: 52px; background: var(--wine); color: white; border: 0; padding: 0 23px; cursor: pointer; font-weight: 700; }
.submit-button span { padding-left: 13px; }
.voice-status { margin: 4px 0 0; min-height: 0; color: var(--wine); font-size: 12px; }
.quick-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 22px; align-items: center; font-size: 12px; }
.quick-picks span { color: rgba(255,255,255,.72); }
.quick-picks button { color: white; border: 1px solid rgba(255,255,255,.35); background: rgba(30,20,14,.3); backdrop-filter: blur(6px); border-radius: 999px; padding: 7px 13px; cursor: pointer; }
.quick-picks button:hover { border-color: var(--wine); color: var(--wine); }

.result-section { background: var(--wine-dark); color: white; scroll-margin-top: 82px; }
.result-inner { position: relative; max-width: 1250px; margin: auto; padding: 70px clamp(22px,5vw,72px) 52px; }
.result-section .eyebrow { color: #dcb982; }
.close-result { position: absolute; right: clamp(22px,5vw,72px); top: 42px; color: white; font-size: 30px; background: transparent; border: 0; cursor: pointer; }
.result-grid { display: grid; grid-template-columns: 1.1fr .95fr .8fr; gap: 44px; }
.result-for { color: #d8c8c4; margin: 0 0 8px; }
#wine-name { margin: 0; font-size: clamp(46px,6vw,78px); line-height: .95; color: #fff8ea; }
.wine-style { color: #dcb982; font-family: "Playfair Display", serif; font-style: italic; font-size: 21px; }
.why-card, .serve-card { border-left: 1px solid rgba(255,255,255,.2); padding-left: 30px; }
.result-grid h3 { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #dcb982; margin: 0 0 17px; }
.why-card p { line-height: 1.75; margin-top: 0; color: #eadfda; }
.wine-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 22px; }
.wine-tags span { border: 1px solid rgba(255,255,255,.24); padding: 6px 9px; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.serve-card dl { margin: 0; }
.serve-card dl div { margin-bottom: 17px; }
.serve-card dt { color: #bba9a4; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.serve-card dd { margin: 3px 0 0; font-family: "Playfair Display", serif; font-size: 17px; color: #fff8ea; }
.bottles-panel { border-top: 1px solid rgba(255,255,255,.15); margin-top: 48px; padding-top: 38px; }
.bottles-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 24px; }
.bottles-heading .eyebrow { margin-bottom: 8px; }
.bottles-heading h3 { margin: 0; font-family: "Playfair Display", serif; font-size: 32px; color: #fff8ea; }
.bottles-heading > p { max-width: 410px; margin: 0; color: #bba9a4; font-size: 12px; line-height: 1.6; }
.bottle-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; min-height: 190px; }
.bottle-card { min-width: 0; background: rgba(255,255,255,.07); color: white; text-decoration: none; display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 18px; align-items: center; padding: 16px; border: 1px solid rgba(255,255,255,.09); transition: background .2s, transform .2s; }
.bottle-card:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.bottle-image { width: 90px; height: 154px; background: #f3eee5; display: grid; place-items: center; overflow: hidden; }
.bottle-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.bottle-brand { margin: 0 0 7px; color: #dcb982; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bottle-name { margin: 0 0 12px; font: 18px/1.2 "Playfair Display", serif; color: #fff8ea; }
.bottle-meta { margin: 0; color: #bba9a4; font-size: 11px; line-height: 1.5; }
.bottle-loading { grid-column: 1 / -1; margin: auto; color: #bba9a4; }
.catalog-disclosure { color: #947e78; font-size: 10px; line-height: 1.5; margin: 15px 0 0; }
.result-note { border-top: 1px solid rgba(255,255,255,.15); margin: 46px 0 0; padding-top: 22px; font-size: 11px; color: #bba9a4; }

.ad-section { padding: 30px 22px; border-bottom: 1px solid var(--line); background: #ded2bf; }
.ad-frame { width: min(720px, 100%); margin: auto; }
.ad-disclosure { display: block; width: fit-content; margin: 0 0 7px auto; color: #776a64; text-decoration: none; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ad-disclosure:hover { color: var(--wine); }
.ad-slot { width: 100%; min-height: 90px; display: grid; place-items: center; overflow: hidden; }
.ad-slot img, .ad-slot iframe, .ad-slot video { display: block; max-width: 100%; height: auto; }

.guide-section, .styles-section { max-width: 1250px; margin: auto; padding: 110px clamp(22px,5vw,72px); }
.section-heading { display: grid; grid-template-columns: 1fr 400px; gap: 60px; align-items: end; margin-bottom: 54px; }
.section-heading h2, .styles-copy h2 { font-size: clamp(44px,5vw,68px); margin: 0; line-height: 1; }
.section-heading > p, .styles-copy > p { line-height: 1.75; color: #6d605a; margin: 0; }
.rule-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rule-grid article { position: relative; min-height: 300px; padding: 28px 26px; border-right: 1px solid var(--line); }
.rule-grid article:last-child { border: 0; }
.rule-grid article > span { color: #9f928a; font-size: 11px; }
.rule-icon { font-family: serif; color: var(--wine); font-size: 44px; margin: 38px 0 28px; }
.rule-grid h3 { font-family: "Playfair Display", serif; font-size: 21px; margin: 0 0 12px; }
.rule-grid p { color: #73645e; font-size: 14px; line-height: 1.65; }

.earth-gallery { display: grid; grid-template-columns: 1.2fr 1fr 1fr; height: 520px; background: #231a13; }
.earth-card { position: relative; overflow: hidden; margin: 0; }
.earth-card picture, .earth-card img { display: block; width: 100%; height: 100%; }
.earth-card img { object-fit: cover; filter: saturate(.78) sepia(.12); transition: transform .8s ease, filter .8s ease; }
.earth-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(28,17,10,.83), transparent 65%); }
.earth-card:hover img { transform: scale(1.025); filter: saturate(.95); }
.earth-card figcaption { position: absolute; z-index: 2; left: 28px; right: 24px; bottom: 28px; color: white; }
.earth-card figcaption span { display: block; color: #e0bb7b; margin-bottom: 8px; font-size: 9px; letter-spacing: .16em; font-weight: 700; }
.earth-card figcaption strong { font: 22px "Playfair Display",serif; color: #fff8ea; }

.styles-section { display: grid; grid-template-columns: 360px 1fr; gap: 100px; border-top: 1px solid var(--line); }
.styles-copy { position: sticky; top: 120px; align-self: start; }
.styles-copy > p:last-child { margin-top: 28px; }
.style-list { border-top: 1px solid var(--line); }
.style-list button { width: 100%; display: grid; grid-template-columns: 50px 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 24px 10px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); font-family: "Playfair Display", serif; font-size: 27px; cursor: pointer; transition: padding .2s, color .2s; }
.style-list button:hover { padding-left: 20px; color: var(--wine); }
.style-list button > span { font: 10px "DM Sans", sans-serif; color: #9b8b84; }
.style-list small { font: 12px "DM Sans", sans-serif; color: #74665f; }
.source-note { border-top: 1px solid var(--line); padding: 35px clamp(22px,5vw,72px); max-width: 1250px; margin: auto; display: flex; justify-content: space-between; gap: 30px; color: #756860; font-size: 12px; }
.source-note p { margin: 0; max-width: 650px; }
.source-note a { color: var(--wine); font-weight: 700; text-decoration: none; white-space: nowrap; }
.source-links { display: flex; gap: 20px; }
footer { background: #17110f; color: #b5aaa3; min-height: 140px; padding: 40px clamp(22px,5vw,72px); display: flex; align-items: center; justify-content: space-between; gap: 25px; font-size: 12px; }
footer a { color: #ddd1c8; text-decoration: none; }
.footer-brand { color: white; }
.footer-links { display: flex; gap: 24px; }

@media (max-width: 850px) {
  .site-header { grid-template-columns: 1fr auto; }
  .wordmark { display: none; }
  .guide-link { display: none; }
  .ask-row { grid-template-columns: 1fr auto; }
  .submit-button { grid-column: 1 / -1; }
  .result-grid { grid-template-columns: 1fr; gap: 30px; }
  .bottle-list { grid-template-columns: 1fr; }
  .why-card, .serve-card { border-left: 0; border-top: 1px solid rgba(255,255,255,.2); padding: 26px 0 0; }
  .section-heading { grid-template-columns: 1fr; gap: 22px; }
  .rule-grid { grid-template-columns: 1fr 1fr; }
  .rule-grid article:nth-child(2) { border-right: 0; }
  .rule-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .styles-section { grid-template-columns: 1fr; gap: 55px; }
  .styles-copy { position: static; }
  .earth-gallery { grid-template-columns: 1fr 1fr; height: 720px; }
  .earth-card:first-child { grid-column: 1/-1; }
}

@media (max-width: 520px) {
  .site-header { height: 68px; }
  .jastorm-link img { width: 96px; }
  .learn-link { font-size: 11px; }
  .hero { min-height: 670px; padding-top: 70px; }
  h1 { font-size: 62px; }
  .intro { font-size: 15px; }
  .ask-card { padding: 15px; }
  .ask-row { grid-template-columns: minmax(0,1fr) 54px; }
  .voice-button { min-width: 54px; }
  .voice-label { display: none; }
  .bottles-heading { display: block; }
  .bottles-heading > p { margin-top: 10px; }
  .bottle-card { grid-template-columns: 76px minmax(0,1fr); }
  .bottle-image { width: 76px; height: 126px; }
  .ad-section { padding: 22px 12px; }
  .ad-slot { min-height: 50px; }
  .rule-grid { grid-template-columns: 1fr; }
  .earth-gallery { grid-template-columns: 1fr; height: auto; }
  .earth-card, .earth-card:first-child { grid-column: auto; height: 430px; }
  .rule-grid article { border-right: 0; border-bottom: 1px solid var(--line); min-height: 245px; }
  .styles-section, .guide-section { padding-top: 80px; padding-bottom: 80px; }
  .style-list button { grid-template-columns: 30px 1fr; font-size: 23px; }
  .style-list small { grid-column: 2; }
  .source-note, footer { flex-direction: column; align-items: flex-start; }
  .source-links { flex-direction: column; gap: 8px; }
  .footer-links { flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }