/* ==========================================================================
   CADAVEROUS — Kevin Cadaver
   Single-file build. Local assets in /assets, plus Google Fonts.
   ========================================================================== */

@font-face{
  font-family:Blacklisted;
  src:url('assets/Blacklisted.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:block;
}

/* --- Tokens --------------------------------------------------------------- */
:root{
  --field:#0a0a0b;
  --field-2:#111114;
  --field-3:#17171b;
  --bone:#e8e4dc;
  --on-oxide:#f7f4ee;
  --ash:#8a8781;
  --ash-deep:#6b6862;
  --oxide:#b04a2c;
  --oxide-hi:#c9542f;
  --rule:rgba(232,228,220,.14);
  --rule-soft:rgba(232,228,220,.07);
  --pad:clamp(1.15rem,4.5vw,4.5rem);
  --maxw:1680px;
  --ease:cubic-bezier(.16,1,.3,1);

  /* Headings use the clean bold condensed face. Blacklisted is the distressed
     brand accent — used sparingly, and never on the // motif or on @ ( ) # /,
     which it has no glyphs for. Its glyphs also collide at tight tracking, so
     anything set in it gets positive letter-spacing. */
  --font-display:Anton,'Barlow Condensed',Impact,sans-serif;
  --font-brand:Blacklisted,Anton,Impact,sans-serif;
  --font-ui:'Barlow Condensed',ui-sans-serif,'Oswald','Roboto Condensed',system-ui,sans-serif;

  --tex-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-scratch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.75' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='30' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cg filter='url(%23s)' stroke='%23ffffff' fill='none' stroke-width='0.9'%3E%3Cpath d='M-40 70 L940 128' opacity='0.75'/%3E%3Cpath d='M-40 265 L940 196' opacity='0.5'/%3E%3Cpath d='M-40 402 L940 468' opacity='0.65'/%3E%3Cpath d='M-40 545 L940 500' opacity='0.4'/%3E%3Cpath d='M120 -30 L232 630' opacity='0.35'/%3E%3Cpath d='M690 -30 L604 630' opacity='0.45'/%3E%3C/g%3E%3C/svg%3E");
  --tex-static:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.9 0 0 0 0.05 0.9 0 0 0 0.05 0.9 0 0 0 0.05 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23s)'/%3E%3C/svg%3E");
  --tex-fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.04' numOctaves='3' seed='3'/%3E%3C/filter%3E%3Crect width='160' height='60' filter='url(%23t)'/%3E%3C/svg%3E");
  --tex-brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='44'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.5' numOctaves='3' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='13' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='12' y='14' width='296' height='16' fill='%23b04a2c' filter='url(%23r)'/%3E%3C/svg%3E");
  /* Ragged bottom edge used to tear the splash screen away */
  --mask-tear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1000' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H1200 V952 L1160 966 L1120 944 L1080 972 L1035 948 L995 968 L950 940 L905 964 L860 946 L815 974 L770 952 L722 970 L680 942 L634 964 L590 946 L545 972 L500 950 L455 968 L410 940 L365 966 L320 944 L275 970 L230 952 L185 964 L140 942 L95 968 L50 946 L0 964 Z'/%3E%3C/svg%3E");
}

/* --- Base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%;background:var(--field)}
body{
  margin:0;background:var(--field);color:var(--bone);font-family:var(--font-ui);
  font-size:clamp(1.02rem,.96rem + .28vw,1.2rem);line-height:1.55;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--oxide);color:var(--on-oxide)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.d{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.005em;line-height:.9}
/* The // motif is forced to the UI face — the display face has no slash glyph. */
.mark::before{content:'//';font-family:var(--font-ui);color:var(--oxide-hi);margin-right:.55em;font-weight:600;letter-spacing:0}
.slash{font-family:var(--font-ui);color:var(--oxide-hi);font-weight:600}
.label{font-size:.82rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);font-family:var(--font-ui)}

:focus-visible{outline:2px solid var(--oxide-hi);outline-offset:3px}
/* The nav is fixed, so anything tabbed to near a section top would land under
   it. Keeps the whole focused control clear of it. (WCAG 2.2 focus-not-obscured) */
a,button,input,select,textarea,[tabindex]{scroll-margin-top:104px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:3000;background:var(--bone);color:var(--field);
  padding:.75rem 1.25rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
}
.skip:focus{left:var(--pad);top:.6rem}

/* --- Global texture stack ------------------------------------------------- */
.tex{position:fixed;inset:0;pointer-events:none;z-index:900}
.tex--grain{background-image:var(--tex-grain);background-size:220px 220px;opacity:.07;mix-blend-mode:overlay}
/* Real emulsion decay off a film-leader frame — screened so the white
   speckle adds light rather than flattening the blacks. */
.tex--grit{background:url('assets/tex-grit.jpg') 0 0/620px auto repeat;opacity:.03;mix-blend-mode:screen}
.tex--scratch{background-image:var(--tex-scratch);background-size:900px 600px;opacity:.035}
.tex--vig{background:radial-gradient(125% 85% at 50% 32%,transparent 38%,rgba(0,0,0,.6) 100%);z-index:899}

/* Per-section paper — a wrinkled emulsion frame, flipped and scaled between
   sections so the same sheet never reads twice. */
.grit::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:url('assets/tex-paper.jpg') 0 0/860px auto repeat;
  mix-blend-mode:overlay;opacity:.09;
}
.grit--b::before{opacity:.07;transform:scaleX(-1) scaleY(-1)}
.grit > *{position:relative;z-index:1}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.65rem;padding:.9rem 1.6rem;
  font-family:var(--font-ui);font-size:1.02rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;border:1px solid var(--rule);
  background:transparent;color:var(--bone);cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover{background:var(--bone);color:var(--field);border-color:var(--bone)}
.btn--oxide{background:var(--oxide);border-color:var(--oxide);color:var(--on-oxide)}
.btn--oxide:hover{background:var(--oxide-hi);border-color:var(--oxide-hi);color:var(--on-oxide)}
.btn svg{width:1em;height:1em;flex:none}

/* --- Poster chrome -------------------------------------------------------- */
.barcode{
  height:36px;width:clamp(104px,13vw,178px);
  background-image:
    repeating-linear-gradient(90deg,var(--bone) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,var(--bone) 0 2px,transparent 2px 7px),
    repeating-linear-gradient(90deg,var(--bone) 0 1px,transparent 1px 11px);
  opacity:.45;
}
.barcode-cap{font-size:.7rem;letter-spacing:.28em;color:var(--ash);margin-top:.45rem}
.crop{position:absolute;width:15px;height:15px;border:0 solid var(--rule);pointer-events:none}
.crop--tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
.crop--tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.crop--bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.crop--br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}

