/* ==========================================================
   PANTHERA — panthera.marketing link hub
   Poppins display + body · Roboto Mono labels
   Ink ground, orchid highlighting
   ========================================================== */

@font-face{font-family:'Poppins';font-weight:300;font-display:swap;src:url('assets/fonts/Poppins-300.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-weight:400;font-display:swap;src:url('assets/fonts/Poppins-400.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-weight:500;font-display:swap;src:url('assets/fonts/Poppins-500.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-weight:600;font-display:swap;src:url('assets/fonts/Poppins-600.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-weight:700;font-display:swap;src:url('assets/fonts/Poppins-700.woff2') format('woff2');}
@font-face{font-family:'Roboto Mono';font-weight:400;font-display:swap;src:url('assets/fonts/RobotoMono-400.woff2') format('woff2');}
@font-face{font-family:'Roboto Mono';font-weight:500;font-display:swap;src:url('assets/fonts/RobotoMono-500.woff2') format('woff2');}
/* Clash Display stays installed — swap --display to it for an alternate look */
@font-face{font-family:'Clash Display';font-weight:500;font-display:swap;src:url('assets/fonts/ClashDisplay-500.woff2') format('woff2');}
@font-face{font-family:'Clash Display';font-weight:600;font-display:swap;src:url('assets/fonts/ClashDisplay-600.woff2') format('woff2');}

:root{
  --ink:#121212;
  --surface:#181818;
  --surface-2:#1F1F1F;
  --paper:#F4F2ED;
  --dim:rgba(244,242,237,.60);
  --faint:rgba(244,242,237,.36);
  --line:rgba(244,242,237,.11);
  --line-2:rgba(244,242,237,.20);
  --orchid:#B86FC9;
  --orchid-soft:#D9A9E0;
  --lilac:#BA9AC2;
  --violet:#6E4E9E;
  --display:'Poppins',-apple-system,sans-serif;
  --body:'Poppins',-apple-system,sans-serif;
  --mono:'Roboto Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,.8,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  min-height:100svh;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;}

/* ---------- atmosphere ---------- */
.spot{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(105% 40% at 50% -8%, rgba(184,111,201,.16), transparent 64%),
    radial-gradient(78% 38% at 10% 36%, rgba(110,78,158,.10), transparent 62%),
    radial-gradient(80% 42% at 92% 74%, rgba(184,111,201,.11), transparent 62%);
}
.grain{
  position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(5) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)}
  50%{transform:translate(1.5%,-1.5%)} 75%{transform:translate(-1%,2%)}
}

.wrap{
  position:relative;z-index:2;
  width:100%;max-width:470px;margin:0 auto;
  padding:clamp(30px,7vw,46px) 20px calc(40px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
}

/* ---------- entrance ---------- */
@keyframes rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
.head,.ticker,.latest,.section-label,.faces,.pair,.row,.social,.foot{animation:rise .7s var(--ease) both;}
.head{animation-delay:.02s}.ticker{animation-delay:.08s}.latest{animation-delay:.13s}
.section-label{animation-delay:.18s}.faces{animation-delay:.22s}.pair{animation-delay:.26s}
.row:nth-of-type(1){animation-delay:.28s}.row:nth-of-type(2){animation-delay:.32s}
.row:nth-of-type(3){animation-delay:.36s}.social{animation-delay:.40s}.foot{animation-delay:.46s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- header ---------- */
.head{text-align:center;margin-bottom:18px;position:relative;}
.head::before{
  content:"";position:absolute;left:50%;top:-26px;transform:translateX(-50%);
  width:270px;height:170px;pointer-events:none;
  background:radial-gradient(circle,rgba(184,111,201,.30),transparent 68%);
  filter:blur(14px);
}
.lockup{position:relative;width:min(72%,250px);height:auto;margin:0 auto;}
.rule-row{display:flex;align-items:center;gap:13px;margin-top:17px;}
.hair{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-2));}
.rule-row .hair:last-child{background:linear-gradient(90deg,var(--line-2),transparent);}
.tagline{
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--orchid-soft);
  white-space:nowrap;
}
.handle{
  display:inline-block;margin-top:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--faint);
  transition:color .3s;
}
.handle:hover{color:var(--orchid-soft);}

