/* PINDIS case — Swiss baseline v20 system tokens.
   Work first. Grid felt, not seen. UI never louder than the work. */

@font-face{font-family:Vazirmatn;src:url("assets/v1/vazirmatn-arabic.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Vazirmatn;src:url("assets/v1/vazirmatn-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-024F}

:root{
  --paper:#0a0a0c;          /* page */
  --surface:#101014;
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.07);
  --ink:#f2f1ee;            /* primary text */
  --ink-2:#a3a3ab;          /* secondary text */
  --ink-3:#6e6e78;          /* metadata */
  --accent:#ed2024;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:112px;
  --gut:clamp(20px,4vw,64px);
  --max:1320px;
  --ease:cubic-bezier(.2,.6,.2,1);
}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Vazirmatn,system-ui,sans-serif;font-variation-settings:"wght" 400;
  font-size:17px;line-height:1.85;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
html[lang="en"] body{line-height:1.7;letter-spacing:-.005em}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:#fff}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.04em}
html[dir="rtl"] .mono{direction:ltr;unicode-bidi:isolate}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:min(100% - 2*var(--gut),var(--max));margin-inline:auto}

/* ── header (shared system) ─────────────────────────────── */
.site-head{position:sticky;top:0;z-index:40;background:rgba(10,10,12,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft)}
.site-head .bar{display:flex;align-items:center;gap:var(--s5);min-height:56px}
.brand{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:650}
.brand .dot{width:7px;height:7px;background:var(--accent);flex:none}
.site-nav{display:flex;gap:var(--s5);margin-inline-start:auto;font-size:14px;color:var(--ink-2)}
.site-nav a{padding:4px 0;border-bottom:1px solid transparent}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.lang{font-family:var(--mono);font-size:11px;color:var(--ink-2);padding:5px 9px;border:1px solid var(--line)}
.lang:hover{color:var(--ink);border-color:var(--ink-3)}
@media (max-width:720px){
  .site-head .bar{flex-wrap:wrap;gap:var(--s3);padding-block:10px}
  .site-nav{width:100%;order:3;gap:var(--s4);font-size:12px;margin:0;overflow-x:auto}
  .lang{margin-inline-start:auto}
}

/* ── project header ─────────────────────────────────────── */
.project-head{padding:var(--s8) 0 var(--s6)}
.kicker{margin:0 0 var(--s4);font-family:var(--mono);font-size:12.5px;color:var(--ink-3);letter-spacing:.12em;text-transform:uppercase}
h1{margin:0;font-size:clamp(32px,5.4vw,68px);font-weight:700;line-height:1.08;letter-spacing:-.035em;max-width:20ch}
.subtitle{margin:var(--s4) 0 0;max-width:56ch;color:var(--ink-2);font-size:clamp(15px,1.5vw,19px)}
.meta{display:grid;grid-template-columns:1fr;gap:var(--s3) var(--s6);margin-top:var(--s7);
  padding-top:var(--s4);border-top:1px solid var(--line)}
@media (min-width:640px){.meta{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.meta{grid-template-columns:repeat(4,1fr)}}
.meta div{display:flex;flex-direction:column;gap:3px}
.meta dt,.meta .k{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase}
.meta dd,.meta .v{margin:0;font-size:16px}

/* ── sections ───────────────────────────────────────────── */
section{padding-block:var(--s9);border-top:1px solid var(--line-soft);content-visibility:auto;contain-intrinsic-size:auto 700px}
section:first-of-type{border-top:0}
.sec-label{margin:0 0 var(--s5);font-family:var(--mono);font-size:12.5px;color:var(--accent);letter-spacing:.14em;text-transform:uppercase}
h2{margin:0;font-size:clamp(24px,3.2vw,40px);font-weight:680;line-height:1.24;letter-spacing:-.03em;max-width:26ch}
h3{margin:0;font-size:clamp(17px,1.5vw,20px);font-weight:660;letter-spacing:-.02em}
.sec-sub{margin:var(--s4) 0 0;max-width:60ch;color:var(--ink-2);font-size:clamp(15px,1.35vw,18px)}
.body-copy{margin:var(--s5) 0 0;max-width:60ch;color:var(--ink-2);font-size:clamp(15px,1.35vw,18px)}

/* ── artwork blocks: no overlay, ever ───────────────────── */
figure{margin:0}
.art{background:#000;border:1px solid var(--line-soft);overflow:hidden}
.art img{transition:opacity .45s var(--ease),filter .45s var(--ease)}
.art:hover img{filter:brightness(1.04)}
.art-btn{display:block;width:100%;padding:0;background:none;cursor:zoom-in}
.cap{margin-top:var(--s3)}
.cap .t{display:block;font-size:clamp(15px,1.2vw,17px);font-weight:680}
.cap .s{display:block;margin-top:4px;color:var(--ink-2);font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.75}

.hero-art{margin-top:var(--s6)}

.grid3{display:grid;grid-template-columns:1fr;gap:var(--s6) var(--s5);margin-top:var(--s7)}
@media (min-width:760px){.grid3{grid-template-columns:repeat(3,1fr)}}
.grid4{display:grid;grid-template-columns:1fr;gap:var(--s6) var(--s5);margin-top:var(--s7)}
@media (min-width:620px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.grid4{grid-template-columns:repeat(4,1fr)}}
.grid4 .art img,.grid3 .art img{width:100%}

.cols{display:grid;grid-template-columns:1fr;gap:var(--s6) var(--s7);margin-top:var(--s7)}
@media (min-width:860px){.cols{grid-template-columns:repeat(2,1fr)}}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);margin-top:var(--s7)}
@media (min-width:1000px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps>div{background:var(--surface);padding:var(--s5)}
.steps .n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.1em}
.steps h3{margin-top:var(--s2)}
.steps p{margin:var(--s3) 0 0;color:var(--ink-2);font-size:15px;line-height:1.8}