/* Duct tape */
.tape{
  position:absolute;z-index:3;pointer-events:none;
  width:clamp(130px,16vw,215px);height:clamp(36px,4.2vw,50px);
  background:linear-gradient(180deg,#7a7469 0%,#585349 42%,#6e6a5f 100%);
  box-shadow:0 8px 22px rgba(0,0,0,.62);opacity:.88;
  clip-path:polygon(0% 8%,7% 0%,22% 9%,38% 1%,55% 10%,71% 2%,86% 11%,100% 4%,100% 92%,88% 100%,72% 91%,56% 99%,40% 90%,24% 98%,9% 89%,0% 96%);
}
.tape::after{
  content:'';position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;
  background-image:var(--tex-fiber);background-size:160px 60px;
}
.tape--tl{top:-15px;left:-28px;transform:rotate(-6.5deg)}
.tape--br{bottom:-13px;right:-22px;transform:rotate(4.5deg)}
.tape--tr{top:-14px;right:-24px;transform:rotate(5.5deg)}

/* --- Torn paper dividers -------------------------------------------------- */
.torn{position:absolute;top:0;left:0;right:0;height:clamp(46px,6.5vw,96px);z-index:4;pointer-events:none;line-height:0}
.torn svg{width:100%;height:100%;display:block;filter:drop-shadow(0 5px 6px rgba(0,0,0,.75))}
.torn .tear-fill{fill:currentColor}
/* Same path, dropped 5 units — shows as the pale fibrous lip along the rip. */
.torn .tear-fringe{fill:#e8e4dc;opacity:.5}
.torn--flip svg{transform:scaleX(-1)}

/* --- Splash --------------------------------------------------------------- */
.splash{display:none}
html.js .splash{
  /* Taller than the viewport so the ragged mask edge starts off-screen
     and only sweeps through as the panel is torn upward. */
  display:flex;position:fixed;inset:0 0 auto 0;height:108svh;z-index:2000;
  flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;
  background:var(--field);
  -webkit-mask-image:var(--mask-tear);mask-image:var(--mask-tear);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:transform 1s cubic-bezier(.7,0,.3,1);
}
html.js body.splash-out .splash{transform:translateY(-110%)}
html.js body.splash-done .splash{display:none}
html.js body.splash-on{overflow:hidden}
.splash::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:url('assets/tex-paper.jpg') 0 0/860px auto repeat;mix-blend-mode:overlay;opacity:.2;
}
.splash-mark{
  width:clamp(122px,19vw,210px);height:auto;
  opacity:0;transform:scale(.86);
  transition:opacity .8s var(--ease),transform 1.2s var(--ease);
}
.splash-word{
  font-family:var(--font-brand);text-transform:uppercase;
  font-size:clamp(1.9rem,7vw,3.6rem);letter-spacing:.1em;line-height:1;
  opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease) .28s,transform .7s var(--ease) .28s;
}
.splash-tag{
  font-size:.76rem;letter-spacing:.4em;text-transform:uppercase;color:var(--ash);margin-top:-.6rem;
  opacity:0;transition:opacity .7s var(--ease) .42s;
}
.splash-foot{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(2rem,7vh,4rem);
  display:flex;align-items:center;gap:1rem;
  opacity:0;transition:opacity .6s var(--ease) .5s;
}
.splash-bar{flex:1 1 auto;height:1px;background:var(--rule-soft);position:relative;overflow:hidden}
.splash-bar i{
  position:absolute;inset:0 auto 0 0;width:0;background:var(--oxide-hi);
  transition:width 1.15s cubic-bezier(.4,0,.2,1) .3s;
}
.splash-pct{
  font-size:.72rem;letter-spacing:.28em;color:var(--ash);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
body.splash-in .splash-mark{opacity:1;transform:none}
body.splash-in .splash-word,body.splash-in .splash-tag,body.splash-in .splash-foot{opacity:1;transform:none}
body.splash-in .splash-bar i{width:100%}

/* --- Nav ------------------------------------------------------------------ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem var(--pad);border-bottom:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease);
}
.nav.is-stuck{background:rgba(10,10,11,.88);backdrop-filter:blur(12px) saturate(120%);border-bottom-color:var(--rule)}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--bone)}
.brand img{width:30px;height:30px;flex:none;transition:opacity .3s var(--ease)}
.brand:hover img{opacity:.72}
.brand-word{font-family:var(--font-brand);text-transform:uppercase;font-size:1.15rem;letter-spacing:.11em;line-height:1}
.nav-links{display:flex;align-items:center;gap:clamp(.85rem,2vw,2.1rem)}
.nav-links a{
  text-decoration:none;color:var(--ash);font-size:.9rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;transition:color .3s var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current='true']{color:var(--bone)}
.nav-links a[aria-current='true']::before{content:'//';color:var(--oxide-hi);margin-right:.4em}

.burger{display:none;width:44px;height:44px;border:1px solid var(--rule);background:transparent;cursor:pointer;padding:0}
.burger span{display:block;width:20px;height:1.5px;background:var(--bone);margin:4px auto;transition:transform .4s var(--ease),opacity .25s}
body.menu-open .burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:999;background:var(--field);
  transform:translateX(100%);transition:transform .55s var(--ease),visibility .55s;
  display:flex;flex-direction:column;justify-content:center;
  padding:6.5rem var(--pad) 2rem;visibility:hidden;overflow-y:auto;
}
.menu::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:url('assets/tex-paper.jpg') 0 0/860px auto repeat;mix-blend-mode:overlay;opacity:.16;
}
.menu > *{position:relative}
body.menu-open{overflow:hidden}
body.menu-open .menu{transform:none;visibility:visible}
.menu a{
  display:block;text-decoration:none;color:var(--bone);font-family:var(--font-display);
  text-transform:uppercase;font-size:clamp(1.85rem,8vw,3.1rem);line-height:1.05;
  border-bottom:1px solid var(--rule-soft);padding:.3em 0;
  transition:color .3s var(--ease),padding-left .35s var(--ease);
}
.menu a:hover{color:var(--oxide-hi);padding-left:.12em}
.menu-foot{margin-top:2rem;color:var(--ash);font-size:.85rem;letter-spacing:.2em;text-transform:uppercase}

/* --- Hero ----------------------------------------------------------------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--pad) + 4.6rem) var(--pad) calc(var(--pad) + .4rem);
  overflow:hidden;isolation:isolate;
}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
/* Background film. Sits under every texture layer and is heavily knocked back
   so the display type keeps its contrast. */
.hero-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;filter:grayscale(1) contrast(1.15) brightness(.42);
  transition:opacity 1.2s var(--ease);
}
.hero-bg.is-live .hero-vid{opacity:.72}
.hero-toggle{
  position:absolute;right:var(--pad);bottom:calc(var(--pad) + 5.4rem);z-index:4;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .8rem;border:1px solid var(--rule);background:rgba(10,10,11,.6);
  color:var(--ash);font-family:var(--font-ui);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.hero-toggle:hover{color:var(--bone);border-color:var(--ash)}
.hero-toggle-ico{width:9px;height:11px;flex:none;background:currentColor;
  clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}
.hero-toggle[aria-pressed='true'] .hero-toggle-ico{clip-path:polygon(0 0,100% 50%,0 100%)}
.hero-bg .crumple{position:absolute;inset:0;background:url('assets/tex-paper.jpg') 0 0/1000px auto repeat;mix-blend-mode:overlay;opacity:.07}
.hero-bg .scratch{position:absolute;inset:0;background-image:var(--tex-scratch);background-size:900px 600px;opacity:.05}
.hero-bg .glow{
  position:absolute;left:54%;top:46%;transform:translate(-50%,-50%);
  width:min(82vh,82vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(176,74,44,.16),transparent 60%);filter:blur(36px);
}
.hero-bg .ceil{position:absolute;inset:0 0 auto 0;height:24%;background:linear-gradient(to bottom,rgba(0,0,0,.82),transparent)}
.hero-bg .floor{position:absolute;inset:auto 0 0 0;height:54%;background:linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.4) 42%,transparent)}