/* ---------- ticker ---------- */
.ticker{
  overflow:hidden;margin-bottom:22px;padding:9px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
}
.ticker-track{
  display:flex;align-items:center;gap:11px;width:max-content;
  animation:slide 26s linear infinite;
}
.ticker span{
  font-family:var(--mono);font-size:9px;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:var(--dim);white-space:nowrap;
}
.ticker i{color:var(--orchid);font-style:normal;font-size:9px;}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- section labels ---------- */
.section-label{
  display:flex;align-items:center;gap:12px;
  margin:26px 0 12px;
}
.section-label span{
  font-family:var(--mono);font-size:9px;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--orchid-soft);
  display:inline-flex;align-items:center;gap:9px;
}
.section-label span::before{
  content:"";width:14px;height:1px;background:var(--orchid);
}
.section-label::after{content:"";flex:1;height:1px;background:var(--line);}

/* ---------- LATEST ---------- */
.latest{
  position:relative;display:grid;grid-template-columns:112px 1fr;gap:16px;
  background:linear-gradient(150deg,rgba(184,111,201,.11),rgba(31,31,31,.96) 46%);
  border:1px solid rgba(184,111,201,.34);border-radius:8px;
  padding:14px;align-items:center;overflow:hidden;
  box-shadow:0 0 0 1px rgba(184,111,201,.05), 0 12px 40px -18px rgba(184,111,201,.55);
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s;
}
.latest::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--orchid),var(--violet));
}
.latest:hover{
  border-color:var(--orchid);transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(184,111,201,.12), 0 20px 52px -18px rgba(184,111,201,.7);
}
.latest-media{display:block;border-radius:5px;overflow:hidden;background:#0d0d0d;}
.latest-media img{width:100%;height:140px;object-fit:cover;object-position:50% 20%;}
.latest-body{display:flex;flex-direction:column;min-width:0;}
.live{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:8.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--orchid-soft);
  margin-bottom:8px;
}
.live .dot{
  width:5px;height:5px;border-radius:50%;background:var(--orchid);
  box-shadow:0 0 0 0 rgba(184,111,201,.7);animation:pulse 2.2s infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(184,111,201,0)}100%{box-shadow:0 0 0 0 rgba(184,111,201,0)}}
.eyebrow{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);
}
.latest-name{
  font-family:var(--display);font-weight:600;font-size:27px;
  line-height:1.12;margin:4px 0 6px;letter-spacing:-.02em;
}
.latest-line{font-size:12px;font-weight:300;line-height:1.55;color:var(--dim);}
.latest-cta{
  font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--orchid-soft);margin-top:11px;
  display:inline-flex;align-items:center;gap:7px;
}
.latest-cta .arw{transition:transform .3s var(--ease);}
.latest:hover .latest-cta .arw{transform:translateX(4px);}

/* ---------- faces ---------- */
.faces{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.face{
  position:relative;border-radius:6px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s;
}
.face-img{display:block;position:relative;overflow:hidden;}
.face-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(10,10,10,.9));
}
.face img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.1s var(--ease),filter .4s;filter:saturate(.92);}
.face:hover{transform:translateY(-4px);border-color:rgba(184,111,201,.55);box-shadow:0 14px 34px -18px rgba(184,111,201,.75);}
.face:hover img{transform:scale(1.07);filter:saturate(1.04);}
.face-name{
  position:absolute;left:0;right:0;bottom:9px;z-index:2;text-align:center;
  font-family:var(--mono);font-size:8px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--paper);
  text-shadow:0 1px 8px rgba(0,0,0,.75);
}

