/* docomade.com — xerox-zine brutalism / fluorescent street-poster */

:root{
  --paper:#d8d4cc;
  --cream:#f5f1e8;
  --toner:#0a0a0a;
  --acid:#f0ff1f;
  --orange:#ff5e1a;
  --magenta:#ff2e88;
  --green:#1a3d2e;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--paper);
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(10,10,10,0.06) 0 1px, transparent 1px 40px),
    radial-gradient(ellipse at center, transparent 55%, rgba(10,10,10,0.22) 100%);
  background-blend-mode:multiply, multiply, multiply;
  color:var(--toner);
  font-family:'Space Mono', monospace;
  cursor:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 0v24M0 12h24' stroke='%230a0a0a' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='%23ff2e88'/%3E%3C/svg%3E") 12 12, crosshair;
  overflow-x:hidden;
}

.xerox-overlay{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:
    repeating-linear-gradient(95deg, rgba(10,10,10,0.04) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 20% 30%, rgba(255,46,136,0.05), transparent 40%);
  mix-blend-mode:multiply;
  opacity:0.8;
}

/* ---- edge dot-matrix strips ---- */
.edge-strip{
  position:fixed;top:0;bottom:0;width:8vw;z-index:50;pointer-events:none;
  overflow:hidden;display:flex;align-items:flex-start;justify-content:center;
  font-family:'VT323', monospace;font-size:0.95rem;color:var(--toner);opacity:0.5;
  border-right:1px solid rgba(10,10,10,0.25);
}
.edge-left{left:0;}
.edge-right{right:0;border-right:none;border-left:1px solid rgba(10,10,10,0.25);}
.edge-strip span{
  writing-mode:vertical-rl;white-space:nowrap;letter-spacing:0.1em;
  animation:strip-scroll 38s linear infinite;
}
.edge-right span{animation-duration:46s;animation-direction:reverse;}
@keyframes strip-scroll{from{transform:translateY(-50%);}to{transform:translateY(0%);}}

main{position:relative;z-index:1;}

/* ---- generic section ---- */
.sec{
  min-height:100vh;
  position:relative;
  padding:9vh 11vw;
  display:flex;flex-direction:column;justify-content:center;
  scroll-snap-align:start;
  transform:rotate(0deg);
}
@supports (scroll-snap-type:y proximity){
  main{scroll-snap-type:y proximity;}
}

.sec:nth-of-type(even){background:var(--cream);}
.sec.in-view{animation:shake-x 0.42s cubic-bezier(.36,.07,.19,.97);}

@keyframes shake-x{
  0%,100%{transform:translateX(0);}
  10%{transform:translateX(-8px);}
  20%{transform:translateX(8px);}
  30%{transform:translateX(-6px);}
  40%{transform:translateX(6px);}
  50%{transform:translateX(-3px);}
  60%{transform:translateX(3px);}
}

/* ---- crosshairs ---- */
.crosshair{position:absolute;width:14px;height:14px;pointer-events:none;}
.crosshair::before,.crosshair::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--toner);
}
.crosshair::before{width:14px;height:2px;}
.crosshair::after{width:2px;height:14px;}
.crosshair.ch-magenta::before,.crosshair.ch-magenta::after{background:var(--magenta);}
.crosshair.ch-magenta{transform:translate(2px,-1px);}
.ch-tl{top:3vh;left:3vw;}
.ch-tr{top:3vh;right:3vw;}
.ch-bl{bottom:3vh;left:3vw;}
.ch-br{bottom:3vh;right:3vw;}

.crosshair-inline{display:inline-block;color:var(--magenta);transform:translateY(1px);margin:0 0.4em;}

