/* ============================================================
   GLiTCHED ViSUALS
   Palette: black + holo/silver, off the logo plate.
   No overlay sits on top of the photography - the glitch lives
   in the backgrounds behind the content instead.
   ============================================================ */

:root{
  /* black + holo/silver, taken off the logo plate */
  --void:      #050506;
  --ink-2:     #0b0b0d;
  --ink-3:     #131316;
  --bone:      #f4f4f6;
  --silver:    #c9ced8;
  --dim:       #8e9199;
  --dimmer:    #565961;
  /* prismatic split - yellow / pink / violet on the warm side, cyan / blue / indigo
     on the cool side, taken off the reference smear */
  --holo-a:    #ff2f9a;      /* warm pick, for single-colour uses */
  --holo-b:    #2f8bf0;      /* cool pick */
  --holo-warm: linear-gradient(100deg,
            #ffd60a 0%, #ffa63a 18%, #ff5ec4 44%, #ff2f9a 68%, #c23af0 100%);
  --holo-cool: linear-gradient(100deg,
            #2ee6f0 0%, #29c5f0 22%, #2f8bf0 50%, #3a3fd6 76%, #7b3fe0 100%);
  --holo: linear-gradient(100deg,
            #ffd60a 0%, #ff5ec4 18%, #ff2f9a 32%, #c23af0 46%,
            #3a3fd6 62%, #2f8bf0 78%, #2ee6f0 92%, #ffd60a 100%);
  --line:      rgba(244,244,246,.13);
  --line-2:    rgba(244,244,246,.26);
  --glow-s:    0 0 30px rgba(220,228,240,.30);
  --glow-f:    0 0 26px rgba(255,47,154,.30);
  --glow-t:    0 0 26px rgba(47,139,240,.28);
  --pad:       clamp(24px, 5.5vw, 96px);
  /* the accent line, used for every thin rule that carries colour: the group bars, the
     menu underline, the before/after handle. Cool through the middle, one warm tip. */
  --line-accent:   linear-gradient(90deg, #2ee6f0 0%, #29c5f0 18%, #2f8bf0 42%,
                                          #3a3fd6 66%, #7b3fe0 86%, #ff2f9a 100%);
  --line-accent-v: linear-gradient(180deg, #2ee6f0 0%, #29c5f0 18%, #2f8bf0 42%,
                                           #3a3fd6 66%, #7b3fe0 86%, #ff2f9a 100%);
  /* tapered ends, so a line never stops square */
  --line-taper:    polygon(0 50%, 16% 0, 84% 0, 100% 50%, 84% 100%, 16% 100%);
  --line-taper-v:  polygon(50% 0, 100% 16%, 100% 84%, 50% 100%, 0 84%, 0 16%);
}

/* holographic type fill */
.holo{
  background:var(--holo); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:holo-drift 9s ease-in-out infinite;
}
@keyframes holo-drift{
  0%,100%{ background-position:0% 50% }
  50%    { background-position:100% 50% }
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  background:var(--void); scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  /* the pinned bar covers the top of whatever a nav link jumps to, so hold anchors
     clear of it - roughly the bar's own height */
  scroll-padding-top:86px;
}
body{
  margin:0; background:var(--void); color:var(--bone);
  font-family:"Space Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size:14px; line-height:1.65; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--holo-a); color:#fff; }
:focus-visible{ outline:2px solid var(--holo-b); outline-offset:3px; }
:focus:not(:focus-visible){ outline:none; }

/* ---------- TYPE ---------- */
.display{
  font-family:"Anton", Impact, "Arial Narrow", sans-serif;
  font-weight:400; text-transform:uppercase; letter-spacing:.005em; line-height:.86;
}
.tag{ font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--dim); }
.tag b{ color:var(--silver); font-weight:400; }
.tag i{ font-style:normal; color:var(--silver); }

/* ---------- GLITCH TEXT (headings only, never over photos) ---------- */
.gl{ position:relative; display:inline-block; }
.gl::before,.gl::after{
  content:attr(data-t); position:absolute; left:0; top:0; width:100%;
  pointer-events:none; opacity:0;
}
.gl::before{ color:var(--holo-a); animation:glA 7s infinite steps(1); }
.gl::after { color:var(--holo-b);    animation:glB 5.4s infinite steps(1); }
@keyframes glA{
  0%,86%,100%{ opacity:0; transform:none; clip-path:none }
  87%{ opacity:.9; transform:translate(-7px,2px); clip-path:inset(6% 0 74% 0) }
  89%{ opacity:.9; transform:translate(5px,-2px); clip-path:inset(52% 0 26% 0) }
  91%{ opacity:0 }
}
@keyframes glB{
  0%,74%,100%{ opacity:0; transform:none; clip-path:none }
  75%{ opacity:.9; transform:translate(6px,-1px); clip-path:inset(18% 0 62% 0) }
  77%{ opacity:.9; transform:translate(-5px,2px); clip-path:inset(64% 0 12% 0) }
  79%{ opacity:0 }
}

/* ---------- GLITCH BACKDROP (behind content, never on top) ---------- */
.bgv{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.bgv video,.bgv img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.72) contrast(1.22) brightness(.82);
}
.bgv::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    var(--void) 0%, rgba(5,5,6,.74) 22%, rgba(5,5,6,.74) 78%, var(--void) 100%);
}
.bgv.soft video,.bgv.soft img{ opacity:.72; filter:grayscale(.5) contrast(1.18) brightness(.9); }
/* Contact's backdrop is a kaleidoscope: one obvious centre, and the eye expects the big
   type to sit on it. object-fit:cover puts that centre halfway down the section, but the
   heading sits at roughly 30% of the height, so the pattern read low.
   Fixed with the element box rather than object-position. A percentage on
   object-position shifts by a fraction of the hidden overflow, which grows with the
   viewport width, so it was right at 1400px and 55px out at 1920. Hanging the video
   above the section instead keeps the maths proportional: top -40% + height 140% puts
   the element's centre - and so the pattern's - at 30% of the section, at any size.
   .bgv already clips, so the overhang is invisible. */
#contact .bgv video{ position:absolute; left:0; width:100%; top:-26%; height:126%; }
/* on a phone the heading sits higher again, so the pattern comes up to meet it */
@media (max-width:700px){
  #contact .bgv video{ top:-40%; height:140%; }
}
/* Who We Are: the cards are transparent, so this field is what sits behind the figures */
.bgv.who-bgv img,.bgv.who-bgv video{ opacity:.40; filter:grayscale(.16) contrast(1.16) brightness(.88) saturate(1.18); }
/* scanlines only. This used to carry two big radial glows as well, which read as a
   second lighting pass sitting on top of the clip instead of part of it. */
.bgv.who-bgv::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(5,5,6,.42) 0 1px, transparent 1px 4px);
}
.bgv.who-bgv::after{
  background:linear-gradient(180deg,
    var(--void) 0%, rgba(5,5,6,.58) 16%, rgba(5,5,6,.58) 84%, var(--void) 100%);
}
/* the standard scrim is heavy enough to bury this one, so lift it for .soft */
.bgv.soft::after{
  background:linear-gradient(180deg,
    var(--void) 0%, rgba(5,5,6,.36) 20%, rgba(5,5,6,.36) 80%, var(--void) 100%);
}
.bgv.faint video,.bgv.faint img{ opacity:.14; }
/* the working level for section backdrops. .faint at 14% was invisible and left the
   page reading as flat black; this keeps the plate present without fighting the work. */
.bgv.plate img,.bgv.plate video{
  opacity:.48;
  filter:grayscale(.18) contrast(1.16) brightness(.88) saturate(1.2);
}
.bgv.plate::after{
  background:linear-gradient(180deg,
    var(--void) 0%, rgba(5,5,6,.40) 14%, rgba(5,5,6,.40) 86%, var(--void) 100%);
}

/* ---------- NAV ---------- */
/* three tracks: empty | centred links | Instagram, so the menu sits dead centre
   whatever the width of the button on the right */
#nav{
  /* sticky, not fixed: it sits under the hero, rides up with the page and then holds
     at the top. A fixed bar would sit over the hero from the start. */
  position:sticky; top:0; z-index:9000;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
  padding:18px var(--pad);
  background:linear-gradient(180deg,rgba(5,5,6,.95),rgba(5,5,6,0));
  border-bottom:1px solid transparent;
  transition:background .3s, backdrop-filter .3s, border-color .3s;
}
/* While the drawer is open the bar has to be at the top, because the close button lives
   in it. Sticky means it normally rests on the hero's bottom edge, so opening the menu
   from the top of the page left the X floating in the middle of the list. #mob sits
   before #nav in the markup, hence the sibling selector. */
#mob.open ~ #nav{
  position:fixed; top:0; left:0; right:0;
  background:linear-gradient(180deg,rgba(5,5,6,.95),rgba(5,5,6,.6));
}

#nav.stuck{
  background:rgba(5,5,6,.94); backdrop-filter:blur(10px) saturate(.85);
  border-bottom-color:var(--line);
}
.nav-links{
  grid-column:2; justify-self:center;
  display:flex; align-items:center; gap:0; list-style:none; margin:0; padding:0;
}
.nav-links li{ display:flex; align-items:center; }
/* middle dot between items */
.nav-links li + li::before{
  content:"\00B7"; color:var(--dimmer); font-size:14px; line-height:1;
  padding:0 clamp(10px,1.4vw,20px); user-select:none;
}
.nav-links a{
  font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--silver);
  padding:6px 0; position:relative; transition:color .2s; white-space:nowrap;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--line-accent); clip-path:var(--line-taper); transition:width .25s;
}
.nav-links a:hover{ color:#fff; }
.nav-links a:hover::after{ width:100%; }
/* Artists holds Live, Covers and Music Videos - ten links in one row was too many */
.nav-links li.has-sub{ position:relative; }
.subnav{
  position:absolute; left:50%; top:100%; translate:-50% 0; z-index:20;
  margin:0; padding:10px 6px; list-style:none; min-width:170px;
  display:flex; flex-direction:column; gap:2px;
  background:linear-gradient(150deg, rgba(20,20,26,.96), rgba(10,10,13,.96));
  border:1px solid rgba(244,244,246,.14); border-radius:12px;
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 18px 40px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s, transform .25s cubic-bezier(.2,.7,.3,1), visibility .2s;
}
/* the gap between the bar and the panel would drop the hover, so bridge it */
.nav-links li.has-sub::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:14px;
}
.nav-links li.has-sub:hover .subnav,
.nav-links li.has-sub:focus-within .subnav{
  opacity:1; visibility:visible; transform:none;
}
.subnav li{ display:block; }
.subnav li + li::before{ content:none; padding:0; }
.subnav a{ display:block; padding:7px 14px; border-radius:8px; white-space:nowrap; }
.subnav a:hover{ color:#fff; background:rgba(244,244,246,.08); }
.subnav a::after{ display:none; }
/* Opens upwards only while there is actually room above the bar - the nav script
   measures the tallest panel and sets .drop-up. Keyed off free space rather than off
   .stuck, because between the two the bar is near the top with no room and an upward
   panel would be cut off by the viewport. */
#nav.drop-up .subnav{
  top:auto; bottom:100%;
  transform:translateY(6px);
  box-shadow:0 -18px 40px rgba(0,0,0,.6);
}
#nav.drop-up .nav-links li.has-sub::after{ top:auto; bottom:100%; }
#nav.drop-up .nav-links li.has-sub:hover .subnav,
#nav.drop-up .nav-links li.has-sub:focus-within .subnav{ transform:none; }

