/* THE ARCHIVE: design system
Voice: a rare-books reading room. Bone paper, cloth-bound forest green, one amber accent used like gilt.
Type: Playfair Display (display, 400 to 600, italic only for single words), Work Sans (text + catalogue labels),
Scheherazade New (Arabic, 1.45x the Latin size, line-height 2.1).
Scale: fluid clamp() steps xs .75 / sm .875 / base 1.0625 / md 1.25 / lg 2 / xl 3.25 / 2xl 4.75 / hero 10.5 rem.
Rhythm: body 1.0625rem x 1.65 = 28px line; every space token is a multiple of .5rem (14px half-lines rounded).
Grid: one centered 82rem frame, 12 columns, fluid gutter; reading measure 66ch; article = contents | text | margin notes.
Radius: one system, 2px (paper corners). The only circle is the punched hole of a catalogue card.
Colour: ink green on bone (light, default) and bone on green-black (dark). Accent = amber; never two accents. */

/* Metric-close fallbacks so the swap to webfonts does not shift layout */
@font-face { font-family: "Playfair Fallback"; src: local("Georgia"); size-adjust: 106%; ascent-override: 102%; descent-override: 24% }
@font-face { font-family: "Work Sans Fallback"; src: local("Arial"); size-adjust: 108%; ascent-override: 86%; descent-override: 23% }

/* ---------- Tokens ---------- */
:root {
--serif: "Playfair Display", "Playfair Fallback", Georgia, "Times New Roman", serif;
--sans: "Work Sans", "Work Sans Fallback", "Helvetica Neue", Arial, sans-serif;
--arabic: "Scheherazade New", "Noto Naskh Arabic", "Geeza Pro", serif;

--t-xs: .75rem;
--t-sm: .875rem;
--t-base: clamp(1rem, .97rem + .15vw, 1.0625rem);
--t-md: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
--t-lg: clamp(1.5rem, 1.25rem + 1vw, 2rem);
--t-xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
--t-2xl: clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem);
--t-hero: clamp(3.5rem, .6rem + 11.5vw, 10.5rem);
--t-ar: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);

--sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4.5rem;
--sp-section: clamp(4.5rem, 2.5rem + 7vw, 9rem);
--gutter: clamp(1rem, 4vw, 3rem);
--frame: 82rem;
--measure: 66ch;
--r: 2px;
--ease: cubic-bezier(.2, .7, .2, 1);

/* light (default): bone + ink green + amber */
--bg: #f2ecdf;
--paper: #f8f4ea;
--panel: #e9e1cf;
--ink: #14281f;
--ink-2: #4a5d52;
--rule: rgba(20, 40, 31, .16);
--rule-strong: rgba(20, 40, 31, .42);
--accent: #8a4f0e;
--accent-fill: #d29a3f;
--on-accent: #14281f;
--cloth: #14281f;
--cloth-hi: #1d3a2d;
--on-cloth: #efe6d2;
--on-cloth-2: #b9c2b3;
--gilt: #d6a24c;
--card-line: rgba(20, 40, 31, .07);
--shadow: 0 1px 0 rgba(20, 40, 31, .06), 0 12px 28px -18px rgba(20, 40, 31, .35);
color-scheme: light;
}
/* dark: green-black stacks, bone text, brighter amber. Declared twice: OS preference and explicit toggle */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0b1510; --paper: #101e17; --panel: #15261d; --ink: #e9e1cd; --ink-2: #a7b2a4;
--rule: rgba(233, 225, 205, .14); --rule-strong: rgba(233, 225, 205, .36);
--accent: #dba552; --accent-fill: #d9a650; --on-accent: #0b1510;
--cloth: #0f1f17; --cloth-hi: #17301f; --on-cloth: #efe6d2; --on-cloth-2: #b9c2b3; --gilt: #d9a650;
--card-line: rgba(233, 225, 205, .05);
--shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 14px 30px -18px rgba(0, 0, 0, .8);
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--bg: #0b1510; --paper: #101e17; --panel: #15261d; --ink: #e9e1cd; --ink-2: #a7b2a4;
--rule: rgba(233, 225, 205, .14); --rule-strong: rgba(233, 225, 205, .36);
--accent: #dba552; --accent-fill: #d9a650; --on-accent: #0b1510;
--cloth: #0f1f17; --cloth-hi: #17301f; --on-cloth: #efe6d2; --on-cloth-2: #b9c2b3; --gilt: #d9a650;
--card-line: rgba(233, 225, 205, .05);
--shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 14px 30px -18px rgba(0, 0, 0, .8);
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: var(--sp-4) }
body {
margin: 0; background: var(--bg); color: var(--ink);
font: 400 var(--t-base)/1.65 var(--sans);
font-kerning: normal; font-variant-ligatures: common-ligatures; font-optical-sizing: auto;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.012em; margin: 0; text-wrap: balance }
p, li, dd, figcaption, blockquote { text-wrap: pretty }
p { margin: 0 }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--rule-strong); transition: text-decoration-color .2s, color .2s }
a:hover { text-decoration-color: var(--accent) }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r) }
::selection { background: var(--accent-fill); color: var(--on-accent) }
[hidden] { display: none !important }
.no-js .js-only { display: none !important }
em { font-style: italic }
.nw { white-space: nowrap }
.wrap { width: min(100% - 2 * var(--gutter), var(--frame)); margin-inline: auto }
[lang="ar"] { font-family: var(--arabic); font-size: var(--t-ar); line-height: 2.1; letter-spacing: 0; text-align: start; font-feature-settings: normal }

