/* =====================================================================
   Iowa Ambush Cheer — 2026 redesign
   Signature: the three claw slashes from the logo. Everything else stays
   quiet: true black, white, one red, condensed block type like the jerseys.
   ===================================================================== */
:root{
  --red:#E10600; --red-deep:#A80400;
  --black:#000; --white:#fff;
  --steel:#EDEFF2;      /* light section ground (cool, not cream) */
  --bow:#C3C7CE;        /* silver of the competition bows */
  --mute:#5D6168;
  --display:'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --body:'Barlow', 'Segoe UI', system-ui, sans-serif;
  --cond:'Barlow Semi Condensed', 'Barlow', 'Arial Narrow', sans-serif;
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--body);font-size:18px;line-height:1.55;color:var(--black);background:var(--white);overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- type ---------- */
.d1,.d2,.d3{font-family:var(--display);font-weight:400;line-height:.92;letter-spacing:.005em;text-transform:uppercase}
.d1{font-size:clamp(64px,13vw,184px)}
.d2{font-size:clamp(44px,7vw,96px)}
.d3{font-size:clamp(28px,3.4vw,40px);line-height:1}
.lede{font-size:clamp(19px,2vw,22px);max-width:34em;line-height:1.5}
.small{font-size:15px;color:var(--mute)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 17px/1 var(--cond);letter-spacing:.02em;
  padding:16px 26px;border:2px solid currentColor;text-decoration:none;cursor:pointer;background:none;color:inherit;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:background .15s,color .15s}
.btn--red{background:var(--red);border-color:var(--red);color:var(--white)}
.btn--red:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn--line:hover{background:var(--white);color:var(--black)}
.btn--dark{background:var(--black);border-color:var(--black);color:var(--white)}
.btn--dark:hover{background:var(--red);border-color:var(--red)}

/* ---------- header ---------- */
.top{position:absolute;inset:0 0 auto;z-index:20;color:var(--white)}
.top--solid{position:sticky;top:0;background:var(--black)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:58px;height:auto}
.brand span{font:400 22px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.nav{display:flex;gap:28px;align-items:center;list-style:none}
.nav a{font:600 16px/1 var(--cond);text-decoration:none;letter-spacing:.03em;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-color:var(--red)}
.nav .btn{padding:12px 20px;font-size:16px}
.menu-btn{display:none;color:inherit;background:none;border:0;font:600 16px var(--cond);cursor:pointer}
@media (max-width:900px){
  .nav{display:none}
  .menu-btn{display:block}
  .top.open .nav{display:flex;flex-direction:column;align-items:flex-start;position:fixed;inset:84px 0 0;background:var(--black);padding:32px 20px;gap:22px}
  .top.open .nav a{font-size:26px}
}

/* ---------- hero: the claw ---------- */
.hero{position:relative;min-height:min(100svh,920px);background:var(--black);color:var(--white);overflow:hidden;display:flex;align-items:flex-end}
.hero__media{position:absolute;inset:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.62}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.2) 55%,#000 100%)}
/* Claw marks drawn from the logo: white, red-edged, torn, tapering to points */
.claws{position:absolute;top:-4%;right:-5%;width:min(54%,820px);height:108%;pointer-events:none;z-index:1}
.claws svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  clip-path:inset(100% 0 0 0);animation:rip .5s cubic-bezier(.75,0,.2,1) forwards}
.claws path{fill:#fff;stroke:var(--red);stroke-width:5;stroke-linejoin:round;paint-order:stroke;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.claws svg:nth-child(1){animation-delay:.2s}
.claws svg:nth-child(2){animation-delay:.32s}
.claws svg:nth-child(3){animation-delay:.44s}
@keyframes rip{to{clip-path:inset(0 0 0 0)}}
.hero__copy{position:relative;z-index:2;padding:140px 0 56px}
.hero__copy .d1 span{display:block}
.hero__copy .lede{margin:22px 0 30px;color:rgba(255,255,255,.9)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px}
@media (max-width:700px){
  .claws{top:-2%;right:-14%;width:88%;height:58%}
}
@media (prefers-reduced-motion:reduce){.claws svg{animation:none;clip-path:none}}

/* ---------- today strip ---------- */
.today{background:var(--red);color:var(--white)}
.today .wrap{display:flex;gap:18px;align-items:center;padding:16px 0;flex-wrap:wrap}
.today b{font:400 22px/1 var(--display);text-transform:uppercase;white-space:nowrap}
.today p{font:600 18px/1.35 var(--cond);flex:1;min-width:240px}
.today a{font-weight:700}
.today--cancel{background:var(--black)}
.today--cancel b{color:var(--red)}

/* ---------- sections ---------- */
.band{padding:clamp(72px,10vw,128px) 0}
.band--steel{background:var(--steel)}
.band--black{background:var(--black);color:var(--white)}
.band__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:56px}
.band__head p{max-width:30em}
@media (max-width:800px){.band__head{grid-template-columns:1fr;gap:16px}}

