/* ============================================================
   THE DISPENSARY — the shop front door.
   Structure from the supplied preview: sticky lens bar, editorial
   masthead, house directory, house bands alternating three layouts
   across three grounds, interstitials (clinician shelf, order of
   operations, prescription note), sage quiz moment, then the
   release valve into the full index.
   Tokens are the site's own (base.css) — nothing standalone.
   ============================================================ */
.dsp{--rail-h:62px}
.dsp .wrap{width:min(1280px,calc(100% - clamp(24px,6vw,96px)));margin-inline:auto}
.dsp .mono{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase}

/* ---- lens bar ---- */
.lens{position:sticky;top:var(--nav-h);z-index:20;background:var(--bg);
  border-bottom:1px solid var(--hairline-2);height:var(--rail-h);display:flex;align-items:center}
.lens__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
.lens__count{color:var(--ivory-dim)}
.lens__switch{display:flex;gap:2px;background:rgba(33,29,24,.07);padding:3px;border-radius:2px}
.lens__btn{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  border:0;background:transparent;color:var(--ivory-dim);min-height:44px;padding:0 15px;cursor:pointer;border-radius:2px;
  transition:background .32s var(--ease-out),color .32s var(--ease-out)}
.lens__btn[aria-pressed="true"]{background:var(--pine);color:var(--bone)}
.lens__btn:hover:not([aria-pressed="true"]){color:var(--ivory)}

/* ---- video masthead ---- */
.mast{padding:clamp(64px,10vw,132px) 0 clamp(44px,6vw,80px)}
.mast--video{position:relative;isolation:isolate;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(560px,78svh,860px);padding:clamp(96px,14vw,176px) 0 clamp(48px,7vw,88px);
  background:var(--pine) url('video/dispensary/neoskin-future-poster.jpg') center/cover no-repeat;color:var(--bone)}
.mast__film{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center}
.mast__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(25,29,22,.84) 0%,rgba(25,29,22,.56) 42%,rgba(25,29,22,.12) 76%),
    linear-gradient(0deg,rgba(25,29,22,.46) 0%,rgba(25,29,22,0) 46%)}
.mast__content{position:relative}
.mast h1{font-family:'Expose',serif;font-weight:400;font-size:clamp(2.9rem,6.2vw,5.4rem);line-height:.95;
  letter-spacing:-.04em;margin:0;max-width:13ch;text-wrap:balance;color:var(--bone)}
.mast h1 em{font-family:'PP Editorial New',serif;font-style:italic;color:var(--blush)}
.mast__lead{max-width:54ch;margin-top:26px;font-size:clamp(16px,1.35vw,19px);color:rgba(247,244,238,.84)}
.mast__meta{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px 34px;color:rgba(247,244,238,.72)}

@media (max-width:640px){
  .mast--video{min-height:72svh;padding-top:clamp(88px,24vw,124px);padding-bottom:40px}
  .mast__film{object-position:54% center}
  .mast__veil{background:linear-gradient(90deg,rgba(25,29,22,.78) 0%,rgba(25,29,22,.34) 100%),
    linear-gradient(0deg,rgba(25,29,22,.68) 0%,rgba(25,29,22,.08) 62%)}
  .mast h1{font-size:clamp(2.1rem,8.5vw,2.75rem);max-width:12ch}
  .mast__lead{max-width:34ch}
  .mast__meta{margin-top:28px;gap:8px 22px}
}

@media (prefers-reduced-motion:reduce){
  .mast__film{display:none}
}

/* ---- house directory ---- */
.dir{border-top:1px solid var(--hairline-2);border-bottom:1px solid var(--hairline-2);padding:18px 0}
.dir__list{display:flex;flex-wrap:wrap;gap:4px 26px;list-style:none;margin:0;padding:0}
.dir__list a{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--ivory-dim);padding:12px 0 9px;
  border-bottom:1px solid transparent;transition:color .3s var(--ease-out),border-color .3s var(--ease-out)}
.dir__list a:hover,.dir__list a[data-active="true"]{color:var(--ivory);border-color:var(--champagne)}
.dir__list b{font-weight:400;color:rgba(33,29,24,.42);margin-left:6px}