.hero-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1.2rem}
.hero-top .rule{flex:1 1 auto;height:1px;background:var(--rule);min-width:24px}
.hero-top .label{white-space:nowrap}

.hero-name{
  position:relative;z-index:2;
  font-family:var(--font-display);text-transform:uppercase;
  /* Width-driven, but capped by height so the CTAs stay above the fold. */
  font-size:clamp(3.2rem,min(24.2vw,31vh),24rem);
  line-height:.88;letter-spacing:-.01em;
  margin:clamp(.8rem,2.4vh,2.2rem) 0;margin-inline-start:-.018em;white-space:nowrap;
}
/* overflow:hidden drives the reveal, so the box needs room for Anton's
   overshoot or the caps get sheared off top and bottom. */
.name-line{display:block;overflow:hidden;padding:.06em 0 .1em}
.name-line > span{display:block;transform:translateY(108%)}
.hero-name .cadaver{color:transparent;-webkit-text-stroke:clamp(1px,.13vw,2.5px) var(--bone)}

.hero-foot{position:relative;z-index:2;display:grid;gap:clamp(1.4rem,3vw,3rem);grid-template-columns:minmax(0,1fr) auto;align-items:end}
.hero-tag{
  font-family:var(--font-display);text-transform:uppercase;color:var(--oxide);
  font-size:clamp(1.2rem,3vw,2.3rem);letter-spacing:.06em;line-height:1.1;margin-bottom:.75rem;
}
.hero-deck{max-width:53ch;opacity:.92;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:0;text-align:right}
.scroll-cue{display:flex;align-items:center;gap:.7rem;margin-top:1.5rem;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ash)}
.scroll-cue i{display:block;width:56px;height:1px;background:var(--rule);position:relative;overflow:hidden}
.scroll-cue i::after{content:'';position:absolute;inset:0;width:40%;background:var(--oxide-hi);animation:cue 2.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-110%)}60%,100%{transform:translateX(260%)}}

/* Hero reveal — the one orchestrated load animation */
[data-r]{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.is-ready [data-r]{opacity:1;transform:none}
.name-line > span{transition:transform 1.1s var(--ease);transition-delay:var(--d,0ms)}
.is-ready .name-line > span{transform:none}

/* --- Section shell -------------------------------------------------------- */
.sec{position:relative;padding-block:clamp(5rem,11vh,9rem);overflow:hidden}
.sec--alt{background:var(--field-2)}
.sec-head{display:grid;gap:.9rem;margin-bottom:clamp(2.2rem,5vw,4rem);max-width:var(--maxw);margin-inline:auto}
.sec-num{font-family:var(--font-ui);font-size:.9rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--oxide-hi)}
.sec-num em{font-style:normal;color:var(--ash)}
.sec-title{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.5rem,7.6vw,6.4rem);line-height:.92;letter-spacing:-.008em}
.sec-lede{max-width:56ch;color:var(--ash);font-size:clamp(1.02rem,1.35vw,1.22rem)}
.sec-rule{height:1px;background:var(--rule);margin-top:.4rem}

/* Oversized ghost word behind a section. Beats .grit > * on specificity so it
   stays behind the content instead of being pulled into the z-index:1 layer. */
.sec .ghost{
  position:absolute;z-index:0;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--font-display);text-transform:uppercase;white-space:nowrap;
  font-size:clamp(5rem,21vw,17rem);line-height:1;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px rgba(232,228,220,.055);
  pointer-events:none;user-select:none;
}
.sec .ghost--right{left:auto;right:-4%;transform:translateY(-50%)}
.sec .ghost--low{top:auto;bottom:-2%;transform:translate(-50%,0)}

/* --- Accent band ---------------------------------------------------------- */
.band{background:var(--oxide);color:var(--on-oxide);position:relative;z-index:5}
.band-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-block:clamp(1.4rem,3vw,2.3rem)}
.band-line{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.35rem,3.4vw,2.7rem);line-height:1.05}
.band-note{font-size:.95rem;opacity:.82;max-width:34ch}
.band .btn{border-color:rgba(255,255,255,.55);color:var(--on-oxide)}
.band .btn:hover{background:var(--on-oxide);color:var(--oxide);border-color:var(--on-oxide)}

/* --- 01 The Work — sliver slider ------------------------------------------ */
.slivers-wrap{position:relative}
.slivers{
  display:flex;gap:clamp(.45rem,1vw,1rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  /* Headroom so the hover lift isn't clipped by the section's overflow. */
  padding:64px var(--pad) 1.4rem;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
}
.slivers::-webkit-scrollbar{display:none}
.slivers.is-drag{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.sliver{
  flex:0 0 clamp(166px,20vw,292px);scroll-snap-align:center;
  transition:transform .7s var(--ease);
}
.slivers.is-hovering .sliver{transition-duration:.45s}
.sliver.is-lift{transform:translateY(-50px)}
.sliver.is-near{transform:translateY(-10px)}
.sliver-link{display:block;text-decoration:none;color:inherit}
/* 9:16 — the native aspect of the footage, so nothing gets cropped. */
.sliver-media{
  position:relative;display:block;aspect-ratio:9/16;overflow:hidden;
  background:var(--field-3);border:1px solid var(--rule-soft);
}
.sliver-media img,.sliver-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.84);
  transition:filter .45s var(--ease);
}
/* The clip runs from the start; it only becomes visible once it is genuinely
   playing, so a blocked autoplay leaves the poster in place. */
.sliver-media video{opacity:0;z-index:1;transition:opacity .3s var(--ease),filter .45s var(--ease)}
.sliver-media.is-live video{opacity:1}
.sliver.is-lift .sliver-media img,.sliver.is-lift .sliver-media video{filter:grayscale(0) contrast(1.08) brightness(1)}

