/* ==================================================
   Astrolaabh · Pukhraj - Yellow Sapphire stone page
   Self-contained: tokens + site chrome (ported from
   stones.css) + the editorial chapters + the vault.
   ================================================== */
@font-face {
  font-family: "Sesbania";
  src: url("Sesbania/Web-TT/Sesbania-Regular.woff2") format("woff2"),
       url("Sesbania/Web-TT/Sesbania-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sesbania";
  src: url("Sesbania/Web-TT/Sesbania-Italic.woff2") format("woff2"),
       url("Sesbania/Web-TT/Sesbania-Italic.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
:root {
  --bone: #f1efe8;
  --paper: #f6f4ec;
  --ink-dark: #20251a;
  --ink: #ece7da;
  --gold: #a1793a;
  --gold-bright: #c9a24b;
  --sage: #5b634a;
  --madder: #b23a2a;
  --hair: rgba(32, 37, 26, 0.12);
  --hair-gold: rgba(161, 121, 58, 0.28);
  --bg-deep: #20251a;
  --bg-deeper: #1b2016;
  --font-display: "Sesbania", "Cormorant Garamond", Georgia, serif;
  --font-ui: "Geist", "Outfit", -apple-system, "Segoe UI", sans-serif;
  --pad-x: clamp(1.25rem, 5vw, 4.5rem);
  --nav-h: 74px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink-dark);
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }



/* ============ Reveal-on-scroll (JS adds .in) ============ */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s ease, transform 0.95s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].in { opacity: 1; transform: none; height: auto; min-height: 0px; }
/* directional variants — media slides in from its own side, copy rises */
[data-reveal="left"]  { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }
[data-reveal="zoom"]  { transform: scale(1.05); }

/* staggered cascade for the four editorial chapters' list items, and each
   row of the vault grid (delay resets every 4th card so a long grid reads
   as repeating rows, not one ever-longer wait) */
.pk-benefits li:nth-child(1),
.pk-rashi li:nth-child(1),
.pk-ritual > div:nth-child(1),
.pk-cert-points li:nth-child(1),
.stone-grid .stone-card:nth-child(4n+1) { --reveal-delay: 0.06s; }
.pk-benefits li:nth-child(2),
.pk-rashi li:nth-child(2),
.pk-ritual > div:nth-child(2),
.pk-cert-points li:nth-child(2),
.stone-grid .stone-card:nth-child(4n+2) { --reveal-delay: 0.14s; }
.pk-benefits li:nth-child(3),
.pk-rashi li:nth-child(3),
.pk-ritual > div:nth-child(3),
.pk-cert-points li:nth-child(3),
.stone-grid .stone-card:nth-child(4n+3) { --reveal-delay: 0.22s; }
.pk-benefits li:nth-child(4),
.pk-ritual > div:nth-child(4),
.stone-grid .stone-card:nth-child(4n+4) { --reveal-delay: 0.30s; }
.pk-benefits li:nth-child(5),
.pk-ritual > div:nth-child(5) { --reveal-delay: 0.38s; }

/* ============ 1 · Hero - the opening frame sequence (light bone ground) ============ */
.pk-hero {
  position: relative;
  z-index: 2; /* sit above the fixed frame-scrub stone so it reads BEHIND the hero */
  /* the frame follows the film: the hero carries the film's own 16:9, so
     nothing of the vault or the orbit rings is sliced away. The cap stops it
     growing back into a full-viewport banner on a wide screen — past ~1210px
     the film stops widening and sits centred on the damask instead. */
  width: 100%;
  aspect-ratio: 1916 / 1080;
  max-height: clamp(460px, 64vh, 680px);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  /* subtle gold-damask pattern under a bone wash + gold glow, so the
     transparent stone and dark-ink copy read cleanly over it.
     viewport-fixed + identical to .pk-shastra so hero and shastra read as
     one continuous field with no seam at the boundary */
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(201, 162, 75, 0.15), transparent 60%),
    linear-gradient(180deg, rgba(246, 244, 236, 0.72) 0%, rgba(241, 239, 232, 0.82) 100%),
    url("assets/vault-pattern.jpg") center / cover no-repeat;
  background-attachment: fixed, fixed, fixed;
}
/* a small, quiet scrim across the top of the film — just enough to keep the
   eyebrow and title readable against whichever frame is playing there.
   Scoped to Pukhraj: it exists for that page's dark video hero, and would
   only muddy the light bone hero the other stone pages carry. */
body.pk-page-pukhraj .pk-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 52%;
  background: linear-gradient(180deg,
    rgba(10, 12, 7, 0.62) 0%,
    rgba(10, 12, 7, 0.34) 46%,
    rgba(10, 12, 7, 0) 100%);
  pointer-events: none;
}
.pk-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* the artwork's quiet ground is its upper band; the gem and its glow own the
     centre, where white type had nothing to sit against */
  justify-content: flex-start;
  text-align: center;
  /* even top and bottom, so the title group centres optically rather than
     being pushed up by a heavier bottom pad */
  padding: clamp(2rem, 6vh, 4rem) var(--pad-x);
}
/* Pukhraj's own hero framing: extra air at the head so the title clears the
   film's bright lid strip */
body.pk-page-pukhraj .pk-hero-inner {
  padding-top: clamp(2.25rem, 7vh, 4.5rem);
}
.pk-hero-top,
.pk-hero-bottom { width: 100%; }

/* The film behind the title is not a fixed colour — it lightens as it plays,
   and gold on its lighter frames was down at 1.8:1. A wash under the copy
   gives the type a ground it can count on, whatever frame is showing. */
.pk-hero-top {
  position: relative;
  isolation: isolate;
}
.pk-hero-bottom { margin-top: auto; }
/* the stage reserves the vertical band the fixed stone floats over */
.pk-hero-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(180px, 34vh, 380px);
}
.pk-hero-stone {
  width: min(420px, 62vw);
  height: auto;
  filter: drop-shadow(0 30px 54px rgba(120, 88, 24, 0.26));
}
/* full-bleed hero film */
.pk-hero-video,
.pk-hero-still {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* The mantra, set as drawn gold letterforms across the foot of the hero.
   Centred on the frame rather than in the copy column, so it reads as part of
   the photograph and stays clear of the title above it.

   The letterforms are not painted by the SVG itself — the SVG is used as a
   mask, and what shows through is a gold gradient wider than the element. A
   shine travels across it by moving that gradient, the same technique React
   Bits' ShinyText uses on live text (there via background-clip, which an
   <img> cannot do). Its geometry is kept: a 120deg gradient at 200% width,
   sweeping 150% -> -50%, then holding while the next cycle waits. */
.pk-hero-mantra {
  --mantra-base: #f5d493;
  --mantra-shine: #fff6e2;
  position: absolute;
  left: 50%;
  bottom: clamp(1.75rem, 6vh, 3.5rem);
  transform: translateX(-50%) translateY(26px);
  z-index: 2;
  width: clamp(150px, 13vw, 255px);
  aspect-ratio: 1102 / 193;
  -webkit-mask: url("assets/pukhraj/mantra.svg") center / contain no-repeat;
  mask: url("assets/pukhraj/mantra.svg") center / contain no-repeat;
  background-image: linear-gradient(120deg,
    var(--mantra-base) 0%,
    var(--mantra-base) 35%,
    var(--mantra-shine) 50%,
    var(--mantra-base) 65%,
    var(--mantra-base) 100%);
  background-size: 200% auto;
  background-position: 150% center;
  filter: drop-shadow(0 2px 10px rgba(8, 10, 5, 0.65));
  pointer-events: none;
}
/* it joins the hero cascade through the page's own reveal system, then keeps
   both the shine and a slow breath in its gold. The glow rides on filter and
   the shine on background-position, so neither fights the reveal's opacity. */
.pk-hero-mantra.in {
  opacity: 0.92;
  transform: translateX(-50%);
  animation:
    pk-mantra-shine 7s linear 1.6s infinite,
    pk-mantra-glow 7s ease-in-out 1.6s infinite;
}
/* 2.8s of travel, then 4.2s held off-frame before the next pass */
@keyframes pk-mantra-shine {
  0% { background-position: 150% center; }
  40%, 100% { background-position: -50% center; }
}
@keyframes pk-mantra-glow {
  0%, 100% { filter: drop-shadow(0 2px 10px rgba(8, 10, 5, 0.65)); }
  50% { filter: drop-shadow(0 2px 14px rgba(8, 10, 5, 0.7))
               drop-shadow(0 0 16px rgba(245, 212, 147, 0.32)); }
}

/* Four slides crossfading on a 28s cycle — three stills and the transition
   film: the vault closed, opened on the stone, the stone lifted out, then the
   film. Pure CSS — every slide runs the same keyframes, offset by a quarter of
   the cycle each, so one fades up exactly as the one before it fades down and
   there is never a gap. The offsets are negative so the sequence is already
   mid-cycle at load and the first handover happens on time, not a cycle late. */
