/* undeadmorales — site styles
   Derived from the brand standards v1.1. Colour values are measured off the
   master artwork; do not substitute. */

@font-face{font-family:'Archivo';src:url('../fonts/Archivo.woff2') format('woff2-variations');
  font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter.woff2') format('woff2-variations');
  font-weight:100 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/JetBrainsMono.woff2') format('woff2-variations');
  font-weight:100 800;font-display:swap}

:root{
  --void:#000; --ash:#0D0D0D; --grave:#242424; --hair:#191919;
  --bone:#E5E5E5; --dim:#8C8C8C; --faint:#4A4A4A;
  --toxic:#A2D707; --rot:#79B202;

  --display:'Archivo','Arial Narrow',sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --gut:clamp(16px,4vw,48px);
  --hud:38px;
  --tag:clamp(9px,1vw,10.5px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--void);color:var(--bone);
  font-family:var(--body);font-size:clamp(15px,1.05vw,17px);line-height:1.6;
  font-weight:380;letter-spacing:.004em;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--toxic);color:var(--void)}
:focus-visible{outline:2px solid var(--toxic);outline-offset:3px}

/* ---------------------------------------------------------------- grit */
.grit{position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:.055;mix-blend-mode:screen}
.scan{position:fixed;inset:0;z-index:91;pointer-events:none;opacity:.30;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.028) 0 1px, transparent 1px 3px)}

/* ------------------------------------------------------------- type kit */
.tag{font-family:var(--mono);font-size:var(--tag);font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--toxic)}
.tag--dim{color:var(--faint)}
.tag--bone{color:var(--dim)}

.h-xl,.h-lg,.h-md{font-family:var(--display);font-weight:900;
  font-stretch:64%;text-transform:uppercase;line-height:.84;
  letter-spacing:-.005em;color:#fff}
.h-xl{font-size:clamp(56px,11.5vw,190px)}
.h-lg{font-size:clamp(38px,6.4vw,96px)}
.h-md{font-size:clamp(26px,3.4vw,48px);line-height:.9}

.lede{font-size:clamp(17px,1.5vw,22px);line-height:1.42;color:var(--bone);
  font-weight:420;max-width:34ch}
.muted{color:var(--dim)}

/* the drip rule, straight from the standards: a hairline that bleeds */
.drip{display:block;width:100%;height:auto;color:var(--toxic)}

/* ------------------------------------------------------------------ HUD */
.hud{position:fixed;top:0;left:0;right:0;height:var(--hud);z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 var(--gut);
  background:rgba(0,0,0,.86);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--hair)}
.hud__id{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.hud__id img{width:17px;height:17px}
.hud__nav{display:flex;gap:clamp(12px,2vw,30px);align-items:center}
.hud__nav a{position:relative;padding:3px 0}
.hud__nav a[aria-current]{color:var(--toxic)}
.hud__nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-1px;
  height:1px;background:var(--toxic);transition:right .22s ease}
.hud__nav a:hover::after{right:0}
.hud__meta{flex:0 0 auto}
@media (max-width:760px){
  .hud__meta{display:none}
  .hud__nav{gap:14px}
}

main{padding-top:var(--hud)}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;min-height:min(92vh,860px);display:flex;
  align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--hair)}
.hero__plate{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;
  opacity:.80;filter:contrast(1.15)}
