/* Green Leaf Wellness — mobile-first styles (designed at 390px, scaled up). */ /* Type: DM Serif Display (headings, + italic for accents) and Jost (body). Self-hosted OFL WOFF2, latin subset; licences in assets/fonts/OFL-*.txt. */ @font-face{font-family:"DM Serif Display";src:url(../fonts/dm-serif-display-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"DM Serif Display";src:url(../fonts/dm-serif-display-italic-latin.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"Jost";src:url(../fonts/jost-latin-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap} :root{ --forest:#2D3E2C; --forest-2:#24331f; --sage:#5E8983; --sage-dark:#456a65; --leaf:#99AB8B; --leaf-soft:#e7ede3; --ink:#231F20; --muted:#4f5752; --line:#ddd4c3; --tint:#f5f0e6; --white:#fff; --ok:#3aa45c; --closed:#d0603f; --charcoal:#1d201e; --charcoal-2:#151816; --amber:#F0A24E; --amber-2:#e08a2e; --amber-soft:#fbecd8; --radius:4px; --radius-sm:3px; --shadow:0 6px 24px rgba(35,31,32,.08); --wrap:1180px; --gutter:20px; --bar-h:76px; --font-head:"DM Serif Display",Georgia,"Times New Roman",serif; --font-body:"Jost",system-ui,sans-serif; /* -apple-system/Segoe UI/Roboto dropped: system-ui already maps to them; each missing family cost a font lookup per font size on first layout */ } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px} body{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--ink);background:var(--white);overflow-x:hidden;padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))} img,svg,iframe{max-width:100%;display:block} img{height:auto} a{color:var(--forest);text-underline-offset:3px;text-decoration-thickness:1px} a:hover{color:var(--sage-dark)} :focus-visible{outline:3px solid var(--sage);outline-offset:2px;border-radius:4px} h1,h2,h3{font-family:var(--font-head);font-weight:400;line-height:1.15;color:var(--forest);margin:0 0 .5em;letter-spacing:-.005em} h1{font-size:clamp(2rem,7.5vw,3.4rem)} h2{font-size:clamp(1.6rem,5.6vw,2.3rem)} h3{font-size:1.3rem} p{margin:0 0 1em} ul{padding-left:1.2em} address{font-style:normal} .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip-link{position:absolute;left:8px;top:-60px;z-index:200;background:var(--forest);color:#fff;padding:12px 16px;border-radius:8px} .skip-link:focus{top:8px} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)} .small{font-size:.9rem;color:var(--muted)} .lead{font-size:1.12rem;color:var(--muted)} .eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-dark);margin:0 0 .6em} .eyebrow--light{color:var(--amber)} main{display:block} main:focus{outline:none} /* Buttons — every button is ≥48px tall */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:12px 22px;border-radius:999px;border:2px solid transparent;font:700 1rem/1.2 var(--font-body);text-decoration:none;text-align:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s} .btn--lg{min-height:54px;font-size:1.05rem;padding:14px 26px} .btn--block{width:100%} .btn--primary{background:var(--forest);color:#fff} .btn--primary:hover{background:var(--forest-2);color:#fff} .btn--outline{background:transparent;color:var(--forest);border-color:var(--forest)} .btn--outline:hover{background:var(--forest);color:#fff} .btn--light{background:#fff;color:var(--forest)} .btn--light:hover{background:var(--leaf-soft);color:var(--forest)} .btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)} .btn--ghost-light:hover{background:rgba(255,255,255,.12);color:#fff} .btn--amber{background:var(--amber);color:var(--charcoal)} .btn--amber:hover{background:#f6b46c;color:var(--charcoal)} .btn-row{display:flex;flex-direction:column;gap:12px;margin:1.25em 0 0} .btn-row .btn{width:100%} .link-arrow{display:inline-flex;align-items:center;min-height:44px;font-weight:700} .link-arrow::after{content:"→";margin-left:.4em} /* Status pill */ .status{display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:.92rem;white-space:nowrap} .status__dot{width:10px;height:10px;border-radius:50%;background:var(--closed);box-shadow:0 0 0 3px rgba(181,72,47,.2);flex:none} .status.is-open .status__dot{background:var(--ok);box-shadow:0 0 0 3px rgba(47,143,78,.22)} .status__detail{font-weight:500} .status--hero{background:rgba(255,255,255,.95);color:var(--ink);padding:8px 14px;border-radius:999px} /* Top bar + header */ .topbar{background:var(--charcoal-2);color:#e8e4dc;font-size:.9rem} .topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px} .topbar .status__dot{box-shadow:none} .topbar__meta{display:flex;gap:16px;align-items:center} .topbar__age{display:none;opacity:.9} .topbar__phone{display:none;align-items:center;min-height:44px;color:var(--amber);font-weight:700;text-decoration:none} @media (max-width:799.98px){.topbar{display:none}} /* phones: the sticky bottom bar + hero pill already show the open status */ .header{position:sticky;top:0;z-index:50;background:var(--charcoal);border-bottom:1px solid rgba(255,255,255,.08)} .header__inner{display:flex;align-items:center;justify-content:space-between;min-height:66px;gap:12px} .brand{display:flex;align-items:center;min-height:48px} .brand img{width:auto;height:62.4px} /* leaf-on-the-l lockup, Option C (logo-leaf-on-l-white-c.svg, 2.12:1): fits the 66px bar, header height unchanged */ .menu-toggle{display:inline-flex;align-items:center;gap:10px;min-height:48px;min-width:48px;padding:0 14px;background:none;border:1.5px solid rgba(255,255,255,.28);border-radius:12px;font:700 .95rem var(--font-body);color:#fff;cursor:pointer} .menu-toggle__bars,.menu-toggle__bars::before,.menu-toggle__bars::after{display:block;width:20px;height:2px;background:#fff;border-radius:2px;position:relative;transition:transform .2s} .menu-toggle__bars::before,.menu-toggle__bars::after{content:"";position:absolute;left:0} .menu-toggle__bars::before{top:-6px}.menu-toggle__bars::after{top:6px} .menu-toggle[aria-expanded="true"] .menu-toggle__bars{background:transparent} .menu-toggle[aria-expanded="true"] .menu-toggle__bars::before{transform:translateY(6px) rotate(45deg)} .menu-toggle[aria-expanded="true"] .menu-toggle__bars::after{transform:translateY(-6px) rotate(-45deg)} .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--charcoal);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 18px 30px rgba(0,0,0,.35);padding:8px var(--gutter) 20px;max-height:calc(100vh - 110px);overflow:auto} .nav.is-open{display:block} .no-js .nav{display:block;position:static;box-shadow:none} .nav__list{list-style:none;margin:0;padding:0} .nav__list a{display:flex;align-items:center;min-height:52px;padding:0 4px;border-bottom:1px solid rgba(255,255,255,.1);font-weight:600;font-size:1.08rem;text-decoration:none;color:#f1eee8} .nav__list a:hover{color:var(--amber)} .nav__list a[aria-current="page"],.nav__list .current-menu-item>a{color:var(--amber)} .nav__cta{width:100%;margin-top:16px} /* Sections */ .section{padding:48px 0} .section--tint{background:var(--tint)} .section--forest{background:var(--forest);color:#eef3ea} .section--dark{background:var(--charcoal);color:#e8e4dc} .section--dark h2,.section--dark h3{color:#fff} .section--forest h2{color:#fff} .section--deal{padding:0;margin-top:-28px;position:relative;z-index:2} .section--page{padding-top:32px} .split{display:grid;gap:28px;align-items:center} .media{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--leaf-soft);aspect-ratio:4/3} .media img{width:100%;height:100%;object-fit:cover} .art-panel{margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;align-self:center} .mj-sparkle{position:relative;width:min(86%,400px);margin-inline:auto} .art-panel .mj-sparkle img{width:100%;height:auto;border-radius:0} .art-panel figcaption{font-family:var(--font-body);font-size:1rem;color:var(--muted)} .prose .art-panel{margin:2em auto} .art-panel--sm{max-width:520px;margin-inline:auto} .art-panel--sm .mj-sparkle{width:min(100%,320px)} /* Kief sparkle: 10 CSS-only glints over the hair; only opacity/transform animate (compositor-only, no layout/paint per frame) */ .mj-sparkle__tw{position:absolute;inset:0;pointer-events:none} .mj-sparkle__tw i{--tw:calc(5.2% * var(--tws,1));position:absolute;width:var(--tw);aspect-ratio:1;margin:calc(var(--tw) / -2) 0 0 calc(var(--tw) / -2);opacity:0;transform:scale(.3);background:radial-gradient(circle,#fff 0 7%,rgba(255,244,214,.7) 15%,rgba(255,236,190,.25) 30%,rgba(255,236,190,0) 50%);animation:mj-tw 2.6s ease-in-out infinite both} .mj-sparkle__tw i::before{content:"";position:absolute;inset:0;background:#fffaf0;clip-path:polygon(50% 0,54% 46%,100% 50%,54% 54%,50% 100%,46% 54%,0 50%,46% 46%)} .mj-sparkle__tw i:nth-child(2n){--tw:calc(3.8% * var(--tws,1))} .mj-sparkle__tw i:nth-child(3n)::before{background:#ffeccb} .mj-sparkle__tw i:nth-child(1){animation-duration:2.9s;animation-delay:-.4s} .mj-sparkle__tw i:nth-child(2){animation-duration:1.9s;animation-delay:-1.3s} .mj-sparkle__tw i:nth-child(3){animation-duration:3.4s;animation-delay:-2.2s} .mj-sparkle__tw i:nth-child(4){animation-duration:2.3s;animation-delay:-.9s} .mj-sparkle__tw i:nth-child(5){animation-duration:3.1s;animation-delay:-1.8s} .mj-sparkle__tw i:nth-child(6){animation-duration:1.7s;animation-delay:-.2s} .mj-sparkle__tw i:nth-child(7){animation-duration:2.7s;animation-delay:-2.5s} .mj-sparkle__tw i:nth-child(8){animation-duration:2.1s;animation-delay:-1.1s} .mj-sparkle__tw i:nth-child(9){animation-duration:3.3s;animation-delay:-.7s} .mj-sparkle__tw i:nth-child(10){animation-duration:2.4s;animation-delay:-1.6s} .mj-mini{padding:clamp(8px,2vw,16px) 0 clamp(32px,5vw,56px)} .mj-mini__inner{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,28px)} .mj-mini .mj-sparkle{--tws:1.35;flex:0 0 auto;width:clamp(160px,44vw,220px);margin:0} .mj-mini .mj-sparkle img{width:100%;height:auto} .mj-mini__text{margin:0;max-width:30ch;display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:.95rem;line-height:1.45} .mj-mini__text strong{font-family:var(--font-head);font-size:1.15rem;color:var(--ink)} @keyframes mj-tw{0%,58%,100%{opacity:0;transform:scale(.3) rotate(0deg)}78%{opacity:1;transform:scale(1) rotate(35deg)}} @media (prefers-reduced-motion:reduce){.mj-sparkle__tw{display:none}} html:not(.age-ok) .mj-sparkle{visibility:hidden} /* belt and braces: never painted (or animated) behind the 21+ gate */ .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)} .card__title,.nap__title{font-size:1.5rem} /* Hero */ .hero{position:relative;color:#fff;background:var(--forest);overflow:hidden;isolation:isolate} .hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .hero{background:var(--charcoal)} .hero__pic{position:absolute;inset:0;z-index:-2} .hero__pic img{width:100%;height:100%;object-fit:cover} /* Hero scrim: dark only where the text sits, so the (brightened) building reads. Phones: text fills the lower 3/4 -> vertical ramp. Wider: text is a left column -> horizontal ramp anchored to the centred .wrap, plus a light bottom fade. Checked for WCAG AA (tools/hero-check.js). */ .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(21,24,22,.08) 0%,rgba(21,24,22,.24) 14%,rgba(21,24,22,.50) 23%,rgba(21,24,22,.68) 33%,rgba(21,24,22,.72) 60%,rgba(21,24,22,.84) 100%)} @media (min-width:800px){.hero::after{background:linear-gradient(180deg,rgba(21,24,22,0) 55%,rgba(21,24,22,.32) 100%),linear-gradient(90deg,rgba(21,24,22,.80) 0,rgba(21,24,22,.72) max(calc(50% - 20px),600px),rgba(21,24,22,.28) max(calc(50% + 150px),770px),rgba(21,24,22,.05) max(calc(50% + 330px),950px),rgba(21,24,22,0) 100%)}} .hero__tagline{font-family:var(--font-head);font-size:clamp(2.3rem,10.5vw,4.6rem);line-height:1.05;color:#fff;margin:0 0 .25em;max-width:12ch;text-shadow:0 2px 24px rgba(0,0,0,.35)} .hero__tagline em{font-style:normal;color:var(--amber)} .hero__inner{padding-top:clamp(120px,24vh,220px);padding-bottom:64px} .hero__title{color:#fff;font-family:var(--font-body);font-weight:700;font-size:clamp(1.25rem,5.2vw,1.7rem);line-height:1.25;letter-spacing:0;max-width:24ch;margin-bottom:.4em} .hero__sub{font-family:var(--font-body);font-size:1rem;font-weight:500;line-height:1.45;color:#e9f0e5;max-width:36ch;margin-bottom:.9em} .hero__where{margin:0 0 .6em;font-size:.98rem;color:#e9f0e5} /* Page hero */ .page-hero{background:var(--charcoal);color:#e8e4dc;padding:40px 0 34px;background-image:radial-gradient(120% 140% at 100% 0%,rgba(240,162,78,.18) 0%,rgba(240,162,78,0) 55%)} .page-hero h1{color:#fff} .page-hero .lead{color:#d9d4ca} .page-hero .eyebrow{color:var(--amber)} .page-hero .status{color:#fff} .page-hero h1{margin-bottom:.3em} .page-hero .lead{margin:0;max-width:60ch} .page-hero--compact{padding:24px 0 18px} .page-hero--compact h1{font-size:clamp(1.8rem,6.5vw,2.6rem)} /* Deal */ .deal{background:var(--charcoal);border:1px solid rgba(240,162,78,.35);color:#fff;border-radius:var(--radius);padding:22px;box-shadow:0 10px 30px rgba(35,31,32,.18)} .deal__eyebrow{font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0 0 .3em;color:var(--amber)} .deal__title{color:#fff;font-size:clamp(1.7rem,7vw,2.4rem);margin:0 0 .3em} .deal__fine{font-size:.88rem;color:#cfcac0;margin:0} .menu-deal{background:var(--amber-soft);border-radius:var(--radius-sm);padding:12px 16px;font-size:.98rem} .menu-deal a{display:inline-flex;min-height:44px;align-items:center} /* Facts / ticks */ .facts{list-style:none;padding:0;margin:1em 0} .facts li{position:relative;padding:6px 0 6px 28px} .facts li::before{content:"";position:absolute;left:4px;top:.85em;width:12px;height:12px;border-radius:50%;background:var(--leaf)} .facts--grid{display:grid;gap:10px} .facts--grid li{background:var(--tint);border-radius:var(--radius-sm);padding:12px 14px 12px 36px} .facts--grid li::before{left:14px;top:1.15em} .ticks{padding:0;list-style:none;margin:0 0 1em} .ticks li{position:relative;padding:6px 0 6px 30px} .ticks li::before{content:"✓";position:absolute;left:4px;top:5px;color:var(--sage-dark);font-weight:800} .section--forest .ticks li::before{color:var(--leaf)} /* Categories */ .cats{list-style:none;padding:0;margin:1.2em 0;display:grid;grid-template-columns:1fr 1fr;gap:10px} .cat{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);font-weight:700;color:var(--forest);text-decoration:none;box-shadow:0 2px 8px rgba(35,31,32,.04)} .cat:hover{border-color:var(--sage);color:var(--forest)} .cat__arrow{color:var(--sage)} .more{margin:12px 0;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff} .more>summary{min-height:52px;display:flex;align-items:center;padding:0 16px;font-weight:700;cursor:pointer;color:var(--forest);list-style:none} .more>summary::-webkit-details-marker{display:none} .more>summary::after{content:"+";margin-left:auto;font-size:1.4rem;color:var(--sage)} .more[open]>summary::after{content:"–"} .more>*:not(summary){padding:0 16px 12px} .strains{display:grid;gap:8px} .strain__title{font-size:1.15rem;margin:.6em 0 .3em} .chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px} .chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;background:var(--leaf-soft);color:var(--forest);font-weight:600;text-decoration:none;font-size:.95rem} .chip:hover{background:var(--leaf);color:var(--ink)} .chips--scroll{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:thin;margin:0 calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter)} .chips--scroll li{flex:none} /* Reviews */ .reviews__score{display:flex;flex-wrap:wrap;align-items:center;gap:.4em;font-size:1rem;margin-bottom:.6em} .stars{color:#c9a227;letter-spacing:2px;font-size:1.15rem} /* CTA band */ .cta-band{background:var(--forest);color:#eef3ea;border-radius:var(--radius);padding:26px 22px;display:grid;gap:12px} .cta-band .btn{width:100%} /* FAQ */ .faq h2{margin-bottom:.7em} .faq__item{border-top:1px solid var(--line)} .faq__item:last-child{border-bottom:1px solid var(--line)} .faq__item>summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 0;font-weight:700;cursor:pointer;list-style:none;color:var(--forest);font-size:1.05rem} .faq__item>summary::-webkit-details-marker{display:none} .faq__item>summary::after{content:"+";margin-left:auto;font-size:1.5rem;color:var(--sage);flex:none} .faq__item[open]>summary::after{content:"–"} .faq__a{padding:0 0 14px;color:var(--muted)} .faq--inline{margin:0 0 1.5em} /* Prose (editable page content) */ .prose{max-width:760px} .prose--flush{max-width:none} .prose h2{margin-top:1.6em} .prose h3{margin-top:1.3em} .prose>*:first-child{margin-top:0} .prose li{margin:.25em 0} .prose a:not(.btn){font-weight:600} .prose .card,.prose .deal,.prose .reviews{margin:1.5em 0} .prose .job{border:1px solid var(--line);border-radius:var(--radius);padding:4px 18px;margin:1em 0;background:#fff} .prose .job>summary{min-height:56px;display:flex;align-items:center;font-family:var(--font-head);font-size:1.3rem;color:var(--forest);cursor:pointer} .prose .callout{background:var(--leaf-soft);border-radius:var(--radius);padding:18px 20px;margin:1.5em 0} .prose .callout>*:last-child{margin-bottom:0} .prose table{border-collapse:collapse;width:100%} /* Hours */ .hours{width:100%;border-collapse:collapse;margin:.4em 0 1em} .hours th,.hours td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;font-weight:500} .hours td{text-align:right} .hours tr.is-today{background:var(--amber-soft);font-weight:700} .hours tr.is-today th{font-weight:700} .hours__special{font-size:.95rem} /* Deals list */ .deals{list-style:none;padding:0;margin:1em 0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .deals__row{display:grid;grid-template-columns:8.2em 1fr;gap:10px;align-items:center;padding:14px 16px;border-top:1px solid var(--line);background:#fff} .deals__row:first-child{border-top:0} .deals__day{font-weight:700;display:flex;flex-direction:column} .deals__today{display:none;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--charcoal);background:var(--amber);border-radius:999px;padding:2px 8px;width:max-content;margin-top:3px} .deals__row.is-today{background:var(--amber-soft)} .deals__row.is-today .deals__today{display:inline-block} .deals__text{font-size:1.05rem} /* NAP */ .nap__address{margin:.8em 0} .nap .facts{font-size:.98rem} /* Map */ .map{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--tint)} .map iframe{width:100%;height:100%;border:0} /* Towns */ .towns{list-style:none;padding:0;margin:1em 0;display:grid;gap:10px} .town{display:flex;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden} .town__name{flex:1;display:flex;align-items:center;min-height:56px;padding:0 16px;font-weight:700;text-decoration:none;color:var(--forest)} .town__dir{display:flex;align-items:center;min-height:56px;padding:0 16px;background:var(--leaf-soft);font-weight:600;text-decoration:none;color:var(--forest);font-size:.95rem} /* Contact */ .methods{list-style:none;padding:0;margin:1em 0;display:grid;gap:10px} .method{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);text-decoration:none;color:var(--ink);background:#fff} .method .icon{color:var(--sage-dark);flex:none} .method span{display:flex;flex-direction:column;line-height:1.3;word-break:break-word} .method strong{color:var(--forest)} .form{display:grid;gap:4px} .field{margin:0 0 12px;display:flex;flex-direction:column;gap:6px} .field label{font-weight:700} .req,.opt{font-weight:400;color:var(--muted);font-size:.9rem} input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;min-height:50px;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid #b9c4b5;border-radius:var(--radius-sm)} textarea{min-height:140px;resize:vertical} input:focus,select:focus,textarea:focus{border-color:var(--sage-dark);outline:3px solid rgba(94,137,131,.25)} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .notice{padding:14px 16px;border-radius:var(--radius-sm);font-weight:600} .notice--ok{background:#e4f3e7;color:#1f5e33} .notice--err{background:#fbe7e2;color:#8a2f1c} /* Dutchie */ .section--menu{padding-top:16px} .dutchie{min-height:70vh;margin-top:12px} .dutchie__loading{padding:28px 0;text-align:center;color:var(--muted)} .dutchie iframe{width:100%!important;border:0} .pickup-rules{margin-top:20px} /* Footer */ .footer{background:var(--charcoal-2);color:#d9dfd6;padding:44px 0 20px;font-size:.98rem} .footer a{color:#fff;text-decoration:none} .footer a:hover{text-decoration:underline} .footer__grid{display:grid;gap:30px} .footer__brand img{width:200px;height:auto;margin-bottom:14px} .footer__h{font-family:var(--font-head);color:#fff;font-size:1.3rem;margin:0 0 .5em} .footer__links{list-style:none;padding:0;margin:0} .footer__links a{display:flex;align-items:center;min-height:44px} .footer__links--towns{display:grid;grid-template-columns:1fr 1fr;column-gap:12px} .footer__landmark{color:#b9c4b5} .footer .status{font-size:.95rem} .social{list-style:none;padding:0;margin:0;display:flex;gap:10px} .social a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border:1px solid rgba(255,255,255,.25);border-radius:999px} .footer__legal{border-top:1px solid rgba(255,255,255,.15);margin-top:30px;padding-top:18px;font-size:.88rem;color:#b5bdb2} .footer__legal a{display:inline-flex;min-height:44px;align-items:center;text-decoration:underline} /* Sticky mobile action bar */ .actionbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(21,24,22,.97);border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -6px 20px rgba(0,0,0,.25)} .actionbar__btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:12px;border:1.5px solid rgba(255,255,255,.35);color:#fff;font-weight:700;font-size:.95rem;text-decoration:none;padding:0 6px} .actionbar__btn .icon{width:20px;height:20px} .actionbar__btn--primary{background:var(--amber);border-color:var(--amber);color:var(--charcoal)} .actionbar__btn--primary:hover{color:var(--charcoal)} .actionbar__btn:hover{color:var(--amber)} /* Age gate: opaque, covers everything until confirmed */ .age-gate{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px 20px calc(24px + env(safe-area-inset-bottom));background:var(--charcoal);background-image:radial-gradient(90% 60% at 50% 0%,rgba(240,162,78,.22) 0%,rgba(240,162,78,0) 70%),linear-gradient(180deg,var(--charcoal) 0%,#1f2a1f 100%);overflow-y:auto} html.age-ok .age-gate{display:none} html:not(.age-ok) body{overflow:hidden} html:not(.age-ok) .actionbar{display:none} .age-gate__box{width:100%;max-width:440px;text-align:center;color:#fff} .age-gate__logo{width:200px;height:auto;margin:0 auto 22px} .age-gate__title{font-family:var(--font-head);font-size:clamp(2rem,9vw,2.6rem);line-height:1.15;margin:0 0 .4em;color:#fff} .age-gate__desc{font-size:1.05rem;color:#e3ebe0} .age-gate__actions{display:grid;gap:12px;margin:22px 0 12px} .age-gate__actions .btn{width:100%} .age-gate__note{min-height:1.5em;font-weight:700;color:#ffd8cc} .age-gate__fine{font-size:.85rem;color:#c9d6c4;margin:0} /* ---------- ≥600px ---------- */ @media (min-width:600px){ :root{--gutter:28px} .btn-row{flex-direction:row;flex-wrap:wrap} .btn-row .btn{width:auto} .cats{grid-template-columns:repeat(3,1fr)} .facts--grid{grid-template-columns:1fr 1fr} .topbar__age{display:inline} .towns{grid-template-columns:1fr 1fr} .methods{grid-template-columns:repeat(3,1fr)} .cta-band{grid-template-columns:1fr auto;align-items:center;padding:34px} .cta-band .btn{width:auto} .footer__grid{grid-template-columns:1fr 1fr} .strains{grid-template-columns:repeat(3,1fr);gap:18px} } /* ---------- ≥960px (desktop) ---------- */ @media (min-width:960px){ body{font-size:18px;padding-bottom:0} .topbar__phone{display:inline-flex!important} .actionbar{display:none} .topbar__phone{display:inline} .section{padding:80px 0} .section--deal{padding:0;margin-top:-48px} .split{grid-template-columns:1fr 1fr;gap:56px} .split--reverse>:first-child{order:2} .menu-toggle{display:none} .brand img{height:77.5px} .header__inner{min-height:84px} .nav{display:flex!important;position:static;align-items:center;gap:6px;padding:0;box-shadow:none;border:0;max-height:none;overflow:visible;background:none} .nav__list{display:flex;gap:2px} .nav__list a{border:0;min-height:48px;padding:0 11px;font-size:1rem;border-radius:8px} .nav__list a:hover{background:rgba(255,255,255,.07);color:#fff} .nav__cta{width:auto;margin:0 0 0 10px} .hero__inner{padding-top:110px;padding-bottom:140px} .hero__sub{font-size:1.25rem} .deal{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:30px;padding:30px 36px} .deal .btn-row{grid-column:2;grid-row:1/span 3;margin:0;flex-direction:column} .page-hero{padding:64px 0 48px} .cats{grid-template-columns:repeat(4,1fr)} .footer__grid{grid-template-columns:1.3fr 1fr 1fr 1fr} .towns{grid-template-columns:repeat(4,1fr)} .map{aspect-ratio:16/7} .dutchie{min-height:900px} } @media (min-width:1100px){.nav__list a{padding:0 14px}} @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}} /* Photo cards, brand strip, tagline */ .photo-card{display:grid;border-radius:var(--radius);overflow:hidden;background:var(--charcoal);color:#e8e4dc;text-decoration:none;margin:14px 0} .photo-card img{width:100%;aspect-ratio:4/3;object-fit:cover} .photo-card__body{padding:18px 20px} .photo-card__body h3{color:#fff;margin:0 0 .2em} .photo-card__body p{margin:0;color:#cfcac0} .photo-card__cta{display:inline-flex;align-items:center;min-height:44px;color:var(--amber);font-weight:700} a.photo-card:hover{color:#e8e4dc} .strip{margin:0;border-radius:var(--radius);overflow:hidden;position:relative} .strip img{width:100%;aspect-ratio:16/9;object-fit:cover} .strip figcaption{padding:10px 2px;font-size:.92rem;color:var(--muted)} .tagline{font-family:var(--font-head);color:var(--amber);font-size:1.25rem;margin:0 0 .4em} .cta-band h2{color:#fff} .cta-band .eyebrow{color:var(--amber)} .section--forest .btn--primary,.section--dark .btn--primary,.cta-band .btn--primary{background:var(--amber);color:var(--charcoal)} .figure-grid{display:grid;gap:14px;margin:1.5em 0} .figure-grid figure{margin:0;border-radius:var(--radius);overflow:hidden} .figure-grid img{width:100%;aspect-ratio:4/3;object-fit:cover} .prose figure{margin:1.5em 0} .prose figure img{border-radius:var(--radius);width:100%} .prose figcaption{font-size:.92rem;color:var(--muted);padding-top:8px} @media (min-width:600px){.figure-grid{grid-template-columns:1fr 1fr}.photo-card{grid-template-columns:1.1fr 1fr;align-items:center}} @media (min-width:960px){.hero__inner{padding-top:180px;padding-bottom:150px}.photo-card__body{padding:28px 32px}} .footer__col .footer__links:not(.footer__links--towns):not(.footer__links--stack){display:grid;grid-template-columns:1fr 1fr;column-gap:12px} @media (max-width:599px){.cats li:last-child:nth-child(odd){grid-column:1/-1}} @media (min-width:960px){.strip img{aspect-ratio:21/8}} /* ---------- Store location section (template-parts/store-location.php) — mobile-first ---------- */ .loc__grid{display:grid;gap:28px} .loc__title{font-size:clamp(1.9rem,7.4vw,2.9rem);margin-bottom:.35em} .loc__lead{max-width:56ch} .loc__sub{font-family:var(--font-body);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-dark);margin:1.4em 0 .7em} .loc__chips{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px} .loc__chips li{display:flex} .loc-chip{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:64px;padding:10px 14px;border-radius:var(--radius-sm);background:var(--tint);border:1px solid var(--line);color:var(--forest);text-decoration:none;line-height:1.25} .loc-chip__town{font-weight:700;font-size:1rem} .loc-chip__mi{font-size:.92rem;font-weight:600;color:var(--sage-dark);font-variant-numeric:tabular-nums} .loc-chip--link .loc-chip__town::after{content:"→";margin-left:.35em;color:var(--sage);font-weight:600} a.loc-chip:hover{border-color:var(--sage);color:var(--forest)} .loc__note{font-size:.85rem;color:var(--muted);margin:.8em 0 0} .loc__more{margin-top:10px} .loc__more-btn{display:flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 16px;border-radius:var(--radius-sm);border:1.5px dashed var(--leaf);font-weight:700;color:var(--forest);cursor:pointer;list-style:none} .loc__more-btn::-webkit-details-marker{display:none} .loc__more-btn::after{content:"+";font-size:1.3rem;line-height:1;color:var(--sage)} .loc__more[open]>.loc__more-btn::after{content:"–"} .loc__more-open,.loc__more[open] .loc__more-closed{display:none} .loc__more[open] .loc__more-open{display:inline} .loc__chips--more{margin-top:10px} .loc--dark .loc__more-btn{color:#fff;border-color:rgba(153,171,139,.55)} .loc--dark .loc__more-btn::after{color:var(--amber)} /* ≥600px: all towns visible, toggle hidden. Guarded so browsers without ::details-content keep a working toggle. */ @supports selector(::details-content){@media (min-width:600px){ .loc__more{margin-top:0} .loc__more>.loc__more-btn{display:none} .loc__more::details-content{content-visibility:visible;display:contents} }} .loc-card{padding:20px;color:var(--ink)} span.town__name{font-weight:600;color:var(--ink)} /* Visit Us #nearby: served towns without a town page */ .loc-card__title{font-size:1.45rem;margin-bottom:.3em} .loc-info{margin:0} .loc-info__row{display:grid;grid-template-columns:5.6em 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line)} .loc-info__row:first-child{border-top:0;padding-top:4px} .loc-info dt{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-dark);padding-top:.25em} .loc-info dd{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;overflow-wrap:anywhere} .loc-info dd>a,.loc-info__link{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;font-weight:700;color:var(--forest)} .loc-info__link{margin:0 0 -8px} .loc-info__link::after{content:"→";margin-left:.35em} .loc-info__hint{font-size:.92rem;color:var(--muted);line-height:1.4} .loc-info__status{margin-top:4px;font-size:.88rem;white-space:normal;flex-wrap:wrap;max-width:100%} /* 'Closed · opens 10 AM today' wraps instead of overflowing at 360px */ .loc-card__foot{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)} .loc-map{position:relative;margin-top:16px;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#e4ebdf} .loc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .loc-map__facade{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center; background: linear-gradient(118deg,transparent 47%,#f6d7ac 47%,#f6d7ac 49.4%,transparent 49.4%), linear-gradient(28deg,transparent 58%,#fff 58%,#fff 59.6%,transparent 59.6%), repeating-linear-gradient(0deg,transparent 0 46px,rgba(255,255,255,.75) 46px 49px), repeating-linear-gradient(90deg,transparent 0 62px,rgba(255,255,255,.75) 62px 65px), radial-gradient(60% 50% at 30% 70%,#d3e0cc 0,#d3e0cc 40%,transparent 41%), #e4ebdf} .loc-map__pin{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--forest);color:var(--amber);box-shadow:0 6px 16px rgba(29,32,30,.3)} .loc-map__pin .icon{width:26px;height:26px} .loc-map__addr{margin:0;padding:8px 14px;border-radius:var(--radius-sm);background:rgba(255,255,255,.94);font-size:.92rem;line-height:1.35;color:var(--ink);box-shadow:0 2px 10px rgba(35,31,32,.08)} .loc-map__btn{min-width:150px} .loc-map__ext{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.85);font-weight:600;font-size:.9rem} .loc-map.is-loaded .loc-map__facade{display:none} /* Dark band (Home): charcoal with forest-tinted chips and amber mileage */ .loc--dark{background:var(--charcoal);color:#e3e0d8;background-image:radial-gradient(90% 70% at 0% 0%,rgba(45,62,44,.55) 0%,rgba(45,62,44,0) 70%)} .loc--dark .loc__title{color:#fff} .loc--dark .eyebrow,.loc--dark .loc__sub{color:var(--amber)} .loc--dark .loc__lead a{color:#fff} .loc--dark .loc-chip{background:rgba(255,255,255,.05);border-color:rgba(153,171,139,.35);color:#fff} .loc--dark .loc-chip__mi{color:var(--amber)} .loc--dark .loc-chip--link .loc-chip__town::after{color:var(--leaf)} .loc--dark a.loc-chip:hover{background:rgba(153,171,139,.14);border-color:var(--leaf);color:#fff} .loc--dark .loc__note{color:#b9c0b4} .loc--dark .loc-card{border-color:transparent;box-shadow:0 14px 40px rgba(0,0,0,.35)} .loc--dark .loc-map{border-color:rgba(255,255,255,.12)} @media (min-width:600px){ .loc__chips{grid-template-columns:repeat(4,1fr)} .loc-card{padding:24px 26px} .loc-map{aspect-ratio:16/10} } @media (min-width:960px){ .loc__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:start} .loc__chips{grid-template-columns:1fr 1fr;gap:12px} .loc__chips--more{margin-top:12px} .loc-chip{min-height:68px;padding:12px 16px} .loc-info__row{grid-template-columns:6.4em 1fr} .loc__intro{padding-top:8px} } /* ---------- Google reviews (template-parts/google-reviews.php; data in data/google-reviews.json) ---------- */ .gr-defs{position:absolute;width:0;height:0;overflow:hidden} .gr__head{display:flex;flex-direction:column;gap:16px;margin-bottom:22px} .gr__title{margin:0} .gr-score{display:flex;align-items:center;gap:12px;background:var(--leaf-soft);border-radius:var(--radius);padding:14px 18px} .gr-g{width:18px;height:18px;flex:none} .gr-g--lg{width:34px;height:34px} .gr-score__num{font:400 3rem/1 var(--font-head);color:var(--forest);margin:0} .gr-score__meta p{margin:0} .gr-score__stars{display:inline-block;font-size:1.3rem;line-height:1.1;background:linear-gradient(90deg,var(--amber-2) var(--gr-pct,100%),#cfc8bb var(--gr-pct,100%));-webkit-background-clip:text;background-clip:text;color:transparent} .gr-score__line{font-size:.98rem;line-height:1.35} .gr-score__line strong{color:var(--forest)} .gr-score__asof{font-size:.8rem;color:var(--muted)} .gr__list{list-style:none;display:flex;gap:14px;margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter) 18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--leaf) transparent} .gr__list:focus-visible{outline-offset:-3px} .gr-card{flex:0 0 84%;max-width:340px;display:flex;scroll-snap-align:start} .gr-card__fig{margin:0;width:100%;display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--sage);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)} .gr-stars{color:var(--amber-2);font-size:1.05rem;letter-spacing:2px;line-height:1} .gr-stars__off{color:#cfc8bb} .gr-card__quote{margin:0;flex:1;font-size:1rem;line-height:1.55} .gr-card__quote p{margin:0} .gr-card__quote p::before{content:"\201C"} .gr-card__quote p::after{content:"\201D"} .gr-card__by{display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:1px solid var(--line)} .gr-card__name{font-weight:700;color:var(--forest)} .gr-card__src{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted)} .gr-card__src .gr-g{width:14px;height:14px} .gr__note{font-size:.85rem;color:var(--muted);margin:6px 0 0} @media (min-width:600px){.gr-card{flex-basis:46%}} @media (min-width:960px){ .gr__head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:32px} .gr-score{padding:16px 22px} .gr__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0;padding:0;overflow:visible} .gr-card{max-width:none} .gr-card--extra{display:none} .gr-card__fig{padding:24px} .gr__note{margin-top:18px} } /* ---------- 2026-10 upgrades (inc/store-extras.php) ---------- */ /* Ownership badge: Home hero, About hero, footer */ .owned{display:inline-flex;align-items:center;gap:.45em;margin:0 0 14px;padding:5px 12px 5px 10px;border-radius:999px;font-size:.8rem;font-weight:700;letter-spacing:.03em;line-height:1.3;color:#fff;background:rgba(21,24,22,.55);border:1px solid rgba(240,162,78,.6)} .owned__icon{width:15px;height:15px;fill:var(--amber);flex:none} .owned--footer{background:transparent;margin:0 0 10px} .page-hero .owned{margin:.1em 0 .9em} .hero__inner{padding-top:clamp(84px,19vh,176px)} /* badge added above the tagline: CTA row stays where it was */ /* Town hero: drive time + Google rating chip */ .hero-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:.1em 0 .9em} .hero-facts__drive{display:inline-flex;align-items:center;gap:.45em;margin:0;font-weight:700;font-size:1.05rem;color:#fff} .hero-facts__icon{width:20px;height:20px;fill:var(--amber);flex:none} .rchip{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 .3em;min-height:40px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--ink);font-size:.88rem;line-height:1.3;text-decoration:none} .rchip__star{color:var(--amber-2)} .rchip__meta{color:var(--muted);font-size:.8rem} a.rchip:hover{color:var(--ink);text-decoration:underline} /* Sticky bar: live status cell, same 48px row height */ .actionbar{grid-template-columns:auto minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.45fr);gap:6px} .actionbar__status{display:flex;align-items:center;gap:7px;min-height:48px;padding:0 2px 0 4px;color:#fff;font-size:.8rem;line-height:1.2;white-space:nowrap} .actionbar__status .status__dot{width:9px;height:9px} .actionbar__status-txt{display:flex;flex-direction:column} .actionbar__status [data-gl-status-text]{font-weight:800;font-size:.84rem} .actionbar__status-detail{font-weight:500;color:#c9d0c6;font-size:.74rem} .actionbar__btn--stack{flex-direction:column;gap:2px;font-size:.74rem;padding:0 4px} .actionbar__btn--stack .icon{width:19px;height:19px} .actionbar__btn--primary{font-size:.9rem;padding:0 4px} @media (max-width:374px){.actionbar__btn--primary .icon{display:none}} /* How pickup works */ .steps{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:10px} .steps__item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm)} .steps__n{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--forest);color:#fff;font-weight:800;font-size:.95rem} .steps__body{line-height:1.45;padding-top:3px} .steps__body strong{display:block;color:var(--forest)} .more .steps{margin-top:2px} .more .steps__item{background:var(--tint)} .steps__express{padding:14px 16px;border-left:4px solid var(--amber);background:var(--amber-soft);border-radius:var(--radius-sm);margin:0 0 1em} .steps__express>*:last-child{margin-bottom:0} .steps__express-h{margin:0 0 .3em} @media (min-width:600px){.steps{grid-template-columns:1fr 1fr}} @media (min-width:960px){.steps{grid-template-columns:repeat(3,1fr);gap:14px}.hero__inner{padding-top:140px}} /* Discounts (templates/discounts.php) + rewards ladder (data/rewards.json) */ .disc__rule{background:var(--leaf-soft);border-radius:var(--radius);padding:16px 18px;margin:0 0 1.2em} .disc__rule p{margin:0} .disc{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:10px} .disc__item{padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm)} .disc__item p{margin:0} .disc__amt{color:var(--sage-dark);font-weight:700} .disc__detail{color:var(--muted);font-size:.95rem} .ladder__list{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:8px} .ladder__tier{display:flex;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm)} .ladder__pts{flex:none;min-width:5.5em;font-weight:800;color:var(--forest);font-variant-numeric:tabular-nums} .footer__license{color:#d9dfd6} /* ---------- Learn hub + guides (templates/learn-*.php, inc/learn.php) ---------- */ .crumbs ol{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:0 .45em;font-size:.86rem;color:#bfc6bb} .crumbs li+li::before{content:"›";margin-right:.45em;color:var(--leaf)} .crumbs a{color:#e8e4dc;display:inline-flex;align-items:center;min-height:32px} .crumbs [aria-current]{color:#bfc6bb} .learn-start{margin:18px 0 0} .learn-jump{padding-top:18px} .learn-cat{padding:26px 0} .learn-cat+.learn-cat{padding-top:6px} .learn-cat h2{margin-bottom:.15em} .learn-cat__sub{color:var(--muted);margin:0 0 14px} .lcards{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:12px} .lcards li{display:flex} .lcard{flex:1;display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--line);border-left:4px solid var(--sage);border-radius:var(--radius-sm);background:#fff;color:var(--ink);text-decoration:none;box-shadow:var(--shadow)} .lcard:hover{border-color:var(--sage);color:var(--ink)} .lcard__cat{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-dark)} .lcard__title{font-family:var(--font-body);font-weight:700;font-size:1.08rem;line-height:1.3;color:var(--forest);margin:0} .lcard__sum{font-size:.95rem;color:var(--muted);line-height:1.45} .lcard__meta{margin-top:auto;padding-top:4px;font-size:.86rem;font-weight:700;color:var(--forest)} .page-hero--article h1{font-size:clamp(1.9rem,7vw,2.9rem)} .article-meta{margin:.8em 0 0;font-size:.88rem;color:#bfc6bb} .learn-layout{display:grid;gap:32px} .learn-main{min-width:0} .toc{background:var(--tint);border-radius:var(--radius-sm);padding:14px 18px;margin:0 0 1.4em} .toc__h{font-weight:700;margin:0 0 .3em;color:var(--forest)} .toc ol{margin:0;padding:0;list-style:none;columns:2;column-gap:22px;font-size:.92rem} .toc li{padding:0;break-inside:avoid} .toc a{display:inline-block;min-height:28px;line-height:1.3;padding:4px 0} .table-wrap{overflow-x:auto;margin:0 0 1em;-webkit-overflow-scrolling:touch} .cmp{font-size:.9rem} .cmp th,.cmp td{text-align:left;vertical-align:top;padding:8px 8px;border-bottom:1px solid var(--line);line-height:1.4} .cmp thead th{background:var(--tint);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sage-dark)} .cmp tbody th{color:var(--forest);white-space:nowrap} .sources{font-size:.9rem} .lshop{margin:1.8em 0 0;padding:18px 20px;border-radius:var(--radius);background:var(--leaf-soft)} .lshop__h{margin:0 0 .8em} .lshop .chips{margin:0 0 .4em;padding:0} .lshop .chips li{margin:0;padding:0} .lshop .chips li::before{display:none} .lshop .chip{background:#fff;text-decoration:none} .resp{margin:1.6em 0 0;padding:16px 20px;border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--radius-sm);font-size:.95rem} .resp__h{margin:0 0 .3em} .resp ul{margin:0;padding-left:1.1em} .resp li{padding:2px 0} .learn-aside{display:none} @media (min-width:600px){.lcards{grid-template-columns:1fr 1fr}} @media (min-width:960px){ .lcards{grid-template-columns:repeat(3,1fr);gap:16px} .learn-layout{grid-template-columns:minmax(0,1fr) 280px;gap:56px;align-items:start} .learn-aside{display:block;position:sticky;top:110px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);font-size:.95rem} .learn-aside__h{font-weight:700;color:var(--forest);margin:0 0 .4em} .learn-aside ul{list-style:none;margin:0 0 .4em;padding:0} .learn-aside li a{display:block;padding:7px 0;border-top:1px solid var(--line);text-decoration:none;line-height:1.35} .learn-aside li:first-child a{border-top:0} .learn-aside a[aria-current]{font-weight:700;color:var(--sage-dark)} .learn-cat{padding:40px 0} } /* ---------- Type & style: Modern apothecary (DM Serif Display + Jost), live since Oct 2026 ---------- Kept as one block at the end so it wins over the base rules above. Hero sizes on phones stay with the hero restack block. */ body{font-size:17.5px;line-height:1.62} h1,h2,h3{font-weight:400;letter-spacing:-.01em;line-height:1.08} h1{font-size:clamp(2.1rem,8vw,3.6rem)} h2{font-size:clamp(1.75rem,6.4vw,2.6rem)} h3{font-size:1.4rem} strong,b{font-weight:600} /* Hero: roman tagline with an italic amber "grow" */ .hero__tagline{line-height:1;letter-spacing:-.015em} .hero__tagline em{font-style:italic;color:var(--amber)} .hero__title{font-weight:600;letter-spacing:.005em} .hero__sub{font-weight:400} @media (min-width:800px){.hero__tagline{font-size:clamp(2.6rem,6.4vw,5rem)}} /* Buttons: label-like rectangles in spaced caps. Phones get tighter tracking so long labels stay on one line at 360px. */ .btn{border-radius:3px;font-weight:600;text-transform:uppercase;letter-spacing:.11em;font-size:.86rem} .btn--lg{font-size:.9rem} .btn--outline,.btn--ghost-light{border-width:1px} @media (max-width:479.98px){.btn{letter-spacing:.06em;font-size:.82rem;padding-left:14px;padding-right:14px}.btn--lg{font-size:.84rem}} .menu-toggle{border-radius:3px;text-transform:uppercase;letter-spacing:.12em;font-size:.82rem} .actionbar__btn{border-radius:3px;white-space:nowrap;font-size:.88rem;font-weight:600} /* Section labels: small caps with a hairline lead-in, like a tincture label */ .eyebrow,.loc__sub{display:flex;align-items:center;gap:.8em;font-size:.76rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--sage-dark)} .eyebrow::before,.loc__sub::before{content:"";width:28px;height:1px;background:currentColor;flex:none} .eyebrow::after,.loc__sub::after{content:"✦";font-size:.8em;letter-spacing:0;opacity:.8} .eyebrow--light,.page-hero .eyebrow,.loc--dark .eyebrow,.loc--dark .loc__sub,.cta-band .eyebrow,.section--dark .eyebrow{color:var(--amber)} .owned{border-radius:3px;text-transform:uppercase;letter-spacing:.09em;font-size:.68rem;font-weight:500} /* Deal card: framed like an apothecary label (double rule) */ .deal{border-radius:4px;border:1px solid rgba(240,162,78,.7);box-shadow:inset 0 0 0 5px var(--charcoal),inset 0 0 0 6px rgba(240,162,78,.35),0 10px 30px rgba(35,31,32,.18)} .deal__eyebrow{font-weight:500;letter-spacing:.24em;font-size:.74rem} .deal__title{font-weight:400} /* Cards: crisp corners, thin inner frame */ .card,.cat,.loc-chip,.town,.method,.more{border-radius:4px} .card{box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px var(--line),var(--shadow)} .chip,.status--hero{border-radius:3px} .art-panel figcaption{font-family:var(--font-head);font-style:italic;font-size:1.25rem;color:var(--forest)} /* Faint paper grain on tinted sections */ .section--tint{background-color:var(--tint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ---------- Home hero restack, <800px: clear 16:10 photo on top, text on a solid charcoal band below ---------- */ @media (max-width:799.98px){ .hero::after{display:none} .hero__pic{position:relative;display:block;inset:auto;z-index:0} .hero__pic img{display:block;width:100%;height:auto;aspect-ratio:16/10;max-height:62vh;object-fit:cover;object-position:50% 60%} .hero__pic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;background:linear-gradient(180deg,rgba(29,32,30,0),var(--charcoal));pointer-events:none} .hero__inner{padding-top:14px;padding-bottom:52px} /* deal card overlaps the hero by 28px: leaves a 24px gap under the buttons */ .hero .owned--hero{margin-bottom:10px;background:transparent} .hero__tagline{font-size:clamp(2rem,8.4vw,2.9rem);max-width:none;text-shadow:none;margin-bottom:.2em} .hero__title{font-size:clamp(1.15rem,4.8vw,1.45rem);margin-bottom:.3em} .hero__sub{font-size:.95rem;margin-bottom:.7em} .hero__where{margin-bottom:.45em} .hero .btn-row{margin-top:.9em;gap:10px} } /* short phones (e.g. 360x740 Android): a wider photo + tighter band so the Order button clears the bottom bar */ @media (max-width:799.98px) and (max-height:799px){ .hero__pic img{aspect-ratio:2/1;object-position:50% 20%} /* 2:1 box (short phones and most iPhones in Safari, toolbars shown): keep the sky above the roofline and sign (60% cut the roof off) */ .hero__inner{padding-top:8px} .hero .owned--hero{margin-bottom:6px} .hero__sub{font-size:.92rem;margin-bottom:.55em} .hero__where{margin-bottom:.35em} .hero .btn-row{margin-top:.7em} } /* ---------- Grand-opening photos (Vendetti Visuals): gl_photo() ---------- width/height on every + aspect-ratio below = the box is reserved before the file loads (no layout shift). */ .photo{margin:0} .photo img{display:block;width:100%;height:auto;border-radius:var(--radius);background:var(--leaf-soft)} .photo figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;padding-top:8px;font-size:.9rem;line-height:1.4;color:var(--muted)} .photo-credit{margin-left:auto;font-size:.72rem;letter-spacing:.03em;white-space:nowrap} .prose .photo{margin:1.5em 0} .prose>.photo:first-child{margin-top:0} .prose .photo figcaption{padding-top:8px} /* Shop All: short banner under the title on phones, side photo from 900px */ .page-hero--photo .photo{margin-top:16px;position:relative} .page-hero--photo .photo img{aspect-ratio:21/9;object-fit:cover;object-position:50% 62%} .page-hero--photo .photo figcaption{position:absolute;right:8px;bottom:6px;padding:0} .page-hero--photo .photo-credit{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85)} @media (min-width:900px){ .page-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);gap:40px;align-items:center} .page-hero--photo .photo{margin-top:0} .page-hero--photo .photo img{aspect-ratio:16/9} } /* Visit Us: portrait (4:5) sign photo; full width on phones, beside the "Inside the store" text from 900px */ .photo--portrait img{aspect-ratio:4/5;object-fit:cover} @media (min-width:900px){.photo--portrait{width:100%;max-width:440px;justify-self:center}} /* Home: storefront (DSC01004) band above the location section */ .section--photo-band{padding-bottom:0} .photo--band img{aspect-ratio:3/2;object-fit:cover;object-position:50% 38%} /* storefront: keeps the roofline, signs and the empty parking spaces in the 2:1 desktop crop */ @media (min-width:800px){.photo--band img{aspect-ratio:2/1}} /* ---------- Store location, dark variant (Home + Visit Us): no white boxes ---------- Store information = text on the charcoal band inside a hairline panel; map facade is a dark "map". Contrast on #1d201e: white 16.7:1 · #e3e0d8 13.6:1 · hints #b9c0b4 9.6:1 · leaf labels #99AB8B 7.3:1 · amber links 8.4:1. */ .loc--dark .loc-card{background:rgba(255,255,255,.035);border:1px solid rgba(153,171,139,.32);box-shadow:none;color:#e3e0d8} .loc--dark .loc-card__title{color:#fff} .loc--dark .loc-info__row,.loc--dark .loc-card__foot{border-top-color:rgba(255,255,255,.1)} .loc--dark .loc-info dt{color:var(--leaf)} .loc--dark .loc-info dd,.loc--dark .loc-info address,.loc--dark .loc-info strong{color:#fff} .loc--dark .loc-info__hint,.loc--dark .loc-card__foot{color:#b9c0b4} .loc--dark .loc-info dd>a,.loc--dark .loc-info__link{color:var(--amber)} .loc--dark .loc-info dd>a:hover,.loc--dark .loc-info__link:hover{color:#fff} .loc--dark .loc-info__status{color:#fff;padding:5px 11px;border-radius:3px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)} .loc--dark .loc-info__status .status__detail{color:#d9d6ce} .loc--dark .hours th,.loc--dark .hours td{border-bottom-color:rgba(255,255,255,.1);color:#e3e0d8} .loc--dark .hours tr.is-today{background:rgba(240,162,78,.16)} .loc--dark .hours tr.is-today th,.loc--dark .hours tr.is-today td{color:#fff} .loc--dark .loc-map{background:#252927;border-color:rgba(153,171,139,.32)} .loc--dark .loc-map__facade{background: linear-gradient(118deg,transparent 47%,rgba(240,162,78,.38) 47%,rgba(240,162,78,.38) 49.4%,transparent 49.4%), linear-gradient(28deg,transparent 58%,rgba(255,255,255,.16) 58%,rgba(255,255,255,.16) 59.6%,transparent 59.6%), repeating-linear-gradient(0deg,transparent 0 46px,rgba(255,255,255,.06) 46px 49px), repeating-linear-gradient(90deg,transparent 0 62px,rgba(255,255,255,.06) 62px 65px), radial-gradient(60% 50% at 30% 70%,rgba(153,171,139,.16) 0,rgba(153,171,139,.16) 40%,transparent 41%), #252927} .loc--dark .loc-map__pin{background:var(--amber);color:var(--charcoal)} .loc--dark .loc-map__addr{background:rgba(21,24,22,.9);color:#e3e0d8;border:1px solid rgba(255,255,255,.14);box-shadow:none} .loc--dark .loc-map__addr strong{color:#fff} .loc--dark .loc-map__ext{background:rgba(21,24,22,.85);color:var(--amber);border:1px solid rgba(240,162,78,.45)} .loc--dark .loc-map__ext:hover{color:#fff} .loc--dark .loc__lead a{color:var(--amber)} .rw-hero{background:var(--tint);padding:clamp(28px,6vw,72px) 0 clamp(32px,6vw,72px);border-bottom:1px solid var(--line)} .rw-hero__grid{display:grid;gap:clamp(28px,5vw,64px);align-items:center} .rw-hero__title{font-family:var(--font-head);color:var(--forest);font-size:clamp(2.1rem,1.4rem + 3.4vw,3.6rem);line-height:1.08;margin:0 0 .35em;max-width:14ch} .rw-hero__sub{font-size:clamp(1.05rem,.98rem + .4vw,1.25rem);color:var(--muted);max-width:36ch;margin:0 0 1.4em} .rw-hero .btn-row{margin:0} .mj-card{margin:0 auto;width:100%;max-width:360px;text-align:center} /* no frame: she sits on the hero background */ .mj-card .mj-sparkle{width:100%;margin:0 auto} .mj-card .mj-sparkle img{width:100%;height:auto;border-radius:0} /* Tagline above her head: Style C serif with an italic sage accent and a hairline ✦ hairline rule. The art is cropped with her body centre line at 50%, so plain centring lines the tagline up with her head. */ .mj-card__caption{margin:0 auto clamp(10px,1.6vw,16px);max-width:18ch;font-family:var(--font-head);font-weight:400;font-size:clamp(1.55rem,1.25rem + 1.3vw,2.1rem);line-height:1.12;letter-spacing:-.01em;color:var(--forest);text-wrap:balance} .mj-card__caption em{font-style:italic;color:var(--sage-dark)} .mj-card__caption::after{content:"✦";content:"✦" / "";display:flex;align-items:center;justify-content:center;gap:.8em;margin-top:.45em;font-family:var(--font-body);font-size:.7rem;letter-spacing:0;color:var(--sage);background:linear-gradient(currentColor,currentColor) calc(50% - 30px) 50%/28px 1px no-repeat,linear-gradient(currentColor,currentColor) calc(50% + 30px) 50%/28px 1px no-repeat} @media (min-width:960px){ .rw-hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} .mj-card{margin:0 0 0 auto} } .mj-home{padding-bottom:0} .budbar+.mj-home{padding-top:0} .home-rewards{padding-bottom:0} .home-rewards .mj-card{margin-inline:auto} /* Reviews tagline as text only (no art under it): keep the ✦ rule as the divider */ .mj-home--text .mj-card{max-width:440px} .mj-home .mj-card{margin-inline:auto} .mj-home .mj-card{max-width:440px} .mj-home .mj-card .mj-sparkle{max-width:360px} .mj-home .mj-card__caption{max-width:none} .mj-home .mj-card__caption em{display:block} @media (max-width:374px){.mj-home .mj-card__caption{font-size:1.4rem}} .near-me{padding-bottom:0} /* the photo band below brings its own top padding: one gap, not two */ .near-me__grid{display:grid;gap:0 clamp(32px,5vw,72px)} .near-me__grid h2{margin-bottom:.5em} .near-me__grid p{max-width:60ch} .near-me__intro{margin-top:0} .near-me__list{list-style:none;margin:0 0 1.4em;padding:0;display:grid;gap:12px;max-width:60ch} .near-me__list li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;line-height:1.5} .near-me__ico{color:var(--forest);margin-top:.2em;flex:none} .near-me__list strong{color:var(--forest)} @media (min-width:900px){ .near-me__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center} .near-me__grid h2{margin-bottom:0} } /* ---------- Photo carousel (gl_carousel: Shop All hero + Home location band): scroll-snap, fixed 16:9 box (no layout shift) ---------- */ .carousel{position:relative;margin-top:16px} .carousel [hidden]{display:none!important} .carousel__track{display:flex;margin:0;padding:0;list-style:none;aspect-ratio:16/9;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:var(--radius);background:#2a2f2b} .carousel__track::-webkit-scrollbar{display:none} .carousel__track:focus-visible{outline:3px solid var(--amber);outline-offset:3px} .carousel__slide{flex:0 0 100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always} .carousel__slide img[data-srcset]{display:none} /* deferred slide: shown once site.js sets srcset (no-JS gets the