/*
 * 2414 Scholarship Competition
 *
 * The mockup is a 1920-unit-wide canvas. Every desktop measurement below is written in those
 * units and multiplied by --u, so the page matches the mockup at 1920px and scales down
 * proportionally. Font sizes and key spacing have px floors so small screens stay readable.
 *
 * Type scale (mockup style sheet, pt -> canvas units at 4/3):
 *   Body 26pt = 34.67   Small 21pt = 28   Label 22pt = 29.33   Button 25pt = 33.33
 *   H3 36pt = 48        H2 78pt = 104     H1 124pt = 165.33
 */

/*
 * Fonts: self-hosted WOFF2 from Google Fonts (SIL OFL 1.1, licenses alongside), latin and
 * latin-ext subsets. Afacad is variable on weight. League Gothic is variable on width; the
 * mockup's "League Gothic SemiCondensed" is width 87.5%, so that face is pinned to 87.5%.
 * League Gothic uses font-display: block because its fallbacks are far wider and would jump.
 */
@font-face {
  font-family: "Afacad";
  src: url("../fonts/afacad-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Afacad";
  src: url("../fonts/afacad-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Afacad";
  src: url("../fonts/afacad-italic-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Afacad";
  src: url("../fonts/afacad-italic-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "League Gothic SemiCondensed";
  src: url("../fonts/league-gothic-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-stretch: 87.5%;
  font-style: normal;
  font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "League Gothic SemiCondensed";
  src: url("../fonts/league-gothic-latin.woff2") format("woff2");
  font-weight: 400;
  font-stretch: 87.5%;
  font-style: normal;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Arial scaled to take up the same space as Afacad, used while Afacad loads so the swap
 * doesn't reflow the page. Values measured in Edge: Afacad is 89.12% of Arial's width
 * (81.85% in bold); Afacad ascent 1.000em, descent 0.333em (overrides divide by size-adjust).
 */
@font-face {
  font-family: "Afacad Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  size-adjust: 89.12%;
  ascent-override: 112.21%;
  descent-override: 37.37%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Afacad Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 700;
  size-adjust: 81.85%;
  ascent-override: 122.18%;
  descent-override: 40.68%;
  line-gap-override: 0%;
}

:root {
  --green: #447568;
  --red: #B21D22;
  --ink: #2B2D2A;
  --pale-green: #E8EDE5;
  --cream: #F7F4EC;
  --white: #FFFFFF;

  --u: calc(min(100vw, 1920px) / 1920);

  --fs-body: max(17px, calc(34.67 * var(--u)));
  --fs-small: max(15px, calc(28 * var(--u)));
  --fs-label: max(14px, calc(29.33 * var(--u)));
  --fs-button: max(16px, calc(33.33 * var(--u)));
  --fs-h3: max(22px, calc(48 * var(--u)));
  --fs-h2: max(40px, calc(104 * var(--u)));
  --fs-h1: max(60px, calc(165.33 * var(--u)));

  --gutter: max(20px, calc(133 * var(--u)));
  --col-gap: max(32px, calc(106 * var(--u)));

  --font-sans: "Afacad", "Afacad Fallback", system-ui, sans-serif;
  --font-display: "League Gothic SemiCondensed", "League Gothic", Impact, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.3;
}

img, svg { display: block; max-width: 100%; height: auto; }

p { margin: 0 0 0.35em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3 { margin: 0; font-weight: 400; }

a { color: inherit; }

.container {
  width: 100%;
  max-width: calc(1654px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Type styles ---------- */

.h1, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }

.h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.125;
}

.label {
  font-weight: 700;
  font-size: var(--fs-label);
  line-height: 1.28;
  text-transform: uppercase;
  margin: 0 0 max(16px, calc(46 * var(--u)));
}

.small { font-size: var(--fs-small); line-height: 1.29; }

.c-green { color: var(--green); }
.c-red { color: var(--red); }
.c-ink { color: var(--ink); }
.c-white { color: var(--white); }
.c-cream { color: var(--cream); }

.bullets { list-style: none; margin: 0; padding: 0; }
.bullets li { margin: 0 0 0.35em; }
.bullets li::before { content: "\2022\00a0"; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: max(48px, calc(85 * var(--u)));
  padding: max(10px, calc(12 * var(--u))) max(18px, calc(32 * var(--u)));
  border: 2px solid var(--red);
  background: var(--red);
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-button);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible { background: #97181d; border-color: #97181d; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.btn--outline { background: transparent; color: var(--red); padding-left: max(18px, calc(44 * var(--u))); padding-right: max(18px, calc(44 * var(--u))); }
.btn--outline:hover, .btn--outline:focus-visible { background: var(--red); color: var(--white); }

.btn--cream { background: var(--cream); border-color: var(--cream); color: var(--red); }
.btn--cream:hover, .btn--cream:focus-visible { background: var(--white); border-color: var(--white); }

.btn-row { display: flex; flex-wrap: wrap; gap: max(16px, calc(68 * var(--u))); }

/* ---------- Header ---------- */

.site-header { background: var(--cream); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: max(72px, calc(183 * var(--u)));
  padding: max(10px, calc(20 * var(--u))) max(16px, calc(52 * var(--u))) max(10px, calc(20 * var(--u))) max(16px, calc(42 * var(--u)));
  max-width: 1920px;
  margin: 0 auto;
}
.site-header__logo { flex: 0 0 auto; width: max(160px, calc(549 * var(--u))); margin: calc(-6 * var(--u)) 0 0 calc(-13 * var(--u)); }
.site-header__logo img { width: 100%; height: auto; }
.site-header .btn { margin-top: calc(-6 * var(--u)); }

/* The footer has the 2414 Ministries logo, which links to the main site, and
   a short "About 2414" text. */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding: max(40px, calc(90 * var(--u))) 0 max(24px, calc(40 * var(--u)));
}
.site-footer__inner {
  display: flex;
  align-items: center;
  gap: max(24px, calc(80 * var(--u)));
}
.site-footer__logo { flex: 0 0 auto; width: max(120px, calc(260 * var(--u))); }
.site-footer__logo img { display: block; width: 100%; height: auto; }
.site-footer__logo:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }
.site-footer__about { max-width: max(0px, calc(900 * var(--u))); font-size: var(--fs-small); line-height: 1.4; }
.site-footer__about p { margin: 0 0 max(8px, calc(14 * var(--u))); }
.site-footer__about a { color: var(--cream); text-decoration: underline; }
.site-footer__title {
  margin: 0 0 max(8px, calc(14 * var(--u)));
  color: var(--white);
  font-size: max(20px, calc(40 * var(--u)));
  line-height: 1.2;
}
.site-footer__legal { margin-top: max(24px, calc(56 * var(--u))); font-size: 13px; opacity: 0.75; }
.site-footer__legal p { margin: 0; }

/* ---------- Hero ---------- */

.hero {
  background: #E9E6DF url("../images/paper.jpg") center top / cover;
  overflow: hidden;
}
.hero__text { padding-top: max(36px, calc(72 * var(--u))); position: relative; z-index: 2; }
.hero__title {
  font-family: var(--font-display);
  font-size: max(46px, calc(147.7 * var(--u)));
  line-height: 0.985;
  margin: 0 0 max(16px, calc(38 * var(--u)));
}
.hero__title span { display: block; }
.hero__intro { max-width: max(0px, calc(1080 * var(--u))); margin-bottom: max(20px, calc(34 * var(--u))); }
.hero__intro p { line-height: 1.33; }

/* Collage: Shreveport skyline, red sun, and mosque. Positions are percentages of a
   1920 x 720 box measured from the mockup (the box starts at the top of the red circle).
   The mosque image is cropped the way the mockup frames it. Its uneven base is cut off,
   and the bottom of the image runs just past the box, into the band below. */
.hero__art {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: calc(-243 * var(--u)) auto 0;
  aspect-ratio: 1920 / 720;
  overflow: hidden;
  pointer-events: none;
}
.hero__art > * { position: absolute; }
.hero__sun {
  left: 81.41%;
  top: 0;
  width: 32.08%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red);
}
.hero__skyline { left: 0; top: 35.8%; width: 61.46%; mix-blend-mode: multiply; }
.hero__mosque { left: 61.68%; top: 44.21%; width: 38.4%; mix-blend-mode: multiply; }

/* ---------- Benefits band ---------- */

.band { background: var(--green); color: var(--white); }
.band__list {
  list-style: none;
  margin: 0 auto;
  max-width: 1920px;
  padding: max(28px, calc(46 * var(--u))) max(16px, calc(90 * var(--u))) max(28px, calc(41 * var(--u)));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
}
.band__list li { font-weight: 700; font-size: var(--fs-h3); line-height: 1.125; }

/* ---------- Generic sections ---------- */

.section { padding: max(56px, calc(150 * var(--u))) 0 max(56px, calc(170 * var(--u))); }
.section--cream { background: var(--cream); }
.section--pale { background: var(--pale-green); }
.section--green { background: var(--green); color: var(--white); }
.section--red { background: var(--red); color: var(--cream); }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--col-gap);
}

/* ---------- "What's God's will" ---------- */

.will { padding-top: max(56px, calc(160 * var(--u))); padding-bottom: max(56px, calc(185 * var(--u))); }
.will__title { margin-bottom: max(24px, calc(60 * var(--u))); line-height: 1.06; }
.will__left p { max-width: max(0px, calc(680 * var(--u))); margin-bottom: 0.45em; }
.will__left .btn { margin-top: max(24px, calc(74 * var(--u))); }
.will__right .h3 { margin: max(0px, calc(12 * var(--u))) 0 max(10px, calc(18 * var(--u))); }
.will__right .bullets li { margin-bottom: 0.45em; }
.will__right .gap { margin-top: max(16px, calc(42 * var(--u))); }
.will__right .normal { margin: 0.2em 0 0.3em; }

/* ---------- Benefits (pale green) ---------- */

.benefits { padding-top: max(56px, calc(120 * var(--u))); padding-bottom: max(56px, calc(120 * var(--u))); }
.benefits__title { line-height: 1.06; margin-bottom: max(10px, calc(32 * var(--u))); }
.benefits__lead { margin-bottom: max(32px, calc(100 * var(--u))); }
.benefits__grid {
  display: grid;
  grid-template-columns: calc(600 * var(--u)) calc(600 * var(--u)) 1fr;
  column-gap: 0;
  row-gap: 40px;
  margin-bottom: max(32px, calc(105 * var(--u)));
}
.benefit__head {
  display: flex;
  align-items: center;
  gap: max(12px, calc(9 * var(--u)));
  margin-bottom: max(16px, calc(58 * var(--u)));
}
.benefit__head img { width: max(64px, calc(160 * var(--u))); height: auto; flex: 0 0 auto; margin: calc(-21 * var(--u)) calc(-12 * var(--u)) calc(-21 * var(--u)) calc(-21 * var(--u)); }
.benefit p { line-height: 1.3; }

/* ---------- How it works ---------- */

.how { padding-top: max(56px, calc(179 * var(--u))); padding-bottom: max(56px, calc(118 * var(--u))); }
.how__left { max-width: max(0px, calc(745 * var(--u))); }
.how__title { line-height: 1.06; margin-bottom: max(24px, calc(58 * var(--u))); }
.how__left p { margin-bottom: max(16px, calc(77 * var(--u))); }
.how__left .btn { margin-top: max(8px, calc(25 * var(--u))); }
.how__eligible { display: inline-block; margin-bottom: max(16px, calc(16 * var(--u))); }
.how__eligible .h3 { color: var(--green); line-height: 1; white-space: nowrap; }
.swoosh { display: block; width: 100%; height: auto; margin-top: max(2px, calc(6 * var(--u))); color: var(--green); }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { margin-bottom: max(28px, calc(78 * var(--u))); }
.steps li:last-child { margin-bottom: 0; }
.steps .h3 { color: var(--green); margin-bottom: max(6px, calc(12 * var(--u))); }
.steps .num { margin-right: 0.35em; }

/* ---------- Sponsor ---------- */

.sponsor { padding-top: max(56px, calc(100 * var(--u))); padding-bottom: max(56px, calc(93 * var(--u))); text-align: center; }
.sponsor .label { color: var(--white); margin-bottom: max(20px, calc(66 * var(--u))); }
.sponsor__title { color: var(--white); line-height: 1.06; margin-bottom: max(28px, calc(80 * var(--u))); }
.sponsor__title u { text-decoration-thickness: max(2px, calc(3 * var(--u))); text-underline-offset: 0.08em; }
.sponsor__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--col-gap);
  text-align: left;
  margin-bottom: max(36px, calc(86 * var(--u)));
}
.sponsor__cols .h3 { color: var(--cream); margin-bottom: max(8px, calc(16 * var(--u))); }
.sponsor__cols .right { padding-left: calc(27 * var(--u)); margin-right: calc(-12 * var(--u)); }
.sponsor__cols .bullets li { margin-bottom: 0.45em; }
.callout {
  max-width: max(0px, calc(1176 * var(--u)));
  margin: 0 auto max(32px, calc(68 * var(--u)));
  padding: max(20px, calc(32 * var(--u))) max(20px, calc(50 * var(--u))) max(22px, calc(38 * var(--u)));
  background: var(--pale-green);
  color: var(--red);
  border-radius: max(18px, calc(40 * var(--u)));
  font-size: max(17px, calc(35.6 * var(--u)));
  line-height: 1.32;
}
.callout strong { font-weight: 700; font-style: italic; }

/* ---------- Schedule ---------- */

.schedule { padding-top: max(56px, calc(115 * var(--u))); padding-bottom: max(56px, calc(140 * var(--u))); }
.schedule__title { line-height: 1.06; margin-bottom: max(28px, calc(30 * var(--u))); }
.schedule__title .line2 { color: var(--ink); text-transform: uppercase; }
.who .h3 { text-transform: uppercase; margin-bottom: max(8px, calc(18 * var(--u))); }
.who__block { margin-bottom: max(28px, calc(86 * var(--u))); }
.who__block:last-child { margin-bottom: 0; }
.who p { margin-bottom: 0.45em; max-width: max(0px, calc(745 * var(--u))); }
.prizes { text-align: center; padding-top: calc(6 * var(--u)); }
.prizes__total { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1; color: var(--red); margin-bottom: max(4px, calc(6 * var(--u))); }
.prizes .label { color: var(--red); margin: 0 0 max(10px, calc(22 * var(--u))); }
.prizes__list { list-style: none; margin: 0; padding: 0; color: var(--green); font-weight: 700; }
.prizes__list li { margin-bottom: 0.45em; }

.timeline { list-style: none; margin: max(40px, calc(78 * var(--u))) 0 max(40px, calc(120 * var(--u))); padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: calc(401 * var(--u)) 1fr;
  column-gap: 0;
  align-items: start;
  min-height: max(0px, calc(160 * var(--u)));
  padding: max(16px, calc(28 * var(--u))) 0 max(16px, calc(24 * var(--u)));
  border-top: 1px solid var(--green);
}
.timeline li:last-child { min-height: 0; padding-bottom: 0; }
.timeline .date { color: var(--red); font-weight: 700; font-size: var(--fs-h3); line-height: 1.125; padding-top: calc(10 * var(--u)); }
.timeline .what .h3 { color: var(--green); margin-bottom: max(4px, calc(10 * var(--u))); }
.timeline .what p { font-size: var(--fs-small); }

/* ---------- Entering is easier ---------- */

.easy { padding-top: max(48px, calc(144 * var(--u))); padding-bottom: max(48px, calc(74 * var(--u))); text-align: center; }
.easy__title { color: var(--cream); line-height: 1.06; margin-bottom: max(28px, calc(50 * var(--u))); }
.easy__steps {
  list-style: none;
  margin: 0 calc(-28 * var(--u)) max(32px, calc(60 * var(--u)));
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 0;
}
.easy__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(72px, calc(142 * var(--u)));
  height: max(72px, calc(142 * var(--u)));
  margin: 0 auto max(14px, calc(26 * var(--u)));
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: max(48px, calc(102 * var(--u)));
  line-height: 1;
  padding-top: 0.04em;
}
.easy__steps .h3 { color: var(--cream); }

