/* ════════════════════════════════════════════════════════════════════
   PUTSCH AGENCY — v2
   Direction: agitprop. Constructivist black-and-red poster work crossed
   with a declassified file. Red is mass, not accent; the diagonal is the
   structure; every artist is a mobilisation poster with a dossier number.

   Type: Putsch Display (Archivo latin / Oswald cyrillic) · JetBrains Mono
   ════════════════════════════════════════════════════════════════════ */

@import url('_fonts.css');

/* ═══════════════ TOKENS ═══════════════ */
:root{
  /* Ground */
  --void:#000000;
  --carbon:#0B0B0C;
  --slate:#141416;
  --edge:rgba(237,234,227,.12);
  --edge-hot:rgba(225,6,0,.34);

  /* Ink */
  --bone:#EDEAE3;
  --ash:#7A7770;          /* 4.7:1 on void — safe for body */
  --on-blood:#FFFFFF;     /* 5.0:1 on blood — the only body colour on red */

  /* Red */
  --blood:#E10600;
  --sear:#FF2D0A;
  --dried:#6E0300;

  /* Type */
  --display:'Putsch Display','Archivo Narrow','Arial Narrow',system-ui,sans-serif;
  --body:'Putsch Display',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Rhythm */
  --gut:clamp(1.25rem,4vw,4.5rem);
  --sec:clamp(5rem,11vw,10.5rem);
  --maxw:1680px;

  /* The signature angle. One value drives every diagonal on the site. */
  --shear:4.5deg;
  --band:7vw;             /* vertical travel of a diagonal cut */

  --ease:cubic-bezier(.16,1,.3,1);
}

/* CJK and Arabic have no self-hosted face: the system stack takes over
   for those scripts only, so nobody downloads a multi-megabyte font. */
html:lang(zh){ --display:'PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif; --body:var(--display); }
html:lang(ja){ --display:'Hiragino Sans','Yu Gothic','Noto Sans JP',system-ui,sans-serif; --body:var(--display); }
html:lang(ar){ --display:'Noto Naskh Arabic','Geeza Pro',Tahoma,system-ui,sans-serif; --body:var(--display); }
html:lang(ko){ --display:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif; --body:var(--display); }
html:lang(th){ --display:'Thonburi','Noto Sans Thai','Leelawadee UI',system-ui,sans-serif; --body:var(--display); }

/* ═══════════════ RESET ═══════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
html,body{background:var(--void);}
body{
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .2vw,1.125rem);
  line-height:1.62;
  font-variation-settings:'wdth' 100;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;}
ul,ol{list-style:none;}
::selection{background:var(--blood);color:#fff;}

:focus-visible{outline:2px solid var(--sear);outline-offset:3px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{position:fixed;top:-100px;left:1rem;z-index:200;background:var(--blood);
  color:#fff;padding:.75rem 1.25rem;font:700 .75rem/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;transition:top .2s;}
.skip:focus{top:1rem;}

/* Scrollbar as a piece of the dossier, not an afterthought */
html{scrollbar-width:thin;scrollbar-color:var(--blood) var(--carbon);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--carbon);}
::-webkit-scrollbar-thumb{background:var(--blood);}
::-webkit-scrollbar-thumb:hover{background:var(--sear);}

/* ═══════════════ TYPOGRAPHY ═══════════════ */

/* The display voice: Archivo pushed to its condensed extreme. The width
   axis is what separates it from the body voice — same family, two
   completely different registers. */
.d1,.d2,.d3{
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:'wdth' 62,'wght' 900;
  line-height:.82;
  letter-spacing:-.02em;
  text-transform:uppercase;
  text-wrap:balance;
}
.d1{font-size:clamp(3.5rem,13vw,13rem);}
.d2{font-size:clamp(2.6rem,8vw,7.5rem);}
.d3{font-size:clamp(1.75rem,4vw,3.25rem);line-height:.9;}
/* The carried headings mark one word with <em>. No italics in this
   direction — the emphasised word turns blood red instead, and stays
   upright so the overprint echo keeps its registration. */
.d1 em,.d2 em,.d3 em{font-style:normal;color:var(--blood);}
.mass .d2 em,.mass .d3 em{color:var(--bone);}

/* Cyrillic falls back to Oswald, which has no width axis — nudge the
   tracking so Russian headlines keep the same visual density. */
html:lang(ru) .d1,html:lang(ru) .d2,html:lang(ru) .d3{letter-spacing:.005em;}
/* CJK must never be condensed or letter-spaced negative. */
html:lang(zh) .d1,html:lang(ja) .d1,html:lang(ko) .d1,
html:lang(zh) .d2,html:lang(ja) .d2,html:lang(ko) .d2,
html:lang(zh) .d3,html:lang(ja) .d3,html:lang(ko) .d3{
  font-variation-settings:normal;letter-spacing:.01em;line-height:1.08;font-weight:800;
}
/* Thai stacks vowels above and below the line — generous leading, no tracking */
html:lang(th) .d1,html:lang(th) .d2,html:lang(th) .d3{
  font-variation-settings:normal;letter-spacing:0;line-height:1.35;text-transform:none;font-weight:800;
}
html:lang(ar) .d1,html:lang(ar) .d2,html:lang(ar) .d3{
  font-variation-settings:normal;letter-spacing:0;line-height:1.35;text-transform:none;
}

