/* EVOLUTION - concept site
   A photocopied zine: black hero, paper body, one red, everything printed twice
   too many times. Textures are generated (turbulence + gradients), no image files. */

/* ------------------------------------------------------------------ tokens */
:root{
  --ink:#0d0b0a;
  --ink-soft:#2a2622;
  --paper:#d7d2c4;
  --paper-deep:#c5bfae;
  --red:#b21a1a;
  --tape:rgba(232,224,198,.62);
  --tape-edge:rgba(120,110,86,.35);

  --display:"Anton",Impact,"Haettenschweiler",sans-serif;
  --type:"Special Elite","Courier New",monospace;
  --body:"Barlow Condensed","Arial Narrow",sans-serif;

  --gutter:clamp(1.1rem,4vw,3.5rem);
  --measure:min(1180px,100%);

  /* Photocopier grain. Reused everywhere, so it lives in one place. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --fibre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.6' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.55'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--ink);
  font:400 clamp(1rem,.55vw + .88rem,1.18rem)/1.55 var(--body);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--red);color:#fff;padding:.6rem 1rem}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* The grain sits over the entire document so the hero, the paper and the photos
   all pick up the same copier dirt. Overlay works on black and on paper alike. */
body::after{
  content:"";position:fixed;inset:-40px;z-index:60;pointer-events:none;
  background-image:var(--grain);background-size:260px 260px;
  mix-blend-mode:overlay;opacity:.42;
  animation:shudder .48s steps(1) infinite;
}
@keyframes shudder{
  0%{transform:translate(0,0)}      25%{transform:translate(-14px,9px)}
  50%{transform:translate(11px,-12px)} 75%{transform:translate(-7px,-6px)}
}

/* --------------------------------------------------------------------- bar */
.bar{
  position:fixed;inset:0 0 auto;z-index:70;
  display:flex;align-items:center;gap:var(--gutter);
  padding:.85rem var(--gutter);
  color:#f2efe6;transition:background .25s,color .25s,box-shadow .25s;
}
/* Difference blending looked right until the page put mid grey behind it and the
   whole bar vanished. Two declared modes, swapped on scroll, always read. */
.bar a,.bar__stamp{text-shadow:0 1px 12px rgba(0,0,0,.9)}
.bar--ink{
  background:rgba(215,210,196,.94);color:var(--ink);
  box-shadow:0 1px 0 rgba(13,11,10,.35);
  backdrop-filter:blur(3px);
}
.bar--ink a,.bar--ink .bar__stamp{text-shadow:none}
.bar--ink .bar__mark img{filter:invert(1)}
.bar__mark img{width:clamp(96px,9vw,132px)}
.bar__nav{display:flex;gap:clamp(.8rem,2vw,1.9rem);margin-inline-start:auto}
.bar__nav a{
  font:400 .82rem/1 var(--type);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;padding-bottom:.2rem;border-bottom:1px solid transparent;
}
.bar__nav a:hover{border-bottom-color:currentColor}
.bar__stamp{
  font:400 .72rem/1 var(--type);letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid currentColor;padding:.3rem .55rem;transform:rotate(-4deg);
}

/* ------------------------------------------------------------------- stage */
.stage{position:relative;height:250vh;background:#000}
.stage__pin{
  position:sticky;top:0;z-index:1;
  height:100svh;overflow:hidden;
  display:grid;place-items:center;
}
.stage__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Crushed to a photocopy: no colour, blown highlights, plugged blacks. The
     source is only 1024 wide, and this grade is what makes that read as a choice. */
  filter:grayscale(1) contrast(2.05) brightness(.55);
  transform:scale(1.06);
}
/* Halftone dots, the giveaway that something has been through a copier. */
.stage__halftone{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%,#000 .9px,transparent 1.15px);
  background-size:3.2px 3.2px;
  mix-blend-mode:overlay;opacity:.4;
}
.stage__vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,.38) 0%,rgba(0,0,0,.3) 32%,rgba(0,0,0,.88) 100%);
}
.stage__word{
  position:relative;margin:0;padding-inline:var(--gutter);
  width:min(1180px,92vw);
  filter:drop-shadow(0 0 34px rgba(0,0,0,.85));
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{50%{transform:scale(1.014)}}
.stage__sub{
  position:absolute;left:50%;bottom:16vh;transform:translateX(-50%);
  margin:0;white-space:nowrap;
  font:400 clamp(.72rem,1.5vw,1rem)/1 var(--type);
  letter-spacing:.32em;text-transform:uppercase;color:#e8e4da;
}
.stage__sub span{color:var(--red)}
.stage__cue{
  position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);
  font:400 .7rem/1 var(--type);letter-spacing:.24em;text-transform:uppercase;
  color:#8d887d;animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{50%{transform:translate(-50%,7px)}}

/* Torn cutouts that ride up over the pinned film. */
.stage__pass{position:absolute;z-index:2;left:0;right:0;pointer-events:none}
.stage__pass{top:112vh}
.stage__pass--b{top:178vh}
.scrap{margin:0;position:relative;pointer-events:auto}
.scrap img{
  filter:url(#tear-hard) grayscale(1) contrast(1.32) brightness(1.02);
  box-shadow:0 24px 60px rgba(0,0,0,.75);
}
.scrap::before,.scrap::after{
  content:"";position:absolute;z-index:2;width:clamp(62px,7vw,104px);height:clamp(22px,2.3vw,34px);
  background:var(--tape);backdrop-filter:blur(1px);
  border-left:1px solid var(--tape-edge);border-right:1px solid var(--tape-edge);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.scrap::before{top:-12px;left:8%;transform:rotate(-6deg)}
.scrap::after{bottom:-12px;right:10%;transform:rotate(4deg)}
.scrap--a{width:clamp(210px,26vw,380px);margin-left:clamp(1rem,7vw,7rem);transform:rotate(-4.5deg)}
.scrap--b{width:clamp(190px,23vw,340px);margin-left:auto;margin-right:clamp(1rem,8vw,8rem);transform:rotate(5deg)}

/* ------------------------------------------------------------------ ticker */
.ticker{
  position:relative;z-index:3;
  background:var(--paper);color:var(--ink);
  border-block:3px solid var(--ink);
  overflow:hidden;padding:.5rem 0;
}
.ticker__run{display:flex;width:max-content;animation:roll 34s linear infinite}
.ticker__run span{
  font:400 clamp(.8rem,1.5vw,1.05rem)/1 var(--type);
  letter-spacing:.16em;text-transform:uppercase;padding-inline:.5rem;white-space:nowrap;
}
@keyframes roll{to{transform:translateX(-50%)}}

/* ------------------------------------------------------- paper + wall beds */
.sheet{
  position:relative;z-index:3;
  background:var(--paper);
  padding-block:clamp(4rem,10vw,8.5rem);
}
.sheet--tight{padding-block:clamp(3rem,7vw,6rem)}
.sheet::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--fibre);background-size:320px 320px;
  mix-blend-mode:multiply;opacity:.18;
}
.wall{
  position:relative;z-index:3;
  background:#141110;color:var(--paper);
  padding-block:clamp(4rem,10vw,8.5rem);
}
.wall::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--fibre);background-size:420px 420px;
  mix-blend-mode:screen;opacity:.09;
}

