/* =============================================================
   LUBYLAB — Signature Kit
   Shared layout for the four combo-set pages under /sets/.
   Editorial skincare collection + clinical sequence UI.

   Structure (every page):
     .sk-index       collection switcher (4 kits)
     .sk-hero        editorial hero: title, lede, sequence, stills
     .sk-seq         sticky progress rail + sequence chapters
     .sk-collection  4-kit gallery (horizontal on desktop)
     .sk-close/.sk-note
   Motion is opt-in via html.sk-motion (set by signature-kit.js only
   when JS runs and prefers-reduced-motion is not "reduce").
   ============================================================= */

.sk-page {
  /* "Your home, your clinic" — evening home-spa palette: warm espresso
     stone, candle-lit champagne accent, products lit like objects. */
  --sk-bg: #1b1815;
  --sk-bg-2: #2a251f;
  --sk-paper: #201c18;
  --sk-ink: #f1ebe2;          /* 14.9:1 on --sk-bg */
  --sk-ink-2: #cdc4b8;
  --sk-muted: #a39a8e;        /* ≥5.3:1 on every surface incl. kit moods */
  --sk-line: #3a342d;
  --sk-line-strong: #574f45;
  --sk-accent: #d2b48a;       /* champagne, 9:1 on --sk-bg */
  --sk-night: #110f0d;        /* deepest panel (closing section, nav) */
  color-scheme: dark;
  /* One typeface site-wide: Pretendard (styles/fonts.css). The three roles
     stay as variables so display / body / label styling remains distinct. */
  --sk-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --sk-serif: var(--sk-sans);
  --sk-mono: var(--sk-sans);
  --sk-nav: 64px;             /* sticky site nav height */
  --sk-gutter: clamp(20px, 4vw, 56px);
  --sk-max: 1360px;
  --sk-ease: cubic-bezier(.22, .61, .36, 1);

  background: var(--sk-bg);
  color: var(--sk-ink);
  font-family: var(--sk-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Pretendard covers Latin + Korean; JP/ZH glyphs fall back to Noto. */
html[lang="ja"] .sk-page { --sk-sans: 'Pretendard', 'Noto Sans JP', sans-serif; }
html[lang="zh"] .sk-page { --sk-sans: 'Pretendard', 'Noto Sans SC', sans-serif; }
.sk-page { font-variant-numeric: tabular-nums; }

/* Keep the shared site nav pinned (it is sticky inside a wrapper of the
   same height, which otherwise makes it scroll away on these pages). */
.sk-page #set-shared-nav { position: sticky; top: 0; z-index: 100; }

.sk-page ::selection { background: var(--sk-ink); color: var(--sk-paper); }

.sk-wrap { max-width: var(--sk-max); margin: 0 auto; padding: 0 var(--sk-gutter); }

/* ---------- Accessibility primitives ---------- */
.sk-skip {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--sk-ink); color: var(--sk-paper);
  padding: 12px 18px; font-size: 14px;
}
.sk-skip:focus { top: 12px; }
.sk-page a:focus-visible,
.sk-page button:focus-visible {
  outline: 2px solid var(--sk-ink);
  outline-offset: 4px;
  border-radius: 1px;
}
.sk-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Shared type ---------- */
.sk-eyebrow {
  font-family: var(--sk-mono); font-weight: 500;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sk-accent);
}
.sk-page h1, .sk-page h2, .sk-page h3, .sk-page h4 {
  font-family: var(--sk-serif); font-weight: 600; letter-spacing: -.035em;
}
html[lang="ko"] .sk-page :is(h1,h2,h3,h4),
html[lang="ja"] .sk-page :is(h1,h2,h3,h4),
html[lang="zh"] .sk-page :is(h1,h2,h3,h4) {
  font-weight: 600; letter-spacing: -.01em;
}
.sk-page em { font-style: normal; font-weight: 300; color: var(--sk-accent); }
.sk-page strong, .sk-page b { font-weight: 600; color: var(--sk-ink); }

/* Text link with arrow — "Explore product" / "Explore kit" */
.sk-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sk-ink);
  padding: 10px 0;
  border-bottom: 1px solid var(--sk-ink);
  transition: gap .35s var(--sk-ease), color .25s;
}
.sk-link::after { content: "\2192"; font-size: 15px; letter-spacing: 0; }
.sk-link:hover { gap: 20px; color: var(--sk-accent); border-color: var(--sk-accent); }

.sk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 52px; padding: 0 30px;
  font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  background: var(--sk-ink); color: var(--sk-paper);
  border: 1px solid var(--sk-ink);
  transition: background .3s, color .3s;
}
.sk-btn::after { content: "\2193"; font-size: 15px; letter-spacing: 0; }
.sk-btn:hover { background: transparent; color: var(--sk-ink); }

/* =============================================================
   1. Collection index — switch between the four kits
   ============================================================= */
.sk-index { border-bottom: 1px solid var(--sk-line); background: var(--sk-bg); }
.sk-index .sk-wrap {
  display: flex; align-items: center; gap: 32px; min-height: 56px;
}
.sk-index__label { flex: none; color: var(--sk-muted); }
.sk-index ol {
  display: flex; gap: clamp(18px, 3vw, 44px); margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none;
}
.sk-index ol::-webkit-scrollbar { display: none; }
.sk-index a {
  display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap;
  padding: 18px 0 16px; font-size: 13px; color: var(--sk-muted);
  border-bottom: 1px solid transparent; transition: color .25s, border-color .25s;
}
.sk-index a .n { font-family: var(--sk-mono); font-size: 10px; letter-spacing: .1em; }
.sk-index a:hover { color: var(--sk-ink); }
.sk-index a[aria-current="page"] { color: var(--sk-ink); border-bottom-color: var(--sk-ink); }

/* =============================================================
   2. Hero
   ============================================================= */
