/* =========================================================
   Abby Alonzo — visual identity matched to alonzosports.com
   Display: Fahkwang   Body: Jost   Mono: Jost (tracked)
   Ink #292929 on white, with #F2F2F2 bands.
   ========================================================= */
:root{
  --ink:#292929;
  --paper:#ffffff;
  --band:#f2f2f2;
  --line:#d8d8d8;
  --muted:#6b6b6b;
  --maxw:1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Jost', -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, Helvetica, Arial, sans-serif;
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto;} /* height:auto so width/height attrs can't override aspect-ratio */
a{color:inherit;}

.display{
  font-family:'Fahkwang', 'Jost', Helvetica, Arial, sans-serif;
  font-weight:300;
}
.tracked{ letter-spacing:0.18em; text-transform:uppercase; }

/* ---------- HEADER ---------- */
header{ background:var(--paper); }
.head-inner{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.head-socials{ display:flex; justify-content:flex-end; gap:16px; padding:16px 0 12px; }
.head-socials a{ color:var(--ink); opacity:0.85; display:flex; }
.head-socials a:hover{ opacity:1; }
.head-socials svg{ width:17px; height:17px; fill:currentColor; }
.head-rule{ border-top:1px solid var(--ink); }
.head-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px 0 22px;
}
.logo{
  font-size:22px; letter-spacing:0.09em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
}
nav.links{ display:flex; gap:26px; }
nav.links a{
  font-size:13.5px; letter-spacing:0.07em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); opacity:0.75;
  padding-bottom:3px; border-bottom:1px solid transparent; white-space:nowrap;
}
nav.links a:hover{ opacity:1; }
nav.links a.active{ opacity:1; border-bottom-color:var(--ink); }
@media (max-width:860px){
  .head-bar{ flex-wrap:wrap; gap:12px; padding-bottom:14px; }
  nav.links{
    order:3; width:100%; overflow-x:auto; flex-wrap:nowrap;
    gap:20px; padding-bottom:4px; scrollbar-width:none;
  }
  nav.links::-webkit-scrollbar{ display:none; }
}

/* ---------- HOME ---------- */
.hero{ max-width:var(--maxw); margin:0 auto; padding:54px 28px 0; text-align:center; }
.hero-name{
  font-size:clamp(38px, 7vw, 62px); letter-spacing:0.09em;
  text-transform:uppercase; line-height:1.1;
}
.hero-tag{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin:18px auto 0; max-width:760px;
}
.hero-tag::before, .hero-tag::after{
  content:""; flex:1; height:1px; background:var(--ink); opacity:0.55;
}
.hero-tag span{
  font-family:'Fahkwang','Jost',Helvetica,Arial,sans-serif; font-weight:300;
  font-size:clamp(13px, 2.2vw, 20px); letter-spacing:0.2em; white-space:nowrap;
}
.hero-photos{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;
  max-width:var(--maxw); margin:44px auto 0; padding:0 28px 64px;
}
.hero-photos img{ width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; }
@media (max-width:720px){
  .hero-photos{
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:0 28px 40px; scrollbar-width:none;
  }
  .hero-photos::-webkit-scrollbar{ display:none; }
  .hero-photos img{ flex:0 0 74%; scroll-snap-align:center; }
  .hero-tag{ gap:10px; }
}

/* ---------- PAGE SHELL ---------- */
.page{ max-width:var(--maxw); margin:0 auto; padding:56px 28px 76px; }
.page-title{
  font-size:clamp(30px, 5.4vw, 44px); letter-spacing:0.06em;
  text-transform:uppercase; text-align:center; text-wrap:balance;
}
.page-sub{
  text-align:center; font-size:17px; color:var(--ink);
  margin-top:10px; font-weight:300;
}
.page-intro{
  max-width:620px; margin:20px auto 0; text-align:center;
  font-size:15.5px; color:var(--muted);
}

/* ---------- ABOUT ---------- */
.about-band{ background:var(--band); }
.about-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch;
}
.about-photo{ min-height:100%; }
.about-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.about-copy{ padding:56px 48px; display:flex; flex-direction:column; justify-content:center; }
.about-copy h1{
  font-family:'Fahkwang','Jost',Helvetica,Arial,sans-serif; font-weight:300;
  font-size:clamp(28px,4.4vw,40px); letter-spacing:0.06em; text-transform:uppercase;
  text-align:center; margin-bottom:22px;
}
.about-copy p{ font-size:15.5px; margin-bottom:16px; text-align:center; }
.about-copy p:last-child{ margin-bottom:0; }
.about-copy p.close{ font-weight:400; }
@media (max-width:820px){
  .about-grid{ grid-template-columns:1fr; }
  .about-photo img{ height:auto; aspect-ratio:4/5; }
  .about-copy{ padding:40px 28px; }
}

