/* Mishbetzet. Two tones only: black, the colour of the studio every stone was rendered in,
   and ivory, the colour the collection's transparent renders were made to sit on. One display
   face (Bellefair), the system face for everything read at length. Phone first: 390px is the
   frame the page is designed in; wider screens add columns, never content. */

@font-face {
  font-family: 'Bellefair';
  src: url('assets/Bellefair-Hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
  font-display: swap;
}
@font-face {
  font-family: 'Bellefair';
  src: url('assets/Bellefair-Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
  font-display: swap;
}

:root {
  --night: #000;
  --night-ink: #f3efe8;
  --night-mute: #a8a29a;
  --night-line: rgba(243, 239, 232, 0.16);
  --day: #f5f1ea;
  --day-deep: #ece6dc;
  --ink: #16140f;
  --mute: #635c52;
  --day-line: rgba(22, 20, 15, 0.14);
  --wa: #12833f;
  --wa-press: #0b5b2c;
  --display: 'Bellefair', 'Times New Roman', serif;
  --text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Arial Hebrew', 'Noto Sans Hebrew', Arial, sans-serif;
  --bar: 56px;
  --gutter: 20px;
  --press: transform 100ms ease-out;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--bar); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--night-ink);
  font: 400 1.0625rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
a { color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; }

/* Skip link: moved with a transform, never with a huge negative inset, which widens an RTL page. */
.skip {
  position: fixed; top: 8px; inset-inline-start: 8px; z-index: 30;
  padding: 10px 16px; background: var(--night-ink); color: var(--ink); text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------------------------------------------------------------- tones */

[data-tone="night"] { background: var(--night); color: var(--night-ink); }
[data-tone="day"] { background: var(--day); color: var(--ink); }
.design[data-tone="day"] { background: var(--day-deep); }

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

.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--bar); padding: 0 var(--gutter);
  border-bottom: 1px solid var(--night-line);
  transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease;
}
.bar[data-tone="day"] { border-bottom-color: var(--day-line); }
.wordmark { display: flex; align-items: baseline; gap: 10px; text-decoration: none; min-height: 44px; align-items: center; }
.wm { font-family: var(--display); font-size: 1.6rem; line-height: 1; }
.wm-latin { font-family: var(--display); font-size: 0.68rem; letter-spacing: 0.32em; opacity: 0.7; }
.bar-end { display: flex; align-items: center; gap: 4px; }
.lang, .menu-button {
  min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 0; background: none; color: inherit; font: inherit; font-size: 0.95rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
}
.lang span { font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.08em; }
.menu-icon { position: relative; width: 18px; height: 8px; border-block: 1px solid currentColor; }
.menu-button[aria-expanded="true"] .menu-icon { border-block-color: transparent; }
.menu-button[aria-expanded="true"] .menu-icon::before,
.menu-button[aria-expanded="true"] .menu-icon::after {
  content: ''; position: absolute; inset-inline: 0; top: 3px; border-top: 1px solid currentColor;
}
.menu-button[aria-expanded="true"] .menu-icon::before { transform: rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-icon::after { transform: rotate(-45deg); }

/* Phone: the menu is a sheet under the bar listing every destination at once. */
.nav-list {
  position: absolute; top: var(--bar); inset-inline: 0;
  margin: 0; padding: 8px var(--gutter) 20px; list-style: none;
  background: inherit; border-bottom: 1px solid var(--night-line);
  display: none;
}
.bar[data-tone="day"] .nav-list { border-bottom-color: var(--day-line); }
.bar.is-open .nav-list { display: block; }
.nav-list a {
  display: flex; align-items: center; min-height: 52px;
  font-family: var(--display); font-size: 1.6rem; text-decoration: none;
  border-bottom: 1px solid var(--night-line);
}
.bar[data-tone="day"] .nav-list a { border-bottom-color: var(--day-line); }
.nav-list li:last-child a { border-bottom: 0; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border: 1px solid transparent; border-radius: 3px;
  font: 500 1rem/1.2 var(--text); text-decoration: none; cursor: pointer;
  transition: var(--press), background-color 200ms ease;
}
.btn:active, .chip:active, .ask:active { transform: scale(0.97); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:active { background: var(--wa-press); }
.btn-line { border-color: currentColor; color: inherit; }
.demo-note {
  margin-top: 12px; padding: 12px 14px; font-size: 0.95rem; line-height: 1.5;
  border-inline-start: 2px solid var(--wa); background: rgba(127, 127, 127, 0.1);
}
.fine { font-size: 0.9rem; line-height: 1.55; color: var(--night-mute); }
[data-tone="day"] .fine { color: var(--mute); }

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

.hero { padding: 12px var(--gutter) 56px; text-align: center; }
.hero-stone { width: min(86vw, 440px); margin: 4px auto 0; aspect-ratio: 4 / 3; }
.hero-video, .hero-still { width: 100%; height: 100%; object-fit: cover; }
.hero-still { display: none; }
.hero-copy { max-width: 34rem; margin: 18px auto 0; }
.hero h1 {
  font-family: var(--display);
  font-size: clamp(3rem, 13.5vw, 6.4rem); line-height: 0.98;
}
.hero h1 span { display: block; }
.lede { margin-top: 18px; font-size: 1.0625rem; color: var(--night-mute); }
.actions { display: grid; gap: 10px; margin-top: 26px; }
.caption { margin-top: 22px; font-size: 0.85rem; letter-spacing: 0.02em; color: var(--night-mute); }

/* ---------------------------------------------------------------- the loupe */

.loupe { padding: 72px 0 0; }
.loupe-head, .section-head { padding: 0 var(--gutter); max-width: 40rem; }
.loupe-head { margin: 0 auto 28px; text-align: center; }
.loupe h2, .section-head h2, .atelier h2 {
  font-family: var(--display); font-size: clamp(2.3rem, 9.5vw, 4.2rem); line-height: 1.02;
}
.loupe-head p, .section-head p { margin-top: 14px; color: var(--night-mute); }
[data-tone="day"] .section-head p { color: var(--mute); }

/* The track is the stage plus the pin: its last stretch is empty content, so the stage
   stays put for that much scroll and then leaves with the page. Half a viewport on a phone. */
.loupe-track { position: relative; }
.loupe.is-live .loupe-track::after { content: ''; display: block; height: 45svh; }
.loupe-stage { padding: 0 var(--gutter) 64px; }
.loupe.is-live .loupe-stage { position: sticky; top: var(--bar); padding-bottom: 24px; }
.loupe-picture { position: relative; width: min(100%, 440px); margin: 0 auto; aspect-ratio: 3 / 4; }
.loupe-picture > img { width: 100%; height: 100%; }

.lens { display: none; }
.loupe.is-live .lens {
  display: block; position: absolute; top: 0; left: 0;
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  will-change: transform;
  /* A jeweller's loupe from above: black barrel, a thin bright bezel, a deep shadow. */
  box-shadow: 0 0 0 5px #0e0e0e, 0 0 0 6px rgba(243, 239, 232, 0.38), 0 0 0 9px #050505,
              0 22px 60px rgba(0, 0, 0, 0.8);
}
.lens-view, .lens-macro, .lens-glass { position: absolute; inset: 0; border-radius: 50%; }
.loupe.is-live .lens-view {
  background: #000 url('assets/loupe-ring-1500.webp') no-repeat;
  box-shadow: inset 0 0 26px 6px rgba(0, 0, 0, 0.85);
}
.lens-macro { width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.lens-glass {
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 38%),
              radial-gradient(circle at 70% 78%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 30%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 30px rgba(0, 0, 0, 0.55);
}

.loupe-still-title { margin: 28px auto 0; max-width: 560px; color: var(--night-mute); text-align: center; }
.loupe.is-live .loupe-still-title { display: none; }
.stops { list-style: none; margin: 18px auto 0; padding: 0; max-width: 560px; display: grid; gap: 26px; }
.stop { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.stop-still { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--night-line); }
.stop h3 { font-family: var(--display); font-size: 1.7rem; line-height: 1.1; }
.stop p { margin-top: 6px; color: var(--night-mute); font-size: 1rem; }

/* Live on a phone: one caption at a time under the ring, the others waiting in the same spot. */
.loupe.is-live .stops { display: grid; gap: 0; margin-top: 20px; min-height: 9.5em; }
.loupe.is-live .stop {
  grid-area: 1 / 1; display: block; text-align: center;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms ease, visibility 0s linear 260ms;
}
.loupe.is-live .stop[data-active] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.loupe.is-live .stop-still { display: none; }

/* ---------------------------------------------------------------- collection */

.collection { padding: 80px 0 72px; }
.section-head { margin: 0 auto 36px; text-align: center; }
.pieces {
  list-style: none; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px 14px; max-width: 1240px;
}
.piece:first-child, .piece:last-child { grid-column: 1 / -1; }
.piece figure { margin: 0; }
.piece img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.piece figcaption { margin-top: 4px; text-align: center; }
.piece h3 { font-family: var(--display); font-size: 1.55rem; line-height: 1.15; }
.piece p { margin-top: 4px; font-size: 0.95rem; color: var(--mute); }
.piece-ask { text-align: center; }
.ask {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px;
  font-size: 0.95rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: var(--press);
}
.ask .icon { width: 18px; height: 18px; color: var(--wa); }
.collection > .fine { margin: 40px auto 0; padding: 0 var(--gutter); text-align: center; }

/* ---------------------------------------------------------------- designer */

.design { padding: 80px 0 80px; }
.designer { display: grid; gap: 8px; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.design-view { margin: 0 auto; width: min(100%, 520px); }
.design-view img { width: 100%; aspect-ratio: 1; transition: opacity 180ms ease; }
.design-view img.is-swapping { opacity: 0.35; }
.design-form { display: grid; gap: 22px; max-width: 520px; width: 100%; margin: 0 auto; }

fieldset.choice { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
fieldset.choice legend { width: 100%; padding: 0; margin-bottom: 10px; font-size: 0.95rem; color: var(--mute); }
.visit fieldset.choice legend { color: var(--night-mute); }
.choice label { position: relative; flex: 1 1 auto; }
.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice label > span:not(.swatch) {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--day-line); border-radius: 3px; font-size: 1rem; white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.choice label:has(.swatch) { display: flex; }
.choice label:has(.swatch) > span:not(.swatch) { flex: 1; padding-inline-start: 38px; }
.swatch {
  position: absolute; inset-inline-start: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); pointer-events: none; z-index: 1;
}
.swatch-yellow { background: linear-gradient(135deg, #f7dc8f, #c9963a); }
.swatch-white { background: linear-gradient(135deg, #f4f3f0, #b9b6b0); }
.swatch-rose { background: linear-gradient(135deg, #f6c9b4, #c27f63); }
.choice input:checked + span, .choice input:checked ~ span:not(.swatch) {
  background: var(--ink); color: var(--day); border-color: var(--ink);
}
.choice label:has(input:focus-visible) > span:not(.swatch) { outline: 2px solid var(--ink); outline-offset: 2px; }

.message { display: grid; gap: 10px; }
.message-label { font-size: 0.95rem; color: var(--mute); }
.message-text {
  margin: 0; padding: 16px; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 400 1rem/1.6 var(--text); background: rgba(255, 255, 255, 0.55); border: 1px solid var(--day-line); border-radius: 3px;
}

/* ---------------------------------------------------------------- atelier */

.atelier { padding: 72px var(--gutter) 88px; text-align: center; }
.steps { list-style: none; margin: 36px auto 0; padding: 0; max-width: 1180px; display: grid; gap: 30px; }
.steps li { display: grid; justify-items: center; gap: 6px; }
.step-n { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: #a0988b; }
.steps h3 { font-family: var(--display); font-size: 1.6rem; }
.steps p { max-width: 22rem; color: var(--mute); }

/* ---------------------------------------------------------------- visit */

.visit { padding: 80px 0 72px; }
.visit .section-head p { color: var(--night-mute); }
.visit-form { display: grid; gap: 26px; max-width: 620px; margin: 0 auto; padding: 0 var(--gutter); }
.visit .choice label > span:not(.swatch) { border-color: var(--night-line); }
.visit .choice input:checked + span { background: var(--night-ink); color: var(--ink); border-color: var(--night-ink); }
.visit .choice label:has(input:focus-visible) > span { outline-color: var(--night-ink); }
.choice-days label { flex: 1 1 28%; }
.field { display: grid; gap: 10px; color: var(--night-mute); font-size: 0.95rem; }
.field input {
  min-height: 50px; padding: 0 14px; border: 1px solid var(--night-line); border-radius: 3px;
  background: transparent; color: var(--night-ink); font: inherit; font-size: 1rem;
}
.visit .message-label { color: var(--night-mute); }
.visit .message-text { background: rgba(255, 255, 255, 0.06); border-color: var(--night-line); color: var(--night-ink); }
.reach { display: grid; gap: 30px; max-width: 620px; margin: 56px auto 0; padding: 0 var(--gutter); }
.reach h3 { font-family: var(--display); font-size: 1.5rem; margin-bottom: 12px; }
.reach-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 16px;
  border: 1px solid var(--night-line); border-radius: 3px; text-decoration: none; font-size: 0.98rem;
  transition: var(--press), border-color 160ms ease;
}
.chip .mark { width: 24px; height: 24px; border-radius: 6px; }
.chip .icon { color: var(--night-ink); }

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

.footer { padding: 48px var(--gutter) 56px; border-top: 1px solid var(--night-line); text-align: center; }
.wordmark-small { font-family: var(--display); font-size: 1.9rem; }
.footer .fine { max-width: 34rem; margin: 10px auto 0; }
.back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; font-size: 0.95rem; }

/* ---------------------------------------------------------------- wider screens */

@media (min-width: 700px) {
  :root { --gutter: 40px; }
  .actions { grid-template-columns: auto auto; justify-content: center; }
  .actions .demo-note { grid-column: 1 / -1; }
  .pieces { grid-template-columns: repeat(2, 1fr); gap: 44px 28px; }
  .piece:first-child, .piece:last-child { grid-column: auto; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .menu-button { display: none; }
  .nav-list {
    position: static; display: flex; gap: 30px; padding: 0; border: 0; background: none;
  }
  .nav-list a { min-height: 44px; font-family: var(--text); font-size: 0.95rem; border: 0; }
  .nav { margin-inline-start: auto; margin-inline-end: 18px; }

  .hero {
    min-height: calc(100svh - var(--bar)); padding: 24px var(--gutter) 40px;
    display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 24px;
    text-align: start; max-width: 1360px; margin: 0 auto;
  }
  .hero-copy { margin: 0; order: -1; }
  .hero-stone { width: 100%; max-width: min(640px, calc(100svh - var(--bar) - 64px)); justify-self: center; aspect-ratio: 1; }
  .actions { justify-content: start; }

  .loupe.is-live .loupe-track::after { height: 100svh; }
  .loupe-stage { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 56px; max-width: 1240px; margin: 0 auto; }
  .loupe.is-live .loupe-stage { height: calc(100svh - var(--bar)); padding-bottom: 0; }
  .loupe-picture { width: 100%; max-width: calc((100svh - var(--bar) - 48px) * 0.75); }
  .loupe.is-live .lens { width: 40%; }
  .loupe-picture { grid-row: 1 / span 2; }
  .loupe.is-live .loupe-picture { grid-row: auto; }
  .loupe-still-title { align-self: end; margin: 0; text-align: start; }
  .loupe-stage > .stops { align-self: start; }
  .loupe.is-live .stops { min-height: 0; gap: 34px; align-self: center; }
  .loupe.is-live .stop {
    grid-area: auto; text-align: start; visibility: visible; opacity: 0.32; transform: none;
    transition: opacity 300ms ease;
  }
  .loupe.is-live .stop[data-active] { opacity: 1; }
  .stop h3 { font-size: 2rem; }

  .designer { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 48px; }
  .design-view { width: 100%; max-width: 600px; }
  .design-form { margin: 0; }
}

@media (min-width: 1100px) {
  .pieces { grid-template-columns: repeat(3, 1fr); gap: 56px 36px; }
  .steps { grid-template-columns: repeat(4, 1fr); }
}

@media (hover: hover) {
  .btn-wa:hover { background: var(--wa-press); }
  .btn-line:hover { background: rgba(127, 127, 127, 0.14); }
  .chip:hover { border-color: currentColor; }
  .nav-list a:hover, .back:hover { opacity: 0.7; }
}

/* ---------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-still { display: block; }
  .bar, .btn, .chip, .ask, .design-view img, .choice label > span { transition: none; }
  .btn:active, .chip:active, .ask:active { transform: none; }
}