/* CHELIA MAISON - the editorial layer.
 *
 * The first build put the product in a small white plate in the middle of a
 * grey field, gave every section the same heading-then-grid rhythm, and used
 * only cut-outs. It read as a catalogue, not a shop worth paying for.
 *
 * What changed is not decoration. The supplier feed turned out to carry 190
 * art-directed frames of the pieces being worn - the classifier found them -
 * and a jewellery shop is expensive or cheap almost entirely on whether it
 * leads with those or with cut-outs. So photography now runs the page:
 * full-bleed at the top, breaking the grid in the middle, and behind the one
 * argument this shop actually makes about fit.
 *
 * Three rules hold it together:
 *   1. Type over a photograph always sits on a gradient scrim, never raw on
 *      the image. An unreadable headline is not a style.
 *   2. Cut-outs stay on true white. The stone's colour is the product and a
 *      tinted tile lies about it.
 *   3. Motion reveals, it does not perform. Everything is readable at rest.
 */

/* ---------------------------------------------------------------- hero */

.showpiece {
  position: relative;
  min-height: min(84vh, 760px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--deep);
  isolation: isolate;
}

.showpiece__media,
.showpiece__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* The scrim is a gradient, not a flat wash: flat dimming kills the picture,
 * a gradient keeps the top of the frame clean and only pays for contrast
 * where the words are. */
.showpiece::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(12, 19, 18, .86) 0%, rgba(12, 19, 18, .55) 34%,
                    rgba(12, 19, 18, .12) 62%, rgba(12, 19, 18, .28) 100%);
  pointer-events: none;
}

.showpiece__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 84px) var(--gutter) clamp(30px, 4vw, 56px);
  display: grid;
  gap: clamp(16px, 2vw, 26px);
  color: #fff;
}

