/* ==========================================================================
   epicjared.com — shared styles
   Light site, dark footer. The 404 page runs its own dark treatment.
   ========================================================================== */

:root{
  --bg:#eef1f6;
  --card:#ffffff;
  --ink:#1c1f26;
  --ink-2:#4b5160;
  --ink-3:#666c7e;
  --line:#e6eaf1;
  --line-2:#d8dee9;

  --pink:#ff3d8f;
  --pink-ink:#d6005a;   /* the pink, dark enough for small text on the light grounds */
  --orange:#ff7a1a;
  --cyan:#22c1ee;
  --yellow:#ffd23f;
  --violet:#7c5cff;

  --hot:linear-gradient(135deg,var(--pink),var(--orange));

  --wrap:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --shadow:0 30px 60px -34px rgba(28,31,38,.32);
  --shadow-sm:0 14px 30px -18px rgba(28,31,38,.3);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Jost","Futura","Avenir Next","Helvetica Neue",sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:"Unbounded","Arial Black",sans-serif;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(34px,5.2vw,62px);font-weight:800}
h2{font-size:clamp(25px,3.1vw,38px);font-weight:700}
h3{font-size:clamp(18px,1.6vw,22px);font-weight:700}
p{max-width:68ch}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.narrow{max-width:820px}

/* skip link ------------------------------------------------------------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:600;
}
.skip:focus{left:0}

/* ==========================================================================
   header
   ========================================================================== */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(238,241,246,.86);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s;
}
.site-head.is-stuck{border-bottom-color:var(--line);background:rgba(238,241,246,.94)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
/* reading bar: fills along the bottom of the header as the page scrolls */
.read-bar{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:var(--hot);box-shadow:0 0 10px rgba(255,61,143,.45);
  transform:scaleX(0);transform-origin:0 50%;
}
@supports (animation-timeline: scroll()){
  @keyframes readBar{to{transform:scaleX(1)}}
  .read-bar{animation:readBar linear both;animation-timeline:scroll(root)}
}

.logo{
  font-family:"Unbounded","Arial Black",sans-serif;font-weight:800;
  font-size:clamp(17px,1.5vw,20px);letter-spacing:-.03em;
  display:inline-flex;align-items:baseline;gap:2px;color:var(--ink);flex:none;
}
.logo em{font-style:normal;font-weight:700;color:var(--ink-2)}
.logo i{
  width:7px;height:7px;border-radius:50%;background:var(--pink);
  display:inline-block;margin-left:3px;transform:translateY(-1px);
}

.nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px);font-size:14.5px;font-weight:500}
.nav a{position:relative;padding:6px 0;color:var(--ink-2);transition:color .25s}
.nav a:hover{color:var(--ink)}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2.5px;border-radius:3px;
  background:var(--hot);transition:right .3s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
/* pages that do not exist yet: shown, not clickable */
.nav span{padding:6px 0;color:var(--ink-3);opacity:.6;cursor:default}

.head-cta{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  padding:12px 18px;border-radius:12px;background:var(--hot);
  box-shadow:0 14px 28px -12px rgba(255,61,143,.6);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  white-space:nowrap;
}
.head-cta:hover{transform:translateY(-2px);box-shadow:0 20px 34px -12px rgba(255,61,143,.75)}
.head-cta .pulse{
  width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:ping 1.9s ease-out infinite;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}
  80%{box-shadow:0 0 0 9px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

.menu-btn{
  display:none;width:42px;height:42px;border:1px solid var(--line-2);border-radius:11px;
  background:var(--card);cursor:pointer;align-items:center;justify-content:center;flex:none;
}
.menu-btn span{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;position:relative}
.menu-btn span::before,.menu-btn span::after{
  content:"";position:absolute;left:0;width:17px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .3s var(--ease),top .3s var(--ease);
}
.menu-btn span::before{top:-6px}
.menu-btn span::after{top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ==========================================================================
   page hero
   ========================================================================== */
.page-hero{padding:clamp(46px,7vw,88px) 0 clamp(28px,4vw,46px)}
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pink-ink);margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line-2);max-width:80px}
.lede{font-size:clamp(17px,1.4vw,20px);line-height:1.62;color:var(--ink-2);max-width:60ch;margin-top:18px}

/* ==========================================================================
   sections and cards
   ========================================================================== */
.section{padding:clamp(34px,5vw,66px) 0}
.section-head{margin-bottom:clamp(22px,3vw,36px)}
.section-head p{color:var(--ink-2);margin-top:12px}

.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.panel{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:clamp(20px,2.6vw,30px)}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:15px;padding:15px 26px;border-radius:14px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s,color .3s;
}
.btn svg{width:16px;height:16px;fill:currentColor;flex:none}
.btn-primary{background:var(--hot);color:#fff;box-shadow:0 16px 34px -14px rgba(255,61,143,.66)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 42px -14px rgba(255,61,143,.8)}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink);background:var(--card)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--ink-3);box-shadow:var(--shadow-sm)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(28,31,38,.7)}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 14px;border-radius:999px;background:var(--bg);color:var(--ink-2);
}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c,var(--pink));flex:none}
.chip-row{display:flex;flex-wrap:wrap;gap:9px}

.tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;background:#fff0f6;color:var(--pink-ink);white-space:nowrap;
}
.tag-live{background:#e8f6ee;color:#0f7a4d}
.tag-past{background:var(--line);color:var(--ink-2)}
.tag-soon{background:#fff5e6;color:#b45309}

/* ==========================================================================
   footer
   ========================================================================== */
.site-foot{background:var(--ink);color:#fff;margin-top:clamp(50px,7vw,96px);padding:clamp(42px,5vw,68px) 0 30px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(26px,4vw,54px);padding-bottom:36px}
.foot-brand .logo{color:#fff;font-size:22px}
.foot-brand .logo em{color:rgba(255,255,255,.62)}
.foot-blurb{color:rgba(255,255,255,.62);font-size:14.5px;margin-top:14px;max-width:34ch}
.foot-col .foot-h{
  font-family:"Jost",sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:14px;
}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14.5px}
.foot-col a{color:rgba(255,255,255,.8);transition:color .25s;overflow-wrap:anywhere}
.foot-col a:hover{color:#fff}
.foot-col span{color:rgba(255,255,255,.34);cursor:default}

.social{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.social a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;
  transition:transform .3s var(--ease),background .3s,border-color .3s;
}
.social a svg{width:16px;height:16px;fill:currentColor}
.social a:hover{transform:translateY(-3px);background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}

.foot-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding-top:22px;
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:13px;color:rgba(255,255,255,.5);
}
.foot-bottom b{color:rgba(255,255,255,.8);font-weight:600}
.foot-bottom a{color:rgba(255,255,255,.62);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px;transition:color .25s,text-decoration-color .25s}
.foot-bottom a:hover{color:#fff;text-decoration-color:currentColor}
.foot-credit{white-space:nowrap}

/* ==========================================================================
   press
   ========================================================================== */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.filter{
  font-size:13.5px;font-weight:600;padding:10px 16px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease);
  font-family:inherit;
}
.filter:hover{transform:translateY(-1px);border-color:var(--ink-3)}
.filter[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.filter .n{color:var(--ink-3);margin-left:5px;font-variant-numeric:tabular-nums}
.filter[aria-pressed="true"] .n{color:rgba(255,255,255,.7)}

.press-list{display:flex;flex-direction:column;gap:2px}
.press-item{
  display:grid;grid-template-columns:96px 1fr auto;gap:6px 22px;align-items:baseline;
  padding:20px 22px;border-radius:var(--r);background:var(--card);
  border:1px solid transparent;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s;
}
.press-item:hover{transform:translateX(4px);box-shadow:var(--shadow-sm);border-color:var(--line)}
.press-date{
  font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.press-main{min-width:0}
.press-outlet{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pink-ink);margin-bottom:5px;
}
.press-head{font-size:17px;font-weight:600;line-height:1.35;color:var(--ink);margin-bottom:5px}
.press-sum{font-size:14.5px;color:var(--ink-2);line-height:1.55;max-width:62ch}
.press-go{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--bg);color:var(--ink-2);align-self:center;
  transition:background .28s,color .28s,transform .28s var(--ease);
}
.press-go svg{width:14px;height:14px;fill:currentColor}
.press-item:hover .press-go{background:var(--ink);color:#fff;transform:rotate(45deg)}
.press-item.tier-1 .press-outlet{color:var(--ink)}
.press-item.tier-1 .press-outlet::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--pink);margin-left:7px;vertical-align:middle}
.press-empty{padding:40px 22px;text-align:center;color:var(--ink-3)}

/* ==========================================================================
   records
   ========================================================================== */
.record{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.4vw,48px);align-items:center;
  padding:clamp(24px,3.4vw,42px);background:var(--card);border-radius:var(--r-lg);
  box-shadow:var(--shadow);margin-bottom:clamp(20px,2.6vw,32px);
}
.record:nth-child(even) .record-media{order:-1}
.record-n{
  font-family:"Unbounded","Arial Black",sans-serif;font-weight:800;font-size:13px;
  letter-spacing:.06em;color:var(--pink-ink);margin-bottom:12px;
}
.record h2{margin-bottom:12px;font-size:clamp(21px,2.2vw,29px)}
.record-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--ink-3);margin-bottom:16px}
/* the championship prize is a sentence, not a label, so let it wrap on a phone */
.record-meta .tag{white-space:normal;text-align:left}
.record-meta b{color:var(--ink-2);font-weight:600}
.record p{font-size:15.5px;color:var(--ink-2);margin-bottom:14px}
.record-figure{
  font-family:"Unbounded","Arial Black",sans-serif;font-weight:800;
  font-size:clamp(40px,5.4vw,68px);line-height:1;letter-spacing:-.04em;
  background:var(--hot);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:6px;
}
.record-figure-label{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
/* the sentence under a figure is prose, not a label */
.record-detail{font-size:15.5px;line-height:1.55;color:var(--ink-2);margin-top:4px}
/* just a column now; the card inside sets its own shape. The old 4:3 box with
   overflow:hidden was cropping the certificate. */
.record-media{display:block}
.photo-wait-box{
  border-radius:var(--r);overflow:hidden;background:var(--bg);
  aspect-ratio:4/3;display:grid;place-items:center;position:relative;
}
.photo-wait{
  text-align:center;padding:26px;color:var(--ink-3);
}
.photo-wait svg{width:34px;height:34px;fill:var(--line-2);margin:0 auto 12px}
.photo-wait span{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;display:block}
.photo-wait small{font-size:13px;display:block;margin-top:6px;opacity:.8;letter-spacing:0;text-transform:none;font-weight:400}

/* ==========================================================================
   timeline
   ========================================================================== */
.chapter{
  display:grid;grid-template-columns:120px 1fr;gap:clamp(18px,3vw,44px);
  padding:clamp(26px,3.4vw,44px) 0;border-top:1px solid var(--line-2);
}
.chapter:first-child{border-top:0}
.chapter-year{
  font-family:"Unbounded","Arial Black",sans-serif;font-weight:800;
  font-size:clamp(16px,1.6vw,20px);letter-spacing:-.02em;color:var(--pink-ink);
  position:sticky;top:96px;align-self:start;
}
.chapter h2{margin-bottom:10px;font-size:clamp(18px,1.6vw,22px)}
.chapter p{color:var(--ink-2);margin-bottom:12px}
.chapter-media{border-radius:var(--r);overflow:hidden;background:var(--bg);margin-top:18px;aspect-ratio:16/9;display:grid;place-items:center}
.chapter-media img{width:100%;height:100%;object-fit:cover}
.sources{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.source-link{
  font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:999px;
  background:var(--bg);color:var(--ink-2);transition:background .25s,color .25s;
}
.source-link:hover{background:var(--ink);color:#fff}

/* ==========================================================================
   utility
   ========================================================================== */
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2.4vw,26px)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(16px,2.4vw,26px)}
.muted{color:var(--ink-2)}
/* a link inside running text should read as a link without shouting */
p > a:not([class]){text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:rgba(255,61,143,.5);transition:text-decoration-color .25s}
p > a:not([class]):hover{text-decoration-color:var(--pink)}
.center{text-align:center}
/* scroll reveals live in the motion section at the end of this file */

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width:940px){
  .nav,.head-cta{display:none}
  .menu-btn{display:flex}
  .site-head.open .nav{
    display:flex;position:absolute;left:0;right:0;top:72px;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--card);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-sm);padding:8px 0;
  }
  .site-head.open .nav a,.site-head.open .nav span{
    padding:13px clamp(20px,4vw,44px);font-size:16px;
  }
  .site-head.open .nav a::after{display:none}
  .record{grid-template-columns:1fr}
  .record:nth-child(even) .record-media{order:0}
  .chapter{grid-template-columns:1fr;gap:10px}
  .chapter-year{position:static}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:660px){
  body{font-size:16px}
  .press-item{grid-template-columns:1fr;gap:8px;padding:18px}
  .press-go{display:none}
  .press-date{order:-1}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .foot-bottom{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   page transition: a foam dart crosses the screen on internal navigation
   ========================================================================== */
.pt{position:fixed;inset:0;z-index:900;pointer-events:none;opacity:0;overflow:hidden;transition:none}
.pt.on{pointer-events:auto}
.pt-veil{position:absolute;inset:0;background:var(--bg);opacity:0}
.pt-dart{
  position:absolute;top:50%;left:0;margin-top:-34px;
  transform:translateX(-34vw);
  opacity:1;               /* the dart is always solid, only the veil fades */
}
.pt-dart svg{
  width:clamp(150px,16vw,260px);height:auto;
  filter:drop-shadow(0 10px 22px rgba(28,31,38,.32));
}
.pt.go{opacity:1}
.pt.go .pt-dart{animation:ptFly .62s cubic-bezier(.36,0,.22,1) forwards}
.pt.go .pt-veil{animation:ptVeil .62s ease-in forwards}
@keyframes ptFly{from{transform:translateX(-34vw)}to{transform:translateX(132vw)}}
@keyframes ptVeil{0%{opacity:0}62%{opacity:1}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.pt{display:none}}

/* arriving: the veil is already down before first paint, then lifts */
html.pt-in .pt{opacity:1}
html.pt-in .pt-veil{opacity:1}
.pt.enter .pt-veil{animation:ptVeilOut .58s ease-out forwards}
.pt.enter .pt-dart{animation:ptFly .62s cubic-bezier(.36,0,.22,1) forwards}
@keyframes ptVeilOut{from{opacity:1}to{opacity:0}}

/* connect page: real brand marks instead of a flat tile */
.brand-mark{
  width:52px;height:52px;flex:none;display:block;border-radius:15px;overflow:hidden;
  box-shadow:0 6px 16px -8px rgba(28,31,38,.5);
}
.brand-mark svg{width:100%;height:100%;display:block}

/* press: media kit block */
.media-kit{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,52px);align-items:center}
@media (max-width:760px){
  .media-kit{grid-template-columns:1fr;gap:24px}
  .media-kit .row{flex-direction:column;align-items:stretch}
  .media-kit .btn{justify-content:center}
}

/* ==========================================================================
   video embeds
   ========================================================================== */
.vid{margin:0}
/* fixed 16:9 box: the poster and the player both fill it, so clicking play
   never changes the size of anything on the page */
.vid-frame{
  position:relative;aspect-ratio:16/9;width:100%;
  border-radius:var(--r);overflow:hidden;background:var(--ink);
  box-shadow:var(--shadow-sm);
}
.vid-play{
  position:absolute;inset:0;width:100%;height:100%;
  padding:0;border:0;cursor:pointer;background:none;display:block;
}
.vid-play picture{display:block;width:100%;height:100%}
.vid-play img{width:100%;height:100%;object-fit:cover;display:block}
/* just enough darkening for the button to read, not enough to dull the photo */
.vid-play::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 42% at 50% 50%,rgba(20,22,27,.34),rgba(20,22,27,0) 70%);
  transition:background .3s var(--ease);
}
.vid-play:hover::after{background:radial-gradient(46% 46% at 50% 50%,rgba(20,22,27,.42),rgba(20,22,27,.06) 72%)}
.vid-btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(56px,5.2vw,72px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;z-index:2;
  background:var(--hot);box-shadow:0 16px 36px -12px rgba(255,61,143,.75);
  transition:transform .28s var(--ease);
}
.vid-play:hover .vid-btn{transform:translate(-50%,-50%) scale(1.09)}
.vid-btn svg{width:40%;height:40%;fill:#fff;margin-left:9%}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* runs the full width of the player rather than stopping short of it */
.vid figcaption{font-size:13.5px;color:var(--ink-3);margin-top:12px;line-height:1.5;max-width:none}
.vid-play:focus-visible{outline:2px solid var(--pink);outline-offset:-3px}

/* ==========================================================================
   photographs
   ========================================================================== */
.photo{margin:0}
.photo picture{
  display:block;position:relative;aspect-ratio:var(--ar,16/9);
  border-radius:var(--r);overflow:hidden;background:var(--line);
  box-shadow:var(--shadow-sm);
}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
/* certificates and documents: show the whole thing, on a soft ground */
.photo-contain picture{background:linear-gradient(160deg,#fff,var(--bg));padding:clamp(10px,1.6vw,20px)}
.photo-contain img{object-fit:contain}
.photo figcaption{font-size:13px;color:var(--ink-3);margin-top:10px;line-height:1.5}

.photo-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(14px,2vw,22px)}

/* a highlights gallery that is not just a flat grid */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,16px)}
.gallery .photo{margin:0}
.gallery .photo picture{aspect-ratio:1}
.gallery .photo:nth-child(1){grid-column:span 2;grid-row:span 2}
@media (max-width:880px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .photo:nth-child(1){grid-column:span 2;grid-row:auto}
}

