/* ============================================================
   The Intimacy Edit — editorial design system
   Warm paper palette, serif headlines, quiet commerce modules.
   ============================================================ */

:root {
  --ink: #1c1a17;
  --ink-soft: #403a33;
  --muted: #776d61;
  --line: #e5dcd0;
  --line-strong: #d3c7b7;
  --bg: #fbf8f3;
  --surface: #fffdf9;
  --surface-alt: #f5efe6;
  --accent: #8a4b30;
  --accent-dark: #6d3a24;
  --accent-soft: #f3e4d9;
  --green: #2f5748;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(28, 26, 23, 0.05), 0 12px 28px -18px rgba(28, 26, 23, 0.25);
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-arabic-sans: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif;
  --font-arabic-serif: "Noto Naskh Arabic", "Segoe UI", Tahoma, "Geeza Pro", serif;
  --max: 1120px;
}

/* Arabic webfonts, self-hosted and Arabic-subset only.
   `unicode-range` means an English page never downloads them: the browser only
   fetches a face when a character inside its range is actually rendered. Georgia
   and Tahoma have no Arabic coverage, which is why an Arabic page previously
   fell back to whatever Windows or macOS happened to ship. */

@font-face {
  font-family: "Noto Sans Arabic";
  src: url("/assets/fonts/noto-sans-arabic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011;
}

@font-face {
  font-family: "Noto Sans Arabic";
  src: url("/assets/fonts/noto-sans-arabic-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011;
}

@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("/assets/fonts/noto-naskh-arabic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011;
}

@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("/assets/fonts/noto-naskh-arabic-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

/* Nothing may poke out past the viewport.
   Two things used to do it on a phone: grid items default to `min-width: auto`,
   so one long unbreakable token ("cash-on-delivery", a coupon code, a URL) could
   widen a card past the screen and take its padding with it; and a browser that
   substitutes a different serif for the headline face re-wraps every line. `clip`
   rather than `hidden` on the body so the sticky header and the sticky article
   aside keep working — `hidden` would turn the body into their scroll container.
   This is the belt; the fixes below are the braces. */
body {
  overflow-x: clip;
}

.card-grid > *,
.region-layout > *,
.article-layout > *,
.picker-list li,
.partner-module {
  min-width: 0;
}

h1,
h2,
h3,
h4,
p,
li,
dd,
blockquote,
figcaption,
.partner-facts span {
  overflow-wrap: break-word;
}

a {
  color: var(--accent-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent);
}

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.35rem;
}

.container.narrow {
  max-width: 760px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0;
  inset-inline-start: 1rem;
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 50;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0.5rem);
}

/* ------------------------------------------------------- utility bar */

.utility-bar {
  background: var(--ink);
  color: #f3ece2;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}

.utility-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.utility-text {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.68rem;
  opacity: 0.85;
}

.utility-region {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.9;
}

.region-switch {
  display: inline-flex;
  gap: 0.25rem;
}

.region-chip {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(243, 236, 226, 0.28);
  color: inherit;
  font: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Both labels ship in the markup and the breakpoint below picks one (see
   `regionOptions` in lib/render.js). The short label is what keeps four chips
   inside a 320px screen. */
.region-chip-short {
  display: none;
}

.region-chip:hover {
  border-color: rgba(243, 236, 226, 0.6);
}

.region-chip[aria-pressed="true"] {
  background: #f3ece2;
  color: var(--ink);
  border-color: #f3ece2;
  font-weight: 600;
}

/* Language switch: always links to the same page in the other language when a
   translation exists, and to that language's home page when it does not. */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.68rem;
  border: 1px solid rgba(243, 236, 226, 0.42);
  border-radius: 999px;
  color: inherit;
  font-size: 0.74rem;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* A globe, not `⌘`. The Command-key glyph has no coverage in Noto Sans Arabic,
   which is the font the Arabic pages load, so on a phone the switch rendered as
   a tofu box (or, worse, as an Arabic letter with no meaning). U+1F310 is drawn
   by every phone's emoji font. */
/* No icon before the label. It used to be `⌘`, which has no coverage in Noto
   Sans Arabic - the font the Arabic pages load - so on a phone it rendered as a
   tofu box or as a meaningless Arabic letter. A globe emoji is no better at
   9px: it collapses to a dot. The pill plus "English"/"العربية" says what the
   link does, and `aria-label` says it in the reader's own language. */
.lang-switch {
  gap: 0;
}

.lang-switch:hover,
.lang-switch:focus-visible {
  background: #f3ece2;
  color: var(--ink);
  border-color: #f3ece2;
}

.lang-switch.is-footer {
  margin: 0.35rem 0 0;
  border-color: var(--line-strong);
  color: var(--ink);
}

.lang-switch.is-footer:hover,
.lang-switch.is-footer:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: #f3ece2;
}

/* ---------------------------------------------------------- masthead */

.masthead {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(140%) blur(6px);
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 7px;
  background: var(--accent);
  color: #fff8f1;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.brand-name {
  font-family: var(--font-serif);
  font-size: 1.22rem;
  letter-spacing: -0.01em;
}

.primary-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.1rem;
  font-size: 0.86rem;
}

.primary-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.15rem 0;
  border-bottom: 1px solid transparent;
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.nav-regions {
  display: inline-flex;
  gap: 0.6rem;
  padding-left: 1rem;
  border-left: 1px solid var(--line-strong);
}

.nav-regions a {
  font-size: 0.82rem;
  color: var(--muted);
}

/* Mobile menu button. Hidden on desktop and hidden when JavaScript is off, so
   the plain-HTML nav is always reachable; the `js` class in <head> is what lets
   the media query below collapse the links behind this button. */

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.42rem 0.95rem;
  cursor: pointer;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 14px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.nav-toggle-icon {
  position: relative;
  transition: background 0.2s ease;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform 0.2s ease, top 0.2s ease;
}

.nav-toggle-icon::before {
  top: -5px;
}

.nav-toggle-icon::after {
  top: 5px;
}

html.nav-open .nav-toggle-icon {
  background: transparent;
}

html.nav-open .nav-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

html.nav-open .nav-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

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

.hero {
  background: linear-gradient(180deg, var(--surface-alt), var(--bg));
  border-bottom: 1px solid var(--line);
  padding: 4rem 0 3.4rem;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center;
}

.hero-copy {
  max-width: 620px;
}

/* The hero photograph: a plain 16:9 crop, no scrim, so the copy keeps full
   contrast and the image keeps its credit line. */
.hero-figure {
  margin: 0;
}

.hero h1,
.page-hero h1,
.article h1,
.region-hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.15rem);
  margin: 0.6rem 0 1rem;
}