.pk-hero-slide {
  opacity: 0;
  animation: pk-hero-fade 28s ease-in-out infinite;
}
/* keyed by class, not :nth-of-type — the fourth slide is a <video>, and
   nth-of-type counts each element type separately, so it would never match */
.pk-hero-slide--2 { animation-delay: -21s; }
.pk-hero-slide--3 { animation-delay: -14s; }
.pk-hero-slide--4 { animation-delay: -7s; }
@keyframes pk-hero-fade {
  0%, 21.4% { opacity: 1; }
  25%, 96.4% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-hero-slide { animation: none; opacity: 0; }
  .pk-hero-slide--1 { opacity: 1; }
}

/* ============ Sticky product bar (under the nav, after the hero) ============ */
.pk-buybar {
  position: sticky;
  top: var(--nav-h);
  z-index: 45;
  background: rgba(246, 244, 236, 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--hair);
  max-height: 100px;
  overflow: hidden;
  transition: transform 0.45s var(--ease), opacity 0.4s ease, top 0.4s var(--ease), max-height 0.45s var(--ease), border-color 0.45s var(--ease);
}
/* scroll-down: hide the shared top nav, and let the buy bar / filter bar
   slide up to the very top (JS toggles body.nav-hidden). site-nav.js also
   runs its own, separately-thresholded scroll listener that toggles
   nav-hidden on the nav itself — on its own that fights this page's
   body-driven one and can hide the nav a beat before the buy bar's offset
   collapses, opening a gap. Neutralise it: this page's nav transform is
   driven by body.nav-hidden alone. */
#site-nav .nav { transition: transform 0.4s var(--ease); }
#site-nav .nav.nav-hidden { transform: none; }
body.nav-hidden #site-nav .nav { transform: translateY(-100%); }
body.nav-hidden .pk-buybar,
body.nav-hidden .vault-toolbar { top: 0; }
.pk-buybar.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  border-color: transparent;
}
.pk-buybar-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.7rem var(--pad-x);
}
.pk-buybar-info { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.pk-buybar-thumb {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--hair-gold);
  background: var(--paper);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.pk-buybar-thumb img { width: 74%; height: 74%; object-fit: contain; }
.pk-buybar-text { display: flex; flex-direction: column; min-width: 0; }
.pk-buybar-text strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--ink-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pk-buybar-sub {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: rgba(32, 37, 26, 0.55);
}
.pk-buybar-right { display: flex; align-items: center; gap: 1.5rem; flex: none; }
.pk-buybar-price {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--ink-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pk-buybar-cta { height: 42px; }
@media (max-width: 640px) {
  .pk-buybar-sub, .pk-buybar-price { display: none; }
  .pk-buybar-inner { gap: 0.75rem; padding: 0.55rem var(--pad-x); }
  .pk-buybar-cta { height: 40px; padding: 0 1.15rem; }
  .pk-buybar-text strong { font-size: 0.98rem; }
}
.pk-hero-text { position: relative; z-index: 3; }
.pk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  /* a brighter gold than the page's: this one sits on film, not on bone */
  color: #d9bd7c;
  margin: 0;
}
.pk-eyebrow::before,
.pk-eyebrow::after {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: rgba(161, 121, 58, 0.5);
}
.pk-eyebrow .glyph { font-size: 1rem; letter-spacing: 0; }
.pk-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.9rem, 7vw, 6rem);
  line-height: 0.98;
  letter-spacing: 0.005em;
  color: var(--bone);
  text-shadow: 0 2px 34px rgba(8, 10, 5, 0.6), 0 1px 3px rgba(8, 10, 5, 0.45);
  margin: 0;
}
.pk-subtitle {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  color: #e0c07a;
  text-shadow: 0 1px 3px rgba(8, 10, 5, 0.55), 0 2px 24px rgba(8, 10, 5, 0.6);
  margin: 0.5rem 0 0;
}
.pk-lede {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.65;
  color: rgba(246, 244, 236, 0.85);
  text-shadow: 0 1px 16px rgba(10, 12, 7, 0.5);
  max-width: 44ch;
  margin: 1.1rem auto 0;
}
.pk-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.9rem;
}
.pk-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 46px;
  padding: 0 1.6rem;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.8438rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.pk-cta:active { transform: translateY(1px); }
.pk-cta-gold {
  background: #5b634a;
  border: 1px solid #5b634a;
  color: var(--bone);
  box-shadow: 0 12px 34px -14px rgba(15, 18, 10, 0.6);
}
.pk-cta-gold:hover { background: #4c543e; border-color: #4c543e; }
.pk-cta-ghost {
  background: transparent;
  border: 1px solid rgba(32, 37, 26, 0.3);
  color: var(--ink-dark);
}
.pk-cta-ghost:hover { background: rgba(32, 37, 26, 0.06); border-color: rgba(32, 37, 26, 0.5); }
/* ghost button on dark grounds (certified / vault) */
.pk-cta-gold-bright {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--bg-deep);
  box-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.6);
}
.pk-cta-gold-bright:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.pk-cta-ghost-light {
  background: transparent;
  border: 1px solid rgba(236, 231, 218, 0.32);
  color: var(--ink);
}
.pk-cta-ghost-light:hover { background: rgba(236, 231, 218, 0.08); border-color: rgba(236, 231, 218, 0.6); }

/* quiet scroll cue: a breathing hairline, no text */
.pk-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.1rem, 3vh, 2rem);
  transform: translateX(-50%);
  z-index: 4;
  width: 1px;
  height: 44px;
  overflow: hidden;
}
.pk-scroll-cue span {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(32, 37, 26, 0.55), transparent);
  animation: pk-cue 2.6s var(--ease) infinite;
}
@keyframes pk-cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* ============ 2 · The scripture line ============ */
.pk-shastra {
  position: relative;
  overflow: hidden;
  /* IDENTICAL, viewport-fixed damask ground to .pk-hero — the pattern and
     wash line up across the hero/shastra boundary, so there is no seam and
     the scrub stone crosses one continuous field */
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(201, 162, 75, 0.15), transparent 60%),
    linear-gradient(180deg, rgba(246, 244, 236, 0.72) 0%, rgba(241, 239, 232, 0.82) 100%),
    url("assets/vault-pattern.jpg") center / cover no-repeat;
  background-attachment: fixed, fixed, fixed;
  text-align: center;
  /* a little taller than the viewport so the frame-scrub has room to play,
     but short enough that the frames advance quickly on scroll */
  min-height: 115vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(6rem, 14vh, 10rem) var(--pad-x);
}
/* lift the scripture text above the fixed scrub stone (z-index:1) */
.pk-shastra-eyebrow,
.pk-quote,
.pk-shastra-cite { position: relative; z-index: 2; }
.pk-mandala {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, 88vw);
  opacity: 0.1;
  pointer-events: none;
  user-select: none;
}
.pk-shastra-eyebrow {
  position: relative;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 2rem;
}
.pk-quote {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}
.pk-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.75rem);
  line-height: 1.35;
  color: var(--ink-dark);
  margin: 0;
}
/* words ink in one by one (spans added by JS) */
.pk-quote .qw {
  opacity: 0.12;
  transition: opacity 0.7s ease;
  transition-delay: calc(var(--wi, 0) * 45ms);
}
.pk-quote.in .qw { opacity: 1; }
.pk-shastra-cite {
  position: relative;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(32, 37, 26, 0.45);
  margin: 2.4rem 0 0;
}
.pk-shastra-cite::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--hair-gold);
  margin: 0 auto 1.2rem;
}

/* ============ Editorial chapters (3–5) ============ */
.pk-chapter {
  position: relative;
  z-index: 2; /* sit above the fixed scrub stone (z-index:1) so it reads behind, not over, these sections */
  background: var(--bone);
  padding: clamp(4.5rem, 11vh, 8rem) var(--pad-x);
}
.pk-chapter + .pk-chapter { border-top: 1px solid var(--hair); }
.pk-chapter-inner { max-width: 1280px; margin: 0 auto; }
.pk-split {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.pk-split-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); }

.pk-plate {
  margin: 0;
  min-width: 0;
}