/* colour ladder + table */
.ladder{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);margin-top:var(--s6)}
@media (min-width:760px){.ladder{grid-template-columns:repeat(5,1fr)}}
.ladder div{background:var(--surface);padding:var(--s4)}
.ladder i{display:block;height:36px;margin-bottom:var(--s3);border:1px solid var(--line-soft)}
.ladder b{display:block;font-family:var(--mono);font-size:13px;font-weight:500}
.ladder span{display:block;margin-top:4px;color:var(--ink-2);font-size:14px}
.table-wrap{overflow-x:auto;margin-top:var(--s6);border:1px solid var(--line-soft)}
table{width:100%;border-collapse:collapse;min-width:560px;background:var(--surface)}
th,td{padding:14px 18px;text-align:start;border-bottom:1px solid var(--line-soft);font-size:15px}
th{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;font-weight:500}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:600}

/* swap block (playbook 23 / 29 / 30) */
.swap{position:relative;margin-top:var(--s7)}
.swap .layer{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)}
.swap.is-b .layer{opacity:1}
.swap-legend{display:flex;gap:var(--s4);align-items:center;margin-top:var(--s3);font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.08em}
.swap-legend b{color:var(--ink)}
.swap-toggle{padding:5px 10px;border:1px solid var(--line);font-family:var(--mono);font-size:10px;color:var(--ink-2)}
.swap-toggle:hover{color:var(--ink)}

/* sequence: opacity cross-fade only, no transform (playbook 32) */
.seq{margin-top:var(--s7)}
.seq .stack{position:relative;background:#000;border:1px solid var(--line-soft)}
.seq .stack img{position:absolute;inset:0;height:100%;object-fit:cover;opacity:0;transition:opacity .5s linear}
.seq .stack img:first-child{position:relative;opacity:1}
.seq .beats{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-top:0}
@media (min-width:820px){.seq .beats{grid-template-columns:repeat(3,1fr)}}
.seq .beat{background:var(--surface);padding:var(--s5);opacity:.42;transition:opacity .4s var(--ease)}
.seq .beat.on{opacity:1}
.seq .beat .t{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.1em}
.seq .beat p{margin:var(--s3) 0 0;font-size:15px;line-height:1.8;color:var(--ink-2)}


/* answers to the brief's three questions */
.mt-8{margin-top:var(--s8)}
.answers{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);margin-top:var(--s7)}
@media (min-width:900px){.answers{grid-template-columns:repeat(3,1fr)}}
.answers article{background:var(--surface);padding:var(--s6) var(--s5)}
.answers .q{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.12em;text-transform:uppercase}
.answers h3{margin-top:var(--s3);font-size:clamp(20px,2.4vw,28px);font-weight:720;line-height:1.35;letter-spacing:-.03em}
.answers p{margin:var(--s4) 0 0;color:var(--ink-2);font-size:clamp(15px,1.3vw,17px);line-height:1.95}

/* five story slides */
.grid5{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s4);margin-top:var(--s7)}
@media (min-width:720px){.grid5{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1060px){.grid5{grid-template-columns:repeat(5,1fr)}}

/* sequence scrub: pointer moves along the path, camera never moves */
.seq .stage{position:relative;background:#000;border:1px solid var(--line-soft);
  cursor:ew-resize;touch-action:pan-y;overflow:hidden}
.seq .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .12s linear;will-change:opacity}
.seq .stage .now{position:absolute;z-index:6;inset-block-end:0;inset-inline-start:0;
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:linear-gradient(0deg,rgba(4,4,6,.88),transparent);width:100%;pointer-events:none}
.seq .stage .now b{font-size:clamp(15px,1.5vw,19px);font-weight:700}
.seq .stage .now span{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.1em}
.seq .ticks{display:flex;gap:1px;margin-top:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.seq .ticks button{flex:1;padding:12px 10px;background:var(--surface);font-size:14px;color:var(--ink-2)}
.seq .ticks button[aria-pressed="true"]{color:var(--ink);background:#171821;box-shadow:inset 0 -2px 0 var(--accent)}
.seq .ticks button:hover{color:var(--ink)}
.seq .track{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s4);
  font-family:var(--mono);font-size:12px;color:var(--ink-2);letter-spacing:.06em}
.seq .rail{position:relative;flex:1;height:2px;background:var(--line)}
.seq .rail i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--accent);width:0}
.seq .rail b{position:absolute;top:-3px;width:1px;height:8px;background:var(--line2,rgba(255,255,255,.3))}
.seq .beats{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);margin-top:var(--s4)}
@media (min-width:820px){.seq .beats{grid-template-columns:repeat(3,1fr)}}
.seq .beat{background:var(--surface);padding:var(--s5);opacity:.4;transition:opacity .3s var(--ease)}
.seq .beat.on{opacity:1}
.seq .beat .t{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.1em}
.seq .beat p{margin:var(--s3) 0 0;font-size:15px;line-height:1.8;color:var(--ink-2)}