/* The utility voice: everything that behaves like a file annotation. */
.mono{
  font-family:var(--mono);
  font-size:clamp(.625rem,.58rem + .16vw,.75rem);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ash);
}
html:lang(ar) .mono,html:lang(th) .mono{letter-spacing:0;text-transform:none;}
.mono--hot{color:var(--blood);}
.mono--bone{color:var(--bone);}

/* A stamped index. Used only where the content really is enumerable. */
.stamp{
  display:inline-flex;align-items:center;gap:.6em;
  font:700 clamp(.625rem,.6rem + .12vw,.7rem)/1 var(--mono);
  letter-spacing:.22em;text-transform:uppercase;color:var(--blood);
}
.stamp::before{content:'';width:clamp(1.5rem,4vw,3.5rem);height:2px;background:var(--blood);}

.lede{
  font-size:clamp(1.125rem,1rem + .8vw,1.75rem);
  line-height:1.4;font-weight:500;color:var(--bone);
  max-width:34ch;text-wrap:pretty;
}
.prose p{max-width:62ch;color:var(--ash);}
.prose p + p{margin-top:1.1em;}
.prose strong,.prose b{color:var(--bone);font-weight:700;}

/* ═══════════════ LAYOUT ═══════════════ */
.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);}
.sec{padding-block:var(--sec);position:relative;}
.sec--tight{padding-block:calc(var(--sec) * .58);}
.sec--flush{padding-block:0;}

.shead{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:clamp(1.5rem,4vw,5rem);align-items:end;
  margin-bottom:clamp(2.5rem,6vw,5.5rem);
}
.shead__title{margin-top:.6rem;}
.shead p{color:var(--ash);max-width:38ch;}
@media (max-width:900px){ .shead{grid-template-columns:1fr;align-items:start;} }

.rule{height:1px;background:var(--edge);border:0;}
.rule--hot{height:2px;background:var(--blood);}

/* ═══════════════ SIGNATURE 1 · THE DIAGONAL RED MASS ═══════════════
   One shape, used sparingly: at most one red mass per page. Everything
   around it stays black and quiet so the mass keeps its force. */
.mass{
  position:relative;background:var(--blood);color:var(--on-blood);
  padding-block:clamp(4rem,9vw,8rem);
  clip-path:polygon(0 var(--band),100% 0,100% calc(100% - var(--band)),0 100%);
  margin-block:calc(var(--band) * -0.35);
}
.mass--flat{clip-path:none;margin-block:0;}
.mass .mono{color:rgba(255,255,255,.72);}
.mass .stamp{color:var(--void);}
.mass .stamp::before{background:var(--void);}
.mass .d2,.mass .d3{color:var(--void);}   /* knocked out, poster-style */
.mass p{color:var(--on-blood);}
.mass a:not(.btn):not(.giant){color:var(--void);text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:.22em;}
.mass .giant{color:var(--void);text-decoration:none;}

/* ═══════════════ SIGNATURE 2 · TYPE CROSSING THE BAND ═══════════════
   The same headline rendered twice: bone on black, then black again,
   clipped to the red wedge. One word reads in two colours because it
   physically crosses the edge of the band. */
.cross{position:relative;display:block;isolation:isolate;}
.cross__wedge{
  position:absolute;inset:0;background:var(--blood);z-index:-1;
  clip-path:polygon(0 62%,100% 34%,100% 78%,0 106%);
}
.cross__base{color:var(--bone);display:block;}
.cross__over{
  position:absolute;inset:0;color:var(--void);display:block;pointer-events:none;
  clip-path:polygon(0 62%,100% 34%,100% 78%,0 106%);
}

/* ═══════════════ REGISTRATION / OVERPRINT ═══════════════
   A red ghost a few pixels off true, like a poster printed slightly out
   of register. Applied to section titles only. */
.overprint{position:relative;display:block;}
.overprint::before{
  content:attr(data-echo);position:absolute;left:-.055em;top:.035em;
  color:var(--blood);z-index:-1;pointer-events:none;
  opacity:.85;
}

/* ═══════════════ ARROWS ═══════════════
   Inline SVG (the latin subsets carry no arrow glyphs). Sized in em so
   they follow whatever type they sit inside. */
.arw{width:.78em;height:.78em;display:inline-block;vertical-align:-.06em;flex:none;}
html[dir='rtl'] .arw{transform:scaleX(-1);}

/* ═══════════════ BUTTONS ═══════════════ */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  padding:1rem 1.6rem;border:2px solid var(--bone);
  font:700 .75rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone);background:transparent;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{background:var(--bone);color:var(--void);transform:translateY(-2px);}