.hero__fade{position:absolute;inset:0;
  background:linear-gradient(to top,#000 4%,rgba(0,0,0,.72) 38%,rgba(0,0,0,.18) 78%)}
.hero__body{position:relative;width:100%;padding:0 var(--gut) clamp(24px,4vw,52px)}
.hero__eyebrow{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:clamp(26px,4vw,54px)}
/* the wordmark runs off the left edge — the frame crops it, as a frame should */
.hero__word{display:block;width:100%;max-width:1100px;height:auto}
.hero__claim{margin-top:clamp(14px,2vw,26px);display:flex;
  justify-content:space-between;align-items:flex-end;gap:var(--gut);flex-wrap:wrap}
.hero__claim .h-lg span{color:var(--toxic)}

/* ---------------------------------------------------------------- shell */
.band{padding:clamp(48px,7vw,104px) var(--gut);border-bottom:1px solid var(--hair)}
.band__head{display:flex;justify-content:space-between;align-items:baseline;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,40px)}
.band__head p{max-width:44ch;color:var(--dim);font-size:.95em}

/* ------------------------------------------------- signature: contact sheet
   A 35mm contact sheet is the real artefact this archive comes from: frames in
   strips, numbers in the rebate, a grease-pencil ring round the selects. */
.sheet{position:relative;padding:0;border-bottom:1px solid var(--hair)}
.sheet__head{display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;flex-wrap:wrap;padding:clamp(40px,5vw,72px) var(--gut) 20px}
.sheet__scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  cursor:grab;padding:0 var(--gut) clamp(40px,5vw,72px)}
.sheet__scroll::-webkit-scrollbar{display:none}
.sheet__scroll.is-drag{cursor:grabbing}
.strip{display:flex;gap:0;width:max-content;
  border-top:1px solid var(--grave);border-bottom:1px solid var(--grave);
  background:#050505}
.strip__perf{display:flex;align-self:stretch;flex-direction:column;justify-content:space-between;
  padding:7px 0;flex:0 0 auto}
.strip__perf span{display:block;width:11px;height:9px;margin:0 6px;
  background:var(--void);border:1px solid var(--grave)}

.fr{display:block;position:relative;flex:0 0 auto;padding:9px 0;
  border-left:1px solid var(--grave)}
.fr__img{display:block;position:relative;width:clamp(180px,20vw,268px);aspect-ratio:3/2;
  overflow:hidden;background:var(--ash)}
.fr__img img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.2) brightness(.78);
  transition:filter .3s ease,transform .5s ease}
.fr:hover .fr__img img,.fr:focus-visible .fr__img img{
  filter:grayscale(0) contrast(1.05) brightness(1);transform:scale(1.03)}