/* ---------- FAQ ---------- */

.faq { padding-top: max(56px, calc(124 * var(--u))); padding-bottom: max(56px, calc(70 * var(--u))); }
.faq__title { line-height: 1.06; margin-bottom: max(16px, calc(36 * var(--u))); }
.faq__list { margin: 0; }
.faq__item {
  display: grid;
  grid-template-columns: calc(627 * var(--u)) 1fr;
  column-gap: 0;
  padding: max(18px, calc(36 * var(--u))) 0 max(24px, calc(56 * var(--u)));
  border-top: 2px solid var(--green);
}
.faq__item dt {
  color: var(--green);
  font-weight: 700;
  font-size: var(--fs-label);
  line-height: 1.28;
  padding-right: calc(67 * var(--u));
}
.faq__item dd { margin: 0 calc(-20 * var(--u)) 0 0; font-size: var(--fs-small); line-height: 1.29; }
.faq__item dd p { margin-bottom: 0.55em; }
.faq__item:first-child { min-height: calc(240 * var(--u)); }

/* ---------- Registration ---------- */

.register { padding-top: max(56px, calc(200 * var(--u))); padding-bottom: max(56px, calc(150 * var(--u))); }
.register__title { font-family: var(--font-display); line-height: 0.97; margin-bottom: max(28px, calc(96 * var(--u))); }
.register__title .l1 { display: block; font-size: max(52px, calc(131.7 * var(--u))); color: var(--cream); }
.register__title .l2 { display: block; font-size: var(--fs-h2); color: var(--ink); }
.register__left .h3 { color: var(--white); margin-bottom: max(8px, calc(14 * var(--u))); }
.register__left p { color: var(--white); max-width: max(0px, calc(680 * var(--u))); }

