/* ═══════════════════════════════════════════════════════════════
   THE COLLECTION, REDESIGNED: "the counter, not the catalogue"

   THE COLLECTION PAGE'S STYLES, loaded by collection.html, which
   serves /collection. Promoted from the /collection-redesign
   preview on 2026-10-13; the file name is kept from the preview,
   and the old address redirects (_redirects). "The live stylesheet"
   below means styles.css.

   Ported from docs/collection-redesign-proposal.html (rev 2, the
   approved mockup). Everything here is namespaced `crx-` so nothing
   leaks into the rest of the site, and everything that the live
   stylesheet already provides (masthead, buttons, the browse box,
   the dial-grid cards, the waitlist, the footer) is REUSED from
   styles.css rather than duplicated here.

   The CSP forbids inline styles; geometry that must be measured at
   runtime (masthead height, sticky offsets, the stage cap) arrives
   through CSS custom properties set from JavaScript, which the
   policy permits.
   ═══════════════════════════════════════════════════════════════ */

/* ── tokens this page adds on top of styles.css ─────────────────
   Same dark-first pattern as the site sheet: dark values on :root,
   light values under [data-theme="light"] and the OS preference. */
:root {
  --crx-scrim: rgba(5, 5, 8, .66);
  --crx-dialshadow: 0 22px 44px -22px rgba(0, 0, 0, .95);

  /* measured by script once the page is up, safe fallbacks first */
  --crx-mast-h: 4.4rem;
  --crx-stick-top: 7.6rem;
  --crx-stick-h: 34rem;
  --crx-stage-cap: 26rem;
}
:root[data-theme="light"] {
  --crx-scrim: rgba(238, 233, 223, .72);
  --crx-dialshadow: 0 22px 40px -20px rgba(56, 44, 22, .5);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --crx-scrim: rgba(238, 233, 223, .72);
    --crx-dialshadow: 0 22px 40px -20px rgba(56, 44, 22, .5);
  }
}

/* The site sheet asks for smooth scrolling, which is right for a
   normal page and wrong for this one: the journey is tens of screens
   tall, and a room jump or a waitlist link would crawl the whole
   way. Every jump on this page is instant. */
html { scroll-behavior: auto; }

/* ── page head, compressed to one tight band (2026-07-27) ───────
   The whole run above the journey (masthead ≈71px + this head +
   rooms bar ≈44px) must leave the counter and a FULL dial visible
   on a ~800px laptop without scrolling, so this head is held to
   roughly 90px: eyebrow + a smaller single-line headline. The
   journey's sticky offsets need no separate correction, measure()
   in the script reads live offsetHeights, so the compression flows
   through jTop/stickTop on its own. */
section.crx-head {
  padding-block: clamp(.8rem, 2vh, 1.4rem) clamp(.6rem, 1.6vh, 1rem);
}
.crx-headrow {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: .8rem 2rem; flex-wrap: wrap;
}
.crx-head .section-head { margin-bottom: 0; gap: .45rem; }
.crx-head h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }

/* ── wayfinding: rooms bar + refine, sticky under the masthead ── */
.crx-wayfindband {
  position: sticky; top: var(--crx-mast-h); z-index: 50;
  background: color-mix(in srgb, var(--void) 90%, transparent);
  backdrop-filter: blur(12px);
  border-block: 1px solid var(--edge);
}
.crx-wayfind {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem;
}
.crx-rooms {
  display: flex; gap: 1.5rem; align-items: stretch;
  overflow-x: auto; scrollbar-width: none; min-width: 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 1rem, #000 calc(100% - 1.6rem), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1rem, #000 calc(100% - 1.6rem), transparent);
}
.crx-rooms::-webkit-scrollbar { display: none; }
.crx-room {
  font-family: var(--data); font-size: .64rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute);
  background: none; border: 0; padding: .85rem 0 .75rem; cursor: pointer;
  border-bottom: 1px solid transparent; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, opacity .2s ease;
}
.crx-room:hover { color: var(--bone); }
.crx-room[aria-pressed="true"] { color: var(--gold); border-bottom-color: var(--gold); }
.crx-room:disabled { opacity: .28; cursor: default; }
.crx-room:disabled:hover { color: var(--mute); }

