:root {
  --red: #e51b20;
  --green: #03a62e;
  --blue: #0063a3;
  --yellow: #f2e436;
  --black: #202020;
  --paper: #f3f5ed;
}

body { background: var(--red); }

.topbar {
  height: 104px;
  background: #c21b1e;
  border-bottom: 3px solid var(--paper);
  padding-inline: clamp(22px, 4.5vw, 70px);
}
.brand { transform:none; }
.topbar nav a:hover { color: var(--yellow); }
.topbar .button-small {
  background: var(--paper);
  color: var(--red);
  box-shadow: 6px 6px 0 var(--green);
}
.topbar .button-small:hover { box-shadow: 9px 9px 0 var(--green); }

.hero {
  min-height: 760px;
  background: var(--red);
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .7fr);
  gap: 0;
  padding: 52px clamp(22px, 4.5vw, 70px) 76px;
  position: relative;
}
.hero::before {
  content: "13";
  position: absolute;
  right: 27%;
  top: 9%;
  color: transparent;
  -webkit-text-stroke: 3px rgba(243,245,237,.15);
  font: italic 900 22rem/.7 "Barlow Condensed", Impact, sans-serif;
  transform: rotate(-8deg);
  pointer-events: none;
}
.hero-copy { align-self: end; padding-right: 34px; }
.eyebrow { font-size: .82rem; letter-spacing: .14em; }
.dot { display: none; }
h1 {
  font-size: clamp(5.2rem, 8.8vw, 9.2rem);
  line-height: .82;
  letter-spacing: 0;
  margin: 28px 0 36px;
  max-width: 820px;
}
h1 em {
  color: var(--yellow);
  text-shadow: 8px 7px 0 var(--green);
}
h1 em::after { display: none; }
.hero-copy > p { color: var(--paper); max-width: 520px; font-size: 1rem; }
.hero-actions { align-items: flex-end; }
.hero-actions .button {
  background: var(--paper);
  color: var(--red);
  box-shadow: 9px 9px 0 var(--green);
}
.hero-actions .button:hover { box-shadow: 12px 12px 0 var(--green); }
.text-link { font-size: .88rem; text-transform: uppercase; letter-spacing: .04em; }
.campus-line { color: var(--paper); opacity: .9; }
.campus-line i { background: var(--yellow); }

.hero-art {
  min-height: 620px;
  margin: -12px -8vw -28px -3vw;
  overflow: hidden;
  clip-path: polygon(17% 0, 100% 0, 100% 100%, 0 93%);
  background: var(--red);
  display: block;
}
.poster { width: 100%; height: 100%; transform: none; box-shadow: none; }
.poster::before { display: none; }
.poster img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: contrast(1.08); }
.tape, .sticker, .flag, .scribble { display: none; }

.ticker {
  background: var(--black);
  color: var(--paper);
  border: 0;
  border-block: 6px solid var(--yellow);
  transform: none;
}
.ticker-track { animation: none; justify-content: space-around; width: 100%; font-size: clamp(1.1rem, 2vw, 1.7rem); }