/* ---- house band ---- */
.house{padding:clamp(58px,7.5vw,108px) 0;position:relative}
.house--putty{background:var(--bg)}
.house--sand{
  background-color:var(--bg);
  background-image:linear-gradient(rgba(239,233,222,.82),rgba(239,233,222,.82)),
    url('img/textures/sand-ripples.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat
}
.house--sand .card__plate{background:rgba(253,251,246,.76);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.house--sand .card:hover .card__plate{background:rgba(255,253,249,.92)}
.house--deep{background:var(--bg-3)}
.house--ink{background:var(--pine);color:var(--bone)}
.house--pine{background:var(--pine);color:var(--bone)}
#h-neoskin{
  background-color:var(--pine);color:var(--bone);
  background-image:linear-gradient(rgba(18,28,21,.58),rgba(18,28,21,.58)),
    url('img/textures/green-rain-glass.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat
}
.house--pine .house__line{color:rgba(247,244,238,.72)}
.house--pine .card__plate{background:rgba(247,244,238,.07)}
.house--pine .card:hover .card__plate{background:rgba(247,244,238,.13)}
.house--pine .card__name{color:var(--bone)}
.house--pine .card__meta,.house--pine .card__price{color:rgba(247,244,238,.74)}
.house--pine .house__all{color:var(--bone);border-color:rgba(247,244,238,.32)}
.house--pine .house__all:hover{border-color:var(--sage-on-dark)}
.house--pine .rail{scrollbar-color:rgba(247,244,238,.34) transparent}
.house--ink .house__line{color:rgba(247,244,238,.72)}
.house--ink .card__plate{background:rgba(247,244,238,.07)}
.house--ink .card__name{color:var(--bone)}
.house--ink .card__meta,.house--ink .card__price{color:rgba(247,244,238,.72)}
.house--ink .card__desc{color:rgba(247,244,238,.66)}
.house--ink .house__all{color:var(--bone);border-color:rgba(247,244,238,.32)}
.house__head{margin-bottom:clamp(30px,4vw,50px)}
.house__name{font-family:'Expose',serif;font-weight:400;font-size:clamp(32px,4.4vw,60px);letter-spacing:-.04em;margin:0}
.house__line{max-width:46ch;margin-top:14px;color:var(--ivory-dim);font-size:clamp(15px,1.2vw,17px)}
.house__all{display:inline-flex;align-items:center;gap:10px;margin-top:24px;min-height:44px;text-decoration:none;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid rgba(33,29,24,.28);transition:gap .4s var(--ease-out),border-color .3s var(--ease-out)}
.house__all:hover{gap:16px;border-color:var(--champagne)}
.house__all svg{width:15px;height:9px;flex:none}

.lay-a{display:grid;grid-template-columns:minmax(240px,.82fr) 2fr;gap:clamp(26px,4vw,72px);align-items:start}
.lay-a .house__head{position:sticky;top:calc(var(--nav-h) + var(--rail-h) + 30px);margin-bottom:0}
.lay-a .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,40px)}
.lay-b .rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(228px,1fr);gap:clamp(16px,2vw,32px);
  overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:20px;scrollbar-width:thin}
.lay-b .rail>*{scroll-snap-align:start}
.lay-c .grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(18px,2.6vw,44px);align-items:start}
.lay-c .stack{display:grid;gap:clamp(14px,2vw,26px)}
.lay-c .card--feature .card__plate{aspect-ratio:4/3.2}
.lay-c .card--feature .card__name{font-size:clamp(19px,2vw,27px);font-family:'Expose',serif}
.lay-c .stack .card{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:center}
.lay-c .stack .card__plate{aspect-ratio:1;margin:0}

/* ---- card ---- */
.dsp .card{text-decoration:none;display:block;color:inherit}
.card__plate{position:relative;aspect-ratio:3/3.6;background:var(--bg-2);display:grid;place-items:center;
  overflow:hidden;transition:background .5s var(--ease-out)}