.sk-hero { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 96px); }
.sk-hero__grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 88px); align-items: end;
}
.sk-hero__title {
  font-size: clamp(46px, 6.4vw, 100px); line-height: .98; letter-spacing: -.045em;
  margin: 24px 0 0; color: var(--sk-ink);
}
.sk-hero__setname {
  font-family: var(--sk-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sk-ink-2); margin: 28px 0 0;
}
.sk-hero__lede {
  font-size: clamp(17px, 1.5vw, 20px); font-weight: 300; line-height: 1.65;
  color: var(--sk-ink-2); max-width: 34em; margin: 18px 0 0;
}
.sk-hero__seq {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  list-style: none; margin: 32px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--sk-line);
  font-family: var(--sk-serif); font-size: clamp(20px, 2vw, 28px); font-weight: 300; letter-spacing: -.02em;
  color: var(--sk-ink);
}
.sk-hero__seq li { display: inline-flex; align-items: center; gap: 16px; }
.sk-hero__seq li + li::before {
  content: ""; width: 28px; height: 1px; background: var(--sk-line-strong);
}
.sk-hero__seq .n {
  font-family: var(--sk-mono); font-style: normal; font-size: 10px; letter-spacing: .1em;
  color: var(--sk-muted); margin-right: 6px; vertical-align: super;
}
.sk-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 32px; }

.sk-hero__media { position: relative; margin: 0; }
.sk-hero__frame {
  position: relative; overflow: hidden; aspect-ratio: 1 / 1; max-height: calc(100vh - 220px); width: 100%; background: var(--sk-bg-2);
}
.sk-hero__frame img {
  position: absolute; inset: -6% 0; width: 100%; height: 112%;
  object-fit: cover; will-change: transform;
}
.sk-hero__caption {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 14px;
  font-family: var(--sk-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sk-muted);
}

/* Product stills — jump links to each step */
.sk-stills {
  display: grid; grid-template-columns: repeat(var(--sk-count, 3), minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
  margin: clamp(56px, 7vw, 96px) 0 0; padding: 0; list-style: none;
}
.sk-stills a { display: block; }
/* Two-product kits (Recovery): wider, shorter frames */
.sk-stills li:first-child:nth-last-child(2) figure,
.sk-stills li:first-child:nth-last-child(2) ~ li figure { aspect-ratio: 5 / 4; }
.sk-stills figure { margin: 0; overflow: hidden; aspect-ratio: 3 / 4; background: var(--sk-bg-2); }
.sk-stills img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--sk-ease);
}
.sk-stills a:hover img { transform: scale(1.035); }
.sk-stills .meta {
  display: flex; align-items: baseline; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--sk-line); margin-top: 14px;
}
.sk-stills .n { font-family: var(--sk-mono); font-size: 11px; color: var(--sk-muted); }
.sk-stills .name { font-family: var(--sk-serif); font-size: clamp(15px, 1.4vw, 19px); line-height: 1.25; }
.sk-stills .verb {
  margin-left: auto; font-family: var(--sk-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sk-accent);
}

/* =============================================================
   3. Sequence — sticky progress + chapters
   ============================================================= */
.sk-seq { background: var(--sk-paper); border-top: 1px solid var(--sk-line); }
.sk-seq__head {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(24px, 5vw, 88px); align-items: end;
  padding: clamp(72px, 9vw, 136px) 0 clamp(48px, 6vw, 88px);
}
.sk-seq__head h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.04; margin-top: 20px; }
.sk-seq__head p { font-size: 17px; font-weight: 300; color: var(--sk-ink-2); max-width: 36em; }

.sk-seq__body {
  display: grid; grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  padding-bottom: clamp(56px, 7vw, 120px);
}

/* Progress rail */
.sk-progress {
  position: sticky; top: calc(var(--sk-nav) + 40px); align-self: start;
  display: grid; grid-template-columns: 1px 1fr; gap: 0 20px;
}
.sk-progress__track { position: relative; background: var(--sk-line); }
.sk-progress__fill {
  position: absolute; left: 0; top: 0; width: 1px; height: 100%;
  background: var(--sk-ink); transform-origin: top; transform: scaleY(var(--sk-p, 0));
}
.sk-progress ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sk-progress a {
  display: grid; grid-template-columns: 26px 1fr; align-items: baseline;
  padding: 12px 0; color: var(--sk-muted); transition: color .3s;
}
.sk-progress .n { font-family: var(--sk-mono); font-size: 10px; letter-spacing: .08em; }
.sk-progress .v { font-family: var(--sk-serif); font-size: 19px; line-height: 1.2; transition: transform .4s var(--sk-ease); }
.sk-progress a:hover { color: var(--sk-ink); }
.sk-progress a[aria-current="step"] { color: var(--sk-ink); }
.sk-progress a[aria-current="step"] .v { font-weight: 600; }
.sk-progress__count {
  grid-column: 2; margin-top: 22px;
  font-family: var(--sk-mono); font-size: 10px; letter-spacing: .16em; color: var(--sk-muted);
}

/* Chapter */
.sk-step {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4.5vw, 80px);
  padding: clamp(40px, 5vw, 72px) 0;
  border-top: 1px solid var(--sk-line);
  scroll-margin-top: calc(var(--sk-nav) + 8px);
}
.sk-step:first-child { border-top: 0; padding-top: 0; }
.sk-step:focus { outline: none; }   /* focused programmatically from the rail */
.sk-step__media {
  position: sticky; top: calc(var(--sk-nav) + 40px); align-self: start; margin: 0;
}
.sk-step__frame { position: relative; overflow: hidden; aspect-ratio: 3 / 4; max-height: calc(100vh - var(--sk-nav) - 120px); width: 100%; background: var(--sk-bg-2); }
.sk-step__frame img { width: 100%; height: 100%; object-fit: cover; }
.sk-step__media figcaption {
  display: flex; justify-content: space-between; margin-top: 14px;
  font-family: var(--sk-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sk-muted);
}

.sk-step__verb {
  font-family: var(--sk-serif); font-weight: 200;
  font-size: clamp(56px, 7vw, 104px); line-height: .95; letter-spacing: -.05em;
  color: var(--sk-ink); margin: 0 0 28px;
}
.sk-step__index { margin: 0 0 14px; }
.sk-step__title { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.08; margin: 0; }
.sk-step__title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--sk-ease); }
.sk-step__title a:hover { background-size: 100% 1px; }
.sk-step__tag {
  font-family: var(--sk-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sk-ink-2); margin: 12px 0 0;
}
.sk-step__role {
  display: inline-block; margin: 28px 0 0; padding: 6px 12px;
  border: 1px solid var(--sk-line-strong);
  font-family: var(--sk-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sk-accent);
}
.sk-step__summary {
  font-family: var(--sk-serif); font-weight: 300; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45;
  color: var(--sk-ink); margin: 20px 0 0; max-width: 32em;
}
.sk-step__copy { font-size: 16px; font-weight: 300; color: var(--sk-ink-2); margin: 24px 0 0; max-width: 38em; }