.form { color: var(--white); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; column-gap: max(16px, calc(40 * var(--u))); }
.field { margin-bottom: max(18px, calc(34 * var(--u))); }
.field > label, .field > .field__label {
  display: block;
  font-weight: 700;
  font-size: var(--fs-label);
  line-height: 1.28;
  margin-bottom: max(6px, calc(10 * var(--u)));
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  display: block;
  width: 100%;
  height: max(48px, calc(82 * var(--u)));
  padding: 0 max(12px, calc(24 * var(--u)));
  border: 0;
  border-radius: 0;
  background: #FFFEFC;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
}
.field select { cursor: pointer; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .consent input:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

/* Radio buttons and checkboxes are rendered by the form module as
   <span class="form_data_option-label"><input/><label>Text</label></span>. */
.choices {
  border: 0;
  margin: 0;
  padding: max(14px, calc(28 * var(--u))) max(14px, calc(28 * var(--u))) max(14px, calc(26 * var(--u)));
  background: #FFFEFC;
  color: var(--ink);
}
.choices .form_data_option-label {
  display: flex;
  align-items: center;
  gap: max(8px, calc(12 * var(--u)));
  font-size: var(--fs-small);
  line-height: 1.29;
  margin-bottom: max(8px, calc(22 * var(--u)));
}
.choices .form_data_option-label:last-child { margin-bottom: 0; }
.choices--inline { display: flex; flex-wrap: wrap; column-gap: max(24px, calc(56 * var(--u))); }
.choices--inline .form_data_option-label { margin-bottom: 0; }
.choices label { cursor: pointer; }
.choices input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: max(18px, calc(27 * var(--u)));
  height: max(18px, calc(27 * var(--u)));
  margin: 0 0 calc(4 * var(--u));
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: #FFFEFC;
  cursor: pointer;
}
.choices input:checked { background: radial-gradient(circle, var(--ink) 0 38%, transparent 42%); }
.choices input:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.consent { margin-top: max(24px, calc(64 * var(--u))); }
.consent .form_data_option-label {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: max(12px, calc(24 * var(--u)));
  align-items: start;
  font-size: var(--fs-small);
  line-height: 1.29;
}
.consent label { cursor: pointer; }
.consent input {
  appearance: none;
  -webkit-appearance: none;
  width: max(20px, calc(30 * var(--u)));
  height: max(20px, calc(30 * var(--u)));
  margin: calc(2 * var(--u)) 0 0;
  border: 0;
  border-radius: 0;
  background: #FFFEFC;
  cursor: pointer;
}
.consent input:checked {
  background: #FFFEFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%232B2D2A' stroke-width='2.5'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.form__submit { margin-top: max(24px, calc(56 * var(--u))); }

/* The registration form changes with the role chosen at the top. Text marked
   "for-student", "for-parent" or "for-educator" shows only for that role. The
   page's script moves the parent's section ahead of the student's when a
   parent registers, so the tab order follows what is shown. Without :has()
   support, the form shows the student's version plus the educator's fields. */
.reg__educator { display: none; }
.reg__optin { margin-top: max(8px, calc(24 * var(--u))); }
.reg__optin .consent { margin-top: max(14px, calc(28 * var(--u))); }
.reg__heading {
  margin: max(8px, calc(16 * var(--u))) 0 max(14px, calc(26 * var(--u)));
  padding-top: max(14px, calc(26 * var(--u)));
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--cream);
  font-weight: 700;
  font-size: max(17px, calc(36 * var(--u)));
  line-height: 1.2;
}
.reg__note { font-size: var(--fs-small); line-height: 1.29; margin: 0 0 max(8px, calc(16 * var(--u))); }
.reg__closes { color: var(--cream); font-weight: 700; margin: 0 0 max(14px, calc(26 * var(--u))); }
.reg--closed .h3 { color: var(--cream); margin-bottom: max(8px, calc(14 * var(--u))); }
.reg__submit { margin-top: max(24px, calc(48 * var(--u))); }
.reg__submit .form__submit { margin-top: max(8px, calc(16 * var(--u))); }