/* catalogue label: tracked capitals, the house "small caps" */
.label, .eyebrow, .callno, dt {
font: 600 var(--t-xs)/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums lining-nums;
}
.eyebrow { color: var(--accent) }
.callno { color: var(--accent); letter-spacing: .1em }
.muted { color: var(--ink-2) }

.skip { position: absolute; inset-inline-start: var(--sp-2); top: -10rem; z-index: 100; background: var(--ink); color: var(--bg); padding: .75rem 1rem; border-radius: var(--r); font-weight: 600 }
.skip:focus { top: var(--sp-2) }

/* ---------- Buttons + links ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 3rem; padding: .75rem 1.375rem;
font: 600 var(--t-sm)/1 var(--sans); letter-spacing: .04em; text-decoration: none; border-radius: var(--r);
border: 1px solid transparent; cursor: pointer; transition: transform .25s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn:active { transform: translateY(1px) }
.btn--gilt { background: var(--accent-fill); color: var(--on-accent) }
.btn--gilt:hover { background: color-mix(in srgb, var(--accent-fill) 88%, #fff) }
.btn--line { border-color: currentColor; color: inherit; background: transparent }
.btn--line:hover { background: color-mix(in srgb, currentColor 8%, transparent) }
.btn--ink { background: var(--ink); color: var(--bg) }
.btn--ink:hover { background: color-mix(in srgb, var(--ink) 86%, var(--accent)) }
.arrow-link { display: inline-flex; align-items: center; gap: .5em; min-height: 2.75rem; font-weight: 600; font-size: var(--t-sm); letter-spacing: .03em; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--accent); align-self: flex-start }
.arrow-link::after { content: "\2192"; color: var(--accent); transition: transform .25s var(--ease) }
.arrow-link:hover::after { transform: translateX(4px) }

/* ---------- Masthead ---------- */
.mast { border-bottom: 1px solid var(--rule); background: var(--bg) }
.mast__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); min-height: 4.5rem; padding-block: .5rem }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; margin-inline-end: auto; min-height: 2.75rem }
.brand img { width: 2.25rem; height: 2.25rem; border-radius: var(--r) }
.brand span { font: 500 1.375rem/1 var(--serif); letter-spacing: -.01em }
.nav ul { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin: 0; padding: 0; list-style: none }
.nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--t-sm); font-weight: 500; letter-spacing: .02em; text-decoration: none; color: var(--ink-2); border-bottom: 1px solid transparent }
.nav a:hover { color: var(--ink) }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent) }
.tools { display: flex; align-items: center; gap: .5rem }
.theme-toggle {
width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--rule); background: transparent;
color: var(--ink); border-radius: var(--r); cursor: pointer;
}
.theme-toggle:hover { border-color: var(--rule-strong) }
.theme-toggle svg { width: 1.1rem; height: 1.1rem }
@media (max-width: 47.99rem) {
.nav { order: 3; flex-basis: 100%; border-top: 1px solid var(--rule) }
.nav ul { justify-content: space-between; gap: 0 1rem }
}

/* Quick exit: fixed, quiet, always reachable */
.exit {
position: fixed; inset-block-end: max(1rem, env(safe-area-inset-bottom)); inset-inline-end: 1rem; z-index: 50;
display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .5rem .9rem;
background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: var(--r);
font: 600 var(--t-xs)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; box-shadow: var(--shadow);
}
.exit:hover { background: var(--ink); color: var(--bg) }
.exit kbd { font: 500 .6875rem/1 var(--sans); letter-spacing: .04em; text-transform: none; color: var(--ink-2); border: 1px solid var(--rule); padding: .25rem .375rem; border-radius: var(--r) }
.exit:hover kbd { color: inherit; border-color: currentColor }
@media (max-width: 30rem) { .exit kbd { display: none } }