.how {
  padding: 0;
  display: grid;
  grid-template-columns: .58fr 1.42fr;
  background: var(--paper);
  color: var(--black);
}
.section-heading {
  margin: 0;
  padding: 90px clamp(24px, 5vw, 76px);
  min-height: 520px;
  background: var(--green);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 26px;
}
.section-heading .kicker { color: var(--paper); font-size: .85rem; letter-spacing: .12em; }
.section-heading h2 { font-size: clamp(4.7rem, 7.5vw, 8rem); line-height: .87; letter-spacing: .005em; transform: rotate(-3deg); }
.participation-copy {
  min-height: 520px;
  padding: 58px clamp(30px, 6vw, 100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: var(--paper);
  color: var(--black);
  position: relative;
  overflow: hidden;
}
.participation-copy::before {
  content: "01";
  position: absolute;
  right: 3%;
  top: 50%;
  color: transparent;
  -webkit-text-stroke: 3px rgba(229,27,32,.11);
  font: italic 900 24rem/.7 "Barlow Condensed", Impact, sans-serif;
  transform: translateY(-50%) rotate(-7deg);
  pointer-events: none;
}
.participation-copy::after {
  content: "";
  position: absolute;
  width: 34%;
  height: 20px;
  right: -4%;
  top: 36px;
  background: var(--yellow);
  transform: rotate(-5deg);
}
.participation-number {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border: 3px solid var(--black);
  border-radius: 50%;
  font: italic 900 1.25rem/1 "Barlow Condensed", Impact, sans-serif;
}
.participation-copy h3 {
  max-width: 720px;
  font-size: clamp(3.5rem, 6vw, 6.5rem);
  line-height: .88;
  letter-spacing: 0;
  color: var(--red);
  position: relative;
  z-index: 1;
}
.participation-copy h3 span {
  display: inline-block;
  margin-top: .12em;
  padding: .03em .12em .09em;
  background: var(--green);
  color: var(--paper);
  box-shadow: 8px 8px 0 var(--yellow);
  transform: rotate(-1deg);
}
.participation-copy p {
  max-width: 650px;
  margin: 32px 0 0;
  font-size: 1.08rem;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}
.participation-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  position: relative;
  z-index: 1;
  font: 800 .72rem/1 Inter, sans-serif;
  letter-spacing: .07em;
}
.participation-flow i { width: 28px; height: 3px; background: var(--red); transform: rotate(-6deg); }
.participation-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 28px;
  padding: 0 20px;
  position: relative;
  z-index: 1;
  background: var(--black);
  color: var(--paper);
  text-decoration: none;
  font: italic 900 1rem/1 "Barlow Condensed", Impact, sans-serif;
  letter-spacing: .025em;
  box-shadow: 7px 7px 0 var(--yellow);
  transform: rotate(-1deg);
  transition: transform .18s ease, box-shadow .18s ease;
}
.participation-link:hover,
.participation-link:focus-visible {
  transform: rotate(-1deg) translate(-2px, -2px);
  box-shadow: 10px 10px 0 var(--yellow);
}
.steps { display: block; padding: 55px clamp(25px, 5vw, 80px); }
.step, .step.blue, .step.green {
  min-height: 180px;
  padding: 28px 0;
  color: var(--black);
  background: transparent;
  display: grid;
  grid-template-columns: 72px minmax(240px, .9fr) 1fr;
  align-items: center;
  gap: 26px;
  border-bottom: 3px solid var(--black);
  transform: none;
  overflow: visible;
}
.step:first-child { border-top: 3px solid var(--black); }
.step:hover, .step.blue:hover { transform: none; }
.step-number {
  width: 54px;
  height: 54px;
  border: 3px solid var(--black);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 1.2rem;
}
.step-icon { display: none; }
.step h3 {
  margin: 0;
  max-width: 330px;
  font-size: clamp(2.6rem, 4vw, 4.2rem);
  line-height: .9;
  letter-spacing: .005em;
}
.step:nth-child(2) h3 { color: var(--red); }
.step:nth-child(3) h3 { color: var(--blue); }
.step p { color: var(--black); max-width: 240px; }