/* the drawer shows the same grouping, indented */
#mob a.sub{ font-size:clamp(15px,4.2vw,27px); padding-left:22px; opacity:.78; }

.nav-cta{
  grid-column:3; justify-self:end;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
  border:1px solid var(--line-2); border-radius:22px; padding:10px 20px; transition:.22s;
  color:var(--bone);
}
.nav-cta:hover{ background:var(--bone); border-color:var(--bone); color:var(--void); box-shadow:var(--glow-s); }
/* The bars stay 30x22; the button around them grows to a 44px target, which is the
   size both Apple and Google ask for. Negative margin keeps the nav row unchanged. */
.ham{
  display:none; width:30px; height:22px;
  flex-direction:column; justify-content:space-between;
  position:relative; background:none; border:0; padding:0;
}
.ham::after{
  content:""; position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:44px; height:44px;
}
.ham span{ height:2px; background:var(--bone); transition:.25s; }
.ham.x span:nth-child(1){ transform:translateY(10px) rotate(45deg) }
.ham.x span:nth-child(2){ opacity:0 }
.ham.x span:nth-child(3){ transform:translateY(-10px) rotate(-45deg) }
#mob{
  position:fixed; inset:0; z-index:8999; background:var(--void);
  display:flex; flex-direction:column; gap:2px;
  /* the menu has seventeen entries now, which is taller than a phone. It has to scroll,
     and it has to start at the top: centring silently pushes the first links off the
     screen where they cannot be reached. The top padding clears the nav bar, which sits
     above this at a higher z-index so the close button stays tappable. */
  justify-content:flex-start;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:86px var(--pad) 48px; transform:translateY(-101%);
  transition:transform .4s cubic-bezier(.7,0,.2,1);
}
#mob.open{ transform:none; }
#mob a{
  font-family:"Anton",Impact,sans-serif; font-size:clamp(20px,6vw,40px);
  text-transform:uppercase; line-height:1.05; color:var(--bone);
  border-bottom:1px solid var(--line); padding:6px 0; flex:0 0 auto;
  /* the sub-entries set a small font, which left some rows at 30px. A floor keeps every
     row thumb-sized without changing the type. The drawer already scrolls if the list
     outgrows the screen, so this cannot strand an entry off the bottom. */
  display:flex; align-items:center; min-height:44px;
}
#mob a:active{ color:var(--holo-a); }

/* ---------- HERO ---------- */
.hero{
  /* not full height - the nav sits on the hero's bottom edge, so the hero's height is
     what decides how far up the screen the bar lands. 88dvh: 58, 66, 72 and 82 all sat too far up; 94 was effectively full height. */
  position:relative; min-height:88vh; min-height:88dvh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(40px,6vh,80px) var(--pad) clamp(80px,12vh,150px);
  border-bottom:1px solid var(--line);
}
/* extended plate: the whole hand on a wide black ground, so nothing is cropped and
   the wordmark can sit up inside the fingers */
.hero .bgv img{
  opacity:.9; object-position:center center;
  filter:grayscale(.28) contrast(1.2) brightness(.9);
}
.hero .bgv::after{
  background:
    radial-gradient(58% 46% at 50% 50%, rgba(5,5,6,.44), transparent 76%),
    linear-gradient(180deg, rgba(5,5,6,.55) 0%, rgba(5,5,6,.06) 30%,
                            rgba(5,5,6,.40) 78%, var(--void) 100%);
}
.hero-inner{ position:relative; z-index:2; text-align:center; }
/* The mark is stacked three times: a magenta and a cyan ghost sitting under the
   real one, so the chromatic split can tear independently of the silver plate. */
.hero-logo{
  margin:0 auto; line-height:0; position:relative; display:block;
  width:min(94%, 1140px);
}
.hero-logo img{ display:block; width:100%; height:auto; }
.hero-logo .plate{
  position:relative; z-index:2;
  filter:drop-shadow(0 0 46px rgba(210,222,238,.22));
  animation:logo-plate 5.5s steps(1) infinite;
}
/* solid colour in the exact shape of the mark, using the PNG as a mask */
.hero-logo .ghost{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:screen; opacity:0;
  -webkit-mask:url("web/brand/logo-wordmark.png") center/100% 100% no-repeat;
          mask:url("web/brand/logo-wordmark.png") center/100% 100% no-repeat;
}
.hero-logo .ghost.a{ background:var(--holo-warm); background-size:150% 100%;
  animation:logo-ghost-a 5.5s steps(1) infinite, holo-drift 11s ease-in-out infinite; }
.hero-logo .ghost.b{ background:var(--holo-cool); background-size:150% 100%;
  animation:logo-ghost-b 5.5s steps(1) infinite, holo-drift 13s ease-in-out infinite; }

/* silver plate: slices tear out and snap back */
@keyframes logo-plate{
  0%, 12%, 30%, 46%, 62%, 78%, 100%{ transform:none; clip-path:none }
  13%{ transform:translate(-9px,1px); clip-path:inset(14% 0 66% 0) }
  14.5%{ transform:translate(7px,-1px); clip-path:inset(52% 0 30% 0) }
  16%{ transform:none; clip-path:none }
  47%{ transform:translate(6px,0);    clip-path:inset(4% 0 78% 0) }
  48%{ transform:translate(-9px,2px); clip-path:inset(64% 0 14% 0) }
  49%{ transform:translate(4px,-2px); clip-path:inset(34% 0 48% 0) }
  50%{ transform:none; clip-path:none }
  79%{ transform:translate(-5px,0);   clip-path:inset(76% 0 6% 0) }
  80%{ transform:none; clip-path:none }
}
/* magenta ghost */
@keyframes logo-ghost-a{
  0%, 12%, 30%, 46%, 62%, 78%, 100%{ opacity:0; transform:none }
  13%{ opacity:.9; transform:translate(-11px,-2px) }
  14.5%{ opacity:.55; transform:translate(7px,1px) }
  16%{ opacity:0 }
  31%{ opacity:.35; transform:translate(-4px,0) }
  33%{ opacity:0 }
  47%{ opacity:.95; transform:translate(10px,2px) }
  48.5%{ opacity:.65; transform:translate(-7px,-1px) }
  50%{ opacity:0 }
  79%{ opacity:.5;  transform:translate(-6px,0) }
  81%{ opacity:0 }
}
/* cyan ghost, always opposing */
@keyframes logo-ghost-b{
  0%, 12%, 30%, 46%, 62%, 78%, 100%{ opacity:0; transform:none }
  13%{ opacity:.9; transform:translate(11px,2px) }
  14.5%{ opacity:.55; transform:translate(-7px,-1px) }
  16%{ opacity:0 }
  31%{ opacity:.35; transform:translate(4px,0) }
  33%{ opacity:0 }
  47%{ opacity:.95; transform:translate(-10px,-2px) }
  48.5%{ opacity:.65; transform:translate(7px,1px) }
  50%{ opacity:0 }
  79%{ opacity:.5;  transform:translate(6px,0) }
  81%{ opacity:0 }
}

/* ---------- SECTION SHELL ---------- */
section{ position:relative; }
.sec-inner{ position:relative; z-index:1; }
.sec-head{
  padding:clamp(58px,8vw,116px) var(--pad) clamp(20px,3vw,36px);
}
.sec-t{ min-width:0; }
.sec-t h2{ margin:0; font-size:clamp(26px,5vw,66px); }
.sec-t p{ margin:10px 0 0; max-width:64ch; font-size:12.5px; color:var(--dim); line-height:1.75; }

/* ---------- SCROLL RAIL ---------- */
/* the gutter sits on the wrap, so every gallery has a matching margin on both sides
   and the arrows have somewhere to sit outside the pictures */
.rail-wrap{ position:relative; padding:0 var(--pad); }
/* a rail whose tiles already fit needs no arrows */
.rail-wrap.fits .rail-btn{ display:none; }
.rail-wrap.fits .rail{ cursor:default; }
/* nothing left that way - take the arrow away rather than leave it dead */
.rail-wrap.at-start .rail-btn.prev,
.rail-wrap.at-end .rail-btn.next{ display:none; }
.rail{
  display:flex; gap:10px; overflow-x:auto; scroll-behavior:smooth;
  padding:0 0 10px; scrollbar-width:none; cursor:grab;
}
.rail::-webkit-scrollbar{ display:none; }
.rail.drag{ cursor:grabbing; scroll-behavior:auto; }
.rail-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:46px; height:46px; border-radius:50%;
  color:#fff; display:grid; place-items:center; font-size:16px;
  background:linear-gradient(150deg, rgba(244,244,246,.16), rgba(244,244,246,.05));
  border:1px solid rgba(244,244,246,.22);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 26px rgba(0,0,0,.5);
  transition:background .22s, border-color .22s, color .22s, box-shadow .22s, scale .25s;
}
.rail-btn:hover{
  background:var(--bone); border-color:var(--bone); color:var(--void);
  box-shadow:var(--glow-s); scale:1.06;
}
/* out in the gutter rather than over the tiles, but never off the edge of the page */
/* centred in the gutter rather than pinned to its inner edge - flush against the rail
   left the arrow sitting right on top of the last tile */
.rail-btn.prev{ left:max(4px, calc((var(--pad) - 46px) / 2)) }
.rail-btn.next{ right:max(4px, calc((var(--pad) - 46px) / 2)) }
@media(hover:none){ .rail-btn{ display:none } }