.hero-dek {
  font-size: 1.06rem;
  color: var(--ink-soft);
  margin: 0 0 1.6rem;
  max-width: 62ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--accent);
  margin: 0 0 0.4rem;
  font-weight: 600;
}

/* -------------------------------------------------------- trust strip */

/* Three claims a first-time reader needs before anything else: who edits this,
   how health claims are checked, and that retail links are disclosed. Sits
   directly under the hero so it is visible in the first screen on desktop. */

.trust-strip {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 0;
}

.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.85rem 1.8rem;
}

.trust-item {
  display: grid;
  gap: 0.15rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.trust-item span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 600;
}

/* ------------------------------------------------------- market hint */

/* The verified store module lives at the end of an article. This bar lets a
   reader who already knows their country jump to it without losing the page. */

.market-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  margin: 0 0 1.5rem;
  padding: 0.65rem 0.95rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
}

.market-hint p {
  margin: 0;
}

.market-hint-label {
  font-size: 0.68rem !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted) !important;
  font-weight: 600;
}

.market-hint-markets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
}

.market-hint-markets a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.market-hint-markets a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.market-hint-jump {
  margin-inline-start: auto;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-dark);
  white-space: nowrap;
}

.market-hint-jump:hover {
  color: var(--accent);
}

/* The anchor of the same name wraps the retail module at the end of the page;
   scroll-margin keeps the sticky masthead from covering it. */