.btn--solid{background:var(--blood);border-color:var(--blood);color:#fff;}
.btn--solid:hover{background:var(--sear);border-color:var(--sear);color:#fff;}
.btn--onred{border-color:var(--void);color:var(--void);}
.btn--onred:hover{background:var(--void);color:var(--blood);}
.btn__arrow{transition:transform .25s var(--ease);}
.btn:hover .btn__arrow{transform:translate(3px,-3px);}
html:lang(ar) .btn{letter-spacing:0;}

/* ═══════════════ NAV ═══════════════ */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:100;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  padding:1rem var(--gut);
  background:linear-gradient(180deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.72) 62%,transparent 100%);
  transition:background .3s,transform .35s var(--ease);
}
.nav[data-stuck='1']{background:rgba(0,0,0,.96);border-bottom:1px solid var(--edge-hot);}
.nav[data-hidden='1']{transform:translateY(-102%);}
.nav__logo{flex:none;}
.nav__logo img{height:clamp(18px,2.1vw,26px);width:auto;}
.nav__links{display:flex;gap:clamp(.9rem,2vw,2rem);margin-inline-start:auto;}
.nav__links a{
  position:relative;font:500 .75rem/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone);padding-block:.4rem;
}
.nav__links a::after{
  content:'';position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--blood);
  transform:scaleX(0);transform-origin:inline-start;transition:transform .3s var(--ease);
}
.nav__links a:hover::after,.nav__links a[aria-current='page']::after{transform:scaleX(1);}
.nav__links a[aria-current='page']{color:var(--blood);}
.nav__right{display:flex;align-items:center;gap:clamp(.6rem,1.4vw,1.1rem);}
.nav__social{display:flex;gap:.7rem;}
.nav__social a{color:var(--ash);transition:color .2s;}
.nav__social a:hover{color:var(--blood);}
.nav__social svg{width:17px;height:17px;fill:currentColor;}
.nav__cta{
  padding:.65rem 1.05rem;background:var(--blood);color:#fff;
  font:700 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s;
}
.nav__cta:hover{background:var(--sear);}
html:lang(ar) .nav__links a,html:lang(ar) .nav__cta{letter-spacing:0;}

/* language */
.lang{position:relative;}
.lang__toggle{
  display:flex;align-items:center;gap:.4rem;cursor:pointer;
  font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ash);padding:.5rem .55rem;border:1px solid var(--edge);
  transition:color .2s,border-color .2s;
}
.lang__toggle:hover{color:var(--bone);border-color:var(--edge-hot);}
.lang__menu{
  position:absolute;inset-inline-end:0;top:calc(100% + .5rem);min-width:11rem;
  background:var(--carbon);border:1px solid var(--edge-hot);
  display:none;flex-direction:column;padding:.3rem;z-index:120;
}
.lang[data-open='1'] .lang__menu{display:flex;}
.lang__menu a{
  padding:.55rem .8rem;font:500 .72rem/1 var(--mono);letter-spacing:.1em;
  color:var(--ash);transition:background .15s,color .15s;
}
.lang__menu a:hover{background:var(--blood);color:#fff;}
.lang__menu a[aria-current='true']{color:var(--blood);}

/* burger + drawer */
.burger{display:none;font:700 .72rem/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone);cursor:pointer;padding:.5rem;}
.drawer{
  position:fixed;inset:0;z-index:150;background:var(--void);
  display:flex;flex-direction:column;justify-content:center;gap:.25rem;
  padding:var(--gut);
  transform:translateY(-100%);transition:transform .5s var(--ease);
  overflow-y:auto;
}
.drawer[data-open='1']{transform:translateY(0);}
.drawer__close{position:absolute;top:1.15rem;inset-inline-end:var(--gut);
  font:700 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone);cursor:pointer;padding:.5rem;}
.drawer a.drawer__link{
  font-family:var(--display);font-weight:900;font-variation-settings:'wdth' 70,'wght' 900;
  font-size:clamp(2rem,10vw,3.5rem);line-height:1.02;text-transform:uppercase;
  color:var(--bone);transition:color .2s;
}
.drawer a.drawer__link:hover,.drawer a.drawer__link[aria-current='page']{color:var(--blood);}
.drawer__langs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:2rem;}
.drawer__langs a{
  padding:.45rem .7rem;border:1px solid var(--edge);
  font:500 .68rem/1 var(--mono);letter-spacing:.1em;color:var(--ash);
}
.drawer__langs a[aria-current='true']{border-color:var(--blood);color:var(--blood);}

@media (max-width:1080px){
  .nav__links,.nav__social{display:none;}
  .burger{display:block;margin-inline-start:auto;}
  .nav__right{gap:.5rem;}
}
@media (max-width:560px){ .nav__cta{display:none;} }

