/* ============================================================
   POSTER SYSTEM  ·  metal gig-flyer / screenprint toolkit
   ============================================================ */

:root{
  /* poster tokens (public site) */
  --ink:        #0b0a08;
  --ink-2:      #15120f;
  --ink-3:      #211c17;
  --bone:       #ece6d8;
  --bone-dim:   #b9b1a0;
  --bone-faint: #6d665a;
  --blood:      #b01217;
  --blood-deep: #7c0d11;
  --blood-bright:#e0211a;
  --chrome-1:   #f4f1ea;
  --chrome-2:   #9a958c;
  --chrome-3:   #524e47;
  --edge:       rgba(236,230,216,0.14);

  /* legacy tokens (kept so admin.css and the backoffice CSS keep working) */
  --bg:         #0b0a08;
  --bg-2:       #15120f;
  --text:       #ece6d8;
  --muted:      #b9b1a0;
  --faint:      #6d665a;
  --line:       rgba(236,230,216,0.10);
  --line-strong:rgba(236,230,216,0.30);
  --accent:     #b01217;
  --accent-dim: rgba(176,18,23,0.10);
  --serif:      'Pirata One', serif;
  --sans:       'Archivo', system-ui, sans-serif;
  --mono:       'Space Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:'Archivo', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--blood); color:var(--bone); }
a{ color:inherit; }

/* fixed paper grain over the whole page */
body::after{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%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)'/%3E%3C/svg%3E");
  opacity:.07; mix-blend-mode:overlay;
}

/* ---- type families ---- */
.f-black   { font-family:'Pirata One', serif; }
.f-gothic  { font-family:'Pirata One', system-ui, serif; }
.f-cond    { font-family:'Anton', system-ui, sans-serif; }
.f-cond2   { font-family:'Oswald', system-ui, sans-serif; }
.f-mono    { font-family:'Space Mono', ui-monospace, monospace; }
.f-body    { font-family:'Archivo', system-ui, sans-serif; }

/* ============================================================
   TEXTURES & EFFECTS
   ============================================================ */
