:root{
  --ucla-blue:#2774AE;
  --ucla-gold:#FFD100;
  --ink:#0A1A2B;
  --bg:#000;
  --card-radius:22px;
  --maxw:1080px;
  --gap:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:#fff;
  background: url("background/WideDesktop.jpg") center center / contain no-repeat fixed;
  background-color:#000;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Desktop / Laptop */
@media (max-width: 1200px) {
  body {
    background: url("background/WideDesktop.jpg") center center / cover no-repeat fixed;
  }
}

/* Tablet / iPad */
@media (max-width: 768px) {
  body {
    background: url("background/PortraitTablet.jpg") center center / cover no-repeat fixed;
  }
}




.wrap{max-width:var(--maxw); margin-inline:auto; padding:20px 16px 64px}

.word-bruins{
  margin:0;
  font-weight:900;
  font-size: clamp(56px, 16vw, 132px);
  text-transform: lowercase;
  line-height:.9;
}
.word-stack{
  display:flex;
  align-items:baseline;
  gap: clamp(6px, 1.8vw, 14px);
  margin-top:-6px;
}
.in-the{
  font-weight:800;
  opacity:.95;
  font-size: clamp(90px, 5.5vw, 48px);
  text-transform: lowercase;
  letter-spacing:.02em;
  
  color: var(--ucla-blue);  
}
.nfl{
  font-weight:950;
  color:var(--ucla-blue);
  font-size: clamp(52px, 15vw, 128px);
  line-height:.9;
  letter-spacing:-.01em;
  text-transform:uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.08);
}

.intro-grid{ display:block }
.top-cards{ display:grid; grid-template-columns: repeat(2, 1fr); gap:var(--gap); margin-top:12px }

@media (min-width:1024px){
  .intro-grid{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap:var(--gap);
    align-items:end;
  }
  .masthead{ grid-column: 1 / span 3;
          padding: 10px; }
  .top-cards{ grid-column: 4 / span 2; margin-top:0; }
}

.cards{
  display:grid;
  gap:var(--gap);
  grid-template-columns: repeat(2, 1fr);
  margin-top:var(--gap);
}
@media (min-width:550px){
  .cards{grid-template-columns: repeat(3, 1fr);}
}
@media (min-width:800px){
  .cards{grid-template-columns: repeat(4, 1fr);}
}
@media (min-width:1024px){
  .cards{grid-template-columns: repeat(5, 1fr);}
}

figure.card{
  margin:0; position:relative; overflow:hidden; border-radius: var(--card-radius);
  /* box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05); */
  transition: transform .2s ease, box-shadow .2s ease;
  isolation:isolate;
}
figure.card:hover{ transform: translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06) }

.card img.badge{ width:100%; height:100%; object-fit:cover; aspect-ratio: 3/4; }

.sr{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

footer{
  display:flex; justify-content:flex-end; align-items:center; gap:10px;
  max-width:var(--maxw); margin:48px auto 28px; padding:0 16px;
}
.brand-lockup{ display:flex; align-items:center; gap:10px; }
.ucla-pill{
  background:var(--ucla-blue); color:#fff; border-radius:8px; padding:6px 10px; font-weight:800; letter-spacing:.04em;
}
.alum{ opacity:.9; font-weight:700 }

span.alum {
    max-width: 150px;
    padding-bottom: 15px;
}