/* ---------- Cover (home hero): a cloth-bound book cover, blind-stamped double frame ---------- */
.cover { background: var(--cloth); color: var(--on-cloth); padding: clamp(.625rem, 1.6vw, 1.25rem) }
.cover__cloth {
position: relative; min-height: min(calc(100dvh - 4.5rem - 2 * clamp(.625rem, 1.6vw, 1.25rem)), 54rem); display: grid; align-content: end;
padding: clamp(2.5rem, 6vw, 6rem) clamp(1.5rem, 6vw, 6rem) clamp(2.5rem, 5vw, 5rem);
background:
repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px),
repeating-linear-gradient(90deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px),
radial-gradient(120% 90% at 18% 12%, var(--cloth-hi), var(--cloth) 62%);
border: 1px solid color-mix(in srgb, var(--gilt) 55%, transparent);
border-radius: var(--r);
}
.cover__cloth::before { content: ""; position: absolute; inset: .375rem; border: 1px solid color-mix(in srgb, var(--gilt) 22%, transparent); pointer-events: none }
.cover__grid { display: grid; gap: var(--sp-4); max-width: var(--frame); width: 100%; margin-inline: auto }
.cover h1 { font-size: var(--t-hero); font-weight: 400; line-height: .94; letter-spacing: -.035em; padding-block-end: .08em; color: var(--on-cloth) }
.cover h1 em { color: var(--gilt); letter-spacing: -.045em; padding-inline-end: .06em }
.cover__side { display: grid; gap: var(--sp-3); align-content: end; max-width: 26rem }
.cover__sub { font-size: var(--t-md); line-height: 1.5; color: var(--on-cloth-2) }
.cover__cta { display: flex; flex-wrap: wrap; gap: .75rem }
.cover .btn--gilt { background: var(--gilt); color: #14281f }
.cover .btn--line { color: var(--on-cloth); border-color: color-mix(in srgb, var(--on-cloth) 45%, transparent) }
@media (min-width: 64rem) {
.cover__grid { grid-template-columns: minmax(0, 1fr) 25rem; align-items: end; gap: var(--sp-5) }
.cover__side { padding-block-end: 1.1rem }
}

/* ---------- Plates: thumbnails mounted like photographs on a mat ---------- */
.plate { margin-block: 0 }
ul .plate, .feature .plate { margin: 0 }
.plate__mat { background: var(--paper); padding: clamp(.375rem, .8vw, .625rem); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow) }
.plate img, .yt img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(.82) contrast(.97); transition: filter .5s var(--ease), transform .8s var(--ease) }
a:hover .plate img, .yt:hover img, .yt:focus-visible img { filter: none }

/* YouTube facade */
.yt { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #0b1510; color: #efe6d2; text-decoration: none; border-radius: 1px }
.yt:hover img { transform: scale(1.015) }
.yt__bar {
position: absolute; inset-inline-start: 0; inset-block-end: 0; display: flex; align-items: center; gap: .75rem;
max-width: calc(100% - 1.5rem); margin: .75rem; padding: .625rem .875rem .625rem .625rem;
background: rgba(11, 21, 16, .86); border-radius: var(--r); backdrop-filter: blur(6px);
}
.yt__play { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; background: #d6a24c; color: #14281f; border-radius: var(--r); transition: transform .3s var(--ease) }
.yt__play::before { content: ""; border-style: solid; border-width: .45rem 0 .45rem .72rem; border-color: transparent transparent transparent currentColor; margin-inline-start: .15rem }
.yt:hover .yt__play { transform: scale(1.06) }
.yt__text { display: grid; gap: .125rem; min-width: 0 }
.yt__title { font: 500 var(--t-sm)/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.yt__meta { font: 600 .6875rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #d6a24c }
.yt-frame { aspect-ratio: 16 / 9; width: 100%; background: #000 }
.yt-frame iframe { width: 100%; height: 100%; border: 0; display: block }

/* ---------- Section scaffolding ---------- */
.section { padding-block: var(--sp-section) }
.section + .section { border-top: 1px solid var(--rule) }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-block-end: var(--sp-5) }
.sec-head h2 { font-size: var(--t-xl) }
.lede { font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); max-width: 38ch }

/* Featured debunk: plate + catalogue record */
.feature { display: grid; gap: var(--sp-5); align-items: center }
.feature__record { display: grid; gap: var(--sp-3) }
.feature__record h2 { font-size: var(--t-xl) }
.feature__record h2 a { text-decoration: none }
.feature__record h2 a:hover { color: var(--accent) }
.dek { font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); max-width: 46ch }
.record { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--rule-strong) }
.record > div { padding: .875rem 0; border-bottom: 1px solid var(--rule); display: grid; gap: .25rem }
.record > div:nth-child(odd) { padding-inline-end: 1rem }
.record dt { color: var(--ink-2) }
.record dd { margin: 0; font-weight: 500 }
.record dd a { text-decoration-color: var(--accent) }
.plate figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-block-start: .875rem; font-size: var(--t-sm); color: var(--ink-2) }
@media (min-width: 60rem) { .feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-6) } }