/* ═══════════════ HERO ═══════════════ */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(6rem,14vh,9rem) var(--gut) clamp(2.5rem,6vh,4rem);
  overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0;}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.3;
  filter:grayscale(1) contrast(1.35) brightness(.55);}
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 10%,transparent 20%,rgba(0,0,0,.85) 78%),
             linear-gradient(180deg,rgba(0,0,0,.7) 0%,transparent 30%,rgba(0,0,0,.92) 100%);
}
.hero__inner{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin-inline:auto;}
.hero__kicker{margin-bottom:clamp(1.5rem,4vh,3rem);}
.hero__title{margin-bottom:clamp(1.5rem,4vh,2.5rem);}
.hero__row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.5rem,4vw,4rem);align-items:end;
}
.hero__sub{color:var(--ash);max-width:44ch;font-size:clamp(.95rem,.9rem + .3vw,1.2rem);}
.hero__sub b{color:var(--bone);font-weight:700;}
.hero__cta{display:flex;gap:.75rem;flex-wrap:wrap;}
@media (max-width:820px){ .hero__row{grid-template-columns:1fr;} }

/* ═══════════════ MARQUEE ═══════════════ */
.marq{
  overflow:hidden;border-block:1px solid var(--edge);padding-block:.85rem;
  background:var(--void);
}
.marq--red{background:var(--blood);border-color:var(--dried);}
.marq__track{display:flex;width:max-content;will-change:transform;}
.marq__track span{
  font-family:var(--display);font-weight:900;
  font-variation-settings:'wdth' 68,'wght' 900;
  font-size:clamp(1.35rem,3.4vw,2.6rem);line-height:1;text-transform:uppercase;
  padding-inline:clamp(.6rem,1.6vw,1.4rem);white-space:nowrap;color:var(--bone);
}
.marq__track span.o{color:var(--blood);}
.marq--red .marq__track span{color:var(--void);}
.marq--red .marq__track span.o{color:rgba(255,255,255,.55);}

/* ═══════════════ SIGNATURE 3 · THE POSTER STRIP ═══════════════
   The roster is the product, so it gets the boldest treatment: ten
   flyposters side by side in one horizontal corridor. Wheel, drag,
   arrows and touch all slide it; each poster is a black-to-red duotone
   with its dossier number, and hovering peels it back to colour. */
.strip{position:relative;}
/* first/last card align with the shell's content edge, even beyond maxw */
.strip{--inset:max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut)));}
.strip__track{
  display:flex;gap:clamp(.6rem,1.5vw,1.25rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--inset);
  padding-inline:var(--inset);
  padding-block:.75rem;              /* room for the hover lift */
  scrollbar-width:none;
  cursor:grab;
}
.strip__track::-webkit-scrollbar{display:none;}
.strip__track[data-drag='1']{cursor:grabbing;scroll-snap-type:none;}
.strip .poster{
  flex:0 0 auto;
  width:min(clamp(19rem,30vw,27rem), 82vw);
  scroll-snap-align:start;
}
.strip--xl .poster{width:min(clamp(22rem,36vw,33rem), 86vw);}
.strip .poster:nth-child(odd){--tilt:-.4deg;}
.strip .poster:nth-child(even){--tilt:.4deg;}
.strip .poster{transform:rotate(var(--tilt,0deg));}
.strip .poster:hover,.strip .poster:focus-visible{transform:rotate(0deg) translateY(-.4rem);}
/* bigger canvas → bigger type */
.strip .poster__name{font-size:clamp(1.7rem,3vw,2.7rem);}
.strip--xl .poster__name{font-size:clamp(2rem,3.5vw,3.3rem);}
.strip .poster__meta{font-size:.68rem;-webkit-line-clamp:3;}
.strip .poster__no{font-size:.75rem;}

/* controls: counter + square arrows, right-aligned above the track */
.strip__ui{
  display:flex;align-items:center;justify-content:flex-end;gap:.6rem;
  padding-inline:var(--inset);margin-bottom:.75rem;
}
.strip__count{font:500 .72rem/1 var(--mono);letter-spacing:.18em;color:var(--ash);
  margin-inline-end:.6rem;}
.strip__count b{color:var(--blood);font-weight:700;}
.strip__btn{
  width:2.9rem;height:2.9rem;display:grid;place-items:center;
  border:1px solid var(--edge);color:var(--bone);cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,opacity .2s;
}
.strip__btn .arw{width:1.05rem;height:1.05rem;}
.strip__btn:hover{background:var(--blood);border-color:var(--blood);color:#fff;}
.strip__btn[disabled]{opacity:.3;pointer-events:none;}
html[dir='rtl'] .strip__ui{justify-content:flex-start;}

.poster{
  position:relative;display:block;overflow:hidden;background:var(--void);
  aspect-ratio:3/4;isolation:isolate;
  transition:transform .5s var(--ease),z-index 0s;
}
.poster:hover,.poster:focus-visible{z-index:3;}

/* duotone: a greyscale plate multiplied onto a red ground.
   Shadows stay black, highlights become blood. */
.poster__plate{position:absolute;inset:0;background:var(--blood);}
.poster__plate img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.28) brightness(1.22);
  mix-blend-mode:multiply;
  transition:transform .8s var(--ease);
}
/* the true-colour copy underneath, revealed on hover */
.poster__colour{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);}
.poster__colour img{width:100%;height:100%;object-fit:cover;
  filter:contrast(1.06) saturate(.92);transition:transform .8s var(--ease);}
