/* every : moment — isometric stack of Syria's presidential archive */
@font-face{font-family:"Tajawal";src:url(../fonts/Tajawal-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Tajawal";src:url(../fonts/Tajawal-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(../fonts/CourierPrime-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(../fonts/CourierPrime-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
:root{
  --bg:#EDECE9; --bg2:#F7F6F3; --ink:#141414; --mute:#8A8781; --line:#CFCBC4; --red:#D43A26;
  --sans:"Helvetica Neue","Tajawal",Arial,sans-serif; --ar:"Tajawal","Geeza Pro",sans-serif; --mono:"Courier Prime","Courier New",monospace;
  --cw:168px; --ch:112px; --gap:9px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body.every{margin:0;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,var(--bg2) 0,var(--bg) 70%);color:var(--ink);font:500 15px/1.45 var(--sans);-webkit-font-smoothing:antialiased;user-select:none}
html[dir="rtl"] body.every{font-family:var(--ar)}
[lang="ar"]{font-family:var(--ar)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
button{font:inherit;color:inherit}

/* top bar */
.ev-top{position:fixed;inset:0 0 auto 0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:22px clamp(16px,3vw,40px);pointer-events:none}
.ev-top>*{pointer-events:auto}
.ev-date{display:flex;flex-direction:column;gap:2px}
.ev-d{font:700 15px/1.1 var(--mono);letter-spacing:.04em}
.ev-who{font-size:13px;color:var(--mute);min-height:1.2em}
.ev-logo{justify-self:center;text-decoration:none;color:var(--ink);font-size:22px;font-weight:500;letter-spacing:-.01em;display:flex;gap:.28em;align-items:baseline;white-space:nowrap}
.ev-logo i{font-style:normal;color:var(--red)}
.ev-tools{justify-self:end;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ev-btn{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--line);background:rgba(255,255,255,.55);font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);cursor:pointer;border-radius:18px}
html[dir="rtl"] .ev-btn{font:700 13px/1 var(--ar);letter-spacing:0}
.ev-btn:hover,.ev-btn[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.ev-lang{font:700 13px/1 var(--ar);letter-spacing:0;text-transform:none}

/* stage */
.ev-wrap{position:fixed;inset:0;outline:none;cursor:grab;touch-action:none}
.ev-wrap:active{cursor:grabbing}
.ev-wrap:focus-visible{outline:2px solid var(--red);outline-offset:-6px}
.ev-scene{position:absolute;inset:0;perspective:9000px;perspective-origin:50% 45%;overflow:hidden}
.ev-stage{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:translate3d(-2%,2%,0) rotateX(58deg) rotateZ(48deg)}
.ev-track{position:absolute;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.22,.8,.22,1)}
.card{position:absolute;left:calc(var(--cw) / -2);top:calc(var(--ch) * -1);width:var(--cw);height:var(--ch);transform-origin:50% 100%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.22,.8,.22,1),opacity .4s;cursor:pointer;background:#ddd}
.card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.card::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);pointer-events:none}
.card.k-flag{background:#fff}
.card.on{box-shadow:0 0 0 3px #fff,0 0 0 4px var(--red)}

/* spread view */
.spread .ev-stage{transform:translate3d(-6%,2%,0) scale(.82) rotateX(56deg) rotateZ(40deg)}
.spread .card{box-shadow:0 1px 0 rgba(0,0,0,.08)}
.spread .card.on{box-shadow:0 0 0 3px #fff,0 0 0 4px var(--red),0 30px 40px -10px rgba(0,0,0,.35)}

/* veils keep the UI readable over the photos */
.ev-veil{position:fixed;left:0;right:0;z-index:12;pointer-events:none}
.ev-veil.top{top:0;height:120px;background:linear-gradient(var(--bg) 35%,rgba(237,236,233,0))}
.ev-veil.bot{bottom:0;height:260px;background:linear-gradient(rgba(237,236,233,0),var(--bg) 62%)}
.ev-veil.side{top:0;bottom:0;left:auto;right:0;width:300px;height:auto;background:linear-gradient(90deg,rgba(237,236,233,0),var(--bg) 55%)}
html[dir="rtl"] .ev-veil.side{right:auto;left:0;background:linear-gradient(270deg,rgba(237,236,233,0),var(--bg) 55%)}
.ev-veil{opacity:0;transition:opacity .4s}
.spread .ev-veil{opacity:1}
.ev-veil.bot,.ev-veil.top{opacity:.85}
.spread .ev-veil.bot,.spread .ev-veil.top{opacity:1}
@media (max-width:820px){.ev-veil.side{display:none}.ev-veil.top{height:150px}}
/* caption */
.ev-cap{position:fixed;z-index:15;inset-inline-start:clamp(16px,3vw,40px);bottom:96px;width:min(380px,calc(100vw - 32px));pointer-events:auto}
.ev-kind{margin:0 0 8px;display:flex;gap:8px;align-items:center;font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
html[dir="rtl"] .ev-kind{font:700 13px/1 var(--ar);letter-spacing:0}
.ev-kind b{background:var(--ink);color:#fff;padding:4px 7px;font-weight:700}
.ev-kind b.flag{background:var(--red)}
.ev-title{margin:0;font:700 20px/1.25 var(--sans);text-transform:none}
.ev-note{margin:6px 0 0;color:var(--mute);font-size:14px;min-height:1.4em}
.ev-note [lang="ar"]{font-size:16px}
.ev-open{margin-top:12px;display:inline-flex;gap:6px;align-items:center;min-height:36px;padding:0 14px;border:0;border-radius:18px;background:var(--red);color:#fff;font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
html[dir="rtl"] .ev-open{font:700 13px/1 var(--ar);letter-spacing:0}
.ev-open:hover{background:var(--ink)}

/* index */
.ev-index{position:fixed;z-index:15;inset-inline-end:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);max-height:calc(100vh - 220px);overflow:auto;scrollbar-width:none}
.ev-index::-webkit-scrollbar{display:none}
.ev-index ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
html[dir="rtl"] .ev-index ol{align-items:flex-start}
.ev-index button{border:0;background:none;padding:3px 0;display:flex;gap:10px;align-items:center;cursor:pointer;color:var(--mute);font-size:12px;line-height:1.2;text-align:end}
.ev-index button::after{content:"";width:14px;height:1px;background:currentColor;transition:width .3s}
html[dir="rtl"] .ev-index button{flex-direction:row}
.ev-index button:hover{color:var(--ink)}
.ev-index button.on{color:var(--ink);font-weight:700}
.ev-index button.on::after{width:34px;background:var(--red);height:2px}
.ev-index .y{font:700 10px/1 var(--mono);color:var(--mute);direction:ltr}

/* controls */
.ev-ctrl{position:fixed;z-index:16;inset-inline-end:clamp(16px,3vw,40px);bottom:86px;display:flex;align-items:center;gap:6px}
.ev-count{font:700 12px/1 var(--mono);margin-inline-end:8px;color:var(--mute)}
.ev-ic{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.6);display:grid;place-items:center;cursor:pointer;font-size:24px;line-height:1}
.ev-ic:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.ev-play{background:var(--ink);color:#fff;border-color:var(--ink)}
.ev-play .pl{width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent currentColor;margin-left:3px}
.ev-play[aria-pressed="true"] .pl{width:11px;height:13px;border:0;border-left:4px solid currentColor;border-right:4px solid currentColor;margin:0}
html[dir="rtl"] .arr{display:inline-block;transform:scaleX(-1)}

/* bottom bar */
.ev-bar{position:fixed;z-index:15;left:clamp(16px,3vw,40px);right:clamp(16px,3vw,40px);bottom:18px}
.ev-ticks{position:relative;height:18px}
.ev-ticks span{position:absolute;bottom:0;transform:translateX(-50%);font:700 10px/1 var(--mono);color:var(--mute)}
.ev-ticks i{position:absolute;bottom:-14px;width:1px;height:6px;background:var(--line)}
.ev-bar input{width:100%;-webkit-appearance:none;appearance:none;height:30px;background:transparent;cursor:pointer;margin:0}
.ev-bar input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--ink) var(--p,0%),var(--line) var(--p,0%))}
.ev-bar input::-moz-range-track{height:2px;background:var(--line)}
.ev-bar input::-moz-range-progress{height:2px;background:var(--ink)}
.ev-bar input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-6px;border-radius:50%;background:var(--red);border:3px solid #fff;box-shadow:0 0 0 1px var(--ink)}
.ev-bar input::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--red);border:3px solid #fff}

/* viewer */
.ev-view{max-width:min(1100px,calc(100vw - 24px));max-height:calc(100vh - 24px);padding:0;border:0;background:#fff;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.ev-view::backdrop{background:rgba(237,236,233,.86);backdrop-filter:blur(4px)}
.ev-view figure{margin:0;display:flex;flex-direction:column}
.ev-view img{max-width:100%;max-height:calc(100vh - 170px);object-fit:contain;margin:0 auto;background:#f2f2f2}
.ev-view figcaption{padding:16px 20px 20px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.v-date{font:700 13px/1 var(--mono);color:var(--red)}
.ev-view strong{font-size:18px}
.ev-view figcaption span:not(.v-date){color:var(--mute)}
.ev-view a{margin-inline-start:auto;font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
html[dir="rtl"] .ev-view a{font:700 13px/1 var(--ar);letter-spacing:0}
.ev-x{position:absolute;top:8px;inset-inline-end:8px;width:40px;height:40px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:24px;cursor:pointer;z-index:2}

@media (prefers-reduced-motion:reduce){.ev-track,.card{transition:none}}
@media (max-width:820px){
  :root{--cw:118px;--ch:79px;--gap:6px}
  .ev-top{grid-template-columns:1fr auto;row-gap:10px;padding:14px 16px}
  .ev-logo{grid-column:1/-1;grid-row:1;justify-self:center;font-size:20px}
  .ev-date{grid-row:2}
  .ev-tools{grid-row:2}
  .ev-tools a.ev-btn{display:none}
  .ev-index{display:none}
  .ev-cap{bottom:124px;width:calc(100vw - 32px)}
  .ev-title{font-size:17px}
  .ev-ctrl{bottom:66px}
  .ev-open{position:absolute;inset-inline-start:0;bottom:-58px;margin:0}
  .ev-count{display:none}
  .ev-stage{transform:translate3d(0,-4%,0) rotateX(58deg) rotateZ(48deg)}
}