/* stadium row: a photo sitting beside its venue name */
.venue-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px)}
@media (max-width:1000px){.venue-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.venue-grid{grid-template-columns:1fr}}
.venue{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s;
}
.venue:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.venue .photo{margin:0}
.venue .photo picture{aspect-ratio:16/9;border-radius:0}
.venue-body{padding:clamp(15px,1.9vw,21px)}
.venue h3{font-size:clamp(17px,1.6vw,20px)}
.venue p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-top:8px}
.venue-none{
  display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;
  background:var(--bg);border-bottom:1px solid var(--line);
  color:var(--ink-3);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:8px;
}

.logo-strip{
  overflow:hidden;padding:clamp(18px,2.6vw,28px) 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.logo-track{display:flex;width:max-content;animation:logoRoll 78s linear infinite}
.logo-item{
  display:inline-flex;align-items:center;flex:none;
  gap:clamp(20px,2.8vw,40px);padding:0 clamp(20px,2.8vw,40px);
}
.logo-item::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--line-2);flex:none}
/* Desaturated so a dozen different brand palettes read as one calm strip, and
   restored to full colour on hover. Masking them to flat silhouettes was the
   obvious move but it eats knockout detail: Dallas Observer lost the word
   DALLAS, and WFAA and 11Alive collapsed into unreadable blobs.
   --s nudges marks that read optically large or small at a shared height. */
