/* ===========================================================================
   CARAT — black and white, dark ground, as little as possible.
   =========================================================================== */

:root {
  --ink-0: #08090b;   /* deepest ground                */
  --ink-1: #0a0b0d;   /* page ground                   */
  --ink-2: #0e1013;   /* raised ground                 */
  --line:  rgba(255, 255, 255, 0.13);
  --line-2: rgba(255, 255, 255, 0.07);
  --white: #f4f4f4;
  --mute:  #8b8f95;
  --faint: #5c6066;

  --display: 'Cormorant Garamond', 'Times New Roman', serif;
  --ui: 'Jost', ui-sans-serif, system-ui, 'Helvetica Neue', Arial, sans-serif;

  --gut: clamp(1.5rem, 5vw, 5.5rem);
  --sec-y: clamp(7rem, 16vh, 13rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ink-1);
  -webkit-text-size-adjust: 100%;
}

/* Lenis drives the scroll; the native smooth behaviour must stay off. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--ink-1);
  color: var(--white);
  font-family: var(--ui);
  font-weight: 300;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

::selection { background: #fff; color: #000; }

/* --- the WebGL layer ----------------------------------------------------- */
#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
#gl.is-ready { opacity: 1; }

/* A whisper of grain so the dark grounds never band. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

main { position: relative; z-index: 3; }

/* --- loading veil -------------------------------------------------------- */
.veil {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  gap: 1.6rem;
  background: var(--ink-1);
  transition: opacity 0.9s var(--ease), visibility 0.9s;
}
.veil.is-gone { opacity: 0; visibility: hidden; }
.veil__mark {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.7em;
  text-indent: 0.7em;
  color: var(--white);
}
.veil__bar { width: 160px; height: 1px; background: var(--line); overflow: hidden; }
.veil__bar i { display: block; height: 100%; width: 0; background: #fff; transition: width 0.4s linear; }

/* --- nav ----------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.1rem, 2.4vw, 1.9rem) var(--gut);
  transition: background 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--ink-1) 72%, transparent);
  backdrop-filter: blur(14px) saturate(0);
  border-bottom: 1px solid var(--line-2);
}
.nav__logo img { width: clamp(96px, 11vw, 138px); height: auto; }
.nav__links { display: flex; gap: clamp(1.2rem, 3vw, 2.6rem); }
.nav__links a {
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.nav__links a:hover { color: var(--white); border-color: var(--line); }

/* --- section scaffolding ------------------------------------------------- */
.sec {
  position: relative;
  padding: var(--sec-y) 0;
}
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: 980px; }

/* The WebGL canvas sits behind the page, so any section with an opaque
   background hides it. Section 02 is where the stone actually performs, so its
   tonal step is painted as a translucent wash instead of a solid fill — same
   colour to the eye, but the canvas still reads through it. */
.sec--stone  { background: rgba(255, 255, 255, 0.018); }
.sec--why    { background: var(--ink-2); }
.sec--about  { background: rgba(255, 255, 255, 0.018); }
.sec--contact{ background: var(--ink-0); }

/* --- type ---------------------------------------------------------------- */
.eyebrow {
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: clamp(1.6rem, 4vw, 2.8rem);
}
.h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.1rem, 5.4vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin-bottom: clamp(2rem, 5vw, 3.4rem);
}
.k {
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0.9rem;
}
.h2sub {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  color: var(--mute);
  margin-top: -1.4rem;
  margin-bottom: clamp(2.2rem, 5vw, 3.4rem);
}
.h2--mark { margin-bottom: 1.9rem; }

.copy { color: var(--mute); max-width: 46ch; }
.copy.lead { color: #b9bcc1; font-size: 1.08em; max-width: 52ch; }
.muted { color: var(--faint); }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- 01 hero ------------------------------------------------------------- */
.sec--hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 8rem;
}
.hero { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gut); }
.hero__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(3.4rem, 13vw, 10.5rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.hero__title span { display: block; }
.hero__title span:last-child { padding-left: clamp(0rem, 8vw, 7rem); }
.hero__sub { max-width: 40ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.4rem, 4vw, 2.8rem);
  margin-top: clamp(3rem, 7vw, 5rem);
}