/* Full-bleed media chapter: video fills the entire left panel, edge to edge */
.pk-chapter--fullmedia {
  padding: 0;
  overflow: hidden;
}
.pk-chapter--fullmedia .pk-chapter-inner {
  max-width: none;
  align-items: stretch;
  gap: 0;
}
.pk-chapter--fullmedia .pk-split {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
/* Pukhraj's chapters run as a 16:9 plate; the other stone pages keep the
   content-height panels they were built with */
/* The chapters now carry less copy, so let each panel's height follow its
   content instead of a 16:9 lock — no dead space above/below. The media is
   pulled out of flow so it can't balloon the row to its intrinsic height; it
   just covers its own column via object-fit. Applies to all four chapters. */
body.pk-page-pukhraj .pk-chapter--fullmedia .pk-split {
  aspect-ratio: auto;
  height: auto;
  min-height: 0px;
}
body.pk-page-pukhraj .pk-chapter--fullmedia .pk-plate--full { overflow: hidden; }
body.pk-page-pukhraj .pk-chapter--fullmedia .pk-plate--full video,
body.pk-page-pukhraj .pk-chapter--fullmedia .pk-plate--full img,
body.pk-page-pukhraj .pk-certified .pk-cert-media img {
  position: absolute;
  inset: 0;
  min-height: 0;
}
body.pk-page-pukhraj .pk-certified .pk-cert-media { position: relative; }
.pk-plate--full {
  position: relative;
  align-self: stretch;
}
.pk-plate.pk-plate--full video,
.pk-plate.pk-plate--full img {
  width: 100%;
  height: 100%;
  /* shared height across all full-media chapters (1–4) so they read as a uniform band */
  min-height: clamp(320px, 46vh, 480px);
  aspect-ratio: auto;
  object-fit: cover;
  border: 0;
  border-radius: 0;
}
/* caption becomes a quiet overlay on the video */
.pk-plate--full figcaption {
  position: absolute;
  left: clamp(1.25rem, 2.5vw, 2.5rem);
  bottom: clamp(1.25rem, 2.5vw, 2rem);
  margin: 0;
  color: rgba(246, 239, 226, 0.9);
  text-shadow: 0 1px 10px rgba(10, 12, 7, 0.6);
}
/* the copy side gets the padding the chapter used to have */
.pk-chapter--fullmedia .pk-chapter-copy {
  padding: clamp(2.25rem, 5vh, 3.75rem) var(--pad-x);
  max-width: 640px;
  /* stretch (grid default) so a dark copy panel fills the full cell height,
     no bone gap above/below; content is vertically centred within it */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: auto;
  min-height: 0px;
}
.pk-plate img,
.pk-plate video {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--hair);
  display: block;
}
.pk-plate figcaption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9375rem;
  color: rgba(32, 37, 26, 0.5);
  margin-top: 0.8rem;
}

.pk-idx {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
}
.pk-idx span {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 0.35rem;
  border: 1px solid var(--hair-gold);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}
.pk-idx::after {
  content: "";
  flex: 0 0 2.5rem;
  height: 1px;
  background: var(--hair-gold);
}
.pk-idx-light { color: var(--gold-bright); }
.pk-idx-light span { border-color: rgba(201, 162, 75, 0.4); }
.pk-idx-center { justify-content: center; }
.pk-idx-center::after { display: none; }

.pk-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.08;
  color: var(--ink-dark);
  margin: 0 0 1.6rem;
  max-width: 20ch;
}
.pk-h2-light { color: var(--ink); }
.pk-h2-center { text-align: center; margin-left: auto; margin-right: auto; }

.pk-body {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(32, 37, 26, 0.72);
  max-width: 52ch;
  margin: 0 0 1.4rem;
}
.pk-body b { font-weight: 500; color: var(--ink-dark); }
.pk-body a { color: var(--sage); text-decoration: underline; text-underline-offset: 4px; }
.pk-body a:hover { color: var(--gold); }
.pk-body-light { color: rgba(236, 231, 218, 0.72); }
.pk-fine {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.8125rem;
  color: rgba(32, 37, 26, 0.5);
  margin: 1.8rem 0 0;
}

/* --- benefits: icon rows, matching the Certified chapter's list style --- */
.pk-benefits {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.5rem;
  border-top: 1px solid var(--hair);
}
.pk-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: clamp(1.15rem, 2.2vh, 1.55rem) 0;
  border-bottom: 1px solid var(--hair);
}
.pk-ben-ic {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(161, 121, 58, 0.35);
  color: var(--gold);
  font-size: 1.25rem;
  margin-top: 0.2rem;
}
.pk-benefits h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--ink-dark);
  margin: 0 0 0.25rem;
}
.pk-benefits p {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(32, 37, 26, 0.65);
  margin: 0;
  max-width: 46ch;
}

/* --- who should wear: rashi list --- */
.pk-rashi { list-style: none; margin: 0.8rem 0 2rem; padding: 0; }
.pk-rashi li {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: clamp(1rem, 2vh, 1.35rem) 0;
  border-top: 1px solid var(--hair);
}
.pk-rashi li:last-child { border-bottom: 1px solid var(--hair); }
.pk-rashi-glyph {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px; /* rounded-square, matching the Certified chapter's icons */
  border: 1px solid var(--hair-gold);
  /* force the astro glyphs to render as text, never as colour emoji */
  font-family: "Cormorant Garamond", "Segoe UI Symbol", "Noto Sans Symbols", Georgia, serif;
  font-variant-emoji: text;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--gold);
}
.pk-rashi-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--ink-dark);
}
.pk-rashi-en {
  margin-left: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9375rem;
  color: rgba(32, 37, 26, 0.55);
  text-align: right;
}
.pk-nudge { margin-bottom: 0; }
/* chapter-level CTA row: reuses the hero primary/secondary buttons */
.pk-chapter-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.9rem;
}

/* ---- "Who should wear" copy panel on the SAME dark ground as the Certified chapter.
   max-width:none so the dark fill spans the whole left cell up to the image (no bone gap) ---- */
#who .pk-chapter-copy {
  max-width: none;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(201, 162, 75, 0.08), transparent 55%),
    linear-gradient(180deg, var(--bg-deep), var(--bg-deeper));
}
#who .pk-idx { color: var(--gold-bright); }
#who .pk-idx span { border-color: rgba(201, 162, 75, 0.4); }
#who .pk-idx::after { background: rgba(201, 162, 75, 0.4); }
#who .pk-h2 { color: var(--ink); }
#who .pk-body { color: rgba(236, 231, 218, 0.75); }
#who .pk-body b { color: var(--ink); }
#who .pk-body a { color: var(--gold-bright); }
#who .pk-body a:hover { color: #efd9a2; }
#who .pk-rashi li { border-color: rgba(236, 231, 218, 0.14); }
#who .pk-rashi-glyph { border-color: rgba(236, 231, 218, 0.22); color: var(--gold-bright); }
#who .pk-rashi-name { color: var(--ink); }
#who .pk-rashi-en { color: rgba(236, 231, 218, 0.5); }

/* --- how to wear: ritual list --- */
.pk-ritual { margin: 1.5rem 0 0; border-top: 1px solid var(--hair); }
.pk-ritual > div {
  display: grid;
  grid-template-columns: minmax(0, 96px) minmax(0, 1fr);
  gap: 0 clamp(1.2rem, 3vw, 2.2rem);
  align-items: baseline;
  padding: clamp(1.1rem, 2vh, 1.5rem) 0;
  border-bottom: 1px solid var(--hair);
}
.pk-ritual dt {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 0.55rem;
}
.pk-ritual dd { margin: 0; }
.pk-ritual dd strong {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--ink-dark);
}
.pk-ritual dd span {
  display: block;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(32, 37, 26, 0.6);
  margin-top: 0.35rem;
}
.pk-devanagari { letter-spacing: 0.02em; }

/* ============ 6 · Certified & authentic (dark ground) ============ */
.pk-certified {
  position: relative;
  z-index: 2; /* cover the fixed scrub stone */
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(201, 162, 75, 0.08), transparent 55%),
    linear-gradient(180deg, var(--bg-deep), var(--bg-deeper));
  padding: 0;
  overflow: hidden;
}
.pk-cert-inner {
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
/* media fills its half edge-to-edge, full height — no border, no radius.
   order:2 puts the image on the RIGHT, copy on the left (mobile re-stacks below) */
.pk-cert-media { margin: 0; min-width: 0; align-self: stretch; order: 2; }
.pk-cert-media img {
  width: 100%;
  height: 100%;
  min-height: clamp(360px, 56vh, 560px);
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* copy side carries the padding the section used to have */
.pk-cert-copy {
  padding: clamp(2.75rem, 6vh, 4.5rem) var(--pad-x);
  max-width: 640px;
  align-self: center;
}
.pk-cert-points { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.pk-cert-points li {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.15rem 0;
  border-top: 1px solid rgba(236, 231, 218, 0.12);
}
.pk-cert-ic {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(201, 162, 75, 0.35);
  color: var(--gold-bright);
  font-size: 1.25rem;
  margin-top: 0.2rem;
}
.pk-cert-points h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0 0 0.25rem;
}
.pk-cert-points p {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(236, 231, 218, 0.65);
  margin: 0;
  max-width: 46ch;
}
.pk-cert-labs {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201, 162, 75, 0.85);
  margin: 1.9rem 0 0;
}

/* ============ 7 · The vault - Pukhraj stones ============ */
.pk-vault {
  /* dark-green ground, matched to the Certified chapter, so the catalogue
     closes the page as a lit gallery of stones */
  position: relative;
  z-index: 2; /* cover the fixed scrub stone */
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(201, 162, 75, 0.08), transparent 55%),
    linear-gradient(180deg, var(--bg-deep), var(--bg-deeper));
  padding: 0 0 clamp(3.5rem, 8vh, 6rem);
}
.pk-vault-head {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(4rem, 9vh, 6.5rem) var(--pad-x) clamp(2rem, 4vh, 3rem);
}
.pk-vault-head--center { text-align: center; }
.pk-vault-head--center .pk-body { margin-left: auto; margin-right: auto; }
/* ---- sticky filter toolbar (ported from the catalogue, tuned for the dark ground) ---- */
.vault-toolbar {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
.tb-inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  max-width: 1600px;
  margin: 0 auto;
  padding: 0.8rem var(--pad-x);
}
.tb-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
.tb-right {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-left: auto;
  flex: none;
}
.tb-drop { position: relative; }
.tb-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 38px;
  padding: 0 0.95rem;
  border: 1px solid rgba(236, 231, 218, 0.2);
  border-radius: 999px;
  background: rgba(236, 231, 218, 0.05);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.tb-trigger i {
  font-size: 0.7rem;
  color: rgba(236, 231, 218, 0.5);
  transition: transform 0.3s var(--ease);
}
.tb-trigger:hover { border-color: rgba(201, 162, 75, 0.55); }
.tb-trigger:focus-visible { outline: 2px solid rgba(201, 162, 75, 0.5); outline-offset: 2px; }
.tb-drop.open .tb-trigger { border-color: var(--gold-bright); }
.tb-drop.open .tb-trigger i { transform: rotate(180deg); }
.tb-drop.is-set .tb-trigger {
  border-color: var(--gold-bright);
  background: rgba(201, 162, 75, 0.16);
  color: var(--gold-bright);
}
.tb-drop.is-set .tb-trigger i { color: var(--gold-bright); }

