:root{
  --bg:#0a0a0a;
  --surface:#141414;
  --surface-2:#1c1c1c;
  --line:#2a2a2a;
  --ink:#f5f3ee;
  --muted:#9a9a9a;
  --flame-hot:#ff7a1a;
  --flame-deep:#d6281b;

  --klappa:#2f7fd0;
  --lumberjack:#2e9a5a;
  --chancey:#c9a400;
  --cj:#d8641e;
  --furious:#8e4fc4;

  --display:"Chakra Petch",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:1120px;margin:0 auto;padding-inline:24px}

/* embers - fixed ambient layer, burning up from the bottom of the viewport */
.ember-field{
  position:fixed;
  inset:auto 0 0 0;
  height:72vh;
  height:72dvh;
  min-height:440px;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.ember-field .base{
  position:absolute;
  inset:auto 0 0 0;
  height:190px;
  background:linear-gradient(0deg,rgba(255,122,26,.75),rgba(214,40,27,.4) 45%,transparent);
  filter:blur(4px);
  animation:flicker 2.2s ease-in-out infinite alternate;
}
.ember-field .glow{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 50% 66% at 4% 100%,rgba(255,122,26,.50),transparent 74%),
    radial-gradient(ellipse 44% 56% at 24% 100%,rgba(214,40,27,.40),transparent 72%),
    radial-gradient(ellipse 52% 68% at 45% 100%,rgba(255,122,26,.48),transparent 74%),
    radial-gradient(ellipse 44% 54% at 64% 100%,rgba(214,40,27,.38),transparent 72%),
    radial-gradient(ellipse 50% 64% at 82% 100%,rgba(255,122,26,.46),transparent 74%),
    radial-gradient(ellipse 44% 56% at 98% 100%,rgba(214,40,27,.38),transparent 72%);
  animation:breathe 6s ease-in-out infinite;
}
.ember{
  position:absolute;
  bottom:0;
  left:var(--x);
  width:var(--s);
  height:var(--s);
  border-radius:50%;
  background:radial-gradient(circle,var(--flame-hot),var(--flame-deep) 65%,transparent 72%);
  opacity:0;
  animation:ember-rise var(--dur) linear var(--delay) infinite;
}
@keyframes ember-rise{
  0%{transform:translate(0,0) scale(1);opacity:0}
  10%{opacity:1}
  78%{opacity:.6}
  100%{transform:translate(var(--dx),-72vh) scale(.3);opacity:0}
}
@keyframes breathe{
  0%,100%{opacity:.9;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-8px)}
}
@keyframes flicker{
  0%{opacity:.8;transform:scaleY(1) translateY(0)}
  25%{opacity:1;transform:scaleY(1.08) translateY(-4px)}
  50%{opacity:.85;transform:scaleY(.96) translateY(2px)}
  75%{opacity:1;transform:scaleY(1.05) translateY(-3px)}
  100%{opacity:.9;transform:scaleY(1) translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .ember{display:none}
  .ember-field .glow,.ember-field .base{animation:none}
}

/* header */
header.site{
  position:relative;
  z-index:2;
  padding-block:20px;
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:30px;height:30px;flex:none}
.brand .word{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.02em}
nav.primary{display:flex;gap:28px}
nav.primary a{
  font-family:var(--body);
  font-weight:500;
  font-size:14px;
  color:var(--muted);
  text-decoration:none;
  padding-block:4px;
  border-bottom:1px solid transparent;
  transition:color .15s,border-color .15s;
}
nav.primary a:hover{color:var(--ink);border-color:var(--line)}
nav.primary a:focus-visible{outline:2px solid var(--flame-hot);outline-offset:3px}

main{position:relative;z-index:1}

/* hero */
.hero{padding-block:88px 56px}
.hero .mark{width:88px;height:88px;margin-bottom:28px;transform-origin:center bottom}
.hero h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(34px,6vw,56px);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0;
  max-width:14ch;
}
.hero .lede{
  margin-top:22px;
  max-width:52ch;
  font-size:17px;
  color:#cfcdc6;
}
.hero .lede strong{color:var(--ink);font-weight:600}

/* burn line - used once */
.burn{
  height:2px;
  border:0;
  margin:0;
  background:linear-gradient(90deg,var(--flame-hot),var(--flame-deep) 60%,transparent);
}

/* section shell */
section{padding-block:56px}
section h2{
  font-family:var(--display);
  font-weight:600;
  font-size:22px;
  margin:0 0 26px;
}

/* roster */
.roster{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}
.player{
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--pc,var(--line));
  border-radius:4px;
  padding:18px 16px;
  min-width:0;
}
.player .name{
  font-family:var(--display);
  font-weight:700;
  font-size:18px;
  letter-spacing:.01em;
}
.player .role{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
}
.player .name a{color:inherit;text-decoration:none}
.player .name a:hover{color:var(--pc);text-decoration:underline}
.player .dot{
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
  background:var(--pc,var(--muted));
  margin-right:7px;
  vertical-align:1px;
}

.staff{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.staff-row{display:flex;align-items:baseline;gap:10px}
.staff-role{
  font-family:var(--display);
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--muted);
}
.staff-name{font-family:var(--display);font-size:16px;font-weight:700;color:inherit;text-decoration:none}
a.staff-name:hover{color:var(--flame-hot);text-decoration:underline}

.section-intro{
  margin:0 0 26px;
  max-width:52ch;
  color:#cfcdc6;
  font-size:15px;
}

/* partner */
.partner{
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--flame-hot);
  border-radius:4px;
  padding:30px 28px;
  max-width:560px;
}
.partner-brand{display:flex;align-items:center;gap:12px}
.partner-brand img{width:44px;height:44px;flex:none}
.partner-word{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.01em}
.partner-tag{
  margin:14px 0 0;
  font-size:12px;
  color:var(--flame-hot);
  font-weight:600;
}
.partner-copy{margin:8px 0 0;color:#cfcdc6;font-size:15px;max-width:46ch}
.partner-cta{
  display:inline-block;
  margin-top:18px;
  font-family:var(--display);
  font-weight:600;
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid var(--flame-hot);
  padding-bottom:2px;
}
.partner-cta:hover{color:var(--flame-hot)}

/* contact */
.contact p{max-width:46ch;color:#cfcdc6}
.contact .email{
  display:inline-block;
  margin-top:14px;
  font-family:var(--display);
  font-weight:600;
  font-size:19px;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid var(--flame-hot);
  padding-bottom:2px;
}
.contact .email:hover{color:var(--flame-hot)}
.contact .note{margin-top:18px;font-size:14px;color:var(--muted)}

/* footer */
footer.site{
  position:relative;
  z-index:1;
  border-top:1px solid var(--line);
  padding-block:26px;
  background:var(--bg);
}
footer.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
footer.site img{width:20px;height:20px;opacity:.6}
footer.site .copy{font-size:13px;color:var(--muted)}

/* ignite animation - plays once on load */
@keyframes ignite{
  0%{opacity:0;transform:scale(.85) translateY(6px)}
  60%{opacity:1;transform:scale(1.04) translateY(0)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
.mark.ignite{animation:ignite .6s cubic-bezier(.2,.8,.3,1) both}

@media (prefers-reduced-motion:reduce){
  .mark.ignite{animation:none}
}

:focus-visible{outline:2px solid var(--flame-hot);outline-offset:2px}

@media (max-width:820px){
  .roster{grid-template-columns:repeat(2,minmax(0,1fr))}
  nav.primary{gap:18px}
  .hero{padding-block:64px 40px}
}
@media (max-width:520px){
  .roster{grid-template-columns:1fr}
  nav.primary a{font-size:13px}
}