.dsp .card:hover .card__plate{background:#FFFDF9}
.house--ink .card:hover .card__plate{background:rgba(247,244,238,.12)}
.card__plate img{width:78%;height:78%;object-fit:contain;transition:transform .7s var(--ease-out)}
.dsp .card:hover .card__plate img{transform:scale(1.04)}
.card__tag{position:absolute;top:12px;left:12px;font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;background:var(--ivory);color:var(--bone)}
.card__name{margin:15px 0 0;font-size:16px;line-height:1.35;color:var(--ivory)}
.card__meta{margin:5px 0 0;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ivory-dim)}
.card__desc{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--ivory-dim);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__price{margin:8px 0 0;font-size:15px;color:var(--ivory-dim)}

/* ---- interstitials ---- */
.inter{padding:clamp(62px,8vw,116px) 0}
.inter--pine{background:var(--pine);color:var(--bone)}
.inter--bone{background:var(--bg-2)}
.inter--ink{background:var(--pine);color:var(--bone)}
.inter__label{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sage-on-dark);margin:0 0 20px}
.inter--bone .inter__label{color:var(--sage-label)}
.inter h2{font-family:'Expose',serif;font-weight:400;font-size:clamp(28px,3.7vw,50px);max-width:20ch;letter-spacing:-.04em;margin:0}
.inter__body{max-width:58ch;margin-top:18px;font-size:clamp(15px,1.25vw,18px);color:rgba(247,244,238,.8)}
.inter--bone .inter__body{color:var(--ivory-dim)}
.shelf{display:grid;grid-template-columns:1.1fr 2fr;gap:clamp(28px,4.5vw,80px);align-items:start}
.shelf__picks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,34px)}
.inter--bone .card__plate{background:var(--bg-3)}
.inter--bone .card__name{color:var(--ivory)}
.inter--bone .card__meta,.inter--bone .card__price{color:var(--ivory-dim)}
.inter--bone .shelf__sig{color:var(--ivory)}
.inter--bone .shelf__role{color:var(--ivory-dim)}
.inter--pine .card__plate{background:rgba(247,244,238,.08)}
.inter--pine .card__name{color:var(--bone)}
.inter--pine .card__desc{color:rgba(247,244,238,.66)}
.inter--pine .card__meta,.inter--pine .card__price{color:rgba(247,244,238,.72)}
.shelf__sig{margin-top:28px;font-family:'PP Editorial New',serif;font-style:italic;font-size:21px;color:rgba(247,244,238,.92)}
.shelf__role{margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(247,244,238,.58)}
/* ---- order of operations ----
   Four hairline columns read as a dropped table, not a sequence. Each
   step is a raised card now, and the sequence is the design: the cards
   step DOWN the row, the sage rule at the top of each grows with the
   number, and 04 — the step that does the most work — is the one on
   pine. Hover lifts, because these are the only objects in the band. */
.steps{/* treatment.css caps .steps at 720px for its own step list; the
   dispensary's runs the full measure */
  max-width:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px);
  margin-top:clamp(34px,4.5vw,62px);counter-reset:step;list-style:none;padding:0;
  align-items:start}
.steps li{
  position:relative;isolation:isolate;
  background:var(--bg);border-radius:var(--radius-panel);
  padding:clamp(20px,2vw,28px) clamp(18px,1.8vw,26px) clamp(24px,2.4vw,32px);
  box-shadow:var(--e1),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .38s var(--ease-out),box-shadow .38s var(--ease-out);
}
/* the descent: each card sits a step lower than the one before it */
.steps li:nth-child(2){margin-top:clamp(10px,1.4vw,22px)}
.steps li:nth-child(3){margin-top:clamp(20px,2.8vw,44px)}
.steps li:nth-child(4){margin-top:clamp(30px,4.2vw,66px)}
.steps li:hover{transform:translateY(-4px);box-shadow:var(--e3),inset 0 1px 0 rgba(255,255,255,.5)}
/* sage rule across the top, lengthening with the step */
.steps li::after{content:"";position:absolute;left:0;top:0;height:2px;
  background:var(--champagne);border-radius:2px 0 0 0}
