/* JH Mountain Glow · R1A.2 "Teton Warm Luxury" · one stylesheet, no framework */
@font-face{font-family:"Bodoni Moda";src:url(/assets/fonts/bodoni-moda-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(/assets/fonts/bodoni-moda-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/assets/fonts/eb-garamond-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/assets/fonts/eb-garamond-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Pinyon Script";src:url(/assets/fonts/pinyon-script-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* colour */
  --cream:#F6F0E3; --paper:#FFFBF3; --sand:#EFE6D2; --ink:#1E1713; --ink-2:#2A201B;
  --text:#2A201B; --muted:#6B5D52; --on-dark:#F5EDDE; --on-dark-muted:#CBBDA9;
  --clay:#7E3527; --clay-deep:#68291E; --peach:#D9A08A; --hair:#DDD2C0; --hair-dark:rgba(245,237,222,.16);
  /* type */
  --f-display:"Bodoni Moda","Bodoni 72",Didot,"Big Caslon",Georgia,serif;
  --f-body:"EB Garamond",Garamond,"Iowan Old Style",Georgia,serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --f-script:"Pinyon Script","Snell Roundhand",cursive;
  --t-hero:clamp(2.4rem,1.55rem + 3vw,4.1rem); --t-h2:clamp(2.05rem,1.45rem + 2.5vw,3.55rem);
  --t-h3:clamp(1.45rem,1.2rem + .9vw,1.95rem); --t-statement:clamp(1.9rem,1.25rem + 2.9vw,3.7rem);
  --t-body:clamp(1.125rem,1.06rem + .25vw,1.25rem); --t-small:1.0625rem; --t-label:.72rem; --track:.2em;
  /* layout */
  --wrap:1200px; --gutter:clamp(20px,5vw,64px); --hdr:84px; --sec:clamp(80px,10vw,152px); --radius:12px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0;background:var(--cream);color:var(--text);font:400 var(--t-body)/1.62 var(--f-body);font-kerning:normal;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:2px}
.on-dark a:focus-visible,.hero a:focus-visible,.menu a:focus-visible,.menu button:focus-visible,.ftr a:focus-visible,
.hdr:not(.is-solid) a:focus-visible,.hdr:not(.is-solid) button:focus-visible{outline-color:var(--peach)}   /* >= 3:1 on dark */
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.08;letter-spacing:-.01em;margin:0;text-wrap:balance}
h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3);line-height:1.15}
p{margin:0 0 1em} p:last-child{margin-bottom:0}
address{font-style:normal}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--paper);color:var(--ink);padding:10px 16px;font:var(--t-label)/1 var(--f-mono);letter-spacing:var(--track);text-transform:uppercase}
.skip:focus{left:8px}
.label,.eyebrow{font:400 var(--t-label)/1.5 var(--f-mono);letter-spacing:var(--track);text-transform:uppercase}
.eyebrow{display:block;color:var(--clay);margin-bottom:22px}
.on-dark .eyebrow,.hero .eyebrow{color:var(--peach)}
.muted{color:var(--muted)} .on-dark .muted{color:var(--on-dark-muted)}
.lead{font-size:clamp(1.2rem,1.1rem + .45vw,1.45rem);line-height:1.55;text-wrap:pretty}
.script{font-family:var(--f-script);font-weight:400;font-size:1.32em;line-height:.8;color:var(--clay);letter-spacing:0;padding:0 .04em}
em.hl{font-style:italic;color:var(--peach)}

/* buttons: pills, used sparingly */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:14px 28px;border-radius:999px;border:1px solid transparent;
  font:400 .76rem/1.2 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;text-align:center;transition:background-color .2s,color .2s,border-color .2s}
.btn-clay{background:var(--clay);color:var(--cream)} .btn-clay:hover{background:var(--clay-deep)}
.btn-clay::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--peach);flex:none}
.btn-line{border-color:rgba(245,237,222,.55);color:var(--on-dark)} .btn-line:hover{border-color:var(--on-dark);background:rgba(245,237,222,.06)}
.btn-line-ink{border-color:var(--ink);color:var(--ink)} .btn-line-ink:hover{background:var(--ink);color:var(--cream)}
.btns{display:flex;flex-wrap:wrap;gap:14px}
.textlink{display:inline-flex;gap:10px;align-items:center;font:400 var(--t-label)/1.5 var(--f-mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--clay);text-decoration:none}
.textlink:hover{text-decoration:underline} .on-dark .textlink{color:var(--peach)}

