/* ============================================================================
   Components — specimen cards, the sapphire deck, the journey, the sequence,
   the contact panel and the footer socials.
   ========================================================================== */

/* --- media frame (shared by every gem visual) -------------------------- */
.frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ivory-3);
  border-radius: var(--radius);
  isolation: isolate;
}
.frame img,
.frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.25s var(--ease-out), opacity var(--med) var(--ease);
}
.frame video { position: absolute; inset: 0; opacity: 0; }
.frame.has-video.is-playing video { opacity: 1; }
.frame.has-video.is-playing img { opacity: 0; }

/* light sweeping across the frame on hover — reads as a catch of light,
   not as a "shine" gimmick: low contrast, slow, single pass */
.frame::after {
  content: '';
  position: absolute;
  inset: -30% -60%;
  background: linear-gradient(104deg,
    transparent 38%, rgba(255, 255, 255, 0.4) 50%, transparent 62%);
  transform: translateX(-62%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* --- trade data, set as a specimen label rather than a product spec ----- */
.spec {
  display: grid;
  gap: 0;
  margin-top: 0.3rem;
  border-top: 1px solid var(--line-soft);
}
.spec__row {
  display: grid;
  grid-template-columns: 5.9rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.44rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.795rem;
}
.spec__k {
  color: var(--ink-4);
  letter-spacing: 0.085em;
  text-transform: uppercase;
  font-size: 0.66rem;
  align-self: center;
}
.spec__v { color: var(--ink-2); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: var(--t-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.status::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.status--available { color: var(--gold); }
.status--sold { color: var(--sold); }

/* What the enquiry link used to occupy: the stone's own shorthand, drawn
   from its record. Set quietly, so the foot of the piece reads as a caption
   rather than a call to action. */
.seq__line {
  font-size: var(--t-small);
  color: var(--ink-3);
  position: relative;
  padding-left: 1.5rem;
}
.seq__line::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.9rem;
  height: 1px;
  background: var(--line-firm);
}

/* --- who we are: a statement, two columns, no plate -------------------- */
.stmt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: start;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  margin-top: clamp(2rem, 4vw, 3.25rem);
  padding-top: 1.6rem;
}
.stat { display: grid; gap: 0.3rem; }
.stat__n { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1; }

/* ============================================================================
   THE SAPPHIRE DECK

   A pinned stage. The copy holds still; nine specimen cards travel through
   real depth beside it as the page scrolls. The transforms are written from
   JavaScript every frame (see js/deck.js) — everything here is the part that
   does not change: the plate, its hairline, its elevation, and the sheen
   panel that the script slides across it.
   ========================================================================== */
.deck-track { position: relative; }
.deck-stick {
  display: flex;
  align-items: center;
  overflow: hidden;              /* cards fly in and out of a window */
  padding-block: var(--section-y);
}
.deck-stick__inner {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: center;
}
.deck-copy .sec-head { margin-bottom: 0; }
.deck-notes { padding: clamp(2.25rem, 5vw, 3.75rem) var(--gutter) clamp(3rem, 6vw, 5rem); }

.deck { display: grid; gap: clamp(1rem, 2vw, 1.6rem); align-content: center; }

.deck__cards {
  position: relative;
  /* bleeds into the right gutter so the stack has somewhere to travel out
     to, rather than stopping short of an edge the visitor can see */
  margin-right: calc(-1 * var(--gutter));
  height: clamp(330px, 60vh, 486px);
  display: grid;
  place-items: center;
  perspective: 1500px;
  perspective-origin: 50% 46%;

  /* the drag surface. pan-y leaves vertical scrolling to the browser, so a
     downward flick over the cards still scrolls the page and only a
     sideways pull reaches the deck */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.deck__cards.is-dragging { cursor: grabbing; }
.deck__cards:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 8px;
  border-radius: 4px;
}
.deck__cards img {
  -webkit-user-drag: none;
  /* the plate is the handle; the image must not swallow the press */
  pointer-events: none;
}

.card {
  grid-area: 1 / 1;
  width: clamp(196px, 24vw, 292px);
  transform-style: preserve-3d;
  will-change: transform, opacity;
  /* the script owns transform and opacity; nothing here may transition them
     or the placement would fight the follower and lag behind the scroll */
}
.card__plate {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 9px 9px 0;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.card.is-front .card__plate {
  box-shadow: var(--shadow-lift);
  border-color: var(--line-firm);
}

.card__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ivory-3);
}
.card__frame img { width: 100%; height: 100%; object-fit: cover; }

/* the catch of studio light, slid across the plate by the script */
.card__sheen {
  position: absolute;
  inset: -25% -45%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(102deg,
    transparent 38%, rgba(255, 255, 255, 0.62) 50%, transparent 62%);
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.66rem 0.15rem 0.72rem;
}
.card__name { font-family: var(--display); font-size: 0.98rem; letter-spacing: -0.005em; }
.card__meta { display: inline-flex; align-items: center; gap: 0.5rem; }
.card__carat {
  font-size: 0.68rem;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.card__swatch {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* --- the deck's own progress rail --------------------------------------- */
.deck__rail {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.deck__ticks {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--n, 9), 1fr);
  height: 18px;
}
/* a hairline with a finger-sized hit area around it */
.tick {
  position: relative;
  height: 100%;
  margin-right: 4px;
  padding: 0;
  background: none;
  border-radius: 2px;
}
.tick::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--line-firm);
  transition: background var(--fast) var(--ease);
}
.tick:hover::before { background: var(--gold-2); }
.tick__thumb {
  position: absolute;
  left: 0; top: 8px;
  height: 2px;
  width: calc(100% / var(--n, 9) - 4px);
  background: var(--gold);
  will-change: transform;
  pointer-events: none;
}

