/* North Winton Botanicals — site styles.
   Fonts are self-hosted (OFL): Barlow Condensed for display, Barlow for body. */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/BarlowCondensed-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/BarlowCondensed-700.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/Barlow-500.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/Barlow-600.woff2) format("woff2")}

:root{
  --black:#000000;
  --pocket:#151109;
  --pocket-edge:rgba(255,205,118,.22);
  --gold:#FFCD76;
  --brass:#B9873E;
  --ivory:#F3EBDA;
  --ivory-dim:rgba(243,235,218,.72);
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --max:1320px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--black);color:var(--ivory);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--display);line-height:.95;margin:0;text-wrap:balance}
p{margin:0}

/* nav */
.nav{position:sticky;top:0;z-index:5;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,205,118,.18)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
.nav img{width:48px;height:48px}
.nav .name{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:.01em;color:var(--gold);text-decoration:none}
.nav nav{margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;font-weight:500;font-size:16px}
.nav ul a{text-decoration:none;color:var(--ivory-dim)}
.nav ul a:hover{color:var(--ivory)}
.nav .ig{color:var(--gold)!important}
@media (max-width:720px){.nav{position:static}.nav .wrap{flex-wrap:wrap;height:auto;gap:12px 14px;padding-block:12px}.nav img{width:40px;height:40px}.nav .name{font-size:19px;white-space:nowrap}.nav nav{flex-basis:100%;margin:0}.nav ul{flex-wrap:wrap;gap:6px 18px;font-size:15px}}

/* hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(48px,9vw,120px) clamp(48px,8vw,96px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(58px,9vw,124px);font-weight:700;color:var(--ivory);letter-spacing:-.005em}
.hero h1 span{display:block;color:var(--gold)}
.hero p{font-size:clamp(18px,1.5vw,21px);max-width:34em;color:var(--ivory-dim);margin-top:26px}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.btn{display:inline-block;font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:.02em;padding:14px 26px;text-decoration:none;border:2px solid var(--gold);border-radius:4px}
.btn--fill{background:var(--gold);color:var(--black)}
.btn--fill:hover{background:#ffd88f}
.btn--line{color:var(--gold)}
.btn--line:hover{background:rgba(255,205,118,.1)}
.hero .badge{position:relative;justify-self:center;width:min(100%,420px);aspect-ratio:1}
.hero .badge img{width:100%;height:100%;display:block;filter:drop-shadow(0 30px 60px rgba(255,205,118,.18))}
.hero::before{content:"";position:absolute;right:-12%;top:-8%;width:min(62vw,760px);aspect-ratio:1;background:url(../images/tree-gold-800.webp) center/contain no-repeat;opacity:.07;pointer-events:none}
.hero .wrap{position:relative}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero .badge{width:min(52%,260px);order:-1}}
@media (max-width:480px){.hero{padding-block:36px 48px}.cta{flex-direction:column}.btn{text-align:center}}

/* section heads */
.sec{padding-block:clamp(56px,7vw,104px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2{font-size:clamp(40px,5.5vw,72px);font-weight:600}
.sec-head p{color:var(--ivory-dim);max-width:34em;font-size:18px}
@media (max-width:720px){.sec-head{grid-template-columns:1fr}}

/* binder page */
.carry .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.carry h2{font-size:clamp(40px,5.5vw,72px);font-weight:600;margin-bottom:18px}
.carry .lead{color:var(--ivory-dim);font-size:18px;max-width:30em}
.carry .hint{margin-top:22px;font-family:var(--display);font-weight:600;font-size:19px;color:var(--gold)}
.carry .extras{margin-top:28px;padding-top:20px;border-top:1px solid var(--pocket-edge);color:var(--ivory-dim);font-size:16px;max-width:30em}
.carry .extras strong{color:var(--ivory);font-weight:600}
.binder{position:relative;max-width:520px;width:100%;justify-self:end;border:1px solid var(--pocket-edge);border-radius:14px;padding:clamp(14px,2.4vw,28px) clamp(14px,2.4vw,28px) clamp(14px,2.4vw,28px) clamp(26px,3.4vw,44px);background:linear-gradient(180deg,#0a0805,#000)}
.binder::before{content:"";position:absolute;left:9px;top:10%;bottom:10%;width:6px;border-radius:3px;background:repeating-linear-gradient(180deg,var(--brass) 0 20px,transparent 20px 48px);opacity:.45}
.pockets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.4vw,16px);list-style:none;margin:0;padding:0}
.pocket{appearance:none;-webkit-tap-highlight-color:transparent;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;aspect-ratio:5/7;perspective:900px;text-align:left;display:block;width:100%;border-radius:10px}
.pocket .card{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pocket[aria-pressed="true"] .card{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:10px;border:1px solid var(--pocket-edge);background:var(--pocket);padding:14px;display:flex;flex-direction:column;justify-content:flex-end;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.face::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.05) 100%);pointer-events:none}
.face--front h3{font-size:clamp(16px,1.7vw,22px);font-weight:600;color:var(--ivory);line-height:.98}
.face--front .rule{width:28px;height:3px;background:var(--gold);margin-bottom:10px}
.face--back{transform:rotateY(180deg);background:var(--gold);border-color:var(--gold);color:var(--black);justify-content:center}
.face--back p{font-family:var(--display);font-weight:600;font-size:clamp(14px,1.4vw,19px);line-height:1.15}
.pocket:hover .face--front{border-color:var(--gold)}
.pocket:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (max-width:860px){.carry .wrap{grid-template-columns:1fr}.binder{justify-self:start;max-width:520px}}
@media (max-width:480px){.face{padding:10px}.face--front .rule{margin-bottom:6px}}
@media (prefers-reduced-motion:reduce){.pocket .card{transition:none}}

/* buy + clean band */
.band{background:var(--gold);color:var(--black)}
.band .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,80px);padding-block:clamp(48px,6vw,88px)}
.band h2{font-size:clamp(40px,5vw,68px);font-weight:700;margin-bottom:14px}
.band p{font-size:18px;max-width:30em}
.band .note{margin-top:20px;font-family:var(--display);font-size:20px;font-weight:600}
@media (max-width:720px){.band .wrap{grid-template-columns:1fr}}