/* Pillars: an accession ledger, ruled rows not cards */
.pillars__intro { display: grid; gap: var(--sp-3); margin-block-end: var(--sp-5) }
.pillars__intro p { font: 400 var(--t-lg)/1.35 var(--serif); max-width: 34ch; color: var(--ink-2) }
.pillars__intro h2 { font-size: var(--t-2xl); max-width: 16ch }
.pillars__intro h2 em { color: var(--accent) }
.ledger { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink) }
.ledger__row { display: grid; gap: .5rem 2rem; padding-block: var(--sp-4); border-bottom: 1px solid var(--rule-strong); grid-template-columns: 2.5rem minmax(0, 1fr) }
.ledger__no { font: 400 var(--t-lg)/1 var(--serif); color: var(--accent); grid-row: span 3; padding-block-start: .3rem; font-variant-numeric: lining-nums }
.ledger__row h3 { font-size: var(--t-lg) }
.ledger__row p { color: var(--ink-2); max-width: 52ch }
.ledger__text { display: grid; gap: 1rem }
.ledger__refs { display: flex; flex-wrap: wrap; gap: .5rem }
.ledger__refs a.callno { text-decoration: none; padding: .5rem .625rem; border: 1px solid var(--rule-strong); border-radius: var(--r); min-height: 2.75rem; display: inline-flex; align-items: center }
.ledger__refs a.callno:hover { border-color: var(--accent) }
@media (min-width: 60rem) {
.pillars__intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: var(--sp-6) }
.pillars__intro p { padding-block-end: .5rem }
.pillars__intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) }
.ledger__row { grid-template-columns: 4rem minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr); align-items: baseline }
.ledger__no { grid-row: auto }
.ledger__row .arrow-link { justify-self: end }
}

/* Collection: asymmetric plate wall, one large plate leads */
.wall { display: grid; gap: var(--sp-5) var(--sp-4); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0 }
.wall a { text-decoration: none; display: grid; gap: .875rem }
.wall__cap { display: grid; gap: .375rem }
.wall__cap .label { color: var(--accent) }
.wall__cap h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -.005em }
.wall a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--accent) }
.wall__meta { font-size: var(--t-sm); color: var(--ink-2); font-variant-numeric: tabular-nums }
@media (max-width: 39.99rem) {
.wall { gap: var(--sp-3) }
.wall li:not(:first-child) a { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; align-items: start }
.wall li:not(:first-child) .plate__mat { padding: .25rem }
.wall li:not(:first-child) h3 { font-size: 1.0625rem }
}
@media (min-width: 40rem) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)) } .wall li:first-child { grid-column: 1 / -1 } }
@media (min-width: 64rem) {
.wall { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.wall li:first-child { grid-column: span 2; grid-row: span 2 }
.wall li:first-child h3 { font-size: var(--t-lg); line-height: 1.15 }
}

/* Stories: index of testimonies, sticky header beside a ruled list */
.stories { background: var(--panel) }
.stories__in { display: grid; gap: var(--sp-5) }
.stories__head { display: grid; gap: var(--sp-3); align-content: start }
.stories__head h2 { font-size: var(--t-2xl) }
.stories__head h2 em { color: var(--accent) }
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong) }
.index a { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.25rem; align-items: center; padding-block: 1.25rem; border-bottom: 1px solid var(--rule-strong); text-decoration: none }
.index img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1px; filter: saturate(.7); transition: filter .4s var(--ease) }
.index a:hover img { filter: none }
.index h3 { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height: 1.25 }
.index a:hover h3 { color: var(--accent) }
.index .wall__meta { margin-block-start: .375rem }
@media (min-width: 60rem) {
.stories__in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-6) }
.stories__head { position: sticky; top: var(--sp-4) }
.index a { grid-template-columns: 11rem minmax(0, 1fr) auto; gap: 2rem }
.index a::after { content: "\2192"; color: var(--accent); transition: transform .25s var(--ease) }
.index a:hover::after { transform: translateX(4px) }
}