.halftone{
  background-image:radial-gradient(var(--blood) 22%, transparent 23%);
  background-size:7px 7px;
}
.halftone-fine{
  background-image:radial-gradient(rgba(236,230,216,0.5) 26%, transparent 27%);
  background-size:4px 4px;
}
.burst{
  background:
    radial-gradient(circle at center, var(--blood-deep) 0 18%, transparent 60%),
    repeating-radial-gradient(circle at center, var(--blood) 0 1.2px, transparent 1.2px 6px);
  -webkit-mask-image:radial-gradient(circle at center, #000 0 42%, transparent 70%);
          mask-image:radial-gradient(circle at center, #000 0 42%, transparent 70%);
}

/* misregistered overprint: red + chrome ghost behind bone text */
.overprint{
  color:var(--bone);
  text-shadow:
     0.045em 0.04em 0 var(--blood),
    -0.03em -0.025em 0 rgba(120,180,190,0.55);
}
.chipped{
  text-shadow:
    1px 0 0 var(--ink), -1px 0 0 var(--ink),
    0 1px 0 var(--ink), 0 -1px 0 var(--ink),
    0.05em 0.05em 0 var(--blood);
}
.chrome-fill{
  background:linear-gradient(180deg,
    #fff 0%, var(--chrome-1) 18%, var(--chrome-2) 50%,
    #2c2925 51%, var(--chrome-2) 70%, var(--chrome-1) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,0.6));
}

/* glitch (chromatic split on hover, calm, seizure-safe) */
.glitch{ position:relative; display:inline-block; isolation:isolate; }
.glitch[data-text]::before,
.glitch[data-text]::after{
  content:attr(data-text); position:absolute; inset:0;
  pointer-events:none; opacity:0; transform:translate(0,0);
}
.glitch[data-text]::before{ color:var(--blood-bright); z-index:-1; }
.glitch[data-text]::after{ color:#39d6d0; z-index:-1; }
@media (prefers-reduced-motion:no-preference){
  .glitch[data-text]::before,
  .glitch[data-text]::after{ transition:opacity .28s ease, transform .28s cubic-bezier(.2,.9,.2,1); }
}
.glitch:hover[data-text]::before{ opacity:.92; transform:translate(.055em,.02em); }
.glitch:hover[data-text]::after { opacity:.7;  transform:translate(-.05em,-.02em); }

/* poster rule lines */
.rule{ border:0; height:2px; background:var(--bone); opacity:.85; }
.rule-red{ background:var(--blood); }
.rule-dbl{ border:0; height:6px; border-top:2px solid var(--bone); border-bottom:2px solid var(--bone); background:transparent; }

/* small-caps poster label */
.tag{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--bone-dim);
}

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.shell{ padding-right:74px; padding-top:64px; min-height:100vh; }
section{ position:relative; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 48px; }

/* ============================================================
   TOP NAV  (fixed, persistent across pages)
   ============================================================ */
.topnav{
  position:fixed; top:0; left:0; right:74px; z-index:7000;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 48px; height:64px;
  background:var(--ink); border-bottom:2px solid var(--bone);
}
.topnav__mark{
  display:flex; align-items:center; gap:12px;
  font-family:'Anton', sans-serif; text-transform:uppercase;
  font-size:22px; letter-spacing:.04em; color:var(--bone);
  text-decoration:none; transition:color .2s ease;
}
.topnav__mark:hover{ color:var(--blood-bright); }
.topnav__mark .dot{ width:9px; height:9px; background:var(--blood); border-radius:50%; }
.topnav__links{ display:flex; gap:34px; }
.topnav__links a{
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bone-dim); text-decoration:none;
  position:relative; padding:4px 0;
  transition:color .2s ease;
}
.topnav__links a:hover{ color:var(--blood-bright); }
.topnav__links a.active{ color:var(--bone); }
.topnav__links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background:var(--blood);
}

/* ============================================================
   RIGHT RAIL
   ============================================================ */
.rail{
  position:fixed; top:0; right:0; z-index:8000;
  width:74px; height:100vh;
  display:flex; flex-direction:column; align-items:center;
  border-left:2px solid var(--ink);
  background:var(--blood); color:var(--ink);
  transition:background .5s ease, color .5s ease, border-color .5s ease;
  overflow:hidden;
}
.rail::before{
  content:""; position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:radial-gradient(currentColor 26%, transparent 27%);
  background-size:5px 5px; mix-blend-mode:multiply;
}
.rail__num{
  font-family:'Anton', sans-serif; font-size:24px; letter-spacing:.02em;
  padding:18px 0 14px; line-height:1; position:relative; z-index:2;
}
.rail__tick{ flex:0 0 auto; width:2px; background:currentColor; opacity:.5; position:relative; z-index:2; transition:height .5s ease; }
.rail__label{
  flex:1; display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:'Anton', sans-serif; text-transform:uppercase;
  font-size:30px; letter-spacing:.06em; white-space:nowrap;
  position:relative; z-index:2;
}
.rail__meta{
  writing-mode:vertical-rl; font-family:'Space Mono', monospace;
  font-size:10px; letter-spacing:.34em; text-transform:uppercase;
  padding:14px 0 18px; opacity:.8; position:relative; z-index:2;
  white-space:nowrap;
}
.rail.switch .rail__label{ animation:railGlitch .42s steps(2); }
@keyframes railGlitch{
  0%{transform:rotate(180deg) translateY(-6px); opacity:.3;}
  30%{transform:rotate(180deg) translateY(5px); opacity:1;}
  60%{transform:rotate(180deg) translateY(-3px); opacity:.6;}
  100%{transform:rotate(180deg) translateY(0); opacity:1;}
}
/* rail color themes per section */
body[data-rail="hero"]    .rail{ background:var(--blood); color:var(--ink); }
body[data-rail="work"]    .rail{ background:var(--bone);  color:var(--ink); }
body[data-rail="about"]   .rail{ background:var(--ink-2); color:var(--bone); border-left-color:var(--blood); }
body[data-rail="contact"] .rail{ background:var(--blood-deep); color:var(--bone); }
body[data-rail="project"] .rail{ background:var(--ink-3); color:var(--bone); border-left-color:var(--blood); }
body[data-rail="error"]   .rail{ background:var(--chrome-3); color:var(--bone); border-left-color:var(--blood); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:calc(100vh - 64px); display:flex; flex-direction:column;
  align-items:center; padding:38px 0 30px; overflow:hidden;
}
.hero .burst{
  position:absolute; top:46%; left:50%; width:118vh; height:118vh;
  max-width:1500px; max-height:1500px;
  transform:translate(-50%,-50%); z-index:0; opacity:.55;
  will-change:transform;
}
.hero__band{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  position:relative; z-index:5; padding:0 48px;
}
.hero__core{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; position:relative; z-index:5; text-align:center;
  padding:0 24px;
}
.hero__present{ margin-bottom:20px; }
.hero__present .tag{ color:var(--bone); font-size:13px; }

.logo{
  position:relative; display:inline-block;
  font-family:'Pirata One', serif; text-transform:uppercase;
  font-size:clamp(56px, 13vw, 168px); line-height:.8; letter-spacing:.01em;
  color:var(--bone); margin:0;
}
.logo span{ display:block; }
.logo::before, .logo::after{
  content:attr(data-logo); position:absolute; inset:0; z-index:-1;
  white-space:pre; pointer-events:none;
}
.logo::before{ color:var(--blood);   transform:translate(.04em,.035em); }
.logo::after { color:#7fb8bf; opacity:.5; transform:translate(-.03em,-.025em); }
@media (prefers-reduced-motion:no-preference){
  .logo--enter{ animation:logoFlick 1.6s steps(1) both; }
  .logo--enter::before{ animation:slamRed 1.6s cubic-bezier(.2,1.3,.3,1) both; }
  .logo--enter::after { animation:slamCyan 1.6s cubic-bezier(.2,1.3,.3,1) both; }
}
@keyframes logoFlick{ 0%{opacity:0;} 100%{opacity:1;} }
@keyframes slamRed{
  0%{transform:translate(.5em,.18em); opacity:0;}
  30%{opacity:1;}
  60%{transform:translate(-.12em,-.06em);}
  100%{transform:translate(.04em,.035em); opacity:1;}
}
@keyframes slamCyan{
  0%{transform:translate(-.55em,-.2em); opacity:0;}
  35%{opacity:.5;}
  60%{transform:translate(.1em,.05em);}
  100%{transform:translate(-.03em,-.025em); opacity:.5;}
}

.hero__pitch{
  font-family:'Oswald', sans-serif; font-weight:500;
  font-size:clamp(15px,1.7vw,20px); letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-dim);
  margin:26px 0 0; max-width:620px;
}
.hero__statusbox{
  margin-top:30px; border:2px solid var(--blood);
  background:rgba(176,18,23,.10); padding:10px 26px; position:relative; z-index:5;
}
.scrollcue{ position:relative; z-index:5; margin-top:auto; padding-top:24px; }
.scrollcue .tag{ display:inline-flex; align-items:center; gap:10px; }
.scrollcue .arr{ animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);} }