.crx-refinebtn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--data); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute);
  background: none; border: 1px solid var(--edge);
  padding: .55rem .95rem; cursor: pointer; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.crx-refinebtn:hover { color: var(--bone); border-color: var(--mute); }
.crx-refinebtn svg { display: block; }
/* The icon's colours live here, not in SVG attributes: a CSS
   variable is not valid inside a presentation attribute. */
.crx-refinebtn svg line { stroke: currentColor; }
.crx-refinebtn svg circle { fill: var(--void); stroke: currentColor; }
.crx-refinebtn .crx-dot {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--gold); display: none;
}
.crx-refinebtn svg rect { fill: none; stroke: currentColor; }
.crx-refinebtn.has-active { color: var(--gold); border-color: var(--gold); }
.crx-refinebtn.has-active .crx-dot { display: block; }
/* All + Refine sit as a matched pair at the bar's right edge; in the
   All room the grid carries its own facet box, so Refine steps away
   and the pressed All button marks where you are. */
.crx-wayfind-actions { display: flex; gap: .5rem; align-items: center; flex: 0 0 auto; }
.crx-allbtn[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
body[data-crx-mode="all"] .crx-wayfind .crx-refinebtn:not(.crx-allbtn) { display: none; }

/* ── the second level: a family's colours under the rooms bar ────
   GROUND COLOUR is the chosen sub-facet: Dr. Cato's direction was
   "whatever the options are", and colour is the facet customers
   decide on first (it leads window.FACETS for the same reason);
   swapping to metal or material later is a one-line change of
   SUB_KEY in the script. The fold animates by grid track
   (0fr → 1fr), so no heights are ever measured; reduced-motion
   turns the transition off and the row simply appears. */
.crx-subrow {
  display: grid; grid-template-rows: 0fr;
  opacity: 0; visibility: hidden;
  transition: grid-template-rows .42s cubic-bezier(.22, .7, .3, 1),
              opacity .3s ease, visibility 0s linear .42s;
}
.crx-subrow.is-open {
  grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition-delay: 0s;
}
.crx-subrow-clip { overflow: hidden; min-height: 0; }
.crx-subrow-inner {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .1rem 0 .8rem;
}
.crx-sub-label {
  font-family: var(--data); font-size: .56rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mute); white-space: nowrap;
  margin-right: .45rem;
}
/* colour-swatch pills, the Refine facets' circular swatch, carried
   into a labelled pill so the row reads as words, not paint chips */
.crx-subopt {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--data); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute);
  background: none; border: 1px solid var(--edge);
  padding: .3rem .75rem .3rem .38rem; cursor: pointer; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, opacity .2s ease;
}
.crx-subopt .crx-swd {
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  border: 1px solid var(--edge); flex: 0 0 auto;
}
.crx-subopt:hover { color: var(--bone); border-color: var(--mute); }
.crx-subopt:disabled { cursor: default; }
.crx-subopt[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
.crx-subopt[aria-pressed="true"] .crx-swd {
  box-shadow: 0 0 0 1.5px var(--void), 0 0 0 2.5px var(--gold);
}
/* the pills rise in one after another as the row unfolds; each pill's
   stagger delay is set from script via element.style (CSSOM, the
   CSP forbids style="" attributes, not this) */
.crx-subrow.is-open .crx-subin {
  animation: crxSubIn .4s cubic-bezier(.22, .61, .36, 1) backwards;
}
@keyframes crxSubIn {
  from { opacity: 0; transform: translateY(-7px); }
  to   { opacity: 1; transform: none; }
}

/* ── active refinements, chips riding inside the pinned counter ──
   NOTE: styles.css already owns a `.chip` class (the old filter
   pills), so these are crx-chips throughout. */
.crx-chipsrow {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  padding-block: .2rem;
}
.crx-chipsrow[hidden] { display: none; }
.crx-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--body); font-size: .76rem;
  border: 1px solid var(--edge);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  color: var(--bone); padding: .28rem .65rem; cursor: pointer;
  transition: border-color .2s ease;
}
.crx-chip:hover { border-color: var(--mute); }
.crx-chip .crx-x { color: var(--mute); font-size: .9rem; line-height: 1; }
.crx-chip:hover .crx-x { color: var(--bone); }
.crx-chip .crx-swd {
  width: .7rem; height: .7rem; border-radius: 50%;
  border: 1px solid var(--edge);
}
.crx-chip--clear { color: var(--mute); border-style: dashed; }
.crx-chip--clear:hover { color: var(--bone); }