/* ---------- Catalogue cards (sources): ruled index cards, red-line margin in amber, punched hole ---------- */
.card {
position: relative; display: grid; gap: .875rem; align-content: start;
padding: 1.25rem 1.5rem 2.75rem calc(1.5rem + 1.25rem);
background:
linear-gradient(90deg, transparent calc(1.25rem - 1px), color-mix(in srgb, var(--accent) 45%, transparent) calc(1.25rem - 1px) 1.25rem, transparent 1.25rem),
repeating-linear-gradient(180deg, transparent 0 calc(1.75rem - 1px), var(--card-line) calc(1.75rem - 1px) 1.75rem),
var(--paper);
background-position: 0 0, 0 3.25rem, 0 0;
border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow);
transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card::after { content: ""; position: absolute; inset-block-end: .875rem; left: 50%; width: .75rem; height: .75rem; margin-inline-start: -.375rem; border-radius: 50%; background: var(--bg); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25) }
.card:hover { transform: translateY(-3px) }
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block-end: .75rem; border-bottom: 1px solid var(--rule-strong) }
.card__head .callno { font-size: var(--t-sm); letter-spacing: .08em }
.card__type { font: 500 var(--t-xs)/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2) }
.card h3 { font-size: 1.375rem; line-height: 1.25 }
.card__ar { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 2; color: var(--ink) }
.card__note { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6 }
.card__meta { font-size: var(--t-sm) }
.card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin-block-start: .25rem }
.card__link { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--t-sm); font-weight: 500; text-decoration-color: var(--accent) }
.card__link--pending { color: var(--ink-2); font-style: italic }
.copy {
min-height: 2.75rem; padding: .5rem .875rem; background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); border-radius: var(--r);
font: 600 var(--t-xs)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: border-color .2s, background-color .2s;
}
.copy:hover { border-color: var(--accent) }
.copy[data-done] { background: var(--ink); color: var(--bg); border-color: var(--ink) }

/* Home teaser: cards set like a drawer, staggered */
.drawer { display: grid; gap: var(--sp-5) }
.drawer__text { display: grid; gap: var(--sp-3); align-content: start }
.drawer__text h2 { font-size: var(--t-xl) }
.drawer__cards { display: grid; gap: var(--sp-3); list-style: none; margin: 0; padding: 0 }
@media (min-width: 48rem) { .drawer__cards { grid-template-columns: repeat(2, minmax(0, 1fr)) } .drawer__cards li:nth-child(even) { transform: translateY(var(--sp-5)) } .drawer { padding-block-end: var(--sp-5) } }
@media (min-width: 72rem) { .drawer { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-6) } .drawer__text { position: sticky; top: var(--sp-4) } }

/* Support: closing words + subscription slip */
.support { display: grid; gap: var(--sp-5) }
.support__words h2 { font-size: var(--t-2xl) }
.support__words h2 em { color: var(--accent) }
.support__words p { margin-block-start: var(--sp-3); font-size: var(--t-md); color: var(--ink-2); max-width: 36ch }
.slip { display: grid; gap: var(--sp-4); padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--paper) }
.slip__links { display: flex; flex-wrap: wrap; gap: .75rem; padding-block-start: var(--sp-3); border-top: 1px solid var(--rule) }
@media (min-width: 60rem) { .support { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: var(--sp-6) } }

/* ---------- Forms ---------- */
.field { display: grid; gap: .375rem }
.field label { font-weight: 600; font-size: var(--t-sm); letter-spacing: .01em }
.field label .opt { font-weight: 400; color: var(--ink-2) }
.help { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5 }
.error { font-size: var(--t-sm); color: #9b2c1f; font-weight: 500 }
:root[data-theme="dark"] .error { color: #f0a08f }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .error { color: #f0a08f } }
input[type="email"], input[type="url"], input[type="text"], input[type="search"], textarea {
width: 100%; min-height: 3rem; padding: .75rem .875rem; font: 400 1rem/1.4 var(--sans); color: var(--ink);
background: var(--bg); border: 1px solid var(--rule-strong); border-radius: var(--r); transition: border-color .2s, box-shadow .2s;
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.6 }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) }
[aria-invalid="true"] { border-color: #9b2c1f }
.inline-form { display: grid; gap: .75rem }
.inline-form__row { display: flex; flex-wrap: wrap; gap: .5rem }
.inline-form__row input { flex: 1 1 14rem }
.status { font-size: var(--t-sm); font-weight: 500; color: var(--accent); min-height: 1.4em }

/* ---------- Footer: the back board ---------- */
.foot { background: var(--cloth); color: var(--on-cloth); padding-block: var(--sp-6) var(--sp-5); margin-block-start: 0 }
.foot a { color: var(--on-cloth); text-decoration-color: color-mix(in srgb, var(--on-cloth) 35%, transparent) }
.foot a:hover { text-decoration-color: var(--gilt) }
.foot__top { display: grid; gap: var(--sp-4); padding-block-end: var(--sp-5); border-bottom: 1px solid color-mix(in srgb, var(--gilt) 35%, transparent) }
.foot__brand { font: 400 var(--t-xl)/1 var(--serif); letter-spacing: -.02em }
.foot__brand em { color: var(--gilt) }
.foot nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; margin: 0; padding: 0; list-style: none }
.foot nav a { display: inline-flex; min-height: 2.75rem; align-items: center; text-decoration: none }
.foot nav a:hover { color: var(--gilt) }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding-block-start: var(--sp-3); font-size: var(--t-sm); color: var(--on-cloth-2) }
.foot__base strong { color: var(--on-cloth); font-weight: 600 }
@media (min-width: 60rem) { .foot__top { grid-template-columns: minmax(0, 1fr) auto; align-items: end } }

