/*
 * Kayffa landing (apps/landing). Static, no build step.
 * Tokens: copied VERBATIM from packages/ui/src/styles/kayffa-tokens.css (DS v2 semantic layer --kayffa-ds-* and the
 * palette it reads). Fonts: the same self-hosted families as apps/web (Mada, Amiri, Source Sans 3, OFL).
 * Shape language from apps/web/src/styles/ds-v2.css + site-nav.css: sharp corners, rods, one hard depth shadow,
 * mashrabiya panels, gold ornaments. Logical properties only (RTL default, LTR for English).
 */

@font-face { font-family: "Mada"; src: url("fonts/Mada-wght.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Amiri"; src: url("fonts/Amiri-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/SourceSans3-wght.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

/* ── tokens (verbatim subset of kayffa-tokens.css) ─────────────────────────────────────────────────────── */
:root {
  --kayffa-color-paper: #f7f4ef;
  --kayffa-color-ink: #140206;
  --kayffa-color-nile: #1034a6;
  --kayffa-color-nile-hover: #0d2a85;
  --kayffa-color-faience: #00686d;
  --kayffa-color-gold: #705b3e;
  --kayffa-color-sand: #f4ede4;
  --kayffa-color-surface: #fffdfb;
  --kayffa-color-terracotta-ink: #9a4527;
  --kayffa-color-gold-ink: #5e4b31;
  --kayffa-color-sand-sunk: #e8dfcf;
  --kayffa-color-wood-soft: #a88a69;
  --kayffa-color-wood-pale: #d9c7ae;
  --kayffa-color-wood-mist: #efe5d6;
  --kayffa-color-glow-soft: #fbf3e4;
  --kayffa-color-glow-warm: #f2e1c2;
  --kayffa-color-saffron: #e3ae3f;
  --kayffa-color-warm: #eae5de;
  --kayffa-color-muted: #625e5b;
  --kayffa-color-night: #120e16;
  --kayffa-color-night-surface: #1c1722;
  --kayffa-color-night-raised: #27202e;
  --kayffa-color-night-line: #4a4052;
  --kayffa-color-night-line-strong: #857892;
  --kayffa-color-night-text: #f2eadf;
  --kayffa-color-night-muted: #bfb4a6;
  --kayffa-color-nile-night: #9db2ff;
  --kayffa-color-faience-night: #5fc9c1;
  --kayffa-color-gold-night: #d9bc86;
  --kayffa-color-terra-night: #f19d7e;
  --kayffa-color-saffron-night: #f0c566;

  --kayffa-ds-canvas: var(--kayffa-color-paper);
  --kayffa-ds-surface: var(--kayffa-color-surface);
  --kayffa-ds-surface-subtle: var(--kayffa-color-warm);
  --kayffa-ds-surface-sunk: var(--kayffa-color-sand);
  --kayffa-ds-text: var(--kayffa-color-ink);
  --kayffa-ds-text-muted: var(--kayffa-color-muted);
  --kayffa-ds-link: var(--kayffa-color-nile);
  --kayffa-ds-link-hover: var(--kayffa-color-nile-hover);
  --kayffa-ds-primary: var(--kayffa-color-nile);
  --kayffa-ds-on-primary: var(--kayffa-color-paper);
  --kayffa-ds-accent-2: var(--kayffa-color-faience);
  --kayffa-ds-accent-3: var(--kayffa-color-terracotta-ink);
  --kayffa-ds-border: var(--kayffa-color-ink);
  --kayffa-ds-border-subtle: var(--kayffa-color-wood-pale);
  --kayffa-ds-ornament: var(--kayffa-color-gold);
  --kayffa-ds-ornament-2: var(--kayffa-color-nile);
  --kayffa-ds-caption: var(--kayffa-color-gold);
  --kayffa-ds-caption-on-sunk: var(--kayffa-color-gold-ink);
  --kayffa-ds-mashrabiya-stroke: var(--kayffa-color-wood-soft);
  --kayffa-ds-mashrabiya-fill: var(--kayffa-color-wood-pale);
  --kayffa-ds-mashrabiya-panel: var(--kayffa-color-wood-mist);
  --kayffa-ds-glow: var(--kayffa-color-glow-soft);
  --kayffa-ds-on-glow: var(--kayffa-color-ink);
  --kayffa-ds-glow-edge: var(--kayffa-color-glow-warm);
  --kayffa-ds-placeholder: var(--kayffa-color-sand-sunk);
  --kayffa-ds-hit-mark: var(--kayffa-color-saffron);
  --kayffa-ds-focus: var(--kayffa-color-nile);

  --kayffa-ds-radius: 0;
  --kayffa-ds-rod-width: 1px;
  --kayffa-ds-rod: var(--kayffa-ds-rod-width) solid var(--kayffa-ds-border);
  --kayffa-ds-rod-double: 5px double var(--kayffa-ds-border);
  --kayffa-ds-depth: 5px 3px 0 var(--kayffa-ds-border);
  --kayffa-ds-focus-ring: 3px solid var(--kayffa-ds-focus);
  --kayffa-ds-focus-offset: 3px;
  --kayffa-ds-target: 2.75rem;

  --kayffa-ds-type-display: 4.25rem;
  --kayffa-ds-type-h1: 3.25rem;
  --kayffa-ds-type-h2: 2.5rem;
  --kayffa-ds-type-h3: 1.875rem;
  --kayffa-ds-type-h4: 1.5rem;
  --kayffa-ds-type-lead: 1.3125rem;
  --kayffa-ds-type-body: 1.125rem;
  --kayffa-ds-type-body-sm: 1rem;
  --kayffa-ds-type-caption: 0.875rem;
  --kayffa-ds-type-micro: 0.75rem;
  --kayffa-ds-leading-display: 1.05;
  --kayffa-ds-leading-h1: 1.12;
  --kayffa-ds-leading-h2: 1.2;
  --kayffa-ds-leading-h3: 1.3;
  --kayffa-ds-leading-lead: 1.75;
  --kayffa-ds-leading-body: 1.85;
  --kayffa-ds-leading-body-sm: 1.7;
  --kayffa-ds-leading-caption: 1.5;

  --kayffa-ds-space-1: 0.25rem;
  --kayffa-ds-space-2: 0.5rem;
  --kayffa-ds-space-3: 0.75rem;
  --kayffa-ds-space-4: 1rem;
  --kayffa-ds-space-5: 1.5rem;
  --kayffa-ds-space-6: 2rem;
  --kayffa-ds-space-7: 3rem;
  --kayffa-ds-space-8: 4rem;
  --kayffa-ds-space-9: 6rem;

  --kayffa-ds-motion-tick: 120ms;
  --kayffa-ds-motion-step: 180ms;
  --kayffa-ds-motion-draw: 800ms;
  --kayffa-ds-ease-ui: cubic-bezier(0.2, 0.7, 0.2, 1);
  --kayffa-ds-ease-draw: cubic-bezier(0.45, 0, 0.2, 1);
  --kayffa-ds-ornament-stroke: 1.25;
  --kayffa-ds-ornament-rosette: 3rem;
  --kayffa-ds-ornament-rosette-mobile: 2rem;

  --kl-wrap: 82rem;
  --kl-font-ui: "Mada", system-ui, sans-serif;
  --kl-font-read: "Amiri", "Mada", serif;
  color-scheme: light;
}

[data-theme="night"] {
  color-scheme: dark;
  --kayffa-ds-canvas: var(--kayffa-color-night);
  --kayffa-ds-surface: var(--kayffa-color-night-surface);
  --kayffa-ds-surface-subtle: var(--kayffa-color-night-raised);
  --kayffa-ds-surface-sunk: var(--kayffa-color-night-raised);
  --kayffa-ds-text: var(--kayffa-color-night-text);
  --kayffa-ds-text-muted: var(--kayffa-color-night-muted);
  --kayffa-ds-link: var(--kayffa-color-nile-night);
  --kayffa-ds-link-hover: var(--kayffa-color-night-text);
  --kayffa-ds-primary: var(--kayffa-color-nile-night);
  --kayffa-ds-on-primary: var(--kayffa-color-night);
  --kayffa-ds-accent-2: var(--kayffa-color-faience-night);
  --kayffa-ds-accent-3: var(--kayffa-color-terra-night);
  --kayffa-ds-border: var(--kayffa-color-night-line-strong);
  --kayffa-ds-border-subtle: var(--kayffa-color-night-line);
  --kayffa-ds-ornament: var(--kayffa-color-gold-night);
  --kayffa-ds-ornament-2: var(--kayffa-color-faience-night);
  --kayffa-ds-caption: var(--kayffa-color-gold-night);
  --kayffa-ds-caption-on-sunk: var(--kayffa-color-gold-night);
  --kayffa-ds-mashrabiya-stroke: var(--kayffa-color-gold-night);
  --kayffa-ds-mashrabiya-fill: var(--kayffa-color-night-raised);
  --kayffa-ds-mashrabiya-panel: var(--kayffa-color-night-surface);
  --kayffa-ds-glow: var(--kayffa-color-saffron-night);
  --kayffa-ds-on-glow: var(--kayffa-color-night);
  --kayffa-ds-glow-edge: var(--kayffa-color-gold-night);
  --kayffa-ds-placeholder: var(--kayffa-color-night-raised);
  --kayffa-ds-hit-mark: var(--kayffa-color-saffron-night);
  --kayffa-ds-focus: var(--kayffa-color-nile-night);
}

:root:lang(en) { --kl-font-ui: "Source Sans 3", "Mada", system-ui, sans-serif; --kl-font-read: "Source Sans 3", system-ui, sans-serif; }

@media (prefers-reduced-motion: reduce) {
  :root { --kayffa-ds-motion-tick: 0ms; --kayffa-ds-motion-step: 0ms; --kayffa-ds-motion-draw: 0ms; }
}

/* ── language switch: one document, two languages ──────────────────────────────────────────────────────── */
html[lang="ar"] [data-l="en"],
html[lang="en"] [data-l="ar"] { display: none !important; }

/* ── base ──────────────────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--kayffa-ds-canvas);
  color: var(--kayffa-ds-text);
  font-family: var(--kl-font-ui);
  font-size: var(--kayffa-ds-type-body);
  line-height: var(--kayffa-ds-leading-body);
  text-rendering: optimizeLegibility;
}
img { display: block; max-inline-size: 100%; block-size: auto; }
a { color: var(--kayffa-ds-link); text-underline-offset: 0.3em; }
a:hover { color: var(--kayffa-ds-link-hover); }
:focus-visible { outline: var(--kayffa-ds-focus-ring); outline-offset: var(--kayffa-ds-focus-offset); }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
.kl-wrap { max-inline-size: var(--kl-wrap); margin-inline: auto; padding-inline: var(--kayffa-ds-space-5); }
.kl-vh { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kl-skip { position: absolute; inset-inline-start: var(--kayffa-ds-space-4); inset-block-start: -4rem; z-index: 99; padding: var(--kayffa-ds-space-2) var(--kayffa-ds-space-4); background: var(--kayffa-ds-primary); color: var(--kayffa-ds-on-primary); }
.kl-skip:focus { inset-block-start: var(--kayffa-ds-space-2); }
bdi[lang="en"] { font-family: "Source Sans 3", var(--kl-font-ui); }
/* An English credit inside Arabic text is its own LTR line, so wrapping never shuffles punctuation. */
.kl-ltr-block { display: block; direction: ltr; unicode-bidi: isolate; text-align: start; font-family: "Source Sans 3", var(--kl-font-ui); }
.kl-id { white-space: nowrap; }
.kl-item { display: inline-block; margin-block-start: var(--kayffa-ds-space-1); }
.kl-quote { margin-block: var(--kayffa-ds-space-2); overflow-wrap: anywhere; }

/* ── header (site-nav language: utility strip + one row) ──────────────────────────────────────────────── */
.kl-util { background: var(--kayffa-ds-mashrabiya-panel); border-block-end: var(--kayffa-ds-rod-width) solid var(--kayffa-ds-border-subtle); }
.kl-util .kl-wrap { display: flex; align-items: center; gap: var(--kayffa-ds-space-3); min-block-size: 2.75rem; }
.kl-util-note { font-size: var(--kayffa-ds-type-caption); color: var(--kayffa-ds-caption-on-sunk); }
.kl-util-tools { margin-inline-start: auto; display: flex; gap: var(--kayffa-ds-space-2); }
.kl-btn-mini {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 5.5rem; min-block-size: 2.25rem; padding-inline: var(--kayffa-ds-space-3);
  border: var(--kayffa-ds-rod-width) solid var(--kayffa-ds-border-subtle); border-radius: 0;
  background: var(--kayffa-ds-surface); color: var(--kayffa-ds-text);
  font: inherit; font-size: var(--kayffa-ds-type-caption); font-weight: 700; cursor: pointer;
}
.kl-btn-mini:hover { border-color: var(--kayffa-ds-border); }

.kl-bar { background: var(--kayffa-ds-canvas); }
.kl-bar .kl-wrap { display: flex; align-items: center; gap: var(--kayffa-ds-space-5); padding-block: var(--kayffa-ds-space-3); }
.kl-logo { display: inline-flex; align-items: center; gap: var(--kayffa-ds-space-3); color: var(--kayffa-ds-text); text-decoration: none; }
.kl-logo:hover { color: var(--kayffa-ds-text); }
.kl-logo-em {
  display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; margin-inline: 4px;
  border: var(--kayffa-ds-rod); outline: var(--kayffa-ds-rod); outline-offset: 3px;
  font-family: "Mada", sans-serif; font-size: 1.625rem; font-weight: 900; line-height: 1;
}
.kl-logo-lockup { display: grid; line-height: 1.1; }
.kl-logo-wm { font-family: "Mada", sans-serif; font-size: 1.875rem; font-weight: 900; }
.kl-logo-sub { font-size: var(--kayffa-ds-type-micro); color: var(--kayffa-ds-text-muted); }
.kl-nav { margin-inline-start: auto; }
.kl-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--kayffa-ds-space-2); }
.kl-nav a {
  display: inline-flex; align-items: center; min-block-size: var(--kayffa-ds-target); padding-inline: var(--kayffa-ds-space-4);
  border: var(--kayffa-ds-rod-width) solid var(--kayffa-ds-border-subtle); background: var(--kayffa-ds-surface);
  color: var(--kayffa-ds-text); font-weight: 800; text-decoration: none;
  transition: border-color var(--kayffa-ds-motion-tick) var(--kayffa-ds-ease-ui);
}
.kl-nav a:hover { border-color: var(--kayffa-ds-border); color: var(--kayffa-ds-link); }
.kl-cornice { display: block; inline-size: 100%; block-size: 0.875rem; color: var(--kayffa-ds-ornament); }

/* ── shared pieces ─────────────────────────────────────────────────────────────────────────────────────── */
.kl-section { padding-block: var(--kayffa-ds-space-8); }
.kl-section--sunk { background: var(--kayffa-ds-surface-sunk); border-block: var(--kayffa-ds-rod-width) solid var(--kayffa-ds-border-subtle); }
.kl-head { display: grid; gap: var(--kayffa-ds-space-3); margin-block-end: var(--kayffa-ds-space-7); max-inline-size: 48rem; }
.kl-kicker {
  justify-self: start; padding-inline: var(--kayffa-ds-space-3);
  border: var(--kayffa-ds-rod-width) solid var(--kayffa-ds-caption-on-sunk);
  color: var(--kayffa-ds-caption-on-sunk); font-size: var(--kayffa-ds-type-caption); font-weight: 700;
}
.kl-h2 { font-size: var(--kayffa-ds-type-h2); line-height: var(--kayffa-ds-leading-h2); font-weight: 900; }
.kl-lead { font-size: var(--kayffa-ds-type-lead); line-height: var(--kayffa-ds-leading-lead); color: var(--kayffa-ds-text-muted); }
.kl-soon {
  display: inline-block; padding-inline: var(--kayffa-ds-space-2);
  border: var(--kayffa-ds-rod-width) solid currentColor; color: var(--kayffa-ds-accent-3);
  font-size: var(--kayffa-ds-type-micro); font-weight: 700; line-height: 1.6; white-space: nowrap;
}
.kl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kayffa-ds-space-2);
  min-block-size: 3.25rem; padding-inline: var(--kayffa-ds-space-5);
  border: var(--kayffa-ds-rod); border-radius: 0; background: var(--kayffa-ds-primary); color: var(--kayffa-ds-on-primary);
  font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; box-shadow: var(--kayffa-ds-depth);
  transition: transform var(--kayffa-ds-motion-tick) var(--kayffa-ds-ease-ui);
}
.kl-btn:hover { color: var(--kayffa-ds-on-primary); transform: translate(2px, 1px); }
.kl-btn--ghost { background: var(--kayffa-ds-surface); color: var(--kayffa-ds-text); }
.kl-btn--ghost:hover { color: var(--kayffa-ds-link); }
.kl-orn { display: block; color: var(--kayffa-ds-ornament); }
.kl-sep { inline-size: 100%; max-inline-size: 40rem; block-size: 1.875rem; margin-inline: auto; margin-block: 0; }