/* ── the journey: a tall room the counter pins inside ─────────── */
section.crx-journey { position: relative; padding-block: 0; }
body[data-crx-mode="all"] .crx-journey { display: none; }
.crx-jsticky {
  position: sticky; top: var(--crx-stick-top);
  height: var(--crx-stick-h);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(.3rem, 1.2vh, .9rem);
  overflow: hidden;
}

/* ── the counter ──────────────────────────────────────────────── */
.crx-counter {
  display: grid; gap: clamp(1.2rem, 3.5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
  min-height: 0;
}
@media (min-width: 880px) { .crx-counter { grid-template-columns: 1.12fr .88fr; } }

.crx-stagewrap {
  position: relative; overflow: hidden; min-width: 0;
  width: 100%; max-width: min(100%, var(--crx-stage-cap));
  margin-inline: auto;
}
.crx-stage {
  --accent: #d8ab52;
  position: relative; width: 100%;
  aspect-ratio: 1.38;
  --dx: 1;
}
@media (max-width: 879px) { .crx-stage { aspect-ratio: 1.12; } }
.crx-stage::before {
  content: ""; position: absolute; inset: -6%;
  background: radial-gradient(circle at 50% 46%,
              color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 62%);
  pointer-events: none;
}

/* One dial = the design's real artwork with live hands drawn on a
   canvas above it, the same construction as the live collection
   cards, wrapped in a circle. */
.crx-disc {
  display: block;   /* the disc is a <span>; without this it stays inline and collapses to 0x0, hiding the dial */
  position: relative; width: 100%; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; isolation: isolate;
}
.crx-disc img, .crx-disc canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.crx-disc img { object-fit: cover; z-index: 1; -webkit-user-drag: none; user-select: none; }
.crx-disc canvas { z-index: 3; pointer-events: none; }

.crx-slot {
  position: absolute; top: 50%; transform: translateY(-50%);
  border-radius: 50%; padding: 0; border: 0; background: none;
}
.crx-slot .crx-disc { width: 100%; }
.crx-slot--cur {
  left: 50%; transform: translate(-50%, -50%);
  width: min(66%, 24.5rem); z-index: 2;
  box-shadow: var(--crx-dialshadow);
  animation: crxSlotIn .5s cubic-bezier(.22, .7, .3, 1);
}
.crx-slot--prev, .crx-slot--next {
  width: 38%; z-index: 1; cursor: pointer;
  opacity: .3; filter: saturate(.72) brightness(.78);
  transition: opacity .3s ease, filter .3s ease;
  animation: crxSlotInSide .5s cubic-bezier(.22, .7, .3, 1);
}
.crx-slot--prev { left: -11%; }
.crx-slot--next { right: -11%; }
.crx-slot--prev:hover, .crx-slot--next:hover { opacity: .55; filter: saturate(.9) brightness(.92); }
@media (max-width: 879px) {
  .crx-slot--cur { width: 80%; }
  .crx-slot--prev { left: -22%; }
  .crx-slot--next { right: -22%; }
}
@keyframes crxSlotIn {
  from { opacity: 0; transform: translate(calc(-50% + var(--dx) * 26px), -50%) scale(.965); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes crxSlotInSide {
  from { opacity: 0; }
  to   { opacity: .3; }
}

.crx-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--edge);
  background: color-mix(in srgb, var(--void) 55%, transparent);
  backdrop-filter: blur(6px);
  color: var(--mute); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .2s ease, border-color .2s ease;
}
.crx-arrow:hover { color: var(--gold); border-color: var(--gold); }
.crx-arrow svg { display: block; }
.crx-arrow--prev { left: .3rem; }
.crx-arrow--next { right: .3rem; }
@media (max-width: 879px) { .crx-arrow { width: 2.2rem; height: 2.2rem; } }

/* the featured carousel's quiet progress marks */
.crx-fdots {
  display: flex; gap: .55rem; justify-content: center;
  padding-top: .5rem; min-height: 1rem;
}
.crx-fdot {
  width: 1.35rem; height: 2px; border: 0; padding: 0;
  background: var(--edge); cursor: pointer;
  transition: background .3s ease;
}
.crx-fdot:hover { background: var(--mute); }
.crx-fdot[aria-current="true"] { background: var(--gold); }

/* ── the words beside the dial ────────────────────────────────── */
.crx-words {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .7rem; min-width: 0;
}
.crx-words > * { animation: crxRiseIn .55s cubic-bezier(.22, .61, .36, 1) backwards; }
.crx-words > *:nth-child(2) { animation-delay: .04s; }
.crx-words > *:nth-child(3) { animation-delay: .08s; }
.crx-words > *:nth-child(4) { animation-delay: .12s; }
.crx-words > *:nth-child(5) { animation-delay: .16s; }
@keyframes crxRiseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.crx-words-top { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.crx-flagtag {
  font-family: var(--data); font-size: .56rem; letter-spacing: .14em;
  text-transform: uppercase; padding: .22rem .5rem;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  color: var(--gold);
}
.crx-w-name { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.02; }
.crx-w-blurb { font-size: .98rem; line-height: 1.55; color: var(--mute); max-width: 27rem; }
.crx-w-facts {
  list-style: none; margin: .1rem 0 0; padding: 0;
  display: grid; gap: .4rem; width: 100%; max-width: 24rem;
}
.crx-w-facts li {
  display: flex; gap: 1rem; align-items: baseline;
  border-bottom: 1px solid var(--edge); padding-bottom: .4rem;
}
.crx-w-facts .crx-k {
  font-family: var(--data); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute); min-width: 5.4rem;
}
.crx-w-facts .crx-v { font-size: .88rem; }
.crx-w-buyrow {
  display: flex; align-items: center; gap: 1.1rem;
  margin-top: .2rem; flex-wrap: wrap;
}
.crx-w-price {
  font-family: var(--display); font-size: 1.8rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 879px) {
  .crx-words { align-items: center; text-align: center; gap: .45rem; }
  .crx-w-facts { display: none; }   /* the dial says it; the drawer confirms it */
  .crx-w-blurb { max-width: 30rem; }
}
@media (max-height: 760px) and (max-width: 879px) { .crx-w-blurb { display: none; } }

/* ── Early access form ──────────────────────────────────────────
   The home page watch panel's in-place sign-up, opened under the
   counter's "Get early access". The form itself wears the site
   sheet's look-join classes, so it looks and reads exactly as it
   does in the panel; these rules only fit it into the pinned
   counter, which has a fixed height and clips what overflows. */

/* the panel's look-buy, without its top margin (it sits in the
   price row here): a button needs line-height handed down, and
   2.75rem is the 44px tap target */
.crx-w-cta { line-height: inherit; min-height: 2.75rem; }

/* While the form shows, the counter is held still, so the scroll
   hint would not be true; it steps away. If the form still does not
   fit, the pinned box starts at the top and scrolls inside rather
   than clipping the dial or the form (browsers without "safe" keep
   plain centring). */
.crx-jsticky.is-joining {
  justify-content: center;
  justify-content: safe center;
  overflow-x: hidden; overflow-y: auto;
}
.crx-jsticky.is-joining .crx-hint { display: none; }

/* On a phone the dial sits above the words, and the form adds about
   seven lines: the dial gives up the room while the form is open. */
@media (max-width: 879px) {
  .crx-jsticky.is-joining .crx-stagewrap {
    max-width: min(100%, calc(var(--crx-stage-cap) * .6));
  }
}

/* ── the tray, an ambient river of dials ─────────────────────── */
.crx-trayband { min-height: 0; }
.crx-tray {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 3.2rem, #000 calc(100% - 3.2rem), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.2rem, #000 calc(100% - 3.2rem), transparent);
  cursor: grab;
  touch-action: pan-y;
}
.crx-tray.is-grabbing { cursor: grabbing; }
.crx-tray--manual { overflow-x: auto; scrollbar-width: none; cursor: default; touch-action: auto; }
.crx-tray--manual::-webkit-scrollbar { display: none; }
.crx-belt {
  display: flex; gap: .95rem; align-items: center;
  width: max-content;
  padding: .7rem .4rem;
  will-change: transform;
}
.crx-trayitem {
  flex: 0 0 auto; width: 4.2rem; height: 4.2rem;
  border-radius: 50%; padding: 0; border: 0; background: none; cursor: pointer;
  position: relative;
  box-shadow: 0 0 0 1px var(--edge);
  transition: box-shadow .25s ease, transform .25s ease;
}
.crx-trayitem .crx-disc { width: 100%; height: 100%; pointer-events: none; }
.crx-trayitem:hover { box-shadow: 0 0 0 1px var(--mute); transform: translateY(-3px); }
.crx-trayitem[aria-current="true"] {
  box-shadow: 0 0 0 2px var(--void), 0 0 0 3.5px var(--gold);
}
.crx-tray-gap {
  flex: 0 0 auto; align-self: stretch; display: flex; align-items: center;
  padding-inline: .35rem;
}
.crx-tray-gap i { display: block; width: 1px; height: 2rem; background: var(--edge); }
@media (max-width: 620px) { .crx-trayitem { width: 3.6rem; height: 3.6rem; } }

.crx-hint {
  font-family: var(--data); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute);
  text-align: center; padding-top: .1rem;
}
.crx-emptymsg {
  padding: 3rem 0 2rem; text-align: center; color: var(--mute); font-size: .95rem;
}