/* ---- type ---- */
.huge{
  font-family:'Anton', 'Arial Narrow', sans-serif;
  font-size:clamp(3rem,9vw,7rem);
  line-height:0.88;letter-spacing:-0.02em;text-transform:uppercase;
  text-shadow:0.5px 0 0 currentColor;
  color:var(--toner);
}
.sec-label{
  font-family:'Bebas Neue', sans-serif;font-size:clamp(1.1rem,2.4vw,2.4rem);
  letter-spacing:0.06em;text-transform:uppercase;color:var(--orange);
  margin-bottom:1.4rem;text-shadow:0.5px 0 0 currentColor;
}
.mono{font-family:'Space Mono', monospace;font-size:0.96rem;line-height:1.55;max-width:46ch;margin-bottom:0.9rem;}
.mono strong{font-weight:700;background:var(--acid);box-shadow:0 0 0 3px var(--acid);}
.vt{font-family:'VT323', monospace;font-size:1.05rem;line-height:1.35;letter-spacing:0.04em;color:var(--toner);}

/* magenta misregistration echo */
.magenta-echo{position:relative;display:inline-block;z-index:0;}
.magenta-echo::before{
  content:attr(data-text);position:absolute;left:0;top:0;
  color:var(--magenta);transform:translate(3px,-2px);mix-blend-mode:multiply;
  opacity:0.7;z-index:-1;white-space:pre-line;pointer-events:none;
  font:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;
}

.magenta-bar{display:block;width:min(60vw,420px);height:3px;background:var(--magenta);margin-top:1.4rem;transform:translateX(-12px) rotate(-0.6deg);}

.strike{position:relative;}
.strike::before{
  content:"";position:absolute;left:-4%;right:-4%;top:48%;height:3px;background:var(--magenta);
  transform:rotate(-1.5deg);
}

/* content blocks */
.block{
  border:1px solid var(--toner);
  padding:1.6rem 1.8rem;margin-top:2.2rem;background:rgba(255,255,255,0.12);
  max-width:640px;position:relative;
}
.tilt-a{transform:rotate(-1.5deg);}
.tilt-b{transform:rotate(1.8deg);}
.tilt-c{transform:rotate(-1.1deg);}

/* ---- HERO ---- */
.sec-hero{align-items:flex-start;}
.hero-glyph{
  font-family:'Reggae One','Anton',sans-serif;
  font-size:clamp(8rem,22vw,18rem);
  line-height:0.8;color:var(--toner);transform:rotate(-1.2deg);
  position:relative;z-index:1;text-shadow:0.5px 0 0 currentColor;
  margin-left:-1vw;
}
.hero-glyph::before{
  content:attr(data-text);position:absolute;left:0;top:0;color:var(--magenta);
  transform:translate(5px,-3px);mix-blend-mode:multiply;opacity:0.65;z-index:-1;
}
.hero-meta{margin-top:2rem;}
.hero-meta .vt{margin-bottom:0.35rem;}

/* ---- QUESTION ---- */
.sec-question .huge{margin:0.8rem 0;}

/* ---- DEMANDS ---- */
.sec-demands{padding-bottom:14vh;}
.demands{list-style:none;counter-reset:none;margin-top:2rem;}
.demands li{
  display:flex;align-items:flex-start;gap:1.6rem;
  padding:1.4rem 0;border-bottom:1px solid rgba(10,10,10,0.4);
  position:relative;
}
.demands li > .d-text{flex:1;}
.demands li > p{flex-basis:100%;margin-left:96px;margin-top:0.4rem;}
.demands .d-1{margin-left:0;}
.demands .d-2{margin-left:6vw;}
.demands .d-3{margin-left:-2vw;}
.demands .d-4{margin-left:9vw;}
.demands .d-5{margin-left:1vw;}
.demands .d-6{margin-left:-3vw;}
.demands .d-7{margin-left:4vw;}
.demands .huge{font-size:clamp(2rem,5.4vw,3.4rem);}

.stencil-num{
  display:inline-block;flex:0 0 auto;width:80px;height:80px;
  background:var(--acid);color:var(--toner);
  font-family:'Anton',sans-serif;font-size:3.6rem;line-height:80px;text-align:center;
  transform:rotate(-2deg);box-shadow:3px 3px 0 var(--toner);
}