/* popovers stay on light paper for readability */
.tb-pop {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 0;
  z-index: 30;
  min-width: 200px;
  background: var(--paper);
  border: 1px solid var(--hair-gold);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s var(--ease);
}
.tb-drop.open .tb-pop { opacity: 1; transform: none; pointer-events: auto; }
.tb-drop--right .tb-pop { left: auto; right: 0; }
.tb-pop-range { min-width: 264px; padding: 1.1rem 1.1rem 0.95rem; }
.tb-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 300;
  color: rgba(32, 37, 26, 0.72);
  padding: 0.5rem 0.7rem;
  border-radius: 5px;
  transition: background 0.18s ease, color 0.18s ease;
}
.tb-opt:hover { background: rgba(161, 121, 58, 0.08); color: var(--ink-dark); }
.tb-opt.is-active { color: var(--ink-dark); font-weight: 400; }
.tb-drop:not([data-drop="sort"]) .tb-opt {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.tb-drop:not([data-drop="sort"]) .tb-opt::before {
  content: "";
  flex: none;
  width: 17px; height: 17px;
  border-radius: 4px;
  border: 1px solid rgba(161, 121, 58, 0.5);
  background: transparent center / 11px no-repeat;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.tb-drop:not([data-drop="sort"]) .tb-opt.is-active::before {
  background-color: var(--gold);
  border-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.4 2.4 5.6-6.2' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tb-drop[data-drop="sort"] .tb-opt.is-active::after {
  content: "\2713";
  float: right;
  color: var(--gold);
  font-size: 0.75rem;
  line-height: 1.3;
}
.tb-clear {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--gold-bright);
  padding: 0 0 0.15rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: border-color 0.2s ease;
}
.tb-clear:hover { border-bottom-color: var(--gold-bright); }
.results-count {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: rgba(236, 231, 218, 0.55);
  margin: 0;
  white-space: nowrap;
}
.results-count b { color: var(--ink); font-weight: 500; }
.tb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--pad-x) 0.85rem;
}
.tb-chips[hidden] { display: none; }
.tb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.55rem 0.32rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 75, 0.5);
  background: linear-gradient(120deg, rgba(201, 162, 75, 0.28), rgba(201, 162, 75, 0.14));
  color: var(--gold-bright);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.tb-chip i {
  font-size: 0.7rem;
  color: rgba(201, 162, 75, 0.7);
  transition: color 0.2s ease;
}
.tb-chip:hover {
  border-color: var(--gold-bright);
  background: linear-gradient(120deg, rgba(201, 162, 75, 0.4), rgba(201, 162, 75, 0.22));
  color: #efd9a2;
}
.tb-chip:hover i { color: #efd9a2; }
/* dual-handle range control (inside the light popover) */
.f-range { padding-top: 0.1rem; }
.fr-slider { position: relative; height: 18px; margin: 0.2rem 1px 1rem; }
.fr-slider::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: var(--hair-gold);
}
.fr-fill {
  position: absolute;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--gold);
  pointer-events: none;
}
.fr-slider input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 18px;
  margin: 0; padding: 0;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  pointer-events: none;
  outline: none;
  z-index: 3;
}
.fr-slider input[type="range"]::-webkit-slider-runnable-track { background: none; height: 18px; }
.fr-slider input[type="range"]::-moz-range-track { background: none; }
.fr-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: 2.5px;
  border-radius: 50%;
  background: var(--bone);
  border: 1.5px solid var(--gold);
  box-shadow: 0 1px 5px rgba(32, 37, 26, 0.28);
  cursor: grab;
  pointer-events: auto;
  transition: transform 0.25s var(--ease), border-color 0.2s ease;
}
.fr-slider input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--bone);
  border: 1.5px solid var(--gold);
  box-shadow: 0 1px 5px rgba(32, 37, 26, 0.28);
  cursor: grab;
  pointer-events: auto;
  transition: transform 0.25s var(--ease), border-color 0.2s ease;
}
.fr-slider input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.18); border-color: var(--gold-bright); }
.fr-slider input[type="range"]::-moz-range-thumb:hover { transform: scale(1.18); border-color: var(--gold-bright); }
.fr-fields { display: flex; align-items: flex-end; gap: 0.65rem; }
.fr-field { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.fr-label {
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(32, 37, 26, 0.45);
}
.fr-box {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  border-bottom: 1px solid var(--hair);
  padding: 0.1rem 0 0.35rem;
  transition: border-color 0.2s ease;
}
.fr-box:focus-within { border-color: var(--gold); }
.fr-cur { font-style: normal; font-family: var(--font-ui); font-size: 0.75rem; color: rgba(32, 37, 26, 0.45); }
.fr-box input {
  width: 100%; min-width: 0;
  background: none; border: 0; outline: none; padding: 0;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-dark);
  font-variant-numeric: tabular-nums;
}
.fr-sep { font-family: var(--font-ui); font-size: 0.6875rem; color: rgba(32, 37, 26, 0.4); padding-bottom: 0.4rem; flex: none; }
.vault-results { max-width: 1600px; margin: 0 auto; padding: clamp(2rem, 4vh, 3rem) var(--pad-x) 0; }
/* recolour the catalogue cards for the dark ground */
.pk-vault .soc-name { color: var(--ink); }
.pk-vault .soc-ratti,
.pk-vault .soc-cut { color: rgba(236, 231, 218, 0.55); }
.pk-vault .soc-origin { color: rgba(236, 231, 218, 0.72); }
.pk-vault .soc-price { color: var(--ink); }
.pk-vault .soc-was { color: rgba(236, 231, 218, 0.4); }
.pk-vault .soc-planet { color: var(--gold-bright); }
.pk-vault .soc-view { color: rgba(236, 231, 218, 0.7); }
.pk-vault .soc-meta { border-color: rgba(236, 231, 218, 0.12); }
.pk-vault-head .pk-body { margin-bottom: 0; }
.pk-grid { margin: 0; } /* width now governed by .vault-results wrapper */