.press-mark{
  display:block;flex:none;width:auto;
  height:calc(clamp(19px,2.3vw,30px) * var(--s,1));
  filter:grayscale(1) contrast(1.15) brightness(var(--dim,1)) opacity(.74);
  transition:filter .35s var(--ease);
}
.logo-strip:hover .logo-track{animation-play-state:paused}
.logo-item:hover .press-mark{filter:grayscale(0) opacity(1)}
@keyframes logoRoll{to{transform:translateX(-50%)}}
/* The marks are smaller on a phone, so the same duration crawls: 40px/sec against
   65 on a desktop. Shorter duration puts mobile back ahead of it. */
@media (max-width:760px){.logo-track{animation-duration:38s}}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* a compact row of channel links for a sub-brand */
.subsocial{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.subsocial a{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 16px;border-radius:999px;background:var(--card);
  border:1px solid var(--line-2);font-size:14px;font-weight:600;color:var(--ink);
  transition:transform .28s var(--ease),border-color .28s,box-shadow .28s;
}
.subsocial a svg{width:16px;height:16px;fill:currentColor}
.subsocial a:hover{transform:translateY(-2px);border-color:var(--ink-3);box-shadow:var(--shadow-sm)}

@media (max-width:760px){
  .panel[style*="grid-template-columns:1fr .8fr"]{grid-template-columns:1fr!important}
}

/* ==========================================================================
   images: tinted grounds, feature rows, record cards, flip cards
   ========================================================================== */

/* Nothing sits bare on the page. A document or product image gets a tinted
   ground with padding so it reads as a photographed object, not a stretched file. */
.img-tile{
  background:var(--tint,#e7ecf5);border-radius:var(--r);
  padding:clamp(12px,1.6vw,22px);display:grid;place-items:center;
}
.img-tile picture{display:block;width:100%;height:100%}
.img-tile img{
  display:block;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 16px 30px rgba(20,26,44,.28));
}

/* image beside text, alternating down the page */
.feature{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,3.4vw,52px);align-items:center;
  margin-bottom:clamp(26px,4vw,58px);
}
.feature:last-child{margin-bottom:0}
.feature-flip .feature-media{order:2}
.feature-media{margin:0}
.feature-media picture{
  display:block;aspect-ratio:var(--ar,4/3);border-radius:var(--r);overflow:hidden;
  background:var(--tint,#e7ecf5);box-shadow:var(--shadow-sm);
}
.feature-media img{width:100%;height:100%;object-fit:cover;display:block}
.feature-media.is-contained picture{padding:clamp(10px,1.4vw,18px)}
.feature-media.is-contained img{object-fit:contain}
.feature-body h3{font-size:clamp(20px,2.2vw,27px);margin-bottom:12px}
.feature-body p{color:var(--ink-2);margin-bottom:12px}
.feature-body p:last-child{margin-bottom:0}
@media (max-width:820px){
  .feature{grid-template-columns:1fr;gap:18px}
  .feature-flip .feature-media{order:0}
}

/* a card that leads with a picture */
.card-photo{
  display:flex;flex-direction:column;overflow:hidden;padding:0;
  background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
a.card-photo:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card-media{
  display:block;aspect-ratio:var(--ar,16/9);overflow:hidden;
  background:var(--tint,#e7ecf5);flex:none;
}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
a.card-photo:hover .card-media img{transform:scale(1.045)}
.card-body{padding:clamp(20px,2.6vw,30px);flex:1;display:flex;flex-direction:column}
@media (prefers-reduced-motion:reduce){
  .card-photo,.card-media img{transition:none}
  a.card-photo:hover .card-media img{transform:none}
}

/* the four records as cards, each certificate on its own coloured ground */
.rec-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px)}
.rec-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.rec-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.rec-card .img-tile{
  border-radius:0;padding:clamp(14px,1.7vw,20px);
  aspect-ratio:3/4;
}

.rec-card-body{padding:clamp(15px,1.8vw,20px);display:flex;flex-direction:column;gap:6px;flex:1}
.rec-card-figure{
  font-family:"Unbounded","Arial Black",sans-serif;font-weight:800;letter-spacing:-.035em;
  font-size:clamp(17px,1.85vw,23px);line-height:1.06;overflow-wrap:break-word;hyphens:auto;
  background:var(--hot);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.rec-card-title{font-size:14px;font-weight:600;line-height:1.35;color:var(--ink)}
.rec-card-meta{margin-top:auto;padding-top:8px;font-size:12.5px;color:var(--ink-3)}
@media (max-width:900px){.rec-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:430px){.rec-card-figure{font-size:15px}.rec-card-title{font-size:13px}}

/* a record's certificate on the front, the day itself on the back */
.flip{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  aspect-ratio:3/4;perspective:1500px;border-radius:var(--r);
  -webkit-tap-highlight-color:transparent;
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  transition:transform .5s var(--ease);
}
.flip:focus-visible{outline:3px solid var(--pink);outline-offset:6px}
/* on a desktop it turns over under the cursor; touch devices get it on scroll */
@media (hover:hover) and (pointer:fine){
  .flip:hover .flip-inner{transform:rotateY(180deg)}
}
.flip-inner{
  display:block;position:relative;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform .72s cubic-bezier(.2,.85,.25,1);
}
.flip.is-flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{
  position:absolute;inset:0;border-radius:var(--r);overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  box-shadow:var(--shadow-sm);
}
.flip-front{background:var(--tint,#e7ecf5);padding:clamp(12px,1.6vw,22px)}
.flip-front img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 14px 26px rgba(20,26,44,.22))}
.flip-back{transform:rotateY(180deg);background:var(--ink)}
.flip-back img{width:100%;height:100%;object-fit:cover;display:block}
.flip-tag{
  position:absolute;left:12px;bottom:12px;right:12px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:rgba(255,255,255,.92);
  border-radius:999px;padding:8px 14px;backdrop-filter:blur(6px);
}
.flip-back .flip-tag{color:#fff;background:rgba(20,24,34,.66)}
.flip-tag svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;flex:none}

/* less movement: the faces cross-fade and nothing leans */
@media (prefers-reduced-motion:reduce){
  .flip,.flip-inner{transition:none;transform:none!important}
  .flip-inner{transform-style:flat}
  .flip-face{backface-visibility:visible;transition:opacity .2s}
  .flip-back{transform:none;opacity:0}
  .flip.is-flipped .flip-front{opacity:0}
  .flip.is-flipped .flip-back{opacity:1}
  .rec-card{transition:none}
}

/* the championship panel: text beside its photo on desktop, stacked on a phone */
.champ-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(20px,3vw,40px);align-items:center;
}
@media (max-width:760px){
  .champ-split{grid-template-columns:minmax(0,1fr)}
}

/* ==========================================================================
   dart crossfire — a short volley across the hero when you land on the page
   ========================================================================== */
.has-dartfire{position:relative}
.has-dartfire > .wrap{position:relative;z-index:1}
.dartfire{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;
}
.dartfire-back{z-index:0}
.dartfire-front{z-index:2}
/* no volley for anyone who asked for less movement */
@media (prefers-reduced-motion:reduce){.dartfire{display:none}}

/* ==========================================================================
   about intro — the copy on the left, Jared standing on the right
   ========================================================================== */
.intro-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:clamp(24px,4vw,64px);align-items:center;
}
.intro-copy p{max-width:62ch}
.intro-portrait{
  position:relative;margin:0;display:flex;justify-content:center;align-items:flex-end;
}
/* a soft wash of colour behind him, which is half the point of the picture */
.intro-portrait::before{
  content:"";position:absolute;left:50%;top:4%;transform:translateX(-50%);
  width:min(112%,330px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(255,61,143,.34),rgba(255,122,26,.18) 46%,transparent 72%);
}
.intro-portrait img{
  position:relative;display:block;width:auto;
  height:clamp(340px,44vw,560px);
  filter:drop-shadow(0 26px 34px rgba(20,26,44,.24));
}
/* On a phone a full-length cut-out is only ~85px wide, so floating it in open
   space left it stranded. It gets a panel to stand in instead: a tinted band it
   is anchored to and clipped by, with a soft contact shadow under the shoes so
   he is grounded rather than hovering. */