/* ---------- SECTION (media page) ---------- */
.section{ margin-top:52px; }
.section:first-of-type{ margin-top:36px; }
.section-head{
  display:flex; align-items:baseline; gap:14px;
  border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:20px;
}
.section-label{
  font-size:13px; letter-spacing:0.18em; text-transform:uppercase; font-weight:400;
}
.section-note{ font-size:13.5px; color:var(--muted); margin-left:auto; text-align:right; }
.section-blurb{ font-size:14.5px; color:var(--muted); margin:-8px 0 18px; max-width:640px; }

/* ---------- CARDS ---------- */
.carousel{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:12px; scrollbar-width:thin;
}
.carousel .card{ flex:0 0 300px; scroll-snap-align:start; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:24px; }
.card{
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  transition:opacity .18s ease, transform .18s ease;
}
.card:hover{ opacity:0.78; transform:translateY(-2px); }
/* One tile shape everywhere, matching YouTube's. Tall Instagram graphics get
   cropped to fit rather than sitting in empty space. */
.card-thumb{
  aspect-ratio:16/9; background:#ededea; overflow:hidden; position:relative;
}
.card-thumb img{
  position:relative; z-index:1; width:100%; height:100%;
  object-fit:cover; object-position:center 38%;  /* bias up: faces sit above centre in tall shots */
}
.card-thumb .ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:#9a9a9a;
}
.card-tag{
  font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--muted); margin-top:12px;
}
.card-title{
  font-size:16px; font-weight:400; line-height:1.35; margin-top:5px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card-meta{ font-size:13px; color:var(--muted); margin-top:5px; }
.card-format{
  align-self:flex-start; font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  border:1px solid var(--line); padding:3px 8px; margin-top:9px; color:var(--muted);
}
.loading, .error, .empty{
  font-size:13.5px; color:var(--muted); padding:18px 0; letter-spacing:0.02em;
}
.error a{ color:var(--ink); }

/* ---------- PERFORMANCE STATS ---------- */
.stats{
  display:grid; grid-template-columns:repeat(6, 1fr);
  gap:22px 28px; margin:34px auto 0; max-width:940px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:26px 0;
}
.stat{ text-align:center; }
.stat-n{
  font-size:clamp(26px,3.6vw,34px); letter-spacing:0.01em; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.stat-l{
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted); margin-top:7px; text-wrap:balance;
}
.stats-note{
  text-align:center; font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--muted); margin-top:14px;
}
/* 6 across, then 3, then 2 — never one stat stranded on its own row */
@media (max-width:900px){ .stats{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:520px){ .stats{ grid-template-columns:repeat(2, 1fr); } }
/* 6 across, then 3, then 2 — never a single stat stranded on its own row */
@media (max-width:900px){ .stats{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:520px){ .stats{ grid-template-columns:repeat(2, 1fr); } }

/* ---------- VIDEO CARDS + PLAYER ---------- */
.card.is-video .card-thumb{ cursor:pointer; }
.play{
  position:absolute; z-index:2; left:50%; top:50%; width:52px; height:52px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:rgba(20,20,20,0.55); backdrop-filter:blur(2px);
  transition:background .18s ease, transform .18s ease;
}
.play::after{
  content:""; position:absolute; left:54%; top:50%; transform:translate(-50%,-50%);
  border-style:solid; border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
}
.card.is-video:hover .play{ background:rgba(20,20,20,0.78); transform:translate(-50%,-50%) scale(1.06); }

#vplayer{
  position:fixed; inset:0; z-index:200; background:rgba(18,18,18,0.93);
  display:flex; align-items:center; justify-content:center; padding:28px;
}
#vplayer[hidden]{ display:none; }
.vstage{ display:flex; flex-direction:column; align-items:center; gap:14px; max-height:100%; }
#vplayer video{
  max-height:78vh; max-width:min(430px, 92vw); width:auto; background:#000;
  box-shadow:0 18px 60px rgba(0,0,0,0.5);
}
.vtitle{
  color:#f2f2f2; font-size:14.5px; letter-spacing:0.02em; text-align:center;
  max-width:430px; text-wrap:balance;
}
.vfail{ color:#f2f2f2; font-size:14.5px; max-width:360px; text-align:center; line-height:1.6; }
.vclose{
  position:absolute; top:18px; right:22px; width:40px; height:40px;
  background:none; border:0; color:#f2f2f2; font-size:32px; line-height:1;
  cursor:pointer; opacity:0.8;
}
.vclose:hover{ opacity:1; }

/* ---------- UGC ---------- */
/* UGC is vertical video, so this page's tiles stand upright. */
.ugc-category .card-thumb{ aspect-ratio:9/16; }
.ugc-category .grid{ grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); }
.ugc-category{ margin-top:44px; }
.ugc-category:first-of-type{ margin-top:32px; }
.ugc-cat-title{
  font-size:12.5px; letter-spacing:0.18em; text-transform:uppercase; font-weight:400;
  border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:20px;
}
.ratecard-link{
  display:inline-block; margin-top:18px; font-size:13px; letter-spacing:0.14em;
  text-transform:uppercase; text-decoration:none;
  border-bottom:1px solid var(--ink); padding-bottom:3px;
}