/* catalogue card look - ported from stones.css */
.stone-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2.25rem, 3vw, 3.25rem) clamp(1.25rem, 1.8vw, 2.25rem);
}
.stone-card { position: relative; }
.stone-card-link {
  text-decoration: none;
  display: block;
  transition: transform 0.5s var(--ease);
}
.stone-card-link:hover { transform: translateY(-4px); }
.soc-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--hair);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(165deg, var(--glow, rgba(201, 162, 75, 0.22)) 0%, #f6f4ee 56%, #ffffff 100%);
  display: grid;
  place-items: center;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.stone-card-link:hover .soc-media {
  border-color: rgba(32, 37, 26, 0.2);
  box-shadow: 0 20px 40px -26px rgba(32, 37, 26, 0.35);
}
.soc-media img {
  width: 60%;
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.16));
  transition: transform 0.6s var(--ease);
  z-index: 1;
}
.stone-card-link:hover .soc-media img { transform: scale(1.05); }
.soc-tag {
  position: absolute;
  top: 0.85rem; left: 0.85rem;
  z-index: 2;
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.soc-tag-quiet {
  color: rgba(32, 37, 26, 0.55);
  background: rgba(246, 244, 236, 0.65);
  border-color: rgba(32, 37, 26, 0.1);
  font-weight: 500;
  letter-spacing: 0.2em;
}
.soc-tag-scarce {
  color: #8a5a1f;
  background: rgba(201, 162, 75, 0.18);
  border-color: rgba(161, 121, 58, 0.42);
}
.soc-tag-deal {
  color: #f2dca6;
  background: rgba(201, 162, 75, 0.22);
  border-color: rgba(201, 162, 75, 0.55);
}
.soc-cert {
  position: absolute;
  top: 0.7rem; right: 0.7rem;
  z-index: 3;
  display: grid;
  place-items: center;
  cursor: help;
}
.soc-cert-img {
  width: 20px;
  height: auto;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(20, 24, 16, 0.4));
  transition: transform 0.2s ease;
}
.soc-cert:hover .soc-cert-img,
.soc-cert:focus-visible .soc-cert-img { transform: scale(1.08); }
.soc-cert:focus-visible { outline: none; }
.soc-cert-tip {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 5;
  width: max-content;
  max-width: 190px;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: #20251a;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.6875rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: left;
  box-shadow: 0 14px 30px -14px rgba(20, 24, 16, 0.6);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.soc-cert-tip::before {
  content: "";
  position: absolute;
  bottom: 100%; right: 9px;
  border: 5px solid transparent;
  border-bottom-color: #20251a;
}
.soc-cert:hover .soc-cert-tip,
.soc-cert:focus .soc-cert-tip,
.soc-cert:focus-visible .soc-cert-tip { opacity: 1; transform: none; }
.soc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1.25rem 0 0.4rem;
}
.soc-planet {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
  display: flex; align-items: center; gap: 0.45rem;
  white-space: nowrap;
}
.soc-planet .glyph { font-size: 0.9rem; opacity: 0.85; }
.soc-ratti {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(32, 37, 26, 0.55);
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.soc-name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-dark);
  margin: 0 0 0.6rem;
}
.soc-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.7rem;
}
.soc-origin {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-dark);
}
.soc-origin i { display: none; }
.soc-origin::before {
  content: "Origin";
  font-size: 0.56rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(236, 231, 218, 0.45); flex: none;
}
.soc-cut {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: rgba(32, 37, 26, 0.55);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.soc-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--hair);
}
.soc-price {
  font-family: var(--font-ui);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink-dark);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.soc-was {
  font-weight: 400;
  font-size: 0.8125rem;
  color: rgba(32, 37, 26, 0.42);
  text-decoration: line-through;
  margin-right: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.soc-view {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(91, 99, 74, 0.5);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage);
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.stone-card-link:hover .soc-view {
  background: rgba(91, 99, 74, 0.1);
  border-color: var(--sage);
}
.soc-view i { font-size: 0.85rem; transition: transform 0.25s var(--ease); }
.stone-card-link:hover .soc-view i { transform: translateX(3px); }

.pk-vault-foot {
  max-width: 1600px;
  margin: clamp(2.5rem, 5vh, 4rem) auto 0;
  padding: 0 var(--pad-x);
  text-align: center;
}
.pk-vault-all {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--ink); /* light on the dark-green ground */
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(201, 162, 75, 0.5);
  transition: color 0.2s ease, border-color 0.2s ease, gap 0.25s var(--ease);
}
.pk-vault-all i { font-size: 0.85em; color: var(--gold-bright); }
.pk-vault-all:hover { color: var(--gold-bright); border-color: var(--gold-bright); gap: 0.85rem; }

/* ============ 8 · FAQs ============ */
.pk-faq {
  position: relative;
  z-index: 2; /* cover the fixed scrub stone */
  background: var(--paper);
  border-top: 1px solid var(--hair);
  padding: clamp(4.5rem, 11vh, 8rem) var(--pad-x);
}
/* on Pukhraj the FAQ carries the same surface as the chapter panels above it */
body.pk-page-pukhraj .pk-faq { background: var(--bone); }
.pk-faq-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
/* left column: the ask — static, does not track the scroll */
.pk-faq-aside {
  position: static;
}
.pk-faq .pk-h2 { margin-bottom: 0; }
.pk-faq-lede {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(32, 37, 26, 0.6);
  max-width: 32ch;
  margin: 1.4rem 0 0;
}
.pk-faq-aside-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.9rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--sage);
  text-decoration: none;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--hair-gold);
  transition: color 0.25s ease, border-color 0.25s ease, gap 0.25s var(--ease);
}
.pk-faq-aside-link i { font-size: 0.85em; color: var(--gold); transition: transform 0.25s var(--ease); }
.pk-faq-aside-link:hover { color: var(--gold); border-color: var(--gold); gap: 0.8rem; }
.pk-faq-aside-link:hover i { transform: translateX(3px); }
.pk-acc { border-top: 1px solid var(--hair); margin: 0; }
.pk-acc-item { border-bottom: 1px solid var(--hair); }
.pk-acc-head { margin: 0; }
.pk-acc-btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.25;
  color: var(--ink-dark);
  transition: color 0.25s ease;
}
.pk-acc-btn:hover { color: var(--gold); }
.pk-acc-btn:focus-visible { outline: 2px solid rgba(161, 121, 58, 0.4); outline-offset: 4px; }
.pk-acc-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 0.15rem;
  border-radius: 50%;
  border: 1px solid var(--hair);
  color: var(--gold);
  font-size: 0.85rem;
  transition: transform 0.35s var(--ease), border-color 0.25s ease;
}
.pk-acc-btn[aria-expanded="true"] .pk-acc-ic {
  transform: rotate(45deg);
  border-color: var(--hair-gold);
}
.pk-acc-panel p {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.9688rem;
  line-height: 1.75;
  color: rgba(32, 37, 26, 0.7);
  max-width: 68ch;
  margin: 0;
  padding: 0 2.75rem 1.6rem 0;
}
.pk-faq-foot {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(32, 37, 26, 0.6);
  margin: 2.4rem 0 0;
}
.pk-faq-foot a { color: var(--sage); text-decoration: underline; text-underline-offset: 4px; }
.pk-faq-foot a:hover { color: var(--gold); }

/* FAQ close-out as a real CTA block */
.pk-faq-cta {
  margin: clamp(2.75rem, 6vh, 4rem) auto 0;
  max-width: 46rem;
  text-align: center;
  padding-top: clamp(2rem, 4vh, 3rem);
  border-top: 1px solid var(--hair);
}
.pk-faq-cta-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.3;
  color: var(--ink-dark);
  margin: 0 0 1.6rem;
}
.pk-chapter-ctas--center { justify-content: center; }

/* ============ 9 · Closing CTA band ============ */
.pk-close {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 50% 120%, rgba(201, 162, 75, 0.12), transparent 60%),
    linear-gradient(180deg, var(--bg-deeper), var(--bg-deep));
  text-align: center;
  padding: clamp(5.5rem, 14vh, 9.5rem) var(--pad-x);
}
.pk-close-mandala {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 100vw);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}
.pk-close-inner { position: relative; }
.pk-close-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 1.4rem;
}
.pk-close-eyebrow .glyph { font-size: 1rem; letter-spacing: 0; }
.pk-close h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  line-height: 1.08;
  color: var(--ink);
  margin: 0 auto;
  max-width: 22ch;
}
.pk-close-ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2.4rem;
}