.reg .for-parent,
.reg .for-educator { display: none; }
.reg .for-student { display: inline; }
.reg:has(input[name="role"][value="Parent"]:checked) .for-student,
.reg:has(input[name="role"][value="Educator"]:checked) .for-student { display: none; }
.reg:has(input[name="role"][value="Parent"]:checked) .for-parent,
.reg:has(input[name="role"][value="Educator"]:checked) .for-educator { display: inline; }
.reg:has(input[name="role"][value="Educator"]:checked) .reg__educator { display: block; }
.reg:has(input[name="role"][value="Educator"]:checked) .reg__texts { display: none; }
@supports not selector(:has(*)) {
  .reg__educator { display: block; }
}

/* The denomination's name is asked for only when "Other" is chosen. Without
   :has() support, it is always shown. */
.reg:has(select[name="denomination"] option[value="Other"]:not(:checked)) .reg__denomination-other { display: none; }

/* Validation messages from the form module. */
.form_errors { margin-bottom: max(18px, calc(34 * var(--u))); }
div.form_error,
.field_error:not(:empty) {
  display: block;
  margin-top: max(4px, calc(8 * var(--u)));
  padding: 0.2em 0.5em;
  background: var(--cream);
  color: var(--red);
  font-size: var(--fs-small);
  font-weight: 700;
}
input.form_error,
textarea.form_error { outline: 3px solid var(--red); outline-offset: 2px; }