/* ── hero ──────────────────────────────────────────────────────────────────────────────────────────────── */
.kl-hero { position: relative; padding-block: var(--kayffa-ds-space-8) var(--kayffa-ds-space-9); overflow: hidden; }
.kl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--kayffa-ds-space-8); align-items: center; }
.kl-hero-text { display: grid; gap: var(--kayffa-ds-space-5); }
.kl-hero-title { font-size: var(--kayffa-ds-type-display); line-height: var(--kayffa-ds-leading-display); font-weight: 900; }
.kl-hero-title .kl-dash { color: var(--kayffa-ds-ornament); font-weight: 400; }
.kl-hero-title .kl-accent { display: block; color: var(--kayffa-ds-primary); }
.kl-hero-actions { display: flex; flex-wrap: wrap; gap: var(--kayffa-ds-space-4); margin-block-start: var(--kayffa-ds-space-3); }
.kl-hero-meta { display: flex; flex-wrap: wrap; gap: var(--kayffa-ds-space-2) var(--kayffa-ds-space-5); font-size: var(--kayffa-ds-type-caption); color: var(--kayffa-ds-text-muted); }

/* event frame (R1-D-R) around the hero photograph */
.kl-frame {
  position: relative; justify-self: center; margin: var(--kayffa-ds-space-7);
  padding: 0.875rem; border: var(--kayffa-ds-rod);
  box-shadow: inset 0 0 0 5px var(--kayffa-ds-canvas), inset 0 0 0 6px var(--kayffa-ds-border);
  background: var(--kayffa-ds-canvas); color: var(--kayffa-ds-accent-3);
}
.kl-frame img { border: var(--kayffa-ds-rod); filter: sepia(0.18); }
.kl-frame-corner { position: absolute; inline-size: var(--kayffa-ds-ornament-rosette); block-size: var(--kayffa-ds-ornament-rosette); }
.kl-frame-corner--ss { inset-block-start: calc(var(--kayffa-ds-ornament-rosette) * -0.6); inset-inline-start: calc(var(--kayffa-ds-ornament-rosette) * -0.6); }
.kl-frame-corner--ee { inset-block-end: calc(var(--kayffa-ds-ornament-rosette) * -0.6); inset-inline-end: calc(var(--kayffa-ds-ornament-rosette) * -0.6); }
.kl-frame-date {
  position: absolute; inset-block-start: -0.9375rem; inset-inline-start: 50%; translate: -50% 0;
  padding-inline: var(--kayffa-ds-space-3); border: var(--kayffa-ds-rod); outline: var(--kayffa-ds-rod); outline-offset: 2px;
  background: var(--kayffa-ds-canvas); color: var(--kayffa-ds-text); font-size: var(--kayffa-ds-type-body-sm); line-height: 1.75rem; white-space: nowrap;
}
[dir="rtl"] .kl-frame-date { translate: 50% 0; }
.kl-frame figcaption { margin-block-start: var(--kayffa-ds-space-3); font-size: var(--kayffa-ds-type-caption); line-height: var(--kayffa-ds-leading-caption); color: var(--kayffa-ds-text); max-inline-size: 30rem; }