/* ---------- IMAGE TILE ---------- */
.fr{
  position:relative; flex:0 0 auto; height:clamp(320px,44vw,640px);
  overflow:hidden; background:var(--ink-2);
  border:0; cursor:pointer; padding:0;
  transition:box-shadow .25s;
}
.fr img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1); }
/* two lanes of one gallery rather than two matching rows - the lower lane runs shorter
   so the pair reads as a single field instead of a grid */
.live-rail.lane-b .fr{ height:clamp(240px,34vw,500px); }
.fr:hover{ box-shadow:var(--glow-s); }
.fr:hover img{ transform:scale(1.04); }
/* the scrim and the band name are a hover reveal - the grid stays clean at rest */
.fr::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 50%,rgba(5,5,6,.9));
  opacity:0; transition:opacity .3s;
}
.fr:hover::after{ opacity:1; }
.fr .badge{
  position:absolute; left:16px; bottom:15px; z-index:2;
  display:flex; align-items:center; gap:8px;
  opacity:0; transform:translateY(10px);
  transition:opacity .3s, transform .35s cubic-bezier(.2,.7,.3,1);
}
.fr:hover .badge{ opacity:1; transform:none; }
.fr .badge img{
  height:16px; width:auto; max-width:118px; object-fit:contain; object-position:left center;
  filter:brightness(0) invert(1); opacity:.9;
}
.fr .badge span{
  font-family:"Anton",Impact,sans-serif; font-size:clamp(16px,1.5vw,22px);
  letter-spacing:.04em; text-transform:uppercase; color:var(--bone);
  text-shadow:0 2px 18px rgba(0,0,0,.8);
}
/* ---------- INDEX STRIP ---------- */
.index-strip{ display:flex; flex-wrap:wrap; gap:6px 0; padding:24px var(--pad) 0; }
.index-strip b{
  font-weight:400; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dimmer); padding-right:14px; margin-right:14px; border-right:1px solid var(--line);
}
.index-strip b:last-child{ border-right:0 }

/* ---------- MUSIC VIDEOS (directed work, YouTube-hosted) ---------- */
.vgrid{
  display:grid; gap:clamp(18px,2.4vw,34px) clamp(14px,2vw,26px);
  padding:0 var(--pad) clamp(6px,1vw,14px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  justify-items:center;
}
.vcard{ width:100%; max-width:1060px; }
.vcard-media{
  position:relative; overflow:hidden; aspect-ratio:16/9;
  background:var(--ink-2); border:0;
  transition:box-shadow .4s;
}
/* the whole card is the link now */
.vcard-media{ display:block; cursor:pointer; }
.vcard-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .4s;
}
.vcard-media:hover img{ transform:scale(1.03); filter:brightness(.72); }
/* the play mark. It has to read as "this is a video" without pretending to be a player,
   because the click leaves the site. */
.vcard-play{
  position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:2;
  width:clamp(56px,6vw,82px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; pointer-events:none;
  color:var(--bone); background:rgba(5,5,6,.42);
  border:1px solid rgba(244,244,246,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:scale .3s cubic-bezier(.2,.7,.3,1), background .3s;
}
.vcard-play svg{ width:38%; height:38%; margin-left:8%; }
.vcard-media:hover .vcard-play{ scale:1.09; background:rgba(5,5,6,.62); }
/* says plainly where the click goes, so leaving the site is not a surprise */
.vcard-out{
  position:absolute; right:14px; bottom:13px; z-index:2; pointer-events:none;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone); background:rgba(5,5,6,.55);
  padding:6px 11px; border-radius:20px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; translate:0 6px; transition:opacity .3s, translate .3s;
}
.vcard-media:hover .vcard-out, .vcard-media:focus-visible .vcard-out{ opacity:1; translate:0 0; }
.vcard-media:hover{ box-shadow:0 24px 60px rgba(0,0,0,.65); }
.vcard-media:focus-visible{ outline:2px solid var(--holo-b); outline-offset:3px; }
/* the credit was always in the data, it just was not printed */
.vcard-credit{
  margin:12px 0 0;
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--dimmer);
}

/* ---------- VISUAL EDITS (stills, artwork only) ---------- */
/* one row, scrolled - a 3x2 grid made this section twice the height of every other one */
.edits-rail{ gap:14px; }
.ecard-view{
  display:block; flex:0 0 auto; width:clamp(240px,27vw,400px);
  padding:0; position:relative; overflow:hidden;
  aspect-ratio:4/5;                       /* every piece cropped to the same shape */
  background:var(--ink-2); cursor:pointer;
  border:0;
  transition:box-shadow .4s;
}
.ecard-view img{ width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.01); transition:transform .7s cubic-bezier(.2,.7,.3,1), filter .4s;
  filter:saturate(.9) contrast(1.02); }
.ecard-view:hover{ box-shadow:0 24px 60px rgba(0,0,0,.65); }
.ecard-view:hover img{ transform:scale(1.05); filter:saturate(1) contrast(1.04); }

/* ---------- MOTION RAIL (autoplaying loops, no captions) ---------- */
.motion-rail{ gap:14px; }
.mv{
  position:relative; flex:0 0 auto; padding:0; overflow:hidden;
  width:clamp(230px, 25vw, 380px); aspect-ratio:9/16;
  background:var(--ink-2); border:0;
  transition:box-shadow .3s, transform .5s cubic-bezier(.2,.7,.3,1);
}
.mv video{ width:100%; height:100%; object-fit:cover; display:block; }
.mv::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 70px rgba(5,5,6,.5);
}
.mv:hover{
  transform:translateY(-5px);
  box-shadow:var(--glow-s);
}

/* ---------- COVERS (record sleeves, two-row carousel) ---------- */
.covers-rail{ gap:8px; }
.covers-rail + .covers-rail{ margin-top:8px; }
.cov{
  flex:0 0 auto; display:block; padding:0;
  width:clamp(230px,30vw,440px); aspect-ratio:1/1;
  position:relative; overflow:hidden; background:var(--ink-2); cursor:pointer;
  box-shadow:0 20px 46px rgba(0,0,0,.7);
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s;
}
.cov img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .4s;
  filter:grayscale(.16) contrast(1.06); }
/* sleeve: spine on the left, gloss across the top corner */
.cov::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.15) 0 1px, rgba(0,0,0,.3) 1px 7px, transparent 7px),
    linear-gradient(135deg, rgba(255,255,255,.09) 0%, transparent 26%);
}
.cov::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  box-shadow:inset 0 0 50px rgba(0,0,0,.45);
}
.cov:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px rgba(0,0,0,.8), var(--glow-s);
}
.cov:hover img{ transform:scale(1.05); filter:none; }

/* ---------- BEFORE / AFTER CLIPS ---------- */
/* everything vertical - the portrait slider and the three clips - on one row */
/* Four across (three clips plus the portrait slider), but stretched edge to edge on a
   wide screen the row read heavier than the rails above it. Flex with a basis rather
   than 1fr columns: the tiles stop growing past --bd-tile and the row centres itself,
   so the block sits a little inside the rails with a wider gutter. */
.bd{
  --bd-tile:375px;
  --bd-gap:24px;
  /* nowrap on purpose. Four tiles at 375 plus gaps need about 1660px, so on anything
     narrower the row was breaking three-and-one and leaving a tile stranded on its own
     line. Without wrapping they shrink from the 375 basis to whatever fits and the row
     stays whole; the tiles only drop to two-up once the screen is genuinely small. */
  display:flex; flex-wrap:nowrap; justify-content:center;
  gap:var(--bd-gap); padding:0 var(--pad);
  /* the clips are not all the same aspect - stretched figures would show their own
     background as a black band under the shorter ones */
  align-items:flex-start;
}
.bd > *{ flex:0 1 var(--bd-tile); min-width:0; }
/* every cell is 9:16 so the row lines up with the portrait slider beside it - the
   clips are not all that shape (hell is 676x1280, the others 720x1280), so the odd
   one out is cropped rather than left standing taller than its neighbours */
.bd figure{
  margin:0; background:var(--ink-2); border:0;
  line-height:0; aspect-ratio:9/16; overflow:hidden;
}
.bd video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }

/* ---------- BEFORE / AFTER SLIDER ---------- */
/* the two landscape pairs, one row of their own under the vertical row */
/* the landscape pair, on the same measure and gutter as the row above so the two read
   as one block rather than two grids that happen to be stacked */
.ba-row{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--bd-gap,24px); padding:0 var(--pad);
  margin-top:46px;          /* the two rows are different shapes, so they need air */
}
/* half the row each, whatever the screen. Not a fixed basis: at 768px they wrapped
   on anything narrower than about 1600 and the comparison lost its point. */
.ba-row > *{ flex:0 0 calc(50% - (var(--bd-gap,24px) / 2)); min-width:0; }
.bd .ba{ align-self:start; }
.ba-frame{
  position:relative; aspect-ratio:var(--ba-aspect,9/16); overflow:hidden;
  background:var(--ink-2); border:0;
  touch-action:none; cursor:ew-resize; user-select:none;
}
.ba-plate{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* clip-path rather than a width, so the plate underneath never squashes as it reveals */
.ba-clip{ position:absolute; inset:0; clip-path:inset(0 50% 0 0); }
.ba-line{
  position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; z-index:3;
  box-shadow:0 0 14px rgba(0,0,0,.7); pointer-events:none;
}
/* the corner labels say what the two halves are, so the frame reads as a comparison
   before anyone touches it */
.ba-tag{
  position:absolute; bottom:12px; z-index:4; pointer-events:none;
  padding:4px 9px; border-radius:20px;
  font-size:8.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.92); background:rgba(5,5,6,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:opacity .3s;
}
.ba-tag--b{ left:12px; }
.ba-tag--a{ right:12px; }
/* the breakdown clips split top and bottom rather than left and right */
.bd figure{ position:relative; }
.ba-tag--top{ top:12px; bottom:auto; left:50%; translate:-50% 0; }
.ba-tag--bot{ bottom:12px; left:50%; translate:-50% 0; }
/* the handle breathes until the frame has actually been used */
.ba-frame:not(.used) .ba-grip{ animation:bapulse 2.8s ease-in-out infinite; }
@keyframes bapulse{
  0%,100%{ scale:1 }
  50%{ scale:1.1 }
}
/* the capsule with an arrow out of each side - the shape everyone already reads as a
   wipe handle. One svg, so the arrows cannot drift out of line with the body. */
/* the colour and the tapered ends sit on a pseudo-element, NOT on .ba-line itself - a
   clip-path clips every descendant, and the handle inside this 2px line is 59px wide, so
   putting the taper on the parent all but erased it */
.ba-line::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--line-accent-v); clip-path:var(--line-taper-v);
}
/* the same glass button as the rail arrows, so every control on the page reads the same
   way - round, blurred, one hairline border */
