/* Base reset (matches the environment the magazine was designed in) */
:root{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;font-size:14px}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: a bound book on a dark desk. Desktop = two-page spread turning right-to-left around a central spine;
   phone = one page at a time, swiped. Every page is a fixed 0.74 sheet; type inside scales with the sheet (cqw). */
:root{
  --desk:#0c120f; --desk-2:#16201b;
  --forest:#16261e; --forest-deep:#0e1a14; --sand:#1c1711;
  --gold:#b8935a; --gold-hi:#d9bf8f;
  --ivory:#f2ecdf; --ivory-2:#e6ddca; --ink:#1c211d; --ink-soft:#5d5b50; --rule:#cdbf9f;
  --f-display:"Reem Kufi","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"Markazi Text","Noto Naskh Arabic","Times New Roman",serif;
  --f-script:"Aref Ruqaa","Markazi Text",serif;
  --f-latin:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-ui:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ratio:.74; --pw:420px; --ph:568px;
  color-scheme:dark;
}
html,body{height:100%}
body{margin:0;background:radial-gradient(120% 90% at 50% 40%,var(--desk-2),var(--desk) 70%);color:var(--ivory);font-family:var(--f-ui);overflow:hidden;-webkit-font-smoothing:antialiased}
.app{height:100%;display:grid;grid-template-rows:auto 1fr auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));box-sizing:border-box}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}

/* ---------- chrome ---------- */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px 6px;min-width:0}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0;white-space:nowrap;overflow:hidden}
.brand b{font-family:var(--f-display);font-weight:600;font-size:17px;color:var(--ivory)}
.brand span{font-size:12px;color:var(--gold);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis}
.tools{display:flex;gap:6px;flex:none}
.tbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:17px;border:1px solid rgba(217,191,143,.28);background:rgba(22,38,30,.6);cursor:pointer;font-size:13px}
.tbtn:hover{border-color:var(--gold)}
.tbtn svg{width:16px;height:16px}
.toc-pop{position:absolute;top:52px;inset-inline-end:max(16px,env(safe-area-inset-right,0px));z-index:900;width:min(320px,calc(100vw - 32px));background:var(--forest-deep);border:1px solid rgba(217,191,143,.3);border-radius:10px;padding:8px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.toc-pop button{display:flex;width:100%;justify-content:space-between;gap:12px;padding:10px 12px;background:none;border:0;border-radius:6px;cursor:pointer;text-align:start;font-size:14px}
.toc-pop button:hover{background:rgba(184,147,90,.14)}
.toc-pop button i{font-style:normal;color:var(--gold);font-variant-numeric:tabular-nums}
.stage{position:relative;min-height:0;display:flex;align-items:center;justify-content:center}
.foot{display:flex;align-items:center;justify-content:center;gap:14px;padding-block:6px 14px}
.nav{width:42px;height:42px;border-radius:50%;border:1px solid rgba(217,191,143,.35);background:rgba(22,38,30,.6);cursor:pointer;display:grid;place-items:center}
.nav:hover:not(:disabled){background:var(--gold);color:var(--forest-deep)}
.nav:disabled{opacity:.3;cursor:default}
.nav svg{width:18px;height:18px}
.meter{display:grid;gap:6px;justify-items:center;min-width:150px}
.meter output{font-size:13px;color:var(--ivory-2);font-variant-numeric:tabular-nums}
.meter output em{font-style:normal;color:var(--gold)}
.track{width:min(260px,40vw);height:3px;background:rgba(242,236,223,.14);border-radius:2px;overflow:hidden}
.track i{display:block;height:100%;width:0;background:var(--gold);margin-inline-start:0;transition:width .5s}

/* ---------- desktop book ---------- */
.book{position:relative;width:calc(var(--pw)*2);height:var(--ph);perspective:calc(var(--pw)*5)}
.book-in{position:absolute;inset:0;transition:transform .9s cubic-bezier(.645,.045,.355,1)}
.book-in::before{content:"";position:absolute;inset:2% 1% -2.5%;background:rgba(0,0,0,.55);filter:blur(22px);border-radius:8px;z-index:-1;transition:inset .9s}
.book.at-start .book-in::before{inset:2% 51% -2.5% 1%}
.book.at-end .book-in::before{inset:2% 1% -2.5% 51%}
.leaf{position:absolute;top:0;left:0;width:var(--pw);height:var(--ph);transform-origin:100% 50%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.645,.045,.355,1);will-change:transform;touch-action:none;user-select:none;-webkit-user-select:none}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;cursor:pointer}
.face.back{transform:rotateY(180deg)}
.face::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:50}
.face.front::after{background:linear-gradient(to left,rgba(0,0,0,.32),rgba(0,0,0,.08) 4%,transparent 10%),linear-gradient(to right,rgba(255,255,255,.05),transparent 3%)}
.face.back::after{background:linear-gradient(to right,rgba(0,0,0,.32),rgba(0,0,0,.08) 4%,transparent 10%),linear-gradient(to left,rgba(255,255,255,.05),transparent 3%)}
.face.cover::after,.face.backcover::after{background:linear-gradient(to left,rgba(0,0,0,.25),transparent 3%)}
.face.backcover::after{background:linear-gradient(to right,rgba(0,0,0,.25),transparent 3%)}
.face .shade{position:absolute;inset:0;pointer-events:none;z-index:51;opacity:var(--sh,0);background:linear-gradient(to left,rgba(0,0,0,.55),rgba(0,0,0,.1))}
.face.back .shade{background:linear-gradient(to right,rgba(0,0,0,.55),rgba(0,0,0,.1))}
.leaf.anim .shade{animation:sheen .9s ease-in-out}
@keyframes sheen{0%,100%{opacity:0}50%{opacity:.6}}
.curl{position:absolute;bottom:0;width:0;height:0;z-index:52;pointer-events:none;transition:width .25s,height .25s}
.face.front .curl{left:0;background:linear-gradient(45deg,var(--ivory-2) 0 48%,rgba(0,0,0,.35) 50%,transparent 56%)}
.face.back .curl{right:0;background:linear-gradient(-45deg,var(--ivory-2) 0 48%,rgba(0,0,0,.35) 50%,transparent 56%)}
.face:hover .curl{width:7%;height:calc(7% * var(--ratio))}
.leaf.drag .curl,.leaf.anim .curl{width:0;height:0}