/* the one call to action on the page */
.btn {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.85rem 1.7rem;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn:hover { background: #fff; color: #000; border-color: #fff; }

/* an outbound link — the arrow leans out to say it leaves the site */
.link-out {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color 0.4s var(--ease);
}
.link-out i {
  display: block;
  width: 34px; height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.4s var(--ease);
}
.link-out i::after {
  content: '';
  position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.link-out:hover { color: var(--white); }
.link-out:hover i { width: 48px; }

.inline-link {
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  color: var(--white);
  transition: border-color 0.35s var(--ease);
}
.inline-link:hover { border-color: var(--white); }

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color 0.4s var(--ease);
}
.scroll-cue:hover { color: var(--white); }
.scroll-cue i { display: block; width: 54px; height: 1px; background: currentColor; position: relative; overflow: hidden; }
.scroll-cue i::after {
  content: ''; position: absolute; inset: 0; background: #fff;
  transform: translateX(-100%);
  animation: sweep 2.6s var(--ease) infinite;
}
@keyframes sweep { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

/* --- 02 the stone -------------------------------------------------------- */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.6rem, 4vw, 3.4rem);
}

/* --- 03 measured ---------------------------------------------------------
   Three columns, each with the figure large, then a scale carrying two pins:
   the moissanite value in white, diamond in grey. The bar is a reading aid,
   so both numbers are printed on it rather than implied. */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line-2);
  padding-top: clamp(2.4rem, 5vw, 3.6rem);
}
.metric__k {
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--white);
}
.metric__n {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(3.2rem, 7vw, 5.2rem);
  line-height: 0.92;
  margin-top: 0.7rem;
  font-variant-numeric: lining-nums;
}
.metric__u { font-size: 0.76rem; color: var(--faint); margin-top: 0.35rem; }

.gauge {
  position: relative;
  height: 86px;
  margin: clamp(2rem, 4vw, 2.8rem) 0 clamp(1.4rem, 3vw, 2rem);
}
.gauge__rule {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(to right, var(--line-2), var(--line));
}
.gauge__pin {
  position: absolute;
  top: 0;
  left: var(--p);
  transform: translateX(-50%);
  text-align: center;
  color: var(--faint);
  white-space: nowrap;
}
.gauge__pin i { display: block; width: 1px; height: 13px; margin: 0 auto 0.55rem; background: currentColor; }
.gauge__pin b {
  display: block;
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.gauge__pin em {
  display: block;
  font-family: var(--display);
  font-style: normal;
  font-size: 1.15rem;
  margin-top: 0.15rem;
}
.gauge__pin--us { color: var(--white); }
.gauge__pin--us i { height: 24px; }
.gauge__pin--us em { font-size: 1.5rem; }

/* --- 04 why -------------------------------------------------------------- */
.why__head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.why__head .h2 { margin-bottom: 0; }
.why__head .lead { padding-bottom: 0.4rem; }

.matrix-scroll {
  margin-top: clamp(2.6rem, 6vw, 4.2rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.matrix {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  text-align: right;
}
.matrix th, .matrix td { padding: 1.15rem 1.1rem; border-top: 1px solid var(--line-2); }
.matrix thead th { border-top: 0; border-bottom: 1px solid var(--line); }
.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td { border-bottom: 1px solid var(--line-2); }

.matrix thead th {
  font-size: 0.64rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  vertical-align: bottom;
}
.matrix tbody th {
  text-align: left;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--white);
  white-space: nowrap;
}
.matrix tbody th span {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 0.25rem;
}
.matrix td {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--mute);
  font-variant-numeric: lining-nums tabular-nums;
}

/* the moissanite column, held up out of the rest */
.matrix .is-us { color: var(--white); background: rgba(255, 255, 255, 0.035); }
.matrix thead .is-us { color: var(--white); }
.matrix td.is-us { font-size: 1.7rem; }

/* the best figure in each row — including the one moissanite does not win */
.matrix td.win { position: relative; }
.matrix td.win::after {
  content: '';
  position: absolute;
  right: 1.1rem;
  bottom: 0.7rem;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
}

.closing {
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  line-height: 1.35;
  max-width: 34ch;
  color: var(--white);
}

/* --- 05 categories ------------------------------------------------------- */
.cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  border-top: 1px solid var(--line-2);
}
.cats li { border-bottom: 1px solid var(--line-2); }
.cats a {
  display: block;
  padding: clamp(2rem, 4.5vw, 3.2rem) clamp(1rem, 2vw, 1.6rem) clamp(2rem, 4.5vw, 3.2rem) 0;
  transition: opacity 0.4s var(--ease);
}
.cats li + li a { padding-left: clamp(1rem, 2vw, 1.6rem); }
.cats li + li { border-left: 1px solid var(--line-2); }
/* display:block matters — a bare inline span ignores width and height, and the
   icon falls back to the SVG's default replaced-element size. */