/* TV snow — covers the moment the colour comes back. */
.sliver-static{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background-image:var(--tex-static),repeating-linear-gradient(0deg,rgba(0,0,0,.34) 0 1px,transparent 1px 3px);
  background-size:170px 170px,auto;
  mix-blend-mode:screen;
}
.sliver-static.on{animation:tvsnow .38s steps(1,end) 1}
@keyframes tvsnow{
  0%  {opacity:0;   background-position:0 0,0 0}
  6%  {opacity:.95; background-position:-31% 17%,0 2px}
  18% {opacity:.8;  background-position:44% -26%,0 -1px}
  30% {opacity:.92; background-position:-13% -41%,0 3px}
  42% {opacity:.6;  background-position:27% 33%,0 0}
  55% {opacity:.75; background-position:-46% 8%,0 -2px}
  68% {opacity:.42; background-position:11% -19%,0 1px}
  82% {opacity:.22; background-position:-24% 29%,0 -3px}
  100%{opacity:0;   background-position:38% 5%,0 0}
}
.sliver-media::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,11,.55),transparent 45%);
}
.sliver-meta{display:block;padding-top:.65rem}
.sliver-num{font-family:var(--font-ui);font-weight:600;font-size:.7rem;letter-spacing:.2em;color:var(--oxide-hi);display:block;margin-bottom:.2rem}
.sliver-title{
  font-family:var(--font-display);text-transform:uppercase;display:block;
  font-size:clamp(.95rem,1.5vw,1.32rem);line-height:1;letter-spacing:-.005em;
  transition:color .35s var(--ease);
}
.sliver:hover .sliver-title{color:var(--oxide-hi)}
.sliver-kind{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-deep);display:block;margin-top:.28rem}

/* --- 02 The Creed --------------------------------------------------------- */
.creed-inner{display:grid;gap:clamp(1.6rem,3.5vw,3rem);grid-template-columns:3.2rem minmax(0,1fr);max-width:var(--maxw);margin-inline:auto}
.creed-rail{
  grid-column:1;grid-row:1/span 4;writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:.8rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--ash);
  border-right:1px solid var(--rule);padding-right:1.1rem;align-self:start;justify-self:start;
}
.creed-body{grid-column:2;max-width:64ch;display:grid;gap:1.3rem;font-size:clamp(1.1rem,1.55vw,1.36rem);line-height:1.62}
.creed-lead{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.42;color:var(--bone)}
.creed-pull{grid-column:2;margin:clamp(2.4rem,5.5vw,4.5rem) 0 clamp(1rem,2.5vw,2.2rem);padding:0;position:relative}
.creed-pull p{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.2rem,8.4vw,7.6rem);line-height:1.06;letter-spacing:-.012em}
.creed-pull .proof{display:inline-block;margin-top:.12em}
/* The one place the distressed face carries a headline — the payoff line. */
.creed-pull .proof{color:var(--oxide);font-style:normal;font-family:var(--font-brand);letter-spacing:.03em}
.creed-pull::before{
  content:'';position:absolute;left:0;top:-1.6rem;width:clamp(160px,22vw,320px);height:14px;
  background-image:var(--tex-brush);background-size:100% 100%;background-repeat:no-repeat;opacity:.9;
}
.creed-close{
  grid-column:2;margin-top:clamp(2rem,5vw,3.6rem);border-top:1px solid var(--rule);padding-top:1.5rem;
  font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.2rem,2.5vw,2.1rem);
  line-height:1.2;max-width:26ch;
}
.creed-close em{font-style:normal;color:var(--ash)}

/* --- The Cadaver Crew ------------------------------------------------------ */
.crew-grid{
  max-width:var(--maxw);margin-inline:auto;display:grid;
  gap:clamp(1.8rem,4.5vw,4rem);grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:stretch;
}
.crew-media{position:relative;align-self:stretch;min-height:340px}
.crew-media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  border:1px solid var(--rule-soft);
  filter:grayscale(.85) contrast(1.08) brightness(.92);
  transition:filter .7s var(--ease);
}
.crew-media:hover img{filter:grayscale(0) contrast(1.1) brightness(1)}
.crew-media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,11,.55),transparent 45%);
}
.crew-body{display:grid;gap:1.2rem;max-width:56ch}
.crew-lead{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,2.9rem);line-height:1.04;letter-spacing:-.01em;
}
.crew-body p{font-size:clamp(1.05rem,1.45vw,1.28rem);line-height:1.6}
.crew-body p.lede{color:var(--bone)}
.crew-body p.rest{color:var(--ash)}
.crew-kicker{
  font-family:var(--font-brand);text-transform:uppercase;color:var(--oxide);
  font-size:clamp(1.15rem,2.4vw,1.9rem);letter-spacing:.04em;line-height:1.1;
}
.crew-cta{margin-top:.6rem}

/* --- 03 The Rig ----------------------------------------------------------- */
.rig-wrap{max-width:var(--maxw);margin-inline:auto;border-top:1px solid var(--rule)}
.acc{border-bottom:1px solid var(--rule)}
.acc-h{margin:0}
.acc-trigger{
  width:100%;display:flex;align-items:center;gap:clamp(.9rem,2.5vw,2.2rem);
  background:transparent;border:0;cursor:pointer;color:var(--bone);
  padding:clamp(1.1rem,2.6vw,1.9rem) 0;text-align:left;font-family:inherit;transition:color .35s var(--ease);
}
.acc-trigger:hover{color:var(--oxide-hi)}
.acc-num{font-family:var(--font-ui);font-weight:600;font-size:.86rem;letter-spacing:.2em;color:var(--oxide-hi);flex:none;width:2.2em}
.acc-label{font-family:var(--font-display);text-transform:uppercase;flex:1 1 auto;font-size:clamp(1.85rem,5.4vw,3.8rem);line-height:1;letter-spacing:-.008em}
.acc-icon{position:relative;width:20px;height:20px;flex:none}
.acc-icon::before,.acc-icon::after{content:'';position:absolute;left:0;top:9.5px;width:20px;height:1.5px;background:currentColor;transition:transform .45s var(--ease)}
.acc-icon::after{transform:rotate(90deg)}
.acc.is-open .acc-icon::after{transform:rotate(0)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc.is-open .acc-panel{grid-template-rows:1fr}
.acc-panel-in{overflow:hidden}
.acc-content{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));padding:0 0 clamp(1.6rem,3.5vw,2.6rem) calc(2.2em + clamp(.9rem,2.5vw,2.2rem))}
.acc-content p{color:var(--ash);max-width:46ch}
.acc-list{display:grid;gap:.55rem}
.acc-list li{font-size:1.05rem;color:var(--bone)}
.rig-note{max-width:var(--maxw);margin:clamp(2rem,4vw,3rem) auto 0;color:var(--ash);display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap}

