/* ============================================================
   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;
}

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;
}

.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;
}

.lang-switch::before {
  content: "⌘";
  font-size: 0.7em;
  opacity: 0.55;
}

.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 {
  padding: 3.2rem 0 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;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.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;
    overflow: hidden;
  }

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

  .region-switch {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .region-switch::-webkit-scrollbar {
    display: none;
  }

  .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;
  }
}

/* ------------------------------------------------------------------ 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;
}