/* ============================================================
   ZAYMAR — base.css
   Reset, fonts, typography, surfaces, layout primitives.
   ============================================================ */

/* ---- Fonts (self-hosted woff2) ---- */
@font-face {
  font-family: 'Lora';
  src: url('../assets/fonts/lora-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Zodiak';
  src: url('../assets/fonts/zodiak-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Zodiak';
  src: url('../assets/fonts/zodiak-300-italic.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Zodiak';
  src: url('../assets/fonts/zodiak-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../assets/fonts/switzer-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../assets/fonts/lora-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../assets/fonts/lora-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../assets/fonts/switzer-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Reem Kufi';
  src: url('../assets/fonts/reem-kufi-400-arabic.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Noto Naskh Arabic';
  src: url('../assets/fonts/noto-naskh-arabic-400-arabic.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  background-color: var(--z-ivory);
  color: var(--fg-on-light);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul[role='list'], ol[role='list'] { list-style: none; }
a { color: inherit; text-decoration: none; }

/* ---- Surfaces ----
   Each section declares its surface; children inherit the
   matching fg/line roles through custom properties. */
.s-ink, .s-espresso, .s-brown, .s-ivory, .s-sand, .s-paper {
  background-color: var(--bg);
  color: var(--fg);
}
.s-ink      { --bg: var(--z-ink); }
.s-espresso { --bg: var(--z-espresso); }
.s-brown    { --bg: var(--z-brown); }
.s-ink, .s-espresso, .s-brown {
  --fg: var(--fg-on-dark);
  --fg2: var(--fg2-on-dark);
  --fg3: var(--fg3-on-dark);
  --line: var(--line-on-dark);
  --accent: var(--z-gold);
  --focus-ring: var(--focus-ring-dark);
}
.s-ivory { --bg: var(--z-ivory); }
.s-sand  { --bg: var(--z-sand); }
.s-paper { --bg: var(--z-paper); }
.s-ivory, .s-sand, .s-paper {
  --fg: var(--fg-on-light);
  --fg2: var(--fg2-on-light);
  --fg3: var(--fg3-on-light);
  --line: var(--line-on-light);
  --accent: var(--z-bronze);
  --focus-ring: var(--focus-ring-light);
}

/* ---- Typography roles ---- */
.display-1, .display-2, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.display-1 { font-size: var(--fs-display-1); line-height: var(--lh-display); }
.display-2 { font-size: var(--fs-display-2); line-height: var(--lh-display); }
.h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); font-weight: 400; }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: 400; }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: 400; }

.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }

.label, .micro {
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  line-height: var(--lh-label);
}
.label { font-size: var(--fs-label); letter-spacing: var(--track-label); }
.micro { font-size: var(--fs-micro); letter-spacing: var(--track-micro); }

/* Serif numerals — a house signature (01–04, edition numbers).
   Every numeral wears the warm metal: bronze on light surfaces,
   champagne on dark. The one colour that runs the whole site. */
.num {
  font-family: var(--font-display);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.muted { color: var(--fg2, var(--fg2-on-dark)); }
.faint { color: var(--fg3, var(--fg3-on-dark)); }

p { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-m); }
.prose-lg > * + * { margin-top: var(--sp-l); }

/* Editorial story voice */
.voice {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
}

/* ---- Arabic ---- */
[lang='ar'] { font-family: var(--font-ar-text); }
.ar-display {
  font-family: var(--font-ar-display);
  font-weight: 400;
  line-height: 1.6;
}

/* ---- Layout primitives ---- */
.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}

.section { padding-block: var(--space-section); }
.section--focal { padding-block: var(--space-focal); }
.section--flush { padding-block: 0; }

.stack-s > * + * { margin-top: var(--sp-s); }
.stack-m > * + * { margin-top: var(--sp-m); }
.stack-l > * + * { margin-top: var(--sp-l); }
.stack-xl > * + * { margin-top: var(--sp-xl); }

/* ---- Hairlines ---- */
.rule { border: 0; border-top: var(--hairline) solid var(--line, var(--line-on-dark)); }

/* ---- Focus / a11y ---- */
:focus-visible {
  outline: var(--focus-ring, var(--focus-ring-dark));
  outline-offset: var(--focus-offset);
  border-radius: var(--radius);
}

.skip-link {
  position: fixed;
  top: var(--sp-s);
  left: var(--sp-s);
  z-index: var(--layer-blotter);
  padding: var(--sp-xs) var(--sp-s);
  background: var(--z-ivory);
  color: var(--z-ink);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transform: translateY(calc(-1 * var(--sp-3xl)));
}
.skip-link:focus-visible { transform: none; }

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

/* ---- Grain (static, site-wide, imperceptibly light on ivory) ---- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  /* own layer: a full-screen fixed texture that repaints on every
     scroll frame is one of the most expensive things on the page */
  transform: translateZ(0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Ambient light drift (dark surfaces only, CSS-only) ----
   The drift renders only on dark surfaces; on the light-led
   pages the whites stay clean. */
.ambient { position: relative; overflow: clip; } /* the drift layer is 160% wide; it never widens the page */
.ambient::before { display: none; }
.s-ink.ambient::before, .s-espresso.ambient::before { display: block; }
.ambient::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  opacity: var(--ambient-opacity);
  background: radial-gradient(ellipse 55% 40% at 30% 35%,
    var(--ambient-tint, var(--z-amber)), transparent 70%);
  animation: ambient-drift 36s var(--ease-enter) infinite alternate;
  will-change: transform;
}
.ambient > * { position: relative; z-index: 2; }

/* off screen, nothing needs to be moving */
.ambient.is-offscreen::before,
.manifesto.is-offscreen::after,
.hero__media.is-offscreen { animation-play-state: paused; }

@keyframes ambient-drift {
  from { transform: translate3d(-6%, -4%, 0) scale(1); }
  to   { transform: translate3d(8%, 6%, 0) scale(1.15); }
}

/* ---- Motion opt-out ----
   Both the attribute switch and the OS preference kill every
   non-essential animation. Content must be complete without them. */
/* Phones keep the tint but not the drift: the layer is 2.5x the
   viewport and never stops moving, which is the wrong thing to be
   paying for on a small GPU while the visitor is scrolling. */
@media (max-width: 56em) {
  .ambient::before { animation: none; will-change: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient::before { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
html[data-motion='off'] .ambient::before { animation: none; }
html[data-motion='off'] *,
html[data-motion='off'] *::before,
html[data-motion='off'] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* Reveal targets stay visible when JS or motion is absent.
   .js is added by main.js only when motion is allowed. */
[data-reveal] { opacity: 1; }
html.js-motion [data-reveal] { opacity: 0; }

::selection { background: var(--z-caramel); color: var(--z-ivory); }

/* ---- Every phone, the same page (2026-10-11) ----
   On a phone the whole type scale follows the screen's width: 16px at a
   390-wide iPhone, and in exact proportion on a narrower or wider one
   (an iPhone mini, a Pro Max, a phone with Display Zoom or a larger
   Safari text size). Every line then breaks where it breaks on the
   reference phone, and every rem-sized space keeps its proportion. */
@media (max-width: 30em) {
  html { font-size: calc(100vw / 24.375); }
}
/* Paragraphs on a phone wrap the plain way. "pretty" wrapping exists only
   in the newest browsers, so with it an iPhone on an older iOS broke the
   same paragraph differently from a newer one; plain wrapping is the same
   on every phone. (Headings keep their balancing, which every current
   iPhone supports.) */
@media (max-width: 30em) {
  html body .about__para, html body .newsletter .newsletter__lede, html body .p-story__passage { text-wrap: wrap; }
}