/* --- 04 Those Who Chose It (right-to-left marquee) ------------------------ */
.marquee{position:relative;overflow:hidden;padding-block:.15rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee + .marquee{border-top:1px solid var(--rule-soft)}
.marquee-track{display:flex;width:max-content;animation:slide var(--dur,48s) linear infinite}
.marquee:hover .marquee-track,.marquee-track:focus-within{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
.marquee-row{display:flex;align-items:baseline;flex:none}
.marquee-row li{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(2.1rem,7vw,5.6rem);line-height:1.15;letter-spacing:-.01em;
  color:var(--ash-deep);padding-inline:clamp(.7rem,1.7vw,1.6rem);white-space:nowrap;
  transition:color .4s var(--ease);
}
.marquee-row li:hover{color:var(--bone)}
/* --- Logo row -------------------------------------------------------------
   Each logo sits in a fixed cell and scales to fit inside it. Matching only
   the height would blow wide logos up and shrink square ones — a uniform cell
   with object-fit:contain gives them all the same optical weight and puts
   every mark on the same centre line. */
.logo-row .marquee-row{align-items:center}
.logo-row li{
  display:flex;align-items:center;justify-content:center;
  width:clamp(132px,17vw,230px);height:clamp(52px,7vw,96px);
  padding-inline:clamp(1rem,2.6vw,2.6rem);box-sizing:content-box;
}
/* No // between logos — the marks carry their own separation. Needs the extra
   specificity to beat .marquee-row li::after. */
.marquee.logo-row .marquee-row li::after{content:none;margin:0}
.logo-row li img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  /* Normalised to one bone tone regardless of the source artwork's polarity,
     so any logo drops in without checking black-on-transparent vs white. */
  filter:brightness(0) invert(1);opacity:.42;
  transition:opacity .4s var(--ease);
}
.logo-row li:hover img{opacity:1}
.clients-also{
  margin-top:.7rem;color:var(--ash-deep);
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
}
.marquee-row li::after{content:'//';font-family:var(--font-ui);color:var(--oxide);font-size:.42em;vertical-align:.34em;margin-left:clamp(.8rem,1.9vw,1.7rem)}
.clients-note{max-width:var(--maxw);margin:clamp(1.8rem,4vw,2.8rem) auto 0;color:var(--ash)}
/* Auto-rotating content needs an explicit stop, not just hover. */
body.marquee-off .marquee-track{animation-play-state:paused!important}
.marquee-ctl{
  max-width:var(--maxw);margin:clamp(1.4rem,3vw,2rem) auto 0;padding-inline:var(--pad);
  display:flex;justify-content:flex-end;
}
.marquee-btn{
  display:inline-flex;align-items:center;gap:.5rem;min-height:26px;
  padding:.4rem .8rem;border:1px solid var(--rule);background:transparent;
  color:var(--ash);font-family:var(--font-ui);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.marquee-btn:hover{color:var(--bone);border-color:var(--ash)}
.marquee-btn i{width:9px;height:11px;flex:none;background:currentColor;font-style:normal;
  clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}
.marquee-btn[aria-pressed='true'] i{clip-path:polygon(0 0,100% 50%,0 100%)}

/* --- 05 The Relics (carousel) --------------------------------------------- */
.carousel{position:relative}
.rail{
  display:flex;gap:clamp(.8rem,1.6vw,1.5rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-inline:var(--pad);padding-block:.4rem 1.6rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail::-webkit-scrollbar{display:none}
.relic{flex:0 0 clamp(252px,74vw,400px);scroll-snap-align:center;position:relative}
.relic-link{
  display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;
  border:1px solid var(--rule-soft);background:var(--field-3);
  transition:border-color .45s var(--ease),transform .5s var(--ease);
}
.relic-link:hover{border-color:var(--rule);transform:translateY(-4px)}
.relic-media{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:radial-gradient(115% 90% at 50% 15%,rgba(232,228,220,.06),transparent 62%),linear-gradient(180deg,#191920,#0d0d0f);
}
.relic-media::before{content:'';position:absolute;inset:12px;border:1px solid rgba(232,228,220,.1);pointer-events:none;z-index:1}
.relic-media:has(img){background:var(--field-3)}
.relic-media:has(img)::before{display:none}
.relic-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.92);transition:filter .7s var(--ease),transform .9s var(--ease)}
.relic-link:hover img{filter:grayscale(.3) contrast(1.1);transform:scale(1.04)}
.relic-crest{position:absolute;inset:0;background:url('assets/crest-grunge.png') center/min(42%,150px) no-repeat;opacity:.12;z-index:1}
.relic-media:has(img) .relic-crest{display:none}
.relic-kicker{
  position:absolute;left:0;bottom:0;z-index:3;
  background:var(--oxide);color:var(--on-oxide);
  font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;padding:.35rem .7rem;
}
.relic-body{padding:1.1rem 1.15rem 1.3rem;display:grid;gap:.4rem;flex:1 1 auto}
.relic-title{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1}
.relic-desc{color:var(--ash);font-size:1rem}
.relic-cue{margin-top:.5rem;font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);transition:color .35s var(--ease)}
.relic-link:hover .relic-cue{color:var(--bone)}

/* --- Drag handle ----------------------------------------------------------
   A grabbable thumb sized to how much of the rail is showing. It is the
   affordance — no instructions needed. Doubles as the keyboard control. */
.drag-bar{max-width:var(--maxw);margin:.6rem auto 0;padding-inline:var(--pad)}
.drag-track{
  position:relative;height:26px;display:flex;align-items:center;cursor:pointer;
}
.drag-track::before{
  content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(232,228,220,.2);transform:translateY(-50%);
}
.drag-thumb{
  position:absolute;top:50%;left:0;transform:translateY(-50%);
  /* 26px clears the WCAG 2.2 AA 24x24 CSS px minimum for pointer targets. */
  height:26px;min-width:52px;padding:0 5px;border:0;border-radius:0;
  background:var(--oxide);color:var(--on-oxide);
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  cursor:grab;touch-action:none;
  box-shadow:0 0 20px rgba(176,74,44,.55),0 0 44px rgba(176,74,44,.28);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.drag-thumb:hover{background:var(--oxide-hi);box-shadow:0 0 26px rgba(201,84,47,.7),0 0 60px rgba(201,84,47,.35)}
.drag-thumb.is-grab{cursor:grabbing;background:var(--oxide-hi)}
.drag-thumb svg{width:9px;height:11px;flex:none;opacity:.9}

/* --- 06 Inquire ----------------------------------------------------------- */
.inq-grid{max-width:var(--maxw);margin-inline:auto;display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
.inq-aside{display:grid;gap:1.6rem;position:relative;padding:1.6rem;border:1px solid var(--rule-soft);background:rgba(23,23,27,.5)}
.inq-aside .big-mail{
  font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.2rem,2.5vw,1.9rem);
  line-height:1.1;text-decoration:none;color:var(--bone);border-bottom:2px solid var(--oxide);
  display:inline-block;padding-bottom:.15em;transition:color .35s var(--ease),border-color .35s var(--ease);word-break:break-word;
}
.inq-aside .big-mail:hover{color:var(--oxide-hi);border-color:var(--bone)}
.at{font-family:var(--font-ui);font-weight:600;font-size:.88em}
.inq-meta{display:grid;gap:.35rem;color:var(--ash);font-size:1rem}
.inq-meta dt{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-deep);margin-top:.6rem}
.inq-meta dd{margin:0;color:var(--bone)}
.form{display:grid;gap:1.5rem}
.form-row{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.field{display:grid;gap:.45rem}
.field label{font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.field input,.field select,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--rule);color:var(--bone);
  font:inherit;font-size:1.12rem;padding:.65rem 0;border-radius:0;transition:border-color .35s var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{border-bottom-color:var(--ash)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--oxide-hi)}
.field textarea{resize:vertical;min-height:120px;line-height:1.5}
.field select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a8781' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .2rem center;padding-right:1.6rem;
}
.field select option{background:var(--field-3);color:var(--bone)}
.form-foot{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.form-status{font-size:1rem;color:var(--ash)}
.form-status[data-state='ok']{color:var(--bone)}
.form-status[data-state='err']{color:var(--oxide-hi)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* WCAG 2.2 AA target size (24x24 CSS px). These links all sat at 22px tall,
   two short, so they get a floor rather than a bigger type size. */
.nav-links a,.menu nav a,.foot-col a,.form-errors a,.inq-aside a,.inq-lead-alt a{
  display:inline-flex;align-items:center;min-height:24px;
}

/* The homepage no longer carries the form itself, just the pitch and the door. */
.inq-lead{display:grid;gap:1.4rem;align-content:start}
.inq-lead-copy{margin:0;max-width:52ch;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.62;color:var(--bone)}
.inq-lead-cta{margin:0}
.inq-lead-alt{margin:0;font-size:.98rem;color:var(--ash)}
.inq-lead-alt a{color:var(--bone);border-bottom:1px solid var(--rule);text-decoration:none;padding-bottom:1px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.inq-lead-alt a:hover{color:var(--oxide-hi);border-color:var(--oxide)}

/* --- Sub-pages (gallery, about) ------------------------------------------- */
/* No hero on these, so the fixed nav needs clearance at the top. */
.page-sub .sub-head{padding-top:calc(var(--pad) + 6.5rem)}
.page-sub .nav{background:rgba(10,10,11,.88);backdrop-filter:blur(12px) saturate(120%);border-bottom-color:var(--rule)}

.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.filter{
  min-height:26px;padding:.45rem .9rem;border:1px solid var(--rule);background:transparent;
  color:var(--ash);font-family:var(--font-ui);font-size:.76rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.filter:hover{color:var(--bone);border-color:var(--ash)}
.filter.is-on{background:var(--oxide);border-color:var(--oxide);color:var(--on-oxide)}
.filter-status{margin-top:.9rem;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-deep)}

.gal-grid{
  display:grid;gap:clamp(.6rem,1.4vw,1.3rem);margin-top:clamp(1.6rem,4vw,3rem);
  grid-template-columns:repeat(auto-fill,minmax(clamp(150px,22vw,300px),1fr));
}
.gal-item figure{margin:0;position:relative;overflow:hidden;background:var(--field-3)}
.gal-item img{
  width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.86);
  transition:filter .6s var(--ease),transform .8s var(--ease);
}
.gal-item figure:hover img{filter:grayscale(0) contrast(1.1) brightness(1);transform:scale(1.04)}
.gal-item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.7rem .8rem;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);
  background:linear-gradient(to top,rgba(10,10,11,.85),transparent);
  opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.gal-item figure:hover figcaption,.gal-item figure:focus-within figcaption{opacity:1;transform:none}

/* --- About page ----------------------------------------------------------- */
.about-grid{
  max-width:var(--maxw);margin-inline:auto;display:grid;
  gap:clamp(1.8rem,4.5vw,4rem);grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:start;
}
.about-media img{width:100%;height:auto;border:1px solid var(--rule-soft);filter:grayscale(.8) contrast(1.06)}
.about-body{display:grid;gap:1.3rem;max-width:64ch;font-size:clamp(1.08rem,1.5vw,1.32rem);line-height:1.62}
.about-body .lead{font-size:clamp(1.3rem,2.1vw,1.8rem);line-height:1.4;color:var(--bone)}
.about-body p{color:var(--ash)}
.about-body p.lead,.about-body p.hi{color:var(--bone)}
.about-facts{
  display:grid;gap:.2rem;margin-top:1rem;border-top:1px solid var(--rule);padding-top:1.2rem;
}
.about-facts dt{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-deep);margin-top:.7rem}
.about-facts dd{margin:0;color:var(--bone)}

@media (max-width:860px){
  .about-grid{grid-template-columns:1fr}
}

/* --- Footer --------------------------------------------------------------- */
.foot{position:relative;padding-block:clamp(3.5rem,8vh,5.5rem) 2rem;overflow:hidden}
.foot-inner{max-width:var(--maxw);margin-inline:auto;display:grid;gap:clamp(2rem,4vw,3.2rem)}
.foot-brand{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.foot-brand img{width:56px;height:56px}
.foot-word{font-family:var(--font-brand);text-transform:uppercase;font-size:1.7rem;letter-spacing:.1em;line-height:1}
.foot-line{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.1rem,8.4vw,6.8rem);line-height:.94;letter-spacing:-.012em;color:transparent;-webkit-text-stroke:1px var(--ash-deep)}
.foot-cols{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:1px solid var(--rule);padding-top:2rem}
.foot-col h3{font-size:.78rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ash-deep);margin-bottom:.85rem}
.foot-col a{text-decoration:none;color:var(--bone);transition:color .3s var(--ease)}
.foot-col a:hover{color:var(--oxide-hi)}
.foot-col li{margin-bottom:.3rem}
.foot-bottom{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-end;justify-content:space-between;border-top:1px solid var(--rule);padding-top:1.6rem;color:var(--ash);font-size:.86rem;letter-spacing:.12em;text-transform:uppercase}