/* Said once, then gone. A deck that must be dragged has to say so, or a
   visitor who never tries takes the first stone for a picture. */
.deck__hint,
.jr-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  color: var(--ink-4);
  transition: opacity 0.5s var(--ease);
}
.hint__arrows { width: 22px; height: 11px; flex: none; }
.deck-track.is-touched .deck__hint,
.jr-track.is-touched .jr-hint { opacity: 0; }

/* --- supporting notes --------------------------------------------------- */
.notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-top: clamp(1.5rem, 2.5vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.note { display: grid; gap: 0.6rem; align-content: start; }
.note p { font-size: var(--t-small); line-height: 1.6; }

/* ============================================================================
   THE SEQUENCE
   One continuous run, not a grid. Each piece gets a full band of the page so
   the stone beside it has room, and clips and stills get identical treatment
   so the run never splits into "the video part" and "the photo part".
   ========================================================================== */
.sequence {
  display: grid;
  gap: clamp(2.75rem, 5vw, 4.5rem);
}

.seq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.seq--flip > .seq__media { order: 2; justify-self: start; }

.seq__media {
  position: relative;
  width: 100%;
  max-width: 390px;
  justify-self: end;
}
.seq__frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--med) var(--ease), border-color var(--med) var(--ease);
}
.seq__media:hover .seq__frame {
  box-shadow: var(--shadow-lift);
  border-color: var(--line-firm);
}
.seq__frame .frame { aspect-ratio: 4 / 5; }
.seq__media:hover .frame img { transform: scale(1.04); }
.seq__media:hover .frame::after {
  opacity: 1;
  transform: translateX(62%);
  transition: transform 1.45s var(--ease-out), opacity 0.3s;
}

/* quiet marker so a clip is legible as a clip without a play-button cliche */
.seq__tag {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  z-index: 3;
  padding: 0.34rem 0.66rem;
  background: rgba(250, 247, 242, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-2);
}

.seq__body { display: grid; gap: 0.95rem; align-content: center; }
.seq__name { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.seq__note { font-size: var(--t-body); color: var(--ink-2); max-width: 30rem; }
.seq__body .spec { margin-top: 0.4rem; max-width: 26rem; }
.seq__foot {
  display: flex;
  align-items: baseline;
  gap: 0.35rem 1.1rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line-soft);
}

