/* Gem Experience — Home
   Built to the mobile design spec at 390px: every colour, size, letter-spacing,
   padding and gap below is taken from it. Wider viewports scale the same
   layout up; nothing is re-composed except the three collection cards, which
   move from a stack to a row at 900px. */

:root {
  /* Warm off-black and warm greys throughout — pure #000 on cream reads cold
     and digital; ink-on-paper wants a touch of brown in it. */
  --ink: #17140f;
  --muted: #6b6259;
  --rule: #e3ddd0;
  --cream: #f5f1e8;
  --sans: Jost, -apple-system, "Segoe UI", sans-serif;
  /* The display serif site-wide. EB Garamond has real lower-case
     letterforms built for reading, not just for tracking out in caps —
     that's what lets headlines run in mixed case instead of shouting. */
  --serif: "EB Garamond", Garamond, Georgia, serif;
  --script: "EB Garamond", Garamond, Georgia, serif;

  /* the mobile action bar's height, reserved by the hero and the page foot */
  --bar: calc(58px + env(safe-area-inset-bottom, 0px));

  /* 32px at 390, opening up on wider screens */
  --gutter: 32px;
  /* footer blocks sit 24px in on mobile */
  --ftr-gutter: 24px;
}

@media (min-width: 700px) {
  :root { --gutter: 48px; --ftr-gutter: 48px; --bar: 0px; }
}
@media (min-width: 1100px) {
  :root { --gutter: 64px; --ftr-gutter: 64px; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: var(--bar);
}

body.is-locked { overflow: hidden; }

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: inherit;
  cursor: pointer;
}

:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #fff;
  padding: 12px 20px;
  font-size: 12px;
  letter-spacing: 3.6px;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------ type scale */

.display {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #fff;
}

/* A quieter section kicker-headline (e.g. "The Gem Experience" above the
   three collection cards) rather than a repeat of the full display size. */
.display--sm {
  font-size: clamp(22px, 2vw, 28px);
  text-align: center;
  color: var(--ink);
}

.display--left { text-align: left; }

.lede {
  margin: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
  color: var(--ink);
}

.lede--left { text-align: left; }

.eyebrow {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 3.6px;
  text-transform: uppercase;
}

.eyebrow--light { color: #fff; }

.hero-tagline {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(17px, 2.1vw, 25px);
  line-height: 1.45;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* Set in the sans at label size rather than as a serif headline: over a
   photograph a small, widely tracked line reads as a caption on the image
   instead of competing with it. */
.card-title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: #fff;
}

/* Label over a full-width hairline. */
.rule-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 3.8px;
  text-transform: uppercase;
  color: #fff;
}

.rule-link::after {
  content: "";
  display: block;
  align-self: stretch;
  height: 1px;
  background: currentColor;
  transition: opacity 0.3s ease;
}

.rule-link:hover::after { opacity: 0.5; }

/* Label with a tight underline beneath it. */
.box-link {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: var(--ink);
  transition: opacity 0.3s ease;
}

.box-link:hover { opacity: 0.6; }

/* ----------------------------------------------------------- header */

.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 19.6px;
  padding: 24px 20px;
  height: 72px;
  background: #fff;
}

/* Wide screens centre the wordmark between the menu and the icons. */
@media (min-width: 700px) {
  .hdr {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding: 24px var(--gutter);
  }
  .hdr-icons { justify-self: end; }
}

.hdr-brand {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 5.6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: opacity 0.3s ease;
}

.icon-btn:hover { opacity: 0.55; }

.hdr-menu { width: 24px; height: 24px; }

.hdr-icons {
  display: flex;
  align-items: center;
  gap: 16px;
}

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

.hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  /* One screen, header included. svh is the viewport minus the mobile
     browser chrome, so the hero never ends up half-scrolled. */
  height: 100vh;
  height: calc(100svh - var(--bar));
}

@media (min-width: 700px) {
  .hero { max-height: 980px; }
}