.fr__rebate{display:flex;width:100%;justify-content:space-between;align-items:center;
  padding:5px 8px 0;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.fr:hover .fr__rebate{color:var(--dim)}
.fr__cap{display:block;position:absolute;left:8px;right:8px;bottom:34px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone);opacity:0;transform:translateY(5px);
  transition:opacity .25s ease,transform .25s ease;text-shadow:0 1px 6px #000}
.fr:hover .fr__cap,.fr:focus-visible .fr__cap{opacity:1;transform:none}
/* grease pencil: the frames that made the cut */
.fr--select .fr__img::after{content:'';position:absolute;inset:13%;
  border:2.5px solid var(--toxic);border-radius:50%;opacity:.9;
  transform:rotate(-4deg) scaleX(1.02);pointer-events:none;
  mix-blend-mode:screen}
.fr--select .fr__rebate{color:var(--toxic)}
.sheet__hint{padding:0 var(--gut) clamp(34px,4vw,60px);margin-top:-24px}

/* ---------------------------------------------------- rolls (the strands) */
.rolls{border-bottom:1px solid var(--hair)}
.roll{position:relative;display:block;border-top:1px solid var(--hair);
  padding:clamp(20px,2.6vw,38px) var(--gut)}
.rolls .roll:first-child{border-top:0}
.roll__row{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
.roll__name{display:block;font-family:var(--display);font-weight:900;font-stretch:64%;
  text-transform:uppercase;line-height:.86;
  font-size:clamp(46px,9.6vw,150px);color:var(--bone);
  transition:color .3s ease}
/* on hover the type fills with the roll's own frame */
.roll:hover .roll__name,.roll:focus-visible .roll__name{
  color:transparent;background-size:cover;background-position:center;
  -webkit-background-clip:text;background-clip:text}
.roll:hover .roll__name{background-image:var(--plate)}
.roll__meta{display:block;text-align:right;flex:0 0 auto}
.roll__desc{max-width:52ch;color:var(--dim);margin-top:10px;font-size:.95em}
.roll__go{color:var(--toxic);opacity:0;transition:opacity .25s ease}
.roll:hover .roll__go{opacity:1}

/* -------------------------------------------------------------- dispatch */
.disp{display:grid;grid-template-columns:120px 1fr auto;gap:clamp(14px,2vw,32px);
  align-items:baseline;padding:18px 0;border-top:1px solid var(--hair)}
.disp:last-child{border-bottom:1px solid var(--hair)}
.disp h3{display:block;font-family:var(--display);font-weight:800;font-stretch:76%;
  font-size:clamp(18px,2vw,26px);text-transform:uppercase;line-height:1;
  letter-spacing:.005em}
.disp:hover h3{color:var(--toxic)}
.disp p{display:block;color:var(--dim);font-size:.92em;margin-top:6px;max-width:60ch}
@media (max-width:720px){
  .disp{grid-template-columns:1fr;gap:6px}
  .disp .tag--dim{order:-1}
}

/* ------------------------------------------------------------ archive grid */
.grid{display:grid;gap:clamp(10px,1.4vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.cell{position:relative;display:block;background:var(--ash);overflow:hidden}
.cell img{width:100%;aspect-ratio:3/2;object-fit:cover;
  filter:grayscale(1) contrast(1.2) brightness(.76);
  transition:filter .3s ease,transform .55s ease}
.cell:hover img{filter:grayscale(0) contrast(1.05) brightness(1);transform:scale(1.04)}
.cell__bar{display:flex;position:absolute;left:0;right:0;bottom:0;
  display:flex;justify-content:space-between;gap:10px;padding:10px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.92),transparent)}
.cell--tall img{aspect-ratio:4/5}

/* ----------------------------------------------------------------- footer */
.foot{padding:clamp(40px,5vw,72px) var(--gut) clamp(28px,3vw,44px)}
.foot__grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;
  align-items:flex-end;margin-top:clamp(24px,3vw,44px)}
.foot__word{width:min(420px,64vw);opacity:.92}
.foot__links{display:flex;flex-direction:column;gap:7px;text-align:right}
.foot__links a:hover{color:var(--toxic)}
.foot__sign{font-family:var(--display);font-weight:900;font-stretch:64%;
  text-transform:uppercase;font-size:clamp(30px,5.4vw,74px);line-height:.86;
  color:var(--toxic);margin-top:clamp(22px,3vw,40px)}
.foot__fine{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:20px;padding-top:14px;border-top:1px solid var(--hair)}

/* -------------------------------------------- intro: the claw takes the lens
   Layered plates, moved by CSS. The arm rises from behind the ground, the
   fissures light, the debris throws. Plays once, then gets out of the way. */
.intro{position:fixed;inset:0;z-index:100;background:var(--void);overflow:hidden;
  animation:intro-out .55s 2.05s ease forwards}
.intro__stage{position:absolute;inset:0}
.intro__stage img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 62%}
.i-arm,.i-glow{transform:translateY(46%);opacity:0;
  animation:claw-rise 1.05s .18s cubic-bezier(.16,.86,.24,1) forwards}
.i-glow{animation-name:claw-rise-glow}
.i-ground{opacity:0;animation:fade-in .35s .05s ease forwards}
.i-cracks{opacity:0;animation:fissure .5s .72s ease forwards}
.i-debris{opacity:0;transform:scale(.94);animation:throw .6s .82s ease-out forwards}
.intro__word{position:absolute;left:50%;bottom:5%;width:min(40vw,450px);
  transform:translate(-50%,14px);opacity:0;
  animation:fade-up .6s 1.25s ease forwards}