/* ============================================================
   MARQUEE DIVIDER
   ============================================================ */
.marquee{
  border-top:3px solid var(--bone); border-bottom:3px solid var(--bone);
  background:var(--blood); color:var(--ink); overflow:hidden;
  padding:12px 0; position:relative; z-index:5;
}
.marquee__track{
  display:flex; gap:0; width:max-content;
  animation:scrollx 26s linear infinite;
  font-family:'Anton', sans-serif; text-transform:uppercase;
  font-size:30px; letter-spacing:.04em; white-space:nowrap;
}
.marquee__track span{ padding:0 26px; }
.marquee__track .x{ color:var(--ink); opacity:.55; }
@keyframes scrollx{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ============================================================
   SELECTED WORK  ·  tour lineup
   ============================================================ */
.work{ padding:120px 0 110px; }
.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:48px; flex-wrap:wrap;
}
.sec-head h2{
  font-family:'Anton', sans-serif; text-transform:uppercase; margin:0;
  font-size:clamp(40px,7vw,86px); line-height:.84; letter-spacing:-.01em;
}
.sec-head .tag{ padding-bottom:8px; }

.lineup{ border-top:2px solid var(--edge); }
.proj{
  display:grid; grid-template-columns:88px 1fr auto;
  gap:30px; align-items:center;
  padding:30px 8px; border-bottom:2px solid var(--edge);
  position:relative; cursor:pointer; text-decoration:none; color:inherit;
  transition:background .35s ease, padding-left .35s ease;
}
.proj:hover{ background:#100d0a; padding-left:22px; }
.proj__no{
  font-family:'Space Mono', monospace; font-size:14px; letter-spacing:.1em;
  color:var(--bone-faint); align-self:start; padding-top:6px;
}
.proj__main{ min-width:0; }
.proj__title{
  font-family:'Anton', sans-serif; text-transform:uppercase;
  font-size:clamp(30px,5.4vw,66px); line-height:.92; margin:0;
  color:var(--bone); letter-spacing:.005em;
}
.proj:hover .proj__title{ color:#fff; }
.proj__blurb{
  font-size:15px; color:var(--bone-dim); margin:10px 0 0; max-width:560px;
  line-height:1.5; max-height:0; opacity:0; overflow:hidden;
  transition:max-height .4s ease, opacity .3s ease, margin .3s ease;
}
.proj:hover .proj__blurb{ max-height:80px; opacity:1; }
.proj__tags{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.proj__tags span{
  font-family:'Space Mono', monospace; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; padding:4px 9px; border:1px solid var(--edge);
  color:var(--bone-dim);
}
.proj__year{
  font-family:'Anton', sans-serif; font-size:clamp(20px,3vw,30px);
  color:var(--blood-bright); align-self:start; padding-top:4px;
}
.proj__thumb{
  position:absolute; right:120px; top:50%; transform:translateY(-50%) scale(.9) rotate(-3deg);
  width:230px; height:150px; pointer-events:none; opacity:0;
  transition:opacity .35s ease, transform .35s ease; z-index:6;
  border:3px solid var(--bone); box-shadow:8px 8px 0 var(--blood-deep);
}
.proj:hover .proj__thumb{ opacity:1; transform:translateY(-50%) scale(1) rotate(-3deg); }
.duo{ position:relative; overflow:hidden; background:var(--ink); }
.duo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.35) brightness(.85);
  mix-blend-mode:luminosity;
}
.duo::before{ content:""; position:absolute; inset:0; background:var(--blood); mix-blend-mode:multiply; z-index:1; }
.duo::after{ content:""; position:absolute; inset:0; z-index:2;
  background-image:radial-gradient(rgba(0,0,0,.7) 30%, transparent 31%);
  background-size:4px 4px; mix-blend-mode:overlay; opacity:.7; }

/* "see all dates" link below lineup */
.seeall{
  display:inline-flex; align-items:center; gap:14px; margin-top:40px;
  font-family:'Anton', sans-serif; text-transform:uppercase;
  font-size:24px; letter-spacing:.04em; color:var(--bone);
  text-decoration:none; border-bottom:3px solid var(--blood);
  padding-bottom:6px; transition:color .25s ease, letter-spacing .25s ease;
}
.seeall:hover{ color:var(--blood-bright); letter-spacing:.06em; }

/* ============================================================
   ABOUT  ·  flyer fine print / setlist
   ============================================================ */
.about{ padding:110px 0; background:var(--ink-2); position:relative; }
.about::before{
  content:""; position:absolute; top:0; left:0; width:40%; height:60%;
  background-image:radial-gradient(var(--blood) 18%, transparent 19%);
  background-size:9px 9px; opacity:.06; pointer-events:none;
}
.about__grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:64px; position:relative; }
.about__bio h2{
  font-family:'Pirata One', serif; font-size:clamp(34px,5vw,60px);
  line-height:.95; margin:0 0 26px; color:var(--bone);
}
.about__bio p{ font-size:17px; line-height:1.65; color:var(--bone-dim); max-width:520px; }
.about__bio p strong, .about__bio p em{ color:var(--bone); font-weight:600; font-style:normal; }
.about__bio p + p{ margin-top:18px; }

