/* ═══════════════════════════════════════════════════════════
   WEB PROPAGANDA — EDITORIAL POSTER EDITION
   Typography is the interface. Imagery is the navigation.
   No HUD. No nav. No boxes. Composition only.
   ═══════════════════════════════════════════════════════════ */

:root{
  --void:#0c0b0b;
  --bone:#efe9df;
  --bone-dim:#b7b0a4;
  --red:#e11226;
  --red-deep:#b3123f;
  --pink:#ff2f7d;
  --f-goth:'UnifrakturCook', serif;
  --f-black:'Anton', sans-serif;
  --f-grot:'Archivo', sans-serif;
  --f-serif:'EB Garamond', serif;
  --f-pixel:'Silkscreen', monospace;
  --pad:clamp(18px,4vw,60px);
  --ease:cubic-bezier(.19,1,.22,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{background:var(--void);color:var(--bone);font-family:var(--f-serif);overflow-x:hidden}
::selection{background:var(--red);color:var(--bone)}
img{max-width:100%;display:block}
.gothic{font-family:var(--f-goth)}
.serif-it{font-family:var(--f-serif);font-style:italic}
.red{color:var(--red)}

/* film grain — heavy, like the print */
.grain{position:fixed;inset:-120%;z-index:200;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:g .45s steps(3) infinite}
@keyframes g{0%{transform:translate(0,0)}33%{transform:translate(-5%,4%)}66%{transform:translate(4%,-4%)}100%{transform:translate(-3%,-3%)}}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}

/* paper vignette so nothing feels flat */
body::after{content:'';position:fixed;inset:0;z-index:199;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 40%,transparent 60%,rgba(0,0,0,.6));mix-blend-mode:multiply}