/* Ingredient ledger (formerly chips) */
.sk-ingr { margin: 44px 0 0; }
.sk-page .sk-ingr__title {
  font-family: var(--sk-mono); font-weight: 400; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sk-muted); padding-bottom: 12px; border-bottom: 1px solid var(--sk-ink); margin: 0;
}
.sk-ingr ul { list-style: none; margin: 0; padding: 0; }
.sk-ingr li {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 16px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--sk-line);
}
.sk-ingr .cn { font-size: 15px; color: var(--sk-ink); }
.sk-ingr .cv { font-family: var(--sk-mono); font-size: 12px; color: var(--sk-accent); letter-spacing: .04em; }
.sk-ingr .cf { font-size: 13px; color: var(--sk-muted); text-align: right; }

/* Big number (Pore Care — 20%) */
.sk-bignum {
  font-family: var(--sk-serif); font-weight: 200; font-size: clamp(72px, 9vw, 140px);
  line-height: .9; letter-spacing: -.05em; color: var(--sk-ink); margin: 0 0 24px;
}
.sk-bignum small {
  display: block; margin-top: 14px; font-family: var(--sk-mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sk-accent);
}

/* Active stack (Whitening — four actives) */
.sk-stack {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 36px 0 0; border-top: 1px solid var(--sk-ink); border-bottom: 1px solid var(--sk-line);
}
.sk-stack > div { padding: 18px 12px 16px 0; }
.sk-stack > div + div { padding-left: 16px; border-left: 1px solid var(--sk-line); }
.sk-stack .sv { font-family: var(--sk-serif); font-weight: 300; font-size: clamp(30px, 3vw, 44px); line-height: 1; }
.sk-stack .sn { display: block; margin-top: 8px; font-size: 12px; color: var(--sk-muted); }

/* Science note */
.sk-science {
  margin: 44px 0 0; padding: clamp(24px, 3vw, 40px);
  background: var(--sk-bg); border-left: 1px solid var(--sk-ink);
}
.sk-science p.st { margin: 0 0 14px; font-size: 11px; color: var(--sk-accent); }
.sk-science h4 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; margin: 0 0 14px; }
.sk-science p { font-size: 15px; font-weight: 300; color: var(--sk-ink-2); margin: 0; }
.sk-science p + p { margin-top: 12px; }

.sk-verified {
  display: flex; align-items: flex-start; gap: 12px; margin: 28px 0 0;
  font-family: var(--sk-mono); font-size: 11px; letter-spacing: .08em; line-height: 1.6;
  color: var(--sk-muted); text-transform: uppercase;
}
.sk-verified::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: .45em;
  border: 1px solid var(--sk-accent); border-radius: 50%; background: var(--sk-accent);
}
.sk-step__cta { margin: 36px 0 0; }

/* =============================================================
   4. Collection gallery — four kits
   ============================================================= */
.sk-collection { padding: clamp(80px, 10vw, 152px) 0; border-top: 1px solid var(--sk-line); }
.sk-collection__head {
  display: flex; justify-content: space-between; align-items: end; gap: 32px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.sk-collection__head h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.04; margin-top: 18px; max-width: 12em; }
.sk-collection__head p { color: var(--sk-ink-2); font-weight: 300; max-width: 26em; margin: 0; }
.sk-collection__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px);
}
.sk-kit a { display: flex; flex-direction: column; height: 100%; }
.sk-kit figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--sk-bg-2); }
.sk-kit img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sk-ease), filter .6s; }
.sk-kit a:hover img { transform: scale(1.04); }
.sk-kit .meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.sk-kit .n { font-family: var(--sk-mono); font-size: 11px; color: var(--sk-muted); }
.sk-kit .now {
  font-family: var(--sk-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sk-accent);
}
.sk-kit h3 { font-size: clamp(22px, 2vw, 30px); line-height: 1.1; margin: 10px 0 0; }
.sk-kit .seq {
  font-family: var(--sk-serif); font-weight: 300; font-size: 16px;
  color: var(--sk-ink-2); margin: 10px 0 22px;
}
.sk-kit .sk-link { margin-top: auto; align-self: flex-start; }
.sk-kit a:hover .sk-link { gap: 20px; color: var(--sk-accent); border-color: var(--sk-accent); }
.sk-kit[aria-current="true"] img { filter: grayscale(.25); }

/* =============================================================
   5. Close + note
   ============================================================= */
.sk-close { background: var(--sk-night); color: var(--sk-ink); border-top: 1px solid var(--sk-line); padding: clamp(88px, 11vw, 168px) 0; text-align: center; }
.sk-close h2 { font-size: clamp(40px, 6.4vw, 96px); line-height: 1; margin: 0 0 28px; color: var(--sk-ink); }
.sk-close h2 em { color: var(--sk-accent); }
.sk-close p { max-width: 36em; margin: 0 auto 44px; font-weight: 300; font-size: 17px; color: var(--sk-ink-2); }
.sk-close ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--sk-mono); font-size: 12px; letter-spacing: .08em; color: var(--sk-ink-2);
}
.sk-close li { display: inline-flex; align-items: baseline; gap: 10px; }
.sk-close li .n { font-size: 10px; color: var(--sk-muted); }

.sk-note { padding: 40px 0 72px; }
.sk-note p { max-width: 62em; font-size: 12px; font-weight: 300; line-height: 1.75; color: var(--sk-muted); margin: 0; }

/* =============================================================
   Motion — only when html.sk-motion is present
   ============================================================= */