.agenda {
  background: var(--blue);
  color: var(--paper);
  padding: 90px clamp(22px, 5vw, 82px) 100px;
}
.agenda-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 50px;
  align-items: end;
  padding-bottom: 34px;
  border-bottom: 4px solid var(--paper);
}
.agenda-heading .kicker { color: var(--yellow); margin-bottom: 22px; }
.agenda-heading h2 { font-size: clamp(4.8rem, 7.5vw, 8rem); line-height: .87; letter-spacing: .005em; }
.agenda-body { min-height: 230px; }
.agenda-status { margin: 0; padding: 54px 0; font-size: 1.05rem; }
.agenda-item {
  display: grid;
  grid-template-columns: 120px minmax(280px, 1fr) auto;
  gap: 34px;
  align-items: center;
  min-height: 138px;
  padding: 24px 0;
  border-bottom: 2px solid rgba(243,245,237,.55);
}
.agenda-item time { font: italic 900 2rem/1 "Barlow Condensed", Impact, sans-serif; color: var(--yellow); }
.agenda-item h3 { font-size: clamp(2rem, 3vw, 3rem); line-height: .92; letter-spacing: .005em; }
.agenda-item p { margin: 9px 0 0; color: rgba(243,245,237,.78); font-size: .92rem; }
.agenda-item-details { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.agenda-item-details span { font-weight: 800; }
.agenda-item-details a {
  background: var(--yellow);
  color: var(--black);
  padding: 12px 15px;
  text-decoration: none;
  font: italic 900 .92rem/1 "Barlow Condensed", Impact, sans-serif;
  box-shadow: 5px 5px 0 var(--green);
}
.agenda-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 24px; margin-top: 32px; }
.agenda-pagination[hidden] { display: none; }
.agenda-pagination button {
  border: 2px solid var(--paper);
  background: transparent;
  color: var(--paper);
  padding: 11px 15px;
  font: 800 .78rem/1 Inter, sans-serif;
  cursor: pointer;
}
.agenda-pagination button:disabled { opacity: .35; cursor: default; }
.agenda-pagination span { font: 800 .76rem/1 Inter, sans-serif; letter-spacing: .06em; }

.movement {
  min-height: 720px;
  padding: 90px clamp(22px, 6vw, 100px);
  background: var(--black);
  grid-template-columns: .65fr 1.35fr;
  gap: clamp(55px, 8vw, 130px);
}
.movement-image { max-width: 380px; transform: rotate(-2deg); }
.movement-image::before { background: var(--red); inset: -20px 20px 20px -20px; }
.movement-image::after { background: var(--yellow); color: var(--black); box-shadow: 7px 7px 0 var(--green); }
.movement h2 { font-size: clamp(4.5rem, 7.7vw, 8.1rem); line-height: .86; letter-spacing: 0; }
.movement h2 mark { background: transparent; color: var(--yellow); padding: 0; text-shadow: 7px 6px 0 var(--green); }
.movement-copy > p { max-width: 520px; }
.movement ul { border-top: 2px solid rgba(243,245,237,.35); padding-top: 22px; max-width: 560px; }

