/* ============================================================
   Ali Hussaini — temporary one-pager
   Tokens mirror the "Portfolio Tokens" collection in Figma.
   ============================================================ */

:root{
  --bg:#0A0A0B;
  --surface:#131316;
  --border:#26262B;
  --text:#F2F2F0;
  --muted:#8A8A90;
  --red:#A4161A;
  --green:#3ECF8E;

  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:"Archivo",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;

  --gutter:56px;
  --maxw:1328px;
  --nav-h:91px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%}
ul{list-style:none;margin:0;padding:0}
a{color:inherit;text-decoration:none}

:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--red);color:var(--text);padding:12px 20px;
  font-family:var(--mono);font-size:12px;
}
.skip:focus{left:0}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.08em;color:var(--muted);margin:0;
}
.eyebrow--red{color:var(--red);font-size:12px}

.rank{
  display:block;
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.08em;color:var(--red);
}
.meta{
  display:block;
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.06em;color:var(--muted);line-height:1.5;
}

h1,h2,h3{margin:0;font-family:var(--display)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:32px var(--gutter);
  transition:background-color .25s ease,border-color .25s ease,padding .25s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(10,10,11,.86);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--border);
  padding-top:20px;padding-bottom:20px;
}
.nav__logo{
  font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.06em;
}
.nav__links{display:flex;align-items:center;gap:36px}
.nav__links a{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);
  transition:color .18s ease;
}
.nav__links a:hover{color:var(--text)}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px 7px 12px;border:1px solid var(--border);border-radius:999px;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;
  color:var(--muted);white-space:nowrap;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}

/* ============================================================
   HERO — the work is the first thing on screen
   ============================================================ */
.hero{
  position:relative;
  height:100svh;min-height:620px;
  overflow:hidden;
}
.hero__strip{
  display:grid;grid-template-columns:repeat(3,1fr);
  height:100%;
}
.hero__tile{position:relative;overflow:hidden}
.hero__tile + .hero__tile{border-left:1px solid var(--border)}
.hero__tile a{display:block;height:100%}

.hero__img{
  width:100%;height:100%;object-fit:cover;
  background:linear-gradient(150deg,#1D1D25,#0B0B0E);
}

.hero__cap{
  position:absolute;top:calc(var(--nav-h) + 26px);left:30px;right:30px;
  display:flex;flex-direction:column;gap:9px;
  text-shadow:0 2px 14px rgba(0,0,0,.85);
  z-index:2;
}
.hero__title{
  font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em;
}

.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(10,10,11,.15) 0%,
    rgba(10,10,11,.55) 38%,
    rgba(10,10,11,.97) 100%);
}

.hero__copy{
  position:absolute;left:var(--gutter);bottom:64px;z-index:3;
  max-width:620px;
}
.hero__copy > * + *{margin-top:22px}

.hero__copy h1{
  font-weight:900;font-size:clamp(56px,6.7vw,96px);
  line-height:.88;letter-spacing:-.03em;text-transform:uppercase;
  text-shadow:0 4px 20px rgba(0,0,0,.65);
}
.hero__sub{
  margin:0;font-size:18px;line-height:1.52;max-width:560px;
  text-shadow:0 4px 20px rgba(0,0,0,.65);
}
.note{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--red);margin:0;
}

.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-flex;align-items:center;
  padding:15px 24px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
  transition:color .18s ease,border-color .18s ease,background-color .18s ease;
}
.btn:hover{color:var(--text);border-color:var(--muted)}
.btn--primary{background:var(--red);border-color:var(--red);color:var(--text)}
.btn--primary::after{content:"  →"}
.btn--primary:hover{background:#B81A1F;border-color:#B81A1F;color:var(--text)}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:110px var(--gutter);
}
.section__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:40px;
}
.section__head h2{
  font-weight:700;font-size:clamp(32px,4vw,46px);letter-spacing:-.02em;margin-top:14px;
}
.count{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;
  color:var(--muted);margin:0;white-space:nowrap;
}

/* ---------- filter chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:52px}
.chip{
  padding:10px 18px;border-radius:999px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);color:var(--muted);
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  transition:color .18s ease,border-color .18s ease,background-color .18s ease;
}
.chip:hover{color:var(--text);border-color:var(--muted)}
.chip.is-active{background:var(--red);border-color:var(--red);color:var(--text)}

/* ---------- groups + grids ---------- */
.group + .group{margin-top:52px}
.group[hidden]{display:none}
.group__label{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--red);
  margin:0 0 28px;
}

.grid{display:grid;gap:40px 24px}
.grid--reels{grid-template-columns:repeat(4,1fr)}
.grid--videos{grid-template-columns:repeat(3,1fr)}

.tile[hidden]{display:none}
.tile a{display:flex;flex-direction:column;gap:16px}