/* ═══════════ SPREAD 01 · POSTER ═══════════ */
/* distressed screen-print treatment for the type — torn, eroded edges */
.print{filter:url(#print)}

.poster{position:relative;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;padding:clamp(14px,2.2vh,22px) var(--pad)}

.poster__caps{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--f-grot);font-weight:800;font-size:clamp(11px,1.15vw,15px);
  text-transform:lowercase;letter-spacing:.01em;color:var(--bone);z-index:6;position:relative}
.poster__loop{font-size:1.3em;line-height:1;letter-spacing:-.12em}

/* corner captions (top-left prose · top-right soon) */
.poster__caption{position:absolute;z-index:6;left:var(--pad);top:clamp(56px,9vh,104px);
  font-family:var(--f-serif);font-size:clamp(14px,1.35vw,20px);line-height:1.3;
  color:var(--bone);max-width:28ch}
.soon{position:absolute;z-index:6;right:var(--pad);top:clamp(56px,9vh,104px);
  font-family:var(--f-serif);font-size:clamp(14px,1.35vw,20px);color:var(--bone);text-transform:lowercase}

/* fine print along the bottom edge */
.poster__print{position:absolute;z-index:6;left:0;right:0;bottom:clamp(12px,2.2vh,22px);
  padding:0 var(--pad);display:flex;justify-content:space-between;gap:12px;
  font-family:var(--f-grot);font-weight:800;font-size:clamp(9px,.82vw,11px);
  text-transform:uppercase;letter-spacing:.14em;color:var(--bone-dim)}

.poster__stage{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center}

/* THE LOGOTYPE — the largest object on the page */
.poster__type{position:relative;z-index:3;text-align:center;line-height:.68;width:100%;
  display:flex;flex-direction:column;align-items:center;pointer-events:none}
.pt{display:block;font-family:var(--f-goth);font-weight:700;color:var(--bone);white-space:nowrap;
  text-shadow:0 8px 50px rgba(0,0,0,.55)}
.pt--web{font-size:clamp(140px,31vw,500px);letter-spacing:.005em}
.pt--prop{font-size:clamp(64px,14.8vw,236px);margin-top:clamp(-12px,-1.8vh,-8px)}
.pt--ltd{font-size:clamp(34px,7.6vw,124px);align-self:flex-end;
  margin-right:clamp(8px,4.5vw,80px);margin-top:clamp(-12px,-1.8vh,-8px)}

/* ★ KNIGHT — a single layered image, riding INTO the type */
.knight{position:absolute;z-index:4;left:50%;bottom:0;transform:translateX(-50%);
  width:clamp(360px,46vw,700px)}
.js .knight{transform:none} /* gsap owns the transform (xPercent:-50) once JS boots */
.knight__img{width:100%;height:auto;max-height:94svh;object-fit:contain;object-position:bottom center;
  filter:contrast(1.06) saturate(1.04)}
/* add class="knight duo" on the <figure> to force a pink duotone on a full-colour photo */
.knight.duo .knight__img{filter:grayscale(1) contrast(1.15) brightness(.92)
  sepia(.6) hue-rotate(288deg) saturate(4.2)}
/* (global .grain overlay provides the collage grain over the knight) */
/* empty state — no box, no cartoon: just a floating hint at the bottom */
.knight--empty{width:auto;bottom:clamp(80px,18vh,180px);filter:none;
  display:grid;place-items:center}
.knight__hint{display:none}
.knight--empty .knight__hint{display:block;text-align:center;color:var(--bone-dim);
  font-family:var(--f-grot);font-weight:800;text-transform:lowercase;font-size:clamp(11px,1vw,13px);
  line-height:1.7;letter-spacing:.02em}
.knight__hint b{display:block;font-family:var(--f-goth);font-weight:700;text-transform:none;
  font-size:clamp(26px,3.4vw,52px);color:var(--pink);margin-bottom:.35em}

/* pink duotone landscape — split into back (behind rider) + front (over the legs) */
.scape{position:absolute;left:0;right:0;pointer-events:none;mix-blend-mode:screen}
.scape--back{z-index:1;bottom:0;height:44vh;opacity:.92;
  background:
    radial-gradient(58% 90% at 16% 100%,rgba(143,15,63,.95),transparent 62%),
    radial-gradient(66% 92% at 84% 100%,rgba(143,15,63,.95),transparent 62%),
    linear-gradient(to top,#c0165a 0%,#7a1038 42%,transparent 80%)}
.scape--front{z-index:5;bottom:-2vh;height:22vh;filter:blur(1px);
  background:
    radial-gradient(46% 130% at 8% 100%,#ff2f7d,transparent 60%),
    radial-gradient(44% 130% at 26% 100%,#c0165a,transparent 56%),
    radial-gradient(46% 130% at 50% 102%,#a4144f,transparent 58%),
    radial-gradient(44% 130% at 74% 100%,#c0165a,transparent 56%),
    radial-gradient(46% 130% at 92% 100%,#ff2f7d,transparent 60%)}
.poster::before{content:'';position:absolute;z-index:2;left:0;right:0;bottom:0;height:48vh;
  background:radial-gradient(82% 100% at 50% 122%,rgba(255,47,125,.32),transparent 72%);
  pointer-events:none}

/* ═══════════ EDITORIAL SPREADS — shared ═══════════ */
.spread{position:relative;min-height:100svh;overflow:hidden;
  padding:clamp(60px,12vh,150px) var(--pad);display:flex;flex-direction:column;justify-content:center}
.folio{font-family:var(--f-grot);font-weight:800;font-size:clamp(11px,1.1vw,14px);
  text-transform:lowercase;color:var(--bone-dim);letter-spacing:.02em}
.folio--r{align-self:flex-end}

/* ── 02 MANIFESTO — broken grid, overlapping ── */
.manifesto{justify-content:center}
.mf{position:relative;z-index:3;font-family:var(--f-black);font-weight:400;
  text-transform:uppercase;line-height:.82;letter-spacing:-.01em}
.mf__l{display:block;position:relative}
.mf--a{font-size:clamp(46px,11vw,168px)}
.mf--b{font-size:clamp(70px,18vw,290px);margin-left:clamp(20px,10vw,180px);color:var(--bone)}
.mf--c{font-family:var(--f-serif);font-style:italic;text-transform:none;
  font-size:clamp(40px,9vw,150px);color:var(--bone-dim);margin-left:clamp(30px,20vw,360px);
  margin-top:-.12em}
.mf--d{font-size:clamp(46px,11vw,168px);margin-top:-.04em}
.mf--e{font-family:var(--f-goth);text-transform:none;color:var(--red);
  font-size:clamp(64px,16vw,250px);line-height:.9;margin-top:-.06em;
  margin-left:clamp(10px,6vw,120px)}
.mf__tail{position:relative;z-index:3;max-width:24ch;margin-top:clamp(24px,4vh,50px);
  margin-left:auto;font-size:clamp(17px,2vw,30px);line-height:1.3;color:var(--bone)}
.mf__tail em{color:var(--pink)}
/* dragon engraving — the focal illustration, printed onto the black poster.
   sits behind the type (z1), bleeds off the right/top edges */
.mf__art{position:absolute;z-index:1;pointer-events:none;
  right:clamp(-90px,-6vw,-30px);top:clamp(-170px,-13vh,-80px);
  width:min(58vw,780px);height:auto;
  filter:drop-shadow(0 0 60px rgba(0,0,0,.5))}

/* ── 03 REGISTRY / INDEX ── */
.registry{justify-content:flex-start;gap:clamp(20px,3vh,40px)}
.reg{list-style:none;position:relative;z-index:2}
.reg li{position:relative;font-family:var(--f-black);font-weight:400;text-transform:uppercase;
  font-size:clamp(38px,10vw,150px);line-height:.92;letter-spacing:-.01em;color:var(--bone);
  display:flex;align-items:baseline;gap:.28em;transition:color .4s,transform .5s var(--ease)}
.reg li i{font-family:var(--f-grot);font-weight:800;font-style:normal;
  font-size:clamp(12px,1.3vw,18px);color:var(--bone-dim);align-self:flex-start;margin-top:.5em}
.reg li:nth-child(1){margin-left:0}
.reg li:nth-child(2){margin-left:clamp(30px,12vw,220px)}
.reg li:nth-child(3){margin-left:clamp(10px,4vw,80px)}
.reg li:nth-child(4){margin-left:clamp(50px,20vw,380px)}
.reg li:nth-child(5){margin-left:clamp(20px,8vw,140px)}
.reg li:nth-child(6){margin-left:clamp(40px,16vw,300px)}
.reg li .gothic{font-family:var(--f-goth);text-transform:none}
.reg li .serif-it{text-transform:none}
.reg li.ghost{color:#4a4540;-webkit-text-stroke:0}
.reg li:hover{color:var(--red);transform:translateX(18px) rotate(-1deg)}

/* ── 04 VERTICALS POSTER ── */
.verticals{justify-content:center}
.vwall{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.1em .3em;line-height:.82}
.vwall span{font-family:var(--f-black);font-weight:400;text-transform:uppercase;
  font-size:clamp(40px,10.5vw,190px);color:var(--bone);letter-spacing:-.02em;
  transition:color .35s}
.vwall span:nth-child(odd){transform:translateY(.06em)}
.vwall span.gothic{font-family:var(--f-goth);text-transform:none;font-size:clamp(48px,12vw,220px)}
.vwall span.serif-it{font-size:clamp(44px,11vw,200px)}
.vwall span:hover{color:var(--pink)}
.vnote{max-width:34ch;margin-top:clamp(26px,5vh,60px);font-size:clamp(16px,1.8vw,26px);
  line-height:1.3;color:var(--bone-dim)}

/* ── 05 NODES ── */
.nodes{justify-content:center;gap:clamp(16px,3vh,36px)}
/* gothic collage — engraved figures printed behind the cities */
.nodes .collage{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ci{position:absolute}
.ci img{display:block;width:100%;height:auto}
.ci--seraph{width:min(48vw,660px);top:-10vh;right:-4%;opacity:.72}
.ci--seraph img{transform:rotate(-3deg)}
.ci--shield{width:min(32vw,420px);top:16vh;left:33%;opacity:.42}
.ci--imp{width:min(23vw,290px);left:0%;bottom:-8vh;opacity:.66}
.ci--imp img{transform:rotate(6deg)}
.ci--dove{width:min(13vw,150px);top:7vh;left:6%;opacity:.75}
.ci--dove img{transform:rotate(-8deg)}
.nodes .folio--r{position:relative;z-index:2}
.nd{position:relative;z-index:2;display:flex;flex-direction:column;line-height:.78}
.nd span{font-family:var(--f-goth);font-size:clamp(58px,15vw,260px);color:var(--bone);
  transition:color .4s,letter-spacing .5s var(--ease)}
.nd span:nth-child(1){align-self:flex-start}
.nd span:nth-child(2){align-self:center}
.nd span:nth-child(3){align-self:flex-end}
.nd span:hover{color:var(--red);letter-spacing:.01em}

/* ── 06 CLOSING ── */
.closing{align-items:center;justify-content:center;text-align:center;gap:clamp(24px,5vh,54px)}
.cl{font-family:var(--f-goth);font-size:clamp(58px,14vw,240px);line-height:.84;color:var(--bone);
  text-shadow:0 0 80px rgba(255,47,125,.22)}
.soon--lg{position:static;font-family:var(--f-serif);font-style:italic;
  font-size:clamp(26px,4vw,58px);letter-spacing:.04em;color:var(--pink)}
.cl__foot{font-size:clamp(15px,1.6vw,22px);line-height:1.4;color:var(--bone-dim)}

/* red accents — win over the more specific base selectors */
.vwall span.red,.reg li.red,.nd span.red{color:var(--red)}
.vwall span.red:hover{color:var(--pink)}

/* reveal defaults */
[data-tilt],[data-float]{will-change:transform}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:720px){
  /* POSTER → vertical composition: type, knight overlapping, caption */
  .poster{padding-bottom:0}
  .poster__stage{justify-content:flex-start;padding-top:2vh}
  .pt--web{font-size:32vw}
  .pt--prop{font-size:13.4vw}
  .pt--ltd{font-size:7.4vw;margin-right:7vw;margin-top:1.6vh}
  .knight{position:relative;left:auto;bottom:auto;width:86vw;margin:-5vh auto 0;transform:none}
  .poster__caption{position:static;max-width:24ch;margin:3.5vh auto 0;text-align:center;font-size:16px}
  /* fine print stacked & centred so it never wraps into itself */
  .poster__print{flex-direction:column;align-items:center;gap:3px;text-align:center;
    font-size:9px;letter-spacing:.12em;bottom:10px}
  .scape--back{height:22vh}

  /* MANIFESTO */
  .mf--c{margin-left:clamp(20px,12vw,120px)}
  .mf--b{margin-left:clamp(14px,8vw,80px)}
  .mf__art{width:120vw;right:-32vw;top:auto;bottom:-4vh;opacity:.4}

  /* REGISTRY → clean left-aligned stack, no right-edge bleed */
  .registry{gap:0}
  .reg li{font-size:clamp(26px,7.6vw,48px);margin-left:0!important;flex-wrap:wrap;
    column-gap:.3em;line-height:1.04;padding:5px 0}
  .reg li i{margin-top:.35em}

  /* kill the dead whitespace — sections size to their content (hero stays full) */
  .spread{min-height:auto;justify-content:flex-start;
    padding-top:clamp(70px,12vh,120px);padding-bottom:clamp(70px,12vh,120px)}
  .manifesto,.verticals,.closing{justify-content:flex-start}
  .mf__art{width:112vw;right:-26vw;top:auto;bottom:0;max-height:62vh;opacity:.35}

  /* NODES collage → keep some height so the figures frame the cities */
  .nodes{min-height:84vh;justify-content:center;padding-top:clamp(56px,10vh,90px);padding-bottom:clamp(56px,10vh,90px)}
  .ci--seraph{width:64vw;top:-1vh;right:-14%;opacity:.6}
  .ci--shield{width:46vw;top:6vh;left:23%;opacity:.4}
  .ci--imp{width:36vw;left:-7%;top:auto;bottom:3vh;opacity:.6}
  .ci--dove{width:26vw;top:1vh;left:1%;opacity:.72}
}
@media (max-width:480px){
  .pt--web{font-size:33vw}
  .pt--prop{font-size:13.6vw}
}

/* ═══════════════════════════════════════════════
   COVENANT — the document page (terms of use)
   readable editorial: blackletter titles, serif body
   ═══════════════════════════════════════════════ */
.cl__link{display:inline-block;margin-top:clamp(14px,2.5vh,26px);
  font-family:var(--f-grot);font-weight:800;font-size:clamp(11px,1.1vw,14px);
  text-transform:lowercase;letter-spacing:.06em;color:var(--bone-dim);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.cl__link:hover{color:var(--pink);border-color:var(--pink)}

.doc__bar{position:fixed;top:0;left:0;right:0;z-index:6;padding:16px var(--pad);
  display:flex;justify-content:space-between;gap:16px;
  font-family:var(--f-grot);font-weight:800;font-size:clamp(10px,1vw,13px);
  text-transform:lowercase;letter-spacing:.02em;color:var(--bone-dim)}
.doc__bar a{color:var(--bone);text-decoration:none;transition:color .3s}
.doc__bar a:hover{color:var(--pink)}
.doc__bar span{color:var(--red)}

.doc{position:relative;z-index:1;max-width:min(92vw,880px);margin:0 auto;
  padding:clamp(96px,16vh,180px) 0 clamp(70px,11vh,130px)}

.cov__title{font-family:var(--f-goth);font-weight:700;color:var(--bone);text-align:center;
  font-size:clamp(58px,14vw,210px);line-height:.88;filter:url(#print);
  text-shadow:0 0 70px rgba(255,47,125,.16);margin-bottom:clamp(44px,8vh,96px)}

.cov__creed{max-width:32ch;margin:0 auto}
.cov__creed p{font-family:var(--f-serif);font-size:clamp(19px,2.5vw,31px);line-height:1.42;
  color:var(--bone);margin:.5em 0}
.cov__creed .gap{margin-top:1.15em}
.cov__creed .key{font-style:italic;color:var(--bone);margin-top:1.15em;margin-bottom:1.15em}
.cov__creed .key b{font-family:var(--f-goth);font-style:normal;font-weight:700;color:var(--red)}
.cov__creed .last{color:var(--pink);font-style:italic;margin-top:1.15em}

.cov__rule{text-align:center;color:var(--red);font-size:clamp(18px,2vw,26px);
  letter-spacing:.4em;margin:clamp(48px,8vh,96px) 0}

.cov__sec{max-width:62ch;margin:0 auto}
.cov__sec h2{font-family:var(--f-goth);font-weight:700;color:var(--bone);text-align:center;
  font-size:clamp(34px,6vw,84px);line-height:.92;margin-bottom:clamp(24px,4vh,48px)}
.cov__sec p{font-family:var(--f-serif);font-size:clamp(16px,1.55vw,19px);line-height:1.64;
  color:var(--bone-dim);margin:0 0 1.15em}
.cov__sec p strong{color:var(--bone);font-weight:600}

.cov__final{text-align:center;max-width:none}
.cov__final p{font-family:var(--f-serif);font-style:italic;color:var(--bone);
  font-size:clamp(26px,4.4vw,58px);line-height:1.18}

.doc__foot{max-width:62ch;margin:clamp(64px,10vh,120px) auto 0;padding-top:24px;
  border-top:1px solid rgba(239,233,223,.14);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-family:var(--f-grot);font-weight:800;font-size:11px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--bone-dim)}
.doc__foot a{color:var(--bone);text-decoration:none;transition:color .3s}
.doc__foot a:hover{color:var(--pink)}

@media (max-width:720px){
  .doc__bar span:nth-child(2){display:none}
  .cov__creed{max-width:none}
  .doc__foot{flex-direction:column;gap:10px}
}