/* ── what it is: four doors ────────────────────────────────────────────────────────────────────────────── */
.kl-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kayffa-ds-space-5); }
.kl-door { display: grid; align-content: start; gap: var(--kayffa-ds-space-3); padding: var(--kayffa-ds-space-5); border: var(--kayffa-ds-rod); background: var(--kayffa-ds-surface); box-shadow: var(--kayffa-ds-depth); }
.kl-door-mark { inline-size: 2.5rem; block-size: 2.5rem; color: var(--kayffa-ds-ornament-2); }
.kl-door h3 { font-size: var(--kayffa-ds-type-h4); line-height: var(--kayffa-ds-leading-h3); font-weight: 800; }
.kl-door p { font-size: var(--kayffa-ds-type-body-sm); line-height: var(--kayffa-ds-leading-body-sm); color: var(--kayffa-ds-text-muted); }

/* ── numbers ───────────────────────────────────────────────────────────────────────────────────────────── */
.kl-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--kayffa-ds-rod); background: var(--kayffa-ds-surface); }
.kl-num { display: grid; gap: var(--kayffa-ds-space-1); padding: var(--kayffa-ds-space-6) var(--kayffa-ds-space-5); text-align: center; }
.kl-num + .kl-num { border-inline-start: var(--kayffa-ds-rod); }
.kl-num-value { font-size: var(--kayffa-ds-type-h1); line-height: var(--kayffa-ds-leading-h1); font-weight: 900; color: var(--kayffa-ds-primary); font-variant-numeric: tabular-nums; }
.kl-num-label { font-weight: 700; }
.kl-num-note { font-size: var(--kayffa-ds-type-caption); color: var(--kayffa-ds-text-muted); }
.kl-nums-foot { margin-block-start: var(--kayffa-ds-space-4); font-size: var(--kayffa-ds-type-caption); color: var(--kayffa-ds-text-muted); }

