/* UR_BN Jewelers: black and ivory like the logo, champagne gold for the few things that should glow.
   Light geometric type (Jost) set wide, the way the mark sets "UR_BN" and "JEWELERS". */
:root {
  --bg: #0c0c0c;
  --bg-2: #121212;
  --edge: #2b2926;
  --surface: #141414;
  --field: #111111;
  --field-edge: #34312d;
  --fg: #efeae0;
  --fg-soft: #cfc8bb;
  --muted: #9b958a;
  --line: rgba(239, 234, 224, 0.12);
  --deep-bg: #050505;
  --deep-fg: #efeae0;
  --deep-muted: #8f897e;
  --deep-line: rgba(239, 234, 224, 0.12);
  --deep-edge: #2b2926;
  --accent: #c9a96a;
  --accent-2: #b5965a;
  --accent-hi: #dcc08a;
  --on-accent: #0b0b0b;
  --good: #b9cf8a;
  --shade: #000000;
  --r: 2px;
  --display: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --body: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  color-scheme: dark;
}

body {
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* light, wide display type instead of the heavy condensed default */
.hero h1,
.sec-head h1,
.sec-head h2,
.card h3,
.flavor h2,
.story h2,
.pdp-info h1,
.co h1,
.order h1,
.narrow h1,
.prose h2,
.drawer-head h2,
.promo-big,
.request h2 {
  font-weight: 300;
  letter-spacing: 0.06em;
}
.hero h1 {
  font-size: clamp(40px, 4.8vw, 68px);
  line-height: 1.02;
}
.hero h1 .dot {
  color: var(--accent);
}
.sec-head {
  border-bottom: 1px solid var(--line);
}
.sec-head h1,
.sec-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
}
.card h3 {
  font-size: 19px;
  letter-spacing: 0.08em;
}
.flavor h2 {
  font-size: clamp(34px, 4vw, 52px);
}
.flavor-num,
.step-n {
  font-weight: 300;
  color: var(--accent);
}
.hero-prices dd,
.step-n {
  font-weight: 300;
}
.pdp-info h1 {
  font-size: clamp(34px, 4vw, 50px);
}
.co h1,
.order h1,
.narrow h1 {
  font-size: clamp(32px, 4.4vw, 48px);
}

/* wordmark: UR_BN over JEWELERS, set like the logo */
.wm {
  font-weight: 300;
  font-size: 21px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
.wm-sub {
  font-size: 0.4em;
  letter-spacing: 0.5em;
  color: var(--muted);
}
.wm-lg {
  font-size: 30px;
}
.brand img.brand-mark {
  width: 38px;
  height: 38px;
}

/* quiet announcement bar: ivory text on black with a gold hairline */
.announce {
  background: var(--deep-bg);
  color: var(--accent-hi);
  border-bottom: 1px solid var(--line);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.top {
  border-bottom-color: var(--line);
}

/* dark placeholders behind photos (the defaults use the text color) */
.card-img,
.gallery-main,
.gallery-thumbs button,
.line img,
.sum-line img,
.gram {
  background: #111;
}
.card-tag {
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 12px;
}
.card-price {
  font-weight: 500;
}
.flavors {
  border-top: 1px solid var(--line);
}
.flavor + .flavor {
  border-top-color: var(--line);
}
.how {
  border-top: 1px solid var(--line);
}
.story-logo {
  max-width: 240px;
  margin: 0 auto;
}
.btn {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
}
.btn-ghost {
  border-color: rgba(239, 234, 224, 0.35);
}
.opt-vals span,
.qty,
.method,
.field input,
.field textarea,
.chat-compose textarea {
  color: var(--fg);
}
.field input::placeholder,
.field textarea::placeholder,
.chat-compose textarea::placeholder {
  color: #6f6a62;
}
.chat-launch {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.msg.them {
  background: var(--surface);
  border-color: var(--line);
}
.drawer-scrim {
  background: rgba(0, 0, 0, 0.6);
}

/* four pieces across on desktop */
.grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 30px 22px;
}
.card-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* show the whole watch, top of the bezel included */
.hero-photo img {
  object-position: 50% 32%;
}