.store-notes {
  scroll-margin-top: 6rem;
}

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

.button {
  display: inline-block;
  background: var(--accent);
  color: #fff8f1;
  text-decoration: none;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid var(--accent);
  transition: background 0.15s ease, transform 0.15s ease;
}

.button:hover {
  background: var(--accent-dark);
  color: #fff8f1;
}

.button.is-ghost {
  background: transparent;
  color: var(--accent-dark);
  border-color: var(--line-strong);
}

.button.is-ghost:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.text-link {
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}

/* ---------------------------------------------------------- sections */

.section {
  /* Vertical rhythm only. The `padding` shorthand used to zero the horizontal
     gutter that `.container` sets, because `.section` is declared later at the
     same specificity — so every `<section class="container section">` ran edge
     to edge: the market cards and their full-bleed thumbnails sat flush against
     the screen, and on a phone whose browser renders the fallback serif a little
     wider they were pushed past the right edge and clipped. */
  padding-block: 3.2rem 0.5rem;
}

.section-head {
  max-width: 62ch;
  margin-bottom: 1.5rem;
}

.section-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}

.section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.section-more {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 1.8rem 0 0;
}

/* ------------------------------------------------------------- cards */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.15rem;
}

.card-grid.three {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card,
.market-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover,
.market-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.card.is-flat {
  background: transparent;
  border-style: dashed;
}

.card.is-flat:hover {
  transform: none;
  box-shadow: none;
}

.card h3,
.market-card h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.16rem;
  line-height: 1.3;
  margin: 0.1rem 0 0.3rem;
}

.card h3 a,
.market-card h3 a {
  color: var(--ink);
  text-decoration: none;
}

.card h3 a:hover,
.market-card h3 a:hover {
  color: var(--accent);
}

.card p,
.market-card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.card-eyebrow {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
  margin: 0;
}

.card-meta {
  margin-top: auto !important;
  padding-top: 0.6rem;
  font-size: 0.76rem !important;
  color: var(--muted) !important;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------ article */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 3rem;
  padding-top: 2.4rem;
  padding-bottom: 3rem;
  align-items: start;
}

.breadcrumb {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--accent);
}

.article h1 {
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  margin: 0.3rem 0 0.7rem;
}

.dek {
  font-size: 1.06rem;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
  max-width: 64ch;
}

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 1.8rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}

.byline span + span::before {
  content: "·";
  margin-right: 0.7rem;
  color: var(--line-strong);
}

/* ---------------------------------------------------------------- toc */

.toc {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  margin-bottom: 2rem;
  font-size: 0.88rem;
}

.toc-title {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--muted);
  font-weight: 600;
}

.toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
}

.toc a {
  text-decoration: none;
  color: var(--ink-soft);
}

.toc a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* -------------------------------------------------------------- prose */

.prose {
  font-size: 1.02rem;
  color: var(--ink-soft);
}

.prose > * + * {
  margin-top: 1.15rem;
}

.prose h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 2.4rem;
  padding-top: 0.4rem;
  scroll-margin-top: 6rem;
}

.prose h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.14rem;
  color: var(--ink);
  margin-top: 1.9rem;
  scroll-margin-top: 6rem;
}

.prose h4 {
  font-size: 1rem;
  margin-top: 1.5rem;
  color: var(--ink);
}

.prose p,
.prose li {
  color: var(--ink-soft);
}

.prose strong {
  color: var(--ink);
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
  display: grid;
  gap: 0.45rem;
}

.prose li ul {
  margin-top: 0.45rem;
}

.prose blockquote {
  margin: 1.6rem 0;
  padding: 1rem 1.3rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink);
}