/* ── magazines ─────────────────────────────────────────────────────────────────────────────────────────── */
.kl-mags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kayffa-ds-space-7); align-items: start; }
.kl-mag { display: grid; gap: var(--kayffa-ds-space-4); }
.kl-mag-cover {
  position: relative; padding: 1.75rem 1.5rem;
  border: var(--kayffa-ds-rod-width) solid var(--kayffa-ds-ornament); outline: var(--kayffa-ds-rod-width) solid var(--kayffa-ds-ornament); outline-offset: -8px;
  background: linear-gradient(var(--kayffa-ds-glow), var(--kayffa-ds-mashrabiya-panel)); box-shadow: var(--kayffa-ds-depth);
}
.kl-mag-cover img { inline-size: 100%; aspect-ratio: 3 / 4.2; object-fit: cover; border: var(--kayffa-ds-rod); }
.kl-mag-type {
  display: grid; place-items: center; aspect-ratio: 3 / 4.2; border: var(--kayffa-ds-rod); background: var(--kayffa-ds-surface);
  text-align: center; padding: var(--kayffa-ds-space-5);
}
.kl-mag-type strong { display: block; font-family: var(--kl-font-read); font-size: 4rem; line-height: 1.1; color: var(--kayffa-ds-text); }
.kl-mag-type span { color: var(--kayffa-ds-text-muted); font-size: var(--kayffa-ds-type-caption); }
.kl-mag h3 { font-size: var(--kayffa-ds-type-h3); line-height: var(--kayffa-ds-leading-h3); font-weight: 900; }
.kl-mag dl { display: grid; grid-template-columns: auto 1fr; gap: var(--kayffa-ds-space-1) var(--kayffa-ds-space-4); margin: 0; font-size: var(--kayffa-ds-type-body-sm); }
.kl-mag dt { color: var(--kayffa-ds-text-muted); }
.kl-mag dd { margin: 0; font-weight: 700; }
.kl-mag p { font-size: var(--kayffa-ds-type-body-sm); line-height: var(--kayffa-ds-leading-body-sm); }
.kl-credit { font-size: var(--kayffa-ds-type-caption); line-height: var(--kayffa-ds-leading-caption); color: var(--kayffa-ds-text-muted); }