/* --- Responsive ----------------------------------------------------------- */
@media (min-width:1100px){
  .relic{flex:0 0 calc((100% - 2 * clamp(.8rem,1.6vw,1.5rem)) / 3)}
  .rail{scroll-padding-inline:var(--pad)}
  .relic{scroll-snap-align:start}
}
@media (max-width:1024px){
  .inq-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav-links{display:none}
  .burger{display:block}
  .hero-foot{grid-template-columns:1fr}
  .hero-side{align-items:flex-start;text-align:left}
  .creed-inner{grid-template-columns:minmax(0,1fr)}
  .creed-rail{grid-column:1;grid-row:auto;writing-mode:horizontal-tb;transform:none;border-right:0;border-bottom:1px solid var(--rule);padding:0 0 .8rem;justify-self:stretch}
  .creed-body,.creed-pull,.creed-close{grid-column:1}
  .crew-grid{grid-template-columns:1fr}
  .crew-media{min-height:0;aspect-ratio:4/5}
}
/* Short viewports: give the poster type the room the chrome was using. */
@media (max-height:820px){
  .scroll-cue{display:none}
  .hero{padding-top:calc(var(--pad) + 3.6rem)}
  .hero-tag{margin-bottom:.5rem}
  .hero-cta{margin-top:1.1rem}
}
@media (max-width:640px){
  .tape--tl{left:-14px;width:clamp(118px,40vw,180px)}
  .slivers{padding-top:40px}
  .sliver.is-lift{transform:none}
  .sliver.is-near{transform:none}
  .hero{justify-content:flex-end;gap:2rem}
  .hero-top{position:absolute;top:calc(var(--pad) + 4.2rem);left:var(--pad);right:var(--pad)}
  .hero-top > :nth-child(3),.hero-top > :nth-child(4){display:none}
}
@media (max-width:860px){
  .sec .ghost{font-size:clamp(4rem,26vw,9rem)}
  /* The hero footer stacks on small screens — sit the control below the top
     rail instead, clear of both the rail labels and the CTA row. */
  .hero-toggle{bottom:auto;top:calc(var(--pad) + 7.2rem)}
}

