/* Hallmark · genre: editorial · macrostructure: Long Document (index variant) · design-system: design.md · designed-as-app
 * nav: N6 masthead · footer: Ft5 statement · enrichment: none (typeset specimen, typography only)
 * pre-emit critique: P4 H4 E4 S4 R5 V4
 */


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; } }

html[lang="ar"] { --font-display: var(--font-display-ar); --font-body: var(--font-body-ar); }
html[lang="en"] { --font-display: var(--font-display-en); --font-body: var(--font-body-en); }
html[lang="ar"] [data-l="en"], html[lang="en"] [data-l="ar"] { display: none !important; }

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}
html[lang="en"] body { line-height: 1.65; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { width: min(100% - 2 * var(--space-md), var(--maxw)); margin-inline: auto; }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }

.mark { display: inline-block; inline-size: 0.5em; block-size: 0.5em; background: var(--color-accent); border-radius: 2px; transform: rotate(45deg); vertical-align: 0.12em; }

/* ── Masthead ─────────────────────────────── */
.masthead { position: sticky; top: 0; z-index: 30; background: var(--color-header); backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px); border-block-end: var(--rule); }
.masthead .wrap { display: flex; align-items: center; gap: var(--space-lg); min-block-size: 68px; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { block-size: 32px; inline-size: auto; }
.brand .wm-dark { display: none; }
:root[data-theme="dark"] .brand .wm-light { display: none; }
:root[data-theme="dark"] .brand .wm-dark { display: block; }
.brand-en { font-family: var(--font-display-en); font-weight: 700; font-size: 1.55rem; letter-spacing: 0.02em; color: var(--color-ink); display: inline-flex; align-items: flex-end; gap: 0.18em; line-height: 1; white-space: nowrap; }
.brand-en .mark { inline-size: 0.32em; block-size: 0.32em; margin-block-end: 0.12em; }
.links { display: flex; gap: var(--space-md); margin-inline-start: auto; }
.links a { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); white-space: nowrap; padding-block: var(--space-2xs); transition: color var(--dur-short) var(--ease-out); }
.links a:hover { color: var(--color-ink); }
.links a[aria-current="page"] { color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-accent); }
.tools { display: flex; gap: var(--space-2xs); }
.tool { appearance: none; border: var(--rule); background: transparent; color: var(--color-ink); block-size: 38px; min-inline-size: 38px; padding-inline: var(--space-xs); border-radius: var(--radius-pill); font: 600 var(--text-xs)/1 var(--font-body-en); cursor: pointer; display: inline-grid; place-items: center; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.tool:hover { background: var(--color-paper-2); }
.tool:active { transform: translateY(1px); }
.tool svg { inline-size: 17px; block-size: 17px; }
.tool .i-sun { display: none; }
:root[data-theme="dark"] .tool .i-sun { display: block; }
:root[data-theme="dark"] .tool .i-moon { display: none; }
.tool-lang { font-family: var(--font-body-ar); }
html[lang="ar"] .tool-lang { font-family: var(--font-body-en); }
@media (max-width: 760px) { .links { display: none; } .tools { margin-inline-start: auto; } }

/* ── Hero ─────────────────────────────────── */
.hero { padding-block: var(--space-3xl) var(--space-2xl); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-2xl); align-items: center; }
.hero h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-display); line-height: 1.12; letter-spacing: -0.01em; overflow-wrap: anywhere; min-inline-size: 0; }
html[lang="en"] .hero h1 { line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; }
.hero h1 .hl { background: linear-gradient(transparent 68%, color-mix(in oklch, var(--color-accent) 55%, transparent) 68%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
section[id] { scroll-margin-top: 84px; }
.hero .lede { margin-block-start: var(--space-md); max-inline-size: 34em; font-size: var(--text-lg); color: var(--color-ink-2); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-block-start: var(--space-xl); }
.btn { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 0.85rem 1.5rem; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-on-ink); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.btn:hover { opacity: 0.9; }
.btn:active { transform: translateY(1px); }
.btn .mark { inline-size: 0.45em; block-size: 0.45em; }
.textlink { font-weight: 600; font-size: var(--text-sm); white-space: nowrap; border-block-end: 1.5px solid var(--color-accent); padding-block-end: 2px; transition: color var(--dur-short) var(--ease-out); }
.textlink:hover { color: var(--color-accent-text); }

/* typeset specimen — a real essay page, no device chrome */
.specimen { background: var(--color-surface); border: var(--rule); border-radius: var(--radius-card); padding: var(--space-xl) var(--space-lg); box-shadow: 0 30px 60px -40px oklch(25% 0.03 160 / 0.35); }
.specimen .cat { font-size: var(--text-xs); font-weight: 600; color: var(--color-accent-text); }
.specimen h2 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.25; margin-block: var(--space-2xs) var(--space-sm); font-weight: 700; }
.specimen .by { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); padding-block-end: var(--space-md); border-block-end: var(--rule); }
.specimen .av { inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--color-paper-2); display: grid; place-items: center; }
.specimen .av .mark { inline-size: 9px; block-size: 9px; }
.specimen p { margin-block-start: var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.9; }
.specimen blockquote { margin-block-start: var(--space-md); padding-inline-start: var(--space-sm); border-inline-start: 3px solid var(--color-accent); font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink); }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-2xl) var(--space-xl); } }