/* ── writers ───────────────────────────────────────────────────────────────────────────────────────────── */
.kl-writers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kayffa-ds-space-5); }
.kl-writer { position: relative; display: grid; gap: var(--kayffa-ds-space-3); padding: var(--kayffa-ds-space-6) var(--kayffa-ds-space-5) var(--kayffa-ds-space-5); border: var(--kayffa-ds-rod); background: var(--kayffa-ds-surface); }
.kl-writer::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 6px; border-block-end: var(--kayffa-ds-rod-double); }
.kl-writer-mono {
  display: inline-grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border: var(--kayffa-ds-rod); outline: var(--kayffa-ds-rod); outline-offset: 3px;
  margin: 4px; font-family: var(--kl-font-read); font-size: 1.75rem; background: var(--kayffa-ds-glow); color: var(--kayffa-ds-on-glow);
}
.kl-writer h3 { font-size: var(--kayffa-ds-type-h4); line-height: var(--kayffa-ds-leading-h3); font-weight: 800; }
.kl-writer-role { font-size: var(--kayffa-ds-type-body-sm); color: var(--kayffa-ds-text-muted); }
.kl-writer-count { display: flex; align-items: baseline; gap: var(--kayffa-ds-space-2); padding-block-start: var(--kayffa-ds-space-3); border-block-start: var(--kayffa-ds-rod-width) solid var(--kayffa-ds-border-subtle); }
.kl-writer-count strong { font-size: var(--kayffa-ds-type-h3); color: var(--kayffa-ds-accent-2); font-variant-numeric: tabular-nums; }