.cats__icon { display: block; width: 52px; height: 52px; margin-bottom: 1.7rem; color: var(--white); }
.cats__icon svg { width: 100%; height: 100%; display: block; }
.cats__name {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.cats__note { display: block; font-size: 0.82rem; color: var(--faint); }
.cats__count { display: block; margin-top: 1.2rem; font-size: 0.66rem; letter-spacing: 0.24em; color: var(--faint); }
.cats a:hover .cats__icon { opacity: 1; }
.cats a:hover .cats__note { color: var(--mute); }

/* --- 06 the grid --------------------------------------------------------- */
.grid__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem 2rem;
}
.grid__head .eyebrow { margin-bottom: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filters button {
  appearance: none;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  color: var(--faint);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.filters button:hover { color: var(--white); border-color: var(--line); }
.filters button[aria-pressed='true'] { color: #000; background: #fff; border-color: #fff; }

.grid {
  margin-top: clamp(2.4rem, 6vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1.2rem, 2.4vw, 2rem);
}
.card { transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.card.is-out { display: none; }
.card__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
}
.card__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), opacity 0.6s var(--ease);
}
.card:hover .card__frame img { transform: scale(1.035); }
.card__body { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; }
.card__name { font-family: var(--display); font-size: 1.22rem; line-height: 1.25; }
.card__detail { display: block; font-size: 0.78rem; color: var(--faint); margin-top: 0.2rem; }
.card__price { font-size: 0.78rem; color: var(--mute); white-space: nowrap; padding-top: 0.35rem; }

.note {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-2);
  font-size: 0.78rem;
  color: var(--faint);
  max-width: 58ch;
}
.note em { font-style: normal; letter-spacing: 0.18em; }

/* --- 07 contact ---------------------------------------------------------- */
.sec--contact { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.contact__mark { width: clamp(120px, 14vw, 168px); margin: 0 auto clamp(3.5rem, 8vw, 6rem); opacity: 0.9; }
.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
.colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-2);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* --- reveals ------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* --- narrow -------------------------------------------------------------- */
@media (max-width: 860px) {
  .h2sub { margin-top: -0.9rem; }
  .why__head { align-items: start; }
  /* the table can be swiped sideways rather than crushed */
  .matrix-scroll { margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .cats li + li { border-left: 0; }
  .cats li + li a,
  .cats a { padding-left: 0; padding-right: 0; }
  .hero__title span:last-child { padding-left: 0; }
  .nav__links { gap: 1.1rem; }
  .nav__links a { font-size: 0.66rem; letter-spacing: 0.16em; }
}

/* Three nav words plus the wordmark do not fit a phone at the wider tracking,
   and they wrap into two lines. Tighten rather than drop one. */
@media (max-width: 560px) {
  :root { --gut: 1.25rem; }
  .nav { padding-top: 1rem; padding-bottom: 1rem; }
  .nav__logo img { width: 82px; }
  .nav__links { gap: 0.8rem; }
  .nav__links a { font-size: 0.6rem; letter-spacing: 0.1em; white-space: nowrap; }
}

@media (max-width: 480px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
}

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .card__frame img { transition: none; }
  .scroll-cue i::after { display: none; }
}