/* ── Index (what's inside) ────────────────── */
.section { padding-block: var(--space-2xl); }
.section-head { max-inline-size: 40em; margin-block-end: var(--space-xl); }
.section-head h2 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; }
html[lang="en"] .section-head h2 { font-weight: 600; letter-spacing: -0.015em; }
.section-head p { margin-block-start: var(--space-xs); color: var(--color-ink-2); }
.index { list-style: none; border-block-start: 1.5px solid var(--color-ink); }
.index li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: var(--space-lg); padding-block: var(--space-md); border-block-end: var(--rule); align-items: baseline; }
.index h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.3; display: flex; align-items: center; gap: var(--space-xs); }
.index h3 .mark { inline-size: 0.32em; block-size: 0.32em; }
.index p { color: var(--color-ink-2); }
@media (max-width: 680px) { .index li { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); } }

/* ── Two audiences ────────────────────────── */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
.panel { border-radius: var(--radius-card); padding: var(--space-xl) var(--space-lg); background: var(--color-paper-2); }
.panel.inverse { background: var(--color-ink); color: var(--color-on-ink); }
.panel.inverse p { color: color-mix(in oklch, var(--color-on-ink) 76%, transparent); }
.panel h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; margin-block-end: var(--space-sm); }
.panel p { color: var(--color-ink-2); }
.panel ul { list-style: none; margin-block-start: var(--space-md); display: grid; gap: var(--space-2xs); }
.panel li { display: flex; gap: var(--space-xs); align-items: baseline; font-size: var(--text-sm); }
.panel li .mark { inline-size: 0.42em; block-size: 0.42em; flex-shrink: 0; }
@media (max-width: 760px) { .duo { grid-template-columns: minmax(0, 1fr); } }

/* ── Letter (contact) ─────────────────────── */
.letter { border-block: 1.5px solid var(--color-ink); padding-block: var(--space-2xl); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); align-items: end; }
.letter h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1.2; }
.letter p { margin-block-start: var(--space-xs); color: var(--color-ink-2); max-inline-size: 32em; }
.letter .mail { font-family: var(--font-body-en); font-size: var(--text-lg); font-weight: 600; direction: ltr; border-block-end: 2px solid var(--color-accent); padding-block-end: 4px; overflow-wrap: anywhere; transition: color var(--dur-short) var(--ease-out); }
.letter .mail:hover { color: var(--color-accent-text); }
@media (max-width: 760px) { .letter { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ── Footer (statement) ───────────────────── */
.site-footer { margin-block-start: var(--space-2xl); padding-block: var(--space-2xl) var(--space-xl); background: var(--color-paper-2); border-block-start: var(--rule); }
.site-footer .statement { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.2; font-weight: 700; max-inline-size: 18em; overflow-wrap: anywhere; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); margin-block-start: var(--space-xl); padding-block-start: var(--space-lg); border-block-start: var(--rule); }
.legal { font-family: var(--font-body-en); font-size: var(--text-xs); line-height: 1.8; color: var(--color-muted); direction: ltr; text-align: start; }
html[lang="ar"] .legal { text-align: right; }
.legal strong { color: var(--color-ink); font-weight: 600; }
.foot-col h4 { font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); margin-block-end: var(--space-xs); }
.foot-col a { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); padding-block: 0.3rem; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.foot-col a:hover { color: var(--color-ink); }
.copy { margin-block-start: var(--space-xl); font-family: var(--font-body-en); font-size: var(--text-xs); color: var(--color-muted); direction: ltr; text-align: center; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot-grid .legal { grid-column: 1 / -1; } }

/* ── Legal / content documents ───────────── */
.doc { padding-block: var(--space-2xl) var(--space-xl); }
.doc-head { max-inline-size: 42rem; padding-block-end: var(--space-lg); border-block-end: 1.5px solid var(--color-ink); margin-block-end: var(--space-xl); }
.doc-head h1 { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
html[lang="en"] .doc-head h1 { font-weight: 600; letter-spacing: -0.02em; }
.doc-head .meta { margin-block-start: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.prose { max-inline-size: 42rem; }
.prose h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; margin-block: var(--space-xl) var(--space-xs); line-height: 1.3; }
.prose p, .prose li { color: var(--color-ink-2); margin-block-end: var(--space-xs); }
.prose ul { padding-inline-start: var(--space-md); }
.prose li::marker { color: var(--color-accent-text); }
.prose strong { color: var(--color-ink); font-weight: 600; }
.prose a { color: var(--color-accent-text); font-weight: 600; border-block-end: 1px solid currentColor; }
.prose .callout { margin-block: var(--space-lg); padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); border-inline-start: 3px solid var(--color-accent); }