@font-face{font-family:"Libre Caslon Condensed";src:url(fonts/caslon-cond.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Caslon Condensed";src:url(fonts/caslon-cond-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(fonts/franklin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Caslon Fallback";src:local("Georgia");size-adjust:84%;ascent-override:96%;descent-override:26%}
@font-face{font-family:"Franklin Fallback";src:local("Arial");size-adjust:104%;ascent-override:92%;descent-override:24%}

:root{
  --green:#193629;
  --cream:#fff1d4;
  --cream-deep:#f2e4c3;
  --red:#a62c28;
  --gold:#e9b64f;
  --ink:#1f3529;
  --line:rgba(25,54,41,.2);
  --focus:var(--green);
  --display:"Libre Caslon Condensed","Caslon Fallback",Georgia,serif;
  --sans:"Libre Franklin","Franklin Fallback",Arial,sans-serif;
  --gutter:clamp(16px,5vw,72px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
  scrollbar-color:var(--green) var(--cream-deep);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--sans);caret-color:var(--red);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold);color:var(--green)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,p,dl,dd{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em;text-wrap:balance}
h1 em,h2 em{font-style:italic;font-weight:500}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.topline,.hero,.dry,.crimson,.closing,#age-gate{--focus:var(--cream)}
.label,.tags,.flavor,.hero-note,.band li,.notes dt{font:600 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}

.skip{position:absolute;left:16px;top:-80px;z-index:200;background:var(--green);color:var(--cream);padding:12px 18px;border-radius:999px;font-weight:600}
.skip:focus{top:16px}

.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;border:1.5px solid transparent;font:600 15px/1 var(--sans);letter-spacing:.02em;text-decoration:none;transition:background-color .2s,color .2s,transform .2s var(--ease-out)}
.button:hover{transform:translateY(-1px)}
.button:active{transform:translateY(0)}
.cream{background:var(--cream);color:var(--green)}
.cream:hover{background:#fff8e8}
.ghost{background:transparent;border-color:rgba(255,241,212,.55);color:var(--cream)}
.ghost:hover{border-color:var(--cream)}

/* Age confirmation */
#age-gate{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:var(--green);color:var(--cream);z-index:150}
#age-gate::backdrop{background:var(--green)}
.needs-gate #age-gate,#age-gate[open]{display:grid;place-items:center}
.needs-gate,.needs-gate body{overflow:hidden}
.gate-inner{max-width:460px;text-align:center;display:grid;justify-items:center;gap:20px}
.gate-mark{width:112px}
.gate-mark text,.monogram text,.stamp text{font-family:var(--display)}
.stamp .s-sans{font-family:var(--sans);font-weight:600}
#age-gate h2{font-size:clamp(44px,9vw,68px);line-height:.98}
#age-gate h2 em{color:var(--gold)}
#age-gate p{color:#f1e5c8;max-width:36ch}
.gate-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
.gate-no{font-family:var(--display);font-style:italic;font-size:22px}

/* Top line and header */
.topline{background:var(--green);color:var(--cream);text-align:center;font:500 14px/1.4 var(--sans);padding:10px 16px;margin:0}
.topline a{color:var(--gold);font-weight:600;margin-left:6px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px var(--gutter);border-bottom:1px solid var(--line)}
.wordmark{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--green);line-height:1}
.wm-name{position:relative;font:700 31px/.9 var(--display);text-transform:uppercase;letter-spacing:.01em;padding-right:4px}
.wm-leaf{position:absolute;width:21px;right:-14px;top:-12px}
.wm-sub{font:600 12px/1 var(--display);text-transform:uppercase;letter-spacing:.34em;margin:7px 0 0 .34em}
.site-header nav{display:flex;gap:clamp(18px,2.4vw,36px);font-weight:500;font-size:15px}
.site-header nav a{text-decoration:none;padding:10px 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 6px)/0 1px no-repeat;transition:background-size .3s var(--ease-out)}
.site-header nav a:hover{background-size:100% 1px}
.navcta{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1.5px solid var(--green);border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;transition:background-color .2s,color .2s}
.navcta:hover{background:var(--green);color:var(--cream)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr);min-height:clamp(560px,48vw,740px);background:var(--green);color:var(--cream);position:relative}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(48px,6.4vw,104px) 6% 36px 9%}
.hero h1{font-size:clamp(54px,7vw,96px);line-height:.92;margin-bottom:28px}
.hero h1 em{color:var(--gold)}
.hero-copy>p:first-of-type{max-width:30ch;font-size:19px;line-height:1.55;color:#f1e5c8}
.hero .button{margin-top:32px}
.hero-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;width:100%;margin-top:auto;padding-top:56px;color:#e8dcbc}
.hero-photo{position:relative;min-height:420px}
.hero-photo picture,.hero-photo img{position:absolute;inset:0;width:100%;height:100%}
.hero-photo img{object-fit:cover;object-position:52% 58%}
.photo-caption{position:absolute;left:0;right:0;bottom:0;padding:72px 28px 24px;text-wrap:balance;background:linear-gradient(to top,rgba(9,24,17,.82),rgba(9,24,17,.5) 55%,rgba(9,24,17,0));font:italic 500 21px/1.25 var(--display);color:var(--cream)}
.stamp{position:absolute;right:6%;bottom:-62px;width:clamp(120px,10.5vw,152px);transform:rotate(-9deg);z-index:3;filter:drop-shadow(0 12px 18px rgba(9,24,17,.3))}

.band{list-style:none;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;background:var(--gold);color:var(--ink);padding:21px calc(var(--gutter) + 190px) 21px var(--gutter)}
.band li{font-weight:700;font-size:13px}
.band li+li::before{content:"";display:inline-block;width:20px;height:14px;margin:0 22px;vertical-align:-1px;background:var(--red);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath d='M2 13c10-8 20-7 26 2-9 7-19 7-26-2Z'/%3E%3Cpath d='M4 14C2 8 6 4 11 1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath d='M2 13c10-8 20-7 26 2-9 7-19 7-26-2Z'/%3E%3Cpath d='M4 14C2 8 6 4 11 1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* Sections */
.section{padding:clamp(72px,9vw,128px) var(--gutter)}
h2{font-size:clamp(46px,5.6vw,84px);line-height:.96}
.section-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(40px,4.5vw,64px)}
.section-intro>p{max-width:32ch;font-size:18px}
.ciders h2 em,.roots h2 em,.visit h2 em{color:var(--red)}

/* Cider cards */
.cider-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.cider{display:grid;grid-template-columns:clamp(96px,8.6vw,128px) minmax(0,1fr);gap:clamp(16px,1.8vw,26px);padding:clamp(20px,1.9vw,28px);border-radius:4px;scroll-margin-top:24px}
.dry{background:var(--green);color:var(--cream)}
.crimson{background:var(--red);color:var(--cream)}
.gold{background:var(--gold);color:var(--ink)}
.can img{width:100%;height:auto;border-radius:3px;box-shadow:0 14px 24px -12px rgba(9,24,17,.55)}
.cider-body{display:flex;flex-direction:column;min-width:0}
.tags{display:flex;flex-direction:column;gap:2px}
.cider h3{font-size:clamp(40px,3.5vw,54px);font-weight:700;line-height:.94;margin:26px 0 16px}
.cider-body>p:not(.tags){max-width:34ch}
.flavor{display:flex;align-items:center;gap:12px;margin:24px 0 18px}
.scale{height:4px;flex:1;background:color-mix(in srgb,currentColor 28%,transparent);border-radius:2px}
.scale i{display:block;width:var(--v);height:100%;background:currentColor;border-radius:2px;position:relative}
.scale i::after{content:"";position:absolute;right:-5px;top:-4px;width:12px;height:12px;border-radius:50%;background:currentColor}
details{border-top:1px solid color-mix(in srgb,currentColor 40%,transparent);margin-top:auto}
summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;list-style:none;cursor:pointer;font-weight:600;font-size:15px}
summary::-webkit-details-marker{display:none}
summary svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:transform .35s var(--ease-out)}
details[open] summary svg{transform:rotate(45deg)}
.notes{padding:4px 0 6px;font-size:15.5px;line-height:1.55}
.notes dl{display:grid;gap:14px;margin-top:16px}
.notes dt{font-size:12px;opacity:.85}
.notes dd{margin-top:4px}