.sk-motion .sk-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .9s var(--sk-ease), transform .9s var(--sk-ease);
}
.sk-motion .sk-reveal.is-in { opacity: 1; transform: none; }
.sk-motion .sk-reveal[data-delay="1"] { transition-delay: .08s; }
.sk-motion .sk-reveal[data-delay="2"] { transition-delay: .16s; }
.sk-motion .sk-reveal[data-delay="3"] { transition-delay: .24s; }

.sk-motion .sk-step__frame img {
  transform: scale(1.06); transition: transform 1.6s var(--sk-ease);
}
.sk-motion .sk-step.is-in .sk-step__frame img { transform: scale(1); }

/* Ingredient rows draw in one after another */
.sk-motion .sk-ingr li { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--sk-ease), transform .6s var(--sk-ease); }
.sk-motion .sk-ingr.is-in li { opacity: 1; transform: none; }
.sk-motion .sk-ingr.is-in li:nth-child(2) { transition-delay: .06s; }
.sk-motion .sk-ingr.is-in li:nth-child(3) { transition-delay: .12s; }
.sk-motion .sk-ingr.is-in li:nth-child(4) { transition-delay: .18s; }
.sk-motion .sk-ingr.is-in li:nth-child(5) { transition-delay: .24s; }
.sk-motion .sk-ingr.is-in li:nth-child(6) { transition-delay: .30s; }

.sk-motion .sk-progress__fill { transition: transform .25s linear; }

@media (prefers-reduced-motion: reduce) {
  .sk-page *, .sk-page *::before, .sk-page *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
  .sk-hero__frame img { transform: none !important; }
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 1180px) {
  /* Collection becomes a horizontal snap gallery */
  .sk-collection__list {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(260px, 38%);
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px;
    scrollbar-width: thin; scrollbar-color: var(--sk-line-strong) transparent;
  }
  .sk-kit { scroll-snap-align: start; }
}

@media (max-width: 960px) {
  .sk-hero__grid { grid-template-columns: 1fr; }
  .sk-hero__media { order: -1; }
  .sk-hero__frame { aspect-ratio: 4 / 3; }
  .sk-seq__head { grid-template-columns: 1fr; }

  /* Rail → sticky horizontal stepper */
  .sk-seq__body { grid-template-columns: 1fr; gap: 0; }
  .sk-progress {
    top: var(--sk-nav); z-index: 5;
    display: block; margin: 0 calc(var(--sk-gutter) * -1); padding: 0 var(--sk-gutter);
    background: var(--sk-paper); border-bottom: 1px solid var(--sk-line);
  }
  .sk-progress ol { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
  .sk-progress a { grid-template-columns: auto 1fr; gap: 8px; padding: 14px 0 12px; }
  .sk-progress .v { font-size: 16px; }
  .sk-progress__track { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
  .sk-progress__fill { width: 100%; height: 2px; transform-origin: left; transform: scaleX(var(--sk-p, 0)); }
  .sk-progress__count { display: none; }

  .sk-step { grid-template-columns: 1fr; gap: 28px; scroll-margin-top: calc(var(--sk-nav) + 56px); }
  .sk-step:first-child { padding-top: 40px; }
  .sk-step__media { position: static; }
  .sk-step__frame { aspect-ratio: 4 / 5; max-height: none; }
}

@media (max-width: 640px) {
  .sk-index .sk-wrap { gap: 18px; }
  .sk-index__label { display: none; }
  .sk-hero__frame { aspect-ratio: 1 / 1; }
  .sk-stills { grid-template-columns: repeat(var(--sk-count, 3), minmax(0, 1fr)); gap: 10px; }
  .sk-stills .meta { flex-direction: column; gap: 4px; }
  .sk-stills .name { font-size: 13px; }
  .sk-stills .verb { margin-left: 0; }
  .sk-progress .n { display: none; }
  .sk-progress a { grid-template-columns: 1fr; text-align: center; }
  .sk-progress .v { font-size: 15px; }
  .sk-ingr li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .sk-ingr .cf { grid-column: 1 / -1; text-align: left; }
  .sk-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-stack > div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--sk-line); }
  .sk-stack > div:nth-child(4) { border-top: 1px solid var(--sk-line); }
  .sk-collection__head { flex-direction: column; align-items: flex-start; }
  /* Mobile: vertical list, no horizontal scroll */
  .sk-collection__list {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr;
    overflow: visible; scroll-snap-type: none; gap: 0; padding: 0;
  }
  .sk-kit { border-top: 1px solid var(--sk-line); padding: 20px 0; }
  .sk-kit:last-child { border-bottom: 1px solid var(--sk-line); }
  .sk-kit a { display: grid; grid-template-columns: 112px 1fr; gap: 0 18px; align-items: start; }
  .sk-kit figure { grid-row: 1 / span 4; aspect-ratio: 4 / 5; }
  .sk-kit .meta { margin-top: 0; }
  .sk-kit h3 { margin-top: 6px; }
  .sk-kit .seq { margin: 6px 0 12px; font-size: 15px; }
  .sk-kit .sk-link { justify-self: start; }
}

/* Site chrome on mobile — mirrors the max-width:768px nav/footer rules in
   styles/pages.css, which the set pages don't load (without this the
   desktop nav links overlap the logo on phones). */
@media (max-width: 768px) {
  .sk-page .nav__links,
  .sk-page .nav__right { display: none; }
  .sk-page .nav__menu-btn {
    display: flex !important; align-items: center; gap: 8px;
    font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500;
    color: var(--fg);
  }
  .sk-page .nav { justify-content: space-between; }
  .sk-page .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
}

/* =============================================================
   Kit moods — one palette per kit (hub chapters + kit pages)
   home: warm ivory / champagne · recovery: sage
   pore: cool grey / blue        · whitening: pearl / lavender
   Evening tones; all text tokens stay ≥5.3:1 on bg and paper.
   ============================================================= */
[data-mood="home"]      { --mood-bg: #221d17; --mood-paper: #2c251d; --mood-deep: #3a3026; --mood-accent: #dcbf91; }
[data-mood="recovery"]  { --mood-bg: #18201b; --mood-paper: #202a23; --mood-deep: #2b3a30; --mood-accent: #aecaa9; }
[data-mood="pore"]      { --mood-bg: #171c22; --mood-paper: #1f262e; --mood-deep: #2b3540; --mood-accent: #aac1d8; }
[data-mood="whitening"] { --mood-bg: #1e1b24; --mood-paper: #27222f; --mood-deep: #352e40; --mood-accent: #c9bce6; }

/* Kit pages: see "Kit pages — studio gradient" at the end of the file. */

/* =============================================================
   Hub page (sets/index.html) — "The Ritual Index"
   ============================================================= */
a.sk-index__label { transition: color .25s; }
a.sk-index__label:hover, a.sk-index__label[aria-current="page"] { color: var(--sk-ink); }
.sk-collection__all { margin-top: 20px; }
.sk-btn--go::after { content: "\2192"; }

/* ---- Hero: split screen ---- */
.ri-hero {
  /* One canvas, diagonal: black confined to the top-left ~20% of the ramp
     (deep core in the first 6%), then cool silver to the bottom-right.
     Mostly-silver surface → black type; the text block starts low enough
     that the title never sits on the dark core. */
  --sk-ink: #111110; --sk-ink-2: #1f1e1c; --sk-muted: #3d3b38;
  --sk-line: rgba(17, 17, 16, .18); --sk-accent: #111110; --sk-paper: #f4f3f1;
  color: var(--sk-ink);
  background: linear-gradient(to bottom right, #0c0b0a 0%, #1d1e20 6%, #6e7276 12%, #9ea2a7 20%, #c3c7cb 38%, #d9dce0 70%, #e6e8eb 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  min-height: calc(100vh - var(--sk-nav) - 57px);
  border-bottom: 1px solid var(--sk-line);
}
.ri-hero__text {
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: clamp(48px, 5vw, 80px) clamp(28px, 4vw, 64px) clamp(28px, 3vw, 44px) max(var(--sk-gutter), calc((100vw - var(--sk-max)) / 2 + var(--sk-gutter)));
}
.ri-hero__title {
  font-size: clamp(52px, 5.8vw, 104px); line-height: .92; letter-spacing: -.05em;
  margin: 18px 0 0;
}
.ri-hero__lede { font-size: clamp(16px, 1.2vw, 18px); font-weight: 300; color: var(--sk-ink-2); max-width: 30em; margin: 22px 0 0; }
.ri-hero__cta { margin: 26px 0 0; }

.ri-index .sk-eyebrow { margin: 0 0 12px; }
.ri-index ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sk-ink); }
.ri-index a {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 14px; gap: 14px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--sk-line); transition: padding .35s var(--sk-ease), background .35s;
}
.ri-index a:hover { padding-left: 10px; background: rgba(255, 255, 255, .45); }   /* light lift on the silver hero */
.ri-index .n { font-size: 11px; font-weight: 500; color: var(--sk-muted); }
.ri-index .name { font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; letter-spacing: -.02em; }
.ri-index .seq { font-size: 13px; font-weight: 300; color: var(--sk-ink-2); }
.ri-index .swatch, .swatch {
  width: 10px; height: 10px; border-radius: 50%; align-self: center;
  background: var(--mood-deep); box-shadow: inset 0 0 0 1px var(--mood-accent);
}

/* Right: the four kit photos as a 2×2 grid placed on the same canvas —
   inset with the text column's top/bottom rhythm, not a separate panel. */
.ri-hero__visual {
  position: relative; overflow: hidden; background: transparent;
  padding: clamp(32px, 3.4vw, 56px) clamp(16px, 2vw, 32px) clamp(28px, 3vw, 44px) 0;
}
/* Kit cut-outs (transparent WebP, images/hub/kit-*.webp) as a justified
   gallery: two per row, each item's flex-grow = its aspect ratio (--ar),
   so both photos in a row share one height and nothing is cropped
   (the wide Pore Care tray takes more width). The ::before spacer forces
   the break after item 02. */
.ri-comp {
  list-style: none; margin: 0; padding: 0; height: 100%;
  display: flex; flex-wrap: wrap; align-content: center;
  gap: clamp(14px, 1.6vw, 24px) clamp(10px, 1vw, 16px);
}
.ri-comp::before { content: ""; order: 2; flex-basis: 100%; height: 0; margin-top: calc(clamp(14px, 1.6vw, 24px) * -1); }
.ri-comp li:nth-child(-n+2) { order: 1; }
.ri-comp li:nth-child(n+3) { order: 3; }
.ri-comp li { flex: var(--ar, 1.5) 1 0; min-width: 0; }
.ri-comp a { display: block; }
.ri-comp figure { position: relative; margin: 0; aspect-ratio: var(--ar, 1.5); background: transparent; }
.ri-comp figcaption { z-index: 2; }
.ri-comp img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transition: transform 1.2s var(--sk-ease);
}
.ri-comp a:hover img { transform: scale(1.04); }
.ri-comp figcaption {
  position: absolute; left: 0; bottom: 0; display: flex; gap: 8px; align-items: baseline;
  padding: 7px 12px 7px 10px; background: rgba(250, 250, 249, .9); color: #111110;
  font-size: 12px; font-weight: 500; letter-spacing: -.01em;
}
.ri-comp figcaption .n { font-size: 10px; color: #3d3b38; }

/* ---- Chapters ---- */
.ri-chapters { position: relative; }
/* Holder spans the whole chapters section; the rail sticks inside it,
   so it releases exactly when the last chapter ends. */
.ri-rail-holder { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.ri-rail-holder > .sk-wrap { height: 100%; }
.ri-rail { position: sticky; top: calc(var(--sk-nav) + 48px); width: 170px; pointer-events: auto; }
.ri-rail .v { font-size: 17px; white-space: nowrap; }

.sk-step.ri-chapter {
  display: block; padding: 0; border: 0; gap: 0;
  background: var(--mood-bg); --sk-accent: var(--mood-accent);
  scroll-margin-top: var(--sk-nav);
}
.ri-chapter__grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 96px); align-items: center;
  min-height: calc(100vh - var(--sk-nav));
  padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px);
  padding-left: calc(var(--sk-gutter) + 170px);
}
.ri-chapter__visual { position: relative; }
/* Single product photo fills the column width; height follows the viewport. */
.ri-main { margin: 0; overflow: hidden; background: var(--mood-deep); width: 100%; height: min(calc(100vh - var(--sk-nav) - 120px), 780px); }
.ri-main img { width: 100%; height: 100%; object-fit: cover; }