/* facts */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:var(--s7)}
@media (min-width:1000px){.facts{grid-template-columns:repeat(4,1fr)}}
.facts div{background:var(--surface);padding:var(--s5)}
.facts b{display:block;font-family:var(--mono);font-size:clamp(20px,2.6vw,30px);font-weight:500;letter-spacing:-.02em}
.facts span{display:block;margin-top:var(--s3);color:var(--ink-2);font-size:15px;line-height:1.7}

.site-foot{padding-block:var(--s9) var(--s7);border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:var(--s6)}
@media (min-width:860px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-grid h2{font-size:clamp(22px,2.8vw,34px)}
.foot-list{display:flex;flex-direction:column;gap:var(--s2);font-size:14px}
.foot-list .k{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s2)}
.foot-list a:hover{color:var(--accent)}
.foot-base{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);padding-top:var(--s4);
  border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.06em}

/* ── viewer (playbook 33) ───────────────────────────────── */
.viewer{position:fixed;inset:0;z-index:90;display:none;background:rgba(4,4,6,.96)}
.viewer[open],.viewer.on{display:grid;grid-template-rows:auto 1fr}
.viewer .vbar{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--gut);border-bottom:1px solid var(--line-soft)}
.viewer .vtitle{font-size:13px}
.viewer .vstate{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.08em}
.viewer .vclose{margin-inline-start:auto;padding:6px 10px;border:1px solid var(--line);font-family:var(--mono);font-size:11px}
.viewer .vclose:hover{border-color:var(--accent);color:var(--accent)}
.viewer .vstage{display:grid;place-items:center;padding:var(--gut);cursor:zoom-out;overflow:auto}
.viewer .vstage img{max-width:100%;max-height:calc(100svh - 140px);width:auto;object-fit:contain}
body.locked{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:0s!important;animation-duration:0s!important}
  .seq .stack img{transition:none}
}

/* ───────────────────────────────────────────────────────────
   HARDENED BLOCK — id-scoped so nothing can override or trap it.
   Answers to the brief's three questions + sequence controls.
   ─────────────────────────────────────────────────────────── */
#answers{display:grid!important;grid-template-columns:1fr;gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);margin-top:var(--s7)}
@media (min-width:900px){#answers{grid-template-columns:repeat(3,1fr)}}
#answers article{background:var(--surface)!important;padding:var(--s6) var(--s5)!important;
  display:flex;flex-direction:column}
#answers .q{display:block;font-family:var(--mono);font-size:13px;color:var(--accent)!important;
  letter-spacing:.12em;margin-bottom:var(--s3)}
#answers h3{font-size:clamp(21px,2.5vw,29px)!important;font-weight:760!important;
  line-height:1.32;letter-spacing:-.03em;color:var(--ink)}
#answers p{margin:var(--s4) 0 0!important;color:var(--ink-2)!important;
  font-size:clamp(15.5px,1.35vw,17.5px)!important;line-height:2}

#seq .ticks{display:flex;gap:1px;margin-top:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
#seq .ticks button{flex:1;padding:13px 10px;background:var(--surface);font-size:14.5px;color:var(--ink-2)}
#seq .ticks button[aria-pressed="true"]{color:var(--ink);background:#171821;box-shadow:inset 0 -2px 0 var(--accent)}
#seq .track{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s4);
  font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
#seq .rail{position:relative;flex:1;height:2px;background:var(--line)}
#seq .rail i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--accent);width:0}
#seq .stage{position:relative;overflow:hidden;background:#000;border:1px solid var(--line-soft);cursor:ew-resize}
#seq .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .12s linear}
#seq .beats{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:var(--s4)}
@media (min-width:820px){#seq .beats{grid-template-columns:repeat(3,1fr)}}
#seq .beat{background:var(--surface);padding:var(--s5);opacity:.42;transition:opacity .3s var(--ease)}
#seq .beat.on{opacity:1}
#storyGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s4);margin-top:var(--s7)}
@media (min-width:720px){#storyGrid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1060px){#storyGrid{grid-template-columns:repeat(5,1fr)}}