/* ---------- Article ---------- */
.a-head { padding-block: var(--sp-6) var(--sp-5); display: grid; gap: var(--sp-3); justify-items: start }
.a-head h1 { font-size: var(--t-2xl); max-width: 18ch; letter-spacing: -.025em; line-height: 1.02 }
.a-head h1 em { color: var(--accent) }
.a-head .dek { max-width: 52ch; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem) }
.byline { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; padding-block-start: var(--sp-2); border-top: 1px solid var(--rule-strong); width: 100%; font-size: var(--t-sm); color: var(--ink-2) }
.byline strong { color: var(--ink); font-weight: 600 }
.byline span + span::before { content: "\00B7"; margin-inline-end: 1.25rem; color: var(--accent) }
@media (max-width: 30rem) { .byline span + span::before { display: none } }
.a-video { margin-block-end: var(--sp-6) }
.a-video .plate__mat { padding: clamp(.375rem, 1vw, .75rem) }
.a-video figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-block-start: 1rem }
.a-video figcaption p { font-size: var(--t-sm); color: var(--ink-2); max-width: 60ch }

.a-grid { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr) }
.toc { font-size: var(--t-sm) }
.toc h2 { font: 600 var(--t-xs)/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding-block-end: .75rem; border-bottom: 1px solid var(--rule-strong) }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc }
.toc li { border-bottom: 1px solid var(--rule) }
.toc a { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .25rem; padding-block: .625rem; min-height: 2.75rem; line-height: 1.45; text-decoration: none; color: var(--ink-2); transition: color .2s }
.toc li.n a::before { counter-increment: toc; content: counter(toc, upper-roman); font-family: var(--serif); color: var(--accent) }
.toc li:not(.n) a { display: block; padding-inline-start: 1.75rem }
.toc a:hover, .toc a[aria-current="true"] { color: var(--ink) }
.toc a[aria-current="true"] { font-weight: 600 }
@media (max-width: 74.99rem) {
.toc { border: 1px solid var(--rule-strong); border-radius: var(--r); padding: 1.25rem 1.25rem .5rem; background: var(--paper) }
.toc li:last-child { border-bottom: 0 }
}

.body { min-width: 0 }
.body > section { margin-block-end: var(--sp-6) }
.body h2 { font-size: var(--t-xl); margin-block: 0 var(--sp-3); max-width: 22ch }
.body h2 .num { display: block; font: 400 var(--t-md)/1 var(--serif); color: var(--accent); margin-block-end: .75rem; font-style: italic }
.body p { max-width: var(--measure); margin-block-end: 1.65em }
.body p:last-child { margin-block-end: 0 }
.body sup { line-height: 0; font-size: .7em; vertical-align: super }
.body sup a { text-decoration: none; color: var(--accent); font-weight: 600; padding-inline: .1em; font-variant-numeric: lining-nums }
.dropcap::first-letter { font-family: var(--serif); color: var(--accent) }
@supports (initial-letter: 3) { .dropcap::first-letter { initial-letter: 3; margin-inline-end: .5rem } }
@supports not (initial-letter: 3) { .dropcap::first-letter { float: left; font-size: 4.6em; line-height: .82; padding: .08em .12em 0 0 } }

.abstract { padding: clamp(1.25rem, 4vw, 2rem); background: var(--panel); border-radius: var(--r); border-inline-start: 3px solid var(--accent); max-width: calc(var(--measure) + 4rem) }
.abstract h2 { font: 600 var(--t-xs)/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-block-end: var(--sp-2) }
.abstract p { font-size: var(--t-md); line-height: 1.6; margin-block-end: 0 }
.abstract dl { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: var(--sp-3) 0 0; padding-block-start: var(--sp-2); border-top: 1px solid var(--rule-strong); font-size: var(--t-sm) }
.abstract dl div { display: flex; gap: .5rem; align-items: baseline }
.abstract dd { margin: 0 }