/* ── photographs ───────────────────────────────────────────────────────────────────────────────────────── */
.kl-photos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--kayffa-ds-space-6) var(--kayffa-ds-space-5); }
.kl-photo { grid-column: span 4; display: grid; align-content: start; gap: var(--kayffa-ds-space-3); }
.kl-photo--wide { grid-column: span 6; }
.kl-photo--q { grid-column: span 3; }
.kl-photo-media { position: relative; padding: var(--kayffa-ds-space-3); border: var(--kayffa-ds-rod-width) solid var(--kayffa-ds-ornament); background: var(--kayffa-ds-canvas); }
.kl-photo-media img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--kayffa-ds-rod); outline: var(--kayffa-ds-rod); outline-offset: 3px; }
.kl-photo--tall .kl-photo-media img { aspect-ratio: 5 / 7; }
.kl-photo h3 { font-size: var(--kayffa-ds-type-body); line-height: var(--kayffa-ds-leading-body-sm); font-weight: 800; }
.kl-photo-date { color: var(--kayffa-ds-caption); font-size: var(--kayffa-ds-type-caption); font-weight: 700; }
.kl-photo .kl-credit a { color: inherit; }
.kl-rights-note { margin-block-start: var(--kayffa-ds-space-6); padding: var(--kayffa-ds-space-4) var(--kayffa-ds-space-5); border-inline-start: 4px solid var(--kayffa-ds-accent-2); background: var(--kayffa-ds-surface); font-size: var(--kayffa-ds-type-body-sm); line-height: var(--kayffa-ds-leading-body-sm); }