.intro__skip{position:absolute;right:var(--gut);bottom:calc(var(--gut) * .8);
  color:var(--faint);opacity:0;animation:fade-in .4s 1.1s ease forwards}

@keyframes claw-rise{
  0%{transform:translateY(46%);opacity:0}
  22%{opacity:1}
  82%{transform:translateY(-2.5%)}
  100%{transform:translateY(0);opacity:1}}
@keyframes claw-rise-glow{
  0%{transform:translateY(46%);opacity:0}
  40%{opacity:.55}
  82%{transform:translateY(-2.5%);opacity:1}
  100%{transform:translateY(0);opacity:.7}}
@keyframes fissure{from{opacity:0}60%{opacity:1}to{opacity:.85}}
@keyframes throw{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes fade-in{to{opacity:1}}
@keyframes fade-up{to{opacity:1;transform:translate(-50%,0)}}
@keyframes intro-out{to{opacity:0;visibility:hidden}}

/* ------------------------------------------------------------- journal */
.jfilter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,36px)}
.jfilter button{font-family:var(--mono);font-size:var(--tag);letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);background:transparent;cursor:pointer;
  border:1px solid var(--grave);padding:8px 14px}
.jfilter button:hover{border-color:var(--dim);color:var(--bone)}
.jfilter button[aria-pressed="true"]{border-color:var(--toxic);color:var(--toxic)}

.entry{display:grid;grid-template-columns:210px 1fr auto;gap:clamp(16px,2.4vw,36px);
  align-items:start;padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--hair)}
.entry:last-of-type{border-bottom:1px solid var(--hair)}
.entry[hidden]{display:none}
.entry__stamp{display:flex;flex-direction:column;gap:7px}
.entry__t{display:block;font-family:var(--display);font-weight:850;font-stretch:74%;
  font-size:clamp(21px,2.4vw,32px);line-height:1.02;text-transform:uppercase;
  letter-spacing:.004em}
.entry:hover .entry__t{color:var(--toxic)}
.entry__dek{display:block;color:var(--dim);margin-top:9px;max-width:62ch;font-size:.95em}
.entry__go{align-self:center;white-space:nowrap}
@media (max-width:760px){
  .entry{grid-template-columns:1fr;gap:8px}
  .entry__stamp{flex-direction:row;gap:14px}
  .entry__go{display:none}
}

/* article */
.art{max-width:70ch;margin:0 auto}
.art__meta{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:clamp(16px,2vw,26px)}
.art h1{font-family:var(--display);font-weight:900;font-stretch:70%;
  text-transform:uppercase;font-size:clamp(32px,5vw,66px);line-height:.9;
  letter-spacing:-.004em;color:#fff}
.art__dek{font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:var(--bone);
  margin-top:clamp(14px,2vw,22px)}
.art__body{margin-top:clamp(26px,3.4vw,48px)}
.art__body p{margin-bottom:1.35em;color:#CFCFCF}
.art__body h2{font-family:var(--display);font-weight:850;font-stretch:76%;
  text-transform:uppercase;font-size:clamp(19px,2.1vw,27px);line-height:1.05;
  color:#fff;margin:2.2em 0 .8em}
.art__body blockquote{margin:2em 0;padding-left:22px;border-left:2px solid var(--toxic);
  font-family:var(--display);font-weight:700;font-stretch:84%;
  font-size:clamp(20px,2.3vw,30px);line-height:1.16;color:#fff;text-transform:none}
.art__body figure{margin:2.4em 0}
.art__body figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.art__body figcaption{margin-top:9px;font-family:var(--mono);font-size:var(--tag);
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.art__body ul{margin:0 0 1.35em 1.1em;color:#CFCFCF}
.art__body li{margin-bottom:.5em}

.artnav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  max-width:70ch;margin:clamp(34px,4vw,60px) auto 0;padding-top:20px;
  border-top:1px solid var(--hair)}
.artnav a:hover{color:var(--toxic)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .intro{display:none}
  .scan{display:none}
}