/* ==========================================================================
   SUPREME LUXE — BASE
   Fonts, reset, document defaults, focus, accessibility primitives.
   ========================================================================== */

/* --- Fonts (self-hosted, latin subset) ---------------------------------- */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}

/* --- Reset --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--onyx);
  color: var(--bone);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  /* `clip` rather than `hidden` so position:sticky still works inside. */
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: var(--crimson); text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

input, textarea, select, button {
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}
input::placeholder, textarea::placeholder { color: var(--bone-40); opacity: 1; }
textarea { resize: none; }

/* Dark-mode native date picker, per the approved Bespoke screen */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.6;
  cursor: pointer;
}

::selection { background: var(--crimson); color: var(--bone); }

/* --- Display type -------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-display);
}

.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--crimson-text);   /* AA-safe crimson — see tokens.css */
}

/* --- Focus ---------------------------------------------------------------
   A dark luxury interface still has to be operable by keyboard. Bone ring,
   always visible, never removed without replacement.                        */

:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
}
/* Controls that sit on bone use an onyx ring so it stays visible. */
.btn--bone:focus-visible,
.reopen-pill:focus-visible,
.reminder__submit:focus-visible {
  outline-color: var(--onyx);
}

/* --- Accessibility helpers ----------------------------------------------- */

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

.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 200;
  background: var(--bone);
  color: var(--onyx);
  padding: 12px 20px;
  font-size: var(--fs-btn);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transform: translateY(-120%);
  transition: transform var(--t-button);
}
.skip-link:focus { transform: translateY(0); }

/* Real radios/checkboxes sit behind the visual chips so option groups keep
   native semantics and keyboard behaviour. */
.option-input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* --- Responsive copy variants -------------------------------------------
   A few headings and labels differ between the approved desktop and mobile
   canvases. Both variants ship inside one element; `display:none` keeps the
   hidden one out of the accessibility tree, so there is no duplicate reading
   and no JS text swapping.

   These utilities only ever HIDE. They never set a display value, so a
   visible element keeps whatever display its own component class gives it
   (inline-flex button, list-item, block picture, and so on).

   NOTE: if either rule below is ever lost, BOTH variants render and the copy
   visibly concatenates ("Baby's Breath FillersBaby's Breath"). Keep them
   together and keep them valid.

   The class is doubled to raise specificity to 0-2-0. A single class would tie
   with component rules that set their own display — `.btn` (inline-flex) and
   `.btn--block` (flex) live in components.css, which loads later, so a
   single-class utility would lose on source order and the element would stay
   visible. That is exactly how "Private Request" and "Speak to Concierge"
   both ended up rendering on the homepage Bespoke teaser.                   */

@media (min-width: 768px) { .on-mobile.on-mobile   { display: none; } }
@media (max-width: 767px) { .on-desktop.on-desktop { display: none; } }