/* Roots */
.roots{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8%;padding-top:clamp(112px,12vw,168px)}
.hill{position:absolute;top:0;left:0;width:100%;height:64px;overflow:visible}
.hill path{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dashoffset 2.4s var(--ease-out)}
.hill.will-draw:not(.drawn) path{stroke-dashoffset:.7}
.roots h2{margin-bottom:40px}
.monogram{width:clamp(132px,13vw,184px)}
.roots-copy{display:grid;gap:22px;align-content:start;padding-top:14px}
.roots-copy p{max-width:58ch}
.roots-copy .large{font:400 clamp(25px,2.4vw,34px)/1.3 var(--display);max-width:26ch;color:var(--green)}
.signature{font:italic 500 clamp(24px,2vw,28px)/1.3 var(--display);color:var(--red);margin-top:14px}

/* Visit */
.visit{background:var(--cream-deep)}
.visit-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.visit-heading>div{max-width:38ch;display:grid;gap:14px;font-size:18px}
.soon strong{font-weight:700;color:var(--green)}
.experience-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.5vw,48px);margin-top:clamp(48px,5vw,72px)}
.experience-grid>div{border-top:1px solid rgba(25,54,41,.35);padding-top:24px}
.experience-grid h3{font-size:clamp(28px,2.4vw,34px);line-height:1.02;margin-bottom:12px}
.pairing{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px 32px;margin-top:clamp(48px,5vw,72px);padding:clamp(24px,3vw,40px);background:var(--cream);border-radius:4px}
.pairing h3{font-size:clamp(32px,3vw,44px);line-height:1}
.pair-buttons{display:flex;flex-wrap:wrap;gap:8px}
.pair-buttons button{min-height:44px;padding:0 18px;border:1.5px solid rgba(25,54,41,.35);border-radius:999px;background:transparent;color:var(--green);font-weight:600;font-size:14px;transition:background-color .2s,border-color .2s,color .2s}
.pair-buttons button:hover{border-color:var(--green)}
.pair-buttons button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--cream)}
.pair-result{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;border-top:1px solid var(--line);padding-top:24px;font-size:18px}
.pair-result a{font-weight:600;white-space:nowrap;margin-left:4px}
.chip{flex:none;width:14px;height:14px;border-radius:50%;transform:translateY(1px)}
.chip.dry{background:var(--green)}.chip.crimson{background:var(--red)}.chip.gold{background:var(--gold);box-shadow:inset 0 0 0 1.5px rgba(25,54,41,.35)}