.setlist{ border-top:2px solid var(--blood); }
.setlist__row{
  display:grid; grid-template-columns:130px 1fr; gap:18px;
  padding:18px 4px; border-bottom:1px solid var(--edge); align-items:baseline;
}
.setlist__disc{
  font-family:'Anton', sans-serif; text-transform:uppercase;
  font-size:18px; letter-spacing:.04em; color:var(--blood-bright);
}
.setlist__items{
  font-family:'Space Mono', monospace; font-size:13px; line-height:1.9;
  color:var(--bone-dim); letter-spacing:.02em;
}
.setlist__items b{ color:var(--bone); font-weight:400; border-bottom:1px solid var(--edge); }

/* ============================================================
   CONTACT  ·  oversized footer
   ============================================================ */
.contact{ padding:130px 0 60px; text-align:center; overflow:hidden; }
.contact .tag{ color:var(--bone-dim); }
.contact__big{
  font-family:'Pirata One', serif; text-transform:uppercase;
  font-size:clamp(40px,9vw,128px); line-height:.86; margin:18px 0 0;
  color:var(--bone);
}
.contact__mail{
  display:inline-block; margin-top:30px; text-decoration:none;
  font-family:'Anton', sans-serif; text-transform:uppercase;
  font-size:clamp(22px,4.6vw,50px); color:var(--bone);
  border-bottom:4px solid var(--blood); padding-bottom:6px;
  max-width:100%; overflow-wrap:anywhere;
  transition:color .25s ease, border-color .25s ease, letter-spacing .25s ease;
}
.contact__mail:hover{ color:var(--blood-bright); letter-spacing:.01em; }
.contact__alt{
  display:inline-block; margin-top:22px;
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bone-dim); text-decoration:none;
  border-bottom:1px solid var(--edge); padding-bottom:3px;
  transition:color .25s ease;
}
.contact__alt:hover{ color:var(--blood-bright); }
.credits{
  margin-top:64px; padding-top:26px; border-top:2px solid var(--edge);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px;
  align-items:center;
}
.credits__links{ display:flex; gap:28px; flex-wrap:wrap; }
.credits__links a{
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bone-dim); text-decoration:none;
  transition:color .2s ease;
}
.credits__links a:hover{ color:var(--blood-bright); }

