* {
  box-sizing: border-box;
}

/* Scrollbars — the browser default is a bright slab against a dark page */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(197, 164, 106, 0.32) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  background: rgba(197, 164, 106, 0.3);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(197, 164, 106, 0.55);
  background-clip: content-box;
}
::-webkit-scrollbar-corner { background: transparent; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* No `overflow-x` here, and this is load-bearing.
   *
   * The root element's overflow propagates to the viewport. `hidden` there
   * made the viewport a scroll container, which broke `position: sticky`;
   * swapping it to `clip` fixed sticky but propagated `clip` to the viewport,
   * and a clipped viewport is one that cannot be scrolled at all. Chrome
   * enforces that strictly, so Android phones could no longer scroll the site
   * by touch — programmatic `scrollTo` still worked, which is exactly why it
   * survived testing. Safari is laxer, so iPhones were unaffected.
   *
   * The horizontal guard lives on `.app-shell` instead (see layout.css),
   * which is not the scroll root and so can carry `clip` harmlessly. */
  /* Android/iOS inflate text in "narrow" columns on their own, which broke the
     type scale on phones. The layout is already responsive, so opt out. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The page ground.
 *
 * The old background ran two gold radials over a three-stop diagonal, which
 * meant the top-left corner of every page was noticeably warmer than the
 * bottom-right and no section could be given a surface of its own — everything
 * was already sitting on a gradient.
 *
 * A luxury page is one flat, deep colour. The two washes that remain are
 * anchored to the top, are half the strength, and fade out inside the first
 * screen: they warm the header and then get out of the way, so a section that
 * wants to look raised actually can. `background-attachment` is deliberately
 * not `fixed` — on iOS that forces a full-page repaint on every scroll frame.
 */
body {
  margin: 0;
  /* svh, not vh. On Chrome for Android and Safari on iOS, `100vh` is the
     height the viewport has with the browser chrome *retracted* — so
     `min-height: 100vh` makes every page at least a screen-and-an-address-bar
     tall, and a page with nothing below the fold still scrolls about 60px and
     then springs back. `svh` is the height with that chrome showing, which is
     what "fill the screen" is meant to mean. The vh line stays first as the
     fallback for browsers that do not know the unit. */
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font-body);
  color: var(--color-charcoal);
  direction: rtl;
  text-align: right;
  background-color: var(--color-bg);
  background-image:
    radial-gradient(120% 60% at 78% -8%, rgba(201, 169, 97, 0.09), transparent 62%),
    radial-gradient(90% 45% at 10% 2%, rgba(154, 122, 69, 0.07), transparent 58%);
  background-repeat: no-repeat;
  font-size: var(--fs-body);
  line-height: 1.8;
  font-weight: 300;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Nor here: `body` is the other half of viewport overflow propagation. */
}

/* Headings are Reem Kufi throughout, and the browser's own bold is never
   wanted: the family ships 400–700 and a synthesised weight smears the
   strokes, which on a display size is the first thing that reads as cheap. */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: var(--track-display);
  /* The one safe way to open up an Arabic line. `letter-spacing` inserts its
     value inside words, breaking the joins that hold the script together;
     `word-spacing` only widens the gaps that are already there. Reem Kufi is a
     geometric kufi with narrow counters and it sets dense by nature, so a
     little air between words is what makes a heading read as composed rather
     than as crowded. */
  word-spacing: 0.08em;
  line-height: 1.25;
}

::selection {
  background: rgba(201, 169, 97, 0.28);
  color: var(--color-ink);
}

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

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* ── Touch devices ────────────────────────────────────────────────────────
   Almost every shopper here is on a phone, so these are corrections to
   browser defaults that only show up on touch. */
@media (hover: none) and (pointer: coarse) {
  /* The default is a bright blue rectangle flashed over whatever is tapped —
     wrong on a dark gold palette. Components define their own :active states. */
  a, button, [role="button"], input, select, textarea, label, summary {
    -webkit-tap-highlight-color: transparent;
  }

  /* iOS zooms the whole page when a field smaller than 16px takes focus, and
     never zooms back out. Every control the shopper types into stays at 16px. */
  input, select, textarea {
    font-size: max(16px, 1rem);
  }

  /* A pull past the end of a scroller must not drag the page behind it. */
  body {
    overscroll-behavior-y: contain;
  }
}

.skip-link {
  position: absolute;
  right: 0;
  top: -48px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-gold);
  color: #1a1714;
  z-index: 500;
}

.skip-link:focus {
  top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}