/* ============ Footer ============ */
.pk-footer {
  background: var(--bg-deeper);
  border-top: 1px solid rgba(201, 162, 75, 0.18);
  padding: 2.5rem var(--pad-x) 2.75rem;
}
.pk-footer-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  gap: 1.5rem 3rem;
  flex-wrap: wrap;
}
.pk-footer-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
}
.pk-footer-links {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.pk-footer-links a {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: rgba(236, 231, 218, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}
.pk-footer-links a:hover { color: var(--gold-bright); }
.pk-footer-note {
  margin: 0 0 0 auto;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.75rem;
  color: rgba(236, 231, 218, 0.4);
}


/* ============ Vault search empty state ============ */
.stone-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 1rem;
  color: rgba(236, 231, 218, 0.6);
  font-family: var(--font-display);
  font-size: 1.5rem;
}
.stone-empty button {
  display: inline-block;
  margin-top: 1rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: 0.9375rem;
  color: var(--gold-bright);
  border-bottom: 1px solid var(--gold-bright);
}

/* ============ Floating search / ask bar (ported from the catalogue) ============ */
/* ============ Pukhraj: the floating dock ============
   The ask bar and Buy Now ride the foot of the screen as one row: the dock
   takes over the centring the bar used to do for itself, so the two read as
   a matched pair rather than two things that happen to overlap. */
body.pk-page-pukhraj .pk-dock {
  position: fixed;
  left: 50%;
  bottom: clamp(1.25rem, 3vh, 2rem);
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: flex-end;
  gap: clamp(0.5rem, 1vw, 0.9rem);
  max-width: calc(100vw - 1.5rem);
}
/* the bar gives up its own centring to the dock, and keeps its slide-in */
body.pk-page-pukhraj .pk-dock .ai-bar {
  position: relative;
  left: auto;
  bottom: auto;
  width: min(440px, 100%);
  min-width: 0;
  transform: translateY(140%);
}
body.pk-page-pukhraj .pk-dock .ai-bar.is-visible { transform: translateY(0) !important; }
body.pk-page-pukhraj .pk-dock .ai-bar.expanded { width: min(560px, 100%); }

body.pk-page-pukhraj .pk-dock-buy {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 49px;
  padding: 0 1.15rem;
  border-radius: 999px;
  /* same colour language as the search bar beside it */
  background: rgba(34, 32, 27, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(140%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease,
    background 0.3s ease, border-color 0.3s ease;
}
body.pk-page-pukhraj .ai-bar.is-visible ~ .pk-dock-buy { opacity: 1; transform: none; }
body.pk-page-pukhraj .pk-dock-buy:hover { background: rgba(34, 32, 27, 0.9); border-color: rgba(255, 255, 255, 0.28); }
body.pk-page-pukhraj .pk-dock-buy:active { transform: translateY(1px); }
/* while the bar opens into a panel — or collapses at the footer — the button steps aside */
body.pk-page-pukhraj .ai-bar.expanded ~ .pk-dock-buy,
body.pk-page-pukhraj .ai-bar.searching ~ .pk-dock-buy,
body.pk-page-pukhraj .ai-bar.at-footer ~ .pk-dock-buy {
  opacity: 0;
  transform: translateY(140%);
  pointer-events: none;
}
@media (max-width: 560px) {
  body.pk-page-pukhraj .pk-dock-buy {
    height: 56px;
    padding: 0 1rem;
    font-size: 0.875rem;
  }
}

.ai-bar {
  position: fixed;
  left: 50%;
  bottom: clamp(1.25rem, 3vh, 2rem);
  transform: translateX(-50%) translateY(140%);
  z-index: 90;
  width: min(440px, calc(100vw - 2.5rem));
  padding: 0.5rem;
  border-radius: 999px;
  background: rgba(34, 32, 27, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow:
    0 20px 50px -20px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.7s ease, width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 0.55s ease;
  backface-visibility: hidden;
}
.ai-bar.is-visible {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
}
.ai-bar.expanded {
  width: min(560px, calc(100vw - 2.5rem));
  border-radius: 22px;
  padding: 0.6rem;
}
.ai-pill { display: flex; align-items: center; gap: 0.5rem; }
.ai-chips {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.6rem);
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem;
  border-radius: 18px;
  background: rgba(34, 32, 27, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.6);
  transform-origin: bottom left;
  animation: ai-chips-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-chips[hidden] { display: none; }
.ai-menu-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 300;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.ai-mi-ico {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.7rem;
  background: rgba(220, 185, 104, 0.07);
  border: 1px solid rgba(220, 185, 104, 0.26);
  flex: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ai-menu-item i { font-size: 1.15rem; color: var(--gold-bright); flex: none; }
.ai-menu-item:hover { background: rgba(220, 185, 104, 0.12); color: var(--gold-bright); }
.ai-menu-item:hover .ai-mi-ico { background: rgba(220, 185, 104, 0.14); border-color: rgba(220, 185, 104, 0.5); }
@keyframes ai-chips-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.ai-add.open { background: rgba(255, 255, 255, 0.16); }
.ai-add.open .icon-ask { display: none; }
.ai-add.open .icon-cue { display: block; }
.ai-add i { transition: transform 0.3s ease; }
.ai-bar.expanded .ai-pill { display: none; }
.ai-suggest { display: none; flex-direction: column; gap: 0.5rem; }
.ai-bar.expanded .ai-suggest { display: flex; }
.ai-bar.searching { border-radius: 26px; }
.ai-bar.searching .ai-suggest {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.6rem);
  padding: 0.75rem;
  border-radius: 22px;
  background: rgba(34, 32, 27, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.6);
  animation: ai-chips-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-suggest-head {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 0.6rem 0.15rem;
}
.ai-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.4rem;
}
.ai-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  background: rgba(236, 231, 218, 0.94) center / cover no-repeat;
  border: 1px solid rgba(236, 231, 218, 0.12);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.ai-thumb:hover {
  border-color: rgba(224, 200, 130, 0.55);
  box-shadow: 0 10px 28px -12px rgba(32, 37, 26, 0.4);
}
.ai-thumb.gem {
  background-size: 68%;
  background-position: center;
  transition: border-color 0.35s ease, box-shadow 0.35s ease,
    background-size 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    background-position 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-thumb.gem:hover { background-size: 52%; background-position: center 22%; }
.ai-thumb-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.1rem 0.5rem 0.6rem;
  background: linear-gradient(to top, rgba(243, 240, 231, 0.96) 55%, rgba(243, 240, 231, 0));
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease 0.05s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}
.ai-thumb.gem .ai-thumb-info { background: none; padding-top: 0.4rem; }
.ai-thumb:hover .ai-thumb-info { opacity: 1; transform: none; }
.ai-thumb-info strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.15;
  color: var(--ink-dark);
  margin-bottom: 0.15rem;
}
.ai-thumb-info span {
  display: block;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: #a1793a;
}
.ai-actions { display: flex; align-items: center; gap: 0.6rem; }
.ai-action {
  flex: 1;
  text-align: center;
  padding: 0.85rem 1rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 400;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.ai-action:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.32); }
.ai-close { flex: none; }
.ai-btn {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.35rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, color 0.3s ease;
}
.ai-btn:hover { background: rgba(255, 255, 255, 0.16); }
.ai-send:hover { transform: translateY(-1px); }
.ai-home, .ai-home:hover, .ai-home:focus { text-decoration: none; }
.ai-home i { text-decoration: none; }
.ai-add .icon-cue { display: none; }
.ai-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
.ai-input {
  width: 100%;
  background: none;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.9375rem;
  padding: 0 0.5rem;
}
.ai-ghost {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  color: rgba(236, 231, 218, 0.55);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.ai-input:focus ~ .ai-ghost,
.ai-input:not(:placeholder-shown) ~ .ai-ghost { opacity: 0; }
.ai-input.has-text ~ .ai-ghost { opacity: 0; }
@media (max-width: 560px) {
  .ai-bar { gap: 0.35rem; padding: 0.4rem; }
  .ai-btn { width: 42px; height: 42px; font-size: 1.125rem; }
}

/* ============ Responsive ============ */
@media (max-width: 1240px) {
  .stone-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .pk-split,
  .pk-split-rev,
  .pk-cert-inner { grid-template-columns: 1fr; }
  .pk-split .pk-plate { order: -1; }
  .pk-split-rev .pk-plate { order: -1; }
  .pk-plate { max-width: 560px; }
  /* full-media chapter stacks: video becomes a normal-height top hero */
  .pk-chapter--fullmedia .pk-split { grid-template-columns: 1fr; }
  .pk-plate--full { max-width: none; }
  .pk-plate.pk-plate--full video,
  .pk-plate.pk-plate--full img { min-height: 0; aspect-ratio: 4 / 3; }
  .pk-chapter--fullmedia .pk-chapter-copy { padding: clamp(2.5rem, 7vh, 4rem) var(--pad-x); max-width: none; }
  /* certified section: media stacks on top, copy below */
  .pk-cert-media { order: -1; }
  .pk-cert-media img { min-height: 0; aspect-ratio: 16 / 10; }
  .pk-cert-copy { padding: clamp(2.5rem, 7vh, 4rem) var(--pad-x); max-width: none; }
  /* FAQ stacks: heading above, answers below */
  .pk-faq-inner { grid-template-columns: 1fr; gap: clamp(2rem, 5vh, 3rem); }
  .pk-faq-aside { position: static; }
}
@media (max-width: 860px) {
  .stone-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pk-hero { aspect-ratio: auto; min-height: 62svh; max-height: none; }
  .pk-hero-video,
  .pk-hero-still { object-fit: cover; }
  .pk-hero-mantra { width: clamp(125px, 36vw, 175px); bottom: clamp(1.25rem, 4vh, 2rem); }
  .pk-hero-ctas { flex-direction: column; align-items: stretch; }
  .pk-benefits { grid-template-columns: 1fr; column-gap: 0; }
  .pk-benefits li { gap: 0.9rem; }
  .pk-ritual > div { grid-template-columns: 1fr; gap: 0.35rem 0; }
  .pk-ritual dt { padding-top: 0; }
  .pk-rashi-en { display: none; }
  .pk-acc-panel p { padding-right: 0; }
  .pk-footer-note { margin-left: 0; }
}
@media (max-width: 560px) {
  .stone-grid { grid-template-columns: 1fr; }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .pk-hero-mantra {
    opacity: 0.92;
    transform: translateX(-50%);
    animation: none;
    background-image: none;
    background-color: var(--mantra-base);
  }
  .pk-quote .qw { opacity: 1; }
  .pk-scroll-cue { display: none; }
}

/* ============ Site footer (ported from the homepage) ============ */
.site-footer {
  background: var(--bg-deep);
  color: var(--ink);
  padding: clamp(4rem, 9vh, 7rem) var(--pad-x) 2rem;
  overflow: hidden;
}
.footer-top {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-bottom: clamp(3rem, 6vh, 5rem);
}
.footer-eyebrow {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  margin-bottom: 1.25rem;
}
.footer-eyebrow em { font-style: italic; }
.footer-cta-line {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1.25;
  color: var(--ink);
  max-width: 16ch;
  margin-bottom: 2rem;
}
.footer-news {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 340px;
  border-bottom: 1px solid rgba(236, 231, 218, 0.28);
  padding-bottom: 0.6rem;
  transition: border-color 0.3s ease;
}
.footer-news:focus-within { border-color: var(--gold-bright); }
.footer-news input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.9375rem;
}
.footer-news input::placeholder { color: rgba(236, 231, 218, 0.45); }
.footer-news button {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(224, 200, 130, 0.4);
  background: none;
  color: var(--gold-bright);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.3s ease, transform 0.3s ease;
}
.footer-news button:hover { background: rgba(220, 185, 104, 0.14); transform: translateX(2px); }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.footer-col h6 {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 1.25rem;
  font-weight: 500;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; padding: 0; margin: 0; }
.footer-col a {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(236, 231, 218, 0.7);
  text-decoration: none;
  position: relative;
  transition: color 0.25s ease, padding-left 0.25s ease;
}
.footer-col a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-bright);
  transform: translate(-8px, -50%) scale(0);
  transition: transform 0.25s ease;
}
.footer-col a:hover { color: var(--gold-bright); padding-left: 13px; }
.footer-col a:hover::before { transform: translate(0, -50%) scale(1); }
.footer-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(236, 231, 218, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: rgba(236, 231, 218, 0.5);
}
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { color: rgba(236, 231, 218, 0.5); text-decoration: none; transition: color 0.25s ease; }
.footer-legal a:hover { color: var(--gold-bright); }
.footer-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid rgba(236, 231, 218, 0.22);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  color: rgba(236, 231, 218, 0.8);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.footer-top-btn:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.footer-top-btn i { transition: transform 0.3s ease; }
.footer-top-btn:hover i { transform: translateY(-3px); }
@media (max-width: 760px) {
  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
}