/* Primary source plates: verse and hadith */
.verse, .hadith { margin: var(--sp-5) 0; padding: clamp(1.5rem, 4vw, 3rem); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--r); max-width: calc(var(--measure) + 6rem); position: relative }
.verse::before, .hadith::before { content: ""; position: absolute; inset: .375rem; border: 1px solid var(--rule); pointer-events: none; border-radius: 1px }
.src-tag { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding-block-end: 1rem; border-bottom: 1px solid var(--rule-strong); margin-block-end: var(--sp-3) }
.src-tag .callno { font-size: var(--t-sm) }
.verse__ar { font-size: var(--t-ar); line-height: 2.15; text-align: center !important; text-wrap: balance; color: var(--ink); margin: 0 auto var(--sp-3) !important; max-width: none !important }
.verse blockquote, .hadith blockquote { margin: 0; padding-block-start: var(--sp-3); border-top: 1px solid var(--rule) }
.verse blockquote p, .hadith blockquote p { font: 400 var(--t-md)/1.6 var(--serif); margin: 0 !important; max-width: none }
.verse figcaption, .hadith figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-block-start: var(--sp-3); font-size: var(--t-sm); color: var(--ink-2) }
.verse figcaption a, .hadith figcaption a { color: var(--ink); text-decoration-color: var(--accent); font-weight: 500 }
.grade { display: inline-flex; align-items: center; gap: .5rem }
.grade b { font-weight: 600; color: var(--ink); padding: .2rem .5rem; border: 1px solid var(--accent); border-radius: var(--r); letter-spacing: .1em }

/* Pull quote */
.pull { margin: var(--sp-5) 0; padding: var(--sp-3) 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule-strong); max-width: calc(var(--measure) + 2rem) }
.pull blockquote { margin: 0 }
.pull p { font: 400 italic var(--t-lg)/1.3 var(--serif); letter-spacing: -.01em; max-width: 30ch !important; margin: 0 !important; color: var(--ink); text-indent: -.42em }

/* Sidenotes in the outer margin (wide screens only; numbered notes list remains the source of truth) */
.sn { display: none }
@media (min-width: 75rem) {
.a-grid { grid-template-columns: 13rem minmax(0, var(--measure)) 15rem; gap: 0 3.5rem; justify-content: center }
.toc { position: sticky; top: var(--sp-4); align-self: start; max-height: calc(100dvh - 4rem); overflow-y: auto }
.sn {
display: block; float: right; clear: right; width: 15rem; margin-inline-end: -18.5rem; margin-block: .3rem 1rem;
font-size: .8125rem; line-height: 1.55; color: var(--ink-2); text-indent: 0;
}
.sn b { color: var(--accent); font-weight: 600; margin-inline-end: .35rem; font-variant-numeric: lining-nums }
.body p { max-width: none }
}

/* End matter */
.notes ol, .reading { margin: 0; padding: 0; list-style: none; counter-reset: n; font-size: var(--t-sm); max-width: var(--measure) }
.notes li { counter-increment: n; display: grid; grid-template-columns: 2rem minmax(0, 1fr); padding-block: .625rem; border-bottom: 1px solid var(--rule); color: var(--ink-2) }
.notes li::before { content: counter(n); color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums }
.notes li:target { background: color-mix(in srgb, var(--accent-fill) 14%, transparent) }
.back { text-decoration: none; color: var(--accent); margin-inline-start: .375rem; display: inline-block; min-width: 1.5rem }
.end h2 { font-size: var(--t-lg) }
.reading li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding-block: .875rem; border-bottom: 1px solid var(--rule); align-items: baseline }
.reading li:first-child { border-top: 1px solid var(--rule-strong) }
.reading .callno { font-size: var(--t-xs) }
.reading cite { font-style: italic }

.cite { padding: var(--sp-4); border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--paper); display: grid; gap: var(--sp-2); max-width: calc(var(--measure) + 4rem) }
.cite pre { margin: 0; white-space: pre-wrap; font: 400 var(--t-sm)/1.65 var(--sans); padding: 1rem; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r); overflow-wrap: anywhere }
.cite__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap }
.cite__head h2 { margin: 0 }
.share { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center }
.share .label { margin-inline-end: .5rem; color: var(--ink-2) }
.share a, .share button { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--rule-strong); border-radius: var(--r); background: transparent; color: var(--ink); font: 500 var(--t-sm)/1 var(--sans); text-decoration: none; cursor: pointer }
.share a:hover, .share button:hover { border-color: var(--accent) }

.related { border-top: 1px solid var(--rule); margin-block-start: var(--sp-6) }
.related .wall { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)) }
.related .wall li:first-child { grid-column: auto; grid-row: auto }
.related .wall li:first-child h3 { font-size: 1.25rem }
.pager { display: grid; gap: 1px; background: var(--rule-strong); border-block: 1px solid var(--rule-strong); margin-block-start: var(--sp-6) }
.pager a { display: grid; gap: .5rem; padding: var(--sp-4) var(--sp-3); background: var(--bg); text-decoration: none; min-height: 2.75rem }
.pager a:hover { background: var(--paper) }
.pager .label { color: var(--accent) }
.pager span:last-child { font: 400 var(--t-md)/1.3 var(--serif) }
.pager a:last-child { text-align: end }
@media (min-width: 48rem) { .pager { grid-template-columns: 1fr 1fr } }