@media (max-width:860px){
  .intro-split{grid-template-columns:1fr;gap:26px}
  .intro-copy p{max-width:none}
  .intro-portrait{
    width:100%;align-items:flex-end;justify-content:center;overflow:hidden;
    border-radius:var(--r-lg);padding-top:26px;
    background:
      radial-gradient(120% 78% at 50% 108%,rgba(20,26,44,.16),transparent 58%),
      linear-gradient(168deg,rgba(255,61,143,.20),rgba(255,122,26,.13) 52%,rgba(124,92,255,.17));
  }
  .intro-portrait::before{
    top:auto;bottom:8px;width:min(58%,190px);height:16px;aspect-ratio:auto;
    background:radial-gradient(ellipse at 50% 50%,rgba(20,26,44,.30),transparent 70%);
    filter:blur(3px);
  }
  .intro-portrait img{
    height:clamp(330px,92vw,430px);
    margin-bottom:-2px;
    filter:none;
  }
}

/* ==========================================================================
   the-floor: the follow ask inside the dark countdown panel
   ========================================================================== */
.floor-follow{
  margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 26px;
}
.floor-follow p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.8);max-width:44ch}
.floor-follow .social{margin-top:0}

/* photo credits under a group of licensed photographs */
.photo-credits{font-size:12.5px;line-height:1.6;color:var(--ink-3);margin-top:16px;max-width:none}
.photo-credits a{text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line-2)}
.photo-credits a:hover{color:var(--ink);text-decoration-color:currentColor}

