/* Something Borrowed by Diamonds Factory - campaign microsite
   Built from Cass's 1920px design. Desktop layout uses design units:
   1 design px = var(--u) = min(100vw, 1920px) / 1920, so the page scales
   proportionally from 1200px up to 1920px and is capped above that.
   Below 1200px the layout switches to a fluid single-column version. */

:root {
  --cream: #FDF9F4;
  --ink: #161614;
  --letters: #0F0F0E;
  --grey: #F1F2F2;
  --white: #FFFFFF;
  --gold: #957127;
  --u: calc(min(100vw, 1920px) / 1920);
  --serif: "Baskerville", "Baskervville", "Libre Baskerville", "Times New Roman", serif;
  --sans: "Proxima Nova", "Mulish", "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: #000;
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; }
a { color: inherit; }
h1, h2, h3, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }

.page { max-width: 1920px; margin: 0 auto; position: relative; overflow-x: clip; }

/* ---------- Header ---------- */
.site-header {
  height: calc(180 * var(--u));
  display: flex; align-items: center; justify-content: center;
  padding-top: calc(10 * var(--u));
  background: var(--cream);
}
.df-mark { color: var(--ink); text-decoration: none; }
.df-wordmark { width: calc(594 * var(--u)); height: calc(42 * var(--u)); fill: currentColor; color: var(--ink); }

/* ---------- Hero ---------- */
.hero { position: relative; height: calc(650 * var(--u)); overflow: hidden; background: #000; }
.hero picture, .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img { object-fit: cover; object-position: center; }
.hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; opacity: .76; pointer-events: none; }
.hero-title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; }
.sb-wordmark { width: calc(774 * var(--u)); height: calc(91 * var(--u)); color: var(--white); fill: currentColor; filter: drop-shadow(0 0 calc(2 * var(--u)) rgba(0,0,0,.25)); }

/* ---------- Intro (dark) ---------- */
.intro {
  position: relative; height: calc(1084 * var(--u));
  background: var(--ink); color: var(--white); overflow: hidden;
}
.bg-letters {
  position: absolute; left: calc(-148.5 * var(--u)); top: calc(-311 * var(--u));
  width: calc(2433 * var(--u)); height: calc(1493 * var(--u));
  color: var(--letters); fill: currentColor; pointer-events: none;
}
.intro-inner { position: relative; height: 100%; }

.video {
  position: absolute; left: calc(224 * var(--u)); top: calc(83 * var(--u));
  width: calc(516 * var(--u)); height: calc(918 * var(--u));
  background: #000; overflow: hidden;
}
.video-poster { width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(181 * var(--u)); height: calc(181 * var(--u));
  padding: 0; border: 0; background: transparent; cursor: pointer; color: rgba(35, 31, 32, .24);
  transition: transform .25s ease, color .25s ease;
}
.video-play:hover, .video-play:focus-visible { color: rgba(35, 31, 32, .40); transform: translate(-50%, -50%) scale(1.04); outline: none; }
.play-icon { width: 100%; height: 100%; fill: currentColor; }
.video-note {
  position: absolute; left: 0; right: 0; bottom: calc(40 * var(--u));
  text-align: center; font-family: var(--serif); font-style: italic; font-size: calc(24 * var(--u));
  color: var(--white); text-shadow: 0 1px 8px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; pointer-events: none;
}
.video.is-noted .video-note { opacity: 1; transform: none; }
.video-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
video.video-embed { object-fit: cover; cursor: pointer; }
.video.is-playing .video-poster, .video.is-playing .video-play, .video.is-playing .video-note { display: none; }
/* Site-hosted film: no play button while autoplay is working; it returns only if the browser blocks autoplay */
.video.is-auto .video-play { display: none; }
.video.is-auto.needs-tap .video-play { display: block; color: rgba(255, 255, 255, .85); }
.video-sound {
  position: absolute; right: calc(20 * var(--u)); bottom: calc(20 * var(--u)); z-index: 2;
  display: inline-flex; align-items: center; gap: .45em;
  height: calc(44 * var(--u)); padding: 0 calc(18 * var(--u)) 0 calc(14 * var(--u));
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
  background: rgba(22, 22, 20, .55); color: var(--white); cursor: pointer;
  font-family: var(--sans); font-weight: 400; font-size: calc(15 * var(--u)); letter-spacing: .06em; text-transform: uppercase;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .2s ease, border-color .2s ease;
}
.video-sound:hover, .video-sound:focus-visible { background: rgba(22, 22, 20, .85); border-color: var(--white); outline: none; }
.video-sound[aria-pressed="true"] { background: rgba(255, 255, 255, .92); color: var(--ink); border-color: transparent; }
.video-sound svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); fill: currentColor; }
.video-sound[hidden] { display: none; }