/* ── search teaser ─────────────────────────────────────────────────────────────────────────────────────── */
.kl-search { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--kayffa-ds-space-7); align-items: center; }
.kl-search-box { display: grid; gap: var(--kayffa-ds-space-3); padding: var(--kayffa-ds-space-5); border: var(--kayffa-ds-rod); background: var(--kayffa-ds-surface); box-shadow: var(--kayffa-ds-depth); }
.kl-search-field { display: flex; align-items: center; min-block-size: 3.25rem; padding-inline: var(--kayffa-ds-space-4); border: var(--kayffa-ds-rod); background: var(--kayffa-ds-canvas); font-family: var(--kl-font-read); font-size: var(--kayffa-ds-type-lead); }
.kl-search-field .kl-caret { inline-size: 2px; block-size: 1.5rem; margin-inline-start: var(--kayffa-ds-space-1); background: var(--kayffa-ds-primary); animation: kl-blink 1s steps(1) infinite; }
@keyframes kl-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kl-search-field .kl-caret { animation: none; } }
.kl-chips { display: flex; flex-wrap: wrap; gap: var(--kayffa-ds-space-2); list-style: none; margin: 0; padding: 0; }
.kl-chips li { padding-inline: var(--kayffa-ds-space-3); border: var(--kayffa-ds-rod-width) solid var(--kayffa-ds-border-subtle); background: var(--kayffa-ds-glow); color: var(--kayffa-ds-on-glow); font-size: var(--kayffa-ds-type-body-sm); }
.kl-chips mark { background: color-mix(in srgb, var(--kayffa-ds-hit-mark) 45%, transparent); color: inherit; }