.ba-grip{
  position:absolute; top:50%; left:50%; translate:-50% -50%; z-index:2;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg, rgba(244,244,246,.18), rgba(244,244,246,.06));
  border:1px solid rgba(244,244,246,.26);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 26px rgba(0,0,0,.5);
  transition:background .22s, border-color .22s, scale .25s;
}
.ba-grip svg{ width:20px; height:20px; display:block; }
.ba-frame.hovering .ba-grip{
  background:linear-gradient(150deg, rgba(244,244,246,.30), rgba(244,244,246,.12));
  border-color:rgba(244,244,246,.45);
}
.ba-frame.hovering .ba-grip{ scale:1.08; }
/* the range is the real control - invisible, but it carries focus and arrow keys */
.ba-range{
  position:absolute; inset:0; width:100%; height:100%; z-index:4;
  margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none;
  background:transparent;
}
.ba-range:focus-visible + .ba-line,
.ba-frame:has(.ba-range:focus-visible) .ba-line{ box-shadow:0 0 0 2px var(--holo-b); }

/* ---------- BTS RAIL (two rows, mixed orientations) ---------- */
.bts-rail{ gap:10px; }
.bts-rail + .bts-rail{ margin-top:10px; }
.btsf{
  position:relative; flex:0 0 auto; height:clamp(260px,32vw,480px);
  overflow:hidden; background:var(--ink-2); padding:0; cursor:pointer;
  border:0;
  transition:box-shadow .25s;
}
/* fixed height, native width - nothing is cropped and the row still lines up */
.btsf img,.btsf video{
  height:100%; width:auto; display:block; max-width:none;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.btsf:hover{ box-shadow:var(--glow-s); }
.btsf:hover img,.btsf:hover video{ transform:scale(1.04); }

/* ---------- WHO WE ARE ---------- */
/* Two wide slides stacked, each a glass panel with the cut-out standing in front of it
   at one end and rising above the top edge - the figure is not inside the card. */
/* the figures start 90px off to the sides before the reveal fires, and a transform still
   counts toward the page's scrollable area - clip stops that becoming a horizontal
   scrollbar on load. clip rather than hidden: it makes no scroll container, so the
   sticky nav is unaffected. */
#who{ overflow-x:clip; padding-bottom:clamp(96px,11vw,164px); }
.who{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end;
  gap:clamp(14px,1.8vw,30px);
  /* the gutter only has to clear the figures' outboard overhang (-4% each side) or they
     run off the page; anything more just shortens the tickets. Top clears the figures
     rising above them. The gap below the section now sits under the pitch strip. */
  padding:clamp(46px,5.5vw,86px) clamp(26px,2.6vw,46px) clamp(64px,7vw,100px);
}
/* side by side, each taking about half the row. The basis has to be well under half the
   row: with flex-wrap on, a basis wider than the line wraps rather than shrinking, so a
   660px basis dropped the pair into a column. Grow fills the row up to the cap. */
.pcard{ position:relative; flex:1 1 420px; max-width:760px; }

/* the figure: bottom-aligned to the panel, taller than it, so it stands proud */
.pcard-figure{
  /* taller than the panel so it stands proud of the top edge; the rise has to stay
     under the row gap above, or it covers the card in front of it */
  /* the card is only ~520 wide now, so a figure tall enough to stand proud is also
     wide enough to bury the text. It hangs off the outer edge instead, which is the
     look anyway - the person stands beside the slide, not on it. */
  position:absolute; bottom:0; height:114%; z-index:3; pointer-events:none;
  /* slides in from the side it stands on; --enter is 1 before the card is revealed */
  transform:translateX(calc(var(--enter, 1) * var(--from, 0px)));
  transition:transform 1s cubic-bezier(.2,.7,.3,1) .05s;
}
.pcard--right .pcard-figure{ --from:90px; }
.pcard--left  .pcard-figure{ --from:-90px; }
.pcard.in .pcard-figure{ --enter:0; }
.pcard--right .pcard-figure{ right:8%; }   /* sits further in than Gina on purpose */
.pcard--left  .pcard-figure{ left:3%; }
.pcard-cut{
  /* no vertical drift here: it lifted the figure off the card's bottom edge, and the
     two are meant to line up. The slide-in on .pcard-figure is the animation. */
  position:static; height:100%; width:auto; max-width:none; display:block;
}
.pcard-figure::after{                     /* a little ground so the figure is not floating */
  content:""; position:absolute; inset:auto 0 0 0; height:16%; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(5,5,6,.35));
}

/* ---- the panel: an event ticket ---- */
.pcard-glass{
  --notch:13px;                            /* the punched holes at the tear line */
  --stubh:58px;                            /* the tear-off strip along the bottom */
  --cut:22px;                              /* the chamfer taken off every corner */
  position:relative; z-index:2;
  padding:22px 26px calc(20px + var(--stubh));
  opacity:var(--enter-o, 0); transform:translateY(var(--enter-y, 26px));
  transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.3,1);
  /* scanlines over a near-solid plate - no blur, nothing frosted */
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.030) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(10,10,13,.93), rgba(6,6,8,.86));
  /* cut corners: square reads as a box, notched reads as a display panel. All four
     are cut by the same amount - two cut and two square read as a mistake. */
  clip-path:polygon(
    var(--cut) 0,                  calc(100% - var(--cut)) 0,
    100% var(--cut),               100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,  var(--cut) 100%,
    0 calc(100% - var(--cut)),     0 var(--cut));
  /* the two holes a ticket is torn from. A mask actually removes them, so the section
     behind shows through - a matching-coloured circle would not, the backdrop moves. */
  -webkit-mask-image:
    radial-gradient(circle var(--notch) at 0 calc(100% - var(--stubh)), transparent 99%, #000 100%),
    radial-gradient(circle var(--notch) at 100% calc(100% - var(--stubh)), transparent 99%, #000 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    radial-gradient(circle var(--notch) at 0 calc(100% - var(--stubh)), transparent 99%, #000 100%),
    radial-gradient(circle var(--notch) at 100% calc(100% - var(--stubh)), transparent 99%, #000 100%);
  mask-composite:intersect;
}
/* ---- the stub ---- */
.tstub{
  position:absolute; left:0; right:0; bottom:0; height:var(--stubh); z-index:4;
  display:flex; align-items:center; gap:14px; padding:0 26px;
  border-top:2px dashed rgba(244,244,246,.30);
}
.pcard--left  .tstub{ justify-content:flex-end; }   /* sit under the text, not the figure */
.pcard--right .tstub{ justify-content:flex-start; }
/* the whole stub group has to stay narrow enough to sit clear of the figure standing
   at the other end of the ticket, so the barcode is short and the label is two words */
.tstub-code{                              /* a barcode, drawn rather than an image */
  width:84px; height:28px; flex:0 0 auto; opacity:.8;
  background:repeating-linear-gradient(90deg,
    var(--bone) 0 2px, transparent 2px 4px,
    var(--bone) 4px 5px, transparent 5px 9px,
    var(--bone) 9px 12px, transparent 12px 14px,
    var(--bone) 14px 15px, transparent 15px 19px);
}
.tstub-txt{
  display:flex; align-items:baseline; gap:8px;
  font-size:8px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(244,244,246,.42); white-space:nowrap;
}
/* GA reads as General Admission on a ticket and as Gina + Andy here */
.tstub-txt b{
  font-family:"Anton",Impact,sans-serif; font-weight:400;
  font-size:17px; letter-spacing:.06em; color:rgba(244,244,246,.86);
}
.pcard-glass::before{                     /* a plain band along the top edge */
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:rgba(244,244,246,.34); pointer-events:none;
}
.pcard-glass::after{                      /* and a hairline down the outer edge */
  content:""; position:absolute; top:0; bottom:0; width:1px; pointer-events:none;
  background:rgba(244,244,246,.18);
}
.pcard--right .pcard-glass::after{ left:0; }
.pcard--left  .pcard-glass::after{ right:0; }
/* keep the text clear of whichever end the figure stands at */
/* the reserve has to clear the figure's inner edge, which grows with its height */
.pcard--right .pcard-glass{ padding-right:56%; text-align:left; }
.pcard--left  .pcard-glass{ padding-left:56%;  text-align:right; }
.pcard.in .pcard-glass{ --enter-o:1; --enter-y:0px; }
.pcard:hover .pcard-glass::before{ background:rgba(244,244,246,.6); }

.pcard-glass h3{
  margin:0; font-family:"Anton",Impact,sans-serif; font-weight:400;
  font-size:clamp(19px,2.2vw,30px); letter-spacing:.03em; text-transform:uppercase;
  color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.6); line-height:1.05;
}
/* one per row, tightly led. Two columns halved the height but split every two-word
   role across lines, because the text column is only ~40% of an already narrow card. */
.pcard-role{
  margin:11px 0 0;
  font-size:clamp(9.5px,.95vw,11px); letter-spacing:.13em; text-transform:uppercase;
  color:rgba(244,244,246,.72); line-height:1.75;
  min-height:calc(6 * 1.75em);              /* must track the line-height above */
}
.pcard-role span{ display:block; white-space:nowrap; }

.pcard-links{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px 0 0;
  /* both rows are icons of the same width now, so nothing needs reserving */
  min-height:34px;
}
.pcard--left .pcard-links{ justify-content:flex-end; }
.iglink{
  display:inline-flex; align-items:center; gap:0;
  height:34px; padding:0 9px; border-radius:20px;
  border:1px solid rgba(244,244,246,.26); background:rgba(5,5,6,.3);
  color:rgba(244,244,246,.86);
  transition:color .2s, border-color .2s, background .2s, gap .3s cubic-bezier(.2,.7,.3,1);
}
.iglink .ic{ width:16px; height:16px; flex:0 0 auto; }
/* the handle is the subline - it slides out from behind the glyph on hover rather than
   sitting in the row taking up space */
.iglink .hdl{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  transition:max-width .35s cubic-bezier(.2,.7,.3,1);
}
.iglink:hover, .iglink:focus-visible{
  gap:7px; color:var(--void); background:var(--bone); border-color:var(--bone);
}
.iglink:hover .hdl, .iglink:focus-visible .hdl{ max-width:180px; }
/* IMDb in IMDb's own colours */
.imdblink{
  display:inline-flex; align-items:center; height:34px;
  background:none; border:0;                 /* never inherit the pill treatment */
}
.imdb-mark{
  display:block; padding:6px 8px 5px; border-radius:5px;
  background:#f5c518; color:#000;
  font-family:"Anton",Impact,sans-serif; font-size:13px; letter-spacing:.01em; line-height:1;
  transition:background .2s;
}
.imdblink:hover .imdb-mark,
.imdblink:focus-visible .imdb-mark{
  background:#ffd21f; box-shadow:0 0 0 3px rgba(245,197,24,.28);
}

.pcard-site{
  display:inline-block;
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  border-radius:20px; padding:7px 12px;
  border:1px solid rgba(244,244,246,.26); background:rgba(5,5,6,.3);
  color:rgba(244,244,246,.86);
  transition:color .2s, border-color .2s, background .2s;
}
.pcard-site:hover{ color:var(--void); background:var(--bone); border-color:var(--bone); }
.pcard-site{
  display:block; width:max-content; margin:9px 0 0;
  color:#fff; border-color:rgba(244,244,246,.5);
}
.pcard--left .pcard-site{ margin-left:auto; }

/* ---------- WHO WE ARE: the commercial studio ---------- */
.who-pitch{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:16px 28px; text-align:center;
  width:min(100%,780px); margin:0 auto;
  position:relative; padding:22px 26px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.030) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(10,10,13,.90), rgba(6,6,8,.84));
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px,
                    100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.who-pitch::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, rgba(201,206,216,.15), rgba(201,206,216,.75),
                                     rgba(201,206,216,.15));
  pointer-events:none;
}
.who-pitch p{
  margin:0; flex:1 1 340px; min-width:0; text-align:left;
  font-size:13px; letter-spacing:.05em; line-height:1.8; color:rgba(244,244,246,.9);
}
/* the second sentence is the detail, so it steps back from the question */
.who-pitch p span{
  display:block; margin-top:6px;
  font-size:11.5px; line-height:1.85; color:rgba(244,244,246,.6);
}
.pitch-link{
  flex:0 0 auto; white-space:nowrap;
  display:inline-flex; align-items:center; gap:9px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  border:1px solid rgba(244,244,246,.5); border-radius:20px; padding:9px 16px;
  background:rgba(5,5,6,.3);
  transition:color .2s, border-color .2s, background .2s;
}
.pitch-link img{ width:22px; height:22px; object-fit:contain; flex:0 0 auto; }
.pitch-link:hover{ color:var(--void); background:var(--bone); border-color:var(--bone); }
/* the mark is a light brush ring, so it has to flip dark when the pill fills */
.pitch-link:hover img{ filter:invert(1); }
/* ---------- WHO WE ARE ON A PHONE ----------
   See the note above .pcard-figure: the figure is sized off the card's height, the text
   reserves a percentage of its width, and below roughly 700px those two stop agreeing.
   Here the figure is sized by width and the reserve is set to match it. */