.poster:hover .poster__plate{opacity:0;transition:opacity .45s var(--ease);}
.poster:hover .poster__colour{opacity:1;}
.poster:hover .poster__plate img,.poster:hover .poster__colour img{transform:scale(1.05);}
.poster:focus-visible .poster__plate{opacity:0;}
.poster:focus-visible .poster__colour{opacity:1;}

.poster__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 32%,transparent 45%,rgba(0,0,0,.92) 100%);
}
.poster__no{
  position:absolute;top:.7rem;inset-inline-start:.8rem;
  font:700 .68rem/1 var(--mono);letter-spacing:.16em;color:#fff;
  mix-blend-mode:difference;
}
.poster__body{position:absolute;inset-inline:0;bottom:0;padding:clamp(.8rem,1.6vw,1.25rem);}
.poster__name{
  font-family:var(--display);font-weight:900;
  font-variation-settings:'wdth' 62,'wght' 900;
  font-size:clamp(1.3rem,2.6vw,2rem);line-height:.86;text-transform:uppercase;
  color:#fff;letter-spacing:-.015em;
  overflow-wrap:anywhere;
}
.poster__meta{
  margin-top:.45rem;font:500 .6rem/1.5 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.66);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.poster__bpm{color:var(--blood);}
.poster:hover .poster__bpm{color:#fff;}
.poster__go{
  position:absolute;top:.7rem;inset-inline-end:.8rem;
  width:2rem;height:2rem;display:grid;place-items:center;
  background:var(--blood);color:#fff;font-size:.9rem;
  opacity:0;transform:translateY(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.poster:hover .poster__go,.poster:focus-visible .poster__go{opacity:1;transform:translateY(0);}
html:lang(zh) .poster__name,html:lang(ja) .poster__name,html:lang(ko) .poster__name,
html:lang(th) .poster__name,html:lang(ar) .poster__name,
html:lang(ru) .poster__name{font-variation-settings:normal;letter-spacing:0;}


/* ═══════════════ MANIFESTO ═══════════════ */
.manifesto{padding-block:calc(var(--sec) * 1.1);}
.manifesto__text{
  font-family:var(--display);font-weight:800;
  font-variation-settings:'wdth' 78,'wght' 800;
  font-size:clamp(1.6rem,5.4vw,4.5rem);line-height:1.02;
  text-transform:uppercase;letter-spacing:-.015em;
  max-width:22ch;
}
.manifesto__text .w{color:rgba(237,234,227,.16);transition:color .35s var(--ease);}
.manifesto__text .w.on{color:var(--bone);}
.manifesto__text .w.hot.on{color:var(--blood);}
html:lang(zh) .manifesto__text,html:lang(ja) .manifesto__text,html:lang(ko) .manifesto__text,
html:lang(th) .manifesto__text,html:lang(ar) .manifesto__text{
  font-variation-settings:normal;line-height:1.4;letter-spacing:0;max-width:28ch;
}

/* ═══════════════ THE FILE — sticky dossier card + biography ═══════════════ */
.file{display:grid;grid-template-columns:minmax(0,21.5rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,5.5rem);align-items:start;}
.file__aside{position:sticky;top:clamp(5rem,10vh,6.5rem);}
.file__card{border:1px solid var(--edge);background:var(--carbon);}
.file__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem 1.2rem;border-bottom:2px solid var(--blood);}
.file__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.95rem 1.2rem;border-bottom:1px solid var(--edge);}
.file__k{font:500 .6rem/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ash);}
.file__v{font-weight:700;font-size:.95rem;text-align:end;}
.file__v--hot{color:var(--blood);}
.file__links{display:flex;flex-direction:column;gap:.5rem;
  padding:1.1rem 1.2rem;border-bottom:1px solid var(--edge);}
.file__links .file__k{padding-bottom:.25rem;}
.file__links a{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.75rem .9rem;border:1px solid var(--edge);
  font:700 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,border-color .2s,color .2s;}
.file__links a:hover{background:var(--blood);border-color:var(--blood);color:#fff;}
.file__note{padding:1.05rem 1.2rem;font:500 .64rem/1.7 var(--mono);
  letter-spacing:.05em;color:var(--ash);}
.file__bio .stamp{margin-bottom:clamp(1.2rem,3vw,2rem);}
.file__bio p{max-width:58ch;color:var(--ash);}
.file__bio p + p{margin-top:1.25em;}
/* the opening paragraph carries the voice — set larger, in bone */
.file__lede{font-size:clamp(1.15rem,1rem + .7vw,1.65rem);line-height:1.45;
  color:var(--bone);font-weight:500;max-width:50ch;}
html:lang(ar) .file__k{letter-spacing:0;}
@media (max-width:900px){
  .file{grid-template-columns:1fr;}
  .file__aside{position:static;}
}

.tags{display:flex;flex-wrap:wrap;gap:.4rem;}
.tag{
  padding:.35rem .65rem;border:1px solid var(--edge-hot);
  font:500 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone);
}
html:lang(ar) .tag{letter-spacing:0;}