/* ── notify ────────────────────────────────────────────────────────────────────────────────────────────── */
.kl-notify { padding: var(--kayffa-ds-space-7) var(--kayffa-ds-space-6); border: var(--kayffa-ds-rod); background: var(--kayffa-ds-mashrabiya-panel); box-shadow: var(--kayffa-ds-depth); text-align: center; display: grid; justify-items: center; gap: var(--kayffa-ds-space-4); }
.kl-notify .kl-h2 { max-inline-size: 36rem; }
.kl-notify-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kayffa-ds-space-4); }
.kl-status { min-block-size: 1.5rem; font-size: var(--kayffa-ds-type-caption); color: var(--kayffa-ds-accent-2); font-weight: 700; }

/* ── footer ────────────────────────────────────────────────────────────────────────────────────────────── */
.kl-foot { margin-block-start: var(--kayffa-ds-space-8); padding-block: var(--kayffa-ds-space-7) var(--kayffa-ds-space-6); border-block-start: var(--kayffa-ds-rod-double); background: var(--kayffa-ds-surface-subtle); font-size: var(--kayffa-ds-type-body-sm); line-height: var(--kayffa-ds-leading-body-sm); }
.kl-foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--kayffa-ds-space-7); }
.kl-foot h2 { font-size: var(--kayffa-ds-type-body); font-weight: 800; margin-block-end: var(--kayffa-ds-space-2); }
.kl-foot ul { margin: 0; padding-inline-start: var(--kayffa-ds-space-5); }
.kl-foot li + li { margin-block-start: var(--kayffa-ds-space-1); }
.kl-foot .kl-ltr-block { text-align: end; color: var(--kayffa-ds-text-muted); }
.kl-foot-base { margin-block-start: var(--kayffa-ds-space-6); padding-block-start: var(--kayffa-ds-space-4); border-block-start: var(--kayffa-ds-rod-width) solid var(--kayffa-ds-border-subtle); color: var(--kayffa-ds-text-muted); font-size: var(--kayffa-ds-type-caption); }

/* ── responsive ────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 64rem) {
  .kl-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kl-photo, .kl-photo--wide, .kl-photo--q { grid-column: span 6; }
}
@media (max-width: 48rem) {
  :root { --kayffa-ds-type-display: 2.75rem; --kayffa-ds-type-h1: 2.5rem; --kayffa-ds-type-h2: 1.875rem; --kayffa-ds-ornament-rosette: var(--kayffa-ds-ornament-rosette-mobile); }
  .kl-wrap { padding-inline: var(--kayffa-ds-space-4); }
  .kl-section { padding-block: var(--kayffa-ds-space-7); }
  .kl-nav { display: none; }
  .kl-util-note { display: none; }
  .kl-logo-sub { font-size: var(--kayffa-ds-type-caption); }
  .kl-hero-actions .kl-btn { flex: 1 1 100%; }
  .kl-hero { padding-block: var(--kayffa-ds-space-6) var(--kayffa-ds-space-7); }
  .kl-hero-grid, .kl-search, .kl-foot-grid { grid-template-columns: minmax(0, 1fr); gap: var(--kayffa-ds-space-6); }
  .kl-frame { margin: var(--kayffa-ds-space-5) var(--kayffa-ds-space-3); }
  .kl-doors, .kl-mags, .kl-writers { grid-template-columns: minmax(0, 1fr); }
  .kl-mags { gap: var(--kayffa-ds-space-6); }
  .kl-mag-cover { max-inline-size: 20rem; }
  .kl-nums { grid-template-columns: minmax(0, 1fr); }
  .kl-num + .kl-num { border-inline-start: 0; border-block-start: var(--kayffa-ds-rod); }
  .kl-photo, .kl-photo--wide, .kl-photo--q { grid-column: span 12; }
}