@media (max-width:700px){
  .pcard-figure{ height:auto; width:46%; bottom:0; }
  .pcard-cut{ height:auto; width:100%; }
  /* --from has to be cleared at this specificity or `.pcard--left .pcard-figure` above
     keeps its -90px slide-in and hangs the figure off the edge of the card. Same trap
     the phone mock-up hit: a media query does not outrank a longer selector. */
  .pcard--right .pcard-figure{ right:0; --from:0px; }
  .pcard--left  .pcard-figure{ left:0;  --from:0px; }
  .pcard--right .pcard-glass{ padding-right:50%; }
  .pcard--left  .pcard-glass{ padding-left:50%; }
  /* the name has about 165px to live in now, so it stops trying to be a headline */
  .pcard-glass h3{ font-size:clamp(17px,5vw,24px); line-height:1.05; }
  .pcard-role{ font-size:8.5px; letter-spacing:.12em; }
  .pcard-role span{ white-space:normal; }
  /* the stub sits under the figure at this width, so it gets its own line */
  .tstub{ padding:0 14px; gap:8px; }
  .tstub-code{ width:56px; }
}

@media (max-width:620px){
  .who-pitch p{ text-align:center; flex-basis:100%; }
}

/* ---------- CONTACT ---------- */
/* The last thing on the page and the one asking for something, so it gets room rather
   than being squeezed between BTS and the footer. */
#contact{ padding-bottom:clamp(80px,10vw,150px); }
/* one centred column */
.contact{
  padding:clamp(80px,11vw,170px) var(--pad) 0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(28px,3.4vw,46px);
}
.contact-lead{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.contact-lead h3{
  margin:0; font-size:clamp(38px,8vw,96px);
  text-shadow:0 0 50px rgba(210,222,238,.2);
}
.contact-btn{
  display:inline-block; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  background:var(--bone); color:var(--void); border:1px solid var(--bone);
  border-radius:26px; padding:15px 30px; transition:.22s; box-shadow:var(--glow-s);
  /* the one thing on the page we want people to press, so it breathes. Animating the
     shadow only - no transform - so it never nudges the text under it, and the pulse
     stops on hover where the button already has its own state to show. */
  animation:btnglow 3.2s ease-in-out infinite;
}
@keyframes btnglow{
  0%,100%{ box-shadow:0 0 22px rgba(210,222,238,.22) }
  50%    { box-shadow:0 0 46px rgba(210,222,238,.55) }
}
.contact-btn:hover, .contact-btn:focus-visible{ animation:none; }
/* somebody who has asked for less movement should not get a throbbing button */
@media (prefers-reduced-motion:reduce){
  .contact-btn{ animation:none; }
}
.contact-btn:hover{ background:transparent; color:var(--bone); box-shadow:none; }
.contact-mail{
  font-size:clamp(13px,1.5vw,17px); letter-spacing:.06em; color:var(--silver);
  border-bottom:1px solid var(--line); transition:color .2s, border-color .2s;
  /* a one-line link is about 24px tall, which is the bare WCAG minimum and awkward with
     a thumb. The padding takes both contact links past 44 without moving the rule. */
  display:inline-block; padding:10px 4px 7px;
}
/* the studio handle, sitting under the address. Same underline as the email so the two
   read as one pair rather than a link and a button. */
.contact-ig{
  display:inline-flex; align-items:center; gap:9px;
  font-size:clamp(12px,1.3vw,15px); letter-spacing:.06em; color:var(--silver);
  border-bottom:1px solid var(--line); padding:10px 4px 7px;
  transition:color .2s, border-color .2s;
}
.contact-ig svg{ width:17px; height:17px; flex:0 0 auto; }
.contact-ig:hover, .contact-ig:focus-visible{ color:var(--bone); border-color:var(--bone); }
.contact-mail:hover{ color:var(--bone); border-color:var(--bone); }
.contact-note{
  margin:0; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--dimmer);
}

/* ---------- BACK TO TOP ---------- */
#totop{
  position:fixed; right:clamp(14px,2vw,26px); bottom:clamp(14px,2vw,26px); z-index:8500;
  width:46px; height:46px; border-radius:50%; padding:0; cursor:pointer;
  font-size:17px; line-height:1; color:var(--silver);
  border:1px solid var(--line-2); background:rgba(5,5,6,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s, transform .35s cubic-bezier(.2,.7,.3,1),
             visibility .3s, background .22s, color .22s, border-color .22s;
}
#totop.on{ opacity:1; visibility:visible; transform:none; }
#totop:hover{ color:var(--void); background:var(--bone); border-color:var(--bone);
  box-shadow:var(--glow-s); }
#totop:focus-visible{ outline:2px solid var(--holo-b); outline-offset:3px; }

/* ---------- FOOTER ---------- */
footer{ border-top:1px solid var(--line); padding:36px var(--pad) 44px; }
/* three tracks so the copyright sits dead centre of the page, not centred between the
   logo and the links */
.foot{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px 40px;
}
.foot-copy{ grid-column:2; text-align:center; }
.foot-links{ grid-column:3; justify-self:end; }
.fb-logo{ height:46px; width:auto; opacity:.92; }
.foot-links{ display:flex; gap:22px; }
.foot a,.foot span{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.foot a{ border-bottom:1px solid transparent; padding-bottom:2px; transition:color .2s, border-color .2s; }
.foot a:hover{ color:var(--bone); border-bottom-color:var(--line-2); }

/* ---------- PROJECT BRIEF ---------- */
#brief{ position:fixed; inset:0; z-index:9998; display:flex; align-items:center;
  justify-content:center; padding:clamp(12px,3vw,40px); }
#brief[hidden]{ display:none; }
.brief-back{ position:absolute; inset:0; background:rgba(4,4,5,.86);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.brief-panel{
  position:relative; z-index:1; width:min(100%,720px); max-height:92vh; overflow:auto;
  padding:clamp(26px,3.4vw,44px);
  /* the same glitch plate as the Who We Are tickets, so it reads as part of the site */
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.030) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(14,14,18,.98), rgba(7,7,9,.97));
  border:1px solid var(--line);
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px,
                    100% 100%, 22px 100%, 0 calc(100% - 22px));
  animation:briefin .35s cubic-bezier(.2,.7,.3,1);
}
@keyframes briefin{ from{ opacity:0; transform:translateY(14px) } }
.brief-x{
  position:absolute; top:10px; right:14px; z-index:2;
  background:none; border:0; cursor:pointer; padding:6px 10px;
  font-size:26px; line-height:1; color:var(--dim);
}
.brief-x:hover{ color:var(--bone); }
.brief-panel h3{ margin:0; font-size:clamp(24px,3.4vw,38px); }
.brief-sub{ margin:10px 0 0; font-size:12px; letter-spacing:.05em; line-height:1.8; color:var(--dim); }
.brief-form{
  display:grid; grid-template-columns:1fr 1fr; gap:16px 20px;
  margin-top:clamp(20px,2.4vw,30px);
}
.brief-form label{
  display:flex; flex-direction:column; gap:7px; min-width:0;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}
.brief-form label.wide,.brief-actions{ grid-column:1 / -1; }
.brief-form input,.brief-form select,.brief-form textarea{
  width:100%; box-sizing:border-box; padding:11px 13px;
  font-family:"Space Mono",ui-monospace,monospace; font-size:13px; letter-spacing:.03em;
  color:var(--bone); background:rgba(5,5,6,.55);
  border:1px solid var(--line-2); border-radius:0; outline:none;
  transition:border-color .2s, background .2s;
}
.brief-form textarea{ resize:vertical; line-height:1.7; }
.brief-form select{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
                   linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  padding-right:34px;
}
.brief-form option{ background:#0b0b0d; color:var(--bone); }
.brief-form input:focus,.brief-form select:focus,.brief-form textarea:focus{
  border-color:var(--bone); background:rgba(5,5,6,.8);
}
.brief-form .bad{ border-color:var(--holo-a); }
.brief-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:4px; }
.brief-actions .contact-btn{ cursor:pointer; font-family:inherit; }
.brief-note{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dimmer); }
/* .brief-form sets display:grid, which beats the browser's own [hidden] rule - without
   this the form stays on screen behind the sent state */