/* events */
.events-sec{border-top:1px solid rgba(255,205,118,.18);border-bottom:1px solid rgba(255,205,118,.18)}
.events-sec .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(28px,5vw,72px);align-items:center;padding-block:clamp(48px,6vw,88px)}
.events-sec h2{font-size:clamp(40px,5.5vw,72px);font-weight:600}
.events-sec h2 span{display:block;color:var(--gold)}
.events-sec p{color:var(--ivory-dim);font-size:18px;max-width:30em}
.events-sec .btn{margin-top:22px}
@media (max-width:720px){.events-sec .wrap{grid-template-columns:1fr}}

/* visit */
.visit .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:center}
.visit h2{font-size:clamp(40px,5.5vw,72px);font-weight:600;margin-bottom:24px}
.visit dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:14px 24px;font-size:18px}
.visit dt{color:var(--brass);font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.02em;padding-top:2px}
.visit dd{margin:0}
.visit dd.addr{font-family:var(--display);font-size:clamp(26px,3vw,36px);font-weight:600;line-height:1.1;color:var(--ivory)}
.visit dd a{color:var(--gold)}
.visit .soon{color:var(--ivory-dim)}
.visit figure{margin:0;border:1px solid var(--pocket-edge);border-radius:12px;overflow:hidden;background:var(--pocket)}
.visit img{display:block;width:100%;height:auto}
.visit figcaption{padding:12px 16px;font-size:14px;color:var(--ivory-dim)}
.events{margin-top:28px;padding:18px 20px;border:1px dashed var(--pocket-edge);border-radius:10px;max-width:34em;color:var(--ivory-dim)}
.events strong{color:var(--gold);font-weight:600}
@media (max-width:860px){.visit .wrap{grid-template-columns:1fr}.visit dl{grid-template-columns:1fr;gap:4px 0}.visit dt{margin-top:14px}}

footer{border-top:1px solid rgba(255,205,118,.18);padding-block:28px;font-size:14px;color:var(--ivory-dim)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center}
footer img{width:36px;height:36px}
footer a{color:var(--gold);text-decoration:none}
footer address a{text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:no-preference){.pocket,.btn{transition:border-color .2s,background .2s,color .2s}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id]{scroll-margin-top:80px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- about ---- */
.about .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px clamp(28px,5vw,72px);align-items:start}
.about h2{font-size:clamp(36px,4.6vw,60px);font-weight:600}
.about__text{display:grid;gap:18px;color:var(--ivory-dim);font-size:18px;max-width:34em}
@media (max-width:860px){.about .wrap{grid-template-columns:1fr}}

/* ---- faq ---- */
.faq h2{font-size:clamp(36px,4.6vw,60px);font-weight:600;margin-bottom:clamp(20px,3vw,36px)}
.faq__list{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,72px)}
.faq__list>div{padding:18px 0;border-top:1px solid var(--pocket-edge)}
.faq__list dt{font-family:var(--display);font-weight:600;font-size:23px;color:var(--ivory);line-height:1.1}
.faq__list dd{margin:8px 0 0;color:var(--ivory-dim);font-size:17px;max-width:32em}
.faq__list dd a{color:var(--gold)}
@media (max-width:720px){.faq__list{grid-template-columns:1fr}}

/* address elements carry the inherited style; they are not italic */
address{font-style:normal}

/* ---- 404 page ---- */
.nf{min-height:70vh;display:grid;place-items:center;text-align:center;padding-block:64px}
.nf img{width:120px;height:120px;margin-bottom:24px}
.nf h1{font-size:clamp(44px,7vw,84px);font-weight:700;color:var(--ivory)}
.nf p{color:var(--ivory-dim);margin-top:16px;font-size:18px}
.nf .btn{margin-top:32px;display:inline-block}