/* ═══════════════ ARTIST PAGE ═══════════════ */
.ahero{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:0;align-items:stretch;min-height:min(92svh,60rem);
  padding-top:clamp(4.5rem,9vh,6.5rem);
}
.ahero__figure{position:relative;overflow:hidden;background:var(--blood);}
.ahero__figure img{width:100%;height:100%;object-fit:cover;min-height:22rem;
  filter:grayscale(1) contrast(1.26) brightness(1.2);mix-blend-mode:multiply;}
.ahero__figure::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 55%,rgba(0,0,0,.55) 100%);
}
.ahero__body{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2rem,5vw,4.5rem) var(--gut) clamp(2rem,5vw,4rem) clamp(1.5rem,4vw,3.5rem);
}
.ahero__no{margin-bottom:1.1rem;}
/* the name crosses the seam onto the portrait — poster lettering laid
   over the photograph, not a caption beside it */
.ahero__name{margin-bottom:.9rem;overflow-wrap:anywhere;position:relative;z-index:2;
  margin-inline-start:calc(clamp(2.5rem,10vw,12rem) * -1);}
.ahero__role{color:var(--blood);font:700 .8rem/1.4 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:1.6rem;}
.ahero__tags{margin-bottom:2rem;}
.ahero__cta{display:flex;gap:.7rem;flex-wrap:wrap;}
html:lang(ar) .ahero__role{letter-spacing:0;}
@media (max-width:980px){
  .ahero{grid-template-columns:1fr;min-height:0;}
  .ahero__figure{aspect-ratio:3/4;max-height:74svh;}
  .ahero__body{padding-inline:var(--gut);}
  .ahero__name{margin-inline-start:0;}
}

.alinks{display:flex;flex-wrap:wrap;gap:.5rem;}
.alinks a{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.8rem 1.1rem;border:1px solid var(--edge);
  font:700 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone);transition:background .2s,border-color .2s,color .2s;
}
.alinks a:hover{background:var(--blood);border-color:var(--blood);color:#fff;}
html:lang(ar) .alinks a{letter-spacing:0;}

.apager{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--edge);
  border-block:1px solid var(--edge);
}
.apager a{
  background:var(--void);padding:clamp(1.5rem,4vw,2.75rem) var(--gut);
  display:flex;align-items:center;gap:clamp(1rem,2.5vw,1.8rem);transition:background .3s;
}
.apager a:hover{background:var(--carbon);}
.apager a:last-child{justify-content:flex-end;text-align:end;}
.apager__txt{display:flex;flex-direction:column;gap:.6rem;}
.apager a:last-child .apager__txt{align-items:flex-end;}
.apager__thumb{width:clamp(3.6rem,6vw,5.2rem);height:auto;aspect-ratio:3/4;object-fit:cover;
  flex:none;border:1px solid var(--edge);
  filter:grayscale(1) contrast(1.2) brightness(.9);
  transition:filter .35s var(--ease),border-color .35s;}
.apager a:hover .apager__thumb{filter:none;border-color:var(--edge-hot);}
.apager__name{
  font-family:var(--display);font-weight:900;font-variation-settings:'wdth' 66,'wght' 900;
  font-size:clamp(1.4rem,3.6vw,2.6rem);line-height:.9;text-transform:uppercase;
  transition:color .25s;
}
.apager a:hover .apager__name{color:var(--blood);}
@media (max-width:640px){ .apager{grid-template-columns:1fr;} }

/* ═══════════════ SERVICE / VALUE CELLS ═══════════════ */
.cells{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);}
.cells--3{grid-template-columns:repeat(3,1fr);}
.cells--4{grid-template-columns:repeat(4,1fr);}
.cell{
  background:var(--void);padding:clamp(1.5rem,3.2vw,2.75rem);
  display:flex;flex-direction:column;gap:.9rem;
  transition:background .4s var(--ease);
}
.cell:hover{background:var(--carbon);}
.cell__n{font:700 .68rem/1 var(--mono);letter-spacing:.2em;color:var(--blood);}
.cell h3{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 80,'wght' 800;
  font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.05;text-transform:uppercase;}
.cell p{color:var(--ash);font-size:.95rem;}
.cell__list{display:flex;flex-direction:column;gap:.55rem;margin-top:.3rem;}
.cell__list li{
  position:relative;padding-inline-start:1.1rem;color:var(--ash);
  font-size:.9rem;line-height:1.45;
}
.cell__list li::before{
  content:'';position:absolute;inset-inline-start:0;top:.62em;
  width:.45rem;height:2px;background:var(--blood);
}
@media (max-width:900px){ .cells--3,.cells--4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .cells--3,.cells--4{grid-template-columns:1fr;} }