.brief-form[hidden]{ display:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.brief-err{
  grid-column:1 / -1; margin:0;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--holo-a);
}
/* once it is sent, the ask above it is just noise */
.brief-panel.sent > h3,
.brief-panel.sent > .brief-sub{ display:none; }
.brief-done{ padding:0; }
.brief-done h3{ margin:0; font-size:clamp(24px,3.4vw,38px); }
.brief-done p{
  margin:12px 0 clamp(20px,2.4vw,28px);
  font-size:13px; line-height:1.9; color:var(--dim);
}
@media (max-width:620px){
  .brief-form{ grid-template-columns:1fr; }
  /* three tracks will not fit - stack and centre the lot */
  .foot{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:14px; }
  .foot-copy,.foot-links{ grid-column:1; justify-self:center; }
}

/* ---------- LIGHTBOX ---------- */
#lb{
  position:fixed; inset:0; z-index:9999; background:rgba(4,4,5,.97);
  display:none; align-items:center; justify-content:center; padding:12px;
  backdrop-filter:blur(8px);
}
/* if a piece is taller than the screen, the stage scrolls rather than cropping it */
#lb .stage{
  max-width:100%; max-height:96vh; overflow:auto;
  display:flex; align-items:center; justify-content:center;
  scrollbar-width:none;
}
#lb .stage::-webkit-scrollbar{ display:none; }
#lb.on{ display:flex; }
#lb .yt{ width:min(96vw,1600px); aspect-ratio:16/9; max-height:88vh; border:0;
  background:#000; box-shadow:0 30px 90px rgba(0,0,0,.8); }
#lb video,#lb img{ max-width:96vw; max-height:92vh; width:auto; height:auto;
  border:0; display:block; }
/* only shown when the open item has neighbours to move to */
#lb .lb-nav{
  position:absolute; top:50%; translate:0 -50%; z-index:6;
  width:52px; height:52px; border-radius:50%; display:none; place-items:center;
  font-size:18px; color:#fff; cursor:pointer;
  background:linear-gradient(150deg, rgba(244,244,246,.16), rgba(244,244,246,.05));
  border:1px solid rgba(244,244,246,.22);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 26px rgba(0,0,0,.5);
  transition:background .22s, color .22s, border-color .22s, scale .25s;
}
#lb.multi .lb-nav{ display:grid; }
#lb .lb-nav:hover{ background:var(--bone); color:var(--void); border-color:var(--bone); scale:1.06; }
#lb .lb-nav.prev{ left:clamp(10px,2vw,28px); }
#lb .lb-nav.next{ right:clamp(10px,2vw,28px); }
#lb .close{
  position:absolute; top:16px; right:20px; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dim); border:1px solid var(--line-2); padding:9px 16px;
}
#lb .close:hover{ color:var(--void); border-color:var(--bone); background:var(--bone); }
#lb .cap{
  position:absolute; left:0; right:0; bottom:18px; text-align:center;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim);
}
/* Covers, Image and Video open without a label. Stated explicitly because this file
   has twice had a positioned element ignore [hidden] once a display was set on it. */
#lb .cap[hidden]{ display:none; }

/* ---------- PRINT ----------
   Print and "save as PDF" are the one capture route a page can actually refuse, so it
   does: the work does not print. Nothing else here can stop a screenshot - see the
   note in glitched.js. */
@media print{
  img, video, iframe, .bgv, .phones-bg, #lb{ display:none !important; }
  body::after{
    content:"GLiTCHED ViSUALS 4 images and video are not available in print. "
            "glitchedvisuals.com";
    display:block; padding:40px; font:14px/1.8 monospace; color:#000;
  }
}

/* ---------- REVEAL ---------- */
.rv{ opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.rv.in{ opacity:1; transform:none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  .bd{ flex-wrap:wrap; --bd-tile:calc(50% - var(--bd-gap,24px)) }
  /* the comparisons stay paired - only the gutter gives way */
  .ba-row{ --bd-gap:10px; }
}
@media (max-width:1400px){
  .nav-links a{ font-size:12.5px; letter-spacing:.16em }
  .nav-links li + li::before{ padding:0 clamp(7px,1vw,14px) }
}
@media (max-width:1160px){
  .nav-links a{ font-size:11px; letter-spacing:.12em }
  .nav-links li + li::before{ padding:0 8px; font-size:13px }
  .nav-cta{ font-size:10.5px; padding:9px 15px }
}
@media (max-width:900px){
  .who{ grid-template-columns:1fr }
  .nav-links,.nav-cta{ display:none }
  #nav{ grid-template-columns:1fr auto }
  .ham{ grid-column:2; justify-self:end }
  .ham{ display:flex }
  .hero{ min-height:56vh; min-height:56dvh }
  .fr{ height:clamp(300px,82vw,460px) }
  .who{ grid-template-columns:1fr }
}
@media (max-width:560px){
  .sec-head{ flex-direction:column; align-items:flex-start; gap:10px }
  .cov{ width:clamp(210px,64vw,320px) }
  .mv{ width:clamp(190px,62vw,260px) }
  .hero{ padding-bottom:26px }
  .hero h1{ margin-bottom:14px }
  .bd{ --bd-tile:100% }
  .contact-btn{ padding:13px 22px; font-size:10.5px }
}
@media (prefers-reduced-motion:reduce){
  .pcard-figure,.pcard-glass{ transition:none !important; transform:none !important }
  .pcard-glass{ opacity:1 !important }
  *{ animation:none !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
}

/* ---------- LEGAL PAGES (privacy.html / terms.html) ---------- */
.legal-nav{
  position:sticky; top:0; z-index:9000;
  display:flex; align-items:center; height:68px; padding:0 var(--pad);
  background:rgba(5,5,6,.86); border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
}
.legal-back{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim);
  transition:color .2s;
}
.legal-back:hover{ color:var(--bone); }
.legal{
  width:min(100%,780px); margin:0 auto;
  padding:clamp(48px,7vw,96px) var(--pad) clamp(72px,9vw,128px);
}
.legal h1{ margin:0; font-size:clamp(32px,6vw,66px); }
.legal-date{
  margin:14px 0 0; font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dimmer);
}
.legal-lead{
  margin:clamp(26px,3vw,40px) 0 0; padding:20px 24px;
  font-size:14px; line-height:1.9; color:var(--silver);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.030) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(12,12,15,.9), rgba(7,7,9,.85));
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px,
                    100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.legal h2{
  margin:clamp(38px,4.4vw,58px) 0 0;
  font-family:"Anton",Impact,sans-serif; font-weight:400;
  font-size:clamp(15px,1.7vw,19px); letter-spacing:.06em; text-transform:uppercase;
  color:var(--bone);
}
.legal p{ margin:14px 0 0; font-size:13px; line-height:1.95; color:rgba(244,244,246,.74); }
.legal ul{ margin:14px 0 0; padding-left:0; list-style:none; }
.legal li{
  position:relative; margin-top:12px; padding-left:20px;
  font-size:13px; line-height:1.95; color:rgba(244,244,246,.74);
}
.legal li::before{
  content:""; position:absolute; left:0; top:.82em; width:8px; height:1px;
  background:var(--dimmer);
}
.legal b{ color:var(--bone); font-weight:400; }
.legal .mono{ color:var(--silver); }
.legal a{ color:var(--bone); border-bottom:1px solid var(--line-2); transition:border-color .2s; }
.legal a:hover{ border-bottom-color:var(--bone); }
.legal-foot{
  margin-top:clamp(46px,5vw,70px); padding-top:22px; border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.1em;
}

/* ---------- GROUP HEADERS ---------- */
/* Artists / Bands and Visuals are names for a run of sections rather than sections in
   their own right, so they get a banner and the sections under them step down a level. */
.grouphead{
  position:relative; z-index:1;
  padding:clamp(72px,9vw,132px) var(--pad) clamp(6px,1vw,14px);
}
/* a group title is a divider, not a section: it carries an accent bar above it and a rule
   below, so its rank reads even against a section heading of a similar size */
.grouphead::before{
  content:""; display:block; width:72px; height:3px;
  margin-bottom:clamp(16px,1.8vw,24px);
  background:var(--line-accent); clip-path:var(--line-taper);
}
.grouphead h2{
  margin:0; font-size:clamp(34px,7.4vw,104px); line-height:.92; letter-spacing:.01em;
}
.grouphead p{
  margin:12px 0 0; max-width:52ch;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--dimmer);
}
.grouphead::after{                        /* a rule under the group name */
  content:""; display:block; margin-top:clamp(18px,2.2vw,30px); height:1px;
  background:linear-gradient(90deg, var(--line-2), transparent 65%);
}
/* a sub-group inside a group: Shot on iPhone over Live / Fans / Reels. Smaller bar and
   smaller type than a top-level group, but the same bar-above-rule-below furniture, so it
   reads as a divider rather than a section. */
.grouphead.sub{ padding-top:clamp(48px,6vw,86px); }
.grouphead.sub::before{ width:46px; margin-bottom:clamp(12px,1.4vw,18px); }
.grouphead.sub h2{ font-size:clamp(24px,3.9vw,62px); }
.grouphead.sub::after{ margin-top:clamp(14px,1.7vw,22px); }
.grouphead.sub p{ font-size:10px; }
/* the sub-group's sections step in, so it is obvious where it ends and Covers begins.
   Overriding --pad moves the heading and the rail together, and the rail arrows with
   them, since every one of those is positioned off it. */
.grouphead.sub,
section.in-iphone{ --pad:calc(clamp(24px, 5.5vw, 96px) + clamp(16px,2vw,34px)); }

/* a sub-group's bar is shorter and thinner than a group's, nothing else differs */
.grouphead.sub::before{ height:2px; }

/* a section inside a group is a sub-heading, not a headline */
section.grouped .sec-head{
  padding-top:clamp(34px,4.4vw,62px);
}
section.grouped .sec-t h2{
  font-size:clamp(21px,3.4vw,44px);
}
section.grouped .sec-t p{ max-width:60ch; }
@media (max-width:760px){
  .grouphead{ padding-top:clamp(56px,11vw,92px); }
}