/* ---------- roster (teams as a lineup, not cards) ---------- */
.roster{list-style:none;border-top:3px solid var(--black)}
.roster li{display:grid;grid-template-columns:minmax(200px,1.3fr) 1fr 1fr auto;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--bow)}
.roster .name{font:400 clamp(36px,5vw,64px)/.95 var(--display);text-transform:uppercase}
.roster .lvl{font:600 18px/1.3 var(--cond)}
.roster .lvl small{display:block;font-weight:500;color:var(--mute);font-size:16px}
.roster .nights{font:500 17px/1.4 var(--cond)}
.roster .price{font:400 30px/1 var(--display);text-align:right}
.roster .price small{display:block;font:500 15px var(--cond);color:var(--mute)}
.roster li:hover .name{color:var(--red)}
.roster-split{font:600 16px/1 var(--cond);letter-spacing:.04em;color:var(--mute);padding:28px 0 10px;border-bottom:1px solid var(--bow)}
@media (max-width:760px){
  .roster li{grid-template-columns:1fr auto;gap:6px 16px}
  .roster .lvl,.roster .nights{grid-column:1}
  .roster .price{grid-row:1;grid-column:2}
}

/* ---------- programs ---------- */
.programs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px;background:var(--black);border:2px solid var(--black)}
.program{background:var(--white);padding:30px 28px 28px;display:flex;flex-direction:column;gap:10px}
.program h3{font:400 34px/1 var(--display);text-transform:uppercase}
.program .when{font:600 17px/1.35 var(--cond)}
.program .price{font:400 26px/1 var(--display);color:var(--red);margin-top:auto;padding-top:12px}
.program p{font-size:16px;color:#2a2c30}
.program a{font:600 16px var(--cond)}

/* ---------- champions ---------- */
.champs{display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.champs__img{position:relative;overflow:hidden}
.champs__img img{width:100%;height:100%;object-fit:cover}
.champs__copy{background:var(--black);color:var(--white);padding:clamp(40px,6vw,88px);display:flex;flex-direction:column;justify-content:center;gap:22px}
.champs__copy .d2{color:var(--white)}
.champs__copy .yr{font:400 clamp(90px,14vw,190px)/.8 var(--display);color:var(--red)}
@media (max-width:800px){.champs{grid-template-columns:1fr}.champs__img{height:380px}}

/* ---------- week grid ---------- */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:3px solid var(--white)}
.week .day{padding:16px 12px 22px;border-right:1px solid rgba(255,255,255,.18);min-height:180px}
.week .day:last-child{border-right:0}
.week .day h4{font:400 24px/1 var(--display);text-transform:uppercase;margin-bottom:14px}
.week .day.is-today{background:var(--red)}
.week ul{list-style:none;display:grid;gap:10px}
.week li{font:600 15px/1.25 var(--cond)}
.week li span{display:block;font-weight:500;opacity:.75;font-size:14px}
.week .rest{opacity:.5;font:500 15px var(--cond)}
@media (max-width:900px){.week{grid-template-columns:1fr}.week .day{min-height:0;border-right:0;border-bottom:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:110px 1fr;gap:12px}.week .day h4{margin:0}}

/* ---------- coaches ---------- */
.staff{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:36px 28px;margin-top:8px}
.coach{border-top:4px solid var(--red);padding-top:14px}
.coach__pic{aspect-ratio:4/5;background:var(--black);margin-bottom:16px;overflow:hidden;display:grid;place-items:center}
.coach__pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.coach__pic img.ph{filter:none}
.coach h3{font:400 28px/1 var(--display);text-transform:uppercase;margin-bottom:6px}
.coach p{font-size:16px;color:#2a2c30}
/* ---------- join ---------- */
.join{background:var(--red);color:var(--white);position:relative;overflow:hidden}
.join .wrap{position:relative;z-index:1}
.join .d1{margin-bottom:28px}
.join::before{content:"";position:absolute;right:-6%;top:-20%;bottom:-20%;width:46%;
  background:repeating-linear-gradient(-66deg,transparent 0 46px,rgba(0,0,0,.92) 46px 70px,transparent 70px 120px);opacity:.9;mask:linear-gradient(90deg,transparent,#000 40%)}
.join__paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:44px 0 40px;max-width:900px}
.join__paths div{border-top:2px solid var(--white);padding-top:14px}
.join__paths b{font:400 26px/1 var(--display);text-transform:uppercase;display:block;margin-bottom:8px}
@media (max-width:760px){.join__paths{grid-template-columns:1fr}.join::before{display:none}}

/* ---------- dates ---------- */
.dates{list-style:none;display:grid;gap:0;border-top:3px solid var(--black)}
.dates li{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--bow);align-items:baseline}
.dates .when{font:400 28px/1 var(--display);text-transform:uppercase;color:var(--red)}
.dates b{font:600 20px/1.2 var(--cond)}
@media (max-width:600px){.dates li{grid-template-columns:1fr;gap:4px}}

/* ---------- footer ---------- */
.foot{background:var(--black);color:var(--white);padding:72px 0 40px}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot h5{font:600 15px var(--cond);letter-spacing:.06em;color:var(--bow);margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:8px}
.foot a{text-decoration:none}.foot a:hover{color:var(--red)}
.foot__base{margin-top:56px;padding-top:22px;border-top:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--bow)}
@media (max-width:800px){.foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:480px){.foot__grid{grid-template-columns:1fr}}
.foot a{overflow-wrap:anywhere}

/* ---------- site-wide alert bar (inner pages) ---------- */
.alert{background:var(--red);color:#fff;text-align:center;padding:10px 16px;font:600 16px/1.35 var(--cond)}
.alert a{color:#fff;font-weight:700}
.alert--cancel{background:#000}