/* header: transparent over the dark hero, warm cream on scroll (site.js adds .is-solid; without JS it scrolls away with the page) */
.hdr{position:absolute;inset:0 0 auto;z-index:50;height:var(--hdr);color:var(--on-dark);transition:background-color .3s,color .3s,box-shadow .3s}
.js .hdr{position:fixed}
.hdr.is-solid{background:rgba(246,240,227,.94);color:var(--ink);box-shadow:0 1px 0 var(--hair)}
@supports (backdrop-filter:blur(8px)){.hdr.is-solid{background:rgba(246,240,227,.84);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px)}}
.hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.mark{display:inline-flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap;font:400 1.32rem/1 var(--f-display);letter-spacing:.04em}
.mark svg{width:26px;height:26px;flex:none} .mark svg path{fill:var(--peach)} .hdr.is-solid .mark svg path{fill:var(--clay)}
.nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px)}
.nav ul{display:flex;gap:clamp(14px,1.6vw,26px);list-style:none;margin:0;padding:0}
.nav a{font:400 .7rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:8px 0;border-bottom:1px solid transparent;white-space:nowrap}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:currentColor}
.nav .btn{min-height:42px;padding:11px 20px;font-size:.68rem}
.menu-btn{display:none;align-items:center;gap:10px;background:none;border:1px solid currentColor;border-radius:999px;color:inherit;min-height:42px;padding:0 18px;
  font:400 .7rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.menu-btn span{display:block;width:16px;height:1px;background:currentColor;box-shadow:0 5px 0 currentColor;transform:translateY(-2.5px)}
@media (max-width:1180px){ :root{--hdr:72px} .nav{display:none} .menu-btn{display:inline-flex} .mark{font-size:1.18rem} }

/* mobile menu (dialog) */
.menu{position:fixed;inset:0;z-index:60;background:var(--ink);color:var(--on-dark);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.menu[hidden]{display:none}
.menu-top{display:flex;align-items:center;justify-content:space-between;height:var(--hdr);flex:none}
.menu ul{list-style:none;margin:8px 0 0;padding:0}
.menu li{border-top:1px solid var(--hair-dark)} .menu li:last-child{border-bottom:1px solid var(--hair-dark)}
.menu ul a{display:flex;justify-content:space-between;align-items:baseline;padding:15px 0;font:400 clamp(1.55rem,1.2rem + 1.8vw,2.1rem)/1.1 var(--f-display);text-decoration:none}
.menu ul a::after{content:"→";font:400 .9rem/1 var(--f-mono);color:var(--peach)}
.menu ul a[aria-current=page]{color:var(--peach)}
.menu-foot{margin:auto 0 0;padding:32px 0 calc(28px + env(safe-area-inset-bottom))}
.menu-foot .btn{width:100%;margin-bottom:22px}
.menu-foot p{font-size:1rem;color:var(--on-dark-muted);margin:0 0 4px}
body.menu-open{overflow:hidden}

/* hero (home): dark, quietly vignetted, two columns, arch image right */
.hero{position:relative;background:var(--ink);color:var(--on-dark);overflow:hidden;
  background-image:radial-gradient(120% 90% at 28% 38%,#3A2B22 0%,rgba(30,23,19,0) 62%),radial-gradient(70% 80% at 82% 60%,#2C211B 0%,rgba(30,23,19,0) 70%)}
.hero-home{min-height:min(100svh,1000px);display:flex;align-items:center;padding:calc(var(--hdr) + 48px) 0 clamp(56px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(40px,6vw,104px);align-items:center}
.hero h1{font-size:var(--t-hero);line-height:1.02;letter-spacing:-.015em;margin-bottom:28px}
.hero h1 .l2{display:block;font-style:italic;color:var(--peach);font-size:.8em;line-height:1.08;margin-top:.12em}
.hero .lead{color:var(--on-dark-muted);max-width:34em;margin-bottom:36px}
.hero .addr{margin-top:40px;padding-top:22px;border-top:1px solid var(--hair-dark);color:var(--on-dark-muted)}
.arch{position:relative;aspect-ratio:4/5;border-radius:50% 50% 6px 6px/40% 40% 6px 6px;overflow:hidden;background:var(--sand)}
.arch img{width:100%;height:100%;object-fit:cover}
.hero .arch{max-width:500px;margin-left:auto;background:#3A2B22;box-shadow:0 0 0 1px rgba(245,237,222,.08)}

/* inner-page hero: dark, centred */
.hero-inner{padding:calc(var(--hdr) + clamp(56px,8vw,112px)) 0 clamp(64px,8vw,112px);text-align:center}
.hero-inner h1{font-size:clamp(2.4rem,1.6rem + 3.4vw,4.4rem);max-width:15em;margin:0 auto 24px}
.hero-inner .lead{margin:0 auto;max-width:36em}
.crumbs{font:400 var(--t-label)/1.5 var(--f-mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--on-dark-muted);margin:0 0 26px}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--hair-dark)} .crumbs a:hover{border-color:currentColor}
.crumbs span{margin:0 .7em;color:var(--peach)}

/* sections */
.sec{padding:var(--sec) 0}
.sec-tight{padding:clamp(64px,7vw,104px) 0}
.sec-paper{background:var(--paper)} .sec-sand{background:var(--sand)}
.on-dark{background:var(--ink);color:var(--on-dark)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(40px,5vw,72px)}
.sec-head h2{max-width:14em}
.statement{text-align:center;padding:clamp(104px,15vw,216px) 0 0}
.statement p{font:400 var(--t-statement)/1.18 var(--f-display);letter-spacing:-.01em;max-width:21em;margin:0 auto;text-wrap:balance}
.drop{width:1px;height:clamp(64px,8vw,112px);background:var(--hair);margin:clamp(48px,6vw,80px) auto 0}

/* product cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,56px);list-style:none;margin:0;padding:0}
.card{display:flex;flex-direction:column}
.card .arch{margin-bottom:30px}
.card h3{margin-bottom:14px}
.card p{color:var(--muted);font-size:var(--t-small);flex:1}
.card .rule{border-top:1px solid var(--hair);margin:26px 0 18px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card.text{border-top:1px solid var(--hair);padding-top:32px}
.card .num{display:block;font:400 clamp(2.6rem,2rem + 2vw,3.6rem)/1 var(--f-display);color:var(--clay);margin-bottom:22px}
.group.solo{grid-template-columns:minmax(0,1fr);max-width:46em}

/* hairline rows (philosophy / at a glance / customer care) */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.on-dark .rows{border-color:var(--hair-dark)}
.row{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);gap:clamp(20px,4vw,64px);padding:clamp(28px,3.4vw,44px) 0;border-bottom:1px solid var(--hair)}
.on-dark .row{border-color:var(--hair-dark)}
.row h3{font-size:clamp(1.35rem,1.15rem + .7vw,1.75rem)}
.row .n{display:block;font:400 var(--t-label)/1 var(--f-mono);letter-spacing:var(--track);color:var(--clay);margin-bottom:14px}
.on-dark .row .n{color:var(--peach)}
.on-dark .row p{color:var(--on-dark-muted)}
@media (min-width:601px){.row > p,.row > div{padding-top:24px}}
.philo h2{max-width:13em;margin-bottom:clamp(48px,6vw,88px)}

/* mood band */
.mood{display:grid;grid-template-columns:1.78fr 1.5fr;gap:clamp(12px,1.6vw,24px)}
.mood figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--sand)}
.mood img{width:100%;height:100%;object-fit:cover}
.ratio-16x9{aspect-ratio:16/9} .ratio-3x2{aspect-ratio:3/2} .ratio-4x5{aspect-ratio:4/5}
.band{border-radius:var(--radius);overflow:hidden;background:var(--sand);margin:0}
.band img{width:100%;height:100%;object-fit:cover}

/* visit: hairline definition list */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,104px);align-items:start}
.split-wide{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}
.dl{margin:0;border-top:1px solid var(--hair)}
.dl div{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:20px;padding:22px 0;border-bottom:1px solid var(--hair)}
.dl dt{font:400 var(--t-label)/1.9 var(--f-mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--muted)}
.dl dd{margin:0;font-size:var(--t-body)}
.dl dd span{display:block}
.dl a{text-decoration-color:var(--hair)} .dl a:hover{text-decoration-color:currentColor}
.on-dark .dl,.on-dark .dl div{border-color:var(--hair-dark)} .on-dark .dl dt{color:var(--on-dark-muted)}
.paper{background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius);padding:clamp(28px,4vw,56px)}