/* ═══════════════ STEPS — a real sequence, so it is numbered ═══════════════ */
.steps{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);
  grid-template-columns:repeat(4,1fr);counter-reset:step;}
.step{background:var(--void);padding:clamp(1.4rem,3vw,2.5rem);counter-increment:step;}
.step::before{
  content:counter(step,decimal-leading-zero);
  display:block;font-family:var(--display);font-weight:900;
  font-variation-settings:'wdth' 62,'wght' 900;
  font-size:clamp(2.5rem,5vw,4rem);line-height:.8;color:var(--blood);margin-bottom:.7rem;
}
.step h3{font-size:1.05rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin-bottom:.5rem;}
.step p{color:var(--ash);font-size:.9rem;}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .steps{grid-template-columns:1fr;} }

/* ═══════════════ STATS ═══════════════ */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--edge);
  border:1px solid var(--edge);}
.stat{background:var(--void);padding:clamp(1.4rem,3vw,2.5rem);}
.stat__n{
  font-family:var(--display);font-weight:900;font-variation-settings:'wdth' 62,'wght' 900;
  font-size:clamp(2.8rem,7vw,5.5rem);line-height:.8;color:var(--blood);
  letter-spacing:-.02em;
}
.stat__l{margin-top:.7rem;font:500 .65rem/1.5 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash);}
html:lang(ar) .stat__l{letter-spacing:0;}
@media (max-width:820px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* ═══════════════ CONTACT / FORM ═══════════════ */
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.2vw,1.6rem);}
.field{display:flex;flex-direction:column;gap:.5rem;}
.field--wide{grid-column:1/-1;}
.field label{font:500 .65rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);display:flex;gap:.6em;align-items:baseline;}
.field label .req{color:var(--blood);}
.field label .opt{color:rgba(122,119,112,.6);font-size:.9em;}
.field input,.field select,.field textarea{
  width:100%;padding:.95rem 1rem;background:var(--carbon);
  border:1px solid var(--edge);color:var(--bone);font-size:1rem;
  transition:border-color .2s,background .2s;
}
.field textarea{min-height:8rem;resize:vertical;}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--blood) 50%),
                   linear-gradient(135deg,var(--blood) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(1em + 4px),calc(100% - 14px) calc(1em + 4px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blood);background:var(--slate);}
.field input::placeholder,.field textarea::placeholder{color:rgba(122,119,112,.55);}
.field[data-invalid='1'] input,.field[data-invalid='1'] textarea{border-color:var(--sear);}
.field__err{font:500 .68rem/1.3 var(--mono);letter-spacing:.06em;color:var(--sear);display:none;}
.field[data-invalid='1'] .field__err{display:block;}
.form__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;
  justify-content:space-between;margin-top:.5rem;}
.form__note{font-size:.8rem;color:var(--ash);max-width:38ch;}
.form__status{grid-column:1/-1;padding:1rem 1.2rem;border:1px solid var(--edge);display:none;
  font:500 .8rem/1.5 var(--mono);letter-spacing:.06em;}
.form__status[data-state='ok']{display:block;border-color:var(--blood);color:var(--bone);
  background:rgba(225,6,0,.1);}
.form__status[data-state='err']{display:block;border-color:var(--sear);color:var(--sear);}
.form__ts{grid-column:1/-1;min-height:66px;}
@media (max-width:760px){ .form{grid-template-columns:1fr;} }
html:lang(ar) .field label{letter-spacing:0;}

.giant{
  display:block;font-family:var(--display);font-weight:900;
  font-variation-settings:'wdth' 62,'wght' 900;
  font-size:clamp(3rem,12vw,11rem);line-height:.84;text-transform:uppercase;
  letter-spacing:-.025em;color:var(--bone);transition:color .3s var(--ease);
}
.giant:hover{color:var(--blood);}
.giant em{font-style:normal;color:var(--blood);}
.giant:hover em{color:var(--bone);}
html:lang(zh) .giant,html:lang(ja) .giant,html:lang(ko) .giant,html:lang(th) .giant,html:lang(ar) .giant{
  font-variation-settings:normal;letter-spacing:0;line-height:1.15;}

.maillist{display:flex;flex-direction:column;gap:1px;background:var(--edge);
  border:1px solid var(--edge);}
.maillist a{background:var(--void);padding:clamp(1.1rem,2.6vw,1.8rem);
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:baseline;
  justify-content:space-between;transition:background .25s;}
.maillist a:hover{background:var(--blood);}
.maillist__addr{font-family:var(--display);font-weight:800;
  font-variation-settings:'wdth' 78,'wght' 800;
  font-size:clamp(1.1rem,2.6vw,1.9rem);line-height:1;text-transform:uppercase;
  overflow-wrap:anywhere;}
.maillist__what{font:500 .66rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash);}
.maillist a:hover .maillist__what{color:rgba(255,255,255,.8);}
html:lang(ar) .maillist__what{letter-spacing:0;}