/* ---------- phone reel ---------- */
.reel{position:absolute;inset:0;display:flex;align-items:center;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding-inline:calc((100% - var(--pw))/2);scrollbar-width:none;overscroll-behavior-x:contain}
.reel::-webkit-scrollbar{display:none}
.slide{flex:0 0 auto;width:var(--pw);height:var(--ph);scroll-snap-align:center;position:relative;box-shadow:0 14px 34px rgba(0,0,0,.5);border-radius:3px;overflow:hidden}

/* ---------- page base ---------- */
#pages{display:none}
.pg{position:relative;width:100%;height:100%;overflow:hidden;container-type:size;box-sizing:border-box;font-family:var(--f-body);direction:rtl}
.paper{background:linear-gradient(160deg,var(--ivory),var(--ivory-2));color:var(--ink)}
.green{background:radial-gradient(120% 80% at 30% 0%,#1d3227,var(--forest) 55%,var(--forest-deep));color:var(--ivory)}
.night{background:var(--forest-deep);color:var(--ivory)}
.warm{background:radial-gradient(110% 80% at 70% 10%,#2a2217,var(--sand) 60%,#120f0b);color:var(--ivory)}
.folio{position:absolute;bottom:4.2cqw;font:500 2.2cqw/1 var(--f-ui);letter-spacing:.08em;opacity:.7;z-index:5}
.face.front .folio{left:6cqw}.face.back .folio{right:6cqw}.slide .folio{left:50%;transform:translateX(-50%)}
.pad{position:absolute;inset:9cqw 9cqw 11cqw;display:flex;flex-direction:column}
.kick{font:500 2.3cqw/1.4 var(--f-ui);letter-spacing:.06em;color:var(--gold)}
.paper .kick{color:#8a6a35}
.h1{font:600 10cqw/1.15 var(--f-display);margin:2cqw 0 0;text-wrap:balance}
.h2{font:600 6.4cqw/1.2 var(--f-display);margin:1.5cqw 0 0;text-wrap:balance}
.h3{font:600 3cqw/1.3 var(--f-display);margin:0 0 1.2cqw;color:var(--gold)}
.paper .h3{color:#8a6a35}
.latin{font-family:var(--f-latin);direction:ltr;unicode-bidi:isolate}
p,.body{font-size:3.85cqw;line-height:1.55;margin:0}
.small{font-size:3.2cqw;line-height:1.5}
.rule{height:1px;background:currentColor;opacity:.2;margin:4cqw 0}
.gold-rule{width:12cqw;height:.35cqw;background:var(--gold);margin:4cqw 0}
.list{list-style:none;margin:0;padding:0;display:grid;gap:1.2cqw}
.list li{font-size:3.6cqw;line-height:1.4;display:flex;gap:2cqw;align-items:baseline}
.list li::before{content:"";flex:none;width:1.3cqw;height:1.3cqw;border:.3cqw solid var(--gold);transform:rotate(45deg) translateY(-.4cqw)}
.chips{display:flex;flex-wrap:wrap;gap:1.4cqw}
.chips span{font:500 2.6cqw/1 var(--f-ui);padding:1.4cqw 2.4cqw;border:1px solid currentColor;border-radius:4cqw;opacity:.85}
.note{font:400 2.5cqw/1.6 var(--f-ui);opacity:.75;border-top:1px solid currentColor;padding-top:2.4cqw;margin-top:auto}
.note.soft{border-top-color:rgba(184,147,90,.5)}

/* art pages */
.art{background:var(--forest-deep);color:var(--ivory)}
.art figure{margin:0;position:absolute;inset:0 0 10.5cqw 0}
.art.framed figure{inset:6cqw 6cqw 14cqw}
.art figure img,.wide figure img{width:100%;height:100%;object-fit:contain;display:block;cursor:zoom-in}
.art.ivoryfill{background:#f4f2ee}
.cap{position:absolute;inset:auto 0 0 0;height:10.5cqw;display:flex;align-items:center;gap:2.6cqw;padding-inline:5cqw;box-sizing:border-box;font-family:var(--f-ui);background:var(--forest-deep);color:var(--ivory)}
.art.framed .cap,.wide .cap{background:transparent;height:14cqw}
.cap .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:.6cqw}
.cap .t small{font-size:2cqw;color:var(--gold);letter-spacing:.05em}
.cap .t b{font:600 3.1cqw/1.2 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap .fol{font:500 2.2cqw/1 var(--f-ui);opacity:.7;order:99;letter-spacing:.08em}
.face.back .cap .fol{order:-1}
.zbtn{flex:none;width:6.6cqw;height:6.6cqw;min-width:26px;min-height:26px;border-radius:50%;border:1px solid rgba(217,191,143,.5);background:transparent;display:grid;place-items:center;cursor:zoom-in;padding:0;color:var(--gold-hi)}
.zbtn svg{width:55%;height:55%}
.zbtn:hover{background:var(--gold);color:var(--forest-deep)}

/* spread halves */
.spread .sp-in{position:absolute;top:6cqw;bottom:14cqw;width:200cqw;padding-inline:5cqw;box-sizing:border-box}
.half-r .sp-in{right:0}.half-l .sp-in{left:0}
.spread .sp-in img{width:100%;height:100%;object-fit:contain;display:block;cursor:zoom-in}
.wide figure{margin:0;position:absolute;inset:14cqw 5cqw 16cqw}
.wide .hint{position:absolute;top:5cqw;inset-inline:5cqw;font:500 2.6cqw/1.4 var(--f-ui);color:var(--gold)}

/* cover */
.cover-pg .frame{position:absolute;inset:4cqw;border:.25cqw solid rgba(217,191,143,.45)}
.cover-pg .frame::after{content:"";position:absolute;inset:1.2cqw;border:1px solid rgba(217,191,143,.2)}
.cover-pg .top{position:absolute;top:8cqw;inset-inline:9cqw;display:flex;justify-content:space-between;font:500 2.3cqw/1 var(--f-ui);letter-spacing:.08em;color:var(--gold-hi)}
.arch{position:absolute;top:16cqw;left:50%;transform:translateX(-50%);width:54cqw;height:64cqw;border-radius:27cqw 27cqw 0 0;overflow:hidden;box-shadow:0 0 0 .5cqw var(--forest),0 0 0 .8cqw rgba(217,191,143,.6)}
.arch img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block}
.cover-pg .name{position:absolute;top:83cqw;inset-inline:0;text-align:center}
.cover-pg .name h1{font:700 14.5cqw/1 var(--f-display);margin:0;color:var(--ivory);letter-spacing:-.01em}
.cover-pg .name .latin{display:block;margin-top:2.6cqw;font-size:3.2cqw;letter-spacing:.42em;color:var(--gold-hi)}
.cover-pg .name .sub{display:block;margin-top:2.2cqw;font:500 3.4cqw/1 var(--f-ui);color:var(--ivory-2)}
.coverlines{position:absolute;bottom:9cqw;inset-inline:9cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw;border-top:1px solid rgba(217,191,143,.35);padding-top:3cqw}
.coverlines div{font:400 2.3cqw/1.45 var(--f-ui);color:var(--ivory-2)}
.coverlines b{display:block;font:600 2.9cqw/1.3 var(--f-display);color:var(--gold-hi)}

/* toc */
.toc-list{display:grid;margin-top:5cqw}
.toc-row{display:grid;grid-template-columns:9cqw 1fr auto;align-items:baseline;gap:2.5cqw;padding:2.5cqw 0;border-top:1px solid var(--rule);background:none;border-inline:0;border-bottom:0;text-align:start;cursor:pointer;color:inherit;font:inherit;width:100%}
.toc-row:last-child{border-bottom:1px solid var(--rule)}
.toc-row:hover .tt{color:#8a6a35}
.toc-row .n{font:600 4.4cqw/1 var(--f-display);color:#a58448}
.toc-row .tt{font:600 3.9cqw/1.25 var(--f-display);display:block}
.toc-row .dd{font-size:3cqw;line-height:1.35;color:var(--ink-soft);display:block;margin-top:.6cqw}
.toc-row .pp{font:500 2.8cqw/1 var(--f-ui);color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* intro */
.quote{font:700 11.5cqw/1.35 var(--f-script);color:var(--ink);margin:7cqw 0 0}
.lede{font:600 4.6cqw/1.35 var(--f-display);margin:0 0 2.5cqw}
.sign{font:400 3.2cqw/1 var(--f-ui);color:var(--ink-soft);margin-top:4cqw}

/* openers */
.big-latin{font:500 15cqw/.95 var(--f-latin);letter-spacing:.08em;margin:3cqw 0 0;text-align:right}
.tag-latin{font:500 2.8cqw/1 var(--f-latin);letter-spacing:.32em;color:var(--gold-hi);margin-top:2.4cqw}
.feat{display:grid;grid-template-columns:repeat(2,1fr);gap:2cqw 4cqw}
.feat div{font-size:3.3cqw;line-height:1.3;border-top:1px solid rgba(217,191,143,.35);padding-top:1.6cqw}
.heads{display:grid;gap:1.6cqw}
.heads q{font:500 4.1cqw/1.35 var(--f-display);quotes:"«" "»";display:block}
.swatches{display:flex;gap:3cqw}
.sw{flex:1;display:grid;gap:1.4cqw;font:500 2.1cqw/1.2 var(--f-ui);letter-spacing:.06em}
.sw i{display:block;height:8cqw;border:1px solid rgba(217,191,143,.4)}
.notes-row{display:flex;justify-content:space-between;font:500 3cqw/1 var(--f-latin);letter-spacing:.2em;color:var(--gold-hi);border-block:1px solid rgba(217,191,143,.3);padding-block:2.6cqw}

/* logos */
.lg-index{display:grid;grid-template-columns:1fr 1fr;gap:2.6cqw 5cqw;margin-top:4cqw}
.lg-index div{border-top:1px solid rgba(217,191,143,.3);padding-top:1.6cqw}
.lg-index b{font:600 4cqw/1.2 var(--f-display);display:block}
.lg-index span{font-size:3cqw;opacity:.75}
.lg-index .latin{font-size:2.6cqw;letter-spacing:.2em;color:var(--gold-hi);opacity:1;display:block;margin-top:.6cqw}
.gal{position:absolute;inset:7cqw 7cqw 11cqw;display:grid;grid-template-rows:repeat(3,1fr);gap:3cqw}
.lg{display:grid;grid-template-columns:36cqw 1fr;gap:5cqw;align-items:center;border-bottom:1px solid rgba(217,191,143,.18);min-height:0}
.lg:last-child{border-bottom:0}
.lg img{width:36cqw;height:36cqw;object-fit:contain;cursor:zoom-in;display:block}
.lg b{font:600 5.2cqw/1.1 var(--f-display);display:block}
.lg .latin{font-size:2.6cqw;letter-spacing:.24em;color:var(--gold-hi);display:block;margin:1cqw 0 1.6cqw}
.lg p{font-size:3.4cqw;line-height:1.4;opacity:.85}
.lg .fld{font:500 2.3cqw/1 var(--f-ui);color:var(--gold);letter-spacing:.04em;display:block;margin-bottom:1cqw}

/* closing */
.skills{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6cqw 4cqw}
.skills span{font-size:3.6cqw;border-bottom:1px solid var(--rule);padding-bottom:1.2cqw}
.facts{display:grid;gap:2cqw}
.facts div{display:grid;grid-template-columns:1fr;gap:.4cqw}
.facts b{font:600 3.4cqw/1.3 var(--f-display)}
.facts span{font-size:3.3cqw;color:var(--ink-soft);line-height:1.35}
.site{display:inline-flex;align-items:center;gap:2cqw;font:500 4cqw/1 var(--f-latin);letter-spacing:.04em;color:var(--gold-hi);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:1.2cqw;align-self:flex-start;direction:ltr}
.back-pg{display:grid;place-items:center;text-align:center}
.back-pg .inner{display:grid;gap:3cqw;justify-items:center;padding:12cqw}
.back-pg .mini-arch{width:16cqw;height:20cqw;border:.3cqw solid rgba(217,191,143,.6);border-bottom:0;border-radius:8cqw 8cqw 0 0}
.back-pg q{font:400 6.2cqw/1.5 var(--f-script);quotes:none;color:var(--ivory)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:1000;background:#060a08;display:grid;grid-template-rows:auto 1fr auto}
.lb-top,.lb-bot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px))}
.lb-top{padding-top:calc(12px + env(safe-area-inset-top,0px))}
.lb-bot{justify-content:center;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.lb-cap{min-width:0}
.lb-cap small{display:block;font-size:12px;color:var(--gold)}
.lb-cap b{font:600 16px/1.3 var(--f-display);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-view{position:relative;overflow:hidden;touch-action:none;cursor:grab}
.lb-view.grabbing{cursor:grabbing}
.lb-view img{position:absolute;top:50%;left:50%;max-width:none;transform-origin:0 0;user-select:none;-webkit-user-drag:none;transition:transform .25s ease}
.lb-view.live img{transition:none}
.lb-view.checker img{background:#1c211d}
.lb .cnt{font-size:13px;color:var(--ivory-2);font-variant-numeric:tabular-nums;min-width:64px;text-align:center}
@media (prefers-reduced-motion:reduce){.leaf,.book-in,.book-in::before,.lb-view img{transition-duration:.01s!important}.leaf.anim .shade{animation:none}}