/* ============ Mantra play button ============ */
.pk-mantra-play {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: 0.6rem;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid var(--hair-gold);
  background: rgba(201, 162, 75, 0.08);
  color: var(--gold);
  cursor: pointer;
  font-size: 1.05rem;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.pk-mantra-play:hover { background: rgba(201, 162, 75, 0.16); border-color: var(--gold); }
.pk-mantra-play:active { transform: scale(0.94); }
.pk-mantra-play.is-playing {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bone);
}
/* soft pulse ring while playing */
.pk-mantra-play.is-playing::after {
  content: "";
  position: absolute;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  animation: pk-mantra-pulse 1.6s var(--ease) infinite;
}
.pk-mantra-play { position: relative; }
@keyframes pk-mantra-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-mantra-play.is-playing::after { animation: none; display: none; }
}

/* ============ Chapter tabs ============
   Set in the house's own vocabulary rather than as a generic tab strip: the
   display serif, a gold hairline that fades out at both ends, a lozenge
   between the names, and the live chapter marked by the same lozenge the
   heading ornament and the carousel indicators use. */

.pk-tabs { position: relative; }

.pk-tablist {
  /* not sticky: pinned under the nav it rode over the chapter as you read it,
     cutting a band straight through the panel */
  position: relative;
  z-index: 20;
  /* the same viewport-fixed damask as the section above, so the field carries
     through the row instead of breaking into a flat band of bone across it */
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(201, 162, 75, 0.15), transparent 60%),
    linear-gradient(180deg, rgba(246, 244, 236, 0.72) 0%, rgba(241, 239, 232, 0.82) 100%),
    url("assets/vault-pattern.jpg") center / cover no-repeat;
  background-attachment: fixed, fixed, fixed;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3.4vw, 3rem);
  padding: clamp(1rem, 2.2vh, 1.6rem) var(--pad-x) clamp(1.1rem, 2.4vh, 1.75rem);
}

.pk-tab {
  position: relative;
  padding: 0.2rem 0 0.6rem;
  border: 0;
  background: none;
  cursor: pointer;
  /* the house's own label: the UI face at eleven pixels, medium, widely
     tracked and set in caps — the same setting as .pk-idx and .pk-eyebrow,
     rather than a sentence-case menu item borrowed from elsewhere */
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.3;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  /* 0.65 is where eleven-pixel caps clear 4.5:1 on the damask ground */
  color: rgba(32, 37, 26, 0.65);
  transition: color 0.3s ease;
  white-space: nowrap;
}
.pk-tab:hover { color: rgba(32, 37, 26, 0.85); }

/* a gold rule under the live chapter, drawn from the centre out */
.pk-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #a1793a;
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pk-tab[aria-selected="true"] { color: var(--ink-dark); }
/* under the live chapter the rule is a faint track; a bright bar fills across it
   as the auto-advance timer runs, then the next chapter takes over */
.pk-tab[aria-selected="true"]::after { transform: scaleX(1); background: rgba(161, 121, 58, 0.22); }

.pk-tab-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: #a1793a;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
@keyframes pk-tab-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pk-tab-fill { display: none; }
  .pk-tab[aria-selected="true"]::after { background: #a1793a; }
}

.pk-panel[hidden] { display: none; }

/* a panel arrives rather than appearing */
.pk-panel { animation: pk-panel-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes pk-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-panel { animation: none; }
  .pk-tab::after { transition: none; }
}

@media (max-width: 720px) {
  .pk-tablist {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.5rem;
  }
}

/* ============ Gem pages without a hero film ============
   Pukhraj's hero is a full-bleed film, and its title is set in bone with a
   heavy shadow to hold against it. The generated stone pages have no film —
   the stone sits on the light vault ground — so bone-on-bone would leave the
   name all but invisible. This is the same hero, inked for a light field. */

.pk-hero--flat .pk-title {
  color: var(--ink-dark);
  text-shadow: none;
}
.pk-hero--flat .pk-subtitle {
  color: #a1793a;
  text-shadow: none;
}
.pk-hero--flat .pk-hero-inner { justify-content: flex-start; }
.pk-hero--flat .pk-hero-top { padding-top: clamp(2rem, 6vh, 4.5rem); }

/* ============ Chapter tabs, v2: the column accordion ============
   The same panels, laid side by side as columns that open. Every chapter is
   on screen at once as a name at the foot of its column; the open one widens
   and shows its content. Switch between this and v1 with the control at the
   foot of the screen. */

.pk-viewswitch {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(161, 121, 58, 0.3);
  border-radius: 999px;
  background: rgba(253, 246, 223, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(32, 37, 26, 0.14);
  font-family: var(--font-ui);
}
.pk-viewswitch button {
  border: 0;
  border-radius: 999px;
  padding: 0.42rem 0.9rem;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(32, 37, 26, 0.5);
  transition: background 0.3s ease, color 0.3s ease;
}
.pk-viewswitch button[aria-pressed="true"] {
  background: #20251a;
  color: #f6f2e6;
}

/* ---- the columns ---- */
.pk-tabs[data-view="v2"] .pk-tablist { display: none; }

.pk-tabs[data-view="v2"] {
  display: flex;
  align-items: stretch;
  height: clamp(520px, 78vh, 820px);
  /* the rules are drawn, not bordered: a border cannot go below a whole pixel
     and cannot fade, and at full strength across the width they were the
     heaviest thing on the screen */
  position: relative;
  overflow: hidden;
}

.pk-tabs[data-view="v2"]::before,
.pk-tabs[data-view="v2"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(161, 121, 58, 0) 0%,
    rgba(161, 121, 58, 0.28) 18%,
    rgba(161, 121, 58, 0.28) 82%,
    rgba(161, 121, 58, 0) 100%
  );
  transform: scaleY(0.5);
}
.pk-tabs[data-view="v2"]::before { top: 0; transform-origin: top; }
.pk-tabs[data-view="v2"]::after { bottom: 0; transform-origin: bottom; }

/* every chapter stands on the page as a column; `hidden` is v1's business */
.pk-tabs[data-view="v2"] .pk-panel,
.pk-tabs[data-view="v2"] .pk-panel[hidden] {
  display: block;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  /* one ground across the row: certified carries its dark field only once
     it is opened, not while it is a column beside three cream ones */
  background: #f1efe8;
  border-left: 1px solid rgba(161, 121, 58, 0.14);
  animation: none;
}
.pk-tabs[data-view="v2"] .pk-panel:first-of-type { border-left: 0; }