/* ---------- ARTICLES ---------- */
.article-feature{
  display:grid; grid-template-columns:1.15fr 1fr; gap:34px; align-items:center;
  margin-top:38px; text-decoration:none; color:var(--ink);
}
.article-feature:hover .af-title{ opacity:0.72; }
.article-feature img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.af-kicker{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); }
.af-title{
  font-family:'Fahkwang','Jost',Helvetica,Arial,sans-serif; font-weight:300;
  font-size:clamp(23px,3.2vw,32px); line-height:1.22; margin-top:12px; text-wrap:balance;
  transition:opacity .18s ease;
}
.af-excerpt{ font-size:15px; color:var(--muted); margin-top:14px; }
.af-meta{ font-size:12.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-top:16px; }
@media (max-width:820px){ .article-feature{ grid-template-columns:1fr; gap:18px; } }

.article-list{ margin-top:52px; border-top:1px solid var(--line); }
.article-row{
  display:grid; grid-template-columns:190px 1fr; gap:26px; align-items:start;
  padding:26px 0; border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--ink);
}
.article-row:hover .ar-title{ opacity:0.72; }
.article-row img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.ar-title{ font-size:19px; font-weight:400; line-height:1.3; transition:opacity .18s ease; text-wrap:balance; }
.ar-excerpt{ font-size:14.5px; color:var(--muted); margin-top:8px; }
.ar-meta{ font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-top:10px; }
@media (max-width:640px){
  .article-row{ grid-template-columns:1fr; gap:14px; }
  .article-row img{ aspect-ratio:16/9; }
}

/* ---------- WORK WITH ME ---------- */
.work-photos{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; }
.work-photos img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
@media (max-width:640px){ .work-photos{ grid-template-columns:1fr; gap:16px; } }

/* ---------- SERVICES (work with me) ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(270px,1fr)); gap:28px; margin-top:40px; }
.service-card{ border:1px solid var(--line); padding:30px 26px; display:flex; flex-direction:column; }
.service-card h2{
  font-family:'Fahkwang','Jost',Helvetica,Arial,sans-serif; font-weight:300;
  font-size:21px; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:12px;
}
.service-card p{ font-size:14.5px; color:var(--muted); margin-bottom:20px; }
.service-cta{
  align-self:flex-start; margin-top:auto; font-size:12px; letter-spacing:0.16em;
  text-transform:uppercase; text-decoration:none;
  border-bottom:1px solid var(--ink); padding-bottom:3px;
}

/* ---------- FOOTER ---------- */
footer{ border-top:1px solid var(--line); margin-top:40px; }
.footer-inner{ max-width:var(--maxw); margin:0 auto; padding:40px 28px 44px; text-align:center; }
.footer-socials{ display:flex; justify-content:center; gap:22px; }
.footer-socials a{ color:var(--ink); opacity:0.8; display:flex; }
.footer-socials a:hover{ opacity:1; }
.footer-socials svg{ width:19px; height:19px; fill:currentColor; }
.footer-bottom{ margin-top:22px; font-size:12px; letter-spacing:0.1em; color:var(--muted); }

/* focus visibility */
a:focus-visible, button:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }