/* ==========================================================================
   08 MARBLE · design system
   Voice: high-fashion museum catalogue, cold luxury. Gallery pacing, plates
   with captions beneath (never over), one deep teal, everything else stone.

   Tokens
   - Color: cool silver paper, graphite ink, chrome gradients for "stone";
     one accent (teal #0f4c4a, lifted to #74b8b0 on graphite for AA).
   - Type: Bodoni Moda (display, tracked caps for labels at >=13px),
     Manrope (text + UI), Amiri (Arabic, lh >= 2.1).
     Scale: xs .75 / sm .875 / base 1.0625 / md 1.25 / lg..hero fluid clamp().
   - Rhythm: body 17px on a 28px line (--lh: 1.75rem); vertical space is
     multiples of --lh. Section pacing --sec is deliberately vast.
   - Grid: 12 columns inside 90rem, fluid gutter; collapses to 1 col < 56rem.
   - Radius: 0 everywhere. Plinths, plates and buttons are cut square.
   - Motion: opacity/transform reveals only, killed by reduced-motion.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --paper: #eceef0;
  --paper-2: #e3e6e9;
  --plinth: #f6f7f8;
  --ink: #121416;
  --ink-2: #3a4044;
  --muted: #586065;
  --rule: #c4c9cd;
  --rule-strong: #9aa1a7;
  --accent: #0f4c4a;
  --on-accent: #f2f5f5;
  --chrome: linear-gradient(118deg, #cdd2d6 0%, #f5f6f7 21%, #bcc2c7 40%, #eceef0 57%, #a9b0b6 77%, #e1e4e7 100%);
  --vein-blend: multiply;
  --vein-opacity: .6;
  --mono-plate: grayscale(1) contrast(1.06) brightness(1.03);

  --f-display: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --f-text: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-ar: Amiri, "Geeza Pro", "Noto Naskh Arabic", serif;

  --s-xs: .75rem;
  --s-sm: .875rem;
  --s-base: 1.0625rem;
  --s-md: 1.25rem;
  --s-lg: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem);
  --s-xl: clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem);
  --s-2xl: clamp(2.75rem, 1.2rem + 6vw, 7rem);
  --s-hero: clamp(3.5rem, .6rem + 11.5vw, 12rem);

  --lh: 1.75rem;
  --gut: clamp(1rem, 4.5vw, 5rem);
  --gap: clamp(1rem, 2vw, 2rem);
  --sec: clamp(6rem, 3rem + 10vw, 14rem);
  --measure: 66ch;
  --radius: 0;
  --ease: cubic-bezier(.2, .7, .1, 1);

  color-scheme: light;
}

/* Graphite: shared by system preference and explicit toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #151719; --paper-2: #1b1e20; --plinth: #1f2225;
    --ink: #e8eaec; --ink-2: #c3c8cc; --muted: #969da2;
    --rule: #30353a; --rule-strong: #4f565c;
    --accent: #74b8b0; --on-accent: #0c1514;
    --chrome: linear-gradient(118deg, #1c1f22 0%, #33383c 22%, #191c1e 41%, #2b2f33 58%, #141618 77%, #272b2e 100%);
    --vein-blend: screen; --vein-opacity: .5;
    --mono-plate: grayscale(1) contrast(1.04) brightness(.9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #151719; --paper-2: #1b1e20; --plinth: #1f2225;
  --ink: #e8eaec; --ink-2: #c3c8cc; --muted: #969da2;
  --rule: #30353a; --rule-strong: #4f565c;
  --accent: #74b8b0; --on-accent: #0c1514;
  --chrome: linear-gradient(118deg, #1c1f22 0%, #33383c 22%, #191c1e 41%, #2b2f33 58%, #141618 77%, #272b2e 100%);
  --vein-blend: screen; --vein-opacity: .5;
  --mono-plate: grayscale(1) contrast(1.04) brightness(.9);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  hanging-punctuation: first allow-end last;
  scroll-padding-top: 2rem;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--s-base)/var(--lh) var(--f-text);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--accent); }
p, li, dd, figcaption { text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 400; text-wrap: balance; font-optical-sizing: auto; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: absolute; inset-inline-start: 1rem; inset-block-start: -10rem; z-index: 50;
  background: var(--ink); color: var(--paper); padding: .75rem 1.25rem; text-decoration: none;
}
.skip:focus { inset-block-start: 1rem; }

.wrap { max-width: 90rem; margin-inline: auto; padding-inline: var(--gut); }
.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.g > * { grid-column: 1 / -1; min-width: 0; }

/* Label: the only "small caps" voice. Tracked Bodoni, never below 12px */
.label {
  font: 500 var(--s-xs)/1.4 var(--f-text);
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.caps { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .18em; font-weight: 500; }
.ar { font-family: var(--f-ar); line-height: 2.15; font-feature-settings: normal; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 3.25rem; padding: .5rem 1.6rem;
  font: 600 var(--s-sm)/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--ink); border-radius: var(--radius);
  color: var(--ink); background: transparent; cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--solid:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.more {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem;
  font: 600 var(--s-sm)/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--accent);
}
.more::after { content: "\2192"; font-family: var(--f-text); transition: transform .4s var(--ease); }
.more:hover::after { transform: translateX(.3rem); }

/* ---------- Masthead ---------- */
.mast { border-block-end: 1px solid var(--rule); }
.mast .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; min-height: 5rem; padding-block: .75rem; }
.wordmark {
  display: inline-flex; align-items: center; gap: .9rem; min-height: 2.75rem;
  text-decoration: none; font: 500 .9375rem/1 var(--f-display); letter-spacing: .32em; text-transform: uppercase;
}
.wordmark img { width: 2rem; height: 2rem; filter: grayscale(1) contrast(1.1); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 clamp(.75rem, 2vw, 2.25rem); margin: 0; padding: 0; list-style: none; }
.nav a, .nav button {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font: 500 var(--s-xs)/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer;
}
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
.nav a:hover, .nav button:hover { color: var(--accent); }
.theme-btn .t-dark { display: none; }
:root[data-theme="dark"] .theme-btn .t-dark { display: inline; }
:root[data-theme="dark"] .theme-btn .t-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .t-dark { display: inline; }
  :root:not([data-theme="light"]) .theme-btn .t-light { display: none; }
}

/* Quick exit: fixed, small, always reachable */
.qx {
  position: fixed; inset-block-end: 1rem; inset-inline-end: 1rem; z-index: 40;
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem;
  font: 600 var(--s-xs)/1 var(--f-text); letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); background: var(--plinth); border: 1px solid var(--rule-strong);
}
.qx:hover { background: var(--ink); color: var(--paper); }

/* ---------- Marble: chrome gradient + procedural veining (feTurbulence) ---------- */
.marble { position: relative; background: var(--chrome); overflow: hidden; isolation: isolate; }
.marble::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  mix-blend-mode: var(--vein-blend); opacity: var(--vein-opacity);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='1400'%3E%3Cfilter id='v' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .0011' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .32 0 0 0 0 .34 1.4 0 0 0 -.2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 0 0 0 .6 0 0 0 0 0 0 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E") center / cover no-repeat;
  transform: rotate(-12deg) scale(1.5);
}

/* ---------- Hero ---------- */
.hero { min-height: min(calc(100dvh - 5rem), 60rem); display: grid; align-items: stretch; }
.hero .g { align-items: end; padding-block: clamp(2.5rem, 6vh, 5rem); row-gap: 2rem; }
.hero__slab { grid-column: 1 / -1; grid-row: 1; height: clamp(8rem, 24vh, 22rem); }
.hero__text { grid-row: 2; }
.hero h1 {
  font-size: var(--s-hero); line-height: .9; letter-spacing: -.025em; font-weight: 400;
  margin-inline-start: -.05em;
}
.hero h1 em { font-style: italic; }
.hero__sub { margin-block-start: calc(var(--lh) * 1.25); max-width: 30ch; font-size: var(--s-md); line-height: 1.6; color: var(--ink-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-block-start: calc(var(--lh) * 1.5); }

@media (min-width: 56rem) {
  .hero .g { align-items: stretch; }
  .hero__slab { grid-column: 9 / -1; grid-row: 1; height: auto; min-height: 100%; }
  .hero__text { grid-column: 1 / 11; grid-row: 1; align-self: end; position: relative; z-index: 1; padding-block-start: 12vh; }
}

/* ---------- Sections ---------- */
.sec { padding-block: var(--sec); }
.sec--tight { padding-block-start: 0; }
.sec-title { font-size: var(--s-xl); line-height: 1.02; letter-spacing: -.015em; }
.rule { border: 0; border-block-start: 1px solid var(--rule); margin: 0; }

/* ---------- Plates (video facades) ---------- */
.plate { margin: 0; }
.frame { position: relative; aspect-ratio: 16 / 9; background: var(--paper-2); overflow: hidden; }
.frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt { position: absolute; inset: 0; display: block; color: var(--ink); }
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
/* Gallery print: plates rest in monochrome, colour returns on intent */
.yt::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-backdrop-filter: var(--mono-plate); backdrop-filter: var(--mono-plate);
  transition: opacity .9s var(--ease);
}
.yt:hover::before, .yt:focus-visible::before { opacity: 0; }
.yt:hover img { transform: scale(1.015); }
.yt:focus-visible { outline-offset: -4px; outline-color: var(--paper); }
.play {
  position: absolute; z-index: 2; inset-inline-start: 0; inset-block-end: 0;
  display: grid; place-items: center; width: clamp(3rem, 5vw, 4.5rem); aspect-ratio: 1;
  background: var(--plinth); color: var(--ink); transition: background-color .3s, color .3s;
}
.play svg { width: 32%; height: auto; margin-inline-start: 8%; }
.yt:hover .play { background: var(--accent); color: var(--on-accent); }