/* Hovering a column shows the chapter's own picture and nothing else — the
   words are what opening it is for. */
.pk-panel-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  background: center / cover no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.6s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pk-tabs[data-view="v2"] .pk-panel-art { display: block; }
.pk-tabs[data-view="v2"] .pk-panel:hover .pk-panel-art,
.pk-tabs[data-view="v2"] .pk-panel:focus-within .pk-panel-art {
  opacity: 1;
  transform: none;
}

/* the chapter's own content is held back until the column is opened */
.pk-tabs[data-view="v2"] .pk-chapter-inner,
.pk-tabs[data-view="v2"] .pk-cert-inner { display: none; }

/* ---- opened: the chapter as a plate on the screen ---- */

/* the rest of the screen goes quiet behind it */
body.pk-locked::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 88;
  background: rgba(14, 17, 10, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.pk-tabs[data-view="v2"] .pk-panel.is-full {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 90;
  /* a 16:9 plate, sized to whichever of the two edges runs out first, so it
     always lands whole on the screen and never asks to be scrolled */
  width: min(94vw, calc(90vh * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bone, #f1efe8);
  box-shadow: 0 40px 90px rgba(10, 12, 7, 0.45);
  animation: pk-full-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.pk-tabs[data-view="v2"] .pk-panel.is-full.pk-certified { background: #181c12; }
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-chapter-inner,
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-cert-inner { display: grid; }
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-panel-art,
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-panel-open { display: none; }

/* Inside the plate everything is measured against the plate's own height, so
   the chapter fills it exactly rather than running past its foot. */
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-chapter-inner,
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-cert-inner {
  height: 100%;
  max-width: none;
  align-items: stretch;
  gap: 0;
}
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-plate,
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-cert-media { height: 100%; margin: 0; }
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-plate img,
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-plate video,
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-cert-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-chapter-copy,
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-cert-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: clamp(1.25rem, 3vh, 2.75rem) clamp(1.5rem, 3.4vw, 3.25rem);
  overflow: hidden;
}

/* the type steps down to the plate, in its proportions rather than the page's */
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-h2 {
  font-size: clamp(1.35rem, 2.6vh, 2.15rem);
  line-height: 1.1;
  margin: 0;
}
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-body {
  font-size: clamp(0.8125rem, 1.5vh, 1rem);
  line-height: 1.5;
  margin: 0.6rem 0 0;
}
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-benefits { margin-top: 0.75rem; }
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-benefits li { padding: clamp(0.35rem, 1vh, 0.7rem) 0; }
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-benefits h3 { font-size: clamp(0.9375rem, 1.8vh, 1.15rem); }
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-benefits p { font-size: clamp(0.75rem, 1.35vh, 0.875rem); line-height: 1.4; }
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-benefits li > i,
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-benefits li figure { transform: scale(0.85); }
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-chapter-ctas,
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-cert-copy .btn { margin-top: clamp(0.6rem, 1.6vh, 1.25rem); }

@keyframes pk-full-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.pk-panel-close {
  position: absolute;
  top: clamp(0.6rem, 1.6vh, 1rem);
  right: clamp(0.6rem, 1.6vh, 1rem);
  z-index: 95;
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(161, 121, 58, 0.4);
  border-radius: 50%;
  background: rgba(253, 246, 223, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #20251a;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-panel-close { display: grid; }
body.pk-locked { overflow: hidden; }

/* A resting column is not empty: it carries its number and its name, and the
   picture arrives behind them on hover. */
.pk-panel-plate {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.1rem, 1.8vw, 1.9rem);
  pointer-events: none;
  transition: color 0.45s ease;
}
.pk-tabs[data-view="v2"] .pk-panel-plate { display: flex; }

.pk-panel-name {
  font-family: var(--font-display);
  /* light: at this size the 500 weight reads as a slab, not as the face */
  font-weight: 300;
  font-size: clamp(1.75rem, 2.5vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--ink-dark);
  transition: color 0.45s ease;
}

/* a hairline between the name and what qualifies it, the house's own mark */
.pk-panel-name::after {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  margin: 0.8rem 0 0.65rem;
  background: rgba(161, 121, 58, 0.4);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s ease;
}

.pk-panel-name span {
  display: block;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(0.6875rem, 0.8vw, 0.8125rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a6428;
  transition: color 0.45s ease;
}

.pk-panel-no {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3.75rem, 6.5vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: rgba(161, 121, 58, 0.3);
  transition: color 0.45s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* the invitation only appears when the column is under the pointer */
.pk-panel-head { display: block; }

.pk-panel-blurb {
  display: block;
  max-width: 26ch;
  margin-top: 0.85rem;
  /* the UI face, not the display serif: a light serif at 16px on a warm
     ground is where this was losing its legs */
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
  line-height: 1.6;
  color: rgba(32, 37, 26, 0.8);
  transition: color 0.45s ease;
}
.pk-tabs[data-view="v2"] .pk-panel:hover .pk-panel-blurb,
.pk-tabs[data-view="v2"] .pk-panel:focus-within .pk-panel-blurb {
  color: rgba(246, 242, 230, 0.86);
}

.pk-panel-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.15rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d9bd7c;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.pk-tabs[data-view="v2"] .pk-panel:hover .pk-panel-cue,
.pk-tabs[data-view="v2"] .pk-panel:focus-within .pk-panel-cue {
  opacity: 1;
  transform: none;
}

.pk-tabs[data-view="v2"] .pk-panel:hover .pk-panel-name::after,
.pk-tabs[data-view="v2"] .pk-panel:focus-within .pk-panel-name::after {
  width: 64px;
  background: rgba(217, 189, 124, 0.85);
}
.pk-tabs[data-view="v2"] .pk-panel:hover .pk-panel-no,
.pk-tabs[data-view="v2"] .pk-panel:focus-within .pk-panel-no { transform: translateY(-4px); }

/* over the picture, the plate inks light */
.pk-tabs[data-view="v2"] .pk-panel:hover .pk-panel-name,
.pk-tabs[data-view="v2"] .pk-panel:focus-within .pk-panel-name { color: #f6f2e6; }
.pk-tabs[data-view="v2"] .pk-panel:hover .pk-panel-name span,
.pk-tabs[data-view="v2"] .pk-panel:focus-within .pk-panel-name span { color: #d9bd7c; }
.pk-tabs[data-view="v2"] .pk-panel:hover .pk-panel-no,
.pk-tabs[data-view="v2"] .pk-panel:focus-within .pk-panel-no { color: rgba(246, 242, 230, 0.9); }


/* a wash under the plate so the type holds against any picture */
.pk-panel-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 22, 14, 0.55) 0%, rgba(18, 22, 14, 0.15) 45%, rgba(18, 22, 14, 0.6) 100%);
}

.pk-tabs[data-view="v2"] .pk-panel.is-full .pk-panel-plate { display: none; }

.pk-panel-open,
.pk-panel-close,
.pk-panel-plate,
.pk-panel-art {
  /* built for v2 and appended to every panel, so v1 has to be told: an
     unstyled button was showing up under the first chapter as bare chrome */
  display: none;
}

.pk-tabs[data-view="v2"] .pk-panel-open {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: transparent;
}

@media (max-width: 900px) {
  /* no room for four columns — v2 falls back to the stack */
  .pk-tabs[data-view="v2"] { display: block; height: auto; }
  .pk-tabs[data-view="v2"] .pk-panel { border-left: 0; border-top: 1px solid rgba(161, 121, 58, 0.22); }
  .pk-tabs[data-view="v2"] .pk-chapter-inner,
  .pk-tabs[data-view="v2"] .pk-cert-inner { display: grid; }
  .pk-tabs[data-view="v2"] .pk-panel-art { display: none; }
  .pk-panel-open,
.pk-panel-close,
.pk-panel-plate,
.pk-panel-art {
  /* built for v2 and appended to every panel, so v1 has to be told: an
     unstyled button was showing up under the first chapter as bare chrome */
  display: none;
}

.pk-tabs[data-view="v2"] .pk-panel-open { display: none; }
  .pk-tabs[data-view="v2"] .pk-chapter-inner,
  .pk-tabs[data-view="v2"] .pk-cert-inner { opacity: 1; }
}

/* Pukhraj dock: match the homepage search size + subtle hamburger (smaller buttons) */
body.pk-page-pukhraj .pk-dock .ai-btn { width: 34px; height: 34px; font-size: 1rem; }
body.pk-page-pukhraj .pk-dock .ai-bar { padding: 0.4rem; }

/* vault suggestion CTAs: compact so labels sit on one line in the narrow dock panel */
body.pk-page-pukhraj .pk-dock .ai-action {
  padding: 0.6rem 0.6rem;
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* branded focus ring (replaces the browser's default blue) — matches the site's gold */
.ai-btn:focus-visible,
.ai-action:focus-visible {
  outline: 2px solid rgba(201, 162, 75, 0.55);
  outline-offset: 2px;
}