/* ---- GLYPH BURST ---- */
.sec-burst{overflow:hidden;}
.glyph-burst{position:relative;height:34vh;margin:1rem 0 1rem;}
.glyph-burst .g{
  position:absolute;font-family:'Reggae One','Anton',sans-serif;color:var(--toner);
  text-shadow:0.5px 0 0 currentColor;line-height:1;
}
.g1{left:2%;top:5%;font-size:clamp(3rem,9vw,7rem);transform:rotate(-12deg);color:var(--toner);}
.g2{left:24%;top:42%;font-size:clamp(2rem,6vw,4.5rem);transform:rotate(8deg);color:var(--orange);}
.g3{left:46%;top:0%;font-size:clamp(4rem,12vw,9rem);transform:rotate(-4deg);}
.g4{left:68%;top:38%;font-size:clamp(3.5rem,10vw,8rem);transform:rotate(15deg);color:var(--magenta);}
.g5{left:14%;top:64%;font-size:clamp(1.6rem,4vw,3rem);transform:rotate(22deg);opacity:0.7;}
.g6{left:84%;top:8%;font-size:clamp(2rem,5vw,3.6rem);transform:rotate(-18deg);opacity:0.8;}
.g7{left:58%;top:62%;font-size:clamp(2.4rem,7vw,5rem);transform:rotate(6deg);color:var(--green);}

/* ---- RESIST ---- */
.sec-resist .huge{margin:0.8rem 0 0;}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.8rem;}
.brut-btn{
  display:inline-block;text-decoration:none;border:none;cursor:inherit;
  padding:0.5rem 1rem;background:var(--toner);color:var(--acid);
  font-family:'Anton',sans-serif;font-size:1.4rem;letter-spacing:0.02em;text-transform:uppercase;
  transition:none;
}
.brut-btn:active{animation:shake-x 0.4s cubic-bezier(.36,.07,.19,.97);background:var(--magenta);color:var(--toner);}
.brut-btn:hover{animation:shake-x 0.4s cubic-bezier(.36,.07,.19,.97);}
.brut-btn.brut-link{background:var(--orange);color:var(--toner);}

/* ---- STAMPS ---- */
.stamp{
  position:absolute;font-family:'Anton',sans-serif;letter-spacing:0.1em;text-transform:uppercase;
  border:3px double currentColor;border-radius:50%;
  width:118px;height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;line-height:1;font-size:1.15rem;
  transform:rotate(-8deg);filter:contrast(1.1) opacity(0.78);
  pointer-events:none;
}
.stamp small{font-family:'VT323',monospace;font-size:0.8rem;letter-spacing:0;margin-top:0.2rem;}
.stamp-green{color:var(--green);}
.stamp-magenta{color:var(--magenta);}
.sec-hero .stamp{right:14vw;bottom:18vh;}
.sec-question .stamp{right:13vw;top:14vh;}
.sec-demands .stamp{right:10vw;top:10vh;}
.sec-burst .stamp{right:14vw;bottom:14vh;}
.sec-resist .stamp{right:12vw;bottom:16vh;width:130px;height:130px;font-size:1rem;}

/* ---- FOOTER ---- */
.sec-footer{justify-content:flex-end;align-items:flex-start;padding-bottom:9vh;overflow:hidden;}
.footer-slogan{
  font-family:'Anton',sans-serif;font-size:clamp(3rem,11vw,9rem);line-height:0.86;
  text-transform:uppercase;letter-spacing:-0.02em;text-shadow:0.5px 0 0 currentColor;
  align-self:stretch;text-align:right;margin-right:-6vw;color:var(--toner);
}
.footer-fine{margin-top:2.4rem;font-family:'VT323',monospace;font-size:1rem;letter-spacing:0.06em;opacity:0.7;}
.end-line{margin-top:0.8rem;font-family:'VT323',monospace;font-size:1.1rem;color:var(--orange);letter-spacing:0.1em;}

@media (max-width:760px){
  .sec{padding:8vh 12vw;}
  .demands li{flex-wrap:wrap;}
  .demands li > p{margin-left:0;}
  .stamp{width:90px;height:90px;font-size:0.9rem;}
  .edge-strip{font-size:0.8rem;}
}