/* Closing */
.closing{background:var(--red);color:var(--cream);text-align:center;padding:clamp(80px,10vw,136px) var(--gutter);scroll-margin-top:0}
.closing h2{font-size:clamp(54px,7vw,96px);line-height:.94;margin-bottom:28px}
.closing>p:first-of-type{max-width:40ch;margin:0 auto 36px;font-size:19px;color:#fbe7cf}
.closing-mail{margin-top:22px;font-size:15px;color:#fbe7cf}

/* Footer */
.site-footer{position:relative;padding:clamp(96px,9vw,128px) var(--gutter) 40px}
.footer-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px}
.footer-tag{font:italic 500 clamp(22px,2vw,26px)/1.2 var(--display);text-align:center;color:var(--green)}
.footer-tag em{color:var(--red)}
.footer-meta{text-align:right;font-size:14px;line-height:1.7}

@media (max-width:1120px){
  .cider-grid{grid-template-columns:minmax(0,1fr);max-width:760px}
  .cider{grid-template-columns:150px minmax(0,1fr)}
  .stamp{right:4%}
}
@media (max-width:900px){
  .hero-copy{padding:48px 7% 32px}
  .hero-note{flex-direction:column}
  .roots{gap:6%}
  .pairing{grid-template-columns:minmax(0,1fr)}
  .experience-grid{gap:28px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .topline{font-size:13px;padding:9px 12px}
  .site-header{flex-wrap:wrap;gap:6px 16px;padding:12px var(--gutter) 6px}
  .wm-name{font-size:26px}
  .wm-sub{font-size:11px}
  .navcta{min-height:40px;padding:0 16px;font-size:14px}
  .site-header nav{order:3;width:100%;justify-content:space-between;font-size:14px}
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-photo{order:-1;min-height:0;aspect-ratio:5/4}
  .photo-caption{padding:56px 20px 16px;padding-right:120px}
  .stamp{width:96px;right:18px;bottom:-40px}
  .hero-copy{padding:40px var(--gutter) 32px}
  .hero h1{font-size:min(15vw,64px);margin-bottom:20px}
  .hero-copy>p:first-of-type{font-size:17.5px}
  .hero .button{margin-top:26px}
  .hero-note{flex-direction:row;padding-top:36px}
  .band{padding:16px var(--gutter);justify-content:center}
  .band li{font-size:12px}
  .band li:not(:nth-child(2)){display:none}
  .band li::before{display:none!important}
  .section-intro,.visit-heading{flex-direction:column;align-items:flex-start;gap:20px}
  .cider{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:20px}
  .cider h3{margin-top:18px}
  .roots{grid-template-columns:minmax(0,1fr);gap:32px}
  .roots-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
  .roots h2{margin:0}
  .monogram{width:96px;flex:none}
  .experience-grid{grid-template-columns:minmax(0,1fr)}
  .pair-result{flex-wrap:wrap;gap:8px 12px}
  .pair-result>span:last-child{flex:1 1 220px}
  .footer-row{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:20px}
  .footer-meta{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important}
  .hill.will-draw:not(.drawn) path{stroke-dashoffset:0}
}
@media print{
  #age-gate,.topline,.navcta,.stamp,.skip{display:none!important}
  .needs-gate,.needs-gate body{overflow:visible}
}
