/* =====================================================================
   CTFY · Midnight Theta · Essential oils (/oils/) — page layer
   Spec: docs/redesign/pages/39-oils.md. Builds on css/site.css (foundation) and css/modules.css (M01–M33);
   only page composition and rhythm live here.
   Chapters: I OrOil (H6 paper subhero, the stand straddles the seam)
             II The oils (positioning · what they are · scent shelf · benefits · full range · M30 bridge), all porcelain
             III Close (compact finale + note)
   Scoped overrides of shared parts (none touches site.css / modules.css):
     · .m-tab-heading is shown (the family's full source H3), not visually hidden
     · M28 card on a paper-1 band takes --paper-0; M24 line discs take the band colour via --page
     · .m-scent__pack is transparent so the shelf hairline runs behind the bottles
   ===================================================================== */

#oroil,#scents,#full-range{scroll-margin-top:96px}

/* ---------- I · 1 · H6 paper subhero + the stand ---------- */
.oils-hero .hero__title{max-width:none}
.oils-hero .hero__lead{max-width:56ch}
/* the stand is a framed porcelain object: it straddles the dark → paper seam on the right (desktop) */
.oils-stand{width:min(420px,34vw);padding:18px;background:var(--paper-0);border-radius:var(--r-xl);
  box-shadow:var(--lift-paper),0 36px 80px -34px rgba(0,0,0,.6);bottom:-150px}
.oils-stand img{display:block;width:100%;height:auto;border-radius:var(--r-l);mix-blend-mode:multiply}
@media (max-width:1023px){
  /* phones/tablets: centred under the lead, 62vw, a third of it over the seam */
  .oils-hero{padding-bottom:0}
  .oils-hero .hero__float{display:block;position:relative;right:auto;bottom:auto;align-self:center;
    width:min(62vw,420px);margin:36px 0 calc(min(62vw,420px) / -3)}
}

/* ---------- II · rhythm: porcelain chapters stack without seams, so the inner ones use the tight section rhythm ---------- */
.ch--paper.oils-what,.ch--paper.oils-scents,.ch--paper.oils-benefits,.ch--paper.oils-range,.ch--paper.oils-bridge{padding-block:clamp(72px,8vw,128px)}
.ch--paper.oils-bridge{padding-bottom:calc(120px + clamp(48px,5vw,80px));--seam-to:var(--bg-0)}   /* the paper → dark seam lands on the finale's --bg-0 */
.oils-what,.oils-benefits{background:var(--paper-1);--page:var(--paper-1)}

/* ---------- II · 2 · Positioning: text-led split, proof card ---------- */
.oils-about .m-split{align-items:center}
.oils-proof{display:grid;gap:22px;justify-items:start;padding:clamp(24px,3vw,36px);background:var(--paper-1);
  border:1px solid var(--line-p);border-radius:var(--r-xl);box-shadow:var(--lift-paper)}
.oils-proof__badge{display:block;width:184px;height:auto;border-radius:var(--r-s)}
.oils-proof .m-ribbon{overflow:visible;padding-block:0}
.oils-proof .m-ribbon__track,.oils-proof .m-ribbon__list{justify-content:flex-start}
.ch--paper .oils-proof .m-ribbon .chip{background:var(--paper-0)}
.ch--paper .oils-proof .m-ribbon .chip.oils-proof__seal{border-color:var(--champ-600)}   /* champagne hairline: ornament only */

/* ---------- II · 3 · What they are + M28 ---------- */
.oils-sizes{color:var(--ink-3)}
.ch--paper.oils-what .m-feel__card{background:var(--paper-0)}

/* ---------- II · 4 · M22 Scent Shelf: the hero moment ---------- */
.oils-shelf{position:relative;container-type:inline-size}
.oils-shelf .m-scent__pack{background:transparent;position:relative;overflow:visible}
.oils-shelf .m-scent__pack img{transition:transform var(--dur-fast) var(--ease-out)}
/* contact shadow under every bottle (opacity only), where the shelf line runs */
.oils-shelf .m-scent__pack::after{content:"";position:absolute;left:16%;right:16%;bottom:calc(6% - 5px);height:10px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(17,19,26,.22),rgba(17,19,26,0));pointer-events:none}
/* the shelf: a 1px champagne hairline at the packshots' baseline, drawn left to right */
.oils-shelf__line{position:absolute;z-index:1;left:0;right:0;height:1px;background:var(--champ-600);transform-origin:left;pointer-events:none;
  top:calc((100cqw - 48px) / 4 * .94)}
