@font-face{
  font-family:'VAG Rounded Web';
  src:url('/assets/vag-rounded.woff?v=6') format('woff'),
      url('/assets/vag-rounded.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  /* Palette sampled directly from the studio photograph. The surfaces now
     come from the carpet (median #132C5D, dropping to #050A1E in shadow)
     rather than the walls; the warm lamp accent and the blue of the sign
     are unchanged, and read better against navy than they did against
     oxblood. The --ox names are kept because they are referenced
     throughout — they mean "primary surface", not "oxblood". */
  --ink:#060E22;          /* carpet in shadow — behind everything   */
  --ox:#0F2350;           /* the carpet — primary surface           */
  --ox-2:#17306A;         /* raised panels                          */
  --ox-3:#26437F;         /* hairlines and edges                    */
  --cream:#F4E7D2;        /* plaster ceiling — primary text         */
  --cream-dim:#AEBBD2;    /* secondary text, cooled to suit         */
  --lamp:#E8A34F;         /* the two practical lamps — warm accent  */
  --neon:#7CC4FF;         /* the sign — lifted for contrast on navy */
  --orange:#E8663C;
  --blue:#5AA9F0;
  --grey:#BCA890;

  /* Warm ambient = atmosphere. Cool blue = anything you can act on. */
  --accent:var(--orange);   /* one accent sitewide — the wordmark orange */

  /* one face across the whole site — the band's own */
  --round:'VAG Rounded Web','VAG Rounded','VAG Rounded Std','VAG Rounded Next','Varela Round',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:var(--round);
  --body:var(--round);
  --mono:var(--round);
  --wonk:normal;
}
*{box-sizing:border-box}
/* No visible scrollbars anywhere. The overlay rail Safari draws while you
   scroll runs straight down the edge of the band photograph and the panels,
   and on the mobile landing it sits over the picture itself. Scrolling still
   works exactly as before — only the indicator is gone. */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--cream);
  font-family:var(--body);font-size:17.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  background:#0A0C11;
  overflow-x:hidden;   /* the heading glow overhangs by design */
}
/* The inner pages have nothing behind them to blur, so the room is put
   there: the studio still, pushed well out of focus and darkened. The
   scale-up hides the soft edges a large blur radius leaves behind. */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:url(studio.webp) center/cover no-repeat;
  filter:blur(46px) saturate(.8) brightness(.38);
  transform:scale(1.12);
  pointer-events:none;
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vw 48vw at 6% 0%,  rgba(232,163,79,.10), transparent 62%),
    linear-gradient(180deg,rgba(8,10,17,.42),rgba(8,10,17,.72));
}
a{color:var(--cream);text-decoration:none;
  border-bottom:1px solid rgba(90,169,240,.55);
  padding-bottom:1px;transition:border-color .25s,color .25s}