/* final CTA + footer */
.cta{text-align:center;padding:clamp(96px,12vw,176px) 0 clamp(80px,10vw,136px)}
.cta h2{max-width:13em;margin:0 auto 24px}
.cta p{color:var(--on-dark-muted);max-width:32em;margin:0 auto 36px}
.cta .alt{margin-top:28px;font-size:1rem}
.ftr{background:var(--ink);color:var(--on-dark);padding:clamp(56px,6vw,88px) 0 40px;border-top:1px solid var(--hair-dark)}
.ftr-grid{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:clamp(32px,5vw,80px)}
.ftr .mark{font-size:1.5rem;margin-bottom:14px}
.ftr h2{font:400 var(--t-label)/1.5 var(--f-mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--peach);margin-bottom:18px}
.ftr ul{list-style:none;margin:0;padding:0;columns:2;column-gap:28px}
.ftr li{margin-bottom:10px;break-inside:avoid}
.ftr a{text-decoration:none;color:var(--on-dark-muted)} .ftr a:hover{color:var(--on-dark);text-decoration:underline}
.ftr p,.ftr address{font-size:1rem;color:var(--on-dark-muted)}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:clamp(48px,5vw,72px);padding-top:24px;border-top:1px solid var(--hair-dark);
  font:400 .66rem/1.6 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-muted)}