@media (max-width:1023px){.oils-shelf__line{top:calc((100cqw - 16px) / 2 * .94)}}
@media (max-width:599px){.oils-shelf__line{top:calc(72cqw * .94)}}
.oils-shelf .m-rail{padding-top:20px;margin-top:-20px}      /* room for the 6px hover lift and the 16px rise; no z-index here: the packshots multiply against the page */
.oils-shelf .m-rail>li{padding-bottom:2px}
.oils-shelf .m-scent .chip{transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .oils-shelf .m-scent:hover .m-scent__pack img{transform:translateY(-6px)}
  .oils-shelf .m-scent:hover .chip{background:var(--surface-2)}
}
.oils-shelf .m-scent:focus-within .m-scent__pack img{transform:translateY(-6px)}
.oils-shelf .m-scent:focus-within .chip{background:var(--surface-2)}
.oils-more{justify-content:center;align-items:flex-start;gap:12px;padding:clamp(24px,2.4vw,32px);background:var(--paper-1);border:1px solid var(--line-p);border-radius:var(--r-l)}
.oils-more p.eyebrow{font:600 var(--t-micro)/1.3 var(--font-sans);color:var(--fg-3)}
.oils-more .btn{margin-top:6px}
/* hero-moment states: only with JS and motion on (core.js adds .is-pending / .is-in). The rise and fade sit on the packshot and
   the text, not on the <li>: a faded group would isolate the multiply blend and flash the packshots' white boxes. */
.js .oils-shelf__line[data-reveal].is-pending{opacity:1;transform:scaleX(0)}
.js .oils-shelf__line[data-reveal].is-in{transition:transform 700ms var(--ease-in-out) var(--delay,0ms)}
.js .oils-shelf .m-rail>li.is-pending,.js .oils-shelf .m-rail>li.is-in{opacity:1;transform:none;transition:none}
.js .oils-shelf .m-rail>li.is-pending .m-scent__pack img,.js .oils-shelf .m-rail>li.is-pending .m-scent>:not(.m-scent__pack){opacity:0;transform:translateY(16px)}
.js .oils-shelf .m-rail>li.is-in .m-scent__pack img,.js .oils-shelf .m-rail>li.is-in .m-scent>:not(.m-scent__pack){
  transition:opacity var(--dur-reveal) var(--ease-out) var(--delay,0ms),transform var(--dur-reveal) var(--ease-out) var(--delay,0ms)}
.js .oils-shelf .m-scent__pack::after{transition:opacity var(--dur-slow) var(--ease-out) var(--delay,0ms)}
.js .oils-shelf .m-rail>li.is-pending .m-scent__pack::after{opacity:0}
[data-motion="off"] .oils-shelf__line{transform:none!important;opacity:1!important}

/* ---------- II · 5 · Benefits ---------- */
.oils-benefits .m-pillar__disc{background:var(--paper-0)}

/* ---------- II · 6 · Range index ---------- */
.oils-range .m-range-index{max-width:1080px}
.oils-range .tabs__list{max-width:100%}
.oils-range .tabs__panel{margin-top:clamp(24px,3vw,40px)}
/* each family's full source H3 stays visible as the panel title (core.js hides it by default) */
.oils-range [role="tabpanel"]>.m-tab-heading,.oils-range .m-tab-heading{position:static!important;width:auto;height:auto;margin:0 0 6px;overflow:visible;clip:auto;white-space:normal;
  font:500 calc(var(--t-title) * 1.25 * var(--k-display))/1.2 var(--font-display);letter-spacing:-.005em}
.oils-range .m-range-list li:first-child,.oils-range .m-range-list li:nth-child(2){border-top-color:var(--hair-2)}
.oils-range .tabs__panel.is-active{animation:oils-fade 220ms linear}
@keyframes oils-fade{from{opacity:0}to{opacity:1}}
[data-motion="off"] .oils-range .tabs__panel.is-active{animation:none}
@media (max-width:599px){.oils-range .m-range-list li:nth-child(2){border-top-color:var(--hair)}}
.oils-range__cta{margin-top:clamp(32px,4vw,56px);text-align:center}

/* ---------- II · 7 · M30 bridge card ---------- */
.oils-bridge .m-bridge__line{max-width:26ch}
.oils-bridge .m-bridge__product{max-width:420px}

/* ---------- III · 8 · Finale + disclaimer ---------- */
.oils-finale .m-finale__inner h2{max-width:20ch}
.oils-finale .m-note{margin-top:clamp(12px,2vw,24px);text-align:left}
/* the product's own dark set dissolves into the card (no photo rectangle), as on Home */
.oils-bridge .m-bridge__product{isolation:auto}
.oils-bridge .m-bridge__product img{mix-blend-mode:lighten}
.oils-bridge .m-bridge__product img{
  -webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent),radial-gradient(68% 70% at 50% 48%,#000 58%,transparent 100%);-webkit-mask-composite:source-in;
          mask-image:linear-gradient(to bottom,#000 76%,transparent),radial-gradient(68% 70% at 50% 48%,#000 58%,transparent 100%);mask-composite:intersect}