.cap { margin-block-start: 1.25rem; display: grid; gap: .35rem; }
.cap__series { font: 500 var(--s-xs)/1.4 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.cap__title { font: 400 var(--s-md)/1.3 var(--f-display); text-wrap: balance; }
.cap__title a { text-decoration: none; }
.cap__title a:hover { text-decoration: underline; }
.cap__meta { font-size: var(--s-sm); color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }

/* Featured plate: full-bleed, caption set as a two-column museum label */
.feature .frame { width: 100%; }
.feature__cap { padding-block-start: 2rem; row-gap: 1.25rem; }
.feature__cap h2 { font-size: var(--s-xl); line-height: 1.02; letter-spacing: -.015em; }
.feature__cap p { color: var(--ink-2); max-width: 52ch; }
@media (min-width: 56rem) {
  .feature__cap .lhs { grid-column: 1 / 8; }
  .feature__cap .rhs { grid-column: 9 / -1; padding-block-start: .5rem; display: grid; gap: 1.25rem; align-content: start; }
}

/* ---------- Pillars: a staircase of rows, not cards ---------- */
.mission { font: 400 var(--s-lg)/1.35 var(--f-display); max-width: 30ch; text-wrap: balance; }
.pillars { list-style: none; margin: calc(var(--lh) * 3) 0 0; padding: 0; border-block-start: 1px solid var(--rule); }
.pillar { padding-block: calc(var(--lh) * 1.25); border-block-end: 1px solid var(--rule); row-gap: .75rem; align-items: baseline; }
.pillar h3 { font-size: var(--s-lg); line-height: 1.15; }
.pillar p { color: var(--ink-2); max-width: 46ch; }
@media (min-width: 56rem) {
  .pillar h3 { grid-column: var(--at, 1) / span 5; }
  .pillar p { grid-column: 8 / -1; }
  .pillar:nth-child(2) { --at: 2; }
  .pillar:nth-child(3) { --at: 3; }
  .mission { grid-column: 1 / 10; }
}

/* ---------- Gallery wall: salon hang of plates ---------- */
.wall { row-gap: clamp(3rem, 6vw, 6rem); margin-block-start: calc(var(--lh) * 3); }
.wall-head { row-gap: 1.25rem; align-items: end; }
.series { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.series a { display: inline-flex; min-height: 2.75rem; align-items: center; font-size: var(--s-sm); color: var(--ink-2); text-decoration-color: var(--rule-strong); }
@media (min-width: 56rem) {
  .wall-head h2 { grid-column: 1 / 7; }
  .wall-head .series { grid-column: 7 / -1; justify-content: flex-end; }
  .w1 { grid-column: 1 / 8; }
  .w2 { grid-column: 9 / -1; align-self: end; }
  .w3 { grid-column: 2 / 6; }
  .w4 { grid-column: 7 / -1; margin-block-start: 6rem; }
  .w5 { grid-column: 1 / 5; }
  .w6 { grid-column: 6 / 9; margin-block-start: 5rem; }
  .w7 { grid-column: 10 / -1; margin-block-start: 2rem; }
}
@media (min-width: 36rem) and (max-width: 55.99rem) {
  .wall { grid-template-columns: 1fr 1fr; }
  .wall > * { grid-column: auto; }
  .wall > .w1 { grid-column: 1 / -1; }
}

/* ---------- Inverted band (stories) ---------- */
.band {
  --paper: #1a1d1f; --paper-2: #23272a; --plinth: #2a2e31; --ink: #eceef0; --ink-2: #c6cbcf; --muted: #9aa1a6;
  --rule: #353a3e; --rule-strong: #565d62; --accent: #74b8b0; --on-accent: #0c1514;
  --mono-plate: grayscale(1) contrast(1.04) brightness(.9);
  background: var(--paper); color: var(--ink); color-scheme: dark;
}
:root[data-theme="dark"] .band { --paper: #0e1011; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .band { --paper: #0e1011; } }
.stories { row-gap: calc(var(--lh) * 2); }
.stories blockquote { margin: 0; font: italic 400 var(--s-xl)/1.08 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.stories blockquote footer { margin-block-start: 1.5rem; font: 500 var(--s-xs)/1.4 var(--f-text); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.index { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--rule); }
.index li { border-block-end: 1px solid var(--rule); }
.index a { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: baseline; padding-block: 1.1rem; text-decoration: none; }
.index a:hover .t { color: var(--accent); }
.index .t { font: 400 var(--s-md)/1.35 var(--f-display); text-wrap: balance; }
.index .v { font-size: var(--s-sm); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 56rem) {
  .stories .s-quote { grid-column: 1 / 7; }
  .stories .s-quote { grid-row: 1 / span 2; }
  .stories .s-plate { grid-column: 8 / -1; grid-row: 1; }
  .stories .s-index { grid-column: 8 / -1; grid-row: 2; }
}

/* ---------- Inscription (Arabic hero moment) ---------- */
.inscription { text-align: center; padding-block: clamp(4rem, 9vw, 9rem); }
.inscription.marble::after { opacity: calc(var(--vein-opacity) * .55); }
.inscription .ar { font-size: clamp(1.75rem, 1rem + 3vw, 3.4rem); line-height: 2.1; max-width: 22em; margin-inline: auto; }
.inscription .tr { margin: calc(var(--lh) * 1.5) auto 0; max-width: 44ch; padding-inline: 1rem; font: italic 400 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.6 var(--f-display); color: var(--ink-2); }
.inscription .ref { margin-block-start: 1.5rem; }

/* Ledger: source entries */
.ledger { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--ink); }
.ledger > li { display: grid; grid-template-columns: 1fr; gap: .35rem 2rem; padding-block: 1.4rem; border-block-end: 1px solid var(--rule); }
.ledger .type { font: 500 var(--s-xs)/1.6 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.ledger .ref { font: 400 var(--s-md)/1.35 var(--f-display); }
.ledger .note { color: var(--ink-2); font-size: var(--s-sm); line-height: 1.6; max-width: 60ch; }
.ledger .acts { display: flex; flex-wrap: wrap; gap: 0 1.5rem; align-items: center; }
.ledger .acts a, .ledger .acts button {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 var(--s-xs)/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.ledger .acts a:hover, .ledger .acts button:hover { color: var(--accent); }
@media (min-width: 56rem) {
  .ledger > li { grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 1.3fr) 15rem; align-items: baseline; }
  .ledger .acts { justify-content: flex-end; }
}
.teaser-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; margin-block-start: 2rem; }

/* ---------- Support / forms ---------- */
.support { row-gap: 3rem; }
.support h2 { font-size: var(--s-2xl); line-height: .95; letter-spacing: -.02em; }
.support .lede { margin-block-start: calc(var(--lh) * 1.25); color: var(--ink-2); max-width: 44ch; }
@media (min-width: 56rem) {
  .support .lhs { grid-column: 1 / 7; }
  .support .rhs { grid-column: 8 / -1; align-self: end; }
}
.plinth { background: var(--plinth); padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--rule); }
.field { display: grid; gap: .5rem; }
.field label { font: 600 var(--s-xs)/1.4 var(--f-text); letter-spacing: .18em; text-transform: uppercase; }
.field .help { font-size: var(--s-sm); color: var(--muted); line-height: 1.5; }
.field .err { font-size: var(--s-sm); color: #9b2c2c; line-height: 1.5; }
:root[data-theme="dark"] .field .err { color: #f0a3a3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field .err { color: #f0a3a3; } }
input[type="email"], input[type="text"], input[type="url"], input[type="search"], textarea {
  width: 100%; min-height: 3.25rem; padding: .75rem 0; font: 400 var(--s-base)/1.5 var(--f-text); color: var(--ink);
  background: transparent; border: 0; border-block-end: 1px solid var(--rule-strong); border-radius: var(--radius);
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, textarea:focus { outline: none; border-block-end-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-block-end-color: #9b2c2c; }
.form-row { display: grid; gap: 2rem; }
.status { min-height: var(--lh); font-size: var(--s-sm); color: var(--accent); }
.support-links { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-block-start: 2rem; }

/* ---------- Footer ---------- */
.foot { border-block-start: 1px solid var(--rule); padding-block: calc(var(--lh) * 3) calc(var(--lh) * 4); }
.foot .g { row-gap: 2rem; align-items: start; }
.foot .wordmark { font-size: 1.125rem; }
.foot .note { font-size: var(--s-sm); color: var(--muted); max-width: 38ch; }
.foot nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.foot nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--s-sm); text-decoration: none; color: var(--ink-2); }
.foot nav a:hover { color: var(--accent); }
.foot small { font-size: var(--s-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 56rem) {
  .foot .f1 { grid-column: 1 / 6; }
  .foot .f2 { grid-column: 7 / 9; }
  .foot .f3 { grid-column: 9 / 11; }
  .foot .f4 { grid-column: 11 / -1; justify-self: end; }
}

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.a-head { padding-block: clamp(4rem, 9vw, 9rem) clamp(3rem, 6vw, 5rem); row-gap: 2rem; }
.a-head h1 { font-size: var(--s-2xl); line-height: .98; letter-spacing: -.02em; }
.a-head .dek { font: italic 400 var(--s-lg)/1.35 var(--f-display); color: var(--ink-2); max-width: 36ch; }
.byline { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0; padding: 1rem 0 0; border-block-start: 1px solid var(--rule); }
.byline div { display: grid; gap: .2rem; }
.byline dt { font: 500 var(--s-xs)/1.4 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.byline dd { margin: 0; font-size: var(--s-sm); font-weight: 600; }
@media (min-width: 56rem) {
  .a-head h1 { grid-column: 1 / 11; }
  .a-head .dek { grid-column: 1 / 8; }
  .a-head .byline { grid-column: 1 / 8; }
}
.a-video .cap { grid-template-columns: 1fr; }
@media (min-width: 56rem) {
  .a-video .cap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .a-video .cap > :first-child { grid-column: 1 / 4; }
  .a-video .cap > :last-child { grid-column: 4 / 11; }
}

/* Reading layout: TOC | text column | margin notes */
.read { padding-block: clamp(3rem, 7vw, 7rem) var(--sec); row-gap: 3rem; }
.toc { font-size: var(--s-sm); }
.toc ol { list-style: none; margin: 1rem 0 0; padding: 0; border-inline-start: 1px solid var(--rule); counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: flex; gap: .75rem; min-height: 2.75rem; align-items: center; padding-inline-start: 1rem; margin-inline-start: -1px;
  text-decoration: none; color: var(--muted); border-inline-start: 1px solid transparent; line-height: 1.35;
  transition: color .3s, border-color .3s;
}
.toc a::before { content: counter(toc, upper-roman); font-family: var(--f-display); min-width: 2.2em; }
.toc a:hover, .toc a[aria-current="true"] { color: var(--ink); border-inline-start-color: var(--accent); }
.body { max-width: var(--measure); }
@media (min-width: 64rem) {
  .toc { grid-column: 1 / 3; }
  .toc > div { position: sticky; top: 2rem; }
  .body { grid-column: 4 / 10; }
}
@media (min-width: 56rem) and (max-width: 63.99rem) { .body, .toc { grid-column: 2 / 12; } }

.abstract { padding: 2rem 0; border-block: 1px solid var(--ink); margin-block-end: calc(var(--lh) * 2); }
.body .abstract h2 { font: 500 var(--s-xs)/1.4 var(--f-text); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 1rem; color: var(--muted); }
.body .abstract p { font: 400 var(--s-md)/1.6 var(--f-display); }

.body .sec-a > p { margin-block-end: 1.9rem; font-size: 1.125rem; line-height: 1.9rem; color: var(--ink); }
.body h2 { font-size: var(--s-lg); line-height: 1.15; margin-block: calc(var(--lh) * 3) var(--lh); scroll-margin-top: 2rem; }
.body h2 .n { display: block; font-size: var(--s-sm); letter-spacing: .2em; color: var(--accent); margin-block-end: .75rem; font-weight: 500; }
.body .first::first-letter {
  float: inline-start; font: 400 5.2rem/.78 var(--f-display); margin: .35rem .7rem 0 -.05em; color: var(--accent);
}

/* Sidenotes: margin notes on wide screens, endnotes always below */
.fn-ref { font: 600 .7em/0 var(--f-text); vertical-align: super; margin-inline-start: .1em; }
.fn-ref a { text-decoration: none; color: var(--accent); padding: 0 .1em; }
.sn { display: none; }
@media (min-width: 64rem) {
  .sec-a { position: relative; }
  .sn {
    display: block; float: inline-end; clear: inline-end; width: min(16rem, 22vw);
    margin-inline-end: calc(-1 * min(16rem, 22vw) - var(--gap) * 2); margin-block: .3rem 1rem;
    font-size: var(--s-xs); line-height: 1.55; color: var(--muted); letter-spacing: .01em;
  }
  .sn b { color: var(--accent); font-weight: 600; margin-inline-end: .35rem; }
}

/* Quran verse: Arabic as the object, translation as its label */
.verse.marble::after { opacity: calc(var(--vein-opacity) * .5); }
.verse { margin: calc(var(--lh) * 2.5) 0; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem); }
.verse .ar { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 2.2; text-align: center; color: var(--ink); }
.verse .en { margin-block-start: 1.75rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--rule-strong); font: italic 400 var(--s-md)/1.6 var(--f-display); color: var(--ink-2); text-align: center; max-width: 46ch; margin-inline: auto; }
.verse .src { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; margin-block-start: 1.25rem; }
.verse .src a, .hadith .src a { display: inline-flex; min-height: 2.75rem; align-items: center; font: 600 var(--s-xs)/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.verse .src a:hover, .hadith .src a:hover { text-decoration: underline; }
.verse .src span { display: inline-flex; align-items: center; font-size: var(--s-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.hadith { margin: calc(var(--lh) * 2) 0; padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--accent); }
.hadith dl { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0 0 1rem; }
.hadith dl div { display: grid; }
.hadith dt { font: 500 var(--s-xs)/1.4 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.hadith dd { margin: 0; font: 400 var(--s-base)/1.5 var(--f-display); }
.hadith p { color: var(--ink-2); }

.pull { margin: calc(var(--lh) * 2.5) 0; padding: 0; }
.pull p { font: italic 400 var(--s-xl)/1.1 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
@media (min-width: 64rem) { .pull { margin-inline-start: -8%; } }

.endmatter { margin-block-start: calc(var(--lh) * 4); display: grid; gap: calc(var(--lh) * 3); }
.endmatter h2 { margin: 0 0 1.25rem; font-size: var(--s-lg); }
.notes { margin: 0; padding-inline-start: 1.5rem; font-size: var(--s-sm); line-height: 1.65; color: var(--ink-2); }
.notes li { padding-inline-start: .4rem; margin-block-end: .6rem; scroll-margin-top: 2rem; }
.notes li::marker { color: var(--accent); font-weight: 600; }
.notes li:target { background: var(--paper-2); }
.back { text-decoration: none; color: var(--accent); margin-inline-start: .35rem; padding: .2rem .35rem; }
.biblio { list-style: none; margin: 0; padding: 0; }
.biblio li { padding-block: .9rem; border-block-end: 1px solid var(--rule); font-size: var(--s-sm); line-height: 1.6; padding-inline-start: 2rem; text-indent: -2rem; }
.biblio li:first-child { border-block-start: 1px solid var(--rule); }
.biblio cite { font-style: italic; font-family: var(--f-display); font-size: 1.06em; }

.cite-box { padding: clamp(1.5rem, 4vw, 2.5rem); }
.cite-box pre {
  margin: 0 0 1.25rem; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 400 var(--s-sm)/1.65 var(--f-text); color: var(--ink);
}
.share { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.share .label { margin-inline-end: 1rem; }
.share a, .share button {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--rule-strong); background: none; color: var(--ink);
  font: 600 var(--s-xs)/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.share a:hover, .share button:hover { border-color: var(--accent); color: var(--accent); }

.related { row-gap: 3rem; }
@media (min-width: 56rem) {
  .related .r-h { grid-column: 1 / 5; }
  .related .r1 { grid-column: 5 / 9; }
  .related .r2 { grid-column: 9 / -1; margin-block-start: 5rem; }
}
.pager { display: grid; grid-template-columns: 1fr; border-block: 1px solid var(--rule); }
.pager a { display: grid; gap: .5rem; padding: 2rem 0; text-decoration: none; }
.pager a + a { border-block-start: 1px solid var(--rule); }
.pager .t { font: 400 var(--s-md)/1.3 var(--f-display); text-wrap: balance; }
.pager a:hover .t { color: var(--accent); }
@media (min-width: 56rem) {
  .pager { grid-template-columns: 1fr 1fr; }
  .pager a + a { border-block-start: 0; border-inline-start: 1px solid var(--rule); padding-inline-start: var(--gap); text-align: end; }
}

/* ==========================================================================
   SOURCES
   ========================================================================== */
.s-head { padding-block: clamp(4rem, 9vw, 9rem) clamp(2rem, 4vw, 4rem); row-gap: 2rem; align-items: end; }
.s-head h1 { font-size: var(--s-2xl); line-height: .95; letter-spacing: -.02em; }
.s-head p { color: var(--ink-2); max-width: 48ch; }
@media (min-width: 56rem) {
  .s-head h1 { grid-column: 1 / 8; }
  .s-head p { grid-column: 8 / -1; }
}
.tools { display: grid; gap: 1.5rem; padding-block: 2rem; align-items: end; }
.tools[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; border: 0; }
.chips legend { padding: 0; margin-block-end: .75rem; }
.chip {
  min-height: 2.75rem; padding: 0 1.1rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: none; color: var(--ink-2); cursor: pointer;
  font: 600 var(--s-xs)/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase;
}
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip:hover { border-color: var(--accent); }
@media (min-width: 56rem) { .tools { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); } .chips { justify-content: flex-end; } }
.count { font-size: var(--s-sm); color: var(--muted); margin-block-end: 1rem; font-variant-numeric: tabular-nums; }
.empty { padding: 4rem 0; text-align: center; border-block-end: 1px solid var(--rule); }
.empty p:first-child { font: italic 400 var(--s-lg)/1.3 var(--f-display); margin-block-end: .5rem; }
.empty p { color: var(--muted); }
.nb { white-space: nowrap; }
.ledger > li[hidden], .empty[hidden] { display: none; }
.ledger .ar-inline { display: block; margin-block-start: .75rem; font-family: var(--f-ar); font-size: 1.35rem; line-height: 2.1; color: var(--ink); }

.submit { row-gap: 2rem; }
.submit h2 { font-size: var(--s-xl); line-height: 1; }
@media (min-width: 56rem) {
  .submit .lhs { grid-column: 1 / 5; }
  .submit .rhs { grid-column: 6 / -1; }
  .submit .form-row { grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
  .submit .full { grid-column: 1 / -1; }
}

/* ---------- Reveal motion: hierarchy only ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(1.25rem); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Print: a clean paper offprint ---------- */
@media print {
  @page { margin: 2cm 2.2cm; }
  :root { --paper: #fff; --ink: #000; --ink-2: #222; --muted: #444; --rule: #bbb; --accent: #000; }
  body { font: 10.5pt/1.55 var(--f-display); background: #fff; color: #000; }
  .mast, .qx, .skip, .toc, .share, .related, .pager, .foot, .sn, .play, .copy, .theme-btn, .support, .tools { display: none !important; }
  .g { display: block; }
  .a-head { padding: 0 0 1cm; }
  .a-head h1 { font-size: 26pt; }
  .frame { aspect-ratio: auto; background: none; }
  .yt { position: static; }
  .yt img, .yt::before { display: none; }
  .a-video .cap::after { content: "Video: https://www.youtube.com/watch?v=CG5uS4SI634&t=374"; font-size: 9pt; }
  .body { max-width: none; }
  .body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; word-break: break-all; }
  .verse, .hadith, .pull, blockquote, .cite-box { break-inside: avoid; }
  .marble { background: none; border: 1px solid #999; }
  .marble::after { display: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
}