/* ---------- Registered (shown in place of the registration form) ---------- */

[hidden] { display: none !important; }

.success {
  background: #E9E6DF url("../images/paper.jpg") center top / cover;
  padding: max(56px, calc(165 * var(--u))) 0 max(64px, calc(250 * var(--u)));
}
.success .form { color: inherit; }
.success__thanks { color: var(--green); }
.success__title { color: var(--red); line-height: 0.95; margin-bottom: max(18px, calc(56 * var(--u))); }
.success__lead { max-width: max(0px, calc(1334 * var(--u))); font-size: max(18px, calc(36 * var(--u))); line-height: 1.25; }
.success__lead p { margin-bottom: 0.45em; }
.success__lead p:first-child { font-size: max(18px, calc(38.7 * var(--u))); }
.success__box {
  max-width: max(0px, calc(1334 * var(--u)));
  margin: max(16px, calc(30 * var(--u))) 0 max(32px, calc(60 * var(--u)));
  padding: max(18px, calc(36 * var(--u))) max(18px, calc(39 * var(--u))) max(18px, calc(38 * var(--u)));
  background: var(--green);
  color: var(--white);
  line-height: 1.3;
}
.success__box p { margin-bottom: 0.45em; }
.success__see { color: var(--red); margin-bottom: max(40px, calc(185 * var(--u))); }
.success__question { color: var(--green); margin-bottom: max(18px, calc(52 * var(--u))); }
.success textarea {
  display: block;
  width: 100%;
  min-height: max(120px, calc(182 * var(--u)));
  padding: max(14px, calc(36 * var(--u))) max(14px, calc(34 * var(--u)));
  border: 0;
  border-radius: 0;
  background: #FFFEFC;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.29;
  resize: vertical;
  margin-bottom: max(20px, calc(52 * var(--u)));
}
/* The "registered" section is worded for whoever registered. The page's
   script sets data-role when the form is submitted. */