/* the blaster battle films: two across on a desktop, one on a phone */
.film-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.8vw,32px) clamp(16px,2.4vw,26px)}
@media (max-width:640px){.film-grid{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   motion: blocks land as they scroll into view
   Only applies once the head script has marked the page with .js, so without
   JavaScript everything is simply there. The base layout decides what reveals,
   staggers grids, and hands each block back to its own styles once it lands.
   ========================================================================== */
.js .reveal{
  opacity:0;
  transform:translate3d(var(--rx0,0px),var(--ry0,36px),0) rotate(var(--rr0,0deg)) scale(.97);
  transition:opacity .6s var(--ease),transform 1.05s cubic-bezier(.2,1.22,.38,1);
  transition-delay:var(--d,0ms);
}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.instant{transition:none}
/* the hairline after an eyebrow draws itself in */
.js .reveal .eyebrow::after{transform-origin:left center;transition:transform .9s var(--ease);transition-delay:calc(var(--d,0ms) + 220ms)}
.js .reveal:not(.in) .eyebrow::after{transform:scaleX(0)}
/* photos settle as they arrive, like a camera finding its framing */
@keyframes settle{from{transform:scale(1.12)}to{transform:none}}
.js .reveal.in:not(.instant) .photo img,
.js .reveal.in:not(.instant) .card-media img,
.js .reveal.in:not(.instant) .feature-media img,
.js .reveal.in:not(.instant) .vid-play img,
.js .photo-row > .reveal.in:not(.instant) img{animation:settle 1.6s cubic-bezier(.16,1,.3,1) backwards;animation-delay:var(--d,0ms)}
/* a figure that has just finished counting up gives a small pop */
@keyframes figPop{35%{transform:scale(1.07)}}
.record-figure.counted,.rec-card-figure.counted{animation:figPop .5s var(--ease);transform-origin:left center}
/* stadium cards: the photo leans in under the cursor */
.venue .photo img{transition:transform .8s var(--ease)}
.venue:hover .photo img{transform:scale(1.05)}
/* full-width photos drift slightly as the page scrolls past them */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes drift{from{transform:translate3d(0,-3%,0) scale(1.08)}to{transform:translate3d(0,3%,0) scale(1.08)}}
    .wrap > .photo picture img{animation:drift linear both;animation-timeline:view();animation-range:cover}
  }
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .reveal .eyebrow::after{transform:none}
  .record-figure.counted,.rec-card-figure.counted{animation:none}
}

/* ==========================================================================
   Blaster Battle: darts that stick in the section headings, stadium cards that lean
   ========================================================================== */
.thunk-at{position:relative}
.thunk{
  position:absolute;left:-.06em;top:50%;width:1.45em;height:.414em;margin-top:-.207em;
  transform-origin:0 50%;opacity:0;pointer-events:none;
}
.thunk.live{opacity:1}
.thunk img{display:block;width:100%;height:100%;max-width:none;transform:scaleX(-1);filter:drop-shadow(0 5px 5px rgba(28,31,38,.2))}
.thunk-ring{
  position:absolute;left:-.06em;top:50%;width:.8em;height:.8em;margin:-.4em 0 0 -.4em;
  border-radius:50%;border:2px solid var(--pink);opacity:0;pointer-events:none;
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .venue{position:relative}
  .venue:hover{transform:perspective(900px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translateY(-4px)}
  .venue::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
    background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.75),rgba(255,255,255,0) 60%);mix-blend-mode:soft-light;
  }
  .venue:hover::after{opacity:1}
  .venue:hover .photo img{transform:scale(1.08) translate3d(var(--px,0px),var(--py,0px),0)}
}
@media (prefers-reduced-motion:reduce){.thunk-at{display:none}}

/* ==========================================================================
   The Floor: the grid of champions lights up square by square
   ========================================================================== */