/* ==========================================================================
   MOBILE CORRECTIONS
   Everything below only applies at phone widths. Desktop is unchanged.
   ========================================================================== */
@media (max-width:700px){

  /* --- Torn dividers ------------------------------------------------------
     The pale fibrous lip reads as a fine detail on a wide screen. On a phone
     the divider is the same height against a third of the width, so the same
     50% bone fill turns into a hard white band. Thin it right down and drop
     the drop-shadow that was doubling the contrast. */
  .torn .tear-fringe{fill:#8a8781;opacity:.22}
  .torn svg{filter:drop-shadow(0 3px 4px rgba(0,0,0,.55))}
  .torn{height:clamp(30px,7vw,44px)}

  /* --- Section rhythm -----------------------------------------------------
     Sections were running into each other. Give each one real air above and
     below, and clear the torn divider that overlaps the top edge. */
  .sec{padding-top:clamp(3.6rem,13vw,5.5rem);padding-bottom:clamp(3.2rem,11vw,4.8rem)}
  .sec-head{margin-bottom:1.9rem}
  .sec-lede{margin-top:.85rem}

  /* --- The Relics as three stacked bars ------------------------------------
     A swipeable carousel of tall cards costs a phone user four gestures to see
     four products. Stacked bars show all of them at once: image left, name and
     description right, whole bar tappable. */
  .carousel{overflow:visible}
  .carousel .rail{
    display:grid;grid-auto-flow:row;gap:.85rem;
    overflow:visible;scroll-snap-type:none;padding:0 var(--pad);
  }
  .relic{flex:none!important;width:auto!important;scroll-snap-align:none}
  .relic .tape{display:none}
  .relic-link{
    display:grid;grid-template-columns:clamp(96px,30vw,132px) minmax(0,1fr);
    align-items:stretch;gap:0;
    border:1px solid var(--rule);background:var(--field-2);
    text-decoration:none;min-height:112px;
  }
  .relic-link:hover,.relic-link:focus-visible{border-color:var(--oxide)}
  .relic-media{aspect-ratio:auto;height:100%;min-height:112px}
  .relic-media img{width:100%;height:100%;object-fit:cover}
  .relic-crest,.relic-kicker{display:none}
  .relic-body{
    display:flex;flex-direction:column;justify-content:center;gap:.3rem;
    padding:.9rem 1rem;
  }
  .relic-title{font-size:1.25rem;margin:0}
  .relic-desc{
    margin:0;font-size:.87rem;line-height:1.45;color:var(--ash);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .relic-cue{margin:.15rem 0 0;font-size:.68rem;letter-spacing:.16em;color:var(--oxide-hi)}
  /* The rail no longer scrolls, so its controls are meaningless here. */
  .carousel .drag-bar{display:none}

  /* --- The Passport drag bar ----------------------------------------------
     A 300px track standing in for 2000px of scroll amplifies every finger
     tremor about five times over. The slivers themselves swipe perfectly well,
     so on touch the bar stays as a progress readout and stops being a control. */
  #wthumb{pointer-events:none}
}

/* Touch devices of any width: the bar reports position, it does not set it. */
@media (hover:none){
  .drag-thumb{cursor:default}
}

/* --- Motion preferences --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-r]{opacity:1;transform:none}
  .name-line > span{transform:none}
  .scroll-cue i::after{display:none}
  .rail{scroll-behavior:auto}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none;width:100%;flex-wrap:wrap}
  .marquee-row{flex-wrap:wrap}
  .marquee-row[aria-hidden='true']{display:none}
}
/* ==========================================================================
   PROJECT PAGES  (projects/<slug>.html)
   Full-bleed media stack: the gallery runs edge to edge with zero gutters,
   so nothing competes with the photography. Chrome lives only in the fixed
   rail at the top and the "more worlds" row at the bottom.
   ========================================================================== */

body.page-project{background:var(--field)}

/* --- Next-project corner link -------------------------------------------- */
/* Sits in the existing nav so the top-right corner is always one click from
   the next project, at every scroll position. */
.pj-next{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-left:auto;padding:.55rem .7rem;min-height:44px;
  font-family:var(--font-ui);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--ash-deep);text-decoration:none;white-space:nowrap;
  transition:color .3s var(--ease);
}
.pj-next .pj-next-k{display:none}
.pj-next b{
  font-family:var(--font-display);font-weight:400;
  font-size:.95rem;letter-spacing:.03em;color:var(--bone);
  transition:color .3s var(--ease);
}
.pj-next i{
  position:relative;display:block;width:22px;height:1px;
  background:var(--ash-deep);flex:0 0 auto;color:var(--ash-deep);
  transition:background .3s var(--ease),transform .35s var(--ease),color .3s var(--ease);
}
.pj-next i::after{
  content:"";position:absolute;right:0;top:-3px;
  width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);transform-origin:100% 0;
}
.pj-next:hover,.pj-next:focus-visible{color:var(--bone)}
.pj-next:hover b,.pj-next:focus-visible b{color:var(--oxide-hi)}
.pj-next:hover i,.pj-next:focus-visible i{background:var(--oxide);color:var(--oxide);transform:translateX(4px)}
@media (min-width:980px){ .pj-next .pj-next-k{display:inline} }

/* On phones the burger owns the right edge, so the label collapses to the
   project name plus the arrow — still a 44px target, still in the corner. */
@media (max-width:979px){
  .pj-next{padding-inline:.5rem;letter-spacing:.1em}
  .pj-next b{font-size:.86rem;max-width:34vw;overflow:hidden;text-overflow:ellipsis}
}