/* ------------------------------------------------------------------- type */
.kicker{
  margin:0 0 .9rem;
  font:400 .78rem/1 var(--type);letter-spacing:.26em;text-transform:uppercase;color:var(--red);
}
.kicker--center{text-align:center}
.kicker--pale{color:#e2603f;text-align:center}
.huge{
  margin:0 0 1.4rem;
  font:400 clamp(2.6rem,8.5vw,6.4rem)/.86 var(--display);
  letter-spacing:-.01em;text-transform:uppercase;
}
.huge--center{text-align:center}
.huge--pale{text-align:center;color:var(--paper)}
.huge--rule{border-bottom:4px solid var(--ink);padding-bottom:.35rem;margin-bottom:2.2rem}
.lede{margin:0 0 1.8rem;max-width:46ch;font-size:1.05em}
.fine{
  margin:2rem auto 0;max-width:52ch;text-align:center;
  font:400 .8rem/1.6 var(--type);color:var(--ink-soft);
}

/* ------------------------------------------------------------------ record */
.record{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:1fr}
@media (min-width:900px){.record{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);align-items:start}}
.record__art{position:relative}
.sleeve{margin:0;position:relative;transform:rotate(-1.6deg);aspect-ratio:1}
.sleeve > img:first-child{width:100%;height:100%;object-fit:cover}
.sleeve img{filter:url(#tear-soft) grayscale(1) contrast(1.42) brightness(.98);box-shadow:0 18px 44px rgba(0,0,0,.35)}
.sleeve__mark{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:62%;filter:none;box-shadow:none;mix-blend-mode:screen;
}
.circled{
  position:absolute;right:-.4rem;bottom:-1.6rem;
  font:400 1.05rem/1 var(--type);color:var(--red);
  padding:.65rem .8rem;border:2.5px solid var(--red);border-radius:50%;
  transform:rotate(-11deg);background:rgba(215,210,196,.7);
}
.tracks{list-style:none;counter-reset:t;margin:0 0 2.2rem;padding:0;border-top:2px solid var(--ink)}
.tracks li{
  counter-increment:t;display:flex;align-items:baseline;gap:.75rem;
  padding:.5rem 0;border-bottom:1px solid rgba(13,11,10,.28);
}
.tracks li::before{
  content:counter(t,decimal-leading-zero);
  font:400 .78rem/1 var(--type);color:var(--red);min-width:2ch;
}
.tracks span{font-weight:500;letter-spacing:.01em}
.tracks em{margin-inline-start:auto;font:400 .8rem/1 var(--type);font-style:normal;color:var(--ink-soft)}
.tracks li:hover{background:rgba(13,11,10,.06)}

.btns{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem}
.stamp{
  display:inline-block;text-decoration:none;
  font:400 1rem/1 var(--type);letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);border:3px solid var(--red);padding:.7rem 1.15rem;
  transform:rotate(-2deg);transition:transform .12s,background .12s,color .12s;
}
.stamp:hover{transform:rotate(-2deg) scale(1.03);background:var(--red);color:var(--paper)}
.plain{
  font:400 .85rem/1 var(--type);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:.15rem;
}
.plain:hover{color:var(--red);border-bottom-color:var(--red)}

/* -------------------------------------------------------------------- tour */
.flyer{
  position:relative;
  width:min(760px,100%);margin-inline:auto;
  background:var(--paper);color:var(--ink);
  padding:clamp(2rem,5vw,3.6rem) clamp(1.2rem,4vw,3rem);
  transform:rotate(-.7deg);
  box-shadow:0 26px 70px rgba(0,0,0,.6);
}
.flyer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--fibre);background-size:300px 300px;mix-blend-mode:multiply;opacity:.2;
}
.staple{position:absolute;width:15px;height:5px;background:#8e8f92;box-shadow:0 1px 0 rgba(0,0,0,.5)}
.staple--tl{top:12px;left:16px;transform:rotate(-24deg)}
.staple--tr{top:12px;right:16px;transform:rotate(21deg)}
.staple--bl{bottom:12px;left:16px;transform:rotate(16deg)}
.staple--br{bottom:12px;right:16px;transform:rotate(-19deg)}

.dates{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.dates li{
  display:grid;gap:.15rem .9rem;align-items:baseline;
  grid-template-columns:auto 1fr auto;
  padding:.7rem 0;border-bottom:1px solid rgba(13,11,10,.3);
}
.dates b{font:400 1.05rem/1 var(--type)}
.dates span{font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.dates i{
  grid-column:2;font-style:normal;font-size:.9em;color:var(--ink-soft);
}
.dates a{
  grid-row:1 / span 2;grid-column:3;align-self:center;
  font:400 .74rem/1 var(--type);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;border:2px solid var(--ink);padding:.4rem .6rem;
}
.dates a:hover{background:var(--ink);color:var(--paper)}
.dates .gone{color:rgba(13,11,10,.42)}
.dates .gone a{
  border-color:var(--red);color:var(--red);transform:rotate(-6deg);pointer-events:none;
}

/* ------------------------------------------------------------------ photos */
.board{display:grid;gap:clamp(2.4rem,5vw,3.6rem);grid-template-columns:1fr}
@media (min-width:760px){.board{grid-template-columns:repeat(3,1fr);align-items:start}}
.pin{margin:0;position:relative}
.pin img{
  filter:url(#tear-scrap) grayscale(1) contrast(1.35) brightness(1.02);
  transition:transform .16s ease;
}
.pin:hover img{transform:rotate(.8deg) scale(1.015)}
.pin::before{
  content:"";position:absolute;z-index:2;top:-14px;left:50%;translate:-50% 0;
  width:clamp(70px,8vw,110px);height:30px;background:var(--tape);transform:rotate(-3deg);
  border-left:1px solid var(--tape-edge);border-right:1px solid var(--tape-edge);
  box-shadow:0 1px 4px rgba(0,0,0,.22);
}
.pin figcaption{
  margin-top:1rem;font:400 .82rem/1.5 var(--type);color:var(--ink-soft);
  border-left:3px solid var(--red);padding-left:.7rem;
}
.pin--1{transform:rotate(-2deg)}
.pin--2{transform:rotate(1.4deg);margin-top:clamp(0rem,3vw,2.4rem)}
.pin--3{transform:rotate(-1deg)}

/* ------------------------------------------------------------------- merch */
.goods{display:grid;gap:clamp(1.6rem,4vw,3rem);grid-template-columns:1fr;margin-top:2.6rem}
@media (min-width:760px){.goods{grid-template-columns:repeat(3,1fr)}}
.good{border:2px solid rgba(215,210,196,.5);padding:1.4rem}
.good__box{
  aspect-ratio:4/5;display:grid;place-items:center;margin-bottom:1.1rem;
  background:
    repeating-linear-gradient(45deg,rgba(215,210,196,.09) 0 8px,transparent 8px 16px),
    #1d1918;
  border:1px solid rgba(215,210,196,.28);
}
.good__art{width:62%;opacity:.62;mix-blend-mode:screen}
.good:nth-child(2) .good__art{width:44%;transform:rotate(-4deg)}
.good:nth-child(3) .good__art{width:74%;transform:rotate(2deg)}
.good h3{
  margin:0 0 .5rem;font:400 clamp(1.3rem,2.6vw,1.75rem)/1 var(--display);text-transform:uppercase;
}
.good p{margin:0 0 .7rem;color:rgba(215,210,196,.72);font-size:.95em}
.good .price{
  margin:0;font:400 1.15rem/1 var(--type);color:#e2603f;
}
.good:hover{border-color:#e2603f}

/* ------------------------------------------------------------------ coupon */
.coupon{
  width:min(680px,100%);margin-inline:auto;text-align:center;
  border:3px dashed var(--ink);padding:clamp(1.6rem,4vw,2.8rem);
  background:rgba(255,255,255,.16);transform:rotate(.5deg);
}
.coupon__cut{
  margin:0 0 1.2rem;font:400 .74rem/1 var(--type);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
.coupon h2{margin:0 0 .6rem;font:400 clamp(1.9rem,5vw,3rem)/.95 var(--display);text-transform:uppercase}
.coupon__lede{margin:0 auto 1.6rem;max-width:40ch}
.coupon__row{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;align-items:center}
.coupon input{
  flex:1 1 260px;min-width:0;
  border:none;border-bottom:2.5px solid var(--ink);background:transparent;
  font:400 1rem/1 var(--type);color:var(--ink);padding:.6rem .3rem;
}
.coupon input::placeholder{color:rgba(13,11,10,.4)}
.coupon button{
  border:3px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;
  font:400 .9rem/1 var(--type);letter-spacing:.14em;text-transform:uppercase;padding:.7rem 1.2rem;
}
.coupon button:hover{background:var(--red);border-color:var(--red)}
.coupon__note{margin:2rem auto 0;max-width:34ch;font:400 .72rem/1.5 var(--type);color:rgba(13,11,10,.5)}

/* ------------------------------------------------------------------- foot */
.foot{position:relative;z-index:3;background:var(--ink);color:rgba(215,210,196,.66);padding-block:clamp(3rem,7vw,5rem)}
.foot__in{text-align:center}
.foot__mark{width:120px;margin:0 auto 1.6rem;opacity:.8}
.foot p{margin:0 0 .5rem;font:400 .82rem/1.7 var(--type)}
.foot a{color:var(--paper)}
.foot a:hover{color:var(--red)}
.foot__fine{color:rgba(215,210,196,.42)}

/* ------------------------------------------------------------------ reveal */
/* Only armed once the script runs, so a JS failure leaves everything visible
   rather than hiding the whole page behind an observer that never fires. */
.js .reveal{transform:translateY(30px);clip-path:inset(0 0 100% 0)}
.js .reveal.seen{transform:none;clip-path:inset(0 0 -20% 0);transition:transform .55s cubic-bezier(.2,.7,.3,1),clip-path .55s cubic-bezier(.2,.7,.3,1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::after,.stage__word,.stage__cue,.ticker__run{animation:none}
  .js .reveal{transform:none;clip-path:none}
}

/* ------------------------------------------------------------------ narrow */
@media (max-width:640px){
  .stage{height:210vh}
    .stage__sub{font-size:.66rem;letter-spacing:.2em}
  .bar__stamp{display:none}
  .dates li{grid-template-columns:auto 1fr}
  .dates a{grid-column:1 / -1;grid-row:auto;justify-self:start;margin-top:.4rem}
}