/* ---------- Sources library ---------- */
.lib-head { padding-block: var(--sp-6) var(--sp-5); display: grid; gap: var(--sp-4) }
.lib-head h1 { font-size: var(--t-2xl); letter-spacing: -.025em }
.lib-head h1 em { color: var(--accent) }
.lib-head .lede { max-width: 50ch }
@media (min-width: 60rem) { .lib-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--sp-6) } }
.finder { display: grid; gap: var(--sp-3); padding-block: var(--sp-3); border-block: 1px solid var(--rule-strong); margin-block-end: var(--sp-5) }
.search { position: relative }
.search input { padding-inline-start: 2.75rem; font-size: 1.0625rem; background: var(--paper) }
.search svg { position: absolute; inset-inline-start: .9rem; bottom: .95rem; width: 1.1rem; height: 1.1rem; color: var(--ink-2); pointer-events: none }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center }
.chip { min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--rule-strong); border-radius: var(--r); background: transparent; color: var(--ink); font: 500 var(--t-sm)/1 var(--sans); cursor: pointer; display: inline-flex; gap: .5rem; align-items: center }
.chip span { color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: var(--t-xs) }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.chip[aria-pressed="true"] span { color: inherit; opacity: .7 }
.count { font-size: var(--t-sm); color: var(--ink-2); margin-inline-start: auto; font-variant-numeric: tabular-nums }
@media (min-width: 60rem) { .finder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: var(--sp-4) } }
.catalogue { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)) }
.empty { padding: var(--sp-6) var(--sp-3); text-align: center; border: 1px dashed var(--rule-strong); border-radius: var(--r); display: grid; gap: var(--sp-2); justify-items: center }
.empty h2 { font-size: var(--t-lg) }
.submit-sec { margin-block-start: var(--sp-6); border-top: 1px solid var(--rule) }

.submit { display: grid; gap: var(--sp-5) }
.submit__intro h2 { font-size: var(--t-xl) }
.submit__intro p { margin-block-start: var(--sp-2); color: var(--ink-2); max-width: 40ch }
.submit form { display: grid; gap: var(--sp-3); padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--r) }
.submit form .btn { justify-self: start }
@media (min-width: 60rem) { .submit { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-6) } .submit form { grid-template-columns: 1fr 1fr } .submit .field--wide, .submit form .btn, .submit .status { grid-column: 1 / -1 } }

/* ---------- Motion: reveal only, and only when JS + motion allowed ---------- */
@media (prefers-reduced-motion: no-preference) {
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease) }
.js .reveal.is-in { opacity: 1; transform: none }
.cover h1, .cover__side { animation: rise 1.1s var(--ease) both }
.cover__side { animation-delay: .18s }
@keyframes rise { from { opacity: 0; transform: translateY(18px) } }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
}

/* ---------- Print: a clean offprint ---------- */
@media print {
@page { margin: 2cm 2.2cm }
:root { --bg: #fff; --paper: #fff; --panel: #fff; --ink: #000; --ink-2: #333; --accent: #000; --rule: #bbb; --rule-strong: #777 }
body { font: 10.5pt/1.5 var(--sans); background: #fff; color: #000 }
.mast, .exit, .toc, .share, .related, .pager, .foot, .copy, .theme-toggle, .skip, .yt__bar, .sn { display: none !important }
.a-grid { display: block }
.a-head h1 { font-size: 26pt }
.body h2 { font-size: 16pt; break-after: avoid }
.a-video img { max-width: 9cm; filter: grayscale(1) }
.a-video .plate__mat { border: 0; box-shadow: none; padding: 0 }
.yt::after { content: "Video: " attr(href); display: block; font-size: 9pt; padding-top: 4pt }
.yt { aspect-ratio: auto; background: none; color: #000 }
.verse, .hadith, .pull, .abstract, .cite, figure { break-inside: avoid; box-shadow: none }
.body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #444; overflow-wrap: anywhere }
.reveal { opacity: 1 !important; transform: none !important }
}
/* Cover tooling: a single blind-stamped lozenge, the only ornament on the cover */
.cover__cloth::after { content: ""; position: absolute; top: clamp(1.75rem, 4vw, 3rem); left: 50%; width: .5rem; height: .5rem; margin-inline-start: -.25rem; border: 1px solid color-mix(in srgb, var(--gilt) 60%, transparent); transform: rotate(45deg); }