.feature-media.has-board{position:relative}
.feature-media.has-board img{animation:none!important}   /* the squares line up with the photo's grid, so it holds still */
.board{
  position:absolute;inset:0;display:grid;grid-template:repeat(10,1fr)/repeat(10,1fr);
  border-radius:var(--r);overflow:hidden;pointer-events:none;
}
.board i{position:relative;background:#0d1433;border:1px solid rgba(110,150,255,.2)}
.board i.on{z-index:1;animation:boardCell .95s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes boardCell{
  14%{opacity:1;background-color:var(--c);border-color:var(--c);box-shadow:0 0 22px 3px var(--c)}
  100%{opacity:0;background-color:var(--c);border-color:var(--c);box-shadow:0 0 0 0 var(--c)}
}
.board i.me.on{z-index:2;animation:boardMe 1.3s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes boardMe{
  16%{background-color:var(--pink);border-color:var(--pink);box-shadow:0 0 34px 8px rgba(255,61,143,.85)}
  100%{background-color:rgba(255,61,143,0);border-color:transparent;box-shadow:inset 0 0 0 3px var(--pink),0 0 20px 2px rgba(255,61,143,.6)}
}
.board i.me::after{
  content:"Me";position:absolute;left:50%;bottom:7%;transform:translateX(-50%) scale(0);
  font:700 10px/1 "Unbounded","Arial Black",sans-serif;color:#fff;background:var(--pink);
  padding:4px 7px 3px;border-radius:99px;box-shadow:0 4px 12px rgba(214,0,90,.35);
  transition:transform .45s cubic-bezier(.2,1.5,.4,1) .55s;
}
.board i.me.on::after{transform:translateX(-50%) scale(1)}
@media print{.board{display:none}}

/* ==========================================================================
   fade-ups: blocks that fade up in order as a page opens. Only with JavaScript, never with
   reduced motion, and arriving through the dart transition waits for it to clear.
   ========================================================================== */
@keyframes fadeUp{from{opacity:0;transform:translate3d(0,18px,0) scale(.985)}}
.js .fade-up{animation:fadeUp .8s var(--ease) backwards;animation-delay:calc(var(--i,0) * 70ms + var(--enter-wait,60ms))}
.js .fade-up-photo .photo{animation:fadeUp .9s var(--ease) backwards;animation-delay:calc(var(--enter-wait,60ms) + 640ms)}

/* ==========================================================================
   floating photos: they bob out of step with each other, drift apart as the page scrolls past,
   and lean toward the cursor
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .float-set .photo picture{animation:floaty 9s ease-in-out infinite;box-shadow:0 30px 55px -32px rgba(28,31,38,.5)}
  .float-set .photo-row .photo:nth-child(1) picture{animation-duration:7s;animation-delay:-2.3s;--tip:-.45deg}
  .float-set .photo-row .photo:nth-child(2) picture{animation-duration:8s;animation-delay:-5.2s;--tip:.45deg}
  @keyframes floaty{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -11px;rotate:var(--tip,.2deg)}}
  @supports (animation-timeline: view()){
    .float-set .photo{animation:floatApart linear both;animation-timeline:view();animation-range:cover}
    .float-set > .photo{--lift:14px}
    .float-set .photo-row .photo:nth-child(1){--lift:46px}
    .float-set .photo-row .photo:nth-child(2){--lift:24px}
    @keyframes floatApart{from{translate:0 var(--lift,20px)}to{translate:0 calc(var(--lift,20px) * -1)}}
  }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .float-set .photo picture{transition:transform .6s var(--ease)}
  .float-set .photo:hover picture{transform:perspective(1100px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg))}
  .float-set .photo picture::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;mix-blend-mode:soft-light;
    background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.75),rgba(255,255,255,0) 55%);
  }
  .float-set .photo:hover picture::after{opacity:1}
  .float-set .photo img{transition:scale .8s var(--ease),translate .8s var(--ease)}
  .float-set .photo:hover img{scale:1.05;translate:var(--px,0px) var(--py,0px)}
}

/* ==========================================================================
   connect: the account cards drift toward the cursor as it moves over them
   ========================================================================== */
.soc-grid{position:relative}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .soc-grid.live .soc-card{
    transform:perspective(700px) translate3d(var(--mx,0px),var(--my,0px),0) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
    transition:transform .8s cubic-bezier(.2,1.45,.35,1),box-shadow .35s;
  }
  .soc-grid.live .soc-card .brand-mark{translate:var(--ix,0px) var(--iy,0px);transition:translate .8s cubic-bezier(.2,1.45,.35,1),scale .4s cubic-bezier(.2,1.6,.4,1)}
  .soc-grid.tracking .soc-card{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
  .soc-grid.tracking .soc-card .brand-mark{transition:translate .3s cubic-bezier(.2,.7,.2,1),scale .4s cubic-bezier(.2,1.6,.4,1)}
  .soc-card:hover{box-shadow:var(--shadow)}
  .soc-card:hover .brand-mark{scale:1.14}
}

/* ==========================================================================
   press: the list reads as a timeline. Year markers, a line down the left that fills as you
   read, a dot for every story, and rows that slide in from alternating sides.
   ========================================================================== */
.press-year{display:flex;align-items:center;gap:14px;padding:30px 22px 10px;--sy:16px}
.press-year:first-child{padding-top:2px}
.press-year b{position:relative;font-family:"Unbounded","Arial Black",sans-serif;font-weight:800;font-size:clamp(26px,3vw,38px);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.press-year-n{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.press-year::after{content:"";flex:1;height:1px;background:var(--line-2)}
@media (min-width:661px){
  .press-list{position:relative;isolation:isolate;padding-left:40px;view-timeline:--press block}
  .press-list::before{content:"";position:absolute;z-index:-1;left:13px;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--line-2)}
  .press-item{position:relative}
  .press-item::before{
    content:"";position:absolute;left:-33px;top:25px;width:12px;height:12px;border-radius:50%;
    background:var(--ink-3);box-shadow:0 0 0 4px var(--bg);transition:transform .5s cubic-bezier(.2,1.7,.4,1) .15s;
  }
  .press-item.tier-1::before{background:var(--pink)}
  .press-year b::before{
    content:"";position:absolute;left:-58px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;
    background:var(--card);border:4px solid var(--pink);box-shadow:0 0 0 4px var(--bg);
  }
  .js .press-item:not(.tl-lit)::before{transform:scale(0)}
}
@supports (animation-timeline: view()){
  @media (min-width:661px) and (prefers-reduced-motion:no-preference){
    .press-list::after{
      content:"";position:absolute;z-index:-1;left:13px;top:10px;bottom:10px;width:2px;border-radius:2px;
      background:linear-gradient(var(--pink),var(--orange));transform-origin:50% 0;
      animation:spineFill linear both;animation-timeline:--press;animation-range:cover 50vh cover calc(100% - 50vh);
    }
    @keyframes spineFill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  }
}
.js .tl-hide{
  opacity:0;transform:translate3d(var(--sx,0px),var(--sy,0px),0) rotate(var(--sr,0deg));
  transition:opacity .55s var(--ease),transform .95s cubic-bezier(.2,1.15,.35,1);
}
.js .tl-hide.tl-in{opacity:1;transform:none}
/* story rows fly in from past the edge of the window, so they stay solid the whole way across */
.js .press-item.tl-hide{opacity:1;transition:transform 1.05s cubic-bezier(.2,1.04,.3,1)}
.press-section{overflow-x:clip}
.js .tl-snap{transition:none!important}
@media (prefers-reduced-motion:reduce){
  .js .fade-up,.js .fade-up-photo .photo{animation:none}
  .js .tl-hide{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   story: a chapter with several photos shows them in one player, like an Instagram post,
   with arrows on the photo and dots underneath; tapping a photo opens the viewer
   ========================================================================== */
.shots{
  display:grid;grid-template-columns:34px minmax(0,1fr) 34px;column-gap:10px;align-items:center;
  margin-top:18px;max-width:608px;
}
.shot-frame{grid-column:2;grid-row:1;position:relative;aspect-ratio:var(--ar,4/3);border-radius:var(--r);overflow:hidden;background:var(--line);box-shadow:var(--shadow-sm)}
.shot-track{
  display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;
}
.shot-track::-webkit-scrollbar{display:none}
.shot-track:focus-visible{outline:3px solid var(--pink);outline-offset:-3px}
.shot-slide{flex:0 0 100%;height:100%;padding:0;border:0;background:none;scroll-snap-align:center;scroll-snap-stop:always;cursor:zoom-in}
.shot-slide picture{display:block;width:100%;height:100%}
.shot-slide img{display:block;width:100%;height:100%;object-fit:cover}
.shot-slide:focus-visible{outline:3px solid var(--pink);outline-offset:-3px}
/* the arrows sit just outside the photo, one on each side; their columns are always there, so the
   photo never changes size when an arrow goes away at the end of the row */
.shot-arrow{
  width:34px;height:34px;display:grid;place-items:center;visibility:hidden;
  padding:0;border:0;border-radius:50%;background:#fff;color:var(--ink);
  box-shadow:0 4px 14px rgba(20,24,34,.16),0 0 0 1px var(--line);cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s,color .2s;
}
.shots.live .shot-arrow{visibility:visible}
.shot-arrow:hover{transform:scale(1.1);color:var(--pink-ink);box-shadow:0 6px 18px rgba(20,24,34,.2),0 0 0 1px var(--line-2)}
.shot-arrow:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.shot-arrow svg{width:16px;height:16px}
.shot-prev{grid-column:1;grid-row:1}
.shot-next{grid-column:3;grid-row:1}
.shot-dots{grid-column:2;grid-row:2;display:flex;visibility:hidden;justify-content:center;gap:5px;margin-top:10px}
.shots.live .shot-dots{visibility:visible}
@media (max-width:660px){
  .shots{grid-template-columns:30px minmax(0,1fr) 30px;column-gap:6px}
  .shot-arrow{width:30px;height:30px}
  .shot-arrow svg{width:14px;height:14px}
}
.shot-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-2);transition:background .25s,transform .25s var(--ease)}
.shot-dots i.on{background:var(--pink);transform:scale(1.3)}
html:has(.shotbox[open]){overflow:hidden}
.shotbox{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}
.shotbox[open]{display:grid;place-items:center}
.shotbox::backdrop{background:rgba(12,14,20,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.shotbox-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;padding:64px 76px 26px}
.shotbox-img{
  display:block;width:auto;height:auto;max-width:min(100%,var(--nw,1600px));max-height:calc(100dvh - 170px);
  border-radius:var(--r);background:#111;box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.shotbox-cap{color:rgba(255,255,255,.88);font-size:14.5px;line-height:1.5;text-align:center;max-width:62ch}
.shotbox-count{display:block;margin-top:6px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.shotbox-btn{
  position:absolute;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;transition:background .2s;
}
.shotbox-btn:hover{background:rgba(255,255,255,.26)}
.shotbox-btn:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.shotbox-btn svg{width:20px;height:20px}
.shotbox-close{top:14px;right:14px}
.shotbox-prev,.shotbox-next{top:50%;margin-top:-23px}
.shotbox-prev{left:14px}
.shotbox-next{right:14px}
.shotbox.single .shotbox-prev,.shotbox.single .shotbox-next{display:none}
@media (max-width:660px){
  .shotbox-fig{padding:64px 12px 90px}
  .shotbox-img{max-height:calc(100dvh - 230px)}
  .shotbox-prev,.shotbox-next{top:auto;bottom:22px;margin-top:0}
  .shotbox-prev{left:calc(50% - 58px)}
  .shotbox-next{right:calc(50% - 58px)}
}
@media (prefers-reduced-motion:no-preference){
  .shotbox[open] .shotbox-fig{animation:shotIn .35s var(--ease)}
  .shotbox[open]::backdrop{animation:shotFade .3s ease}
  @keyframes shotIn{from{opacity:0;transform:scale(.96)}}
  @keyframes shotFade{from{opacity:0}}
}