.thumb{
  display:block;overflow:hidden;border-radius:4px;
  border:1px solid var(--border);
  background:linear-gradient(150deg,#1D1D25,#0B0B0E);
}
.thumb--v{aspect-ratio:9/16}
.thumb--h{aspect-ratio:16/9}
.thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease,opacity .3s ease;
}
.tile a:hover .thumb img{transform:scale(1.035)}
.thumb img.is-missing{opacity:0}

.cap{display:flex;flex-direction:column;gap:8px}
.cap__title{
  font-family:var(--display);font-weight:700;font-size:16px;
  letter-spacing:-.01em;line-height:1.25;
}
.grid--videos .cap__title{font-size:18px}

.empty{
  font-family:var(--mono);font-size:12px;color:var(--muted);
  padding:40px 0;margin:0;
}

/* ---------- gear ---------- */
#gear .section__head{margin-bottom:48px}
.gear{
  display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px;
}
.gear li{
  border-top:1px solid var(--border);padding-top:22px;
  display:flex;flex-direction:column;gap:14px;
}
.gear h3{font-weight:700;font-size:20px;letter-spacing:-.01em}
.gear p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  max-width:var(--maxw);margin:0 auto;
  padding:130px var(--gutter) 56px;
}
.footer > * + *{margin-top:28px}
.footer__head{
  font-weight:900;font-size:clamp(44px,7vw,96px);
  line-height:.92;letter-spacing:-.03em;text-transform:uppercase;
}
.email{
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 26px;border:1px solid var(--red);border-radius:999px;
  font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.02em;
  transition:background-color .18s ease;
}
.email:hover{background:rgba(164,22,26,.18)}

.footer__bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  border-top:1px solid var(--border);padding-top:40px;margin-top:40px;
}
.footer__bar p{
  margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);
}
.socials{display:flex;gap:28px}
.socials a{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);
  transition:color .18s ease;
}
.socials a:hover{color:var(--text)}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---- tablet ---- */
@media (max-width:1080px){
  :root{--gutter:40px}
  .grid--reels{grid-template-columns:repeat(3,1fr)}
  .grid--videos{grid-template-columns:repeat(2,1fr)}
  .gear{grid-template-columns:repeat(2,1fr)}
  .nav__links{gap:24px}
}

/* ---- mobile ---- */
@media (max-width:767px){
  :root{--gutter:20px;--nav-h:70px}

  /* nav collapses to logo + availability */
  .nav{padding:22px var(--gutter)}
  .nav__links a{display:none}
  .pill{font-size:9px;padding:6px 12px 6px 10px}
  .nav__logo{font-size:13px}

  /* hero: reels become a swipeable strip, next one peeking */
  .hero{height:auto;min-height:0}
  .hero__strip{
    display:flex;
    height:660px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .hero__strip::-webkit-scrollbar{display:none}
  .hero__tile{
    flex:0 0 64%;
    scroll-snap-align:start;
  }
  .hero__scrim{height:660px;inset:auto 0 0 0;top:0}
  .hero__cap{top:calc(var(--nav-h) + 14px);left:18px;right:18px;gap:7px}
  .hero__title{font-size:13px}

  .hero__copy{
    position:absolute;left:var(--gutter);right:var(--gutter);bottom:28px;
    max-width:none;
  }
  .hero__copy > * + *{margin-top:16px}
  .hero__copy h1{font-size:clamp(40px,13vw,52px)}
  .hero__sub{font-size:14px}
  .eyebrow,.note{font-size:9px}
  .btn{padding:13px 18px;font-size:10px}

  .section{padding:64px var(--gutter)}
  .section__head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:28px}
  .section__head h2{margin-top:10px}
  .chips{gap:8px;margin-bottom:36px}
  .chip{padding:8px 14px;font-size:9px}

  .group + .group{margin-top:44px}
  .group__label{font-size:10px;margin-bottom:20px}

  .grid{gap:26px 14px}
  .grid--reels{grid-template-columns:repeat(2,1fr)}
  .grid--videos{grid-template-columns:1fr}
  .cap__title,.grid--videos .cap__title{font-size:13px}
  .grid--videos .cap__title{font-size:17px}
  .rank,.meta{font-size:9px}

  .gear{grid-template-columns:repeat(2,1fr);gap:24px 14px}
  .gear li{padding-top:16px;gap:10px}
  .gear h3{font-size:15px}
  .gear p{font-size:12px}

  .footer{padding:72px var(--gutter) 32px}
  .footer > * + *{margin-top:20px}
  .footer__bar{
    flex-direction:column-reverse;align-items:flex-start;gap:14px;padding-top:28px;
  }
  .email{padding:15px 20px;font-size:12px}
  .socials{gap:22px}
}

/* ---- very small ---- */
@media (max-width:400px){
  .grid--reels{grid-template-columns:1fr}
}