/* ═══════════════ FOOTER ═══════════════ */
.footer{border-top:2px solid var(--blood);padding-block:clamp(2.5rem,6vw,4.5rem);}
.footer__grid{display:grid;gap:clamp(2rem,4vw,3rem);
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));}
.footer__wm img{height:22px;width:auto;margin-bottom:1rem;}
.footer__tag{font:500 .66rem/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash);}
.footer h4{font:700 .66rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--blood);margin-bottom:1rem;}
.footer li + li{margin-top:.5rem;}
.footer li a{font-size:.9rem;color:var(--ash);transition:color .2s;}
.footer li a:hover{color:var(--bone);}
.footer__bar{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;
  margin-top:clamp(2rem,5vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--edge);
  font:500 .66rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ash);}
html:lang(ar) .footer__tag,html:lang(ar) .footer h4,html:lang(ar) .footer__bar{letter-spacing:0;}
@media (max-width:900px){ .footer__grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .footer__grid{grid-template-columns:1fr;} }

/* ═══════════════ 404 ═══════════════ */
.nf{min-height:100svh;display:grid;place-content:center;text-align:center;gap:1.5rem;
  padding:var(--gut);}
.nf__code{font-family:var(--display);font-weight:900;font-variation-settings:'wdth' 62,'wght' 900;
  font-size:clamp(7rem,32vw,26rem);line-height:.75;color:var(--blood);letter-spacing:-.04em;}

/* ═══════════════ TEXTURE ═══════════════ */
.grain{
  position:fixed;inset:-120px;z-index:90;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}   16%{transform:translate(-4%,-3%)}
  33%{transform:translate(3%,-5%)}    50%{transform:translate(-2%,4%)}
  66%{transform:translate(4%,2%)}     83%{transform:translate(-3%,-2%)}
}
.scan{
  position:fixed;inset:0;z-index:91;pointer-events:none;opacity:.22;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.5) 2px 3px);
}
.progress{position:fixed;inset-inline-start:0;top:0;height:2px;width:0;background:var(--blood);
  z-index:130;pointer-events:none;}

/* custom cursor — pointer devices only */
.cur,.cur-dot{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  border-radius:50%;mix-blend-mode:difference;will-change:transform;}
.cur{width:34px;height:34px;border:1.5px solid var(--bone);margin:-17px 0 0 -17px;
  transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),
             background .25s var(--ease),opacity .2s;}
.cur-dot{width:5px;height:5px;background:var(--blood);margin:-2.5px 0 0 -2.5px;
  mix-blend-mode:normal;}
body[data-cursor='link'] .cur{width:56px;height:56px;margin:-28px 0 0 -28px;
  background:rgba(237,234,227,.16);}
@media (pointer:fine){
  body[data-cursor-on='1'],body[data-cursor-on='1'] a,body[data-cursor-on='1'] button{cursor:none;}
}
@media (pointer:coarse){ .cur,.cur-dot{display:none;} }

/* ═══════════════ REVEAL ═══════════════
   A wipe, not a fade: the block is unmasked from below like a poster
   being pasted up. */
.rv{clip-path:inset(0 0 100% 0);opacity:0;
  transition:clip-path .95s var(--ease),opacity .5s linear,transform .95s var(--ease);
  transform:translateY(18px);}
.rv.in{clip-path:inset(0 0 0 0);opacity:1;transform:none;}
.rv[data-delay='1']{transition-delay:.09s}
.rv[data-delay='2']{transition-delay:.18s}
.rv[data-delay='3']{transition-delay:.27s}

/* page transition wipe */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal;}
.wipe{position:fixed;inset:0;z-index:9998;background:var(--blood);pointer-events:none;
  transform:scaleY(0);transform-origin:bottom;}
.wipe[data-on='1']{transform:scaleY(1);transition:transform .42s var(--ease);}
.wipe[data-on='2']{transform:scaleY(0);transform-origin:top;transition:transform .42s var(--ease) .06s;}

/* ═══════════════ MOTION OFF ═══════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;}
  .grain{animation:none;}
  .rv{clip-path:none;opacity:1;transform:none;}
  .strip .poster{--tilt:0deg;transform:none;}
  .cur,.cur-dot{display:none;}
  .mass{clip-path:none;margin-block:0;}
}

/* ═══════════════ SMALL SCREENS ═══════════════ */
@media (max-width:700px){
  :root{--band:11vw;}
  /* the diagonal cut eats --band px of the section at one edge: keep
     every line of text clear of the black wedge */
  .mass{padding-block:calc(var(--band) + 2.2rem);}
  .cross__wedge,.cross__over{clip-path:polygon(0 58%,100% 44%,100% 84%,0 102%);}
  .scan{opacity:.14;}
}
@media (max-width:420px){
  :root{--gut:1.1rem;}
  /* monumental figures (PARIS in a wide face) need the full row */
  .stats{grid-template-columns:1fr;}
}

/* print: the dossier should photocopy */
@media print{
  .nav,.drawer,.grain,.scan,.cur,.cur-dot,.progress,.marq{display:none!important;}
  body{background:#fff;color:#000;}
  .poster__plate{display:none;}
}