:root { --ink:#070303; --bone:#f5ede7; --blood:#d00b17; --wine:#7f0710; --ember:#ff2634; --line:rgba(255,255,255,.17); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--bone); background:radial-gradient(circle at 80% 12%,rgba(111,0,8,.34),transparent 33rem),linear-gradient(145deg,#030202 0%,#0c0304 55%,#160305 100%); font-family:Inter,Arial,sans-serif; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.018) 50%,transparent 50.2%); opacity:.7; }
.noise { position:fixed; inset:0; z-index:10; pointer-events:none; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.ember { position:fixed; width:28rem; height:28rem; border-radius:50%; filter:blur(100px); pointer-events:none; opacity:.16; background:var(--blood); }
.ember-one { top:-12rem; right:-10rem; } .ember-two { bottom:-18rem; left:-14rem; opacity:.1; }
.page-shell { position:relative; width:min(1480px,calc(100% - 72px)); margin:0 auto; }
.topbar { min-height:104px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { color:inherit; text-decoration:none; display:inline-flex; align-items:baseline; gap:18px; }
.brand-en { font:600 1.5rem "Cormorant Garamond",Georgia,serif; letter-spacing:.18em; }
.brand-ar { color:#e02831; font:500 .83rem "Noto Kufi Arabic",sans-serif; }
.edition,.eyebrow,.status,.signal-label,footer { font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; }
.edition { color:#9c8f8a; }
.hero { min-height:calc(100vh - 104px); padding:72px 0 62px; display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,.78fr); gap:clamp(48px,8vw,130px); align-items:center; }
.hero-copy { position:relative; z-index:2; }
.eyebrow { margin:0 0 34px; color:#b4a6a0; display:flex; align-items:center; gap:14px; }
.eyebrow span { width:40px; height:1px; background:var(--blood); }
h1 { margin:0; max-width:760px; font:500 clamp(4.5rem,8.6vw,9.7rem)/.75 "Cormorant Garamond",Georgia,serif; letter-spacing:-.055em; text-wrap:balance; }
h1 em { color:var(--ember); font-weight:500; text-shadow:0 0 36px rgba(208,11,23,.25); }
.descriptor { margin:44px 0 0; font:500 clamp(1.5rem,2.2vw,2.2rem)/1.08 "Cormorant Garamond",Georgia,serif; letter-spacing:.015em; }
.intro { max-width:540px; margin:24px 0 0; color:#a99d98; font-size:.94rem; font-weight:300; line-height:1.8; }
.status { margin-top:34px; display:inline-flex; align-items:center; gap:11px; color:#d7cbc5; }
.pulse { width:7px; height:7px; border-radius:50%; background:var(--ember); box-shadow:0 0 0 0 rgba(255,38,52,.6); animation:pulse 2.2s infinite; }
.poster-wrap { position:relative; width:min(100%,520px); margin:0 0 0 auto; transform:rotate(1.4deg); }
.poster-wrap::before { content:""; position:absolute; inset:-13px; border:1px solid rgba(232,34,45,.35); transform:rotate(-2.2deg); }
.poster-wrap img { position:relative; z-index:1; display:block; width:100%; height:auto; filter:saturate(.94) contrast(1.04); box-shadow:0 35px 100px rgba(0,0,0,.65),0 0 70px rgba(164,0,10,.14); }
.poster-glow { position:absolute; inset:10% -10% 0; background:var(--wine); filter:blur(80px); opacity:.38; }
figcaption { margin-top:20px; color:#7f7470; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; text-align:right; }
.signal { display:grid; grid-template-columns:70px minmax(0,1fr) auto; gap:26px; align-items:start; padding:54px 0 60px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.signal-number,.signal-label { margin:0; color:var(--blood); }
.signal-number { font:500 1.1rem "Cormorant Garamond",serif; }
.signal-copy { max-width:760px; margin:14px 0 0; font:500 clamp(1.6rem,3vw,3.2rem)/1.1 "Cormorant Garamond",serif; }
.signal-mark { margin:0; color:#4a191d; font:700 clamp(2rem,5vw,5.5rem)/1 "Noto Kufi Arabic",sans-serif; }
footer { min-height:116px; display:flex; align-items:center; justify-content:space-between; gap:26px; color:#6f6662; }
footer a { color:#a59994; text-decoration:none; } footer a:hover,footer a:focus-visible { color:var(--ember); }
@keyframes pulse { 70% { box-shadow:0 0 0 10px rgba(255,38,52,0); } 100% { box-shadow:0 0 0 0 rgba(255,38,52,0); } }
@media (max-width:920px) { .page-shell{width:min(100% - 38px,760px)} .hero{grid-template-columns:1fr;padding-top:56px;gap:72px} .poster-wrap{width:min(88%,480px);margin:0 auto} .signal{grid-template-columns:46px 1fr} .signal-mark{display:none} }
@media (max-width:560px) { .topbar{min-height:84px}.brand{gap:10px}.brand-en{font-size:1.05rem}.brand-ar{font-size:.66rem}.edition{display:none}.hero{min-height:auto;padding:48px 0 52px}.eyebrow{margin-bottom:28px}h1{font-size:clamp(4rem,22vw,6.4rem)}.descriptor{margin-top:34px}.intro{font-size:.88rem}.poster-wrap{width:94%}.signal{padding:42px 0;grid-template-columns:1fr;gap:16px}.signal-number{display:none}footer{padding:34px 0;min-height:auto;align-items:flex-start;flex-direction:column} }
@media (prefers-reduced-motion:reduce) { *{scroll-behavior:auto!important}.pulse{animation:none} }