/* --- how a stone is described: a compact strip, not six cards ----------- */
/* ----------------------------------------------------------------------
   HOW A STONE IS DESCRIBED

   Six definitions, unchanged. What changed is that they are no longer five
   flat columns of text: the gap between them is a hairline, so the grid
   reads as a single plate divided into panels rather than as a row that
   happened to wrap. Each panel carries its index, the term in the display
   face, and the explanation beneath — a hierarchy, where before there were
   two sizes of the same voice.

   The reveal is a stagger in reading order with a small tilt. perspective()
   is inside the transform rather than on a parent, because the plate is
   clipped for its corner radius and a parent perspective would be flattened
   by that clip.
   -------------------------------------------------------------------- */
.reading {
  position: relative;
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
/* The studio key, carried faintly behind the plate. Kept inside its own
   box on purpose: bleeding it past the container widened the document and
   gave the page 27px of horizontal scroll. */
.reading::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 64%;
  background: radial-gradient(58% 100% at 26% 0%,
    rgba(154, 123, 67, 0.06), transparent 72%);
  pointer-events: none;
  z-index: -1;
}

.criteria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.criterion {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  background: var(--paper);
  padding: clamp(1.15rem, 2vw, 1.7rem);
  transition: background var(--med) var(--ease);
}
.criterion:hover { background: var(--ivory); }
.criterion__n {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.criterion__k {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.1;
}
.criterion__t {
  font-size: var(--t-small);
  line-height: 1.58;
  color: var(--ink-2);
  margin-top: 0.1rem;
}
/* a shallow tilt on entry — enough to feel like a panel arriving, not
   enough to be read as an effect */
.criteria [data-reveal] {
  transform: perspective(900px) translate3d(0, 24px, 0) rotateX(6deg);
}
.criteria [data-reveal].is-in { transform: none; }

/* ============================================================================
   MINE TO MARKET — the journey

   A pinned stage again, told as a sequence rather than a spread: the rail
   draws across the copy while the five stages rise through the depth beside
   it, with the 3D stone present the whole way. Below 900px the pin is
   dropped entirely (js/journey.js stops driving the stage) and the stages
   become a plain vertical run — a phone cannot hold a stage panel and its
   copy inside one screen, and squeezing it would be worse than restating it.
   ========================================================================== */
.jr-track { position: relative; }
.jr-stick {
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: var(--section-y);
}
.jr-stick__inner {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: center;
}
.jr-copy .sec-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }

/* --- the rail ----------------------------------------------------------- */
.jr-rail { position: relative; }
.jr-rail__line {
  position: absolute;
  top: 3px; left: 0;
  right: calc(100% / var(--jr-n, 5));
  height: 1px;
  background: var(--line-firm);
}
.jr-rail__fill {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}
.jr-rail__nodes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--jr-n, 5), minmax(0, 1fr));
}
.jr-node {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  text-align: left;
  padding: 0 0.5rem 0 0;
  background: none;
}
.jr-node i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ivory-2);
  box-shadow: inset 0 0 0 1px var(--line-firm);
  transition: background 0.45s var(--ease), box-shadow 0.45s var(--ease),
              transform 0.45s var(--ease-out);
}
.jr-node.is-on i { background: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.jr-node.is-now i { transform: scale(1.55); }
.jr-node em {
  font-style: normal;
  font-size: 0.6rem;
  /* five labels share the copy column, and "Rough & cut" is the long one —
     the tracking comes down so the stages never crowd their neighbours */
  letter-spacing: 0.085em;
  line-height: 1.3;
  padding-right: 0.55rem;
  color: var(--ink-4);
  transition: color 0.45s var(--ease);
}
.jr-node.is-now em { color: var(--ink); }
.jr-node:hover i { box-shadow: inset 0 0 0 1px var(--gold-2); }
.jr-node:hover em { color: var(--ink-2); }
.jr-hint { margin-top: 1.1rem; }

/* --- the stages --------------------------------------------------------- */
/* The stage is a window the stages are pulled through. Clipping here is
   what lets a panel leave to the left without sliding across the copy —
   the negative margin gives its shadow somewhere to fall before the cut. */
.jr-stage {
  overflow: hidden;
  margin: -18px;
  padding: 18px;
}
.jr-panels {
  display: grid;
  perspective: 1300px;
  perspective-origin: 50% 50%;

  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.jr-panels.is-dragging { cursor: grabbing; }
.jr-panels:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 8px;
  border-radius: 4px;
}
.jr-panels img { -webkit-user-drag: none; pointer-events: none; }
.jr-panel {
  grid-area: 1 / 1;
  align-self: center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.jr-panel__inner {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: clamp(1.25rem, 2.2vw, 1.95rem);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: clamp(0.85rem, 1.6vw, 1.3rem);
  transition: box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.jr-panel.is-live .jr-panel__inner {
  box-shadow: var(--shadow-lift);
  border-color: var(--line-firm);
}
.jr-panel__head { display: grid; gap: 0.5rem; }
.jr-panel__n { font-variant-numeric: tabular-nums; }
.jr-panel__name { font-size: clamp(1.45rem, 2.6vw, 2.05rem); }
.jr-panel__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}
.jr-panel__copy { display: grid; gap: 0.8rem; }
.jr-panel__note { font-size: var(--t-small); line-height: 1.6; }
.jr-panel__media {
  width: clamp(104px, 12vw, 152px);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  background: var(--ivory-3);
}
.jr-panel__media img { width: 100%; height: auto; display: block; }

.jr-origins { display: grid; gap: 0.7rem; margin-top: 0.15rem; }
.jr-origins li { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: 0.75rem; }
.jr-origins__code {
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--gold-2);
  line-height: 1.4;
}
.jr-origins__body { display: grid; gap: 0.12rem; }
.jr-origins__body b { font-weight: 500; font-size: 0.86rem; }
.jr-origins__body .muted { font-size: 0.775rem; line-height: 1.5; }

.jr-fairs { display: grid; gap: 0.5rem; margin-top: 0.15rem; }
.jr-fairs li { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.jr-fairs__n { font-family: var(--display); font-size: 1rem; }
.jr-fairs__p { font-size: var(--t-small); color: var(--ink-3); }

.pill-row { display: flex; flex-wrap: wrap; gap: 0.42rem; margin-top: 0.15rem; }
.pill {
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.32rem 0.72rem;
  background: var(--paper);
}

/* ============================================================================
   FOOTER SOCIALS
   The platforms' own marks, quiet in ink until you reach for one — and then
   their real brand colour, which is the whole point of using the real mark.
   ========================================================================== */
.footer__founders {
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ink-2);
  letter-spacing: -0.004em;
}

.socials { display: grid; gap: 0.15rem; }
.social {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  padding: 0.42rem 0;
}
.social__mark {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--paper);
  color: var(--ink-3);
  transition: color var(--med) var(--ease), border-color var(--med) var(--ease),
              background var(--med) var(--ease), transform var(--med) var(--ease-out);
}
.social__mark svg { width: 15px; height: 15px; }
.social__text { display: grid; gap: 0.04rem; }
.social__net { font-size: 0.6rem; letter-spacing: 0.17em; }
.social__handle {
  font-size: var(--t-small);
  color: var(--ink);
  transition: color var(--fast) var(--ease);
}
.social:hover .social__mark { transform: translateY(-2px); }
.social:hover .social__handle { color: var(--gold); }
.social--instagram:hover .social__mark {
  color: #fff;
  border-color: transparent;
  background: radial-gradient(circle at 28% 108%,
    #fdf497 0%, #fd5949 45%, #d6249f 62%, #285aeb 92%);
}
.social--facebook:hover .social__mark { color: #fff; border-color: transparent; background: #1877f2; }
.social--tiktok:hover .social__mark { color: #fff; border-color: transparent; background: #010101; }

/* ============================================================================
   THE CONTACT PANEL
   Hung off the header button rather than laid out as a section — which is
   what let the page lose a whole band of scroll without losing a detail.
   ========================================================================== */
.cpanel__scrim {
  position: fixed;
  inset: 0;
  z-index: 44;
  background: rgba(21, 18, 15, 0.16);
  opacity: 0;
  transition: opacity 0.34s var(--ease);
}
.cpanel__scrim.is-open { opacity: 1; }

.cpanel {
  position: fixed;
  z-index: 46;
  top: 4.65rem;
  right: var(--gutter);
  width: min(384px, calc(100vw - 2 * var(--gutter)));
  opacity: 0;
  transform: translate3d(0, -12px, 0);
  transition: opacity 0.32s var(--ease), transform 0.42s var(--ease-out);
}
.cpanel.is-open { opacity: 1; transform: none; }

.cpanel__card {
  background: var(--paper);
  border: 1px solid var(--line-firm);
  border-radius: 6px;
  box-shadow: var(--shadow-lift);
  padding: clamp(1.1rem, 2vw, 1.45rem);
  display: grid;
  gap: 1rem;
  max-height: calc(100svh - 6.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cpanel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.cpanel__title { font-size: 1.42rem; margin-top: 0.4rem; }
.cpanel__close {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--ink-3);
  flex: none;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.cpanel__close svg { width: 15px; height: 15px; }
.cpanel__close:hover { color: var(--ink); border-color: var(--line-firm); background: var(--ivory); }

.cpanel__lead { font-size: var(--t-small); color: var(--ink-2); line-height: 1.6; }

.cpanel__rows { display: grid; border-top: 1px solid var(--line-soft); }
.cpanel__row {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) 1.1rem;
  align-items: center;
  gap: 0.85rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--line-soft);
  transition: padding-left var(--med) var(--ease-out);
}
.cpanel__row:hover { padding-left: 0.4rem; }
.cpanel__mark { display: grid; place-items: center; color: var(--ink-3); }
.cpanel__mark svg { width: 18px; height: 18px; }
.cpanel__row--whatsapp .cpanel__mark { color: #25d366; }
.cpanel__text { display: grid; gap: 0.1rem; }
.cpanel__k { font-size: 0.6rem; letter-spacing: 0.17em; }
.cpanel__v { font-size: 0.94rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.cpanel__hint { font-size: 0.72rem; color: var(--ink-4); }
.cpanel__go { color: var(--ink-4); transition: transform var(--med) var(--ease-out); }
.cpanel__go svg { width: 16px; height: 16px; }
.cpanel__row:hover .cpanel__go { transform: translateX(3px); }

.cpanel__place { display: grid; gap: 0.7rem; }
.cpanel__place-head {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}
.cpanel__place-head > div { display: grid; gap: 0.18rem; }
.cpanel__addr {
  font-style: normal;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.cpanel__pending { font-size: 0.88rem; color: var(--ink-4); font-style: italic; }

.cpanel__map {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--ivory-2);
}
.cpanel__map iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  opacity: 0;
  /* eased back a touch so the map sits in the page's palette rather than
     shouting over it — still perfectly legible */
  filter: saturate(0.88) contrast(0.98);
  transition: opacity 0.5s var(--ease);
}
.cpanel__map.is-ready iframe { opacity: 1; }
.cpanel__map-wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 1rem;
  transition: opacity 0.4s var(--ease);
}
.cpanel__map.is-ready .cpanel__map-wait { opacity: 0; }

/* No frame would load. The box stops pretending to be a map and becomes
   what it can honestly be: the way out to one. */
.cpanel__map.is-failed {
  aspect-ratio: auto;
  background: var(--ivory);
  border-style: dashed;
  border-color: var(--line-firm);
}
.cpanel__map.is-failed .cpanel__map-wait {
  position: static;
  display: grid;
  gap: 0.4rem;
  justify-items: start;
  place-items: start;
  text-align: left;
  padding: 0.95rem 1rem 1rem;
}
.cpanel__map-out {
  font-size: var(--t-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line-firm);
  padding-bottom: 0.2rem;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.cpanel__map-out:hover { color: var(--gold); border-color: var(--gold); }
.cpanel__map-note {
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-4);
}

.cpanel__dir {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
  font-size: var(--t-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line-firm);
  padding-bottom: 0.22rem;
  transition: color var(--fast), border-color var(--fast);
}
.cpanel__dir svg { width: 15px; height: 15px; }
.cpanel__dir:hover { color: var(--gold); border-color: var(--gold); }

/* ============================ responsive ================================= */

@media (max-width: 1080px) {
  .deck-stick__inner,
  .jr-stick__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
  .deck-copy .sec-head { gap: 0.8rem; }
  .deck__cards { margin-right: 0; height: clamp(300px, 46vh, 408px); }
  /* the card is the thing being looked at, so it takes most of the
     screen width rather than half of it */
  .card { width: clamp(196px, 62vw, 262px); }
  .deck__hint { display: none; }
  .deck-notes { padding: clamp(1.75rem, 4vw, 3rem) var(--gutter) clamp(2.25rem, 5vw, 4rem); }
}

@media (max-width: 980px) {
  .stmt { grid-template-columns: minmax(0, 1fr); }
  .criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The journey is a drag at every width now — a phone gets the same single
   stage, not a squeezed copy of the desktop one and not the five-panel
   vertical run the pinned version needed below this width. */
@media (max-width: 900px) {
  .jr-panel__body { grid-template-columns: minmax(0, 1fr); }
  .jr-panel__media { width: clamp(126px, 33vw, 186px); }
  .jr-panel__inner { padding: 1.15rem 1.2rem 1.3rem; gap: 0.75rem; }
  .jr-node em { font-size: 0.56rem; letter-spacing: 0.1em; }
  .jr-hint { margin-top: 0.9rem; }

  .seq { grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
  .seq--flip > .seq__media { order: 0; justify-self: start; }
  .seq__media { max-width: 285px; justify-self: start; }
  .sequence { gap: clamp(2.25rem, 6vw, 3rem); }
  .seq__name { font-size: 1.45rem; }
  .reading { margin-top: clamp(2.5rem, 6vw, 4rem); }
}

/* Reduced motion: neither stage is driven, so both lay out flat and every
   item is on the page at once, reachable without a gesture. */
.deck-track.is-flat .deck-stick { display: block; overflow: visible; }
.deck-track.is-flat .deck-stick__inner {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.deck-track.is-flat .deck__cards {
  margin-right: 0;
  height: auto;
  perspective: none;
  cursor: default;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(0.7rem, 1.4vw, 1.15rem);
  place-items: stretch;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.deck-track.is-flat .card { grid-area: auto; width: 100%; transform: none; opacity: 1; }
.deck-track.is-flat .deck__rail { display: none; }

.jr-track.is-flat .jr-stick { display: block; overflow: visible; }
.jr-track.is-flat .jr-stick__inner { grid-template-columns: minmax(0, 1fr); }
.jr-track.is-flat .jr-stage { overflow: visible; margin: 0; padding: 0; }
.jr-track.is-flat .jr-panels {
  perspective: none;
  cursor: default;
  gap: clamp(1rem, 3vw, 1.5rem);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.jr-track.is-flat .jr-panel {
  grid-area: auto; align-self: auto; transform: none; opacity: 1;
}
.jr-track.is-flat .jr-hint,
.deck-track.is-flat .deck__hint { display: none; }

@media (max-width: 560px) {
  .spec__row { grid-template-columns: 4.6rem minmax(0, 1fr); font-size: 0.74rem; }
  .criteria { grid-template-columns: minmax(0, 1fr); }
  .criterion { padding: 1.05rem 1.1rem; }
  .cpanel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translate3d(0, 100%, 0);
    transition: transform 0.44s var(--ease-out), opacity 0.3s var(--ease);
  }
  .cpanel__card {
    border-radius: 14px 14px 0 0;
    border-bottom: 0;
    max-height: 84svh;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }
}