/* Warrior Class page styles (warriorclass.tragiclovers.com) */
@font-face{font-family:'Federation Classic';src:url('/fonts/federation-classic.woff2') format('woff2');font-display:swap}
:root{
  --blue:#4A7FB0; --blue-deep:#2E5A85; --ink:#0B1420; --yellow:#F2D21E; --white:#FFFFFF; --mist:#C8D6E6;
  --display:'Federation Classic','Audiowide',sans-serif;
  --round:'Audiowide',sans-serif;
  --body:'Barlow','Arial Narrow',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blue);color:var(--white);font-family:var(--body);font-size:18px;line-height:1.45}
a{color:inherit}
a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--yellow);color:var(--ink);padding:10px 14px;z-index:9}

/* motion streaks from the flyer */
.streak{height:14px;border-radius:999px;background:linear-gradient(90deg,var(--yellow) 0%,var(--yellow) 55%,rgba(242,210,30,0) 100%)}
.streak.w{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,#fff 45%,#fff 100%)}
.streak.r{background:linear-gradient(270deg,var(--yellow) 0%,var(--yellow) 55%,rgba(242,210,30,0) 100%)}

/* hero */
.hero{background-color:var(--blue);background-image:radial-gradient(rgba(11,20,32,.14) 1px,transparent 1.4px);background-size:5px 5px;padding:28px 0 56px;overflow:hidden}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--round);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.top a{text-decoration:none;padding:12px 0}
.top a:hover{color:var(--yellow)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:24px}
.kicker{display:flex;align-items:center;gap:14px;font-family:var(--round);font-size:clamp(16px,2vw,22px);text-transform:uppercase;letter-spacing:.04em}
.kicker .streak{flex:1;min-width:40px}
h1{margin:10px 0 6px;font-family:var(--display);font-weight:400;font-style:italic;font-size:clamp(56px,8.6vw,118px);line-height:.9;letter-spacing:.01em;color:var(--yellow);text-transform:uppercase;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink)}
.tag{display:flex;align-items:center;gap:14px;margin:18px 0 6px}
.tag .streak{flex:1}
.tag strong{font-family:var(--round);font-weight:400;font-size:clamp(30px,4vw,48px);line-height:1;text-transform:uppercase;white-space:nowrap}
.sub{margin:0;font-family:var(--round);font-size:clamp(13px,1.5vw,16px);letter-spacing:.08em;text-transform:uppercase;color:var(--white)}
.when{margin:28px 0 0;display:flex;flex-direction:column;gap:6px;font-family:var(--round);text-transform:uppercase}
.when .big{font-size:clamp(26px,3.4vw,40px);line-height:1.05}
.when .big span{color:var(--yellow)}
.when .small{font-size:clamp(16px,1.9vw,20px)}
.when .small span{color:var(--yellow)}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:12px 22px;font-family:var(--round);font-size:16px;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;border-radius:999px}
.btn.y{background:var(--yellow);color:var(--ink)}
.btn.y:hover{background:#fff}
.btn.o{border:2px solid var(--white);color:var(--white)}
.btn.o:hover{background:var(--white);color:var(--ink)}
.flyer{margin:0;position:relative}
.flyer img{display:block;width:100%;height:auto;border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink);background:var(--ink)}
.flyer figcaption{margin-top:18px;font-size:14px;color:var(--mist);font-family:var(--round);letter-spacing:.04em;text-transform:uppercase}

/* sections */
section{padding:72px 0}
.dark{background:var(--ink)}
.deep{background:var(--blue-deep)}
h2{margin:0 0 28px;display:flex;align-items:center;gap:16px;font-family:var(--round);font-weight:400;font-size:clamp(28px,3.6vw,40px);text-transform:uppercase;letter-spacing:.03em}
h2 .streak{flex:1;max-width:420px}

.bill{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bill>li{display:flex;flex-direction:column;gap:10px;padding:22px 0;border-top:2px solid rgba(255,255,255,.14)}
.bill>li:last-child{border-bottom:2px solid rgba(255,255,255,.14)}
.act{font-family:var(--display);font-style:italic;font-size:clamp(30px,4.4vw,52px);line-height:1;text-transform:uppercase;color:var(--yellow)}
.act.white{color:var(--white)}
.note{font-size:19px;color:var(--mist)}
.socials{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.socials a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:2px solid rgba(255,255,255,.35);border-radius:50%;color:var(--white)}
.socials a:hover{border-color:var(--yellow);color:var(--yellow)}
.socials svg{width:22px;height:22px}
.note em{color:var(--white)}

.info{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tile{background:var(--yellow);color:var(--ink);padding:18px 20px;border-radius:14px}
.tile dt{font-family:var(--round);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.tile dd{margin:6px 0 0;font-size:24px;font-weight:600;line-height:1.2}
.addr{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;font-size:19px}

.tx{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.tx .slot-card{aspect-ratio:16/9;border:2px dashed rgba(255,255,255,.5);border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;font-family:var(--round);font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--mist)}
.lede{margin:-12px 0 28px;color:var(--mist);max-width:60ch}


footer{background:var(--ink);padding:36px 0;border-top:6px solid var(--yellow)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center;font-size:16px;color:var(--mist)}
.foot a{padding:12px 0}
.foot a:hover{color:var(--yellow)}

@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .flyer{order:-1;max-width:520px}
  .info{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:no-preference){
  .hero .streak{animation:slide .9s ease-out both}
  @keyframes slide{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}
}