.showpiece__kicker {
  font-size: var(--step-xs);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.showpiece h1 {
  font-size: clamp(2.3rem, 1.1rem + 5vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 17ch;
  color: #fff;
  text-wrap: balance;
}
.showpiece h1 em { font-style: italic; color: var(--gold-light); }

.showpiece__lede {
  font-size: clamp(1rem, .92rem + .4vw, 1.2rem);
  max-width: 44ch;
  color: rgba(255, 255, 255, .84);
  margin: 0;
}

.showpiece__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.showpiece .btn { border-color: #fff; background: #fff; color: var(--ink); }
.showpiece .btn:hover { background: var(--gold-light); border-color: var(--gold-light); }
.showpiece .btn--ghost { background: transparent; color: #fff; }
.showpiece .btn--ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* What the shopper is looking at, named. A hero photograph that does not say
 * which piece it shows is a poster, not a shop. */
.showpiece__piece {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(30px, 4vw, 56px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 9px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--step-xs);
  transition: transform .3s var(--ease);
}
.showpiece__piece:hover { transform: translateY(-2px); }
.showpiece__piece img {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover; background: #fff;
}
.showpiece__piece b { display: block; font-weight: 500; font-size: var(--step-s); }
.showpiece__piece span { color: var(--ink-soft); }

.showpiece__facts {
  display: flex;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .22);
  padding-top: 18px;
  margin-top: 4px;
  max-width: 620px;
}
.showpiece__facts b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.1rem + .8vw, 1.9rem);
  font-weight: 400;
  line-height: 1.1;
}
.showpiece__facts span {
  font-size: var(--step-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
}

/* ----------------------------------------------------------- colour rail */

.stonerail { background: var(--deep); color: #e8ecea; padding-block: clamp(42px, 6vw, 82px); }
.stonerail .archead h2 { color: #fff; }

.stonerail__track {
  display: flex;
  gap: clamp(14px, 1.6vw, 26px);
  overflow-x: auto;
  padding: 6px var(--gutter) 22px;
  margin-inline: calc(var(--gutter) * -1);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #3c4b47 transparent;
}
.stonerail__track::-webkit-scrollbar { height: 3px; }
.stonerail__track::-webkit-scrollbar-thumb { background: #3c4b47; }

.stone {
  flex: none;
  width: clamp(104px, 12vw, 140px);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}
/* The stone itself: a lit bead rather than a flat dot, because the thing
 * being chosen is a faceted crystal and a flat circle says nothing about it. */
.stone__bead {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .2),
    inset -8px -12px 26px rgba(0, 0, 0, .34),
    inset 7px 9px 22px rgba(255, 255, 255, .5),
    0 10px 26px rgba(0, 0, 0, .34);
  transition: transform .4s var(--ease);
}
.stone:hover .stone__bead { transform: translateY(-5px) scale(1.03); }
.stone__name { font-size: var(--step-s); }
.stone__count { font-size: var(--step-xs); color: #8d9c98; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- the fit argument */

.fitband {
  position: relative;
  min-height: min(62vh, 560px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--deep);
}
.fitband img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
}
.fitband::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, rgba(12, 19, 18, .92) 0%,
              rgba(12, 19, 18, .74) 44%, rgba(12, 19, 18, .12) 100%);
}
.fitband__body {
  position: relative; z-index: 2;
  max-width: 1560px; margin: 0 auto; width: 100%;
  padding: clamp(40px, 6vw, 86px) var(--gutter);
  color: #fff;
  display: grid; gap: 18px;
}
.fitband h2 {
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem);
  max-width: 18ch; color: #fff; line-height: 1.06;
}
.fitband p { max-width: 46ch; color: rgba(255, 255, 255, .82); margin: 0; }
.fitband .btn { border-color: #fff; background: #fff; color: var(--ink); justify-self: start; }
.fitband .btn:hover { background: var(--gold-light); border-color: var(--gold-light); }

/* --------------------------------------------- grid, broken on purpose */

/* A uniform grid of cut-outs reads as a spreadsheet however good the
 * products are. Every seventh cell becomes a worn frame at double size, so
 * the eye keeps finding something other than another white square. */
.grid--editorial { grid-auto-flow: dense; }

.editorialtile {
  grid-column: span 2;
  grid-row: span 2;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  background: var(--deep);
  min-height: 0;
}
.editorialtile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.editorialtile:hover img { transform: scale(1.04); }
.editorialtile__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 20px 18px;
  background: linear-gradient(to top, rgba(12, 19, 18, .8), transparent);
  color: #fff;
  display: grid; gap: 2px;
}
.editorialtile__label b { font-weight: 500; font-size: var(--step-s); }
.editorialtile__label span { font-size: var(--step-xs); color: rgba(255, 255, 255, .76); }

@media (max-width: 720px) {
  .editorialtile { grid-column: span 2; grid-row: span 1; aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------ product page, led big */

.pdp__hero {
  position: relative;
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--shell-deep);
  aspect-ratio: 16 / 10;
}
.pdp__hero img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------- reveals */

/* Everything is readable at rest; this only softens the arrival. Parked at
 * opacity 0 waiting on an observer is how a page ships looking empty. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .reveal.is-in { opacity: 1; transform: none; }
  /* If the script never runs, nothing stays hidden. */
  .no-js .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 860px) {
  .showpiece { min-height: 76vh; }
  .showpiece__piece { position: static; margin-top: 16px; justify-self: start; }
  .fitband { min-height: 54vh; }
}


/* The arc behind a heading is drawn from the heading's midpoint, which works
 * on a short kicker and cuts straight through a two-line title. On the dark
 * band the heading is the biggest thing on the screen, so the ornament steps
 * back behind it rather than across it. */
.stonerail .archead::before {
  top: 0;
  transform: none;
  width: clamp(110px, 16vw, 210px);
  opacity: .5;
}
.stonerail .archead h2,
.stonerail .archead__kicker,
.stonerail .archead__note { position: relative; z-index: 1; }