.hero-media {
  position: relative;
  isolation: isolate;
  align-self: stretch;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* <picture> must not become a flex item between the media box and the frame. */
.hero-media picture { display: contents; }

.hero-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  z-index: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.24) 50%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.hero-copy {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(36px, 5vh, 64px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.hero-copy .rule-link { margin-top: 20px; }

@media (min-width: 700px) {
  .hero-copy { bottom: 64px; gap: 12px; }
  .hero-img { object-position: 50% 46%; }
}

/* The hero is a portrait photograph. Cropped to a wide screen it loses the
   face and the necklace together, so on a landscape screen the whole
   frame (a square crop around the model, img/home-hero-wide.webp) stands at
   full height in the centre on the photograph's own pale studio grey, its
   side edges faded into that ground. */
@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .hero-media { background: #e2e3e3; }
  .hero-img {
    align-self: center;
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: 50% 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
  }
}

/* ------------------------------------------------------ collections */

/* The section lost its heading, so the old padding-top plus the cards'
   margin-top left a bare band of cream between the hero and the first row
   of photographs. The cards now start straight under the hero. */
.collections {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--cream);
}

.cards {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

@media (min-width: 900px) {
  .cards { flex-direction: row; }
  .card { flex: 1 1 0; min-width: 0; }
}

.card {
  position: relative;
  isolation: isolate;
  align-self: stretch;
  aspect-ratio: 390 / 582.16;
  overflow: hidden;
}

/* Absolute, so the photograph's intrinsic height can never override the
   card's aspect ratio. */
.card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 1.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.card:hover .card-img { transform: scale(1.03); }

/* Scoped to the home page's three collection cards — the High Jewellery grid
   shares this stylesheet and uses .card for its product tiles, which must not
   pick up the scrim or the white type.
   The label sits on whatever the photograph happens to put behind it, which
   differs per card and per crop. A scrim across the lower edge keeps white
   type legible without having to pick a colour per image. */
.collections .card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 0;
}

.card-copy {
  position: absolute;
  left: var(--gutter);
  bottom: 32px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card-copy .box-link { margin-top: 10px; }
.collections .card-copy .box-link { color: #fff; }

/* -------------------------------------------------------- film band */

.film {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 780px;
  min-height: 600px;
  background: #000;
  overflow: hidden;
}

.film-band {
  position: relative;
  align-self: stretch;
  height: 260.5px;
  z-index: 1;
}

.film-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film-copy {
  position: relative;
  z-index: 4;
  align-self: stretch;
  padding: 88px var(--gutter) 0;
  text-align: center;
}

.film-copy .play { margin-left: auto; margin-right: auto; }

.play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-top: 26px;
  padding-left: 3px;
  border: 1px solid #fff;
  border-radius: 9999px;
  color: #fff;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.play:hover { background: #fff; color: #000; }

@media (min-width: 700px) {
  .film-band { height: 40vh; max-height: 440px; }
  .film-copy { padding-top: 96px; }
}

@media (min-width: 900px) {
  .film { height: 820px; }
  .film .display { font-size: clamp(30px, 3.2vw, 42px); letter-spacing: 5px; }
}

/* ----------------------------------------------------------- footer */

/* The footer lives in css/site-footer.css and is mounted by GemFooter, so
   one stylesheet serves every page. A full copy of the old footer rules
   used to sit here as well and won the cascade by load order, which pinned
   the signup to a centred 620px column and kept the two-up link groups
   whatever the shared sheet asked for. Nothing footer-related belongs in
   this file. */

/* ------------------------------------------------ the film, in place

   Pressing play turns the band into the film: the still and the title give
   way, the section takes the film's own 16:9 height so no edge of the
   picture (or its burned-in captions) is cropped, and the close mark sits
   in the corner. */

.film-screen {
  position: relative;
  width: 100%;
  background: #000;
}
.film-screen[hidden] { display: none; }
.film-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 100svh;
  object-fit: contain;
  background: #000;
}
.film-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  transition: background-color 0.3s ease;
}
.film-close:hover { background: rgba(0, 0, 0, 0.75); }

.film.is-playing { height: auto; min-height: 0; }
.film.is-playing .film-band,
.film.is-playing .film-copy { display: none; }

/* ------------------------------------------- small-screen tracking

   The High Jewellery page steps its letter-spacing down below 700px — its
   wordmark goes 14/5.6 to 12/4, its title 6px to 4px — while this page held
   the design's 390px values at every width. Set beside each other the home
   page read noticeably looser. These are the same values that page uses, so
   one tracking scale now runs across the site. */

@media (max-width: 700px) {
  .hdr-brand { font-size: 12px; letter-spacing: 4px; }
  .nav-brand { font-size: 12px; letter-spacing: 4px; }

  .hero-tagline { font-size: 20px; }
  .card-title { letter-spacing: 2.6px; }
  .eyebrow { letter-spacing: 2.6px; }
  .rule-link { letter-spacing: 3px; }
  .box-link { letter-spacing: 3px; }
  .skip { letter-spacing: 3px; }
}

@media (max-width: 380px) {
  .hdr-brand { font-size: 11px; letter-spacing: 2.4px; }
  .hero-tagline { font-size: 18px; }
  .card-title { letter-spacing: 2.4px; }
}

/* --------------------------------------------------- mobile action bar

   Menu, phone and enquiry within thumb reach, in the same restrained
   register as the header: a hairline rule, line icons, small tracked
   labels. Hidden from 700px up, where the header already carries these. */

.bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #fff;
  border-top: 1px solid var(--rule);
}

.bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 6px calc(9px + env(safe-area-inset-bottom, 0px));
  color: var(--ink);
  transition: opacity 0.3s ease;
}

.bar-item + .bar-item { box-shadow: inset 1px 0 0 var(--rule); }

.bar-item:active { opacity: 0.5; }

.bar-label {
  font-weight: 500;
  font-size: 9px;
  line-height: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

@media (min-width: 700px) {
  .bar { display: none; }
}