.success__for-parent,
.success__for-educator { display: none; }
.success[data-role="Parent"] .success__for-student,
.success[data-role="Educator"] .success__for-student { display: none; }
.success[data-role="Parent"] .success__for-parent,
.success[data-role="Educator"] .success__for-educator { display: block; }
.success .for-parent,
.success .for-educator { display: none; }
.success[data-role="Parent"] .for-student,
.success[data-role="Educator"] .for-student { display: none; }
.success[data-role="Parent"] .for-parent,
.success[data-role="Educator"] .for-educator { display: inline; }

.success__again {
  margin-top: max(32px, calc(80 * var(--u)));
  padding-top: max(24px, calc(48 * var(--u)));
  border-top: 2px solid var(--green);
}
.success textarea::placeholder { color: var(--ink); opacity: 1; }
.success textarea:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ---------- Parent consent page ---------- */

.consent .container { max-width: calc(1100px + 2 * var(--gutter)); }
.consent__title { margin-bottom: max(16px, calc(36 * var(--u))); }
.consent p { margin-bottom: 0.6em; }
.consent__details {
  margin: max(20px, calc(40 * var(--u))) 0;
  padding: max(16px, calc(28 * var(--u))) max(16px, calc(36 * var(--u)));
  background: var(--pale-green);
}
.consent__details > div {
  display: grid;
  grid-template-columns: max(150px, calc(300 * var(--u))) 1fr;
  column-gap: 16px;
  padding: 0.35em 0;
  border-bottom: 1px solid rgba(68, 117, 104, 0.3);
}
.consent__details > div:last-child { border-bottom: 0; }
.consent__details dt { font-weight: 700; color: var(--green); }
.consent__details dd { margin: 0; overflow-wrap: anywhere; }
.consent .form { color: inherit; }
.consent__terms {
  margin: max(16px, calc(28 * var(--u))) 0;
  padding: max(16px, calc(28 * var(--u))) max(16px, calc(36 * var(--u)));
  background: #FFFEFC;
  border: 1px solid rgba(68, 117, 104, 0.4);
  font-size: var(--fs-small);
  line-height: 1.45;
}
.consent__terms p { margin-bottom: 0.8em; }
.consent__preview { margin: 0 0 max(16px, calc(32 * var(--u))); padding: 10px 14px; background: #fff3c4; border: 1px solid #e0a020; font-weight: 700; }
.consent .form__submit { margin-top: max(16px, calc(32 * var(--u))); }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .how__left { max-width: none; }
  .how__eligible .h3 { white-space: normal; }
  .benefit__head img { margin: 0; }
  .faq__item { column-gap: 0; }
  .two-col, .sponsor__cols { grid-template-columns: 1fr; row-gap: 40px; }
  .sponsor__cols .right { padding-left: 0; }
  .will__left .btn { margin-top: 24px; }
  .how__left .btn { margin-top: 0; }
  .benefits__grid { grid-template-columns: 1fr; }
  .benefits__grid .benefit { max-width: 560px; }
  .hero__intro, .will__left p, .who p, .register__left p, .callout, .success__lead, .success__box { max-width: none; }
  .hero__intro br, .no-br-mobile br { display: none; }
  .faq__item { grid-template-columns: 1fr; row-gap: 10px; }
  .faq__item:first-child { min-height: 0; }
  .faq__item dt { padding-right: 0; }
  .timeline li { grid-template-columns: 1fr; row-gap: 4px; }
  .timeline .date { padding-top: 0; }
  .prizes { text-align: left; }
}

@media (max-width: 760px) {
  .band__list { grid-template-columns: 1fr; gap: 18px; }
  .band__list br { display: none; }
  .easy__steps { grid-template-columns: 1fr; }
  .h2 br, .h1 br { display: none; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__about { max-width: none; }
}

@media (max-width: 520px) {
  .site-header .btn { max-width: 170px; font-size: 15px; padding: 8px 12px; min-height: 44px; }
  .form__row { grid-template-columns: 1fr; }
  .consent__details > div { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  .will__left .btn, .how__left .btn, .benefits .btn, .schedule .btn { width: 100%; }
}