a:hover{border-color:var(--neon);color:#fff}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px;border-radius:3px}
.wrap{max-width:780px;margin:0 auto;
  padding:0 calc(24px + env(safe-area-inset-right)) 0 calc(24px + env(safe-area-inset-left))}
header.site{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg,rgba(10,12,17,.72),rgba(10,12,17,.34) 68%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  backdrop-filter:blur(16px) saturate(1.1);
}
header.site .wrap{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding-top:20px;padding-bottom:20px;max-width:980px;
}
/* the wordmark stays in the band's own rounded face — it is the logo */
.brand{
  font-family:var(--round);
  font-size:clamp(23px,3.2vw,31px);color:var(--orange);border:0;white-space:nowrap;
  letter-spacing:.005em;
}
.brand:hover{border:0;color:#F2856A}

nav.site a,nav.site a:hover,nav.site a:visited{text-decoration:none;border-bottom:0}
nav.site{
  margin:0;display:flex;gap:clamp(10px,2vw,26px);flex-wrap:wrap;justify-content:center;
}
/* small caps + mono spacing reads as a set of studio labels, not a menu bar */
nav.site a{
  --n:var(--accent);
  position:relative;border:0;padding:7px 1px;
  font-family:var(--mono);font-size:clamp(12px,1.25vw,13.5px);
  text-transform:lowercase;letter-spacing:.07em;
  color:var(--cream-dim);
  transition:color .25s ease;
}
/* Selected items light up in the wordmark's orange rather than each having
   its own colour and a coloured rule beneath it. Matches the in-page reader
   in index.html — keep the two in step. */
nav.site a:after{content:none}
nav.site a:hover,
nav.site a:focus-visible,
nav.site a[aria-current="page"]{
  color:var(--orange);
  text-shadow:0 0 18px color-mix(in srgb,var(--orange) 55%,transparent),
              0 0 6px color-mix(in srgb,var(--orange) 40%,transparent);
}

main{padding:74px 0 56px}

/* Headings sit in a pool of lamplight rather than glowing themselves.
   Everything here is a static gradient or shadow — nothing animates a
   filter, which is what made the old neon treatment fragile in Safari. */
h1{
  position:relative;
  font-family:var(--display);font-size:clamp(31px,5.9vw,60px);font-weight:400;line-height:.94;
  letter-spacing:-.012em;margin:0 0 18px;text-transform:lowercase;
  color:var(--orange);
  text-shadow:0 0 26px color-mix(in srgb,var(--orange) 42%,transparent);
}
h1:before{
  content:'';position:absolute;z-index:-1;
  left:-14%;right:-14%;top:-70%;bottom:-70%;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--accent) 26%,transparent), transparent 72%);
  pointer-events:none;
}
.lede{
  font-size:clamp(19px,2.3vw,23px);color:var(--cream);opacity:.92;
  margin:0 0 40px;line-height:1.58;max-width:54ch;
}
h2{
  font-family:var(--display);font-size:clamp(18px,2.4vw,24px);font-weight:400;line-height:1.14;
  letter-spacing:-.008em;margin:56px 0 16px;text-transform:lowercase;
  color:var(--orange);
  text-shadow:0 0 20px color-mix(in srgb,var(--orange) 34%,transparent);
}
/* the accent bar is the only thing that carries the section colour */
h2:before{
  content:'';display:block;width:26px;height:2px;margin:0 0 14px;
  background:var(--orange);
}
@media (prefers-reduced-motion:reduce){h2{animation:none}}
p{margin:0 0 18px}
figure{margin:0 0 30px;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.5);line-height:0}
figure img{width:100%;height:auto;display:block}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:22px 0 0}
.tile{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:18px 20px;border:1px solid rgba(255,255,255,.14);border-radius:14px;
  background:rgba(255,255,255,.05);transition:.25s;
}
.tile:hover{background:rgba(255,255,255,.1);border-color:color-mix(in srgb,var(--accent) 60%,transparent);transform:translateY(-2px)}
.tile b{font-weight:400;font-size:17px;color:#fff}
.tile span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.creds{list-style:none;margin:18px 0 0;padding:0}
.creds li{display:grid;grid-template-columns:78px 1fr;gap:18px;padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.09)}
.creds li:last-child{border-bottom:0}
.creds .yr{font-family:var(--mono);font-size:13px;color:var(--accent);padding-top:4px}
.creds b{color:#fff;font-weight:400}
blockquote{margin:30px 0;padding:0 0 0 20px;border-left:1px solid var(--accent);
  font-size:20px;color:#fff;line-height:1.55}
blockquote cite{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45);font-style:normal}
.frame16{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;margin:22px 0 0}
.frame16 iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.field{display:grid;gap:7px;margin-bottom:14px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.field input,.field textarea{
  width:100%;font:inherit;font-size:16px;color:#fff;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:14px 16px;outline:none;
  transition:border-color .25s,background .25s;-webkit-appearance:none;appearance:none;
}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus{border-color:rgba(232,102,60,.75);background:rgba(255,255,255,.1)}
.send{margin-top:6px;font:inherit;font-size:16px;color:#fff;background:var(--orange);
  border:0;border-radius:12px;padding:15px 32px;cursor:pointer;transition:filter .25s}
.send:hover{filter:brightness(1.12)}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.note{font-size:15px;color:rgba(255,255,255,.6)}
footer.site{
  margin-top:70px;border-top:1px solid rgba(255,255,255,.08);
  padding:34px 0 calc(60px + env(safe-area-inset-bottom));font-size:15px;color:rgba(255,255,255,.45);
}
footer.site .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer.site a{border:0;color:rgba(255,255,255,.6)}
footer.site a:hover{color:#fff}
.spacer{margin-left:auto}
@media (max-width:620px){
  header.site .wrap{height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;gap:8px}
nav.site{margin-left:0;width:100%}
nav.site a{padding:7px 10px;font-size:14px}
.creds li{grid-template-columns:62px 1fr;gap:12px}
}
/* matches the in-reader treatment in index.html — an outline pill, clear
   of the content above it. The solid orange stays reserved for the
   primary action on a page (send, buy). */
.backstudio{margin-top:56px}
.backstudio a{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--round);font-size:16px;line-height:1;
  color:#fff;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.24);border-radius:100px;
  padding:15px 28px;
  transition:background .25s,border-color .25s,transform .25s;
}
.backstudio a:hover{
  background:rgba(255,255,255,.12);
  border-color:color-mix(in srgb,var(--accent) 70%,transparent);
  color:#fff;transform:translateY(-2px);
}
.tiles.big{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:34px}
.tiles.big .tile{padding:26px 24px}
.tiles.big .tile b{font-size:21px}
/* ---------- credits strip: readable, no boxed labels ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:2px;
  margin:30px 0 10px;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.1)}
.stats div{background:rgba(255,255,255,.055);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:20px 16px}
.stats .n{display:block;font-family:var(--round);font-size:clamp(24px,3.4vw,32px);
  color:var(--accent,#E8663C);line-height:1.1;margin-bottom:4px}
.stats .l{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5);line-height:1.5}

/* ---------- quotes: lit panels, not paper ---------- */
.clips{display:grid;grid-template-columns:1fr;gap:0;margin:26px 0 0}
.clip{
  position:relative;background:none;color:inherit;border-radius:0;
  box-shadow:none;background-image:none;transform:none;
  padding:26px 0 26px 26px;border-bottom:1px solid rgba(255,255,255,.09);
  transition:padding-left .35s cubic-bezier(.2,.8,.3,1);
}
.clip:last-child{border-bottom:0}
.clip:before{
  content:"";position:absolute;left:0;top:26px;bottom:26px;width:2px;
  background:var(--accent);
  box-shadow:0 0 14px color-mix(in srgb,var(--accent) 75%,transparent);
  opacity:.55;transition:opacity .35s ease;
}
.clip:hover{padding-left:32px}
.clip:hover:before{opacity:1}
.clip q{
  display:block;font-family:var(--round);font-weight:400;
  font-size:clamp(20px,2.6vw,27px);line-height:1.4;color:#fff;quotes:none;
  text-shadow:0 0 22px rgba(255,255,255,.14);
}
.clip q:before,.clip q:after{content:''}
.clip .who{
  display:block;margin-top:14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}
.clip .tear{display:none}

/* ---------- coverage list ---------- */
.coverage{list-style:none;margin:22px 0 0;padding:0}
.coverage li{border-bottom:1px solid rgba(255,255,255,.09)}
.coverage a{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;
  padding:20px 2px;border:0;transition:padding .25s,color .25s}
.coverage a:hover{padding-left:10px;border:0}
.coverage .t{font-family:var(--round);font-size:19px;color:#fff;line-height:1.35}
.coverage .src{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent,#E8663C);margin-bottom:6px}
.coverage .go{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.4);white-space:nowrap}
.coverage a:hover .go{color:#fff}
/* ---------- masthead wall ---------- */
.mastheads{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.mastheads span{
  font-family:var(--round);font-size:15px;color:rgba(255,255,255,.62);
  padding:11px 18px;border:1px solid rgba(255,255,255,.14);border-radius:100px;
}
/* ---------- press kit ---------- */
.kit{margin:26px 0 0;padding:clamp(24px,3.5vw,34px);border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(110% 90% at 8% 0%,rgba(255,255,255,.08),transparent 60%),rgba(255,255,255,.05);
  backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%)}
.kit h3{margin:0 0 8px;font-family:var(--round);font-weight:400;font-size:23px;color:#fff}
.kit p{margin:0 0 18px;color:rgba(255,255,255,.7)}
.kitrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:10px;border:0;border-radius:100px;
  background:var(--accent,#E8663C);color:#0A1730;
  padding:15px 28px;font-family:var(--round);font-size:17px;text-transform:lowercase;
  font-weight:700;-webkit-text-stroke:.3px currentColor;
  transition:transform .25s,filter .25s;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08);border:0}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn.ghost:hover{border-color:#fff}
.copybio{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:none;border:0;color:rgba(255,255,255,.5);cursor:pointer;padding:10px 4px}
.copybio:hover{color:#fff}
.biobox{margin:18px 0 0;padding:18px 20px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);font-size:15.5px;color:rgba(255,255,255,.75);line-height:1.7}
/* ---------- release card (takeaway) ---------- */
.release{position:relative;margin:8px 0 0;border-radius:22px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(232,102,60,.16),transparent 60%),
    radial-gradient(100% 80% at 92% 100%,rgba(232,102,60,.18),transparent 62%),
    linear-gradient(180deg,#14161C,#0C0D12);
  box-shadow:0 30px 80px rgba(0,0,0,.55)}
.release .inner{padding:clamp(26px,4vw,44px)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent,#E8663C);margin:0 0 12px}
.release h2{margin:0 0 6px;font-size:clamp(28px,5vw,42px);color:#fff;line-height:1.1;
  text-shadow:none;animation:none}
.release .feat{margin:0 0 22px;color:rgba(255,255,255,.62);font-size:17px}
.buy{display:inline-flex;align-items:center;gap:12px;margin-top:12px;
  background:var(--accent,#E8663C);color:#0A1730;border:0;border-radius:100px;
  padding:17px 34px;font-family:var(--round);font-size:19px;text-transform:lowercase;
  font-weight:700;-webkit-text-stroke:.3px currentColor;
  transition:transform .25s,filter .25s,box-shadow .25s;
  box-shadow:0 12px 34px rgba(232,102,60,.28)}
.buy:hover{transform:translateY(-2px);filter:brightness(1.08);border:0}
.buy .arrow{transition:transform .25s}
.buy:hover .arrow{transform:translateX(4px)}
.meta{display:flex;gap:26px;flex-wrap:wrap;margin:26px 0 0;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.1)}
.meta div{min-width:120px}
.meta dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin:0 0 5px}
.meta dd{margin:0;color:#fff;font-size:16px}
.note{font-size:15px;color:rgba(255,255,255,.55);margin-top:26px}
.player{margin:26px 0 0;line-height:0}
.player iframe{display:block;width:100%;border:0;border-radius:12px}
.frame16.withlist{aspect-ratio:auto;height:min(70dvh,620px)}
@media (max-width:700px){.frame16.withlist{height:min(62dvh,460px)}
}
/* ---------- video grid ---------- */
.vplayer{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;margin:26px 0 0;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.55);background:#000}
.vplayer iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin:24px 0 0}
.vid{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left}
.thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:#0C0D11}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.2,.8,.3,1),filter .3s;filter:saturate(.9) brightness(.85)}
.vid:hover .thumb img,.vid:focus-visible .thumb img{transform:scale(1.06);filter:saturate(1.1) brightness(1)}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.play:before{content:'';width:46px;height:46px;border-radius:50%;
  background:rgba(12,13,17,.62);border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:background .3s,transform .3s,border-color .3s}
.play:after{content:'';position:absolute;width:0;height:0;
  border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;
  margin-left:4px;transition:border-left-color .3s}
.vid:hover .play:before{background:var(--accent,#E8663C);border-color:var(--accent,#E8663C);transform:scale(1.08)}
.vtitle{display:block;height:22px;margin-top:11px;font-family:var(--round);font-size:15.5px;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:rgba(255,255,255,.78);transition:color .25s}
.vid:hover .vtitle{color:#fff}
.vid.playing .thumb{border-color:var(--accent,#E8663C);
  box-shadow:0 0 0 1px var(--accent,#E8663C),0 0 24px -4px var(--accent,#E8663C)}
.vid.playing .vtitle{color:#fff}
.vid.playing .thumb img{filter:saturate(1.15) brightness(1)}
@media (max-width:520px){.vgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px}
}
/* ---------- video carousel ---------- */
.vrail{position:relative;margin:26px 0 0}
.vscroll{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;overscroll-behavior-x:contain;
  padding:2px 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.vscroll::-webkit-scrollbar{display:none}
.vscroll .vid{
  flex:0 0 clamp(230px,62%,520px);width:clamp(230px,62%,520px);scroll-snap-align:center;
  padding:0;border:0;background:none;cursor:pointer;text-align:left;
}
.vscroll .vid:first-child{margin-left:max(0px,calc((100% - clamp(230px,62%,520px))/2))}
.vscroll .vid:last-child{margin-right:max(0px,calc((100% - clamp(230px,62%,520px))/2))}
.vscroll .vid .thumb{transition:transform .5s cubic-bezier(.2,.8,.3,1),opacity .5s}
.vscroll .vid.mid{opacity:1;transform:scale(1)}
.vdots{display:flex;justify-content:center;gap:9px;margin:18px 0 0}
.vdots button{
  width:8px;height:8px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.26);border:0;transition:.3s;
}
.vdots button.on{background:var(--accent,#E8663C);transform:scale(1.35)}
.varrow{
  position:absolute;top:calc(50% - 34px);transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:rgba(12,13,17,.66);border:1px solid rgba(255,255,255,.22);color:#fff;
  font-family:-apple-system,'Segoe UI',system-ui,sans-serif;font-size:19px;
  display:flex;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:.25s;
}
.varrow:hover{background:var(--accent,#E8663C);border-color:var(--accent,#E8663C)}
.varrow.prev{left:-6px}
.varrow.next{right:-6px}
@media (max-width:700px){.varrow{display:none}
}


.igwrap{margin:26px 0 10px}
.igwrap .instagram-media{margin:0 auto !important;max-width:540px !important;min-width:0 !important}

.sleeves{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 30px}
/* the generic figure rule zeroes line-height and clips overflow to kill
   inline-image whitespace; inside a sleeve that collapsed the caption to
   0px and hid it. The sleeve image carries its own frame, so the figure
   needs none of that here. */
.sleeves figure{margin:0;line-height:inherit;overflow:visible;
  border:0;box-shadow:none;border-radius:0}
.sleeves a{display:block;border:0}
.sleeves a:hover{border:0}
.sleeves img{width:100%;height:auto;display:block;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.5);
  transition:transform .4s cubic-bezier(.2,.8,.3,1),box-shadow .4s,border-color .3s}
.sleeves a:hover img{transform:translateY(-5px) scale(1.012);
  border-color:color-mix(in srgb,var(--accent,#E8663C) 65%,transparent);
  box-shadow:0 28px 66px rgba(0,0,0,.6)}
.sleeves .shoplink{display:flex;align-items:center;gap:7px;margin-top:11px;
  font-family:var(--round);font-size:14.5px;color:rgba(255,255,255,.6);transition:color .25s}
.sleeves .arrow{transition:transform .25s}
.sleeves a:hover .shoplink{color:#fff}
.sleeves a:hover .arrow{transform:translateX(4px)}
@media (max-width:460px){
  .sleeves{grid-template-columns:1fr;gap:16px}
  .sleeves .shoplink{font-size:13.5px}
}

/* ---------- icon links ---------- */
.icolinks{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px;margin:34px 0 0;
}
.icolinks .ico{
  flex:0 1 132px;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:22px 10px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .28s,border-color .28s,transform .28s,box-shadow .28s;
}
@media (hover:hover) and (pointer:fine){
  .icolinks .ico:hover{
    background:rgba(255,255,255,.08);transform:translateY(-3px);
    border-color:color-mix(in srgb,var(--i,#fff) 55%,transparent);
  }
}
.icolinks .glyph{display:block;width:34px;height:34px;color:rgba(255,255,255,.72);
  transition:color .28s}
.icolinks .glyph svg{width:100%;height:100%;display:block}
@media (hover:hover) and (pointer:fine){
  .icolinks .ico:hover .glyph{color:var(--i,#fff)}
}
.icolinks .iname{
  font-family:var(--round);font-size:14.5px;line-height:1.2;text-align:center;
  color:rgba(255,255,255,.66);transition:color .28s;
}
@media (hover:hover) and (pointer:fine){
  .icolinks .ico:hover .iname{color:#fff}
}
@media (max-width:520px){
  .icolinks{gap:10px}
  .icolinks .ico{flex:0 1 104px}
  .icolinks .ico{padding:18px 6px 15px}
  .icolinks .glyph{width:29px;height:29px}
  .icolinks .iname{font-size:13px}
}

/* pressed / tapped / keyboard-focused: the tile lights up in its own
   brand colour. `.pressed` is set briefly by script on pointerdown so touch
   devices get the same flash a mouse gets on hover. */
.icolinks .ico:active,
.icolinks .ico:focus-visible,
.icolinks .ico.pressed{
  background:color-mix(in srgb,var(--i,#fff) 18%,rgba(255,255,255,.04));
  border-color:color-mix(in srgb,var(--i,#fff) 85%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--i,#fff) 45%,transparent),
             0 12px 34px -14px color-mix(in srgb,var(--i,#fff) 80%,transparent);
  transform:translateY(-2px);
  outline:none;
  transition:background .1s,border-color .1s,box-shadow .1s,transform .1s;
}
.icolinks .ico:active .glyph,
.icolinks .ico:focus-visible .glyph,
.icolinks .ico.pressed .glyph{color:var(--i,#fff);transition:color .1s}
.icolinks .ico:active .iname,
.icolinks .ico:focus-visible .iname,
.icolinks .ico.pressed .iname{color:#fff;transition:color .1s}
@media (prefers-reduced-motion:reduce){
  .icolinks .ico:active,.icolinks .ico:focus-visible,.icolinks .ico.pressed{transform:none}
}



.nospot{margin:26px 0 0;text-align:center;font-size:15.5px;color:rgba(255,255,255,.6)}
@media (max-width:520px){.nospot{font-size:14.5px}}

/* headings arrive with the page rather than striking on like a tube */
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h1{animation:riseIn .5s cubic-bezier(.2,.7,.3,1) both}
h2{animation:riseIn .45s cubic-bezier(.2,.7,.3,1) both}
@media (prefers-reduced-motion:reduce){h1,h2{animation:none}}

/* the cuttings page is the densest — ease it off on small screens */
@media (max-width:560px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats div{padding:16px 14px}
  .stats .n{font-size:clamp(21px,6vw,26px)}
  .stats .l{font-size:9.5px;letter-spacing:.12em}
  .clips{grid-template-columns:1fr;gap:18px}
  .clip{transform:none;padding:22px 20px 18px}
  .clip:hover{transform:translateY(-3px)}
  .clip q{font-size:18px}
  .coverage a{grid-template-columns:1fr;gap:6px;padding:16px 2px}
  .coverage .go{justify-self:start}
  .mastheads{gap:8px}
  .mastheads span{font-size:13.5px;padding:9px 14px}
  .creds li{grid-template-columns:1fr;gap:4px}
  .creds .yr{padding-top:0}
  .igwrap .instagram-media{max-width:100% !important}
}