.cta {
  background: var(--yellow);
  color: var(--black);
  min-height: 720px;
  padding: 90px clamp(22px, 5vw, 82px);
  grid-template-columns: 1.1fr .9fr;
  align-items: start;
}
.cta::after { display: none; }
.cta .kicker { color: var(--red); }
.cta h2 { font-size: clamp(4.1rem, 6.8vw, 7.1rem); line-height: .88; letter-spacing: 0; }
.cta-card {
  background: var(--paper);
  border: 4px solid var(--black);
  box-shadow: 12px 12px 0 var(--green);
  transform: none;
  padding: clamp(24px, 4vw, 38px);
}
.student-form { display:grid; gap:20px; }
.student-form[hidden], .student-success[hidden], .manual-institution[hidden], .institution-missing[hidden] { display:none; }
.student-type { margin:0; padding:0 0 20px; border:0; border-bottom:3px solid var(--black); display:flex; flex-wrap:wrap; gap:12px 22px; }
.student-type legend { width:100%; margin-bottom:12px; font:italic 900 1.3rem/1 "Barlow Condensed",Impact,sans-serif; text-transform:uppercase; }
.student-type label,.institution-missing { display:flex; align-items:center; gap:9px; font-size:.88rem; font-weight:800; }
.student-type input,.institution-missing input { width:20px; height:20px; margin:0; accent-color:var(--green); }
.student-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-field { display:grid; gap:7px; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.form-field-wide { grid-column:1/-1; }
.form-field input,.form-field select { width:100%; min-height:50px; border:3px solid var(--black); border-radius:0; background:white; color:var(--black); padding:0 12px; font:600 .92rem/1.2 Inter,Arial,sans-serif; text-transform:none; letter-spacing:0; }
.form-field select:disabled { color:#777; background:#dedfd9; }
.institution-missing { padding:14px; background:var(--yellow); border:2px solid var(--black); }
.manual-institution { margin-top:-6px; }
.cta-card .student-submit { width:100%; min-height:54px; border:3px solid var(--black); background:var(--green); color:white; margin-top:2px; font:italic 900 1.2rem/1 "Barlow Condensed",Impact,sans-serif; box-shadow:6px 6px 0 var(--black); opacity:1; cursor:pointer; }
.cta-card .student-submit:disabled { opacity:.65; cursor:wait; }
.student-data-notice { margin:0; color:#555; font-size:.72rem; line-height:1.5; }
.student-form-message { min-height:20px; margin:0; font-size:.86rem; line-height:1.45; font-weight:700; }
.student-form-message.error { color:#a30e12; }
.student-success { padding:20px 4px; }
.student-success > span { display:inline-block; padding:7px 10px; background:var(--yellow); border:2px solid var(--black); font-size:.72rem; font-weight:900; letter-spacing:.07em; }
.student-success h3 { margin:24px 0 18px; color:var(--red); font-size:clamp(3.3rem,5vw,5rem); line-height:.88; }
.student-success p { margin:0 0 28px; max-width:470px; line-height:1.65; }
.student-success a { display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 24px; background:var(--green); color:white; border:3px solid var(--black); text-decoration:none; font:italic 900 1.2rem/1 "Barlow Condensed",Impact,sans-serif; box-shadow:6px 6px 0 var(--black); }

footer { background: #c21b1e; border-top: 3px solid var(--paper); }

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding-right: 0; }
  .hero-art { height: 610px; min-height: 0; margin: 48px -10vw -28px 12%; }
  .hero::before { right: -8%; top: 43%; }
  .how { grid-template-columns: 1fr; }
  .section-heading { min-height: 400px; }
  .participation-copy { min-height: 460px; }
  .agenda-item { grid-template-columns: 90px 1fr; }
  .agenda-item-details { grid-column: 2; justify-content: flex-start; }
  .movement { grid-template-columns: 1fr; }
  .movement-copy { order: -1; }
}

@media (max-width: 600px) {
  .topbar { height: 88px; }
  .topbar .button-small { right: 18px; max-width: 150px; text-align: center; }
  .hero { padding: 38px 20px 48px; }
  h1 { font-size: clamp(4.5rem, 21vw, 6.2rem); }
  .hero-copy > p { max-width: 100%; }
  .hero-actions { align-items: flex-start; }
  .hero-art { height: 480px; margin: 45px -55px -20px 32px; }
  .ticker-track { width: max-content; padding-inline: 18px; }
  .section-heading { min-height: 340px; padding: 60px 20px; }
  .participation-copy { min-height: 0; padding: 60px 20px 70px; }
  .participation-copy::before { font-size: 15rem; right: -6%; }
  .participation-copy::after { width: 48%; }
  .participation-copy h3 { font-size: 3.25rem; line-height: .95; }
  .participation-copy p { font-size: 1rem; }
  .steps { padding: 36px 20px 55px; }
  .step, .step.blue, .step.green {
    grid-template-columns: 56px 1fr;
    gap: 18px;
    padding-block: 28px;
  }
  .step p { grid-column: 2; margin: -8px 0 0; }
  .step h3 { font-size: 2.55rem; line-height: .92; }
  .agenda { padding: 70px 20px 80px; }
  .agenda-heading { grid-template-columns: 1fr; align-items: start; }
  .agenda-heading h2 { font-size: 4.5rem; line-height: .9; }
  .agenda-item { grid-template-columns: 70px 1fr; gap: 18px; }
  .agenda-item time { font-size: 1.45rem; }
  .agenda-item h3 { font-size: 2.2rem; }
  .agenda-item-details { flex-wrap: wrap; gap: 15px; }
  .agenda-pagination { justify-content: space-between; gap: 10px; }
  .movement { padding: 75px 20px 90px; }
  .movement h2 { font-size: 4.3rem; line-height: .88; }
  .cta { grid-template-columns: 1fr; padding: 75px 20px 85px; }
  .cta h2 { font-size: 4rem; line-height: .9; }
  .cta-card { padding:24px 18px; box-shadow:8px 8px 0 var(--green); }
  .student-form-grid { grid-template-columns:1fr; }
  .form-field-wide { grid-column:auto; }
}