/* ---------- THE PHONE ----------
   Shot on iPhone and Reels are shown on a phone rather than in a rail: a camera app
   holding the roll, and Instagram Reels holding the clips. The device is drawn in CSS -
   no image - so it stays sharp and weighs nothing. */
.phone-wrap{
  display:flex; justify-content:center;
  padding:clamp(8px,1.4vw,20px) var(--pad) clamp(10px,1.6vw,24px);
}
/* ---- the collage ----
   Two phones in a 1425px band left 47% of the section empty, which is why it read as a
   hole in the page. Every frame off the phone now tiles the whole width behind them at
   one size, with the middle masked out so the devices keep clean ground. It is pure
   texture: aria-hidden, pointer-events:none, and it goes below 1100px where there is no
   room. To take it out, delete .phones-bg from the template - nothing else needs it. */
.phones-bg{
  position:absolute; inset:-70px 0; z-index:0; overflow:hidden; pointer-events:none;
  opacity:.26;
  /* columns, not a grid: every frame keeps its own ratio instead of being cropped into a
     common cell, which is what made the first version read as a contact sheet */
  display:flex; align-items:flex-start; gap:0;
  /* clear a lane down the middle for the phones, and soften the top and bottom edges */
  -webkit-mask-image:
    linear-gradient(90deg, #000 0 26%, transparent 40%, transparent 60%, #000 74% 100%),
    linear-gradient(180deg, transparent, #000 12% 88%, transparent);
  mask-image:
    linear-gradient(90deg, #000 0 26%, transparent 40%, transparent 60%, #000 74% 100%),
    linear-gradient(180deg, transparent, #000 12% 88%, transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.pbg-col{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; gap:0;
  /* the columns lap over each other; the first one can hang off the edge, it is masked */
  margin-left:-20px;
}
/* each column starts at a different height, so the tops do not line up in a row */
.pbg-col:nth-child(2){ margin-top:-120px; }
.pbg-col:nth-child(3){ margin-top:-46px; }
.pbg-col:nth-child(4){ margin-top:-170px; }
.pbg-col:nth-child(5){ margin-top:-70px; }
.pbg-col:nth-child(6){ margin-top:-140px; }
.pbg-col:nth-child(7){ margin-top:-30px; }
.phones-bg img{
  width:100%; height:auto; display:block;      /* original ratio, never cropped */
  /* frames lap vertically too, so no ground shows through between them. It has to beat
     the corner lift from the rotation below - about 8px on a tile this wide - or thin
     black wedges open up at the tilts. */
  margin-bottom:-18px;
  box-shadow:0 4px 14px rgba(0,0,0,.6);
}
/* a little tilt so it reads as a collage rather than a stack of columns */
.phones-bg img:nth-child(4n+1){ rotate:-1.4deg; }
.phones-bg img:nth-child(4n+2){ rotate:1deg; }
.phones-bg img:nth-child(4n+3){ rotate:1.7deg; }
.phones-bg img:nth-child(4n+4){ rotate:-0.8deg; }
@media (max-width:1100px){ .phones-bg{ display:none; } }

/* the two phones stand together: one running the camera, one running Reels */
.phones{
  /* one number for the device: the frame and the column that holds it both read it, so
     a breakpoint only has to change this and the two can never disagree */
  --phone-w:clamp(228px, 22vw, 318px);
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; justify-content:center;
  align-items:flex-start; gap:clamp(34px,8vw,150px);
  padding:clamp(26px,3vw,44px) var(--pad) clamp(20px,2.6vw,38px);
}
.phone-col{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(14px,1.8vw,22px);
  /* the column is the device width, so the two match whatever the caption says */
  width:var(--phone-w);
}
.phone-cap{ text-align:center; width:100%; }   /* the title only - no strapline */
.phone-cap h3{
  margin:0; font-family:"Anton",Impact,sans-serif; font-weight:400;
  font-size:clamp(18px,2.2vw,30px); letter-spacing:.04em; text-transform:uppercase;
  color:var(--bone);
}

/* side by side there is half the room, so the devices come down a size */
.phones .phone-frame{ width:var(--phone-w); }
.phones .phone-wrap{ padding:0; }
.phone{ display:flex; flex-direction:column; align-items:center; gap:clamp(14px,1.8vw,24px); }
.phone-frame{
  position:relative;
  width:clamp(260px, 30vw, 360px); aspect-ratio:9/19.5;
  padding:10px; border-radius:clamp(34px,3.6vw,48px);
  background:linear-gradient(160deg,#3a3c42,#101114 34%,#08080a 62%,#33353b);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 0 0 5px #0a0a0c,
    0 40px 90px rgba(0,0,0,.75),
    0 0 60px rgba(47,139,240,.10);
}
.phone-screen{
  /* The screen holds a scroll container (.cam-roll / .ig-feed, both with
     scroll-snap-type), which Chrome promotes to its own compositor layer - and a
     composited child is not reliably clipped by a parent's border-radius, so the corners
     intermittently rendered square. clip-path DOES clip composited descendants, so it is
     the one that actually holds. Both are kept: border-radius for the paint, clip-path
     for the clip. --screen-r keeps them from drifting apart. */
  --screen-r:clamp(26px,2.8vw,38px);
  position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:var(--screen-r); background:#000;
  -webkit-clip-path:inset(0 round var(--screen-r));
  clip-path:inset(0 round var(--screen-r));
  display:flex; flex-direction:column;
}
.phone-island{
  position:absolute; top:18px; left:50%; translate:-50% 0; z-index:6;
  width:31%; height:20px; border-radius:12px; background:#000;
}
.phone-bar{                               /* the home indicator */
  position:absolute; left:50%; bottom:22px; translate:-50% 0; z-index:6;
  width:33%; height:4px; border-radius:3px; background:rgba(255,255,255,.55);
}

/* ---- camera app ---- */
.cam-roll{
  position:absolute; inset:0; z-index:1;
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  overscroll-behavior-x:contain; cursor:grab;
}
.cam-roll::-webkit-scrollbar{ display:none; }
.cam-roll.drag{ cursor:grabbing; scroll-behavior:auto; }
.cam-roll .shot{
  flex:0 0 100%; width:100%; height:100%; scroll-snap-align:center;
  padding:0; border:0; background:#000; cursor:pointer;
  /* the frame sits 4:5 in the middle of the screen with black above and below, the way
     the camera shows a photograph rather than a full-bleed viewfinder */
  display:flex; align-items:center; justify-content:center;
}
.cam-roll .shot img{
  /* 9:13 is not arbitrary - it is the exact height between the bottom of the top bar and
     the bottom of the mode row, so the frame fills the viewfinder and the black bands
     land where the camera furniture sits */
  width:100%; height:auto; aspect-ratio:9/13; object-fit:cover; display:block;
}
/* the viewfinder furniture sits over the picture */
.cam-top{
  position:absolute; top:46px; left:0; right:0; z-index:5;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:8.5px; letter-spacing:.18em; color:rgba(255,255,255,.72);
  text-shadow:0 1px 6px rgba(0,0,0,.9); pointer-events:none;
}
.cam-dot{ width:5px; height:5px; border-radius:50%; background:#ff3b30; }
.cam-live{
  padding:2px 6px; border-radius:4px; background:rgba(255,214,10,.9); color:#000;
  font-family:"Anton",Impact,sans-serif; letter-spacing:.1em;
}
.cam-ui{
  position:absolute; left:0; right:0; bottom:0; z-index:5; pointer-events:none;
  padding:0 0 40px; display:flex; flex-direction:column; align-items:center; gap:12px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.62) 62%);
  padding-top:64px;
}
.cam-caption{
  font-family:"Anton",Impact,sans-serif; font-size:clamp(13px,1.3vw,17px);
  letter-spacing:.05em; text-transform:uppercase; color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.9); min-height:1em;
}
.cam-modes{
  display:flex; gap:14px; font-size:8px; letter-spacing:.2em; color:rgba(255,255,255,.5);
}
.cam-modes .on{ color:#ffd60a; }

/* the shutter lives under the phone, and firing it opens the frame full screen */
.cam-controls{ display:flex; align-items:center; gap:clamp(14px,2vw,26px); }
.cam-shutter{
  width:56px; height:56px; flex:0 0 auto; border-radius:50%; cursor:pointer;
  background:var(--bone); border:3px solid rgba(244,244,246,.35);
  box-shadow:0 0 0 3px rgba(5,5,6,.9), var(--glow-s);
  transition:transform .12s, box-shadow .25s;
}
.cam-shutter:hover{ box-shadow:0 0 0 3px rgba(5,5,6,.9), 0 0 34px rgba(220,228,240,.5); }
.cam-shutter:active{ transform:scale(.9); }
.cam-count,.cam-hint{
  font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--dimmer);
  line-height:1.6;
}
.cam-count{ font-variant-numeric:tabular-nums; }
/* in a column the hint has to wrap, or the two phones' hints run into each other */
.cam-controls{ flex-direction:column; gap:6px; text-align:center; }
.phone > .cam-hint{ text-align:center; max-width:100%; }
/* a short white flash when the shutter fires. opacity:0 is the resting state on purpose:
   the animation does not fill, so without it the layer snaps back to solid white and the
   screen stays blank once the flash finishes. */
.phone--cam.snap .phone-screen::after{
  content:""; position:absolute; inset:0; z-index:8; background:#fff; opacity:0;
  pointer-events:none; animation:camflash .22s ease-out;
}
@keyframes camflash{ 0%{ opacity:.72 } 55%{ opacity:.28 } 100%{ opacity:0 } }

/* ---- instagram reels ---- */
.ig-feed{
  position:absolute; inset:0; z-index:1;
  overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y mandatory; scrollbar-width:none; overscroll-behavior-y:contain;
}
.ig-feed::-webkit-scrollbar{ display:none; }
.reel{
  position:relative; width:100%; height:100%; scroll-snap-align:start; background:#000;
  cursor:pointer;
}
.reel:focus-visible{ outline:2px solid var(--holo-b); outline-offset:-4px; }
.reel video{ width:100%; height:100%; object-fit:cover; display:block; }
.ig-top{
  position:absolute; top:44px; left:0; right:0; z-index:5; pointer-events:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.9);
}
.ig-top b{ font-family:"Anton",Impact,sans-serif; font-size:15px; letter-spacing:.02em; }
.ig-top span{ font-size:13px; opacity:.85; }
.reel-ui{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0 16%, transparent 34%,
                                     transparent 62%, rgba(0,0,0,.62));
}
.reel-meta{
  position:absolute; left:16px; right:66px; bottom:38px;
  display:flex; flex-direction:column; gap:5px; color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}
.reel-meta b{ font-size:11.5px; letter-spacing:.04em; font-weight:700; }
.reel-meta span{ font-size:10.5px; letter-spacing:.03em; opacity:.85; }
.reel-acts{
  position:absolute; right:14px; bottom:44px;
  display:flex; flex-direction:column; gap:18px;
  font-size:19px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.9);
}
.reel-sound{
  position:absolute; right:14px; top:80px; pointer-events:auto; cursor:pointer;
  width:30px; height:30px; border-radius:50%; border:0; font-size:12px;
  background:rgba(0,0,0,.45); color:#fff;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.reel-sound:hover{ background:rgba(0,0,0,.7); }

/* Tablet. The frame is sized off vw, and 22vw of a 768px screen falls under the 228px
   floor, so both devices sat at their minimum with almost 300px of the row unused.
   Two at this size plus the gap still clear the width comfortably. */
@media (min-width:621px) and (max-width:1100px){
  .phones{ --phone-w:clamp(240px, 36vw, 310px); gap:clamp(20px, 2.6vw, 44px); }
}

@media (max-width:620px){
  /* without this the device is stuck at its 228px floor and sits at barely half the
     width of the screen it is mocking up */
  .phones{ --phone-w:min(82vw,330px); }
  .cam-controls{ gap:14px; }
  .cam-count,.cam-hint{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .cam-roll,.ig-feed{ scroll-behavior:auto; }
  .phone--cam.snap .phone-screen::after{ animation:none; display:none; }
}

/* ---- chrome, matched to the two Freepik templates ---- */
.ci{ display:inline-flex; }
.ci svg{ width:100%; height:100%; display:block; }

/* camera: flash / HDR / filters / menu across the top, on the picture */
.cam-top{
  top:52px; justify-content:space-between; padding:0 22px; gap:0;
  color:#fff; opacity:.95;
}
.cam-top .ci{ width:19px; height:19px; }
.cam-hdr{
  font-family:"Anton",Impact,sans-serif; font-size:13px; letter-spacing:.04em;
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.cam-ui{
  padding-top:96px; padding-bottom:34px; gap:12px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.55) 46%, rgba(0,0,0,.92));
  pointer-events:none;
}
.cam-modes{
  gap:clamp(7px,1.1vw,13px); font-size:clamp(7px,.72vw,8.5px);
  letter-spacing:.04em; text-transform:none;
  font-family:"Space Mono",ui-monospace,monospace; color:rgba(255,255,255,.62);
  white-space:nowrap;                    /* "Short video" must not break in two */
}
.cam-modes .on{ color:#fff; }
.cam-row{
  display:flex; align-items:center; justify-content:center; gap:34px;
  pointer-events:auto;
}
.cam-thumb{
  /* the gallery ring: in the real app this is the last frame you shot, so it carries the
     picture before the one in the viewfinder. The image is set by the nav script. */
  width:30px; height:30px; border-radius:50%; border:1.5px solid rgba(255,255,255,.85);
  overflow:hidden; background:#0b0b0d center/cover no-repeat;
}
.cam-flip{ width:30px; height:30px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85); padding:6px; color:#fff; }
/* the shutter moved inside the phone, where the template has it */
.cam-shutter{
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:#fff; border:2.5px solid #fff;
  box-shadow:0 0 0 3px rgba(0,0,0,.55), inset 0 0 0 2.5px #000;
  transition:transform .12s;
}
.cam-shutter:hover{ transform:scale(1.04); }
.cam-shutter:active{ transform:scale(.9); }
/* the name sits at the top of the frame now, not under it */
.cam-caption{
  position:absolute; left:0; right:0; top:92px; z-index:5;
  text-align:center; pointer-events:none;
}

/* reels: the action rail, the account row and the tab bar from the template */
.ig-top{ top:52px; padding:0 20px; }
.ig-top .ci{ width:21px; height:21px; }
.reel-ui{
  background:linear-gradient(180deg, rgba(0,0,0,.40) 0 14%, transparent 30%,
                                     transparent 52%, rgba(0,0,0,.72));
}
.reel-acts{
  right:12px; bottom:86px; gap:17px; align-items:center; font-size:0;
}
.reel-acts > span,
.reel-acts > .reel-like{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:#fff; filter:drop-shadow(0 2px 6px rgba(0,0,0,.85));
}
/* the heart is the one control on the rail that does something */
.reel-like{
  /* 25px wide was too small to hit on a phone; the padding widens the target without
     moving the icon, which is centred in the column above */
  padding:4px 10px; border:0; background:none; cursor:pointer; pointer-events:auto;
  font:inherit; transition:color .2s; min-width:44px;
}
.reel-like svg{ transition:transform .25s cubic-bezier(.2,1.6,.4,1), fill .2s; }
.reel-like[aria-pressed="true"]{ color:#ff2d55; }
.reel-like[aria-pressed="true"] svg{ fill:#ff2d55; }
.reel-like.pop svg{ transform:scale(1.35); }
.reel-like:focus-visible{ outline:2px solid var(--holo-b); outline-offset:3px; border-radius:6px; }
/* the burst that lands over the middle of the reel, the way a double-tap does */
.reel-burst{
  position:absolute; left:50%; top:46%; translate:-50% -50%; z-index:6;
  width:78px; height:78px; color:#fff; opacity:0; pointer-events:none;
}
.reel-burst svg{ width:100%; height:100%; fill:#fff; stroke:none; }
.reel-burst.go{ animation:reelburst .72s cubic-bezier(.2,1.4,.4,1); }
@keyframes reelburst{
  0%{ opacity:0; transform:scale(.4) }
  30%{ opacity:.95; transform:scale(1.05) }
  70%{ opacity:.95; transform:scale(1) }
  100%{ opacity:0; transform:scale(1.25) }
}
.reel-acts svg{ width:25px; height:25px; }
.reel-acts b{ font-size:9px; font-weight:400; letter-spacing:.03em; }
.reel-disc{                               /* the audio thumbnail */
  width:26px; height:26px; border-radius:7px; margin-top:2px;
  background:#0b0b0d url("web/brand/avatar.webp") center/cover no-repeat;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.8);
}
.reel-meta{
  left:12px; right:56px; bottom:74px; gap:7px;
}
.reel-pill{
  display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
  padding:3px 9px 3px 6px; border-radius:20px;
  background:rgba(255,255,255,.18); backdrop-filter:blur(6px);
  font-size:8.5px; letter-spacing:.09em; text-transform:uppercase; color:#fff;
}
.reel-pill svg{ width:11px; height:11px; }
.reel-who{ display:flex; align-items:center; gap:8px; }
.reel-av{
  width:22px; height:22px; border-radius:50%; flex:0 0 auto;
  background:#0b0b0d url("web/brand/avatar.webp") center/cover no-repeat;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9);
}
.reel-who b{ font-size:11.5px; font-weight:700; letter-spacing:.02em; color:#fff; }
.reel-who em{
  font-style:normal; font-size:7.5px; letter-spacing:.05em; text-transform:uppercase;
  color:#fff; padding:2px 5px; border:1px solid rgba(255,255,255,.75); border-radius:5px;
  flex:0 0 auto;
}
.reel-who b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reel-cap{ font-size:10.5px; letter-spacing:.03em; color:rgba(255,255,255,.92); }
.reel-sound{ top:92px; }
/* the instagram tab bar */
.ig-nav{
  position:absolute; left:0; right:0; bottom:0; z-index:6; height:56px;
  display:flex; align-items:center; justify-content:space-around; padding:0 14px 14px;
  background:#000; color:#fff; pointer-events:none;
}
.ig-nav .ci{ width:22px; height:22px; opacity:.85; }
.ig-nav .ci.on{ opacity:1; }
.ig-me{
  width:20px; height:20px; border-radius:50%;
  background:#0b0b0d url("web/brand/avatar.webp") center/cover no-repeat;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9);
}
/* the feed stops above the tab bar, the way it does in the app */
.phone--reels .phone-bar{ background:rgba(255,255,255,.85); bottom:16px; z-index:7; }

/* ---------- MEDIA PROTECTION ----------
   Drag-to-desktop and long-press-to-save are how images actually leave a site, so both
   are turned off. This is a deterrent, not a lock: anything the browser renders can be
   taken from the network tab, and the visitor already has the file. Watermarking is the
   only real protection - see the note in glitched.js. */
img, video{
  -webkit-user-drag:none; -khtml-user-drag:none; -moz-user-drag:none; user-drag:none;
  -webkit-touch-callout:none;                  /* iOS long-press save sheet */
  user-select:none; -webkit-user-select:none;
}
/* the tiles are buttons wrapping an image; the pointer belongs to the button so a
   right-click lands on the button rather than the <img> */
.fr img, .cov img, .btsf img, .shot img, .mv video, .ecard-view img,
.ba-plate, .phones-bg img, .reel video{ pointer-events:none; }

/* ---------- MOBILE TAP TARGETS ----------
   The footer's legal links are a 19px line of text, which is a poor target on a phone.
   Padding rather than a bigger font, so the footer still reads as fine print. */
@media (max-width:900px){
  footer a{ display:inline-block; padding:9px 2px; }
  .fb-legal, .foot-legal{ line-height:1.4; }
}

/* ---------- BREAKDOWNS ON A SMALL SCREEN ----------
   The two wipe comparisons stay side by side at every width, so on a phone each frame is
   only about half the screen. The handle and the labels scale down to match - at full
   size the capsule alone was wider than a third of the frame. */
@media (max-width:620px){
  .ba-row{ --bd-gap:8px; }
  .ba-grip{ width:38px; height:21px; }
  .ba-tag{ font-size:7px; letter-spacing:.1em; padding:2px 6px; }
  .ba-tag--b{ left:6px; } .ba-tag--a{ right:6px; }
  .ba-tag--top{ top:6px; } .ba-tag--bot{ bottom:6px; }
}

/* ---------- BREAKDOWNS: DARKER GROUND ----------
   The datamosh backdrop is the brightest of the eleven, and the plates sitting on it are
   dark VFX frames - they were competing. Knocking the clip back and thickening the scrim
   lets the work read as the lit thing in the section. */
#breakdowns .bgv video{ filter:grayscale(.8) contrast(1.15) brightness(.42); }
#breakdowns .bgv::after{
  background:linear-gradient(180deg,
    var(--void) 0%, rgba(5,5,6,.9) 18%, rgba(5,5,6,.9) 82%, var(--void) 100%);
}