/* ═══════════════════════════════════════════════════════════════════════ THE DESIGN SYSTEM — lifted VERBATIM from platform/khashan-site.html. Not retyped. The comp is the source of truth for the identity, and a hand copy would fork on the first edit made to one and not the other. Regenerate with performance/../scratchpad b9_assets.py after any change to the comp. The comp inlines this because a single self-contained file has no second round trip to spend. A SERVER does: the stylesheet caches independently of every page, so the second page a reader opens costs nothing for it. That is the same trade the comp measured and rejected — the answer changes when the markup is no longer one document. ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ THE KHASHAN DIGITAL HERITAGE PROJECT — the website, one file. Same URL, same markup: CSS decides whether you get The Grand Institution (desktop) or The Pocket Institution (phone). Resize the window to see it. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ SCHOLARLY HERITAGE — CANONICAL DESIGN TOKENS · SINGLE SOURCE OF TRUTH Byte-identical in every comp AND in design-tokens/tokens.css. Do not edit this block in one file: edit design-tokens/tokens.css and re-apply to all. Assets (e.g. the portrait) are NOT tokens and are declared per file, below. ═══════════════════════════════════════════════════════════════════════ */ :root{ --obsidian:#070707; --imperial:#101010; --graphite:#191919; --graphite-2:#212121; --stone-line:#2c2c2e; --gold:#c8a75b; --gold-champagne:#e3c98a; --gold-antique:#9c7a34; --gold-hi:#f3e0a6; --gold-lo:#8c6b2e; --bronze:#7a5b2e; --ivory:#f4f1eb; --ivory-2:#b8b3a9; --muted:#7c776e; --on-gold:#0b0b0c; --ink:#211b12; --emerald:#1f5d4e; --gold-brushed:linear-gradient(135deg,#a9853a 0%,#c8a75b 34%,#f0dca0 52%,#c8a75b 68%,#8c6b2e 100%); --gold-glow:0 0 0 1px rgba(200,167,91,.35),0 0 22px rgba(200,167,91,.30); --foil:linear-gradient(135deg,var(--gold-lo) 0%,var(--gold) 38%,var(--gold-hi) 55%,var(--gold) 78%); --glass:rgba(14,14,14,.72); --glass-bd:rgba(200,167,91,.20); --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:24px;--sp6:32px;--sp7:48px;--sp8:64px;--sp9:96px;--sp10:128px;--sp11:160px; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --maxw:1220px; --base:240ms; --slow:480ms; --reveal:700ms; --ease:cubic-bezier(.22,.61,.36,1); --ease-in:cubic-bezier(.16,1,.3,1); --paper-ease:cubic-bezier(.2,.7,.2,1); --paper-slow:cubic-bezier(.16,1,.3,1); --rfs:20px; --rlh:1.95; --measure:38em; --font-display:'Aref Ruqaa','Amiri',serif; --font-head:'Amiri',serif; --font-body:'IBM Plex Sans Arabic',system-ui,sans-serif; --font-naskh:'Noto Naskh Arabic','Amiri',serif; --font-sans:'IBM Plex Sans Arabic',system-ui,sans-serif; --font-ui:'IBM Plex Sans Arabic',system-ui,sans-serif; } /* ── file-local asset, deliberately NOT a design token ── The portrait is embedded once and referenced by every surface that needs it; four inline copies cost ~165KB for nothing. */ :root{--portrait:image-set( url("/img/khashan-portrait.avif") type("image/avif"), url("/img/khashan-portrait.webp") type("image/webp"), url("/img/khashan-portrait.jpg") type("image/jpeg"))} /* Safari shipped -webkit-image-set before the standard name; without this the portrait silently falls back to nothing there rather than to the JPEG. */ @supports not (background-image:image-set(url("x.avif") type("image/avif"))){ :root{--portrait:url("/img/khashan-portrait.jpg")} } /* ── THE TWO WORLDS ── */ :root{color-scheme:dark;--bg:var(--obsidian);--surf:linear-gradient(180deg,#1c1c1c,#151515);--txt:var(--ivory);--txt2:var(--ivory-2); --mut:#8f8a80;/* clears 4.5 on every surface it lands on: 5.01 on the card face #1c1c1c and 4.65 on the warm wash #262219 (var(--muted) was 4.17) */ --edge:var(--stone-line);--acc:var(--gold);--seal:url(#foilg);--emb:none;--paper:#141312; --foot:linear-gradient(180deg,#0a0a0a,#050505);--engrave:rgba(214,188,124,.6);--headbg:rgba(10,10,10,.78); --acc-text:var(--gold)} html[data-world="manuscript"]{--bg:#f1ebdd;--surf:linear-gradient(180deg,#fbf8f2,#f3ecdd);--txt:#2d2418;--txt2:#6b5f4a; --mut:#675c43;/* 4.72:1 on the cotton gradient #e3d9c2 (was 4.21) */ --edge:#e6ddc9;--acc:#9c7a34;--acc-text:#7c5e24;--seal:#8a6f3c;--paper:#fbf8f2;--engrave:rgba(78,56,26,.58); --foot:linear-gradient(180deg,#eae1cf,#e1d7bf);--headbg:rgba(251,248,242,.82); --emb:drop-shadow(0 1px 0 rgba(255,255,255,.85));color-scheme:light} html[data-lang="en"]{--font-display:'Cormorant Garamond',serif;--font-head:'Cormorant Garamond',serif; --font-body:'Inter',system-ui,sans-serif;--font-ui:'Inter',system-ui,sans-serif;--font-naskh:'Cormorant Garamond',Georgia,serif;--measure:34em} *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} /* `clip`, NOT `hidden`, AND THAT IS WHY THE HEADER NOW STAYS PUT. Both hide horizontal overflow; only `hidden` makes the element a SCROLL CONTAINER. `position:sticky` sticks to its nearest scrolling ancestor, so with `hidden` here `.hdr` stuck to instead of to the viewport and scrolled away with the page — measured, its top went to -229px after a 1400px scroll, at every width and in both languages, while the entrance hall's held at 0. The entrance hall was the only room that behaved, because home.css overrides both of these with `clip` and says so. That override was written when the entrance hall had its own chrome; now that ONE header serves every room, the fix belongs where the header does. `clip` forbids scrolling outright, so there is no container to capture the sticky and it resolves against the viewport. Safe because nothing here overflows horizontally: scripts/mobile-audit.mjs measures scrollWidth against the viewport on 13 routes at 7 widths, and any genuinely wide content (the curator tables) carries its own overflow-x:auto. */ html{scroll-behavior:smooth;overflow-x:clip;scrollbar-gutter:stable} body{background:var(--bg);color:var(--txt);font-family:var(--font-body);font-size:17px;line-height:1.8; -webkit-font-smoothing:antialiased;overflow-x:clip; transition:background-color var(--slow) var(--ease),color var(--slow) var(--ease)} a{color:inherit;text-decoration:none} /* Focus is never colour alone: a gold ring plus an offset outline (Vol I §5). */ :focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px} .skip-link{position:absolute;inset-inline-start:-9999px;top:10px;z-index:200;background:var(--gold-brushed); color:var(--on-gold);padding:12px 20px;border-radius:var(--r-md);font-family:var(--font-ui);font-size:14px} .skip-link:focus{inset-inline-start:16px} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} .ar{display:inline}.en{display:none} html[data-lang="en"] .ar{display:none} html[data-lang="en"] .en{display:inline} .blk{display:block} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,72px)} section.band{padding-block:clamp(56px,8vw,110px)} /* ── atmosphere (5 layers) ── */ .atmos{position:fixed;inset:0;z-index:0;pointer-events:none;contain:strict;transform:translateZ(0)} .atmos i{position:absolute;inset:0;display:block} .a-marble{background:radial-gradient(1200px 760px at 50% -6%,#141210,transparent 62%), radial-gradient(900px 700px at 100% 6%,#100f0d,transparent 55%)} html[data-world="manuscript"] .a-marble{background:radial-gradient(1200px 760px at 50% -6%,#faf7f1,transparent 62%), radial-gradient(900px 700px at 100% 6%,#f6f0e4,transparent 55%)} .a-light{background:radial-gradient(700px 460px at 50% 0%,rgba(200,167,91,.09),transparent 62%)} .a-grain{opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} html[data-world="manuscript"] .a-grain{mix-blend-mode:multiply;opacity:.07} .a-geo{opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%23c8a75b' stroke-width='.5'%3E%3Cpath d='M75 6 144 75 75 144 6 75Z'/%3E%3Cpath d='M75 34 116 75 75 116 34 75Z'/%3E%3C/g%3E%3C/svg%3E")} .a-vig{background:radial-gradient(130% 90% at 50% 26%,transparent 48%,rgba(0,0,0,.5) 100%)} html[data-world="manuscript"] .a-vig{background:radial-gradient(130% 90% at 50% 26%,transparent 58%,rgba(120,96,40,.1) 100%)} main{position:relative;z-index:1} /* ── type ── */ .ovl{font-family:var(--font-ui);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--acc-text)} h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,1.5rem+3.6vw,4.2rem);line-height:1.14;letter-spacing:-.012em} h2{font-family:var(--font-head);font-weight:400;font-size:clamp(1.7rem,1.2rem+1.8vw,2.6rem);line-height:1.28} h3{font-family:var(--font-head);font-weight:400;font-size:1.35rem;line-height:1.35} p.lede{color:var(--txt2);font-size:clamp(1rem,.9rem+.4vw,1.2rem);line-height:1.9} .cap{font-family:var(--font-ui);font-size:11.5px;color:var(--mut);letter-spacing:.05em} .foil{background:var(--foil);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} html[data-world="manuscript"] .foil{background:none;-webkit-text-fill-color:#6a5e49; text-shadow:0 1px 0 rgba(255,255,255,.9),0 -1px 1px rgba(70,54,26,.12)} html[data-world="manuscript"] .hdr .brand .nm{text-shadow:0 1px 0 rgba(255,255,255,.95),0 -1px 1px rgba(70,54,26,.14),0 8px 18px rgba(90,70,30,.11)} html[data-world="manuscript"] .hdr .brand .nm::after{background:linear-gradient(90deg,transparent,rgba(143,108,42,.58) 18%,rgba(181,145,71,.88) 50%,rgba(143,108,42,.58) 82%,transparent);box-shadow:0 2px 7px rgba(90,70,30,.12)} .rule{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--acc);margin:var(--sp7) 0} .rule::before,.rule::after{content:"";height:1px;flex:1;max-width:150px;background:linear-gradient(to right,transparent,currentColor)} .rule::after{transform:scaleX(-1)} .rule i{width:8px;height:8px;border:1px solid currentColor;transform:rotate(45deg);flex:none} .sechead{text-align:center;max-width:680px;margin:0 auto var(--sp7)} .sechead h2{margin-top:10px} /* ── header / nav ── */ .hdr{position:sticky;top:0;z-index:60;background:var(--headbg);-webkit-backdrop-filter:blur(14px); /* own compositing layer: stops the blurred strip shimmering over the fixed atmosphere */ transform:translateZ(0);backface-visibility:hidden; border-bottom:1px solid transparent;transition:border-color var(--base),box-shadow var(--base)} .hdr.on{border-bottom-color:var(--edge);box-shadow:0 10px 34px rgba(0,0,0,.28)} html[data-world="manuscript"] .hdr.on{box-shadow:0 10px 26px rgba(90,70,30,.10)} .hdr__in{display:flex;align-items:center;gap:18px;height:88px} /* THE HEADER ROW IS FULL BLEED, NOT A 1220px COLUMN. `.hdr__in` is a `.wrap`, and `.wrap` is the CONTENT column: max-width 1220 with a clamp(20px,5vw,72px) gutter, so the row only ever had 1076px to lay out in at desktop. Measured against that content box, the brand, the nine-link nav and the toolbar need 1185px in Arabic and 1315px in English — so the toolbar sat outside the gutter at EVERY desktop width, in both languages. It read as "the header is wider than the page" because it was. A content column is right for prose and wrong for chrome: the header is one continuous band across the viewport, which is the full-bleed arrangement already settled for it. So the row keeps a real gutter and drops the column — the same `clamp(18px,4vw,72px)` the band uses, and nothing else changes. `.wrap` itself is untouched: every other room still gets its 1220px column. */ .hdr .hdr__in{max-width:none;padding-inline:clamp(18px,4vw,72px)} /* ══ THE HEADER READS, IN ORDER: الموقع الرسمي · THE NAME · THE SUBTITLE ═════ The entrance hall gets the complete masthead; every other room gets the compact bar. The height differs BY ROOM and never within one, and no height/padding is transitioned — a sticky header that changes height while you scroll shifts everything beneath it, which is the exact defect that cost 0.74 CLS earlier in this build. */ .brand__t{display:flex;flex-direction:column;justify-content:center;min-width:0} .brand{display:flex;align-items:center;gap:12px;flex:none;padding-block:7px;min-height:44px} .brand>svg,.brand>.brand__emblem{width:56px;height:56px;object-fit:contain;transition:transform var(--slow) var(--paper-ease),filter var(--slow)} .brand>svg{filter:var(--emb)} .brand:hover>svg,.brand:hover>.brand__emblem{transform:translateY(-1px) scale(1.035);filter:drop-shadow(0 7px 13px rgba(200,167,91,.18))} .brand .nm{position:relative;display:inline-block;font-family:var(--font-display);font-size:clamp(30px,1.55rem + .48vw,36px);line-height:1.08;white-space:nowrap; padding:2px 8px 8px;text-shadow:0 7px 18px rgba(0,0,0,.16);isolation:isolate} .brand .royal-name{position:relative;display:inline-block;z-index:2;letter-spacing:.012em; filter:drop-shadow(0 1px 0 rgba(255,255,255,.16)) drop-shadow(0 7px 10px rgba(0,0,0,.2))} .brand .royal-name::before{content:attr(data-name);position:absolute;inset:0;z-index:-1;color:transparent; -webkit-text-stroke:1.25px color-mix(in srgb,var(--acc) 40%,transparent);transform:translateY(1px) scale(1.008); filter:blur(.35px);opacity:.7;pointer-events:none} .brand .nm-ornament{position:absolute;z-index:-1;inset:-12px -21px -8px;pointer-events:none;color:var(--acc);opacity:.72} .brand .nm-ornament svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 7px rgba(200,167,91,.24))} .brand .nm-ornament path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round} .brand .nm-ornament__crown{stroke-width:1.4;opacity:.42}.brand .nm-ornament__sweep{stroke-width:2.1;opacity:.62} .brand .nm-ornament__pen{stroke-width:1.15;opacity:.32}.brand .nm-ornament__jewel{fill:currentColor;stroke-width:.7;opacity:.7} html[data-world="manuscript"] .brand .royal-name::before{-webkit-text-stroke-color:rgba(111,82,30,.3);opacity:.5} html[data-world="manuscript"] .brand .nm-ornament{color:#8a682d;opacity:.58} html[data-lang="en"] .brand .nm-ornament{display:none} /* ── ENGLISH CARRIES THE SHORT WORDMARK IN THE HEADER ────────────────────── Measured inside the header's own 1220px column, with the nine-link row: brand nav tools gaps total Arabic 351 598 200 36 1185 ✓ 35px spare English 395 684 200 36 1315 ✗ 95px over Cormorant sets the Latin wordmark at 302–324px against Aref Ruqaa's 280, and nine English labels run 684px against Arabic's 598 — so English overflowed its column at EVERY width, and past the viewport itself at 1440 (.tools ending at 1467). Not a breakpoint problem; a property of the language. The short wordmark saves 253px, which is the whole deficit and more. This is not a new decision: site.css already drops the ornament for English one line above, and home.css made exactly this call for exactly this reason — "the English pill carries the short name". Arabic is untouched, and Arabic is the language this site is written in. The full name is not lost: it is the , the og:title and the h1 of the entrance hall. What it stops doing is breaking the bar it sits in. */ html[data-lang="en"] .brand .nm-full{display:none} html[data-lang="en"] .brand .nm-short{display:inline} .brand .nm::after{content:"";position:absolute;inset-inline:7% 7%;bottom:1px;height:1px; background:linear-gradient(90deg,transparent,rgba(200,167,91,.72) 18%,rgba(243,224,166,.96) 50%,rgba(200,167,91,.72) 82%,transparent); box-shadow:0 0 9px rgba(200,167,91,.3)} .brand .nm::before{content:"";position:absolute;left:50%;bottom:-2px;width:6px;height:6px;border:1px solid var(--acc); background:var(--bg);transform:translateX(-50%) rotate(45deg);z-index:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--bg) 86%,transparent)} .brand .nm-short{display:none} .brand .sb{display:flex;align-items:center;gap:7px;font-family:var(--font-ui);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase; color:var(--acc-text);margin-bottom:5px;order:-1;white-space:nowrap} .brand .sb::before,.brand .sb::after{content:"";width:18px;height:1px;opacity:.72} .brand .sb::before{background:linear-gradient(90deg,transparent,var(--acc))} .brand .sb::after{background:linear-gradient(90deg,var(--acc),transparent)} .brand .tag{display:none;font-family:var(--font-ui);font-size:11.5px;line-height:1.5;color:var(--mut); margin-top:7px;max-width:56ch} /* the entrance hall: the complete masthead, one fixed height for the whole room */ /* The tall masthead drops the glass. backdrop-filter costs in proportion to the area blurred, and this header is roughly twice the height of the compact one — measured on the entrance hall at 4x CPU throttle: 4 frames over 32ms and 54.7fps, where every other room held 60+ with zero jank. SECTION-SPECS §0 already limits glass to "the header and scrims only"; a masthead this tall is past the point where it earns its cost. */ body[data-page="home"] .hdr{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)} body[data-page="home"] .hdr__in{height:auto;min-height:132px;align-items:flex-start;padding-block:18px} body[data-page="home"] .brand{align-items:flex-start} body[data-page="home"] .brand>svg,body[data-page="home"] .brand>.brand__emblem{margin-top:6px} body[data-page="home"] .brand .nm{font-size:clamp(28px,1.3rem+1.5vw,42px)} body[data-page="home"] .brand .sb{font-size:10.5px} body[data-page="home"] .brand .tag{display:block} body[data-page="home"] .nav,body[data-page="home"] .tools{margin-top:6px} .nav{display:flex;gap:5px;margin-inline:auto;font-family:var(--font-ui);font-size:13.5px;align-self:stretch;align-items:center} .nav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:62px;height:72px; color:var(--txt2);padding:5px 8px 7px;border:1px solid transparent;border-radius:3px; transition:color var(--base) var(--ease),background var(--base),border-color var(--base),transform var(--base) var(--paper-ease)} .nav a::before{content:"";position:absolute;inset:4px;border:1px solid transparent;border-radius:1px;pointer-events:none;transition:border-color var(--base)} .nav a::after{content:"";position:absolute;inset-inline:50% 50%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent); box-shadow:0 0 10px rgba(200,167,91,.6);transition:inset var(--base) var(--ease)} .nav__icon{position:relative;width:29px;height:29px;display:grid;place-items:center;color:color-mix(in srgb,var(--txt2) 72%,var(--acc)); filter:drop-shadow(0 3px 6px rgba(0,0,0,.08));transition:color var(--base),transform var(--base) var(--paper-ease)} .nav__icon::before{content:"";position:absolute;inset:3px;border:1px solid color-mix(in srgb,var(--acc) 23%,transparent);transform:rotate(45deg);opacity:0; transition:opacity var(--base),transform var(--slow) var(--paper-ease)} .nav__icon svg{position:relative;width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;z-index:1} .nav__icon .nav__jewel{fill:var(--acc);stroke:var(--acc);stroke-width:.7} .nav a:hover{color:var(--txt);background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 7%,transparent),transparent);transform:translateY(-1px)} .nav a:hover::before,.nav a.on::before{border-color:color-mix(in srgb,var(--acc) 22%,transparent)} .nav a:hover::after,.nav a.on::after{inset-inline:12% 12%} .nav a:hover .nav__icon,.nav a.on .nav__icon{color:var(--acc);transform:translateY(-1px)} .nav a:hover .nav__icon::before,.nav a.on .nav__icon::before{opacity:.55;transform:rotate(45deg) scale(.84)} .nav a.on{color:var(--acc);background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 10%,transparent),color-mix(in srgb,var(--acc) 2%,transparent));border-color:color-mix(in srgb,var(--acc) 26%,transparent)} html[data-world="manuscript"] .nav a.on{box-shadow:0 7px 18px rgba(105,76,23,.07),inset 0 1px rgba(255,255,255,.55)} .tools{display:flex;gap:8px;flex:none} .ic{width:44px;height:44px;min-width:44px;border-radius:50%;border:1px solid var(--edge);display:grid;place-items:center; color:var(--txt2);transition:color var(--base) var(--ease),border-color var(--base) var(--ease),background var(--base)} .ic:hover{color:var(--acc);border-color:var(--acc)} .ic svg{width:17px;height:17px} .world-toggle__sun{display:none} .world-toggle__moon{display:block} html[data-world="manuscript"] .world-toggle__sun{display:block} html[data-world="manuscript"] .world-toggle__moon{display:none} .burger{display:none} /* ── buttons ── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-ui);font-size:14.5px; letter-spacing:.03em;border-radius:var(--r-md);padding:15px 30px 18px;margin-bottom:-3px;min-height:48px;border:1px solid transparent; transition:transform 150ms var(--paper-ease),box-shadow 150ms var(--paper-ease),filter 150ms,border-color 150ms} .btn-g{background:var(--gold-brushed);color:var(--on-gold);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 10px 26px rgba(0,0,0,.4)} .btn-g:hover{filter:brightness(1.07);transform:translateY(-3px)} .btn-o{color:var(--acc);border-color:rgba(200,167,91,.5)} .btn-o:hover{transform:translateY(-3px);border-color:var(--acc);box-shadow:var(--gold-glow)} /* ── hero ── */ .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,60px);align-items:center; min-height:calc(100vh - 74px);min-height:calc(100svh - 74px);padding-block:40px} .hero__sub{margin-top:var(--sp6);max-width:520px} .hero__cta{margin-top:var(--sp8);display:flex;gap:16px;flex-wrap:wrap} /* Infinite motion is paused the moment it leaves the viewport — no CPU, no battery, for something nobody is looking at. */ .paused,.paused *{animation-play-state:paused!important} @keyframes spin{to{transform:rotate(360deg)}} /* ══ THE CEREMONIAL EMBLEM ═════════════════════════════════════════════════ Five depth layers read in the reverse order of their loudness: the BOOK first, the PHRASE second, the geometry third, the motion last — which is what every opacity below is set to protect. The storyboard, the material tables and the reasoning behind each number are in design-system/EMBLEM.md; they are not shipped here, because a reader pays for them on first visit. Transform and opacity only, plus one stroke-dashoffset that runs once. The book's shadow is a gradient rather than a Gaussian blur because it moves. --e-idle holds every idle delay, so a visitor who scrolls away mid-ceremony is handed the finished emblem AND the running idle state by one value. Same geometry in both worlds; the Manuscript is NOT the Archive inverted. */ .cpiece{ --e-idle:6.2s; --e-ring1:#c8a75b; --e-ring1-o:.78; --e-ring2:#9c7a34; --e-ring2-o:.5; --e-geo:#7f632b; --e-geo-o:.5; --e-dia:#c8a75b; --e-dia-hot:#f2d88a; --e-dia-o:.62; --e-page-1:#f5edd8; --e-page-2:#eee4cb; --e-page-3:#d5c096; --e-gild-1:#8c6b2e; --e-gild-2:#c8a75b; --e-gild-3:#f3e0a6; --e-gild-4:#a9853a; --e-ink:#3a2810; --e-ink-2:#5a431e; --e-ink-hot:#9a7326; /* no blind emboss in the vitrine: light there is a reflection off foil, not a shadow cast into paper */ --e-emb:transparent; --e-halo-1:rgba(243,224,166,.34); --e-halo-2:rgba(200,167,91,.10); --e-halo-3:rgba(200,167,91,0); --e-pen-1:#fff8e0; --e-pen-2:rgba(243,224,166,.85); --e-pen-3:rgba(200,167,91,0); --e-shade-1:rgba(0,0,0,.5); --e-shade-2:rgba(0,0,0,0); --e-sheen-1:rgba(255,248,224,0); --e-sheen-2:rgba(255,248,224,.85); --e-spark:#f3e0a6; --e-amb:radial-gradient(circle,rgba(154,120,52,.20),rgba(120,92,40,.07) 46%,transparent 68%); } /* THE MANUSCRIPT'S METAL RUNS THE OTHER WAY, and this is the whole difference between the two worlds. In the Archive the gradient's bright stop is a specular catch against obsidian. Pointed at parchment, that same bright stop is LIGHTER THAN ITS GROUND, so the metal dissolves exactly where it should be brightest — which is why the light world first rendered as a ghost. Antique metal on paper is DARKER than the paper; the catch is used sparingly and never approaches white. Every gold below therefore sits under the parchment's own luminance, and the page keeps its ivory instead of taking on a brass cast. */ html[data-world="manuscript"] .cpiece{ --e-ring1:#a6843d; --e-ring1-o:.88; --e-ring2:#a6843d; --e-ring2-o:.64; --e-geo:#8b6f36; --e-geo-o:.66; --e-dia:#8b6f36; --e-dia-hot:#d8bd77; --e-dia-o:.82; /* ivory pages. The warmth belongs to the EDGE, not to the paper. */ --e-page-1:#fffdf7; --e-page-2:#f9f3e2; --e-page-3:#eee1c2; --e-gild-1:#6f5726; --e-gild-2:#a6843d; --e-gild-3:#cdae6b; --e-gild-4:#8b6f36; --e-ink:#6a4c17; --e-ink-2:#7b6030; --e-ink-hot:#9a6f1f; /* the blind emboss: one light line under each page edge, so the paper reads as pressed rather than drawn. It is a second path, not a filter, because the book floats and a filter would be re-evaluated every idle frame. */ --e-emb:rgba(255,253,246,.95); --e-halo-1:rgba(216,189,119,.24); --e-halo-2:rgba(166,132,61,.08); --e-halo-3:rgba(166,132,61,0); --e-pen-1:#fff6d8; --e-pen-2:rgba(198,160,80,.85); --e-pen-3:rgba(166,132,61,0); /* a warm brown shadow, low-opacity and very soft — never grey */ --e-shade-1:rgba(104,78,32,.26); --e-shade-2:rgba(104,78,32,0); /* the sheen on paper is a warm pass of light, not a white flash */ --e-sheen-1:rgba(255,246,216,0); --e-sheen-2:rgba(255,246,216,.75); --e-spark:#b99a52; --e-amb:radial-gradient(circle,rgba(251,248,241,.85),rgba(244,239,227,.45) 46%,transparent 70%); } /* tokens -> gradient stops */ .e-g1{stop-color:var(--e-gild-1)}.e-g2{stop-color:var(--e-gild-2)} .e-g3{stop-color:var(--e-gild-3)}.e-g4{stop-color:var(--e-gild-4)} .e-p1{stop-color:var(--e-page-1)}.e-p2{stop-color:var(--e-page-2)}.e-p3{stop-color:var(--e-page-3)} .e-h1{stop-color:var(--e-halo-1)}.e-h2{stop-color:var(--e-halo-2)}.e-h3{stop-color:var(--e-halo-3)} .e-n1{stop-color:var(--e-pen-1)}.e-n2{stop-color:var(--e-pen-2)}.e-n3{stop-color:var(--e-pen-3)} .e-s1{stop-color:var(--e-shade-1)}.e-s2{stop-color:var(--e-shade-2)} .e-w1{stop-color:var(--e-sheen-1)}.e-w2{stop-color:var(--e-sheen-2)} .e-d1{stop-color:var(--e-dia-hot)}.e-d2{stop-color:var(--e-dia)} /* The ambient glow is absolutely positioned and the emblem is not, so without these two the glow paints OVER the whole emblem and swallows every pointer event aimed at the book. Found by hit-testing, not by looking. */ .emblem{width:min(88%,440px);aspect-ratio:1;margin-inline:auto;overflow:visible; position:relative;z-index:1} /* transform an already-rastered texture, do not re-raster dashed strokes */ .e-spin1,.e-spin2,.e-spinS{will-change:transform} .e-r1,.e-r2{stroke:url(#embEdge);fill:none} .e-r1{opacity:var(--e-ring1-o)}.e-r2{opacity:var(--e-ring2-o)} .e-geo{stroke:url(#embEdge);fill:none;opacity:var(--e-geo-o)} .e-mini{stroke:url(#embEdge);fill:none;opacity:.7} .e-dia path{fill:url(#embDia)} .e-emb{stroke:var(--e-emb)} .e-cartouche{stroke-width:1.15}.e-crown{stroke-width:1.15;filter:drop-shadow(0 3px 5px rgba(0,0,0,.15))} .e-page-filigree{stroke-width:.65;opacity:.38}.e-spine-jewel{filter:drop-shadow(0 4px 4px rgba(0,0,0,.2))} .e-spine-gem{filter:drop-shadow(0 0 5px rgba(243,224,166,.55))}.e-page-stack{transform-origin:200px 264px} /* ── ARRIVAL ─────────────────────────────────────────────────────────────── */ .e-halo,.e-orb,.e-mini,.e-book,.e-shade,.e-cartouche,.e-crown{opacity:0} @keyframes eIn{to{opacity:1}} /* 0.00-0.35 · the material settles */ .cpiece::before{content:"";position:absolute;width:min(100%,478px);aspect-ratio:1;border-radius:50%; background:var(--e-amb);opacity:0;pointer-events:none;z-index:0; animation:eIn .35s var(--paper-ease) 0s forwards} .e-halo{animation:eIn .35s var(--paper-ease) 0s forwards} /* 0.25-0.90 · the outer ring traces itself. 1200 > its 1169 circumference, so at offset 0 the dash closes the circle instead of leaving a hairline gap. */ .e-trace{stroke-dasharray:1200;stroke-dashoffset:1200; animation:eTrace .65s var(--paper-ease) .25s forwards} @keyframes eTrace{to{stroke-dashoffset:0}} /* 0.50-1.20 · the inner orbital lines resolve */ .e-orb{animation:eIn .7s var(--paper-ease) .5s forwards} .e-cartouche{animation:eRegaliaIn .75s var(--paper-ease) .72s forwards} @keyframes eRegaliaIn{from{opacity:0;transform:scale(.97)}to{opacity:.64;transform:scale(1)}} /* 0.90-1.45 · the diamonds illuminate one by one, each from its own centre */ .e-dia path{opacity:0;animation:eDiaIn .22s var(--paper-ease) forwards} @keyframes eDiaIn{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}} .dA path{transform-origin:200px 70px;animation-delay:.90s} .dB path{transform-origin:330px 200px;animation-delay:1.00s} .dC path{transform-origin:200px 330px;animation-delay:1.10s} .dD path{transform-origin:70px 200px;animation-delay:1.20s} /* 1.15-1.85 · the geometric construction */ .e-geo{animation:eGeoIn .7s var(--paper-ease) 1.15s both} @keyframes eGeoIn{from{opacity:0;transform:scale(.985)}to{opacity:var(--e-geo-o);transform:scale(1)}} .e-mini{animation:eIn .7s var(--paper-ease) 1.25s forwards} .e-crown{animation:eCrownIn .65s var(--paper-ease) 1.28s forwards;transform-origin:200px 110px} @keyframes eCrownIn{from{opacity:0;transform:translateY(5px) scale(.86)}to{opacity:.88;transform:none}} /* 1.50-2.10 · the book rises and settles, its shadow tightening beneath it */ .e-book{animation:eBookIn .6s var(--paper-ease) 1.5s forwards} @keyframes eBookIn{from{opacity:0;transform:translateY(9px) scale(.992)} to{opacity:1;transform:translateY(0) scale(1)}} .e-shade{animation:eShadeIn .6s var(--paper-ease) 1.5s forwards} @keyframes eShadeIn{from{opacity:0;transform:scaleX(1.08) scaleY(.7)}to{opacity:1;transform:none}} /* ── THE WRITING · not a typing effect and not a per-character fade ──────── Each line is revealed by a mask scaling from its RIGHT edge at a steady pen speed, so time maps to width and the letter-by-letter reading comes out of the letterforms rather than out of equal steps. A second copy in liquid gold is revealed by a narrow band travelling WITH the pen and clipped by the same mask: a stroke appears, glows 0.32-0.47s, then cools to its final ink. The glyphs are real Aref Ruqaa and Amiri, NOT vector-traced calligraphy; see design-system/EMBLEM.md for why, and for the drop-in swap. */ .e-ink text{letter-spacing:0} /* never letter-space connected Arabic */ .e-ln{fill:var(--e-ink);font-family:'Aref Ruqaa','Amiri',serif;font-weight:500;filter:drop-shadow(0 1px 0 rgba(255,255,255,.24))} .e-ln2{fill:var(--e-ink-2);font-family:'Amiri',serif;font-weight:600;filter:drop-shadow(0 1px 0 rgba(255,255,255,.2))} .e-hot{fill:var(--e-ink-hot)} .rv{transform:scaleX(0)} .rv1{transform-origin:267.4px 185px;animation:eWrite 1.10s linear 2.00s forwards} .rv2{transform-origin:183.4px 185px;animation:eWrite 1.10s linear 3.05s forwards} .rv3{transform-origin:249.2px 224px;animation:eWrite 1.45s linear 4.15s forwards} @keyframes eWrite{to{transform:scaleX(1)}} .hb1{animation:eHotA 1.10s linear 2.00s forwards} .hb2{animation:eHotB 1.10s linear 3.05s forwards} .hb3{animation:eHotC 1.45s linear 4.15s forwards} @keyframes eHotA{to{transform:translateX(-54.7px)}} @keyframes eHotB{to{transform:translateX(-46.7px)}} @keyframes eHotC{to{transform:translateX(-98.3px)}} .e-hot{opacity:0} .ho1{animation:eCool1 1.45s linear 2.00s forwards} .ho2{animation:eCool1 1.45s linear 3.05s forwards} .ho3{animation:eCool2 1.80s linear 4.15s forwards} @keyframes eCool1{0%{opacity:0}6%{opacity:1}75.9%{opacity:1}100%{opacity:0}} @keyframes eCool2{0%{opacity:0}5%{opacity:1}80.6%{opacity:1}100%{opacity:0}} /* ── THE WRITING POINT · gathers 1.70, writes, crosses, leaves 5.90 ──────── */ .e-pen{opacity:0;animation:ePen 4.2s linear 1.7s forwards} @keyframes ePen{ 0% {opacity:0;transform:translate(267.4px,186px) scale(.4)} /* 1.70 gathering */ 7.14% {opacity:1;transform:translate(267.4px,186px) scale(1)} /* 2.00 ready */ 33.33%{opacity:1;transform:translate(212.7px,186px) scale(1)} /* 3.10 «كتاب» done */ 34.05%{opacity:.5;transform:translate(183.4px,186px) scale(.78)} /* 3.13 crossed the spine */ 58.33%{opacity:1;transform:translate(136.7px,186px) scale(1)} /* 4.15 «وسنة» done */ 58.50%{opacity:.5;transform:translate(249.2px,225px) scale(.68)} /* 4.16 down a line */ 92.86%{opacity:1;transform:translate(150.9px,225px) scale(.74)} /* 5.60 last line done */ 100% {opacity:0;transform:translate(150.9px,225px) scale(.4)} /* 5.90 the light leaves */ } /* ── 5.55-6.20 · one ceremonial sweep across the book ───────────────────── */ .e-sweep{opacity:0;animation:eSweep .65s var(--paper-ease) 5.55s forwards} @keyframes eSweep{0%{opacity:0;transform:translateX(0)}18%{opacity:.55} 80%{opacity:.42}100%{opacity:0;transform:translateX(190px)}} /* ── THE CONTINUOUS ROYAL MOTION, from --e-idle ──────────────────────────── */ .e-spin1{animation:eSpin 120s linear var(--e-idle) infinite} .e-spin2{animation:eSpinR 155s linear var(--e-idle) infinite} .e-spinS{animation:eSpin 26s linear var(--e-idle) infinite} @keyframes eSpin{to{transform:rotate(360deg)}} @keyframes eSpinR{to{transform:rotate(-360deg)}} .e-spin1,.e-spin2,.e-spinS,.e-breathe{transform-origin:200px 200px} /* the star does not rotate. It breathes 0.8%, once every twelve seconds. */ .e-breathe{animation:eBreathe 12s var(--ease) var(--e-idle) infinite} @keyframes eBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.008)}} /* the book floats 3px; its shadow moves the other way and spreads, which is what a rising object does to the light beneath it */ .e-float{animation:eFloat 9.5s var(--ease) var(--e-idle) infinite} @keyframes eFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} .e-shadeF{animation:eShadeF 9.5s var(--ease) var(--e-idle) infinite;transform-origin:200px 288px} @keyframes eShadeF{0%,100%{transform:none;opacity:1} 50%{transform:translateY(1.5px) scaleX(1.035);opacity:.84}} /* the diamonds pulse in sequence — top, right, bottom, left, 0.9s apart — and then rest for ten seconds. They must never pulse together. */ .e-dia g{opacity:var(--e-dia-o);animation:eDiaPulse 14s var(--ease) infinite} .dA{animation-delay:var(--e-idle)} .dB{animation-delay:calc(var(--e-idle) + .9s)} .dC{animation-delay:calc(var(--e-idle) + 1.8s)} .dD{animation-delay:calc(var(--e-idle) + 2.7s)} @keyframes eDiaPulse{0%{opacity:var(--e-dia-o)}4%{opacity:1} 9%{opacity:var(--e-dia-o)}100%{opacity:var(--e-dia-o)}} /* two highlights on periods that do not divide each other — 11s on the book's gilding, 9s on a ring arc riding a 26s orbit — so it reads as occasional and slightly irregular, never as a shimmer */ .e-sheen{opacity:0;animation:eSheen 11s linear calc(var(--e-idle) + .2s) infinite} @keyframes eSheen{0%{opacity:0;transform:translateX(0)}1%{opacity:.34} 7%{opacity:.3}8.2%{opacity:0;transform:translateX(190px)} 100%{opacity:0;transform:translateX(190px)}} .e-spec{opacity:0;animation:eSpec 9s var(--ease) calc(var(--e-idle) + .4s) infinite} @keyframes eSpec{0%{opacity:0}4%{opacity:.8}12%{opacity:0}100%{opacity:0}} .e-crown-gem{transform-origin:200px 90px;animation:eGemPulse 8s var(--ease) var(--e-idle) infinite} .e-spine-gem{transform-origin:200px 249px;animation:eGemPulse 8s var(--ease) calc(var(--e-idle) + 1.1s) infinite} @keyframes eGemPulse{0%,12%,100%{opacity:.72;transform:scale(1)}5%{opacity:1;transform:scale(1.18)}} .e-page-stack--2{animation:ePageBreathe 10s var(--ease) var(--e-idle) infinite}.e-page-stack--3{animation:ePageBreathe 10s var(--ease) calc(var(--e-idle) + .35s) infinite} @keyframes ePageBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(1.5px)}} /* ── THE FULL ROYAL CHOREOGRAPHY ────────────────────────────────────────── Every visible piece participates, but no two material families move alike: metal catches light, paper settles, ink breathes, regalia keeps time. */ .e-cartouche{transform-origin:200px 200px;animation:eRegaliaIn .75s var(--paper-ease) .72s forwards, eCartoucheLive 18s var(--ease) var(--e-idle) infinite} @keyframes eCartoucheLive{0%,100%{opacity:.56;transform:scale(1)}50%{opacity:.78;transform:scale(1.006)}} .e-crown{animation:eCrownIn .65s var(--paper-ease) 1.28s forwards, eCrownLive 9s var(--ease) var(--e-idle) infinite} @keyframes eCrownLive{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}} .e-mini{transform-origin:200px 121px;animation:eIn .7s var(--paper-ease) 1.25s forwards, eMiniLive 11s var(--ease) var(--e-idle) infinite} @keyframes eMiniLive{0%,100%{opacity:.58;transform:scale(1)}50%{opacity:.88;transform:scale(1.035)}} .e-page-filigree{stroke-dasharray:90;stroke-dashoffset:90;animation:eFiligreeWrite 1.1s var(--paper-ease) 1.88s forwards, eFiligreeLive 12s var(--ease) var(--e-idle) infinite} @keyframes eFiligreeWrite{to{stroke-dashoffset:0}} @keyframes eFiligreeLive{0%,100%{opacity:.3}48%,55%{opacity:.62}} .e-spine-jewel{transform-origin:200px 255px;animation:eRibbonLive 10s var(--ease) var(--e-idle) infinite} @keyframes eRibbonLive{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.035)}} .e-ink{transform-origin:200px 206px;animation:eInkLive 13s var(--ease) var(--e-idle) infinite} @keyframes eInkLive{0%,100%{opacity:.94}50%{opacity:1}} .e-emb{animation:eEmbossLive 14s var(--ease) var(--e-idle) infinite} @keyframes eEmbossLive{0%,100%{opacity:.65}50%{opacity:1}} .e-gild{animation:eGildLive 11s var(--ease) var(--e-idle) infinite} @keyframes eGildLive{0%,100%{opacity:.08}6%{opacity:.42}14%{opacity:.08}} .e-hit{cursor:default} /* a few motes, slow and soft, and never outside the circle */ .e-parts circle{opacity:0;transform-origin:200px 200px;fill:var(--e-spark)} .p1{animation:eFloatUp 9s var(--ease) calc(var(--e-idle) + 1s) infinite} .p2{animation:eFloatUp 11s var(--ease) calc(var(--e-idle) + 1.9s) infinite} .p3{animation:eFloatUp 13s var(--ease) calc(var(--e-idle) + 3.2s) infinite} .p4{animation:eFloatUp 10s var(--ease) calc(var(--e-idle) + 4s) infinite} .p5{animation:eFloatUp 12s var(--ease) calc(var(--e-idle) + 4.9s) infinite} .p6{animation:eFloatUp 14s var(--ease) calc(var(--e-idle) + 6.1s) infinite} @keyframes eFloatUp{0%{opacity:0;transform:rotate(0) translateY(0) scale(.8)} 18%{opacity:.6}82%{opacity:.4} 100%{opacity:0;transform:rotate(150deg) translateY(-26px) scale(1)}} /* ── INTERACTION · the light source moved, the logo did not follow you ───── rings 1.5, construction 2.5, book 4 user units = at most 4.4 CSS px. The transition does the smoothing, not a rAF loop. Every <g> owns exactly ONE transform, so parallax, hover, float and entrance never fight. */ .px{transition:transform 300ms var(--paper-ease)} .e-lift{transition:transform var(--slow) var(--paper-ease)} .cpiece.hov .e-lift{transform:translateY(-2px)} .e-gild{opacity:0;transition:opacity var(--slow) var(--paper-ease)} .cpiece.hov .e-gild{opacity:.5} .cpiece.hov .e-gild{animation:none;opacity:.62} .e-hit{fill:transparent} /* the inscription never moves on hover. It is the content, not a control. */ /* ── returning to Home is a re-entry, not a repeat of the ceremony ───────── */ .cpiece.re{animation:eReentry .55s var(--paper-ease)} @keyframes eReentry{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}} /* ── scrolling means they are not watching: finish, and start the idle ──── */ .cpiece.res{--e-idle:0s} .cpiece.res .ea,.cpiece.res::before{animation-duration:1ms!important;animation-delay:0s!important} /* ── MOBILE · the whole identity, less expensive motion ─────────────────── */ @media(max-width:767px){ .emblem{width:min(86vw,420px)} .cpiece::before{width:min(96%,420px)} /* a smaller glow radius, per the brief */ /* three motes, not six — and animation:none too, because display:none alone leaves the animation scheduled and paying for frames nobody sees */ .p4,.p5,.p6{display:none;animation:none} .e-spec{animation:none} /* one reflection source, not two */ .px{transition:transform 220ms var(--paper-ease)} } /* ── a visitor who asked for less motion gets the finished emblem ────────── */ @media(prefers-reduced-motion:reduce){ .cpiece{--e-idle:0s} .emblem{animation:eSettle .42s var(--paper-ease) both} @keyframes eSettle{from{opacity:0}to{opacity:1}} .emblem .ea,.cpiece::before{animation-duration:1ms!important;animation-delay:0s!important} .e-spin1,.e-spin2,.e-spinS,.e-breathe,.e-float,.e-shadeF,.e-dia g, .e-sheen,.e-spec,.e-parts circle,.e-crown-gem,.e-spine-gem,.e-page-stack, .e-cartouche,.e-crown,.e-mini,.e-page-filigree,.e-spine-jewel,.e-ink,.e-emb,.e-gild{animation:none!important} .e-cartouche,.e-crown,.e-mini{opacity:.72}.e-page-filigree{stroke-dashoffset:0} .e-parts{display:none} .px,.e-lift,.e-gild{transition:none!important} } .cpiece{position:relative;display:grid;place-items:center} .float{animation:float 9s var(--ease) infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} /* ── cards / grids ── */ .grid{display:grid;gap:24px} .g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)} .gauto{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))} .card{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--surf); /* hover-lift buffer: the extra 6px of padding + negative margin keeps the pointer inside the box after it rises, so hover cannot oscillate. */ padding:var(--sp6) var(--sp6) calc(var(--sp6) + 6px);margin-bottom:-6px; box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 12px 30px rgba(0,0,0,.42); transition:transform var(--base) var(--paper-ease),box-shadow var(--base)} html[data-world="manuscript"] .card{box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 12px 26px rgba(90,70,30,.1)} .card::after{content:"";position:absolute;top:0;inset-inline:0;height:40%;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)} .card:hover{transform:translateY(-6px);box-shadow:0 26px 56px rgba(0,0,0,.55),0 0 0 1px rgba(200,167,91,.25)} html[data-world="manuscript"] .card:hover{box-shadow:0 20px 42px rgba(90,70,30,.16),0 0 0 1px rgba(156,122,52,.3)} .card .ci{width:40px;height:40px;color:var(--acc);margin-bottom:var(--sp5);position:relative} .card h3{margin-bottom:8px;position:relative} .card p{color:var(--txt2);font-size:14px;position:relative} .card .lnk{display:inline-flex;gap:7px;margin-top:var(--sp5);color:var(--acc-text);font-family:var(--font-ui);font-size:13px;position:relative} .card .lnk .arw{transition:transform var(--base) var(--paper-ease)} .card:hover .lnk .arw{transform:translateX(-5px)} html[data-lang="en"] .card:hover .lnk .arw{transform:translateX(5px)} /* ── list rows (sermons · responses) ── */ .rows{border-top:1px solid var(--edge)} .rowi{display:flex;align-items:center;gap:18px;padding:20px 6px;border-bottom:1px solid var(--edge); /* the marker border is always present (transparent) — colouring it costs no reflow */ border-inline-start:2px solid transparent; transition:background var(--base),border-color var(--base)} .rowi:hover{background:rgba(200,167,91,.055);border-inline-start-color:var(--acc)} .rowi .num{font-family:var(--font-ui);font-size:12px;color:var(--acc-text);width:34px;flex:none;letter-spacing:.08em} .rowi b{font-family:var(--font-head);font-weight:400;font-size:1.2rem;display:block;line-height:1.4} .rowi small{font-family:var(--font-ui);font-size:11.5px;color:var(--mut);display:block;margin-top:3px} .rowi .meta{margin-inline-start:auto;display:flex;align-items:center;gap:14px;flex:none} .rowi .arw{color:var(--acc)} /* ── discussions & responses · one register, two honest formats ── */ .response-register{display:grid;gap:14px;margin-top:34px} .response-entry{position:relative;display:grid;grid-template-columns:116px minmax(0,1fr) 176px;min-height:164px;overflow:hidden; border:1px solid var(--edge);border-inline-start:2px solid color-mix(in srgb,var(--acc) 48%,var(--edge));border-radius:var(--r-md); color:var(--txt);background:linear-gradient(105deg,color-mix(in srgb,var(--paper) 96%,var(--acc) 4%),var(--paper)); box-shadow:0 15px 40px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.045); transition:transform var(--slow) var(--paper-ease),border-color var(--base),box-shadow var(--slow)} .response-entry::after{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:var(--acc); transform:scaleY(0);transform-origin:center;transition:transform var(--slow) var(--paper-ease)} .response-entry:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 55%,var(--edge)); box-shadow:0 24px 58px rgba(0,0,0,.26),0 0 26px color-mix(in srgb,var(--acc) 7%,transparent)} .response-entry:hover::after{transform:scaleY(1)} .response-entry__number{display:grid;place-content:center;justify-items:center;border-inline-end:1px solid var(--edge); background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 10%,transparent),transparent)} .response-entry__number small{font-family:var(--font-ui);font-size:8.5px;letter-spacing:.16em;color:var(--mut)} .response-entry__number b{font-family:var(--font-display);font-size:1.6rem;font-weight:400;color:var(--acc-text);margin-top:9px} .response-entry__body{display:flex;min-width:0;flex-direction:column;justify-content:center;padding:24px 30px} .response-entry__type{display:flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:9.5px;letter-spacing:.12em;color:var(--acc-text)} .response-entry__type i{width:20px;height:1px;background:var(--acc)} .response-entry__body>strong{font-family:var(--font-head);font-size:clamp(1.25rem,1.8vw,1.62rem);font-weight:400;line-height:1.5;margin-top:12px} .response-entry__body>small{font-family:var(--font-ui);font-size:10.5px;color:var(--mut);margin-top:7px} .response-entry__claim{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;margin-top:12px;color:var(--txt2);font-size:13.5px} .response-entry__format{position:relative;display:grid;place-content:center;justify-items:center;border-inline-start:1px solid var(--edge); background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--acc) 12%,transparent),transparent 48%);font-family:var(--font-ui)} .response-entry__format::before{content:'';width:58px;height:58px;margin-bottom:12px;border:1px solid color-mix(in srgb,var(--acc) 60%,transparent); border-radius:50%;box-shadow:0 0 0 8px color-mix(in srgb,var(--acc) 5%,transparent)} .response-entry--recorded .response-entry__format::after{content:'▶';position:absolute;top:calc(50% - 23px);color:var(--acc);font-size:13px;transform:translateX(-1px)} .response-entry--written .response-entry__format::after{content:'✦';position:absolute;top:calc(50% - 27px);color:var(--acc);font-size:20px} .response-entry__edition{font-size:10px;color:var(--acc-text)}.response-entry .trust{display:none} .response-entry__format .arw{margin-top:7px;color:var(--acc);font-size:16px;transition:transform var(--base)} .response-entry:hover .response-entry__format .arw{transform:translateX(-6px)} html[data-world="manuscript"] .response-entry{box-shadow:0 14px 34px rgba(90,70,30,.1),inset 0 1px rgba(255,255,255,.8)} .discussion-format{display:inline-flex!important;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--edge);border-radius:999px; font-family:var(--font-ui);font-size:9.5px!important;color:var(--acc-text)!important} .discussion-format::before{content:'✦';font-size:8px}.discussion-format.is-recorded::before{content:'▶'} .discussion-media{position:relative;padding:10px;border:1px solid color-mix(in srgb,var(--acc) 42%,var(--edge));border-radius:var(--r-lg); background:linear-gradient(145deg,color-mix(in srgb,var(--paper) 96%,var(--acc) 4%),var(--paper));box-shadow:0 22px 60px rgba(0,0,0,.2)} .discussion-media::before,.discussion-media::after{content:'◆';position:absolute;z-index:2;color:var(--acc);font-size:7px;inset-inline:0;text-align:center;pointer-events:none} .discussion-media::before{top:2px}.discussion-media::after{bottom:2px} .discussion-media .ytf,.discussion-media .media-stage{border-radius:calc(var(--r-lg) - 8px)} @media(max-width:767px){ .response-register{gap:12px;margin-top:22px} .response-entry{grid-template-columns:52px minmax(0,1fr);min-height:160px} .response-entry__number small{display:none}.response-entry__number b{font-size:1.2rem;margin:0} .response-entry__body{padding:20px 17px}.response-entry__body>strong{font-size:1.12rem;margin-top:10px} .response-entry__claim{font-size:12.5px;margin-top:9px}.response-entry__format{grid-column:1/-1;display:flex;min-height:44px;border-inline-start:0;border-top:1px solid var(--edge);gap:8px} .response-entry__format::before,.response-entry__format::after{display:none}.response-entry__format .arw{margin:0} .discussion-media{padding:6px;margin-inline:-5px} } .trust{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-ui);font-size:9px;letter-spacing:.1em; text-transform:uppercase;border:1px solid rgba(200,167,91,.45);color:var(--acc-text);border-radius:999px;padding:3px 8px;white-space:nowrap} .trust.v{border-color:rgba(31,93,78,.65);color:#4f9d86} html[data-world="manuscript"] .trust.v{color:#1f5d4e} .chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:12px;border:1px solid var(--edge); border-radius:999px;padding:8px 15px;color:var(--txt2);white-space:nowrap;cursor:pointer; transition:color var(--base),border-color var(--base),background var(--base)} .chip:hover{border-color:var(--acc);color:var(--acc)} .chip.on{border-color:var(--acc);color:var(--acc);background:rgba(200,167,91,.08)} .filters{display:flex;gap:9px;flex-wrap:wrap;padding-block:18px;border-block:1px solid var(--edge);margin-bottom:var(--sp7)} /* ── books ── */ .book{display:flex;flex-direction:column;gap:12px;cursor:pointer} .book .cv{aspect-ratio:2/3;border-radius:7px;position:relative;overflow:hidden;border:1px solid rgba(200,167,91,.32); background:linear-gradient(150deg,#20201c,#111110);box-shadow:0 14px 32px rgba(0,0,0,.5); transition:transform var(--base) var(--paper-ease),box-shadow var(--base)} html[data-world="manuscript"] .book .cv{background:linear-gradient(150deg,#efe4cf,#e0d0ae);box-shadow:0 14px 28px rgba(90,70,30,.2)} .book:hover .cv{transform:translateY(-7px);box-shadow:0 26px 52px rgba(0,0,0,.6),var(--gold-glow)} .book .cv::before{content:"";position:absolute;inset:0;background:radial-gradient(130px 130px at 70% 18%,rgba(200,167,91,.2),transparent 60%)} .book .cv::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px; background:linear-gradient(var(--gold-antique),var(--gold-champagne),var(--gold-antique));opacity:.85} .book .sl{position:absolute;inset-inline:0;bottom:20px;text-align:center;font-family:var(--font-head); color:var(--gold-champagne);font-size:1.05rem;padding-inline:12px} html[data-world="manuscript"] .book .sl{color:#6a5220}/* 4.86:1 on the cover's lightest point */ .book .t{font-family:var(--font-head);font-size:1.1rem;line-height:1.4} .book .m{font-family:var(--font-ui);font-size:11.5px;color:var(--mut);display:flex;gap:9px;align-items:center} .book .m i{width:3px;height:3px;border-radius:50%;background:var(--acc);display:block;flex:none} /* ── the threshold: a wing announces itself before it shows anything ── */ .hall__thresh{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--acc);opacity:.85} .hall__thresh::before,.hall__thresh::after{content:"";height:1px;width:clamp(30px,10vw,110px); background:linear-gradient(to right,transparent,currentColor)} .hall__thresh::after{transform:scaleX(-1)} .hall__cer{font-family:var(--font-ui);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--mut);margin-top:10px} /* the halls stagger in, so the threshold lands before the content */ .hall__in>*{opacity:0;transform:translateY(14px);transition:opacity 1100ms var(--paper-ease),transform 1100ms var(--paper-ease)} .hall__in.in>*{opacity:1;transform:none} .hall__in.in>*:nth-child(1){transition-delay:0ms} .hall__in.in>*:nth-child(2){transition-delay:340ms} .hall__in.in>*:nth-child(3){transition-delay:540ms} .hall__in.in>*:nth-child(4){transition-delay:700ms} .hall__in.in>*:nth-child(5){transition-delay:840ms} .hall__in.in>*:nth-child(6){transition-delay:960ms} .hall__in.in>*:nth-child(7){transition-delay:1070ms} .hall__in.in>*:nth-child(8){transition-delay:1170ms} /* ── the museum map: I–VII, the current wing illuminated ── */ .mapRail{position:fixed;inset-inline-end:26px;top:50%;transform:translateY(-50%);z-index:55; display:grid;gap:16px;opacity:0;visibility:hidden;transition:opacity var(--base),visibility var(--base)} .mapRail.on{opacity:1;visibility:visible} .mapRail a{display:flex;align-items:center;gap:10px;justify-content:flex-end;color:var(--txt); font-family:var(--font-ui);font-size:9.5px;letter-spacing:.16em;text-decoration:none; /* engraved, not printed: an inactive wing is barely there */ opacity:.14;transition:opacity var(--slow) var(--paper-ease),color var(--slow)} .mapRail a i{width:32px;height:1px;background:currentColor;display:block; transform:scaleX(.375);transform-origin:var(--rail-o,left) center; transition:transform var(--slow) var(--paper-ease),background var(--slow)} html[dir="rtl"] .mapRail a i{--rail-o:right} .mapRail a.on{opacity:1;color:var(--acc)} .mapRail a.on i{transform:scaleX(1);background:var(--acc);box-shadow:0 0 10px rgba(200,167,91,.45)} .mapRail a:hover{opacity:.55} .mapRail:hover a{opacity:.34} .mapRail:hover a.on{opacity:1} @media(max-width:1100px){.mapRail{display:none}} /* ── the portrait accompanies, contextually ── */ .watermark{position:absolute;inset-block:0;inset-inline-end:-4%;width:min(46%,520px);pointer-events:none; opacity:.05;display:grid;place-items:center;z-index:0} .watermark svg{width:100%;height:auto;color:var(--engrave)} .signature{margin-top:44px;text-align:center;opacity:.7} .signature svg,.signature img{width:38px;height:38px;margin:0 auto 8px;display:block;object-fit:contain} .signature span{font-family:var(--font-display);font-size:15px;color:var(--txt2)} /* ══ the seal's construction, repeated everywhere it can be ══ Diamonds (45° squares) are the seal's core move. They now mark footnotes, pagination, callouts, image corners and loading — so the identity is structural rather than decorative. */ .mk-diamond{display:inline-block;width:7px;height:7px;border:1px solid var(--acc);transform:rotate(45deg);flex:none} .fn{font-size:.62em;vertical-align:super;color:var(--acc-text);position:relative;padding-inline:3px} .fn::before{content:"";position:absolute;inset-inline-start:-2px;top:.35em;width:4px;height:4px; border:1px solid var(--acc);transform:rotate(45deg);opacity:.5} .callout{position:relative;border:1px solid var(--edge);border-radius:var(--r-md);padding:22px 24px;background:var(--surf)} .callout::before,.callout::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--acc);opacity:.5} .callout::before{top:-1px;inset-inline-start:-1px;border-inline-end:0;border-block-end:0} .callout::after{bottom:-1px;inset-inline-end:-1px;border-inline-start:0;border-block-start:0} .frame{position:relative;padding:10px} .frame::before,.frame::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--acc);opacity:.45} .frame::before{top:0;inset-inline-start:0;border-inline-end:0;border-block-end:0} .frame::after{bottom:0;inset-inline-end:0;border-inline-start:0;border-block-start:0} .pager{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:var(--sp7)} .pager a,.pager span{width:38px;height:38px;display:grid;place-items:center;font-family:var(--font-ui);font-size:13px; color:var(--txt2);border:1px solid var(--edge);transform:rotate(45deg)} .pager a>*,.pager span>*{transform:rotate(-45deg)} .pager .cur{border-color:var(--acc);color:var(--acc);background:rgba(200,167,91,.08)} .loader{width:34px;height:34px;border:1px solid var(--acc);transform:rotate(45deg);animation:sealspin 2.4s linear infinite;opacity:.7} @keyframes sealspin{to{transform:rotate(405deg)}} /* ── مكتب اليوم · Today's Desk — the curator has laid out today's reading ── */ .living{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--edge); border-block:1px solid var(--edge)} .living a{background:var(--bg);padding:24px 22px;transition:background var(--base)} .living a:hover{background:rgba(200,167,91,.05)} .living .k{font-family:var(--font-ui);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--acc-text)} .living .v{font-family:var(--font-head);font-size:1.15rem;line-height:1.5;margin-top:10px} .living .s{font-family:var(--font-ui);font-size:11px;color:var(--mut);margin-top:8px} @media(max-width:767px){.living{grid-template-columns:1fr}} /* ══ THE CITATION LAYER — for a scholarly archive, citing is part of the experience ══ */ .cite{position:relative;border:1px solid rgba(200,167,91,.34);border-radius:var(--r-lg);background:var(--surf); padding:26px 26px 22px;margin-top:var(--sp7)} .cite::before,.cite::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--acc);opacity:.55} .cite::before{top:-1px;inset-inline-start:-1px;border-inline-end:0;border-block-end:0} .cite::after{bottom:-1px;inset-inline-end:-1px;border-inline-start:0;border-block-start:0} .cite__h{display:flex;align-items:center;gap:12px} .cite__h .mk-diamond{width:9px;height:9px} .cite__h b{font-family:var(--font-head);font-weight:400;font-size:1.25rem} .cite__h small{margin-inline-start:auto;font-family:var(--font-ui);font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--mut)} .cite__tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px} .cite__tabs button{font-family:var(--font-ui);font-size:11.5px;letter-spacing:.06em;color:var(--txt2); border:1px solid var(--edge);border-radius:999px;padding:7px 15px;min-height:38px; transition:color var(--base),border-color var(--base),background var(--base)} .cite__tabs button.on{color:var(--acc);border-color:var(--acc);background:rgba(200,167,91,.08)} .cite__out{margin-top:16px;background:var(--paper);border:1px solid var(--edge);border-radius:var(--r-md); padding:16px 18px;font-family:'Inter',ui-monospace,monospace;font-size:12.5px;line-height:1.85; color:var(--txt2);white-space:pre-wrap;word-break:break-word;direction:ltr;text-align:left;min-height:86px} .cite__foot{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap} .cite__copy{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:13px; border:1px solid rgba(200,167,91,.5);border-radius:var(--r-md);padding:11px 20px;min-height:44px;color:var(--acc); transition:background var(--base),border-color var(--base)} .cite__copy:hover{background:rgba(200,167,91,.1)} .cite__copy.done{border-color:var(--emerald);color:#4f9d86} html[data-world="manuscript"] .cite__copy.done{color:#1f5d4e} .cite__note{font-family:var(--font-ui);font-size:11px;color:var(--mut)} /* ══ THE HALL OF LIFE — an exhibition, not a profile ══ */ .act{padding-block:var(--sp8);border-top:1px solid var(--edge)} .act:first-of-type{border-top:0} .act__n{display:flex;align-items:center;gap:12px;color:var(--acc-text);font-family:var(--font-ui); font-size:10px;letter-spacing:.3em;text-transform:uppercase} .act h2{margin:14px 0 18px} .act .words{font-family:var(--font-display);font-size:clamp(1.4rem,1rem+1.6vw,2.1rem);line-height:1.75; text-align:center;max-width:24ch;margin-inline:auto} .people{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px} .person{border:1px solid var(--edge);border-radius:var(--r-md);padding:18px;text-align:center} .person .ini{width:44px;height:44px;margin:0 auto 12px;border:1px solid var(--acc);transform:rotate(45deg); display:grid;place-items:center;color:var(--acc)} .person .ini span{transform:rotate(-45deg);font-family:var(--font-head);font-size:1.1rem} .person b{font-family:var(--font-head);font-weight:400;font-size:1.05rem;display:block} .person small{font-family:var(--font-ui);font-size:11px;color:var(--mut)} /* ── the hidden layer: press and hold the seal ── */ .soul{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:24px; opacity:0;visibility:hidden;transition:opacity var(--slow),visibility 0s linear var(--slow)} .soul.open{opacity:1;visibility:visible;transition:opacity var(--slow),visibility 0s linear 0s} .soul .scrim{position:absolute;inset:0;background:rgba(3,3,3,.86);-webkit-backdrop-filter:blur(14px)} html[data-world="manuscript"] .soul .scrim{background:rgba(58,46,24,.5)} .soul .box{position:relative;max-width:640px;text-align:center;padding:40px 28px} .soul svg.seal,.soul img.seal{width:64px;height:64px;margin:0 auto 22px;display:block;object-fit:contain} .soul h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,1.1rem+1.6vw,2.2rem);line-height:1.5} .soul p{color:var(--txt2);font-size:14.5px;line-height:1.95;margin-top:18px} .soul .arts{display:grid;gap:8px;margin-top:24px;text-align:start} .soul .arts div{font-family:var(--font-ui);font-size:12.5px;color:var(--txt2); border-inline-start:2px solid var(--acc);padding-inline-start:12px} .soul .close{margin-top:28px;font-family:var(--font-ui);font-size:11px;letter-spacing:.24em; text-transform:uppercase;color:var(--mut)} /* ══════════════ THE SEVEN HALLS ══════════════ Each wing occupies (almost) a full viewport and carries its own light. The hue never changes — only the light, the geometry and the pace. */ .halls{scroll-snap-type:y proximity} .hall{position:relative;min-height:86vh;min-height:86svh;content-visibility:auto;contain-intrinsic-size:auto 700px;display:grid;place-items:center;text-align:center; scroll-snap-align:center;border-top:1px solid var(--edge);overflow:hidden} .hall:first-of-type{border-top:0} .hall__glow{position:absolute;inset:0;pointer-events:none;opacity:.9} .hall__in{position:relative;z-index:2;padding-block:var(--sp9)} .hall__num{font-family:var(--font-ui);font-size:10.5px;letter-spacing:.4em;color:var(--acc-text);opacity:.85} .hall__sym{width:64px;height:64px;margin:22px auto 0;display:block;color:var(--acc);filter:var(--emb)} .hall__ar{font-family:var(--font-display);font-weight:400;font-size:clamp(2.1rem,1.4rem+2.6vw,3.4rem); line-height:1.2;margin-top:24px} .hall__en{font-family:var(--font-ui);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase; color:var(--mut);margin-top:14px} .hall__desc{color:var(--txt2);font-size:15px;max-width:44ch;margin:18px auto 0;line-height:1.9} .hall__meta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px} .hall__meta span{font-family:var(--font-ui);font-size:11.5px;color:var(--mut); border:1px solid var(--edge);border-radius:999px;padding:6px 14px} .hall__meta b{color:var(--acc-text);font-weight:500} .hall__enter{display:inline-flex;align-items:center;gap:9px;margin-top:30px;font-family:var(--font-ui); font-size:14px;color:var(--acc-text);border-bottom:1px solid transparent;padding-bottom:4px; transition:border-color var(--base),gap var(--base)} .hall:hover .hall__enter{border-bottom-color:var(--acc);gap:14px} /* per-hall light: position, spread and geometry differ — never the hue */ [data-hall="library"] .hall__glow{background:radial-gradient(620px 420px at 50% 42%,rgba(200,167,91,.11),transparent 66%)} [data-hall="lectures"] .hall__glow{background:radial-gradient(360px 300px at 50% 16%,rgba(200,167,91,.16),transparent 62%), linear-gradient(180deg,rgba(0,0,0,.28),transparent 46%)} [data-hall="responses"] .hall__glow{background:linear-gradient(180deg,transparent,rgba(200,167,91,.05) 50%,transparent), repeating-linear-gradient(to bottom,transparent 0 38px,rgba(200,167,91,.05) 38px 39px)} [data-hall="pulpit"] .hall__glow{background:radial-gradient(300px 640px at 50% 50%,rgba(200,167,91,.12),transparent 68%)} [data-hall="academy"] .hall__glow{background:radial-gradient(760px 300px at 50% 88%,rgba(200,167,91,.10),transparent 68%), repeating-linear-gradient(to right,transparent 0 96px,rgba(200,167,91,.045) 96px 97px)} [data-hall="treasury"] .hall__glow{background:radial-gradient(220px 220px at 50% 38%,rgba(227,201,138,.20),transparent 64%)} [data-hall="fatwas"] .hall__glow{background:linear-gradient(180deg,rgba(200,167,91,.06),transparent 40%), repeating-linear-gradient(to bottom,transparent 0 30px,rgba(200,167,91,.045) 30px 31px)} @media(max-width:767px){ .hall{min-height:82svh} .hall__sym{width:52px;height:52px} } /* ── subject-first library (knowledge before objects) ── */ .subjects{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--edge); border-block:1px solid var(--edge);margin-block:var(--sp7)} /* Six subjects, not three: 3x2 desktop, 2x3 on the reading tier, one column in the pocket. The hairline gap is the divider, so the grid must stay gap:1px. */ .subject .nm{text-wrap:balance} .subject{background:var(--bg);padding:34px 26px;text-align:center;cursor:pointer; transition:background var(--base)} .subject:hover,.subject.on{background:rgba(200,167,91,.06)} .subject .nm{font-family:var(--font-display);font-size:clamp(1.5rem,1.1rem+1.4vw,2.1rem)} .subject .ct{font-family:var(--font-ui);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--mut);margin-top:12px} .subject .ct b{color:var(--acc-text);font-family:var(--font-display);font-size:1.5rem;display:block; letter-spacing:0;margin-bottom:4px} @media(max-width:767px){.subjects{grid-template-columns:1fr}} /* ── fatwa: question → evidence → answer → references ── */ .fatwa .ev{margin-top:12px;padding-inline-start:40px;font-family:var(--font-naskh);font-size:14px; color:var(--txt2);border-inline-start:2px solid var(--edge);margin-inline-start:14px;padding-block:4px} .fatwa .refs{margin-top:10px;padding-inline-start:40px;display:flex;gap:8px;flex-wrap:wrap} .fatwa .refs span{font-family:var(--font-ui);font-size:10.5px;color:var(--mut); border:1px solid var(--edge);border-radius:6px;padding:4px 9px} .fatwa .lbl{font-family:var(--font-ui);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--acc-text);display:block;margin-bottom:4px} /* ── video (الدروس والمحاضرات) ── */ /* ══ THE YOUTUBE FACADE ════════════════════════════════════════════════════ A live YouTube iframe costs roughly 500 KB - 1 MB of third-party JavaScript PER EMBED, at page load, before anyone asks for it. Ten on a page would undo the whole performance programme. So a facade paints first — and it is drawn in CSS, never from i.ytimg.com, because a remote thumbnail is itself a third-party request and would break the same promise it is meant to keep. The iframe is inserted on the click, and only once. Same "mounts on intent" rule the lecture room's <video> already follows. */ .ytf{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r-md); overflow:hidden;cursor:pointer;border:1px solid var(--edge); background:radial-gradient(150px 120px at 68% 24%,rgba(200,167,91,.18),transparent 62%), linear-gradient(180deg,#131313,#090909)} html[data-world="manuscript"] .ytf{background:radial-gradient(150px 120px at 68% 24%,rgba(156,122,52,.16),transparent 62%), linear-gradient(180deg,#efe7d6,#e3d9c2)} .ytf__p{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;border:0} .ytf__play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%; border:1px solid var(--acc);color:var(--acc);display:grid;place-items:center; background:rgba(0,0,0,.3);transition:transform var(--base) var(--paper-ease),background var(--base)} html[data-world="manuscript"] .ytf__play{background:rgba(255,255,255,.34)} .ytf:hover .ytf__play{transform:scale(1.06);background:rgba(200,167,91,.18)} .ytf__play svg{width:22px;height:22px;margin-inline-start:3px} .ytf__t{position:absolute;bottom:0;inset-inline:0;padding:14px 16px;text-align:start; font-family:var(--font-head);font-size:1rem;color:var(--txt); background:linear-gradient(0deg,rgba(0,0,0,.72),transparent)} html[data-world="manuscript"] .ytf__t{color:#2d2418;background:linear-gradient(0deg,rgba(240,233,218,.9),transparent)} .ytf__d{position:absolute;top:10px;inset-inline-end:10px;font-family:var(--font-ui);font-size:10.5px; padding:3px 7px;border-radius:5px;background:rgba(0,0,0,.66);color:#e8e4dc} html[data-world="manuscript"] .ytf__d{background:rgba(45,36,24,.8)} /* --mut measured 3.27:1 over the facade's darkened stage — under AA. The stage is darker than any --paper surface, so this label needs the brighter ink. */ .ytf__src{position:absolute;top:10px;inset-inline-start:10px;font-family:var(--font-ui);font-size:9.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--txt2)} .ytf iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* One calm, compact cinema frame everywhere: YouTube, uploaded recordings and course lessons. Portrait files are letterboxed instead of making the page as tall as the original phone recording. */ .ytf,video.vid,.series-video{width:min(100%,760px);aspect-ratio:16/9;margin-inline:auto;background:#080704} video.vid,.series-video{display:block;height:auto;object-fit:contain} .media-player{position:relative;width:min(100%,760px);aspect-ratio:16/9;margin-inline:auto;overflow:hidden;border-radius:var(--r-md);background:#080704;box-shadow:0 22px 54px rgba(0,0,0,.28),0 0 0 1px color-mix(in srgb,var(--acc) 32%,transparent)} .media-player video.vid{width:100%;height:100%;margin:0;border-radius:inherit;object-fit:contain} .media-player__play{position:absolute;inset:50% auto auto 50%;translate:-50% -50%;width:72px;height:72px;border:1px solid color-mix(in srgb,var(--acc) 72%,white);border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(12,10,7,.68);backdrop-filter:blur(10px);box-shadow:0 10px 32px rgba(0,0,0,.38),inset 0 0 0 5px rgba(255,255,255,.035);transition:transform var(--fast),opacity var(--fast),background var(--fast);z-index:3} .media-player__play span{font-size:25px;margin-inline-start:4px}.media-player__play:hover{transform:scale(1.07);background:color-mix(in srgb,var(--acc) 42%,rgba(12,10,7,.82))} .media-player.is-started .media-player__play{opacity:0;pointer-events:none} .media-player__share{position:absolute;z-index:4;top:14px;inset-inline-end:14px;width:42px;height:42px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(12,10,7,.66);backdrop-filter:blur(10px);transition:transform var(--fast),background var(--fast)} .media-player__share:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--acc) 40%,rgba(12,10,7,.78))}.media-player__share svg{width:19px;height:19px} .media-player__notice{position:absolute;z-index:5;top:64px;inset-inline-end:14px;max-width:220px;padding:7px 10px;border-radius:8px;background:rgba(12,10,7,.82);color:#fff;font-family:var(--font-ui);font-size:11px;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity var(--fast),transform var(--fast)} .media-player__notice.on{opacity:1;transform:none} .artifact-share{position:fixed;z-index:70;inset-inline-start:22px;bottom:24px;display:flex;align-items:center;gap:9px;padding:11px 16px;border:1px solid color-mix(in srgb,var(--acc) 65%,var(--edge));border-radius:999px;background:color-mix(in srgb,var(--paper) 92%,transparent);color:var(--acc-text);font-family:var(--font-ui);box-shadow:0 14px 38px rgba(0,0,0,.22);backdrop-filter:blur(14px)} .artifact-share svg{width:18px;height:18px}.artifact-share:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(0,0,0,.28),var(--gold-glow)} .share-sheet[hidden]{display:none}.share-sheet{position:fixed;inset:0;z-index:120;display:grid;place-items:end center;padding:18px}.share-sheet__backdrop{position:absolute;inset:0;background:rgba(5,4,3,.68);backdrop-filter:blur(7px)} .share-sheet__panel{position:relative;width:min(100%,620px);padding:24px;border:1px solid color-mix(in srgb,var(--acc) 58%,var(--edge));border-radius:22px;background:var(--paper);box-shadow:0 28px 90px rgba(0,0,0,.42)} .share-sheet__head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.share-sheet__head h2{font-family:var(--font-display);font-weight:400}.share-sheet__close{width:38px;height:38px;border:1px solid var(--edge);border-radius:50%;color:var(--txt);background:transparent} .share-sheet__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.share-sheet__grid a,.share-sheet__grid button{display:grid;place-items:center;min-height:54px;padding:9px;border:1px solid var(--edge);border-radius:12px;background:var(--paper2);color:var(--txt);font-family:var(--font-ui);text-decoration:none}.share-sheet__grid a:hover,.share-sheet__grid button:hover{border-color:var(--acc);color:var(--acc-text)} .share-sheet__copy{display:flex;gap:8px;margin-top:14px}.share-sheet__copy input{min-width:0;flex:1;direction:ltr}.share-sheet__copy button{padding-inline:16px;border:1px solid var(--acc);border-radius:9px;color:var(--acc-text);background:transparent} @media(max-width:600px){.artifact-share{inset-inline-start:14px;bottom:calc(var(--mobile-dock,0px) + 18px)}.artifact-share span{display:none}.artifact-share{width:46px;height:46px;padding:0;justify-content:center}.share-sheet__grid{grid-template-columns:repeat(2,1fr)}} html[data-world="manuscript"] .media-player{box-shadow:0 22px 52px rgba(83,58,19,.2),0 0 0 1px color-mix(in srgb,var(--acc) 50%,transparent)} /* when the recording is not published yet, the facade says so rather than handing the visitor a broken YouTube player */ .ytf__na{position:absolute;inset:0;display:none;place-items:center;padding:22px;text-align:center; background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.66))} html[data-world="manuscript"] .ytf__na{background:linear-gradient(180deg,rgba(241,235,221,.7),rgba(227,217,194,.86))} .ytf.na .ytf__na{display:grid} .ytf.na .ytf__play,.ytf.na .ytf__t{opacity:.25} .ytf__na b{display:block;font-family:var(--font-display);font-size:1.15rem;color:var(--txt);font-weight:400} .ytf__na span{display:block;font-family:var(--font-ui);font-size:11.5px;color:var(--mut);margin-top:8px;max-width:44ch} /* a lesson in a series */ .lesson{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center; padding:16px 8px;border-bottom:1px solid var(--edge);cursor:pointer;text-align:start;width:100%; border-inline-start:2px solid transparent;transition:background var(--base),border-color var(--base)} .lesson:hover{background:rgba(200,167,91,.05);border-inline-start-color:var(--acc)} .lesson.on{background:rgba(200,167,91,.08);border-inline-start-color:var(--acc)} .lesson[aria-current="true"]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent)} .lesson .no{font-family:var(--font-ui);font-size:12px;color:var(--acc-text);letter-spacing:.06em} .lesson b{font-family:var(--font-head);font-weight:400;font-size:1.1rem;display:block;line-height:1.4} .lesson small{font-family:var(--font-ui);font-size:11px;color:var(--mut);display:block;margin-top:3px} .lesson .tm{font-family:var(--font-ui);font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums} .vid{display:flex;flex-direction:column;gap:12px;cursor:pointer} .vid .thumb{aspect-ratio:16/10;border-radius:var(--r-md);position:relative;overflow:hidden; border:1px solid rgba(200,167,91,.28);background:linear-gradient(150deg,#1d1d19,#111110); box-shadow:0 12px 28px rgba(0,0,0,.45);transition:transform var(--base) var(--paper-ease),box-shadow var(--base)} html[data-world="manuscript"] .vid .thumb{background:linear-gradient(150deg,#eee5d2,#e2d7ba);box-shadow:0 12px 24px rgba(90,70,30,.16)} .vid:hover .thumb{transform:translateY(-6px);box-shadow:0 24px 46px rgba(0,0,0,.55),var(--gold-glow)} .vid .thumb::before{content:"";position:absolute;inset:0;background:radial-gradient(150px 120px at 68% 24%,rgba(200,167,91,.18),transparent 62%)} .vid .play{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%; border:1px solid rgba(200,167,91,.6);display:grid;place-items:center;color:var(--acc); background:rgba(10,10,10,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} html[data-world="manuscript"] .vid .play{background:rgba(255,253,249,.5)} .vid .play svg{width:18px;height:18px;margin-inline-start:3px} .vid .dur{position:absolute;bottom:9px;inset-inline-end:9px;font-family:var(--font-ui);font-size:10.5px; background:rgba(8,8,8,.72);color:#e9e3d4;border-radius:6px;padding:3px 7px} html[data-world="manuscript"] .vid .dur{background:rgba(45,36,24,.8)} .vid .t{font-family:var(--font-head);font-size:1.12rem;line-height:1.4} .vid .m{font-family:var(--font-ui);font-size:11.5px;color:var(--mut);display:flex;gap:9px;align-items:center;flex-wrap:wrap} /* ── lessons archive · a scholarly register, not a wall of video players ── */ .lesson-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px} .lesson-entry{position:relative;isolation:isolate;min-height:222px;display:grid;grid-template-columns:76px minmax(0,1fr) 152px; overflow:hidden;border:1px solid color-mix(in srgb,var(--edge) 84%,var(--acc));border-radius:var(--r-md);color:var(--txt); background:linear-gradient(120deg,color-mix(in srgb,var(--paper) 94%,var(--acc) 6%),var(--paper)); box-shadow:0 18px 46px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.045); transition:transform var(--slow) var(--paper-ease),border-color var(--base),box-shadow var(--slow)} .lesson-entry::before,.lesson-entry::after{content:'';position:absolute;z-index:2;width:20px;height:20px;pointer-events:none; border-color:color-mix(in srgb,var(--acc) 58%,transparent);border-style:solid;transition:width var(--slow),height var(--slow)} .lesson-entry::before{inset-block-start:9px;inset-inline-start:9px;border-width:1px 0 0 1px} .lesson-entry::after{inset-block-end:9px;inset-inline-end:9px;border-width:0 1px 1px 0} html[dir="rtl"] .lesson-entry::before{border-width:1px 1px 0 0}html[dir="rtl"] .lesson-entry::after{border-width:0 0 1px 1px} .lesson-entry:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--acc) 62%,var(--edge)); box-shadow:0 28px 64px rgba(0,0,0,.3),0 0 34px color-mix(in srgb,var(--acc) 8%,transparent)} .lesson-entry:hover::before,.lesson-entry:hover::after{width:38px;height:38px} .lesson-entry__number{display:grid;align-content:center;justify-items:center;border-inline-end:1px solid var(--edge); background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 10%,transparent),transparent)} .lesson-entry__number small{font-family:var(--font-ui);font-size:8px;letter-spacing:.16em;color:var(--mut);writing-mode:vertical-rl} .lesson-entry__number b{font-family:var(--font-display);font-size:1.65rem;font-weight:400;color:var(--acc-text);margin-top:12px} .lesson-entry__body{position:relative;z-index:3;display:flex;min-width:0;flex-direction:column;justify-content:center;padding:26px 24px} .lesson-entry__eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:9.5px;letter-spacing:.12em;color:var(--acc-text)} .lesson-entry__eyebrow i{display:block;width:18px;height:1px;background:var(--acc);transition:width var(--base)} .lesson-entry:hover .lesson-entry__eyebrow i{width:32px} .lesson-entry__title{display:block;font-family:var(--font-head);font-size:clamp(1.2rem,1.55vw,1.48rem);font-weight:400; line-height:1.55;margin-top:14px;text-wrap:balance} .lesson-entry__meta{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-top:13px;font-family:var(--font-ui);font-size:10.5px;color:var(--mut)} .lesson-entry__meta>span+span::before{content:'◆';font-size:5px;color:var(--acc);margin-inline-end:10px;vertical-align:middle} .lesson-entry__duration{font-variant-numeric:tabular-nums;color:var(--txt2)} .lesson-entry__enter{display:flex;align-items:center;gap:9px;margin-top:21px;font-family:var(--font-ui);font-size:11px;color:var(--acc-text)} .lesson-entry__enter b{font-size:17px;font-weight:400;transition:transform var(--base) var(--paper-ease)} .lesson-entry:hover .lesson-entry__enter b{transform:translateX(-7px)} html[dir="ltr"] .lesson-entry__enter b{transform:scaleX(-1)}html[dir="ltr"] .lesson-entry:hover .lesson-entry__enter b{transform:scaleX(-1) translateX(-7px)} .lesson-entry__media{position:relative;display:grid;place-items:center;overflow:hidden;border-inline-start:1px solid var(--edge); background-image:linear-gradient(145deg,rgba(8,7,5,.2),rgba(8,7,5,.76)),var(--lesson-poster,none), radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--acc) 18%,transparent),transparent 44%); background-size:cover;background-position:center} .lesson-entry__media::before{content:'';position:absolute;inset:12px;border:1px solid color-mix(in srgb,var(--acc) 25%,transparent)} .lesson-entry__orbit{position:relative;width:64px;height:64px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--acc) 70%,transparent); border-radius:50%;color:var(--acc);background:color-mix(in srgb,var(--paper) 72%,transparent);backdrop-filter:blur(6px); box-shadow:0 0 0 8px color-mix(in srgb,var(--acc) 6%,transparent);transition:transform var(--slow) var(--paper-ease),box-shadow var(--slow)} .lesson-entry__orbit::before,.lesson-entry__orbit::after{content:'◆';position:absolute;font-size:6px;color:var(--acc)} .lesson-entry__orbit::before{top:-15px}.lesson-entry__orbit::after{bottom:-15px} .lesson-entry__orbit i{position:absolute;inset:-17px;border:1px dashed color-mix(in srgb,var(--acc) 30%,transparent);border-radius:50%;animation:lessonOrbit 18s linear infinite} .lesson-entry__orbit b{font-size:14px;margin-inline-start:3px} .lesson-entry__media.is-written .lesson-entry__orbit b{font-size:20px;margin:0}.lesson-entry__media.is-written .lesson-entry__wave{opacity:.28} .lesson-entry:hover .lesson-entry__orbit{transform:scale(1.08);box-shadow:0 0 0 11px color-mix(in srgb,var(--acc) 9%,transparent),0 0 28px color-mix(in srgb,var(--acc) 20%,transparent)} .lesson-entry__wave{position:absolute;inset-inline:18px;bottom:22px;height:12px;display:flex;align-items:center;justify-content:center;gap:3px;opacity:.55} .lesson-entry__wave i{display:block;width:1px;height:4px;background:var(--acc);animation:lessonWave 1.8s ease-in-out infinite} .lesson-entry__wave i:nth-child(2),.lesson-entry__wave i:nth-child(4){height:10px;animation-delay:-.5s}.lesson-entry__wave i:nth-child(3){height:7px;animation-delay:-1s} html[data-world="manuscript"] .lesson-entry{box-shadow:0 16px 38px rgba(89,65,22,.1),inset 0 1px rgba(255,255,255,.8)} html[data-world="manuscript"] .lesson-entry__media{background-image:linear-gradient(145deg,rgba(245,237,218,.18),rgba(83,58,18,.42)),var(--lesson-poster,none),radial-gradient(circle,color-mix(in srgb,var(--acc) 16%,transparent),transparent 58%)} @keyframes lessonOrbit{to{transform:rotate(360deg)}} @keyframes lessonWave{0%,100%{transform:scaleY(.45);opacity:.45}50%{transform:scaleY(1);opacity:1}} @media(max-width:1099px){.lesson-catalog{grid-template-columns:minmax(0,1fr)}} @media(max-width:767px){ .lesson-catalog{gap:12px;margin-top:22px} .lesson-entry{min-height:174px;grid-template-columns:48px minmax(0,1fr) 92px;border-radius:12px} .lesson-entry__number small{display:none}.lesson-entry__number b{font-size:1.3rem;margin:0} .lesson-entry__body{padding:20px 16px}.lesson-entry__title{font-size:1.08rem;margin-top:10px;line-height:1.55} .lesson-entry__meta{margin-top:9px;font-size:9.5px;gap:6px 9px}.lesson-entry__enter{margin-top:14px;font-size:10px} .lesson-entry__media::before{inset:8px}.lesson-entry__orbit{width:46px;height:46px}.lesson-entry__orbit i{inset:-10px} .lesson-entry__wave{display:none} } /* ── fatwa (Q → A) ── */ .fatwa{border-bottom:1px solid var(--edge);padding:22px 4px} .fatwa .q{display:flex;gap:12px;align-items:flex-start} .fatwa .q i{font-style:normal;color:var(--acc-text);font-family:var(--font-head);font-size:1.1rem;flex:none; width:28px;height:28px;border:1px solid rgba(200,167,91,.4);border-radius:50%;display:grid;place-items:center;font-size:13px} .fatwa .q b{font-family:var(--font-head);font-weight:400;font-size:1.18rem;line-height:1.5} .fatwa .a{margin-top:12px;padding-inline-start:40px;color:var(--txt2);font-size:14.5px;line-height:1.85} html[dir="ltr"] .fatwa .a{padding-inline-start:40px} .fatwa .meta{margin-top:12px;padding-inline-start:40px;display:flex;gap:12px;align-items:center;flex-wrap:wrap} /* ── benefit cards (الفوائد العلمية) ── */ .fayda{position:relative;border-radius:var(--r-lg);padding:24px;background:var(--surf); box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 10px 26px rgba(0,0,0,.38)} html[data-world="manuscript"] .fayda{box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 10px 22px rgba(90,70,30,.1)} .fayda .n{font-family:var(--font-ui);font-size:10.5px;letter-spacing:.14em;color:var(--acc-text)} .fayda p{font-family:var(--font-naskh);font-size:15.5px;line-height:1.9;margin-top:10px} .fayda .src{margin-top:14px;font-family:var(--font-ui);font-size:11px;color:var(--mut)} /* ── stats ── */ .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;border-block:1px solid var(--edge);padding-block:var(--sp8)} .stat{text-align:center} .stat b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(2.2rem,1.5rem+2vw,3.4rem); line-height:1;color:var(--acc)} .stat span{font-family:var(--font-ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)} /* ── portrait plate (emerges) ── */ .plate{position:relative;width:min(100%,300px);aspect-ratio:4/5;border-radius:5px;overflow:hidden; background:linear-gradient(160deg,#1b1a16,#100f0d);border:1px solid rgba(200,167,91,.22); box-shadow:0 0 0 9px rgba(0,0,0,.24),0 0 0 10px rgba(200,167,91,.08),0 26px 50px rgba(0,0,0,.5)} html[data-world="manuscript"] .plate{background:linear-gradient(160deg,#f2ebdb,#e5dbc2);border-color:rgba(156,122,52,.3); box-shadow:0 0 0 9px rgba(255,253,249,.72),0 0 0 10px rgba(156,122,52,.14),0 20px 40px rgba(90,70,30,.16)} .plate svg{position:absolute;inset:0;width:100%;height:100%} /* The photograph is a material, not an image: it carries the world's light, and on the home it still DEVELOPS out of the paper as you scroll (the same --p mechanic). */ .pimg{position:absolute;inset:0;background-image:var(--portrait);background-size:cover; background-position:50% 15%;background-repeat:no-repeat; filter:grayscale(.24) sepia(.14) contrast(1.06) brightness(.9); opacity:calc(.05 + var(--p,0)*.95); -webkit-mask-image:radial-gradient(125% 100% at 50% 32%,#000 calc(var(--p,0)*100%),transparent calc(var(--p,0)*100% + 24%)); mask-image:radial-gradient(125% 100% at 50% 32%,#000 calc(var(--p,0)*100%),transparent calc(var(--p,0)*100% + 24%))} html[data-world="manuscript"] .pimg{filter:grayscale(.08) sepia(.38) contrast(.97) brightness(1.04)} /* In the Hall of Life the portrait is earned — whole, unmasked, square. */ .plate--full{aspect-ratio:1} .plate--full .pimg{opacity:1;-webkit-mask-image:none;mask-image:none;background-position:50% 12%} /* watermark + silhouette: the same photograph, reduced to a trace */ .watermark{background-image:var(--portrait);background-size:contain;background-position:center; background-repeat:no-repeat;filter:grayscale(1) contrast(1.15) brightness(.85)} html[data-world="manuscript"] .watermark{filter:grayscale(1) sepia(.55) contrast(.95)} .plate .eng{color:var(--engrave);opacity:calc(.08 + var(--p,0)*.92); -webkit-mask-image:radial-gradient(120% 95% at 50% 34%,#000 calc(var(--p,0)*100%),transparent calc(var(--p,0)*100% + 26%)); mask-image:radial-gradient(120% 95% at 50% 34%,#000 calc(var(--p,0)*100%),transparent calc(var(--p,0)*100% + 26%))} .plate .eyes{color:var(--engrave);opacity:calc(.22 + var(--pe,0)*.78)} .plate .cp{position:absolute;bottom:0;inset-inline:0;padding:8px;text-align:center;font-family:var(--font-ui); font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt2); background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);opacity:calc(1 - var(--p,0)*.5)} html[data-world="manuscript"] .plate .cp{color:#6b5f49;background:linear-gradient(0deg,rgba(233,224,205,.85),transparent)} /* ── quote ── */ .quote{max-width:860px;margin-inline:auto;text-align:center;position:relative;padding-inline:36px} .quote .mk{font-family:var(--font-display);font-size:4.4rem;color:var(--acc);opacity:.32;line-height:.7} .quote blockquote{font-family:var(--font-display);font-weight:400;font-size:clamp(1.4rem,1rem+1.6vw,2.3rem);line-height:1.65;margin:10px 0 var(--sp5)} .quote cite{font-style:normal;color:var(--mut);font-family:var(--font-ui);font-size:13px;letter-spacing:.1em} .qwrap{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);border-block:1px solid var(--edge)} /* ── timeline ── */ .tl{border-inline-start:1px solid var(--edge);padding-inline-start:24px;margin-inline-start:8px;max-width:640px} .tl .ev{position:relative;padding-bottom:26px} .tl .ev::before{content:"";position:absolute;inset-inline-start:-29px;top:6px;width:9px;height:9px; border:1px solid var(--acc);transform:rotate(45deg);background:var(--bg)} .tl .yr{font-family:var(--font-ui);font-size:11px;letter-spacing:.14em;color:var(--acc-text)} .tl b{font-family:var(--font-head);font-weight:400;font-size:1.15rem;display:block;margin-top:4px} .tl p{color:var(--txt2);font-size:13.5px;margin-top:3px} /* ── VOLUME (book detail) ── */ .volume-detail{display:grid;grid-template-columns:.6fr 1.4fr;gap:clamp(26px,4vw,56px);align-items:start} .volume-detail .cvbig{aspect-ratio:2/3;border-radius:7px;position:relative;overflow:hidden;border:1px solid rgba(200,167,91,.32); background:linear-gradient(150deg,#20201c,#111110);box-shadow:0 26px 56px rgba(0,0,0,.6)} html[data-world="manuscript"] .volume-detail .cvbig{background:linear-gradient(150deg,#efe4cf,#e0d0ae);box-shadow:0 22px 44px rgba(90,70,30,.22)} .volume-detail .cvbig::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:6px; background:linear-gradient(var(--gold-antique),var(--gold-champagne),var(--gold-antique));opacity:.85} .volume-detail .cvbig .sl{position:absolute;inset-inline:0;bottom:28px;text-align:center;font-family:var(--font-head); color:var(--gold-champagne);font-size:1.3rem;padding-inline:16px} html[data-world="manuscript"] .volume-detail .cvbig .sl{color:#6a5220} .metabox{background:var(--surf);border:1px solid var(--edge);border-radius:var(--r-md);padding:16px; font-family:var(--font-ui);font-size:11.5px;color:var(--txt2);line-height:2} .metabox b{color:var(--acc-text);display:block;margin-bottom:2px} .metabox code{font-family:'Inter',monospace;color:var(--acc-text);font-size:11px} .toc a{display:flex;gap:10px;padding:14px 4px;min-height:44px;align-items:center;border-bottom:1px solid var(--edge);font-family:var(--font-ui); font-size:14px;color:var(--txt2);border-inline-start:2px solid transparent; transition:color var(--base),border-color var(--base)} .toc a:hover{color:var(--acc);border-inline-start-color:var(--acc)} .toc a i{color:var(--acc);font-style:normal} /* ── READING ROOM ── */ body[data-page="read"] .hdr{display:none} .rbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;height:58px; padding-inline:clamp(16px,4vw,40px);background:var(--headbg); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--edge)} .rbar .tt{margin-inline:auto;font-family:var(--font-display);font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw} .rprog{position:fixed;top:0;inset-inline:0;height:2px;z-index:70} .rprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-antique),var(--gold-champagne))} .reader{display:grid;grid-template-columns:220px minmax(0,1fr) 200px;gap:clamp(24px,4vw,56px); max-width:1200px;margin-inline:auto;padding:40px clamp(20px,4vw,40px) 120px} .rtoc{position:sticky;top:80px;align-self:start;font-family:var(--font-ui);font-size:13px} .rtoc h4{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:12px} .rtoc a{display:block;padding:12px 11px;border-radius:8px;color:var(--txt2);border-inline-start:2px solid transparent;line-height:1.5} .rtoc a.on{color:var(--acc);border-inline-start-color:var(--acc);background:rgba(200,167,91,.07)} .article{max-width:var(--measure);margin-inline:auto;width:100%} .benefit-title{font-family:var(--font-head);font-size:clamp(1.8rem,3vw,2.7rem);font-weight:400;margin:10px 0 0} .benefit-register{display:grid;gap:12px;max-width:1060px;margin-inline:auto} .benefit-entry{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr) 176px;align-items:stretch;min-height:164px;overflow:hidden;border:1px solid var(--edge);background:linear-gradient(135deg,color-mix(in srgb,var(--paper) 96%,var(--acc) 4%),var(--paper));transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)} .benefit-entry::after{content:"";position:absolute;inset-inline:112px 176px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent);transform:scaleX(.18);opacity:.45;transition:transform .55s var(--ease),opacity .55s var(--ease)} .benefit-entry:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 68%,var(--edge));box-shadow:0 24px 64px rgba(27,19,8,.09)} .benefit-entry:hover::after{transform:scaleX(.82);opacity:.9} .benefit-entry__folio{display:grid;place-items:center;border-inline-end:1px solid var(--edge);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 64%)} .benefit-entry__folio span{display:grid;place-items:center;width:62px;aspect-ratio:1;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border:1px solid var(--acc);background:color-mix(in srgb,var(--paper) 93%,var(--acc) 7%);font-family:var(--font-ui);color:var(--acc-text);font-size:.86rem} .benefit-entry__body{align-self:center;padding:24px clamp(22px,4vw,48px);min-width:0;text-align:start} .benefit-entry__type{display:inline-flex;align-items:center;gap:9px;color:var(--acc-text);font:500 .72rem/1 var(--font-ui);letter-spacing:.04em} .benefit-entry__type i{display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--edge);border-radius:50%;font-style:normal;font-size:.57rem} .benefit-entry__text{margin:14px 0 0;font-family:var(--font-display);font-size:clamp(1.15rem,1.7vw,1.55rem);line-height:1.65;color:var(--ink)} .benefit-entry__source{margin-top:13px!important;padding-top:11px!important;border-top:1px solid var(--edge);font-size:.78rem!important} .benefit-entry__action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-inline-start:1px solid var(--edge);color:var(--muted);font:500 .75rem/1.4 var(--font-ui);text-decoration:none;background:linear-gradient(145deg,transparent,color-mix(in srgb,var(--acc) 7%,transparent))} .benefit-entry__action b{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--acc);border-radius:50%;color:var(--acc-text);font-size:1.1rem;transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease)} .benefit-entry:hover .benefit-entry__action b{transform:translateX(-5px);background:var(--acc);color:var(--paper)} .benefit-entry--recorded .benefit-entry__folio span{background:linear-gradient(135deg,var(--acc-hi),var(--acc));color:#1b1408;box-shadow:0 10px 30px color-mix(in srgb,var(--acc) 30%,transparent)} .benefit-format{display:inline-flex;margin-top:16px;padding:7px 15px;border:1px solid var(--edge);border-radius:999px;color:var(--muted);font:500 .7rem/1 var(--font-ui)} .benefit-format.is-recorded{border-color:color-mix(in srgb,var(--acc) 65%,var(--edge));color:var(--acc-text);background:color-mix(in srgb,var(--acc) 8%,transparent)} .benefit-media{position:relative;margin-top:28px;padding:10px;border:1px solid var(--edge);background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 8%,transparent),transparent 55%);box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--paper) 88%,transparent),0 22px 55px rgba(18,13,6,.12);text-align:start} .benefit-media::before,.benefit-media::after{content:"◆";position:absolute;top:50%;z-index:2;color:var(--acc);font-size:.5rem;transform:translateY(-50%) rotate(45deg)} .benefit-media::before{inset-inline-start:-5px}.benefit-media::after{inset-inline-end:-5px} @media(max-width:720px){ .benefit-entry{grid-template-columns:72px minmax(0,1fr);min-height:0} .benefit-entry::after{inset-inline:72px 0} .benefit-entry__folio span{width:45px;font-size:.72rem} .benefit-entry__body{padding:20px 18px 15px} .benefit-entry__text{font-size:1.08rem} .benefit-entry__action{grid-column:2;flex-direction:row;justify-content:space-between;padding:10px 18px 16px;border-inline-start:0;border-top:1px solid var(--edge)} .benefit-entry__action b{width:34px;height:34px} .benefit-media{margin-inline:-12px;padding:6px} } .prose{font-family:var(--font-naskh);font-size:var(--rfs);line-height:var(--rlh);color:var(--txt);text-align:justify} .prose.sans{font-family:var(--font-sans)} .prose p{margin-bottom:1.1em} .prose>p:first-of-type::first-letter{font-family:var(--font-display);float:inline-start;font-size:3.3em;line-height:.84; padding-inline-end:.09em;color:var(--gold-antique)} .pull{margin:1.5em 0;padding-inline-start:20px;border-inline-start:2px solid var(--acc); font-family:var(--font-display);font-size:1.3em;line-height:1.7;color:var(--txt2)} .fn{font-size:.6em;vertical-align:super;color:var(--acc-text)} .notes{margin-top:34px;border-top:1px solid var(--edge);padding-top:16px;font-size:.85em;color:var(--txt2)} .notes h4{font-family:var(--font-ui);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:8px} .margin{position:sticky;top:80px;align-self:start;font-family:var(--font-ui);font-size:11.5px;color:var(--mut);line-height:1.7} .margin .mn{border-inline-start:2px solid var(--acc);padding-inline-start:11px;margin-bottom:20px} .margin .mn b{color:var(--acc);display:block;margin-bottom:3px} /* ── search overlay ── */ .search{position:fixed;inset:0;z-index:90;display:grid;place-items:start center;padding-top:12vh; opacity:0;visibility:hidden;transition:opacity var(--base),visibility 0s linear var(--base)} .search.open{opacity:1;visibility:visible;transition:opacity var(--base),visibility 0s linear 0s} .search .scrim{position:absolute;inset:0;background:rgba(4,4,4,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} html[data-world="manuscript"] .search .scrim{background:rgba(60,48,24,.4)} .search .box{position:relative;width:min(660px,92vw);background:var(--surf);border:1px solid rgba(200,167,91,.3); border-radius:var(--r-xl);box-shadow:0 40px 100px rgba(0,0,0,.65);overflow:hidden; transform:translateY(-12px) scale(.985);transition:transform var(--slow) var(--ease-in)} .search.open .box{transform:none} .search .fld{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--edge)} /* 46, not 44: inside the flex line this input renders 0.66px under its own declared height, so the declared value carries a pixel of headroom */ .search .fld input{min-height:46px;height:46px;box-sizing:border-box} .search .fld svg{width:20px;height:20px;color:var(--acc);flex:none} .search .fld input{flex:1;background:none;border:none;outline:none;color:var(--txt);font-family:var(--font-body);font-size:1.2rem} .search .fld input::placeholder{color:var(--mut)} .search kbd{font-family:var(--font-ui);font-size:10px;color:var(--mut);border:1px solid var(--edge);border-radius:5px;padding:3px 7px} .search .res{padding:10px 12px 18px;max-height:52vh;overflow:auto} .search .grp{font-family:var(--font-ui);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);padding:12px 10px 4px} .search .it{display:flex;align-items:center;gap:13px;padding:11px;border-radius:11px;cursor:pointer} .search .it:hover{background:rgba(200,167,91,.08)} .search .it .ig{width:34px;height:34px;border-radius:9px;border:1px solid rgba(200,167,91,.3);display:grid;place-items:center; color:var(--acc);font-family:var(--font-head);font-size:14px;flex:none;background:var(--paper)} .search .it b{font-family:var(--font-head);font-weight:400;font-size:1rem;display:block} .search .it small{font-family:var(--font-ui);font-size:11px;color:var(--mut)} /* ── drawer (mobile menu) + sheet (reader settings) ── */ .scrim2{position:fixed;inset:0;z-index:85;background:rgba(3,3,3,.6);opacity:0;visibility:hidden; transition:opacity var(--base),visibility 0s linear var(--base)} .scrim2.open{opacity:1;visibility:visible;transition:opacity var(--base),visibility 0s linear 0s} .drawer{position:fixed;inset-block:0;inset-inline-end:0;width:min(330px,86vw);z-index:86;background:var(--paper); border-inline-start:1px solid var(--edge);padding:26px 24px;overflow:auto; transform:translateX(100%);visibility:hidden; /* visibility flips instantly on open and only after the slide-out on close — transitioning it would leave the panel unclickable for the whole animation. */ transition:transform var(--slow) var(--ease-in),visibility 0s linear var(--slow)} html[dir="rtl"] .drawer{transform:translateX(-100%)} .drawer.open{transform:none!important;visibility:visible; transition:transform var(--slow) var(--ease-in),visibility 0s linear 0s} .drawer .mlink{display:flex;align-items:center;gap:14px;padding:16px 4px;min-height:48px;border-bottom:1px solid var(--edge); font-family:var(--font-head);font-size:18px} .drawer .mlink i{width:24px;color:var(--acc);font-style:normal;font-size:15px;text-align:center} .sheet{position:fixed;bottom:0;inset-inline:0;z-index:88;border-radius:26px 26px 0 0;padding:12px 22px 34px; background:var(--paper);border-top:1px solid var(--edge);box-shadow:0 -20px 50px rgba(0,0,0,.45); transform:translateY(100%);visibility:hidden; transition:transform var(--slow) var(--ease-in),visibility 0s linear var(--slow);max-width:520px;margin-inline:auto} .sheet.open{transform:none;visibility:visible; transition:transform var(--slow) var(--ease-in),visibility 0s linear 0s} .sheet .grab{width:38px;height:4px;border-radius:3px;background:var(--txt2);opacity:.3;margin:0 auto 18px} .sheet h4{font-family:var(--font-ui);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin:18px 0 10px} .seg{display:flex;gap:8px} .seg button{flex:1;padding:13px;min-height:44px;border:1px solid var(--edge);border-radius:11px;color:var(--txt2); font-family:var(--font-ui);font-size:13px;transition:color var(--base),border-color var(--base),background var(--base)} .seg button.on{border-color:var(--acc);color:var(--acc);background:rgba(200,167,91,.09)} /* ── footer (belongs to the world) ── */ .ft{position:relative;z-index:1;background:var(--foot);border-top:1px solid rgba(200,167,91,.3);padding-block:var(--sp9) var(--sp5);margin-top:var(--sp9)} .ft .seal{text-align:center;margin-bottom:var(--sp8)} .ft .seal svg,.ft .seal img{width:60px;height:60px;margin:0 auto var(--sp4);display:block;object-fit:contain} .ft .cal{font-family:var(--font-display);font-size:clamp(1.9rem,1.3rem+2vw,2.9rem)} .ft .fq{color:#cabfa6;font-family:var(--font-head);font-size:1.1rem;max-width:520px;margin:14px auto 0} html[data-world="manuscript"] .ft .fq{color:#5a4f3c} .ft .fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px} .ft h4{font-family:var(--font-ui);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-champagne);margin-bottom:14px} html[data-world="manuscript"] .ft h4{color:var(--gold-antique)} .ft a{display:block;font-size:13.5px;color:#cabfa6;padding-block:11px;min-height:44px;transition:color var(--base)} html[data-world="manuscript"] .ft a{color:#5a4f3c} .ft a:hover{color:var(--gold-champagne)} html[data-world="manuscript"] .ft a:hover{color:#7a5f28} .ft .fb{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08); margin-top:var(--sp8);padding-top:18px;font-family:var(--font-ui);font-size:12px;color:#9a8f76} html[data-world="manuscript"] .ft .fb{border-top-color:rgba(90,70,30,.18);color:#8a7f6b} .ft .brandline p{color:#9a8f76;font-size:13px;margin-top:12px;max-width:300px} html[data-world="manuscript"] .ft .brandline p{color:#5a4f3c} /* ── page routing ── */ /* ══ GOLD THAT CARRIES TEXT ════════════════════════════════════════════════ The brushed-gold material runs down to #8c6b2e at its darkest corner, which gives the near-black label only 3.99:1 — under AA. Where the material sits BEHIND TEXT its darkest stop lifts to #9a7634 (4.68:1). The decorative material itself is untouched, and the canonical token block is not edited. */ :root{--gold-brushed-text:linear-gradient(135deg,#a9853a 0%,#c8a75b 34%,#f0dca0 52%,#c8a75b 68%,#9a7634 100%)} .btn-g,.skip-link{background:var(--gold-brushed-text)} /* ══ THE MANUSCRIPT'S GOLD, WHERE IT CARRIES TEXT ══════════════════════════ Antique gold #9c7a34 measures 3.37:1 on parchment. That is fine for a border, an icon stroke or a rule — WCAG asks 3:1 of non-text — and it FAILS for text, which needs 4.5:1. So every gold that carries a glyph switches to the darker ink the system already defines (--acc-text, #7c5e24, 4.6:1). The world keeps its gold; only the letters get the ink. */ html[data-world="manuscript"] :is( .btn-o, .chip:hover, .chip.on, .cite__tabs button.on, .cite__copy, .rowi .arw, .slink, .slink i, .stat b, .person .ini span, .card .h3, .tr__bar button[aria-pressed="true"], .ctrls button:hover, .ctrls button[aria-pressed="true"], .seg button.on, .pager .cur, .rtoc a.on, .toc a i, .toc a:hover, .margin .mn b, .margin .mn.own:hover b, .drawer .mlink i, .nav a.on, .jnav a.on, .crumb a:hover, .dmore, .dmore:hover, .onward a:hover b, .tagrow a:hover, .seltb button:hover, .hall__thresh, .fatwa .q i, .dseg > h3, .chp time, .trl > time ){color:var(--acc-text)} /* ══ THE READER'S SCHOLARLY LAYER ══════════════════════════════════════════ Controls are invited, never present: the toolbar exists only while a passage is held, and the marks the visitor leaves are their own, stored on their own device. Highlighting is a wash of gold over the paper, never a colour. */ .seltb{position:absolute;z-index:75;display:none;gap:2px;padding:5px;background:var(--paper); border:1px solid var(--edge);border-radius:11px;box-shadow:0 14px 34px rgba(0,0,0,.4)} html[data-world="manuscript"] .seltb{box-shadow:0 12px 28px rgba(90,72,38,.16)} .seltb.on{display:flex} .seltb button{min-height:44px;min-width:44px;padding-inline:12px;border-radius:8px;color:var(--txt2); font-family:var(--font-ui);font-size:11.5px;letter-spacing:.06em;white-space:nowrap; transition:color var(--base),background var(--base)} .seltb button:hover{color:var(--acc);background:rgba(200,167,91,.09)} mark.hl{background:linear-gradient(180deg,transparent 12%,rgba(200,167,91,.26) 12%); color:inherit;padding:0 1px;border-radius:1px;cursor:pointer} html[data-world="manuscript"] mark.hl{background:linear-gradient(180deg,transparent 12%,rgba(156,122,52,.24) 12%)} mark.hl:hover{background:linear-gradient(180deg,transparent 12%,rgba(200,167,91,.4) 12%)} .margin .mn.own{border-inline-start:1px solid var(--acc);padding-inline-start:11px;cursor:pointer} .margin .mn.own:hover b{color:var(--acc)} .margin .mn.own time{display:block;font-family:var(--font-ui);font-size:9.5px;letter-spacing:.12em; color:var(--mut);margin-top:5px} .rbar .ic[aria-pressed="true"]{color:var(--acc);border-color:var(--acc);background:rgba(200,167,91,.1)} /* the drawer and the sheet may be thrown away with a thumb */ .drawer.drag,.sheet.drag{transition:none!important} /* a search that finds nothing says so, in the institution's own voice */ .search .none{display:none;padding:38px 22px 30px;text-align:center} .search .none.on{display:block} .search .none b{display:block;font-family:var(--font-display);font-size:1.2rem;color:var(--txt);font-weight:400} .search .none span{display:block;font-family:var(--font-ui);font-size:12px;color:var(--mut);margin-top:9px;line-height:1.8} .search .grp.hide,.search .it.hide{display:none} /* ══ ASK — a question from a reader ═══════════════════════════════════════ A public form on a scholarly institution is a trust surface before it is a feature: nothing submitted here is ever visible until a scholar has reviewed it (Volume III §6), and the email is kept only long enough to send one notification. Both facts are stated to the visitor, not buried in a policy. */ .ask{border:1px solid var(--edge);border-radius:var(--r-md);background:var(--paper);scroll-margin-top:110px; padding:clamp(22px,3vw,34px);margin-block:var(--sp7)} .ask:focus{outline:none}.ask:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 34%,transparent)} .ask h3{font-family:var(--font-display);font-size:clamp(1.2rem,1rem+1vw,1.7rem);font-weight:400} .ask p.hint{color:var(--mut);font-size:14px;margin-top:10px;max-width:60ch;line-height:1.8} .ask label{display:block;font-family:var(--font-ui);font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--mut);margin-bottom:7px} .ask textarea,.ask input{width:100%;background:transparent;border:1px solid var(--edge); border-radius:9px;padding:13px 14px;color:var(--txt);font-family:var(--font-sans);font-size:15px; line-height:1.7;outline-offset:3px;min-height:48px} .ask textarea{min-height:132px;resize:vertical;font-family:var(--font-naskh)} .ask .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px} .ask .fld{margin-top:18px} .ask .send{min-height:48px;padding-inline:26px;margin-top:20px;border:1px solid var(--acc); border-radius:10px;color:var(--acc-text);font-family:var(--font-ui);font-size:13px;letter-spacing:.08em} .ask .send:hover{background:rgba(200,167,91,.09)} .ask .privacy{margin-top:14px;font-family:var(--font-ui);font-size:11.5px;color:var(--mut);line-height:1.8} /* the honeypot must be unreachable to people AND to assistive technology, while staying visible to a bot that reads the DOM */ .ask .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .ask__done{display:none;text-align:center;padding:14px 0} .ask.sent .ask__done{display:block} .ask.sent form{display:none} .ask__done b{display:block;font-family:var(--font-display);font-size:1.25rem;color:var(--acc-text);font-weight:400} .ask__done span{display:block;color:var(--mut);font-size:13.5px;margin-top:10px;max-width:52ch;margin-inline:auto;line-height:1.8} @media(max-width:700px){.ask .row{grid-template-columns:1fr}} /* ══ THE DOCUMENT ROOMS ════════════════════════════════════════════════════ Sermon · response · fatwa · benefit · article. One pattern, five materials. The text holds the centre; provenance sits in the margin and never competes. */ .doc{display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:clamp(26px,4vw,58px); align-items:start;padding-bottom:var(--sp9)} .doc__hd{padding-top:20px} .doc__hd h1{margin-top:12px} .doc__meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:16px; font-family:var(--font-ui);font-size:12px;color:var(--mut)} .doc__bd{margin-top:var(--sp6);max-width:68ch} .doc__m{position:sticky;top:96px;display:grid;gap:16px} .doc__m .sbox{padding:16px 18px} .dl{display:grid;gap:11px;font-family:var(--font-ui);font-size:11.5px} .dl div{display:grid;gap:3px} .dl dt{color:var(--mut);letter-spacing:.14em;text-transform:uppercase;font-size:9.5px} .dl dd{color:var(--txt2);margin:0;font-size:12.5px;letter-spacing:.02em} .dl dd b{color:var(--acc-text);font-weight:400} /* a labelled segment — question, evidence, answer, sources */ .dseg{margin-top:var(--sp6);padding-inline-start:24px;border-inline-start:1px solid var(--edge);position:relative} .dseg::before{content:'';position:absolute;inset-inline-start:-1px;top:0;width:1px;height:34px;background:var(--acc)} .dseg>h3{font-family:var(--font-ui);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--acc-text);margin-bottom:12px} .dseg>p,.dseg>div{font-family:var(--font-naskh);font-size:15.5px;line-height:1.9;color:var(--txt2)} /* the text being answered is NEVER confusable with the answer (Charter §6) */ .orig{margin-top:var(--sp5);padding:20px 22px;border:1px solid var(--edge);border-radius:var(--r-md); background:color-mix(in srgb,var(--edge) 22%,transparent)} .orig>h3{font-family:var(--font-ui);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--txt2);margin-bottom:11px;display:flex;align-items:center;gap:8px} .orig>h3::after{content:'';flex:1;height:1px;background:var(--edge)} .orig p{font-family:var(--font-naskh);font-size:14.5px;line-height:1.85;color:var(--txt2);font-style:italic} /* the Friday pulpit: one tall shaft of light, typography carries everything */ .shaft{position:relative} .shaft::before{content:'';position:absolute;top:-40px;inset-inline-start:50%;transform:translateX(-50%); width:min(420px,74%);height:320px;pointer-events:none; background:radial-gradient(closest-side,rgba(200,167,91,.12),transparent 72%)} html[data-world="manuscript"] .shaft::before{background:radial-gradient(closest-side,rgba(156,122,52,.14),transparent 72%)} /* the treasury: one benefit, concentrated light, small and brilliant */ .jewel{max-width:660px;margin-inline:auto;text-align:center;padding:clamp(34px,6vw,72px) clamp(22px,4vw,54px); border:1px solid var(--acc);border-radius:var(--r-md);position:relative; background:radial-gradient(120% 90% at 50% 0%,rgba(200,167,91,.10),transparent 62%),var(--paper)} html[data-world="manuscript"] .jewel{background:radial-gradient(120% 90% at 50% 0%,rgba(156,122,52,.12),transparent 62%),var(--paper)} .jewel blockquote{font-family:var(--font-display);font-size:clamp(1.3rem,1rem+1.5vw,2.1rem);line-height:1.62; margin:0;color:var(--txt)} .jewel .src{margin-top:26px;padding-top:20px;border-top:1px solid var(--edge);font-family:var(--font-ui); font-size:11.5px;color:var(--mut);letter-spacing:.06em} .jewel .src b{color:var(--acc-text);font-weight:400} .tagrow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:22px} .tagrow a{font-family:var(--font-ui);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--mut);border:1px solid var(--edge);border-radius:999px;padding:10px 14px;min-height:44px; display:inline-flex;align-items:center} .tagrow a:hover{color:var(--acc);border-color:var(--acc)} /* the way onward — every document hands the visitor to the next */ .onward{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--edge); border-block:1px solid var(--edge);margin-top:var(--sp8)} .onward a{background:var(--bg);padding:26px 24px;min-height:44px;display:grid;gap:7px; transition:background var(--base)} .onward a:hover{background:rgba(200,167,91,.05)} .onward a:last-child{text-align:end} .onward em{font-style:normal;font-family:var(--font-ui);font-size:9.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--mut)} .onward b{font-family:var(--font-head);font-weight:400;font-size:1.1rem;color:var(--txt2);line-height:1.45} .onward a:hover b{color:var(--acc)} /* the link out of a list item into its own room */ .dmore{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px; font-family:var(--font-ui);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-text)} .dmore:hover{color:var(--acc)} .dmore .arw{transition:transform var(--base) var(--paper-ease)} .dmore:hover .arw{transform:translateX(-4px)} html[dir="ltr"] .dmore:hover .arw{transform:translateX(4px)} @media(min-width:768px) and (max-width:1099px){ .doc{grid-template-columns:minmax(0,1fr)} .doc__m{position:static;grid-template-columns:1fr 1fr;display:grid} } @media(max-width:767px){ .doc{grid-template-columns:minmax(0,1fr);gap:24px} .doc__m{position:static} .dseg{padding-inline-start:18px} .onward{grid-template-columns:1fr} .onward a:last-child{text-align:start} } /* ══ THE LECTURE ROOM ══════════════════════════════════════════════════════ A darkened room with a spotlight from above — and the frame paints from CSS alone, so the room exists before a single byte of video arrives. */ .lech{padding-top:20px} .lech .meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:16px; font-family:var(--font-ui);font-size:12px;color:var(--mut)} .lech .meta b{color:var(--acc-text);font-weight:400} .stage{width:min(100%,760px);margin:30px auto 0;border:1px solid var(--edge);border-radius:var(--r-md);overflow:hidden; background:radial-gradient(120% 90% at 50% -10%,rgba(200,167,91,.10),transparent 60%), linear-gradient(180deg,#111,#070707)} html[data-world="manuscript"] .stage{background:radial-gradient(120% 90% at 50% -10%,rgba(156,122,52,.13),transparent 60%), linear-gradient(180deg,#efe7d6,#e3d9c2)} .stage__fr{position:relative;display:grid;place-items:center} .stage__fr--empty{aspect-ratio:16/9} .stage__fr>.media-player{width:100%;border-radius:calc(var(--r-md) - 1px);box-shadow:none} .stage__fr video{width:100%;height:100%;object-fit:contain;background:transparent;display:block} /* the idle plate: one spotlight, one play, nothing else */ .stage__ov{position:absolute;inset:0;display:grid;place-items:center;gap:0;text-align:center;padding:22px} .stage__ov.gone{display:none} .stage__pl{width:78px;height:78px;border-radius:50%;border:1px solid var(--acc);color:var(--acc); display:grid;place-items:center;background:rgba(0,0,0,.28);backdrop-filter:blur(3px); transition:transform var(--base) var(--paper-ease),background var(--base)} html[data-world="manuscript"] .stage__pl{background:rgba(255,255,255,.34)} .stage__pl:hover{transform:scale(1.05);background:rgba(200,167,91,.16)} .stage__pl svg{width:26px;height:26px;margin-inline-start:4px} .stage__er{position:absolute;inset:0;display:none;place-items:center;padding:24px; background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6))} html[data-world="manuscript"] .stage__er{background:linear-gradient(180deg,rgba(241,235,221,.6),rgba(227,217,194,.82))} .stage__er.on{display:grid} .stage__er .state{background:transparent;border:0;padding:0} /* controls: play · scrub · time · CC · speed · volume · fullscreen. Nothing more. */ .ctrls{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--edge); background:var(--paper);flex-wrap:wrap} .ctrls button{min-width:44px;min-height:44px;display:grid;place-items:center;color:var(--txt2); border-radius:9px;font-family:var(--font-ui);font-size:11.5px;letter-spacing:.04em;padding-inline:8px; transition:color var(--base),background var(--base)} .ctrls button:hover{color:var(--acc);background:rgba(200,167,91,.07)} .ctrls button[aria-pressed="true"]{color:var(--acc)} .ctrls svg{width:17px;height:17px} .ctrls .tm{font-family:var(--font-ui);font-size:12px;color:var(--mut);min-width:96px;text-align:center; font-variant-numeric:tabular-nums} .scrub{flex:1;min-width:140px;height:44px;display:grid;align-items:center;position:relative} .scrub::before{content:'';position:absolute;inset-inline:0;top:50%;height:3px;transform:translateY(-50%); background:var(--edge);border-radius:2px;pointer-events:none} .scrub input{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent; outline-offset:2px;margin:0} .scrub input::-webkit-slider-runnable-track{height:3px;background:transparent} .scrub input::-moz-range-track{height:3px;background:transparent} .scrub input::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%; background:var(--acc);border:0;cursor:pointer} .scrub input::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--acc);border:0} .scrub i{position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);height:3px; background:var(--acc);border-radius:2px;pointer-events:none;width:0;z-index:1} .vol{width:74px;height:44px;display:grid;align-items:center} .vol{position:relative} .vol::before{content:'';position:absolute;inset-inline:0;top:50%;height:3px;transform:translateY(-50%); background:var(--edge);border-radius:2px;pointer-events:none} .vol input{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0; outline-offset:2px} .vol input::-webkit-slider-runnable-track{height:3px;background:transparent} .vol input::-moz-range-track{height:3px;background:transparent} .vol input::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--acc);border:0} /* ── the study floor: transcript beside the scholarly rail ── */ .study{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(24px,3vw,44px); margin-top:var(--sp7);padding-bottom:var(--sp9);align-items:start} @media(min-width:768px){.series-room{max-width:1720px;padding-inline:clamp(16px,2vw,36px)}} .series-study{grid-template-columns:minmax(300px,340px) minmax(0,1fr);grid-template-areas:"rail stage"; align-items:stretch;gap:clamp(20px,2vw,32px)} .series-stage{grid-area:stage;display:grid;grid-template-rows:auto auto auto;align-content:start;gap:18px;min-width:0} .series-study>.srail{grid-area:rail;align-self:stretch;min-width:0} .series-stage__media{position:relative;border:1px solid color-mix(in srgb,var(--acc) 55%,var(--edge)); border-radius:var(--r-md);overflow:hidden;padding:10px;background:linear-gradient(145deg,var(--paper),var(--paper2)); box-shadow:0 24px 70px rgba(31,23,11,.14),inset 0 0 0 5px color-mix(in srgb,var(--paper) 76%,transparent)} .series-stage__media::after{content:'';position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--acc) 22%,transparent);border-radius:calc(var(--r-md) - 5px);pointer-events:none} .series-stage__media>.ytf,.series-stage__media>.media-player{width:100%;max-width:none;margin:0;aspect-ratio:16/9;border-radius:calc(var(--r-md) - 10px);box-shadow:none} .series-stage__media>.ytf{border:0} .series-stage__media>.media-player .series-video{width:100%;height:100%;margin:0;aspect-ratio:16/9;object-fit:contain} .series-lessons-toggle,.series-lessons-close,.series-lessons-backdrop{display:none} .series-video{object-fit:contain} .is-hidden{display:none!important} .series-written{aspect-ratio:16/9;display:grid;place-content:center;justify-items:center;text-align:center;padding:32px; background:radial-gradient(circle at 50% 44%,rgba(200,167,91,.14),transparent 36%),linear-gradient(135deg,transparent 46%,rgba(200,167,91,.06) 50%,transparent 54%)} .series-written__seal{width:72px;height:72px;border:1px solid var(--acc);border-radius:50%;display:grid;place-items:center; color:var(--acc);font-size:30px;animation:seriesSeal 7s ease-in-out infinite} .series-written h2{font-family:var(--font-display);font-weight:400;margin:14px 0 5px} .series-written p{color:var(--mut);margin:0} .series-now{position:relative;padding:16px 20px;border-inline-start:2px solid var(--acc);background:linear-gradient(90deg,rgba(200,167,91,.06),transparent)} .series-now>span{font-family:var(--font-ui);font-size:10px;letter-spacing:.18em;color:var(--acc-text)} .series-now h2{font-family:var(--font-head);font-size:clamp(1.25rem,1.55vw,1.55rem);font-weight:400;line-height:1.45;margin:5px 0 7px} .series-now .prose,.series-stage>.sbox .prose{font-size:clamp(16px,1.12vw,19px);line-height:1.75} .series-stage>.sbox{padding:18px 20px}.series-stage>.sbox h4{margin-bottom:8px} .series-now .prose>p:first-of-type::first-letter,.series-stage>.sbox .prose>p:first-of-type::first-letter{font-size:2.25em} .series-ledger{position:relative;height:100%;min-height:100%;max-height:none;overflow:hidden;padding:0; border-color:color-mix(in srgb,var(--acc) 42%,var(--edge)); background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 96%,var(--acc) 4%),var(--paper)); box-shadow:0 22px 60px rgba(28,20,8,.1),inset 0 0 0 4px color-mix(in srgb,var(--paper2) 70%,transparent)} .series-ledger::before,.series-ledger::after{content:'◆';position:absolute;inset-inline:0;text-align:center;color:var(--acc); font-size:9px;line-height:1;z-index:2;pointer-events:none} .series-ledger::before{top:16px}.series-ledger::after{bottom:16px} .series-ledger>h4{position:relative;margin:0;padding:30px 24px 22px;border-bottom:1px solid var(--edge); font-size:11px;letter-spacing:.16em;background:linear-gradient(180deg,rgba(200,167,91,.09),transparent)} .series-ledger>h4::after{content:'';position:absolute;bottom:-1px;inset-inline-start:24px;width:58px;height:2px; background:linear-gradient(90deg,var(--acc),transparent)} .series-ledger #lessonList{display:grid;align-content:start;padding:12px 14px 18px;max-height:none;overflow:visible} .series-ledger .lesson{position:relative;grid-template-columns:38px minmax(0,1fr) auto;padding:15px 10px; border:1px solid transparent;border-bottom-color:color-mix(in srgb,var(--edge) 72%,transparent);border-inline-start-width:2px} .series-ledger .lesson::after{content:'';position:absolute;inset-inline-start:17px;top:calc(50% + 13px);bottom:-17px; width:1px;background:color-mix(in srgb,var(--acc) 24%,transparent)} .series-ledger .lesson:last-of-type::after{display:none} .series-ledger .lesson:hover{transform:translateX(-2px);border-color:color-mix(in srgb,var(--acc) 30%,transparent); background:linear-gradient(90deg,rgba(200,167,91,.08),transparent)} .series-ledger .lesson.on{border-color:color-mix(in srgb,var(--acc) 55%,transparent); background:linear-gradient(105deg,rgba(200,167,91,.16),rgba(200,167,91,.035)); box-shadow:0 10px 28px rgba(78,55,13,.09)} .series-ledger .lesson.on .no{width:28px;height:28px;border-radius:50%;display:grid;place-items:center; color:var(--paper);background:var(--gold-brushed-text);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 12%,transparent)} .series-ledger .lesson b{font-size:1.04rem}.series-ledger .lesson small{line-height:1.65} .series-memory{font-family:var(--font-ui);font-size:10.5px;color:var(--mut);border-top:1px solid var(--edge); padding:18px 24px 32px;margin:0;background:color-mix(in srgb,var(--paper2) 56%,transparent)} .series-memory span{color:var(--acc);margin-inline-end:6px} .series-transcript{margin-top:14px;border-top:1px solid var(--edge);padding-top:12px}.series-transcript summary{cursor:pointer;color:var(--acc-text)} @keyframes seriesSeal{0%,100%{transform:rotate(0) scale(1);box-shadow:0 0 0 0 rgba(200,167,91,0)}50%{transform:rotate(45deg) scale(1.05);box-shadow:0 0 28px rgba(200,167,91,.22)}} @media(prefers-reduced-motion:reduce){.series-written__seal{animation:none}} .tr{border:1px solid var(--edge);border-radius:var(--r-md);background:var(--paper);overflow:hidden} .tr__bar{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--edge);flex-wrap:wrap} .tr__bar input{flex:1;min-width:120px;min-height:44px;background:transparent;border:0;color:var(--txt); font-family:var(--font-sans);font-size:14px;outline-offset:4px} .tr__bar .ct{font-family:var(--font-ui);font-size:11px;color:var(--mut);white-space:nowrap} .tr__bar button{min-height:44px;min-width:44px;padding-inline:11px;font-family:var(--font-ui);font-size:11px; letter-spacing:.05em;color:var(--txt2);border:1px solid var(--edge);border-radius:9px} .tr__bar button[aria-pressed="true"]{color:var(--acc);border-color:var(--acc);background:rgba(200,167,91,.08)} /* the viewport is a window, not the whole scroll: 420 lines, ~30 nodes */ .tr__vp{position:relative;height:min(62vh,560px);overflow-y:auto;overscroll-behavior:contain} .tr__sp{position:relative;width:100%} .tr__ls{position:absolute;inset-inline:0;top:0} .trl{position:absolute;inset-inline:0;display:grid;grid-template-columns:62px minmax(0,1fr);gap:14px; padding:9px 14px;border-bottom:1px solid color-mix(in srgb,var(--edge) 55%,transparent); cursor:pointer;transition:background var(--base)} .trl:hover{background:rgba(200,167,91,.05)} .trl>time{font-family:var(--font-ui);font-size:11px;color:var(--acc-text);padding-top:3px; font-variant-numeric:tabular-nums} .trl>p{font-family:var(--font-naskh);font-size:15.5px;line-height:1.85;color:var(--txt2);margin:0} .trl.on{background:rgba(200,167,91,.09)} .trl.on>p{color:var(--txt)} .trl.hit>p mark{background:rgba(200,167,91,.24);color:var(--txt);padding:0 2px;border-radius:2px} .trl__cp{opacity:0;align-self:start;min-width:44px;min-height:44px;display:grid;place-items:center; color:var(--mut);font-size:12px;transition:opacity var(--base)} .trl:hover .trl__cp,.trl:focus-within .trl__cp{opacity:1} /* the scholarly rail — chapters, references, fatwas, books, notes */ .srail{display:grid;gap:18px} .sbox{border:1px solid var(--edge);border-radius:var(--r-md);background:var(--paper);padding:18px} .sbox>h4{font-family:var(--font-ui);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--mut);margin-bottom:14px;display:flex;align-items:center;gap:8px} .sbox>h4::before{content:'';width:14px;height:1px;background:var(--acc);flex:none} .chp{display:grid;gap:2px} .chp button{display:grid;grid-template-columns:52px 1fr;gap:10px;text-align:start;min-height:44px; align-items:center;padding:7px 6px;border-radius:8px;transition:background var(--base)} .chp button:hover{background:rgba(200,167,91,.06)} .chp button.on{background:rgba(200,167,91,.10)} .chp time{font-family:var(--font-ui);font-size:11px;color:var(--acc-text);font-variant-numeric:tabular-nums} .chp span{font-size:13.5px;color:var(--txt2);line-height:1.5} .chp button.on span{color:var(--txt)} .slink{display:flex;gap:10px;align-items:baseline;padding-block:10px;min-height:44px; border-bottom:1px solid color-mix(in srgb,var(--edge) 55%,transparent);font-size:13.5px;color:var(--txt2)} .slink:last-child{border-bottom:0} .slink:hover{color:var(--acc)} .slink i{font-style:normal;color:var(--acc);font-size:11px;flex:none;padding-top:2px} .slink em{font-style:normal;display:block;font-family:var(--font-ui);font-size:10.5px;color:var(--mut); letter-spacing:.08em;margin-top:3px} .nt{display:grid;gap:10px} .nt textarea{width:100%;min-height:76px;background:transparent;border:1px solid var(--edge);border-radius:9px; padding:11px 12px;color:var(--txt);font-family:var(--font-sans);font-size:14px;line-height:1.7;resize:vertical; outline-offset:3px} .nt__add{min-height:44px;border:1px solid var(--acc);border-radius:9px;color:var(--acc-text); font-family:var(--font-ui);font-size:11.5px;letter-spacing:.08em} .nt__add:hover{background:rgba(200,167,91,.09)} .nt__l{display:grid;gap:8px;margin-top:4px} .nt__i{display:grid;grid-template-columns:52px 1fr 44px;gap:8px;align-items:start;font-size:13px; color:var(--txt2);padding-block:8px;border-top:1px solid color-mix(in srgb,var(--edge) 55%,transparent)} .nt__i time{font-family:var(--font-ui);font-size:11px;color:var(--acc-text);cursor:pointer;min-height:44px; display:grid;align-items:start;padding-top:2px} .nt__i button{min-width:44px;min-height:44px;color:var(--mut);font-size:13px} .nt__i button:hover{color:var(--bronze)} @media(min-width:768px) and (max-width:1099px){ .study{grid-template-columns:minmax(0,1fr)} .tr__vp{height:min(52vh,460px)} } @media(max-width:767px){ .study{grid-template-columns:minmax(0,1fr);gap:22px} .series-study{display:block;margin-top:var(--sp6)} .series-stage{position:static} .series-lessons-toggle{display:flex;position:absolute;z-index:4;inset-inline-end:18px;bottom:18px;align-items:center;gap:9px; min-height:46px;padding:7px 12px;border:1px solid color-mix(in srgb,var(--acc) 68%,transparent);border-radius:999px; color:#fff8e8;background:linear-gradient(115deg,rgba(15,12,7,.94),rgba(65,47,15,.92)); box-shadow:0 12px 30px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,232,170,.08);font-family:var(--font-ui);font-size:11px} .series-lessons-toggle__mark{width:26px;height:26px;display:grid;place-items:center;border:1px solid rgba(226,190,105,.55); border-radius:50%;color:#e2be69;font-size:11px;transition:transform var(--slow) var(--paper-ease)} .series-lessons-toggle__current{padding-inline-start:9px;border-inline-start:1px solid rgba(226,190,105,.3);color:#e2be69; font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap} body.series-drawer-open .series-lessons-toggle__mark{transform:rotate(90deg)} .series-study>.srail{display:block;position:fixed!important;z-index:151;inset:clamp(80px,12vh,118px) 0 76px;min-width:0; padding:0 10px 10px;transform:translateY(105%);visibility:hidden;opacity:0; transition:transform .52s var(--paper-ease),opacity .32s ease,visibility .52s;overscroll-behavior:contain} body.series-drawer-open{overflow:hidden} body.series-drawer-open .series-study>.srail{transform:translateY(0);visibility:visible;opacity:1} .series-ledger{height:100%;min-height:0;max-height:none;border-radius:22px 22px 12px 12px; box-shadow:0 -22px 70px rgba(0,0,0,.28),inset 0 0 0 4px color-mix(in srgb,var(--paper2) 70%,transparent)} .series-ledger>h4{min-height:68px;padding:26px 22px 18px;justify-content:space-between} .series-lessons-close{display:grid;width:44px;height:44px;place-items:center;margin:-13px -8px -7px 0;border:1px solid var(--edge); border-radius:50%;color:var(--acc-text);font-family:var(--font-ui);font-size:22px;line-height:1} html[dir="ltr"] .series-lessons-close{margin:-13px 0 -7px -8px} .series-ledger #lessonList{max-height:calc(100% - 132px);overflow-y:auto;padding:12px 14px 24px;scrollbar-gutter:stable; overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .series-ledger .lesson{min-height:68px} .series-memory{position:absolute;inset-inline:0;bottom:0;padding:13px 22px 17px;backdrop-filter:blur(12px)} .series-lessons-backdrop{display:block;position:fixed;z-index:150;inset:0;width:100%;height:100%;border:0; background:rgba(12,9,4,.52);backdrop-filter:blur(5px);opacity:0;visibility:hidden;pointer-events:none; transition:opacity .32s ease,visibility .32s} body.series-drawer-open .series-lessons-backdrop{opacity:1;visibility:visible;pointer-events:auto} .stage{margin-inline:-20px;border-inline:0;border-radius:0} .ctrls{gap:6px;padding:10px} .ctrls .tm{min-width:84px;font-size:11px} .vol{display:none} .tr__vp{height:min(58vh,440px)} .trl{grid-template-columns:52px minmax(0,1fr);gap:10px;padding:9px 12px} .trl>p{font-size:15px} } /* ══ THE STATE LAYER ═══════════════════════════════════════════════════════ A spinner is a web convention and it would look wrong on parchment. In this institution WAITING IS A PAPER EVENT: the ruled line draws itself in, the way a scribe rules a page before he writes on it. */ .skel{display:grid;gap:15px} .skel i{display:block;height:1px;background:var(--edge);position:relative;border-radius:1px} .skel i::after{content:'';position:absolute;inset:0;background:var(--acc);opacity:.85; transform:scaleX(0);transform-origin:0 50%;animation:rule 1700ms var(--paper-ease) infinite} html[dir="rtl"] .skel i::after{transform-origin:100% 50%} .skel i:nth-child(2)::after{animation-delay:130ms}.skel i:nth-child(3)::after{animation-delay:260ms} .skel i:nth-child(4)::after{animation-delay:390ms}.skel i:nth-child(5)::after{animation-delay:520ms} .skel i:nth-child(even){width:84%}.skel i:last-child{width:52%} @keyframes rule{0%{transform:scaleX(0);opacity:.85}55%{transform:scaleX(1);opacity:.85} 100%{transform:scaleX(1);opacity:0}} /* a work being fetched: the cover's box, then the lines that will describe it */ .skel--work{display:grid;grid-template-columns:58px 1fr;gap:18px;align-items:start} .skel__cv{display:block;aspect-ratio:2/3;border:1px solid var(--edge);border-radius:2px;background:var(--paper)} /* nothing here yet, something went wrong, or you have gone offline */ .state{text-align:center;padding:clamp(44px,8vw,96px) 22px;border:1px solid var(--edge); border-radius:var(--r-md);background:var(--paper)} .state__mk{width:54px;height:54px;margin-inline:auto;border:1px solid var(--acc);border-radius:50%; display:grid;place-items:center;color:var(--acc);opacity:.6;filter:var(--emb)} .state__mk svg{width:22px;height:22px} .state h3{font-family:var(--font-display);font-size:clamp(1.2rem,1rem+1vw,1.65rem);margin-top:20px;font-weight:400} .state p{color:var(--mut);margin-top:11px;max-width:44ch;margin-inline:auto;font-size:14.5px;line-height:1.75} .state .btn{margin-top:24px} /* bronze, never a new colour: an error is oxidation, structurally appropriate */ .state--err{border-color:color-mix(in srgb,var(--bronze) 42%,transparent)} .state--err .state__mk{border-color:var(--bronze);color:var(--bronze);opacity:.8} /* the offline ribbon — it states a fact, it does not apologise */ .netbar{position:fixed;inset-inline:0;top:0;z-index:120;transform:translateY(-100%); background:var(--bronze);color:#fff;font-family:var(--font-ui);font-size:12px;letter-spacing:.05em; text-align:center;padding:9px 14px;transition:transform var(--base) var(--paper-ease)} .netbar.on{transform:none} /* the archive speaks to assistive technology through one quiet channel */ .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* ══ THE FIRST PAINT SHOWS THE RIGHT ROOM ═══════════════════════════════════ .page is display:none and the router — which adds .on — runs at the end of the document. Under CPU throttling the browser therefore painted a document in which EVERY room was hidden: the footer sat at y=0 with zero height, then the router revealed a room and the footer dropped 209px and grew to 603px. That single reflow was 0.7426 of layout shift, the worst number in the whole audit. These pairs let CSS alone lay out the correct room at first paint, driven by the data-page the pre-paint script has already set. Generated to match the rooms in this document — regenerate if a room is added. */ body[data-page="home"] .page[data-p="home"], body[data-page="books"] .page[data-p="books"], body[data-page="courses"] .page[data-p="courses"], body[data-page="sermons"] .page[data-p="sermons"], body[data-page="responses"] .page[data-p="responses"], body[data-page="fawaid"] .page[data-p="fawaid"], body[data-page="lessons"] .page[data-p="lessons"], body[data-page="sermon"] .page[data-p="sermon"], body[data-page="response"] .page[data-p="response"], body[data-page="fatwa"] .page[data-p="fatwa"], body[data-page="benefit"] .page[data-p="benefit"], body[data-page="article"] .page[data-p="article"], body[data-page="lecture"] .page[data-p="lecture"], body[data-page="fatawa"] .page[data-p="fatawa"], body[data-page="volume"] .page[data-p="volume"], body[data-page="read"] .page[data-p="read"], body[data-page="bio"] .page[data-p="bio"]{display:block} .page{display:none;overflow-x:clip} .page.on{display:block;animation:pagein 420ms var(--paper-ease) both} @keyframes pagein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--reveal) var(--ease-in),transform var(--reveal) var(--ease-in)} .reveal.in{opacity:1;transform:none} .crumb{font-family:var(--font-ui);font-size:12px;color:var(--mut);padding-top:26px} .crumb a{display:inline-block;padding:13px 5px;margin:-13px -5px;min-width:44px;text-align:center} /* ══ TOUCH REACH ═══════════════════════════════════════════════════════════ Every standalone control reaches 44x44 through a transparent expansion — the chip stays 38px tall to the eye and becomes 44px to the thumb. Nothing here changes a single visible pixel. Inline markers in prose (.fn) and links inside a sentence are deliberately excluded: WCAG exempts inline targets, and an overlay there would steal text selection. */ .chip,.hall__enter,.cite__tabs button,.vid .play{position:relative} .chip::after,.hall__enter::after,.cite__tabs button::after{ content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:100%;height:100%;min-width:44px;min-height:44px} /* the footnote marker cannot take an overlay, so it takes real padding — 11x19 to 24x30, which clears the AA minimum without touching the type */ .fn{padding:6px 7px;margin:-6px -3px} .crumb a:hover{color:var(--acc)} /* ── THE POCKET INSTITUTION (< 860px) — re-composed, not shrunk ── */ .jnav{display:none} /* ── POCKET INSTITUTION · < 768px ── */ @media(max-width:767px){ body{font-size:16px;padding-bottom:86px} .hdr__in{height:64px;gap:12px} body[data-page="home"] .hdr__in{height:64px;min-height:0;align-items:center;padding-block:0} body[data-page="home"] .brand{align-items:center} body[data-page="home"] .brand>svg,body[data-page="home"] .brand>.brand__emblem{margin-top:0} body[data-page="home"] .brand .tag{display:none} body[data-page="home"] .brand .nm{font-size:19px} body[data-page="home"] .nav,body[data-page="home"] .tools{margin-top:0} .brand .nm{font-size:19px;padding-block-end:0;text-shadow:none}.brand .nm::before,.brand .nm::after,.brand .nm-ornament{display:none}.brand .sb{display:none}.brand>svg,.brand>.brand__emblem{width:30px;height:30px} .nav{display:none} .burger{display:grid} .hero{grid-template-columns:1fr;min-height:auto;padding-block:18px 30px;text-align:center;gap:26px} .hero .cpiece{order:-1} .hero__sub{margin-inline:auto}.hero__cta{justify-content:center;flex-direction:column} .hero__cta .btn{width:100%} .g3,.g4,.g5,.g2{grid-template-columns:1fr} .stats{grid-template-columns:repeat(2,1fr);gap:30px 16px} .volume-detail{grid-template-columns:1fr;text-align:center} .volume-detail .cvbig{max-width:190px;margin-inline:auto} .volume-detail .toc,.volume-detail .metabox{text-align:start} .reader{grid-template-columns:1fr;padding:24px 20px 130px} .rtoc,.margin{display:none} .plate{margin-inline:auto} .ft .fg{grid-template-columns:1fr 1fr;gap:26px} .ft{padding-block:var(--sp8) var(--sp5)} .quote{padding-inline:8px} /* the journey nav — thumb zone */ .jnav{display:flex;position:fixed;bottom:0;inset-inline:0;z-index:70;justify-content:space-around;align-items:flex-start; padding:12px 6px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(0deg,var(--bg) 62%,transparent); border-top:1px solid var(--edge)} .jnav a,.jnav button{display:grid;place-items:center;gap:6px;color:var(--txt2);min-width:56px;min-height:48px} .jnav a.on,.jnav button[aria-expanded="true"]{color:var(--acc)} .jnav svg{width:21px;height:21px} .jnav span{font-family:var(--font-ui);font-size:9px} body.menu-open{overflow:hidden} body[data-page="read"]{padding-bottom:0} body[data-page="read"] .jnav{display:none} } /* ── THE READING TIER · 768–1099px ────────────────────────────────────── An iPad is this archive's best reading device. It is not a shrunken desktop and not a stretched phone: two columns, the seven wings still named in the header (they fit — 648px of 753 measured at 768), no thumb nav, and the portrait stays BESIDE the text rather than stacked above it. */ @media(min-width:768px) and (max-width:1099px){ body{font-size:16.5px} .hdr__in{height:78px} .brand>svg,.brand>.brand__emblem{width:38px;height:38px} .brand .nm{font-size:27px} /* the name goes short and the subtitle stands down; the seven wing names in Arabic need 419px, so whether they sit in the header is decided by width below — never by squeezing them until they almost fit. */ .brand .nm-full,.brand .nm-ornament{display:none}.brand .nm-short{display:inline} /* the subtitle stays, but narrow: at 34ch it wraps and adds HEIGHT rather than width, so it cannot push the seven wing names out of the bar. */ body[data-page="home"] .brand .tag{display:block;max-width:34ch;font-size:11px} body[data-page="home"] .hdr__in{min-height:96px;padding-block:14px} body[data-page="home"] .brand .nm{font-size:30px} .nav{display:none}.burger{display:grid} /* two columns everywhere — never one */ .g3,.g4,.g5{grid-template-columns:repeat(2,1fr)} .g2{grid-template-columns:repeat(2,1fr)} .gauto{grid-template-columns:repeat(2,1fr)} .living{grid-template-columns:repeat(3,1fr)} .subjects{grid-template-columns:repeat(2,1fr)} .stats{grid-template-columns:repeat(5,1fr);gap:22px 10px} .ft .fg{grid-template-columns:1fr 1fr;gap:30px} /* the hero keeps its two columns, so he is beside the words */ .hero{grid-template-columns:1.1fr .9fr;gap:30px} .plate{width:min(100%,260px)} /* the Reader loses its side rails but keeps its measure */ .reader{grid-template-columns:minmax(0,1fr);padding:28px 34px 90px} .rtoc,.margin{display:none} /* the thumb nav belongs to the phone only */ .jnav{display:none} .hall{min-height:76svh} } /* English sets wider: the Latin wing names plus the full English wordmark need 1230px inside a 1220px container, so the nav closes ranks by 5px a gap. The header is capped at max-width, so this overflow is width-independent — it must be fixed on the language, not on a breakpoint. */ html[data-lang="en"] .nav{gap:15px} /* ── THE LINK ROW GIVES WAY BELOW 1280, AND THAT NUMBER IS MEASURED ──────── This tier used to return the wing row at 900px, on the note "measured need 766px, so 900px up clears it with 119px to spare". That was true of SEVEN text-only links. The row now carries NINE, each with a 29px engraved icon above its label — «الرئيسية» and «اسأل» joined the seven wings — and nine icon-links do not fit in 766px or anything like it. Re-measured against the header's own padded row, at fifteen widths in both languages: the row fits from 1280px up and fails at 1200 and below, in Arabic as well as English. So it retires at 1279 and the burger takes over, which the drawer already carries every wing for. The old tier's `.tag{max-width:22ch}` companion goes with it: it existed only to make room for the row at 900px, and at 900px there is no longer a row. */ @media(max-width:1279px){ .nav{display:none} .burger{display:grid} } @media(max-width:560px){ /* the header carries only what a thumb needs; world + language live in the drawer */ .brand .nm-full{display:none}.brand .nm-short{display:inline} #worldBtn,#langBtn{display:none} .hdr__in{gap:10px} .ic{width:44px;height:44px;min-width:44px} } @media(max-width:480px){ .filters{gap:7px}.chip{font-size:11.5px;padding:8px 12px} h1{font-size:clamp(1.9rem,1.4rem+3vw,2.6rem)} .wrap{padding-inline:16px} .stat b{font-size:clamp(1.9rem,1.4rem+2vw,2.6rem)} } @media(max-width:360px){ .stats{grid-template-columns:1fr 1fr;gap:24px 12px} .brand>svg,.brand>.brand__emblem{width:26px;height:26px} } @media print{ .hdr,.jnav,.search,.drawer,.sheet,.scrim2,.atmos,.rprog,.ft .fg,.ft .fb,.skip-link{display:none!important} html,body{background:#fff!important;color:#000!important} .page{display:none!important}.page.on{display:block!important} .card,.rowi{box-shadow:none!important;border:1px solid #ccc} a[href^="#"]::after{content:""} .prose{font-size:11.5pt;line-height:1.7} } /* ── visitors who need more contrast, and Windows High Contrast ── */ @media(prefers-contrast:more){ :root{--txt2:var(--ivory);--mut:#c9c3b4;--edge:rgba(255,255,255,.34)} html[data-world="manuscript"]{--txt2:#2d2418;--mut:#4a4032;--edge:#b9ad92;--acc-text:#5f4718} .card,.rowi,.state,.vid{border-width:1.5px} .ovl,.cap{opacity:1} } @media(forced-colors:active){ .atmos,.hall__glow,.watermark,.pimg{display:none} .card,.rowi,.state,.vid,.chip,.btn,.ic{border:1px solid CanvasText} .chip.on,.btn--p{forced-color-adjust:none;background:Highlight;color:HighlightText} .skel i::after{background:CanvasText} } @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:80ms!important} .reveal{opacity:1;transform:none} .plate .eng,.pimg{-webkit-mask-image:none;mask-image:none;opacity:1} .skel i::after{animation:none;transform:scaleX(1);opacity:.5} } /* ═══════════════════════════════════════════════════════════════════════════ THE POCKET INSTITUTION · 2026 royal mobile contract Mobile is composed for the hand: persistent destinations at the thumb, reading surfaces above them, and transient tools that unfold as chambers. ═══════════════════════════════════════════════════════════════════════════ */ @media(max-width:767px){ :root{--mobile-gutter:clamp(14px,4.3vw,20px);--mobile-dock:calc(78px + env(safe-area-inset-bottom))} html{scroll-padding-top:74px;overscroll-behavior-y:none} body{padding-bottom:var(--mobile-dock);-webkit-tap-highlight-color:transparent} body::after{content:"";position:fixed;z-index:69;inset-inline:0;bottom:0;height:calc(24px + env(safe-area-inset-bottom));pointer-events:none;background:var(--bg)} main{min-width:0;overflow:clip} .wrap,.container{padding-inline:var(--mobile-gutter)} section{scroll-margin-top:76px} button,a,input,select,textarea{touch-action:manipulation} input,select,textarea{font-size:16px!important} img,video,iframe,svg{max-width:100%} /* compact ceremonial header: only identity and immediate tools survive */ .hdr{position:sticky;top:0;border-bottom-color:color-mix(in srgb,var(--acc) 22%,var(--edge));box-shadow:0 8px 28px rgba(0,0,0,.12)} .hdr::after{content:"";position:absolute;inset-inline:18%;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent);opacity:.45} .hdr__in{padding-inline:var(--mobile-gutter);height:62px!important} .brand{min-width:0;gap:9px}.brand .nm{max-width:52vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tools{gap:3px}.tools .ic{border-color:transparent;background:transparent} .tools .ic:active,.burger:active{transform:scale(.9);background:color-mix(in srgb,var(--acc) 11%,transparent)} /* halls become pocket title plates, not short desktop billboards */ .hall{min-height:auto!important;padding-block:38px 32px} .hall::before{opacity:.55} .hall__in{padding-block:0!important} .hall h1{font-size:clamp(2rem,10vw,3.2rem);line-height:1.18} .hall__desc,.lede{font-size:14px;line-height:1.8;margin-top:12px} .crumb{padding-top:14px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}.crumb::-webkit-scrollbar{display:none} .rule{margin-block:16px} /* filter shelves scroll under one thumb and announce their edges */ .filters{position:relative;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:calc(-1 * var(--mobile-gutter));padding:12px var(--mobile-gutter);gap:8px;border-block:1px solid var(--edge)} .filters::-webkit-scrollbar{display:none}.filters .chip{flex:none;scroll-snap-align:start;min-height:40px} .filters .chip.on{box-shadow:0 7px 18px color-mix(in srgb,var(--acc) 13%,transparent)} /* archive holdings read as manuscript leaves rather than floating tiles */ .g2,.g3,.g4,.g5,.gauto{gap:12px} .card,.jewel,.state{border-radius:12px} .card{padding:20px 18px;box-shadow:0 12px 30px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.05)} .card:active{transform:scale(.985);border-color:color-mix(in srgb,var(--acc) 50%,var(--edge))} .bkrow,.list-item,.sres,.rank-item{min-height:68px;padding-block:13px;scroll-margin-top:78px} .bkrow:active,.list-item:active{background:color-mix(in srgb,var(--acc) 7%,transparent)} .stats{padding-block:24px;gap:22px 12px}.stat{min-width:0}.stat b,.stat__n{font-size:clamp(1.85rem,9vw,2.7rem)} /* document pages: source, body and actions form one uninterrupted leaf */ .doc,.volume-detail,.course,.lesson,.discussion{min-width:0} .doc__in,.doc__grid,.course__grid,.lesson__grid{grid-template-columns:1fr!important;gap:22px!important} .doc__m,.srail,.rtoc,.margin{position:static!important;width:100%;max-width:none} .article,.prose,.rtext{font-size:clamp(18px,5vw,21px);line-height:2;overflow-wrap:anywhere} .article p,.prose p,.rtext p{margin-bottom:1.15em} .cite,.metabox,.src,.trustbox{padding:17px 15px;border-radius:10px} pre,code,.mono{white-space:pre-wrap;word-break:break-word} table:not(.cw__t){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} /* media becomes a tactile black-glass stage */ .vid,.media-stage{border-radius:13px;overflow:hidden;box-shadow:0 20px 48px rgba(0,0,0,.34)} video.vid,.ytf,.series-video,.media-stage iframe,.media-stage video{width:100%;aspect-ratio:16/9;height:auto;object-fit:contain} audio{width:100%;min-height:46px} /* search and settings rise from the thumb zone */ .search{place-items:end center;padding:0} .search .box,.search__box{width:100%;max-width:none;border-radius:26px 26px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom));transform:translateY(105%)} .search.open .box,.search.open .search__box{transform:none} .sheet{border-radius:28px 28px 0 0;padding:11px var(--mobile-gutter) calc(26px + env(safe-area-inset-bottom));box-shadow:0 -30px 90px rgba(0,0,0,.48)} .drawer,html[dir="rtl"] .drawer,html[dir="ltr"] .drawer{inset:auto 8px 0;inset-inline:8px;width:auto;max-width:520px;max-height:min(82svh,720px);margin-inline:auto;padding:29px 20px calc(24px + env(safe-area-inset-bottom));border:1px solid color-mix(in srgb,var(--acc) 30%,var(--edge));border-bottom:0;border-radius:28px 28px 0 0;box-shadow:0 -30px 90px rgba(0,0,0,.48);transform:translateY(calc(100% + 24px));} .drawer::before{content:"";position:absolute;top:10px;left:50%;width:42px;height:4px;border-radius:3px;background:linear-gradient(90deg,var(--edge),var(--acc),var(--edge));transform:translateX(-50%);opacity:.72} .drawer::after{content:"";position:absolute;inset:20px 12px auto;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc) 55%,transparent),transparent);pointer-events:none} .drawer .mlink{min-height:50px;padding:10px 6px}.drawer .mlink i{border:1px solid color-mix(in srgb,var(--acc) 35%,var(--edge));border-radius:50%;width:31px;height:31px;display:grid;place-items:center;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 9%,transparent),transparent 72%)} /* five museum destinations, cut as one floating royal instrument */ .jnav{left:10px;right:10px;inset-inline:10px;bottom:calc(7px + env(safe-area-inset-bottom));height:67px;padding:7px 5px;align-items:center;border:1px solid color-mix(in srgb,var(--acc) 24%,var(--edge));border-radius:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--paper) 91%,transparent),color-mix(in srgb,var(--bg) 86%,transparent));-webkit-backdrop-filter:blur(22px) saturate(1.25);backdrop-filter:blur(22px) saturate(1.25);box-shadow:0 18px 52px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.08)} .jnav::before{content:"";position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--acc) 10%,transparent);border-radius:17px;pointer-events:none} .jnav a,.jnav button{position:relative;z-index:1;min-width:0;min-height:53px;flex:1;border-radius:15px;transition:transform .18s var(--paper-ease),color .2s,background .2s} .jnav a:active,.jnav button:active{transform:scale(.9)} .jnav a.on,.jnav button[aria-expanded="true"]{background:radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--acc) 18%,transparent),transparent 65%);text-shadow:0 0 16px color-mix(in srgb,var(--acc) 50%,transparent)} .jnav a.on::before,.jnav button[aria-expanded="true"]::before{content:"";position:absolute;top:-8px;left:50%;width:7px;height:7px;border:1px solid var(--acc);background:var(--bg);transform:translateX(-50%) rotate(45deg);box-shadow:0 0 12px var(--acc)} .jnav svg{width:20px;height:20px;filter:drop-shadow(0 4px 7px rgba(0,0,0,.14))}.jnav span{font-size:8.5px;white-space:nowrap} .jnav__menu{font:inherit} .ft{margin-top:42px}.ft .fg{gap:22px 18px}.ft .brandline{text-align:center}.ft .fb{padding-bottom:calc(8px + env(safe-area-inset-bottom))} } @media(max-width:390px){ .jnav{inset-inline:6px}.jnav a,.jnav button{min-height:51px}.jnav span{font-size:8px} .article,.prose,.rtext{font-size:18px}.hall{padding-block:32px 26px} } @media(display-mode:standalone) and (max-width:767px){ .hdr{padding-top:env(safe-area-inset-top)} .jnav{bottom:calc(5px + env(safe-area-inset-bottom))} } /* ══════════ البثُّ المباشر ══════════ The bar is inserted by live.js at the top of <body> on every page when a broadcast is running, and the frame is the live page's player. Both are written here rather than inline because this site's Content-Security-Policy forbids inline styles as firmly as it forbids inline script. */ .liveBar{display:flex;align-items:center;gap:10px;padding:9px 16px;text-decoration:none; background:#7a1420;color:#fff8ec;font-size:13.5px;line-height:1.4; border-bottom:1px solid rgba(255,255,255,.18)} .liveBar:hover{background:#8d1826} .liveBar__dot{width:9px;height:9px;border-radius:50%;background:#ff5a5a;flex:0 0 auto; box-shadow:0 0 0 0 rgba(255,90,90,.7);animation:liveBeat 1.9s ease-out infinite} .liveBar__k{font-weight:600;flex:0 0 auto} .liveBar__t{opacity:.92;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .liveBar__go{margin-inline-start:auto;flex:0 0 auto;text-decoration:underline;opacity:.95} /* The nav's own announcement: the «البثُّ المباشر» entries carry a dot that exists only while he is on air. live.js toggles .is-live; the markup ships the dot hidden. display carries !important because the drawer styles every <i> in a link as a numbered medallion — grid, border, size — and the dot is an <i> that must be none of that. */ .live-nav-dot{display:none!important} .is-live .live-nav-dot, [data-live-nav].is-live .live-nav-dot{display:inline-block!important;width:7px!important; height:7px!important;min-width:0;min-height:0;padding:0;border:0!important; border-radius:50%;background:#ff5a5a!important;margin-inline-start:6px; vertical-align:middle;font-size:0;line-height:0; box-shadow:0 0 0 0 rgba(255,90,90,.7);animation:liveBeat 1.9s ease-out infinite} @media(prefers-reduced-motion:reduce){.is-live .live-nav-dot{animation:none}} /* A pulse rather than a blink: blinking is an accessibility problem and this runs for hours. Honoured only where motion is welcome. */ @keyframes liveBeat{ 0%{box-shadow:0 0 0 0 rgba(255,90,90,.7)} 70%{box-shadow:0 0 0 9px rgba(255,90,90,0)} 100%{box-shadow:0 0 0 0 rgba(255,90,90,0)} } @media(prefers-reduced-motion:reduce){.liveBar__dot{animation:none}} @media(max-width:560px){.liveBar__t{display:none}} /* 16:9, held by aspect-ratio so the player never reflows the page as it loads. */ .live-frame{position:relative;aspect-ratio:16/9;width:100%;background:#000; border:1px solid var(--edge,rgba(0,0,0,.15));border-radius:10px;overflow:hidden} .live-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* ══════════ المشغِّلُ الأهليّ ══════════ The live player's own chrome, driven by live-player.js. The video inside is YouTube's; everything the reader can see or touch around it is this site's — poster, bar, badge, clock — drawn in the canonical tokens. Deliberately dark in BOTH worlds: a player is a room with the lights off, whatever page it stands on. */ .lp{border:1px solid var(--stone-line);border-radius:12px;overflow:hidden; background:var(--obsidian);box-shadow:0 18px 50px -22px rgba(0,0,0,.55)} /* The bar and the overlays are display:flex, which would silently beat the hidden attribute's own display:none — the UA rule loses to any author display. Restated here so hidden MEANS hidden inside the player, whatever the element's layout is. */ .lp [hidden]{display:none!important} .lp__stage{position:relative;aspect-ratio:16/9;background:var(--obsidian)} .lp__frame,.lp__ns{position:absolute;inset:0;width:100%;height:100%;border:0} /* The shield owns every tap on the picture, so a tap means what this site says it means — play or pause — and never opens the embed's own surface. It covers no control and no watermark: there is nothing under it but the picture. */ .lp__shield{position:absolute;inset:0;cursor:pointer} /* ── the poster ── */ .lp__poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:14px;text-align:center;padding:24px;cursor:pointer; color:var(--ivory); background: radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 60%), linear-gradient(175deg,var(--imperial),var(--obsidian) 70%)} .lp__poster::after{content:"";position:absolute;inset:10px;border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);border-radius:8px;pointer-events:none} .lp__poster-title{font-family:var(--font-head);font-size:clamp(17px,3.2vw,26px); line-height:1.6;max-width:34em;margin:0;color:var(--ivory)} .lp__start{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;cursor:pointer; border:1px solid var(--gold-antique);border-radius:999px;color:var(--on-gold); background:linear-gradient(180deg,var(--gold-champagne),var(--gold) 55%,var(--gold-antique)); font-family:var(--font-ui);font-size:15px;font-weight:600; box-shadow:0 10px 26px -10px color-mix(in srgb,var(--gold) 55%,transparent)} .lp__start:hover{filter:brightness(1.06)} .lp__start svg{width:18px;height:18px} /* Once the muted autoplay is confirmed running, the poster THINS: the live picture shows through immediately and only the badge and the sound button remain, low, out of the frame's way. Video first, sound on the first tap. */ .lp--peek .lp__poster{background:linear-gradient(180deg,transparent 55%, color-mix(in srgb,var(--obsidian) 82%,transparent));justify-content:flex-end; padding-bottom:30px;gap:10px} .lp--peek .lp__poster-title{display:none} .lp--peek .lp__poster::after{display:none} /* ── the badge: the site's colour of «now» ── */ .lp__badge{display:inline-flex;align-items:center;gap:7px;padding:4px 12px; border-radius:999px;background:#7a1420;color:#fff8ec; font-family:var(--font-ui);font-size:12.5px;font-weight:700;letter-spacing:.04em} .lp__badge i{width:8px;height:8px;border-radius:50%;background:#ff5a5a; box-shadow:0 0 0 0 rgba(255,90,90,.7);animation:liveBeat 1.9s ease-out infinite} @media(prefers-reduced-motion:reduce){.lp__badge i{animation:none}} /* ── the bar ── */ .lp__bar{display:flex;align-items:center;gap:12px;padding:10px 14px; background:linear-gradient(180deg,var(--graphite),var(--imperial)); border-top:1px solid var(--stone-line);color:var(--ivory)} .lp__badge--bar{flex:0 0 auto} .lp__clock{flex:0 0 auto;font-family:var(--font-ui);font-size:14px; font-variant-numeric:tabular-nums;color:var(--gold-champagne)} .lp__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;font-family:var(--font-ui);font-size:13.5px;color:var(--ivory-2)} .lp__btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;padding:0;cursor:pointer;border-radius:9px; border:1px solid var(--stone-line);background:var(--graphite-2);color:var(--ivory)} .lp__btn:hover{border-color:var(--gold-antique);color:var(--gold-champagne)} .lp__btn svg{width:19px;height:19px} /* Each button carries both of its states; the root's classes pick one. */ .lp .lp__i-pause,.lp--playing .lp__i-play{display:none} .lp--playing .lp__i-pause{display:block} .lp .lp__i-mut,.lp--muted .lp__i-snd{display:none} .lp--muted .lp__i-mut{display:block} .lp--muted #lpMute{border-color:#7a1420;color:#ff9d9d} .lp .lp__i-cmp,.lp--fs .lp__i-exp{display:none} .lp--fs .lp__i-cmp{display:block} /* ── the end, said in place ── */ .lp__ended{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:6px;text-align:center;padding:24px;color:var(--ivory); background:color-mix(in srgb,var(--obsidian) 86%,transparent)} .lp__ended p{margin:0;font-family:var(--font-head);font-size:20px} .lp__ended .cap{font-size:14px;color:var(--ivory-2)} /* ── fullscreen: the wrapper goes, the bar rides along ── */ .lp:fullscreen{display:flex;flex-direction:column;border:0;border-radius:0} .lp:fullscreen .lp__stage{flex:1 1 auto;aspect-ratio:auto} /* iPhones have no element fullscreen; .lp--pin is the same room built with position:fixed. */ .lp--pin{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column; border:0;border-radius:0} .lp--pin .lp__stage{flex:1 1 auto;aspect-ratio:auto} @media(max-width:560px){ .lp__name{display:none} .lp__bar{gap:9px;padding:9px 10px} .lp__btn{width:36px;height:36px} }