:root {
  --rules-ink: #050305;
  --rules-panel: #13070d;
  --rules-ruby: #9e1033;
  --rules-red: #ed174c;
  --rules-rose: #ff9bb2;
  --rules-magenta: #e62887;
  --rules-purple: #100018;
  --rules-ivory: #fff8f8;
  --rules-muted: #dac7cc;
}

html { background: var(--rules-ink); scroll-behavior: smooth; }
body { background: radial-gradient(circle at 80% 6%, #e6288726, transparent 24%), radial-gradient(circle at 8% 46%, #5a0b692e, transparent 28%), var(--rules-ink); color: var(--rules-ivory); }
.rulesPage, .applicationPage { min-height: 100vh; }
.rulesTopbar { background: #080305e8; position: sticky; top: 0; z-index: 20; }
.rulesTopbar nav { display: flex; flex-wrap: wrap; gap: 18px; }

.rulesHero {
  border-bottom: 1px solid #ff9bb226;
  min-height: min(760px, 86vh);
  overflow: hidden;
  position: relative;
}
.rulesHero > img { height: 100%; inset: 0 0 0 auto; object-fit: cover; object-position: 60% 18%; position: absolute; width: min(70vw, 980px); }
.rulesHeroShade { background: linear-gradient(90deg, #050305 10%, #100018f2 44%, #570b1d85 72%, #0503055c), linear-gradient(0deg, #050305e3, transparent 42%); inset: 0; position: absolute; }
.rulesHeroCopy { align-items: flex-start; display: flex; flex-direction: column; justify-content: center; min-height: inherit; padding: clamp(70px, 10vw, 150px) max(7vw, 28px); position: relative; width: min(880px, 88%); z-index: 1; }
.rulesHeroCopy h1, .applicationHero h1 { font: 400 clamp(60px, 8vw, 126px)/.85 Georgia, serif; letter-spacing: -.07em; margin: .25em 0; }
.rulesHeroCopy h1 em, .applicationHero h1 em, .rulesBody h2 em { color: var(--rules-rose); font-weight: 400; }
.rulesHeroCopy > p:not(.eyebrow) { color: var(--rules-muted); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.65; max-width: 650px; }

.rulesButton {
  align-items: center;
  background: linear-gradient(110deg, var(--rules-ruby), var(--rules-red), var(--rules-magenta));
  border: 1px solid var(--rules-rose);
  color: var(--rules-ivory);
  cursor: pointer;
  display: inline-flex;
  font: 900 11px Inter, Arial, sans-serif;
  gap: 26px;
  justify-content: space-between;
  letter-spacing: .13em;
  margin-top: 20px;
  min-height: 54px;
  padding: 15px 20px;
  text-decoration: none;
  text-transform: uppercase;
}
.rulesButton:hover, .rulesButton:focus-visible { background: linear-gradient(110deg, var(--rules-red), var(--rules-magenta)); color: #fff; }
.rulesButton span { color: #ffd1dc; font-size: 18px; }

.rulesBody { margin: 0 auto; max-width: 1500px; padding: clamp(70px, 8vw, 128px) max(4vw, 20px); }
.rulesIntroduction { margin: 0 auto 70px; max-width: 1100px; text-align: center; }
.rulesIntroduction h2, .rulesProtocol h2, .rulesApply h2, .applicationGate h2 { font: 400 clamp(44px, 6vw, 86px)/.95 Georgia, serif; letter-spacing: -.055em; margin: .28em 0 .4em; }
.rulesLead { color: var(--rules-muted); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.8; margin: 0 auto; max-width: 940px; }
.goldenRule { background: linear-gradient(120deg, #4f071b, #220028 70%); border: 1px solid #ff9bb25c; display: grid; gap: 12px; margin: 42px auto 0; max-width: 920px; padding: clamp(24px, 4vw, 40px); text-align: left; }
.goldenRule strong { color: var(--rules-ivory); font: 400 clamp(25px, 3vw, 38px)/1.2 Georgia, serif; }
.goldenRule span { color: var(--rules-rose); line-height: 1.7; }

.rulesGrid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ruleCard { background: linear-gradient(145deg, #22070e, #100018 68%); border: 1px solid #ff9bb226; min-height: 100%; padding: clamp(26px, 3.5vw, 52px); }
.ruleCard > p { color: var(--rules-magenta); font-size: 10px; font-weight: 900; letter-spacing: .15em; margin: 0 0 18px; text-transform: uppercase; }
.ruleCard h3 { color: var(--rules-ivory); font: 400 clamp(28px, 3vw, 42px)/1.08 Georgia, serif; letter-spacing: -.03em; margin: 0 0 22px; }
.ruleCard ul { color: var(--rules-muted); display: grid; gap: 13px; line-height: 1.7; margin: 0; padding-left: 20px; }
.ruleCard li::marker { color: var(--rules-red); }
.ruleCard strong { color: var(--rules-rose); }

.rulesProtocol { background: linear-gradient(120deg, #12080c, #25002f); border: 1px solid #ff9bb22f; display: grid; gap: clamp(40px, 7vw, 100px); grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.2fr); margin-top: 70px; padding: clamp(30px, 5vw, 70px); }
.protocolList { display: grid; }
.protocolList p { border-bottom: 1px solid #ff9bb224; display: grid; gap: 7px; margin: 0; padding: 18px 0; }
.protocolList p:last-child { border: 0; }
.protocolList strong { color: var(--rules-rose); font: 400 24px Georgia, serif; }
.protocolList span { color: var(--rules-muted); line-height: 1.65; }

.rulesApply { background: radial-gradient(circle at 80% 10%, #e6288730, transparent 32%), linear-gradient(145deg, #3b0717, #100018); border: 1px solid #ff9bb24a; margin-top: 30px; padding: clamp(36px, 7vw, 92px); }
.rulesApply > p:not(.eyebrow) { color: var(--rules-muted); font-size: 18px; line-height: 1.75; max-width: 820px; }
.rulesConfirmation { display: grid; gap: 14px; margin-top: 34px; max-width: 900px; }
.rulesConfirmation label { align-items: flex-start; color: var(--rules-muted); display: flex; gap: 12px; line-height: 1.55; }
.rulesConfirmation input { accent-color: var(--rules-red); flex: 0 0 auto; height: 20px; margin-top: 2px; width: 20px; }
.rulesConfirmation .rulesButton { width: fit-content; }
.rulesError { background: #4b0a16; border-left: 3px solid var(--rules-rose); color: #ffe7ec; margin: 0; padding: 13px 16px; }

.applicationHero { background: radial-gradient(circle at 70% 10%, #e6288730, transparent 28%), linear-gradient(125deg, #310615, #100018 66%); border-bottom: 1px solid #ff9bb22b; min-height: 520px; padding: clamp(70px, 10vw, 140px) max(7vw, 28px); }
.applicationHero > div { max-width: 980px; }
.applicationHero p:not(.eyebrow) { color: var(--rules-muted); font-size: 20px; line-height: 1.7; max-width: 730px; }
.applicationBody { margin: 0 auto; max-width: 1500px; padding: 70px max(4vw, 18px) 110px; }
.applicationGate { background: linear-gradient(145deg, #23070f, #100018); border: 1px solid #ff9bb238; margin: 0 auto; max-width: 900px; padding: clamp(34px, 7vw, 86px); text-align: center; }
.applicationGate p:not(.eyebrow) { color: var(--rules-muted); line-height: 1.75; }
.applicationPanel { margin-top: 0; }
.applicationGroup { border: 0; border-top: 1px solid #ff9bb238; margin: 0 0 34px; padding: 28px 0 0; }
.applicationGroup:first-of-type { border-top: 0; padding-top: 0; }
.applicationGroup > legend { color: var(--rules-rose); font: 400 28px Georgia, serif; padding-right: 18px; }
.applicationConfirmations { margin-top: 0; }

@media (max-width: 900px) {
  .rulesGrid, .rulesProtocol { grid-template-columns: 1fr; }
  .rulesHero > img { opacity: .72; width: 100%; }
  .rulesHeroShade { background: linear-gradient(0deg, #050305 8%, #100018e8 62%, #570b1d75); }
  .rulesHeroCopy { justify-content: flex-end; padding-bottom: 80px; width: 100%; }
}

@media (max-width: 620px) {
  .rulesTopbar { align-items: flex-start; gap: 14px; }
  .rulesTopbar nav { gap: 10px; }
  .rulesHero { min-height: 700px; }
  .rulesHeroCopy h1, .applicationHero h1 { font-size: 58px; }
  .rulesBody { padding-inline: 10px; }
  .ruleCard, .rulesApply, .rulesProtocol { padding-inline: 22px; }
  .rulesConfirmation .rulesButton { width: 100%; }
}