/* ── the All room: the classic page, kept as the map ──────────────
   The browse box, the facet rows, the swatches, the sort control and
   the dial-grid cards inside this panel are all the live page's own
   classes, styled by styles.css. This block only switches the panel
   on and off. */
section.crx-allpanel { display: none; padding-block: 0 clamp(2.5rem, 6vh, 4rem); }
body[data-crx-mode="all"] .crx-allpanel { display: block; }
.crx-allpanel .browse { margin-top: 1.4rem; margin-bottom: 0; }

/* ── refine drawer ────────────────────────────────────────────── */
.crx-dscrim {
  position: fixed; inset: 0; z-index: 90;
  background: var(--crx-scrim);
  backdrop-filter: blur(10px) saturate(.75);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.crx-dscrim.is-open { opacity: 1; pointer-events: auto; }
.crx-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
  width: min(23.5rem, 94vw);
  background: var(--void);
  border-left: 1px solid var(--edge);
  transform: translateX(102%);
  transition: transform .34s cubic-bezier(.22, .7, .3, 1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.crx-drawer.is-open { transform: none; }
.crx-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem .9rem; border-bottom: 1px solid var(--edge);
}
.crx-drawer-title {
  font-family: var(--data); font-size: .66rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
}
.crx-drawer-close {
  width: 2.3rem; height: 2.3rem; line-height: 1; font-size: 1.4rem;
  background: none; border: 1px solid var(--edge); color: var(--mute); cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.crx-drawer-close:hover { color: var(--bone); border-color: var(--mute); }
.crx-drawer-body {
  padding: 1.2rem 1.4rem; display: flex; flex-direction: column;
  gap: 1.35rem; flex: 1;
}
/* Inside the drawer the site's .facet row goes vertical: label above
   options, full width. Scoped here so the All box keeps its rows. */
.crx-drawer .facet { flex-direction: column; align-items: stretch; gap: .55rem; }
.crx-drawer .facet-label { min-width: 0; }
.crx-drawer-foot {
  display: flex; gap: .6rem; justify-content: space-between; align-items: center;
  padding: 1rem 1.4rem 1.3rem; border-top: 1px solid var(--edge);
  position: sticky; bottom: 0; background: var(--void);
}
.crx-drawer-note {
  font-size: .74rem; color: var(--mute); line-height: 1.5; max-width: 26rem;
}

/* ── reduced motion: everything still, everything reachable ───── */
@media (prefers-reduced-motion: reduce) {
  .crx-slot--cur, .crx-slot--prev, .crx-slot--next, .crx-words > * { animation: none; }
  .crx-slot--prev, .crx-slot--next { opacity: .3; }
  .crx-drawer, .crx-dscrim, .crx-trayitem, .crx-room, .crx-chip, .crx-fdot,
  .crx-subopt { transition: none; }
  /* the colour row does not slide for these visitors: it appears */
  .crx-subrow { transition: none; }
  .crx-subrow.is-open .crx-subin { animation: none; }
}