/* ============================================================
   PROJECT DETAIL PAGE
   ============================================================ */
.phero{ padding:120px 0 60px; background:var(--ink-2); position:relative; }
.phero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.06;
  background-image:radial-gradient(var(--blood) 18%, transparent 19%);
  background-size:9px 9px;
}
.back{
  display:inline-block; font-family:'Space Mono', monospace; font-size:12px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--bone-dim);
  text-decoration:none; margin-bottom:32px;
  border-bottom:1px solid var(--edge); padding-bottom:3px;
  transition:color .25s ease;
}
.back:hover{ color:var(--blood-bright); }
.ptitle{
  font-family:'Anton', sans-serif; text-transform:uppercase;
  font-size:clamp(46px,9vw,128px); line-height:.86; margin:0;
  color:var(--bone); letter-spacing:-.005em;
}
.ptitle em{ font-style:normal; color:var(--blood-bright); }
.pone{
  font-family:'Oswald', sans-serif; font-weight:500;
  font-size:clamp(16px,1.9vw,22px); letter-spacing:.06em;
  text-transform:uppercase; color:var(--bone-dim);
  margin:22px 0 38px; max-width:680px;
}
.pmeta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:0; border-top:2px solid var(--blood); border-bottom:1px solid var(--edge); }
.pmeta .item{ padding:18px 0; border-right:1px solid var(--edge); padding-right:18px; }
.pmeta .item:last-child{ border-right:none; }
.pmeta .k{ display:block; font-family:'Space Mono', monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--blood-bright); margin-bottom:6px; }
.pmeta .v{ font-family:'Anton', sans-serif; font-size:22px; text-transform:uppercase; letter-spacing:.02em; color:var(--bone); }