.steps li:nth-child(1)::after{width:26%}
.steps li:nth-child(2)::after{width:48%}
.steps li:nth-child(3)::after{width:72%}
.steps li:nth-child(4)::after{width:100%;border-radius:2px 2px 0 0}
.steps li::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.14em;
  color:var(--sage-label);display:block;margin-bottom:14px}
.steps h3{font-family:'Expose',serif;font-weight:400;font-size:clamp(19px,1.8vw,25px);
  margin:0;letter-spacing:-.03em;color:var(--ivory)}
.steps p{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--ivory-dim);text-wrap:pretty}
/* the last step carries the weight it claims in its own copy */
.steps li:last-child{background:var(--pine);box-shadow:var(--e3)}
.steps li:last-child::before{color:var(--sage-on-dark)}
.steps li:last-child h3{color:var(--bone)}
.steps li:last-child p{color:rgba(247,244,238,.78)}
.steps li:last-child:hover{box-shadow:var(--e4)}

@media (max-width:1100px){
  .steps li:nth-child(n){margin-top:0}
  .steps li:nth-child(2),.steps li:nth-child(4){margin-top:clamp(12px,2vw,26px)}
}
@media (prefers-reduced-motion:reduce){
  .steps li{transition:none}
  .steps li:hover{transform:none}
}

.script{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,90px);align-items:end}
.script__rule{border-top:1px solid rgba(247,244,238,.24);padding-top:20px;margin-top:8px}
.script__rule dt{font-size:15px;color:var(--bone)}
.script__rule dd{margin:6px 0 0;font-size:14px;color:rgba(247,244,238,.68)}

/* ---- quiz moment ---- */
/* The band carries the rain-glass photo rather than a flat swatch. #2C3329 — sampled
   from the photo's mid-tone — stays as the background-color underneath, so a
   slow or missing image degrades to a dark band that the ivory type still reads
   on, rather than flipping to a light ground. The scrim is light because the
   photo is already dark; it only lifts the brighter runs of condensation off
   the copy. Scoped here; the brand token is untouched. */
.dsp .quizband{background-color:#2C3329;
  background-image:linear-gradient(rgba(18,28,21,.38),rgba(18,28,21,.38)),url('img/textures/green-rain-glass.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  color:var(--ivory);padding:clamp(58px,8vw,104px) 0}
.quizband__inner{display:flex;flex-wrap:wrap;gap:32px;align-items:end;justify-content:space-between}
.quizband h2{font-family:'Expose',serif;font-weight:400;font-size:clamp(28px,3.6vw,48px);max-width:16ch;
  color:var(--ivory);letter-spacing:-.04em;margin:0}
/* --ivory is this palette's INK (#211D18), which was right on the flat sage and
   is unreadable on the dark glass. Both the heading and the body copy move to
   bone; the band is now a dark surface, so it follows the same rule as .sec-pine. */
.dsp .quizband h2{color:var(--bone)}
.quizband p{margin-top:15px;max-width:44ch;color:var(--bone-dim)}
/* the only square button on the site — every other CTA, from .btn in base
   to the nav pill to the checkout button, is border-radius:999px. Squared
   off against the sage band it read as unstyled rather than deliberate.
   Pill, elevation and lift brought in line with .btn; the gap slide on
   hover is this button's own and stays. */
.dsp .btn-dark{display:inline-flex;align-items:center;gap:12px;background:var(--glass-fill);color:var(--bone);
  text-decoration:none;min-height:52px;padding:0 30px;font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  border-radius:999px;border:1px solid var(--glass-edge-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--e2), inset 0 1px 0 rgba(255,255,255,.22);
  transition:gap .4s var(--ease-out),background .3s var(--ease-out),
             transform var(--dur-state) var(--ease-soft),
             box-shadow var(--dur-state) var(--ease-soft)}
.dsp .btn-dark:hover{gap:19px;background:var(--glass-hover);transform:translateY(-2px);
  box-shadow:var(--e3), inset 0 1px 0 rgba(255,255,255,.22)}
.dsp .btn-dark:active{transform:translateY(0) scale(.975);box-shadow:var(--e1)}
.dsp .btn-dark svg{width:16px;height:9px}

/* ---- release valve ---- */
.allband{padding:clamp(52px,7vw,88px) 0;background:var(--bg-3);border-top:1px solid var(--hairline-2)}
.allband__inner{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.allband h2{font-family:'Expose',serif;font-weight:400;font-size:clamp(23px,2.6vw,35px);letter-spacing:-.04em;margin:0}
.allband p{margin-top:11px;color:var(--ivory-dim);max-width:48ch}
.allband__link{display:inline-flex;align-items:center;gap:11px;min-height:44px;text-decoration:none;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid rgba(33,29,24,.3);transition:gap .4s var(--ease-out),border-color .3s var(--ease-out)}
.allband__link:hover{gap:17px;border-color:var(--champagne)}

/* ---- concern view ---- */
.concern{padding:clamp(50px,7vw,96px) 0}
.concern:nth-of-type(even){background:var(--bg-3)}
.concern__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--hairline-2);padding-bottom:18px;margin-bottom:clamp(26px,3.4vw,44px)}
.concern__head h2{font-family:'Expose',serif;font-weight:400;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.04em;margin:0}
.concern__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,40px)}