.prose blockquote p {
  margin: 0;
  color: var(--ink);
}

.prose blockquote p + p {
  margin-top: 0.6rem;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.2rem 0;
}

.prose code {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.05rem 0.35rem;
  font-size: 0.88em;
}

.table-wrap {
  overflow-x: auto;
  /* A comparison table is wider than a phone by design (five columns of prose in
     320px is unreadable), so it scrolls. `contain` stops a sideways swipe inside
     the table from also dragging the page, and momentum scrolling is what makes
     the second half of the table reachable at all on iOS. */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/* Printed under a table only while it can actually be swiped sideways. Without
   it the third column simply stops at the bezel and the reader reads a sentence
   that visibly ends mid-word - which is what "the text runs out of the screen"
   looked like. Wider screens hide it below, where nothing needs swiping. */
.table-hint {
  display: none;
  margin: 0.45rem 0 0;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.prose table,
.snapshot {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  min-width: 460px;
}

.prose table th,
.prose table td,
.snapshot th,
.snapshot td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.prose table thead th,
.snapshot thead th {
  background: var(--surface-alt);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.prose table tbody tr:last-child th,
.prose table tbody tr:last-child td,
.snapshot tr:last-child th,
.snapshot tr:last-child td {
  border-bottom: 0;
}

.prose table tbody th[scope="row"] {
  font-weight: 600;
  color: var(--ink);
  background: #fdfbf7;
}

.snapshot th {
  width: 42%;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.78rem;
}

.snapshot {
  min-width: 0;
  font-size: 0.82rem;
}

/* --------------------------------------------------- partner modules */

.partner-module {
  margin: 2.6rem 0 1.6rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.partner-module h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.28rem;
  margin: 0.1rem 0 0.6rem;
  color: var(--ink);
}

.partner-module p {
  margin: 0 0 0.8rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.partner-facts {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.88rem;
}

.partner-facts li {
  display: flex;
  gap: 0.6rem;
  color: var(--ink-soft);
  border-bottom: 1px dashed var(--line);
  padding-bottom: 0.4rem;
}

.partner-facts span {
  flex: 0 0 78px;
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 0.15rem;
}

.coupon {
  font-size: 0.88rem !important;
  color: var(--ink) !important;
}

.coupon code {
  background: var(--accent-soft);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 0.1rem 0.45rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.fineprint {
  font-size: 0.74rem !important;
  color: var(--muted) !important;
  margin: 0.8rem 0 0 !important;
  line-height: 1.55;
}

.partner-module.is-pending {
  border-style: dashed;
  background: var(--surface-alt);
  box-shadow: none;
}

/* Market modules: server/middleware and JS flip data-region on <html>. The CSS
   rules below reproduce the same routing before any script runs, so the first
   paint is already correct and no-JS visitors still get a working link:
   - a module that does not serve the visitor's market is hidden;
   - the region picker steps aside when a module for that market exists;
   - with no matching module, the picker stays as the fallback. */
[hidden] {
  display: none !important;
}

html[data-region="global"] [data-markets]:not([data-markets~="global"]) {
  display: none;
}

html[data-region="ae"] [data-markets]:not([data-markets~="ae"]):not([data-markets~="global"]),
html[data-region="om"] [data-markets]:not([data-markets~="om"]):not([data-markets~="global"]),
html[data-region="sa"] [data-markets]:not([data-markets~="sa"]):not([data-markets~="global"]) {
  display: none;
}

html[data-region="ae"] main:has([data-markets~="ae"]) .region-picker,
html[data-region="om"] main:has([data-markets~="om"]) .region-picker,
html[data-region="sa"] main:has([data-markets~="sa"]) .region-picker {
  display: none;
}

.region-picker .picker-list {
  list-style: none;
  margin: 1rem 0 0.6rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.region-picker .picker-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

.region-picker .picker-list strong {
  color: var(--ink);
}

.region-picker .picker-list span {
  color: var(--muted);
  font-size: 0.76rem;
  margin-right: auto;
}

.region-strip {
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.disclosure-line {
  font-size: 0.78rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: 2rem;
  padding-top: 1rem;
}

.link-pending {
  border-bottom: 1px dotted var(--line-strong);
  color: inherit;
}

/* -------------------------------------------------------------- aside */

.article-aside,
.region-aside {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 5.5rem;
}

.aside-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem;
  font-size: 0.85rem;
}

.aside-card p {
  margin: 0 0 0.6rem;
  color: var(--ink-soft);
}

.aside-card p:last-child {
  margin-bottom: 0;
}

.aside-card .partner-module {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

/* -------------------------------------------------------------- region */

.region-hero {
  padding: 2.4rem 0 1.6rem;
  max-width: 780px;
}

.region-hero h1 {
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  margin: 0.3rem 0 0.7rem;
}

.region-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 3rem;
  padding-bottom: 2rem;
  align-items: start;
}

.region-aside {
  position: static;
}

/* ----------------------------------------------------------------- faq */

.faq {
  display: grid;
  gap: 0.6rem;
  max-width: 820px;
}

.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.1rem;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.94rem;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  float: right;
  color: var(--accent);
  font-weight: 400;
}

.faq details[open] summary::after {
  content: "–";
}

.faq p {
  margin: 0.7rem 0 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- pages */

.page-hero {
  padding: 2.8rem 0 1.4rem;
  max-width: 780px;
}

.page-hero h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.5rem);
  margin: 0 0 0.6rem;
}

.is-page .prose,
.is-page .prose > p {
  font-size: 1rem;
}

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

.site-footer {
  margin-top: 4rem;
  background: #17140f;
  color: #d9d1c6;
  padding: 3rem 0 2rem;
  font-size: 0.86rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
}

.site-footer a {
  color: #e8e0d4;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-logo {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: #fff;
  margin: 0 0 0.6rem;
}

.footer-brand p {
  color: #b6ada0;
  margin: 0 0 0.7rem;
  max-width: 34ch;
}

.footer-note {
  font-size: 0.78rem;
}

.footer-heading {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8d8375;
  margin: 0 0 0.8rem;
  font-weight: 600;
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.footer-legal {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(233, 224, 212, 0.16);
  font-size: 0.74rem;
  color: #9a9184;
  line-height: 1.65;
}

.footer-legal p {
  margin: 0 0 0.5rem;
  max-width: 92ch;
}

/* ------------------------------------------------------- responsive */

@media (max-width: 980px) {
  .article-layout,
  .region-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .article-aside,
  .region-aside {
    position: static;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  /* Header budget on a phone: brand + one button (~56px), then a single compact
     utility row. Previously the three-line tagline plus wrapping market chips
     plus a three-row nav took 317px of an 844px screen before any content. */
  .utility-text {
    display: none;
  }

  .utility-region-label {
    display: none;
  }

  .utility-inner {
    flex-wrap: nowrap;
    gap: 0.4rem 0.75rem;
    padding-top: 0.42rem;
    padding-bottom: 0.42rem;
  }

  .utility-region {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.4rem;
    font-size: 0.72rem;
    /* Was `hidden`, which is what clipped a wrapping chip row; the chips now
       wrap onto a second line instead of scrolling sideways out of view. */
    overflow: visible;
  }

  .utility-inner > .lang-switch {
    flex: 0 0 auto;
  }

  /* No horizontal scroll here any more: a scroller cannot show a half-drawn last
     chip without looking broken, and "United Arab Emirates" alone was most of the
     row. The short name is printed (see `regionOptions` in lib/render.js) and
     anything that still does not fit moves to a second line. */
  .region-switch {
    flex-wrap: wrap;
    row-gap: 0.28rem;
  }

  .region-chip-full {
    display: none;
  }

  .region-chip-short {
    display: inline;
  }

  .region-chip {
    white-space: nowrap;
  }

  .lang-switch {
    padding: 0.18rem 0.55rem;
    font-size: 0.7rem;
  }

  .masthead-inner {
    gap: 0.6rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  .brand-name {
    font-size: 1.05rem;
  }

  .brand-mark {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.85rem;
  }

  .js .nav-toggle {
    display: inline-flex;
  }

  .js .primary-nav {
    display: none;
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 0.95rem;
    margin-top: 0.45rem;
    padding-top: 0.2rem;
    border-top: 1px solid var(--line);
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
  }

  .js .primary-nav a {
    padding: 0.62rem 0.15rem;
    border-bottom: 1px solid var(--line);
  }

  .js .primary-nav a[aria-current="page"] {
    border-bottom-color: var(--accent);
  }

  .js .nav-regions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    padding: 0.55rem 0.15rem;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .js .nav-regions a {
    font-size: 0.9rem;
  }

  .js .nav-search {
    border-bottom: 0;
  }

  html.nav-open .primary-nav {
    display: flex;
  }
}

@media (max-width: 700px) {
  html {
    font-size: 16px;
  }

  .hero {
    padding: 2.2rem 0 2rem;
  }

  .hero-copy {
    max-width: none;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .utility-inner {
    justify-content: flex-start;
  }
}

/* ------------------------------------------------------------ small phones
   The display sizes are clamped with a viewport unit, but every clamp here has a
   floor that is comfortable in a 480px-wide window and too wide for a 320px one:
   "Intimacy advice you can act on, written for couples in the Gulf" is set at
   33.6px and runs to the last pixel of the column, so one word that does not fit
   - "explainers", "cash-on-delivery" - hangs over the edge or is clipped by
   `overflow-x: clip`. The floor comes down here rather than everywhere, because
   the same heading on a tablet is right as it is. */
@media (max-width: 440px) {
  .hero h1 {
    font-size: clamp(1.72rem, 7.6vw, 2.1rem);
  }

  .page-hero h1,
  .region-hero h1,
  .article h1 {
    font-size: clamp(1.62rem, 7vw, 1.95rem);
  }

  .section-head h2 {
    font-size: clamp(1.32rem, 5.6vw, 1.6rem);
  }

  .table-hint {
    display: block;
  }
}

/* ------------------------------------------------------------------ RTL */

html[dir="rtl"] body {
  text-align: right;
  font-family: var(--font-arabic-sans);
}

html[dir="rtl"] .prose,
html[dir="rtl"] .partner-module,
html[dir="rtl"] .dek,
html[dir="rtl"] .footer-legal {
  line-height: 1.9;
}

html[dir="rtl"] .hero h1,
html[dir="rtl"] .article h1,
html[dir="rtl"] .region-hero h1,
html[dir="rtl"] .page-hero h1,
html[dir="rtl"] .prose h2,
html[dir="rtl"] .prose h3,
html[dir="rtl"] .section-head h2 {
  font-family: var(--font-arabic-serif);
  letter-spacing: 0;
  line-height: 1.35;
}

html[dir="rtl"] .primary-nav,
html[dir="rtl"] .byline,
html[dir="rtl"] .section-more,
html[dir="rtl"] .hero-actions {
  direction: rtl;
}

html[dir="rtl"] .prose ul,
html[dir="rtl"] .prose ol {
  padding-right: 1.25rem;
  padding-left: 0;
}

html[dir="rtl"] .prose blockquote {
  border-left: 0;
  border-right: 3px solid var(--accent);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

html[dir="rtl"] .prose table th,
html[dir="rtl"] .prose table td,
html[dir="rtl"] .snapshot th,
html[dir="rtl"] .snapshot td {
  text-align: right;
}

html[dir="rtl"] .partner-facts li {
  flex-direction: row;
}

html[dir="rtl"] .faq summary::after {
  float: left;
}

/* ------------------------------------------------------------ media */
/* Article covers, in-body figures and card thumbnails share one pattern:
   a 16:9 crop, a quiet credit line, and negative side margins on cards so the
   image bleeds to the card edge without disturbing the text padding. */

.media {
  margin: 0 0 1.5rem;
}

.media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface-alt);
  /* Stock photography from several photographers: a single warm, slightly
     desaturated grade keeps the page from looking like a collage. */
  filter: saturate(0.92) contrast(1.02);
}

.article-cover {
  margin: 0.4rem 0 1.4rem;
}

.prose .media {
  margin: 1.8rem 0;
}

.prose .media img {
  border-radius: var(--radius-sm);
}

.media-credit {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted);
  opacity: 0.72;
}

.media-credit a {
  color: var(--muted);
}

.card-media {
  display: block;
  margin: -1.3rem -1.35rem 0.55rem;
  overflow: hidden;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background: var(--surface-alt);
}

.card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
  transition: transform 0.4s ease;
}

.card:hover .card-media img,
.market-card:hover .card-media img {
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .card-media img {
    transition: none;
  }
}
/* ==================================================== hero / search / newsletter
   Added with the P0 pass: one photograph in the hero, a client-filtered search
   page, and a newsletter block that degrades to a mailto until a provider is
   configured in data/site.json.
   ============================================================== */

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .hero-figure img {
    aspect-ratio: 16 / 9;
  }
}

.hero-figure img {
  box-shadow: var(--shadow);
}

/* ------------------------------------------------------------- search */

.search-box {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
}

.search-box input[type="search"] {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.72rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.search-box input[type="search"]:focus-visible,
.search-box input[type="search"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.search-status {
  margin: 0 0 1.4rem;
  font-size: 0.84rem;
  color: var(--muted);
}

.search-results {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  border-top: 1px solid var(--line);
}

.search-results > li {
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}

.search-results > li[hidden] {
  display: none;
}

.search-results a {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 1.14rem;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.search-results a:hover,
.search-results a:focus-visible {
  border-bottom-color: var(--accent);
}

.search-results p {
  margin: 0.35rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.search-results .search-meta {
  margin-top: 0.4rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}

/* --------------------------------------------------------- newsletter */

.newsletter {
  padding: 1.9rem clamp(1.2rem, 3vw, 2.2rem);
  background: var(--accent-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.newsletter h2 {
  margin: 0.3rem 0 0.6rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  color: var(--ink);
}

.newsletter p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  max-width: 60ch;
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 0.7rem;
}

.newsletter-form input[type="email"] {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.72rem 0.9rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.newsletter-form input[type="email"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.newsletter .fineprint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.article .newsletter {
  margin: 2rem 0 0;
}

html[dir="rtl"] .search-box input[type="search"],
html[dir="rtl"] .newsletter-form input[type="email"] {
  text-align: right;
}

/* ------------------------------------------------------ consent banner */

/* Rendered `hidden`; app.js reveals it only when no answer is stored, so this
   never appears for a reader who already chose, and never appears at all
   without JavaScript. */
.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -18px 32px -28px rgba(28, 26, 23, 0.45);
}

.consent[hidden] {
  display: none;
}

.consent__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.9rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.6rem;
  flex-wrap: wrap;
}

.consent__text {
  margin: 0;
  flex: 1 1 24rem;
  max-width: 66ch;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.consent__text strong {
  color: var(--ink);
}

.consent__text a {
  color: var(--accent-dark);
  text-underline-offset: 2px;
}

.consent__actions {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.consent__actions .button {
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

body.has-consent {
  padding-bottom: 6.5rem;
}

@media (max-width: 620px) {
  body.has-consent {
    padding-bottom: 9.5rem;
  }

  .consent__inner {
    padding: 0.8rem 1rem;
  }

  .consent__actions {
    width: 100%;
  }

  .consent__actions .button {
    flex: 1 1 auto;
    text-align: center;
  }
}