.cover{ padding:60px 0; }
.cover-ratio{ aspect-ratio:16/9; }
.media{
  position:relative; overflow:hidden; background:var(--ink);
  border:3px solid var(--bone); box-shadow:12px 12px 0 var(--blood-deep);
}
.media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain; display:block;
}
.media .tag{ position:absolute; left:24px; bottom:24px; color:var(--bone-dim); z-index:3; }

.block{ padding:70px 0; }
.block.two{ background:var(--ink-2); position:relative; }
.block.two:nth-of-type(even){ background:var(--ink); }
.psection{ display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:start; }
.psection .label{
  font-family:'Anton', sans-serif; text-transform:uppercase;
  font-size:clamp(22px,3vw,32px); letter-spacing:.02em;
  color:var(--blood-bright); line-height:1;
}
.psection .label .idx{
  display:block; font-family:'Space Mono', monospace; font-size:11px;
  letter-spacing:.28em; color:var(--bone-faint); margin-bottom:8px;
}
.prose .big{ font-family:'Pirata One', serif; font-size:clamp(22px,2.4vw,30px); line-height:1.3; color:var(--bone); margin:0 0 22px; max-width:680px; }
.prose p{ font-size:16px; line-height:1.7; color:var(--bone-dim); margin:0 0 18px; max-width:680px; }
.prose p:last-child{ margin-bottom:0; }
.chips{ display:flex; gap:8px; margin-top:24px; flex-wrap:wrap; }
.chips span{
  font-family:'Space Mono', monospace; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; padding:5px 11px; border:1px solid var(--blood);
  color:var(--bone-dim);
}

.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.gallery .sq{ aspect-ratio:1; }

.nextp{
  background:var(--blood); color:var(--ink); padding:60px 0;
  border-top:3px solid var(--bone); border-bottom:3px solid var(--bone);
}
.nextp a{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  text-decoration:none; color:inherit; transition:transform .3s ease;
}
.nextp a:hover{ transform:translateX(10px); }
.nextp .k{ font-family:'Space Mono', monospace; font-size:12px; letter-spacing:.22em; text-transform:uppercase; }
.nextp .t{ font-family:'Anton', sans-serif; font-size:clamp(32px,6vw,72px); text-transform:uppercase; line-height:1; margin-top:8px; }
.nextp .arrow{ font-family:'Anton', sans-serif; font-size:clamp(40px,8vw,96px); line-height:1; }

/* ============================================================
   GENERIC PAGE (contact form, merci, 404)
   ============================================================ */
.page{ padding:120px 0 80px; min-height:80vh; }

/* contact form */
.formhead{
  font-family:'Pirata One', serif; text-transform:uppercase;
  font-size:clamp(40px,8vw,108px); line-height:.86; margin:18px 0 0;
  color:var(--bone); text-align:center;
}
.formintro{
  font-family:'Oswald', sans-serif; font-weight:500;
  font-size:clamp(14px,1.4vw,17px); letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-dim);
  text-align:center; max-width:600px; margin:30px auto 0;
}
.cform{ max-width:640px; margin:60px auto 0; }
.cform .field{ margin-bottom:28px; }
.cform .field > label{
  display:block; font-family:'Space Mono', monospace; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--blood-bright); margin-bottom:10px;
}
.cform input[type=text],
.cform input[type=email],
.cform textarea{
  width:100%; background:var(--ink-2); border:2px solid var(--edge);
  color:var(--bone); font-family:'Archivo', sans-serif; font-size:16px;
  padding:14px 16px; transition:border-color .25s ease;
}
.cform textarea{ min-height:180px; resize:vertical; line-height:1.5; }
.cform input:focus, .cform textarea:focus{ outline:none; border-color:var(--blood); }
.cform .err{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blood-bright); margin-top:8px;
}
.cform .submit{
  display:block; margin:30px auto 0;
  font-family:'Anton', sans-serif; font-size:22px; letter-spacing:.08em;
  text-transform:uppercase; background:var(--blood); color:var(--bone);
  border:3px solid var(--bone); padding:14px 38px; cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .15s ease;
}
.cform .submit:hover{ background:var(--bone); color:var(--ink); }
.cform .submit:active{ transform:translateY(2px); }
.hp{ position:absolute; left:-9999px; }
.formalt{ text-align:center; margin-top:28px; font-family:'Space Mono', monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim); }
.formalt a{ color:var(--blood-bright); border-bottom:1px solid var(--edge); padding-bottom:2px; text-decoration:none; }