/* --- Hero ---------------------------------------------------------------- */
.pj-hero{
  position:relative;width:100%;overflow:hidden;background:#000;
  aspect-ratio:16/9;min-height:min(86svh,780px);
  display:flex;align-items:flex-end;
}
.pj-hero > img,.pj-hero > video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.94) contrast(1.03);
}
.pj-hero > video{opacity:0;transition:opacity .8s var(--ease)}
.pj-hero.is-live > video{opacity:1}
.pj-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.80) 0%,rgba(10,10,11,.10) 30%,rgba(10,10,11,0) 48%,rgba(10,10,11,.55) 82%,rgba(10,10,11,.94) 100%);
}
.pj-hero-cap{
  position:relative;z-index:2;width:100%;
  padding:0 var(--pad) clamp(1.5rem,4.4vw,3.4rem);
}
.pj-eyebrow{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  margin:0 0 .55rem;font-family:var(--font-ui);font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.26em;color:var(--oxide-hi);
}
.pj-eyebrow span{color:var(--ash)}
.pj-h1{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.5rem,min(11.5vw,15vh),8.5rem);line-height:.86;
  text-transform:uppercase;letter-spacing:-.008em;color:var(--bone);
  text-shadow:0 2px 40px rgba(0,0,0,.55);
}
.pj-tag{
  margin:.75rem 0 0;max-width:46ch;
  font-family:var(--font-ui);font-size:clamp(.94rem,1.5vw,1.1rem);
  line-height:1.55;color:var(--bone);opacity:.86;
}

/* Pause control for the hero loop — autoplaying media always gets a stop. */
.pj-pause{
  position:absolute;z-index:3;right:var(--pad);bottom:clamp(1.5rem,4.4vw,3.4rem);
  display:inline-flex;align-items:center;gap:.55rem;
  min-height:44px;padding:.55rem .95rem;
  background:rgba(10,10,11,.55);border:1px solid var(--rule);
  color:var(--bone);font-family:var(--font-ui);font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.pj-pause:hover{border-color:var(--oxide);background:rgba(10,10,11,.78)}
.pj-pause i{width:9px;height:11px;flex:0 0 auto;border-left:3px solid currentColor;border-right:3px solid currentColor}
.pj-pause[aria-pressed="true"] i{
  border:0;width:0;height:0;
  border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid currentColor;
}
@media (max-width:640px){
  .pj-pause{right:auto;left:var(--pad);bottom:auto;top:calc(var(--pad) + 3.6rem)}
  /* A 16:9 frame cropped into a tall phone viewport throws most of the picture
     away, so the hero gets shorter and wider-shouldered on small screens. */
  .pj-hero{aspect-ratio:4/5;min-height:min(66svh,560px)}
}

/* --- Statement slab ------------------------------------------------------ */
.pj-slab{background:var(--field-2);border-bottom:1px solid var(--rule-soft)}
.pj-slab-in{
  display:grid;gap:clamp(1.6rem,4vw,3.4rem);
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  padding:clamp(2.4rem,6vw,4.6rem) 0;
}
.pj-slab p{margin:0 0 1rem;max-width:62ch;font-size:clamp(1rem,1.35vw,1.14rem);line-height:1.68;color:var(--bone)}
.pj-slab p:last-child{margin-bottom:0}
.pj-slab p.lede{
  font-size:clamp(1.16rem,2.1vw,1.62rem);line-height:1.42;
  letter-spacing:-.01em;
}
.pj-facts{margin:0;display:grid;gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft);align-content:start}
.pj-facts > div{display:flex;justify-content:space-between;gap:1.2rem;background:var(--field-2);padding:.85rem 1.05rem}
.pj-facts dt{
  font-family:var(--font-ui);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;color:var(--ash-deep);
}
.pj-facts dd{margin:0;text-align:right;font-family:var(--font-ui);font-size:.92rem;color:var(--bone)}
.pj-facts dd a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.pj-facts dd a:hover,.pj-facts dd a:focus-visible{color:var(--oxide-hi);border-color:var(--oxide)}
@media (max-width:820px){ .pj-slab-in{grid-template-columns:1fr} }

/* --- Media stack --------------------------------------------------------- */
/* Edge to edge. No wrap, no max-width, no gaps — the frames are the layout. */
.pj-stack{background:#000;line-height:0}
.pj-full,.pj-pair{display:block;width:100%}
.pj-full > img,.pj-full > video{display:block;width:100%;height:auto}
.pj-pair{display:grid;grid-template-columns:1fr 1fr;--pair-ar:3/2}
.pj-pair > img,.pj-pair > video{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:var(--pair-ar)}
.pj-pair--tall{--pair-ar:4/5}
@media (max-width:700px){
  .pj-pair{grid-template-columns:1fr}
  .pj-pair > img,.pj-pair > video{aspect-ratio:auto;height:auto}
}

/* Vertical-native work (social cuts, phone-first brand jobs) reads badly as a
   letterboxed landscape row, so it gets its own three-across block at 9:16.
   Still edge to edge, still zero gutters. */
.pj-trio{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
.pj-trio > img,.pj-trio > video{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:9/16}
@media (max-width:820px){
  .pj-trio{grid-template-columns:repeat(2,1fr)}
  /* An odd item in a two-up grid spans both columns rather than leaving a hole. */
  .pj-trio > :last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:4/5}
}
@media (max-width:460px){
  .pj-trio{grid-template-columns:1fr}
  .pj-trio > :last-child:nth-child(odd){aspect-ratio:9/16}
}

/* --- More worlds --------------------------------------------------------- */
.pj-more{background:var(--field);padding-top:clamp(2.2rem,5vw,3.6rem)}
.pj-more .sec-head{margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.pj-more-grid{display:grid;grid-template-columns:repeat(3,1fr);line-height:0}
.pj-card{position:relative;display:block;overflow:hidden;text-decoration:none;background:#000;aspect-ratio:3/2}
.pj-card img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.6) contrast(1.06);
  transform:scale(1.01);
  transition:filter .55s var(--ease),transform .8s var(--ease);
}
.pj-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,0) 38%,rgba(10,10,11,.9) 100%);
}
.pj-card:hover img,.pj-card:focus-visible img{filter:none;transform:scale(1.055)}
.pj-card-cap{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:1.1rem clamp(.9rem,2vw,1.5rem);line-height:1.3}
.pj-card-cap b{
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.05rem,2vw,1.5rem);text-transform:uppercase;letter-spacing:.01em;color:var(--bone);
}
.pj-card-cap span{
  display:block;margin-top:.28rem;font-family:var(--font-ui);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.22em;color:var(--ash);
}
.pj-card:hover .pj-card-cap b,.pj-card:focus-visible .pj-card-cap b{color:var(--oxide-hi)}
.pj-card:focus-visible{outline:2px solid var(--oxide-hi);outline-offset:-4px}
@media (max-width:820px){ .pj-more-grid{grid-template-columns:1fr} .pj-card{aspect-ratio:16/9} }

/* --- Back to the index --------------------------------------------------- */
.pj-back{
  display:inline-flex;align-items:center;gap:.7rem;min-height:44px;
  margin-top:clamp(1.4rem,3vw,2.2rem);
  font-family:var(--font-ui);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.22em;color:var(--ash);text-decoration:none;
  transition:color .3s var(--ease);
}
.pj-back:hover{color:var(--oxide-hi)}
.pj-back i{display:block;width:26px;height:1px;background:currentColor}

@media (prefers-reduced-motion:reduce){
  .pj-card img{transition:none}
  .pj-next i{transition:none}
  .pj-hero > video{transition:none}
}