.intro-copy {
  position: absolute; left: calc(1044.7 * var(--u)); top: calc(334 * var(--u));
  width: calc(540 * var(--u));
}
.intro-heading {
  position: relative;
  font-family: var(--serif); font-weight: 400; font-size: calc(47.17 * var(--u)); line-height: 1.2;
}
.intro-heading::before {
  content: ""; position: absolute; right: calc(100% + 34 * var(--u)); top: .72em;
  width: calc(270 * var(--u)); height: 1px; background: var(--white);
}
.intro-lede {
  margin-top: calc(58 * var(--u));
  font-family: var(--serif); font-style: italic; font-size: calc(47.97 * var(--u)); line-height: 1.2;
  max-width: calc(500 * var(--u));
}

/* ---------- Story (cream) ---------- */
.story { position: relative; height: calc(560 * var(--u)); background: var(--cream); color: #000; }
.story-inner { position: relative; height: 100%; }
.story-heading {
  position: absolute; left: calc(180.8 * var(--u)); top: calc(144.5 * var(--u));
  width: calc(700 * var(--u));
  font-family: var(--serif); font-weight: 400; font-size: calc(59 * var(--u)); line-height: 1.2;
}
.story-copy {
  position: absolute; left: calc(1044.7 * var(--u)); top: calc(106.5 * var(--u));
  width: calc(680 * var(--u)); font-size: calc(24 * var(--u)); line-height: 1.2;
}
.story-copy p { margin: 0 0 calc(28.8 * var(--u)); }
.story-copy p:last-child { margin-bottom: 0; }
.story-lead { font-size: calc(27 * var(--u)); }

/* ---------- Gallery (dark strip) ---------- */
.gallery { background: var(--ink); height: calc(726 * var(--u)); }
.gallery-inner {
  display: flex; gap: calc(13.5 * var(--u)); justify-content: center;
  padding-top: calc(63.4 * var(--u));
}
.gallery-inner img { width: calc(525.2 * var(--u)); height: calc(604.7 * var(--u)); object-fit: cover; }

/* ---------- How it works (cream) ---------- */
.how { position: relative; height: calc(1004 * var(--u)); background: var(--cream); color: #000; }
.how-inner { position: relative; height: 100%; }
.how-img {
  position: absolute; left: calc(180.7 * var(--u)); top: calc(82.8 * var(--u));
  width: calc(696.3 * var(--u)); height: calc(807.8 * var(--u)); object-fit: cover;
}
.how-copy {
  position: absolute; left: calc(1044.7 * var(--u)); top: calc(103.6 * var(--u));
  width: calc(680 * var(--u));
}
.how-heading {
  font-family: var(--serif); font-weight: 400; font-size: calc(47 * var(--u)); line-height: 1.2;
  margin-bottom: calc(24 * var(--u));
}
.steps li { margin-bottom: calc(31 * var(--u)); }
.steps h3 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: calc(32 * var(--u)); line-height: 1.2;
}
.steps p { font-size: calc(24 * var(--u)); line-height: 1.2; margin-top: calc(-2 * var(--u)); }
.steps p + p { margin-top: calc(28.8 * var(--u)); }
.fn-ref { text-decoration: none; color: inherit; font-weight: inherit; }
.fn-ref:hover, .fn-ref:focus-visible { color: var(--gold); outline: none; }
.how-note {
  font-size: calc(16 * var(--u)); line-height: 1.35; color: #4A4744;
  margin: calc(-6 * var(--u)) 0 0; max-width: calc(560 * var(--u));
}
.how-note .fn-mark { margin-right: .15em; }
.how-note a { color: inherit; }
.how-cta {
  margin-top: calc(57 * var(--u));
  font-family: var(--serif); font-style: italic; font-size: calc(32 * var(--u)); line-height: 1.2;
}
.how-cta a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
.how-cta a:hover, .how-cta a:focus-visible { border-bottom-color: currentColor; outline: none; }

/* ---------- Booking ---------- */
.book { background: var(--cream); padding: 0 calc(75.3 * var(--u)); }
.book-box { position: relative; background: var(--grey); }

/* ---------- Terms link ---------- */
.terms-link {
  text-align: center; margin: 0;
  font-family: var(--serif); font-style: italic; font-size: calc(21 * var(--u)); line-height: 1.2;
}
.terms-link a { text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.35); padding-bottom: 1px; transition: border-color .2s; }
.terms-link a:hover, .terms-link a:focus-visible { border-bottom-color: #000; outline: none; }

/* ---------- Footer lockup ---------- */
.site-footer { padding: calc(95 * var(--u)) 0 calc(98 * var(--u)); background: var(--cream); }
.lockup { display: flex; align-items: flex-end; justify-content: center; gap: calc(30 * var(--u)); color: var(--ink); }
.lockup a { color: inherit; text-decoration: none; }
.sb-wordmark-small { width: calc(443 * var(--u)); height: calc(52 * var(--u)); fill: currentColor; }
.df-wordmark-small { width: calc(417 * var(--u)); height: calc(29.5 * var(--u)); fill: currentColor; margin-bottom: calc(13 * var(--u)); }
.lockup-by { font-family: var(--serif); font-style: italic; font-size: calc(21 * var(--u)); line-height: 1; margin-bottom: calc(13 * var(--u)); }

/* ---------- Focus ---------- */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* =====================================================================
   Fluid layout for tablets and phones (below 1200px)
   ===================================================================== */
@media (max-width: 1199px) {
  :root { --pad: clamp(20px, 5vw, 48px); }
  body { font-size: 1.0625rem; line-height: 1.4; }

  .site-header { height: auto; padding: 26px var(--pad) 22px; }
  .df-wordmark { width: min(300px, 64vw); height: auto; aspect-ratio: 594 / 42; }

  .hero { height: auto; aspect-ratio: 16 / 9; }
  .sb-wordmark { width: min(560px, 74vw); height: auto; aspect-ratio: 774 / 91; }

  .intro { height: auto; padding: 56px var(--pad) 60px; }
  .bg-letters { left: -8%; top: -6%; width: 128%; height: auto; aspect-ratio: 2433 / 1493; }
  .intro-inner { display: flex; flex-direction: column; align-items: center; gap: 44px; max-width: 640px; margin: 0 auto; }
  .intro-copy { position: static; width: 100%; max-width: 560px; order: 1; }
  .intro-heading { font-size: clamp(1.75rem, 5.6vw, 2.4rem); line-height: 1.2; }
  .intro-heading::before { display: none; }
  .intro-lede { margin-top: 1.1em; font-size: clamp(1.45rem, 4.8vw, 2.1rem); max-width: none; }
  .video { position: relative; left: auto; top: auto; order: 2; width: min(360px, 78vw); height: auto; aspect-ratio: 9 / 16; }
  .video-play { width: 30%; height: 30%; }
  .video-sound { right: 12px; bottom: 12px; height: 38px; padding: 0 14px 0 11px; font-size: .75rem; }
  .video-sound svg { width: 17px; height: 17px; }
  .video-note { bottom: 18px; font-size: 1.05rem; }

  .story { height: auto; padding: 52px var(--pad) 56px; }
  .story-inner { display: flex; flex-direction: column; gap: 28px; max-width: 640px; margin: 0 auto; }
  .story-heading { position: static; width: auto; font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.2; }
  .story-copy { position: static; width: auto; font-size: 1.0625rem; line-height: 1.4; }
  .story-copy p { margin: 0 0 1.1em; }
  .story-lead { font-size: 1.1875rem; }

  .gallery { height: auto; padding: 32px 0; }
  .gallery-inner {
    padding: 0 var(--pad); gap: 12px; justify-content: flex-start;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gallery-inner::-webkit-scrollbar { display: none; }
  .gallery-inner img { width: min(300px, 68vw); height: auto; aspect-ratio: 525 / 605; flex: 0 0 auto; scroll-snap-align: center; }

  .how { height: auto; padding: 52px var(--pad) 40px; }
  .how-inner { display: flex; flex-direction: column; gap: 32px; max-width: 640px; margin: 0 auto; }
  .how-img { position: static; width: min(420px, 100%); height: auto; aspect-ratio: 696 / 808; }
  .how-copy { position: static; width: auto; }
  .how-heading { font-size: clamp(1.75rem, 6vw, 2.4rem); margin-bottom: 20px; }
  .steps li { margin-bottom: 22px; }
  .steps h3 { font-size: 1.375rem; }
  .steps p { font-size: 1.0625rem; line-height: 1.4; margin-top: 2px; }
  .steps p + p { margin-top: 1em; }
  .how-note { font-size: .9375rem; margin: 4px 0 0; max-width: none; }
  .how-cta { margin-top: 36px; font-size: 1.375rem; }

  .book { padding: 0 16px; }

  .terms-link { margin-top: 36px; font-size: 1rem; }

  .site-footer { padding: 56px var(--pad) 64px; }
  .lockup { flex-direction: column; align-items: center; gap: 14px; }
  .sb-wordmark-small { width: min(300px, 70vw); height: auto; aspect-ratio: 443 / 52; }
  .df-wordmark-small { width: min(240px, 56vw); height: auto; aspect-ratio: 417 / 29.5; margin-bottom: 0; }
  .lockup-by { margin-bottom: 0; font-size: 1rem; }
}

@media (max-width: 700px) {
  .hero { aspect-ratio: 4 / 5; max-height: 78vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .video-play, .video-note, .how-cta a, .terms-link a { transition: none; }
}