@media (max-width:1100px){
  .lay-a{grid-template-columns:1fr}
  .lay-a .house__head{position:static;margin-bottom:34px}
  .concern__grid{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .shelf,.script,.lay-c .grid{grid-template-columns:1fr}
  .script{align-items:start}
  .concern__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .lay-a .grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .shelf__picks{grid-template-columns:1fr;gap:13px}
  .shelf__picks .card{display:grid;grid-template-columns:84px 1fr;gap:15px;align-items:center}
  .shelf__picks .card__plate{aspect-ratio:1}
  .steps{grid-template-columns:1fr;gap:22px}
  .lens__count{display:none}
  .card__name{font-size:15px}
}

/* reveals: visible by default, enhanced only when JS marks the page */
.dsp .rv{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
html.js .dsp .rv{opacity:0;transform:translateY(18px)}
html.js .dsp .rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .dsp .rv{opacity:1;transform:none}}

/* ---- masthead ground: the water shot, dark end under the type ----
   The image runs pine at the bottom-right and sage at the top-left, so
   the statement sits on the sage half and a scrim carries the contrast
   the photograph cannot guarantee on its own. */
.mast--shot{position:relative;isolation:isolate;color:var(--bone);overflow:hidden;
  padding-top:clamp(84px,12vw,168px);padding-bottom:clamp(56px,8vw,104px)}
.mast__bg{position:absolute;inset:0;z-index:-2}
.mast__bg img{width:100%;height:100%;object-fit:cover;object-position:60% 45%}
.mast--shot::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(25,29,22,.86) 0%,rgba(25,29,22,.62) 42%,rgba(25,29,22,.28) 100%)}
.mast--shot h1{color:var(--bone)}
.mast--shot h1 em{color:var(--blush)}
.mast--shot .mast__lead{color:rgba(247,244,238,.82)}
.mast--shot .mast__meta{color:rgba(247,244,238,.7)}
@media (max-width:640px){
  .mast--shot::after{background:linear-gradient(180deg,rgba(25,29,22,.82) 0%,rgba(25,29,22,.72) 55%,rgba(25,29,22,.86) 100%)}
  .mast__bg img{object-position:55% 40%}
}

/* Card descriptions were inheriting --ivory-dim (#4A443B) — dark ink on
   a pine ground, about 1.5:1 and effectively invisible. On the dark
   bands they take the bone stop; on light bands they stay ink-dim. */
.card__desc{color:var(--ivory-dim);font-size:13px;line-height:1.5;margin:6px 0 0}
.house--pine .card__desc,
.house--ink .card__desc,
.inter--pine .card__desc{color:rgba(247,244,238,.78)}

/* heading sits with its copy rather than stranded at the far left */
.c-sec--right h2{text-align:right;justify-self:end;max-width:14ch}
@media (max-width:900px){.c-sec--right h2{text-align:left;justify-self:start}}