.ri-chapter__num {
  margin: 0 0 8px; font-size: clamp(88px, 10vw, 168px); font-weight: 100; line-height: .8;
  letter-spacing: -.06em; color: var(--mood-accent);
}
.ri-chapter__meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0;
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sk-muted);
}
.ri-chapter__meta span + span { color: var(--mood-accent); }
.ri-chapter__title { font-size: clamp(38px, 4.2vw, 68px); line-height: 1; margin: 16px 0 0; }
.ri-chapter__title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .45s var(--sk-ease); }
.ri-chapter__title a:hover { background-size: 100% 2px; }
.ri-chapter__quote { font-size: clamp(19px, 1.6vw, 24px); font-weight: 300; line-height: 1.3; letter-spacing: -.02em; color: var(--sk-ink-2); margin: 20px 0 0; }
.ri-chapter__quote em { font-weight: 500; color: var(--mood-accent); }
.ri-chapter__lede { font-size: 15px; font-weight: 300; color: var(--sk-ink-2); margin: 14px 0 0; max-width: 34em; }

/* Sequence line — nodes on a rule */
.ri-seqline { margin: 32px 0 0; }
.ri-seqline .sk-eyebrow { margin: 0 0 18px; color: var(--sk-muted); }
.ri-seqline ol {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 18px;
}
.ri-seqline ol::before {
  content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--sk-ink);
  transform-origin: left;
}
.ri-seqline li { position: relative; padding-top: 24px; display: flex; flex-direction: column; gap: 6px; }
.ri-seqline li::before {
  transition: background-color .35s var(--sk-ease), transform .35s var(--sk-ease);
  content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%;
  background: var(--mood-bg); border: 1px solid var(--sk-ink);
}
/* Current-step marker. Without JS the first node is filled; with JS a
   separate dot (.ri-seqline__dot) glides along the line to the next node
   every second (signature-kit.js positions it from each node's offset). */
.ri-seqline ol:not(.is-cycling) li:first-child::before { background: var(--sk-ink); transform: scale(1.25); }
.ri-seqline__dot {
  position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none;
  width: 11px; height: 11px; border-radius: 50%; background: var(--sk-ink);
  transform: translate3d(0, 0, 0) scale(1.25);
}
.ri-seqline__dot.is-ready { transition: transform .7s cubic-bezier(.65, 0, .35, 1); }
.ri-seqline .n { font-size: 10px; font-weight: 500; color: var(--sk-muted); }
.ri-seqline .verb { font-size: clamp(22px, 2vw, 30px); font-weight: 300; line-height: 1; letter-spacing: -.03em; }
.ri-seqline a { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--sk-ink); }
.ri-seqline .prod { line-height: 1.35; }
.ri-seqline .go { font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mood-accent); }
.ri-seqline a:hover .prod { text-decoration: underline; text-underline-offset: 3px; }
.ri-chapter__cta { margin: 32px 0 0; }

/* Chapter motion */
.sk-motion .ri-main img { transform: scale(1.06); transition: transform 1.6s var(--sk-ease); }
.sk-motion .ri-chapter__text > * { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--sk-ease), transform .8s var(--sk-ease); }
.sk-motion .ri-chapter__text > :nth-child(2) { transition-delay: .05s; }
.sk-motion .ri-chapter__text > :nth-child(3) { transition-delay: .1s; }
.sk-motion .ri-chapter__text > :nth-child(4) { transition-delay: .15s; }
.sk-motion .ri-chapter__text > :nth-child(5) { transition-delay: .2s; }
.sk-motion .ri-chapter__text > :nth-child(6) { transition-delay: .25s; }
.sk-motion .ri-chapter__text > :nth-child(7) { transition-delay: .3s; }
.sk-motion .ri-seqline ol::before { transform: scaleX(0); transition: transform 1.2s var(--sk-ease) .35s; }
.sk-motion .ri-chapter.is-in .ri-main img,
.sk-motion .ri-chapter.is-in .ri-chapter__text > * { opacity: 1; transform: none; }
.sk-motion .ri-chapter.is-in .ri-seqline ol::before { transform: scaleX(1); }

/* ---- At a glance (compare table) ---- */
.sk-glance { padding: clamp(80px, 10vw, 152px) 0; border-top: 1px solid var(--sk-line); }
.sk-glance__head h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.04; margin: 18px 0 clamp(32px, 4vw, 56px); }
.sk-glance table { width: 100%; border-collapse: collapse; }
.sk-glance thead th {
  text-align: left; font-weight: 500; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sk-muted);
  padding: 0 16px 14px 0; border-bottom: 1px solid var(--sk-ink);
}
.sk-glance tbody th, .sk-glance td {
  text-align: left; vertical-align: top; padding: 24px 16px 24px 0; border-bottom: 1px solid var(--sk-line);
}
.sk-glance tbody th { font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; letter-spacing: -.03em; }
.sk-glance tbody th a { display: inline-flex; align-items: center; gap: 10px; }
.sk-glance tbody th .n { font-size: 11px; font-weight: 500; color: var(--sk-muted); letter-spacing: 0; }
.sk-glance tbody th a:hover { color: var(--mood-accent); }
.sk-glance__num { font-weight: 200; font-size: 34px; line-height: 1; }
.sk-glance__seq { font-weight: 300; font-size: 18px; color: var(--sk-ink-2); }
.sk-glance td ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sk-glance td li a { font-size: 14px; color: var(--sk-ink-2); }
.sk-glance td li a:hover { color: var(--sk-ink); text-decoration: underline; text-underline-offset: 4px; }

.sk-close__kits a { display: inline-flex; gap: 10px; align-items: baseline; color: var(--sk-ink-2); transition: color .25s; }
.sk-close__kits a:hover { color: var(--sk-ink); }
.sk-close a:focus-visible { outline-color: var(--sk-ink); }