/* merci / 404 */
.merci{ text-align:center; max-width:760px; margin:0 auto; }
.merci .tag{ display:block; margin-bottom:24px; }
.merci h1{
  font-family:'Pirata One', serif; text-transform:uppercase;
  font-size:clamp(56px,12vw,168px); line-height:.86; margin:0 0 28px;
  color:var(--bone);
}
.merci h1 em{ font-style:normal; color:var(--blood); }
.merci p{ font-size:18px; line-height:1.6; color:var(--bone-dim); margin:0 0 36px; }
.merci .actions{ display:flex; gap:24px; flex-wrap:wrap; justify-content:center; }
.home{
  display:inline-block; font-family:'Anton', sans-serif; text-transform:uppercase;
  font-size:18px; letter-spacing:.08em; color:var(--bone); text-decoration:none;
  border-bottom:3px solid var(--blood); padding-bottom:6px;
  transition:color .25s ease, letter-spacing .25s ease;
}
.home:hover{ color:var(--blood-bright); letter-spacing:.1em; }

/* catalog: tag filter bar */
.filterbar{
  display:flex; flex-wrap:wrap; gap:8px; margin:40px 0 20px;
  padding:18px 0; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);
}
.filter{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; padding:8px 14px; border:1px solid var(--edge);
  background:transparent; color:var(--bone-dim); cursor:pointer;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.filter:hover{ border-color:var(--bone); color:var(--bone); }
.filter.active{ background:var(--blood); border-color:var(--blood); color:var(--bone); }
.filter .n{ font-family:'Space Mono', monospace; opacity:.6; margin-left:6px; }
.catalog-empty{ padding:60px 0; text-align:center; color:var(--bone-faint); font-family:'Space Mono', monospace; font-size:13px; letter-spacing:.14em; text-transform:uppercase; }

/* ============================================================
   SCROLL-REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px) scale(1.04); }
@media (prefers-reduced-motion:no-preference){
  .reveal{ transition:opacity .5s ease, transform .5s cubic-bezier(.2,.9,.2,1); }
  .reveal.in{ opacity:1; transform:none; }
  .reveal.in.stamp-hit{ animation:stampin .4s cubic-bezier(.3,1.4,.4,1); }
}
@keyframes stampin{ 0%{transform:scale(1.06) rotate(-.4deg);} 100%{transform:none;} }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .shell{ padding-right:42px; padding-top:56px; }
  .rail{ width:42px; }
  .rail__num{ font-size:18px; }
  .rail__label{ font-size:20px; }
  .rail__meta{ display:none; }
  .topnav{ right:42px; padding:12px 26px; height:56px; }
  .topnav__mark{ font-size:18px; }
  .topnav__links{ gap:20px; }
  .topnav__links a{ font-size:10px; letter-spacing:.16em; }
  .hero{ min-height:calc(100vh - 56px); }
  .wrap{ padding:0 26px; }
  .hero__band{ padding:0 26px; }
  .about__grid{ grid-template-columns:1fr; gap:40px; }
  .proj{ grid-template-columns:48px 1fr; }
  .proj__year{ grid-column:2; padding-top:0; }
  .proj__thumb{ display:none; }
  .psection{ grid-template-columns:1fr; gap:24px; }
  .pmeta{ grid-template-columns:repeat(2,1fr); }
  .pmeta .item{ padding-right:14px; }
}
@media (max-width:520px){
  .setlist__row{ grid-template-columns:1fr; gap:4px; }
  .pmeta{ grid-template-columns:1fr; }
}