/* ---------- chips ---------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px;}
.chip{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 10px;border:1px solid var(--line-2);border-radius:6px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--paper);
  background:rgba(255,255,255,.012);
  transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease);
}
.chip .arw{color:var(--faint);transition:transform .3s var(--ease),color .3s;}
.chip:hover{background:rgba(184,111,201,.12);border-color:var(--orchid);transform:translateY(-2px);}
.chip:hover .arw{color:var(--orchid-soft);transform:translateX(3px);}

/* ---------- link rows ---------- */
.row{
  position:relative;display:grid;grid-template-columns:30px 1fr 16px;
  align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:15px 16px;margin-top:9px;overflow:hidden;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s;
}
.row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--orchid);opacity:0;transition:opacity .3s;
}
.row:hover{
  background:var(--surface-2);border-color:rgba(184,111,201,.42);transform:translateY(-2px);
  box-shadow:0 12px 30px -20px rgba(184,111,201,.8);
}
.row:hover::before{opacity:1;}
.row:active{transform:translateY(0);}
.idx{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.1em;
  color:var(--orchid);opacity:.75;
}
.row-body{min-width:0;}
.row-t{
  display:block;font-family:var(--display);font-weight:500;
  font-size:15.5px;letter-spacing:-.01em;line-height:1.25;
}
.row-s{
  display:block;font-size:11px;font-weight:300;color:var(--dim);margin-top:2px;line-height:1.45;
}
.row .arw{color:var(--faint);font-size:14px;transition:transform .3s var(--ease),color .3s;text-align:right;}
.row:hover .arw{transform:translateX(4px);color:var(--orchid-soft);}

/* the loudest highlight on the page */
.row.accent{
  background:linear-gradient(135deg,rgba(184,111,201,.22),rgba(110,78,158,.13));
  border-color:rgba(184,111,201,.55);
  box-shadow:0 0 0 1px rgba(184,111,201,.06), 0 14px 40px -20px rgba(184,111,201,.85);
}
.row.accent::before{opacity:1;}
.row.accent .idx{color:var(--orchid-soft);opacity:1;}
.row.accent .row-s{color:rgba(244,242,237,.76);}
.row.accent .arw{color:var(--orchid-soft);}
.row.accent:hover{
  border-color:var(--orchid);
  background:linear-gradient(135deg,rgba(184,111,201,.3),rgba(110,78,158,.18));
  box-shadow:0 0 0 1px rgba(184,111,201,.14), 0 20px 50px -20px rgba(184,111,201,1);
}

/* ---------- social ---------- */
.social{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.social a{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 4px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);
  transition:background .3s,border-color .3s,transform .3s var(--ease),box-shadow .3s;
}
.social a:hover{
  background:rgba(184,111,201,.11);border-color:rgba(184,111,201,.5);
  transform:translateY(-3px);box-shadow:0 12px 28px -18px rgba(184,111,201,.8);
}
.social svg{width:18px;height:18px;fill:var(--paper);transition:fill .3s;}
.social a:hover svg{fill:var(--orchid-soft);}
.social span{
  font-family:var(--mono);font-size:7.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);transition:color .3s;
}
.social a:hover span{color:var(--paper);}

/* ---------- footer ---------- */
.foot{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);text-align:center;}
.foot p{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint);line-height:2.1;
}
.foot .foot-dim{color:var(--lilac);opacity:.5;}

/* ---------- small phones ---------- */
@media(max-width:344px){
  .latest{grid-template-columns:92px 1fr;gap:13px;}
  .latest-media img{height:118px;}
  .latest-name{font-size:23px;}
  .social{grid-template-columns:repeat(3,1fr);}
}

/* ---------- coming-soon states (no dead links) ---------- */
.row.soon{
  cursor:default;background:rgba(255,255,255,.018);
  border-color:var(--line);border-style:dashed;
}
.row.soon:hover{transform:none;box-shadow:none;background:rgba(255,255,255,.018);border-color:var(--line);}
.row.soon::before{display:none;}
.row.soon .row-t{color:var(--dim);}
.row.soon .row-s{color:var(--faint);}
.row.soon .idx{color:var(--faint);opacity:.7;}
.soon-tag{
  justify-self:end;white-space:nowrap;
  font-family:var(--mono);font-size:7.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orchid-soft);
  border:1px solid rgba(184,111,201,.42);border-radius:100px;padding:4px 9px;
}
.row.soon{grid-template-columns:30px 1fr auto;}

.social .soon{
  display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;
  padding:14px 4px;border:1px dashed var(--line);border-radius:8px;
  background:rgba(255,255,255,.018);cursor:default;
}
.social .soon svg{fill:var(--faint);}
.social .soon span{color:var(--faint);}
.social .soon .soon-dot{
  position:absolute;top:5px;right:6px;font-style:normal;
  font-family:var(--mono);font-size:6.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orchid-soft);
}