/* ---- Responsive ---- */
@media (max-width: 1180px) {
  .ri-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ri-index .seq { display: none; }
  .ri-index a { grid-template-columns: 30px minmax(0, 1fr) 14px; }
}
@media (max-width: 960px) {
  .ri-hero { grid-template-columns: 1fr; min-height: 0;
    background: linear-gradient(to bottom right, #0c0b0a 0%, #1d1e20 6%, #6e7276 12%, #9ea2a7 20%, #c3c7cb 38%, #d9dce0 70%, #e6e8eb 100%); }
  .ri-hero__text { padding: 40px var(--sk-gutter) 48px; gap: 40px; }
  .ri-index .seq { display: block; }
  .ri-index a { grid-template-columns: 30px minmax(0, 1fr) auto 14px; }
  .ri-hero__visual { padding: 0 var(--sk-gutter) 48px; }
  .ri-comp { height: auto; }

  /* Rail → sticky horizontal stepper */
  .ri-rail-holder { position: sticky; inset: auto; height: auto; top: var(--sk-nav); pointer-events: auto; background: var(--sk-paper); border-bottom: 1px solid var(--sk-line); }
  .ri-rail .v { white-space: normal; }
  .ri-rail-holder > .sk-wrap { height: auto; }
  .ri-rail { position: static; width: auto; border-bottom: 0; margin: 0; padding: 0; background: transparent; }
  .ri-chapter__grid { grid-template-columns: 1fr; min-height: 0; padding-left: var(--sk-gutter); gap: 36px; padding-top: 48px; padding-bottom: 64px; }
  .ri-main { height: auto; aspect-ratio: 4 / 5; }
  .ri-chapter__num { font-size: 88px; }
  .sk-step.ri-chapter { scroll-margin-top: calc(var(--sk-nav) + 52px); }
}
@media (max-width: 640px) {
  .ri-hero__title { font-size: clamp(48px, 15vw, 72px); }
  .ri-index .seq { display: none; }
  .ri-index a { grid-template-columns: 26px minmax(0, 1fr) 14px; }
  .sk-hub-page .sk-progress .v { font-size: 12px; line-height: 1.25; letter-spacing: 0; }
  .sk-hub-page .sk-progress ol { gap: 4px; }
  /* Sequence line becomes vertical */
  .ri-seqline ol { grid-template-columns: 1fr; gap: 0; padding-left: 24px; }
  .ri-seqline ol::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; transform-origin: top; }
  .sk-motion .ri-seqline ol::before { transform: scaleY(0); }
  .sk-motion .ri-chapter.is-in .ri-seqline ol::before { transform: scaleY(1); }
  .ri-seqline li { padding: 0 0 18px; display: grid; grid-template-columns: 22px auto; column-gap: 8px; align-items: baseline; }
  .ri-seqline li::before { left: -24px; top: 4px; }
  .ri-seqline__dot { left: -24px; top: 4px; }
  .ri-seqline li .n { grid-row: 1; }
  .ri-seqline li a { grid-column: 2; }
  .ri-seqline .verb { font-size: 24px; }
  /* Table → stacked rows */
  .sk-glance thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sk-glance table, .sk-glance tbody, .sk-glance tr, .sk-glance tbody th, .sk-glance td { display: block; }
  .sk-glance tr { padding: 20px 0; border-bottom: 1px solid var(--sk-line); }
  .sk-glance tr:first-child { border-top: 1px solid var(--sk-ink); }
  .sk-glance tbody th, .sk-glance td { border: 0; padding: 4px 0; }
  .sk-glance tbody th { margin-bottom: 8px; }
  .sk-glance td { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: baseline; }
  .sk-glance td::before {
    content: attr(data-label); font-style: normal; font-weight: 500; font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--sk-muted);
  }
  .sk-glance__num { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ri-comp a:hover img, .ri-index a:hover { transform: none; }
}

/* Site nav keeps the shared light style (identical to every other page);
   only the footer tone follows the evening palette. */
.sk-page #set-shared-footer { --dark: var(--sk-night); }

/* Soften studio-white product photos so they sit in the evening light. */
.sk-page :is(.ri-main, .ri-comp figure, .sk-step__frame, .sk-stills figure, .sk-hero__frame, .sk-kit figure) img {
  filter: brightness(.93) contrast(1.03);
}

/* =============================================================
   Kit chapters — studio light, the same layered glow as the /global
   scrollytelling (styles/site.css .scrolly-bg) frozen at rest, tinted per
   kit: home silver · recovery sage · pore cool blue-grey · whitening T.A.M
   blush. Light surfaces → all-black type (≥9:1 on the darkest tone).
   ============================================================= */
.ri-chapter[data-mood] {
  --sk-ink: #111110; --sk-ink-2: #111110; --sk-muted: #2b2a28;
  --sk-paper: #f4f3f1; --sk-line: rgba(17, 17, 16, .18);
  --mood-accent: #111110;
  color: var(--sk-ink);
  background:
    radial-gradient(ellipse 65% 65% at 22% 28%, rgba(255, 255, 255, 1), transparent 62%),
    radial-gradient(ellipse 58% 58% at 78% 32%, var(--st-2), transparent 64%),
    radial-gradient(ellipse 64% 64% at 26% 78%, var(--st-3), transparent 62%),
    radial-gradient(ellipse 60% 60% at 74% 74%, var(--st-4), transparent 64%),
    linear-gradient(180deg, var(--st-top), var(--st-bottom));
}
.ri-chapter[data-mood="home"],
.sk-page[data-mood="home"] {
  --st-2: rgba(240, 243, 246, .95); --st-3: rgba(210, 215, 220, .9); --st-4: rgba(180, 186, 192, .9);
  --st-top: #ecedf0; --st-bottom: #c4c8cc; --mood-bg: #e6e8eb; --mood-deep: #cfd3d7;
}
.ri-chapter[data-mood="recovery"],
.sk-page[data-mood="recovery"] {
  --st-2: rgba(237, 243, 236, .95); --st-3: rgba(205, 217, 204, .9); --st-4: rgba(170, 187, 170, .9);
  --st-top: #ebf0ea; --st-bottom: #c2cec1; --mood-bg: #e4ebe3; --mood-deep: #ccd8cb;
}
.ri-chapter[data-mood="pore"],
.sk-page[data-mood="pore"] {
  --st-2: rgba(236, 241, 247, .95); --st-3: rgba(203, 213, 225, .9); --st-4: rgba(168, 182, 199, .9);
  --st-top: #ebeff4; --st-bottom: #c0c9d4; --mood-bg: #e3e8ee; --mood-deep: #cbd3dd;
}
/* Whitening: T.A.M Derma Bright blush — tones sampled from the T.A.M
   product photo (#f8eae1 backdrop, #e8d9d1 bottle, #decebf shadow). */
.ri-chapter[data-mood="whitening"],
.sk-page[data-mood="whitening"] {
  --st-2: rgba(250, 238, 230, .95); --st-3: rgba(232, 214, 204, .9); --st-4: rgba(214, 190, 176, .9);
  --st-top: #f8ece4; --st-bottom: #dcc6b8; --mood-bg: #f3e6dd; --mood-deep: #e8d9d1;
}
.ri-chapter[data-mood] .ri-chapter__quote em { font-weight: 600; }   /* black accent → weight carries the emphasis */

/* Desktop rail floats over the (now all light) chapters: dark ink while any
   chapter is active (signature-kit.js sets data-on). */
@media (min-width: 961px) {
  .ri-rail[data-on]:not([data-on=""]) {
    --sk-ink: #111110; --sk-muted: #3a3835; --sk-line: rgba(17, 17, 16, .2);
  }
}

/* The sequence dot glide is an explicitly requested, small and slow motion,
   so it keeps its transition under reduced motion (the global reduced-motion
   rule above would otherwise make it jump). */
@media (prefers-reduced-motion: reduce) {
  .sk-page .ri-seqline__dot.is-ready { transition-duration: .7s !important; }
}

/* =============================================================
   Kit pages — studio gradient (same tinted layered light as the hub
   chapters: home silver · recovery sage · pore blue-grey · whitening
   T.A.M blush), fixed behind the page; black type. The closing panel
   and footer stay dark as the page's end note.
   ============================================================= */
.sk-page[data-mood] {
  --sk-ink: #111110; --sk-ink-2: #1f1e1c; --sk-muted: #3d3b38;   /* ≥6:1 on the darkest tint */
  --sk-line: rgba(17, 17, 16, .16); --sk-line-strong: rgba(17, 17, 16, .32);
  --sk-accent: #111110;
  --sk-bg: rgba(255, 255, 255, .42);      /* translucent panels (index bar, science note) */
  --sk-bg-2: rgba(255, 255, 255, .3);     /* image placeholders */
  --sk-paper: #f4f3f1;                    /* opaque: mobile sticky stepper */
  color-scheme: light;
  color: var(--sk-ink);
  background:
    radial-gradient(ellipse 65% 65% at 22% 28%, rgba(255, 255, 255, 1), transparent 62%),
    radial-gradient(ellipse 58% 58% at 78% 32%, var(--st-2), transparent 64%),
    radial-gradient(ellipse 64% 64% at 26% 78%, var(--st-3), transparent 62%),
    radial-gradient(ellipse 60% 60% at 74% 74%, var(--st-4), transparent 64%),
    linear-gradient(180deg, var(--st-top), var(--st-bottom));
  background-attachment: fixed;
}
.sk-page[data-mood] .sk-seq { background: transparent; }
.sk-page[data-mood] .sk-progress { --sk-paper: rgba(244, 243, 241, .96); }
.sk-page[data-mood] .sk-close {
  --sk-ink: #f1ebe2; --sk-ink-2: #cdc4b8; --sk-muted: #a39a8e; --sk-accent: #d2b48a;
  --sk-line: #3a342d;
}


/* Hero title — stronger presence on the silver ground. */
.sk-page .ri-hero__title { color: #000; font-weight: 700; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.sk-page .ri-hero__title em { color: #000; font-weight: 400; }

/* Phones: one kit cut-out per row, full width; smaller caption chip. */
@media (max-width: 640px) {
  .ri-comp::before { display: none; }
  .ri-comp li { flex: 1 1 100%; }
  .ri-comp figcaption { font-size: 11px; padding: 5px 9px 5px 8px; }
}

/* =============================================================
   Hero kit focus (hover / keyboard focus, pointer devices only).
   signature-kit.js builds .ri-stage from the four gallery photos.
   Hover a kit → it zooms up from its grid cell to fill the panel and
   the grid fades back; hover another kit while zoomed → the new one
   glides in from the right as the current one exits left; leave →
   back to the four-kit grid. The grid stays as the (invisible) hit
   area while zoomed, so moving across it switches kits.
   ============================================================= */
.ri-stage {
  position: absolute; z-index: 2; pointer-events: none;
  inset: clamp(32px, 3.4vw, 56px) clamp(16px, 2vw, 32px) clamp(28px, 3vw, 44px) 0;
}
.ri-stage figure {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transform: scale(.45);
  transition: opacity .45s var(--sk-ease), transform .65s cubic-bezier(.22, .8, .24, 1);
}
.ri-stage img { width: 100%; height: 100%; object-fit: contain; filter: brightness(.96) contrast(1.03); }
.ri-stage figcaption {
  position: absolute; left: 0; bottom: 0; display: flex; gap: 10px; align-items: baseline;
  padding: 9px 16px 9px 12px; background: rgba(250, 250, 249, .92); color: #111110;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
}
.ri-stage figcaption .n { font-size: 11px; font-weight: 500; color: #3d3b38; }
.ri-stage figure.is-active { opacity: 1; transform: none; }
.ri-stage figure.is-enter { opacity: 0; transform: translateX(42%); transition: none; }
.ri-stage figure.is-leave { opacity: 0; transform: translateX(-42%); }
.ri-stage figure.no-anim { transition: none; }
.ri-comp { transition: opacity .4s var(--sk-ease), transform .5s var(--sk-ease); }
.ri-hero__visual.is-zoom .ri-comp { opacity: 0; transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  /* explicitly requested interaction — keep it under reduced motion */
  .sk-page .ri-stage figure { transition-duration: .45s, .65s !important; }
  .sk-page .ri-stage figure.is-enter,
  .sk-page .ri-stage figure.no-anim { transition-duration: 0s !important; }
  .sk-page .ri-comp { transition-duration: .4s, .5s !important; }
}