/* products page */
.anchors{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:40px;list-style:none;padding:0}
.anchors a{font:400 var(--t-label)/1.5 var(--f-mono);letter-spacing:var(--track);text-transform:uppercase;text-decoration:none;color:var(--on-dark);border-bottom:1px solid var(--hair-dark);padding-bottom:4px}
.anchors a:hover{border-color:var(--peach)}
.group{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(40px,6vw,104px);align-items:start}
.group + .group{margin-top:clamp(88px,10vw,152px)}
.group .media{position:sticky;top:calc(var(--hdr) + 32px)}
.group.flip{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)} .group.flip .media{order:2}
.group h2{margin-bottom:22px}
.facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:16px;color:var(--muted)}
.facts span b{font-weight:400;color:var(--clay);margin-right:8px}

/* FAQ accordion */
.faq{border-top:1px solid var(--hair);max-width:880px;margin:0 auto}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3em minmax(0,1fr) 28px;align-items:baseline;gap:12px;padding:28px 0;
  font:400 clamp(1.3rem,1.12rem + .7vw,1.7rem)/1.25 var(--f-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .n{font:400 var(--t-label)/1 var(--f-mono);letter-spacing:var(--track);color:var(--clay)}
.faq summary::after{content:"";width:14px;height:14px;justify-self:end;align-self:center;
  background:linear-gradient(var(--clay),var(--clay)) center/14px 1px no-repeat,linear-gradient(var(--clay),var(--clay)) center/1px 14px no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 40px 30px calc(3em + 12px);color:var(--muted)}

/* legal prose, disclosure, accessibility helpers */
a[href^="tel:"]{white-space:nowrap}   /* never break a phone number across lines */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.prose{max-width:46em;margin:0 auto}
.prose > .lead{margin-bottom:48px}
.prose section{padding:32px 0;border-top:1px solid var(--hair)}
.prose h2{font-size:clamp(1.5rem,1.25rem + 1vw,2rem);margin-bottom:16px}
.prose ul{margin:0 0 1em;padding-left:1.25em}
.prose li{margin-bottom:.45em;padding-left:.2em}
.prose li::marker{color:var(--clay)}
.disclosure{margin:clamp(40px,4vw,56px) 0 0;max-width:62em;font-size:1rem;line-height:1.6;color:var(--on-dark-muted)}
.ftr-base nav{margin:0}
.legal{display:flex;flex-wrap:wrap;gap:4px 24px;list-style:none;margin:0;padding:0}
.legal a{display:inline-flex;align-items:center;min-height:24px;font:400 1rem/1.4 var(--f-body);letter-spacing:0;text-transform:none;color:var(--on-dark-muted);text-decoration:underline;text-decoration-color:var(--hair-dark)}
.legal a:hover{color:var(--on-dark);text-decoration:underline}
.textlink,.anchors a{min-height:24px}
.crumbs a{display:inline-block;padding:4px 0}
.anchors a{display:inline-flex;align-items:center}
.ftr li > a,.dl dd > a,.ftr address a,.nav a{display:inline-flex;align-items:center;min-height:24px}

/* misc */
.center{text-align:center}
.stack > * + *{margin-top:24px}
.note{font-size:1rem;color:var(--muted)}
.links{display:flex;flex-wrap:wrap;gap:12px 28px;list-style:none;margin:28px 0 0;padding:0}
.list-plain{list-style:none;margin:0;padding:0}

/* responsive */
@media (max-width:960px){
  .hero-grid,.split,.split-wide,.group{grid-template-columns:minmax(0,1fr)}
  .hero .arch{max-width:420px;margin:8px auto 0;width:84%}
  .group,.group.flip{grid-template-columns:minmax(0,1fr)} .group .media{position:static;max-width:440px} .group.flip .media{order:0}
  .cards{grid-template-columns:minmax(0,1fr);gap:64px;max-width:520px;margin:0 auto}
  .mood{grid-template-columns:minmax(0,1fr)}
  .split > .arch{max-width:420px;width:100%;margin:0 auto}
  .ftr-grid{grid-template-columns:minmax(0,1fr)}
  .sec-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  :root{--t-label:.7rem}
  .hero-home{min-height:0;padding-top:calc(var(--hdr) + 36px)}
  .hero .btns{flex-direction:column} .hero .btns .btn,.cta .btn,.stack-btn .btn{width:100%}
  .row{grid-template-columns:minmax(0,1fr);gap:12px}
  .dl div{grid-template-columns:minmax(0,1fr);gap:6px;padding:18px 0}
  .faq summary{grid-template-columns:2.2em minmax(0,1fr) 20px;padding:22px 0}
  .faq .a{padding:0 0 24px calc(2.2em + 12px)}
  .ftr ul{columns:1}
  .anchors{flex-direction:column;align-items:center;gap:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}