/* ==========================================================================
   ImpactHack 2027

   Colours are sampled from the sponsorship prospectus. The prospectus is set
   in Gotham; Montserrat is the closest free match.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand blue */
  --brand-blue: #050882;
  --ink: var(--brand-blue);
  --cover: var(--brand-blue);
  --blue: var(--brand-blue);
  --lav: #c5cefd;

  /* Inside pages */
  --navy: var(--brand-blue);
  --paper: #cdcee0;
  --text: #0a0a14;
  --text-soft: #3b3c52;
  --rule: rgba(12, 16, 166, 0.28);
  --error: #a8001c;

  --font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --header-gutter: clamp(20px, 5vw, 72px);
  --gutter: var(--header-gutter);
  --max: 1500px;
  --nav-h: 64px;
  --space: clamp(64px, 9vw, 120px);
  --gap: 10px;
}

/* Base
   ========================================================================== */

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

html {
  background: var(--ink);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: -0.015em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
fieldset {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* Pressing a link or button flashes the brand blue (the browser's grey
   otherwise), and a quick second press does not zoom the page. */
a,
button,
summary,
label,
input {
  -webkit-tap-highlight-color: rgba(12, 16, 166, 0.2);
  touch-action: manipulation;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.site-header :focus-visible,
.hero :focus-visible,
.band :focus-visible,
.banner--navy :focus-visible,
.faq-box :focus-visible,
.site-footer :focus-visible {
  outline-color: #fff;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
}

.skip:focus {
  top: 12px;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

/* Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  height: var(--nav-h);
  margin-bottom: calc(-1 * var(--nav-h));
  background: rgba(0, 0, 37, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  color: #fff;
  transition: background-color 0.25s ease;
}

/* With JavaScript the header starts clear over the hero and fills in on scroll. */
.js .site-header:not(.is-stuck) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header__row {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding-block: 9px;
  margin-block: -9px;
  color: #fff;
  text-decoration: none;
}

.brand img {
  display: block;
  flex: none;
  width: auto;
  height: 30px;
}

.brand__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 0 6px 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.nav {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(14px, 2.4vw, 32px);
  margin-left: auto;
}

.nav__link {
  padding: 12px 8px;
  margin-inline: -6px;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

/* Hover styles are for pointers that hover. On a touch screen they would stay
   on after the tap. */
@media (hover: hover) {
  .nav__link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
  }
}

/* Buttons and links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: 0;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn--light {
  border-color: #fff;
  background: #fff;
  color: var(--navy);
}

@media (hover: hover) {
  .btn--light:hover {
    border-color: var(--lav);
    background: var(--lav);
  }
}

.btn--ghost {
  border-color: rgba(255, 255, 255, 0.75);
  background: transparent;
  color: #fff;
}

@media (hover: hover) {
  .btn--ghost:hover {
    border-color: #fff;
    background: #fff;
    color: var(--navy);
  }
}

.btn--navy {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

@media (hover: hover) {
  .btn--navy:hover {
    border-color: var(--blue);
    background: var(--blue);
  }
}

.btn--small {
  min-height: 44px;
  padding: 8px 16px;
  font-size: 0.75rem;
}

.btn--block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.link {
  color: var(--navy);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (hover: hover) {
  .link:hover {
    color: var(--blue);
  }
}

.link--out::after {
  content: " \2197";
}

/* Hero (the prospectus cover)
   ========================================================================== */

.hero {
  /* Width of the title (IMPACT, HACK and 2027 on separate lines). The rest
     of the cover artwork is sized from it, and it is kept small enough for the
     buttons to stay in view. The title stops shrinking at 320px unless the
     window is too short for that, so the cover always fits the screen. */
  --wm: min(45.5vw,
      800px,
      max(min(320px, (min(100svh, 960px) - 310px) / 0.85),
        (min(100svh, 960px) - 340px) / 0.97,
        160px));
  /* Space under the title and the text sizes, also in title widths. */
  --under: 0.089;
  --kicker: 0.078;
  --date: 0.058;
  /* The date and place sizes, and the height the two lines take together
     (line heights 1.02 and 1.2, and the gap between them). */
  --kicker-size: max(1.7rem, calc(var(--wm) * var(--kicker)));
  --place-size: max(0.86rem, calc(var(--wm) * var(--date) * 0.6));
  --text-h: calc(var(--kicker-size) * 1.02 + var(--place-size) * 1.75);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + clamp(28px, 6vh, 64px)) 0 clamp(48px, 8vh, 88px);
  background: var(--cover);
  color: #fff;
}

.hero__inner {
  position: relative;
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

/* The title is live text, so it stays crisp at every screen size. */
.hero__mark {
  position: relative;
  z-index: 1;
  width: var(--wm);
}

.wordmark {
  display: grid;
  width: max-content;
  row-gap: 0.14em;
  margin: 0;
  color: #fff;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(2rem, calc(var(--wm) * 0.36), 10rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.84;
  text-transform: uppercase;
}

.wordmark__line {
  display: block;
  white-space: nowrap;
}

.hero__icon {
  position: absolute;
  z-index: 0;
  top: 35%;
  right: 0;
  width: min(48vw, 720px, calc(100% - var(--wm) - 48px));
  max-width: none;
  transform: translateY(-50%);
  pointer-events: none;
}

@media (min-width: 1001px) and (max-width: 1800px) {
  .hero__icon {
    top: 40%;
    right: -24px;
  }
}

.hero__text {
  position: relative;
  z-index: 2;
  width: var(--wm);
  margin-top: calc(var(--wm) * var(--under));
}

.hero__kicker {
  display: block;
  color: var(--lav);
  font-size: var(--kicker-size);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.02;
  text-transform: uppercase;
}

.hero__place {
  margin-top: 0.55em;
  color: var(--lav);
  font-size: var(--place-size);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin-top: clamp(22px, 3.6vh, 34px);
}

/* Paper sections (the prospectus inside pages)
   ========================================================================== */

/* The colour blobs sit wholly inside a 1500px tile, so the tile repeats down
   long pages without a seam. */
.paper {
  background-color: var(--paper);
  background-image:
    url("assets/grain.png"),
    radial-gradient(ellipse 62% 20% at 90% 22%, #f3f5ff 0%, rgba(243, 245, 255, 0) 72%),
    radial-gradient(ellipse 56% 18% at 4% 52%, #dbe5ff 0%, rgba(219, 229, 255, 0) 72%),
    radial-gradient(ellipse 62% 20% at 82% 80%, #c4c4f3 0%, rgba(196, 196, 243, 0) 72%);
  background-size: 128px 128px, 100% 1500px, 100% 1500px, 100% 1500px;
  background-repeat: repeat, repeat-y, repeat-y, repeat-y;
  background-blend-mode: soft-light, normal, normal, normal;
}

.section {
  padding-block: var(--space);
}

.section+.section {
  padding-top: 0;
  /* A jump link still lands with the room above the title that the first section has. */
  scroll-margin-top: var(--space);
}

.section h2,
.banner h2,
.cta h2,
.cta h3 {
  color: var(--navy);
  font-size: clamp(2rem, 4.8vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1;
  text-wrap: balance;
}

.section__head {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}

.prose>*+* {
  margin-top: 1.1em;
}

.prose strong {
  font-weight: 700;
}

#about .prose,
#about .lede {
  width: 100%;
  max-width: none;
}

.lede {
  color: var(--navy);
  font-size: clamp(1.2rem, 2.3vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.6;
  text-wrap: wrap;
}

.lede__laptop-break {
  display: none;
}

@media (min-width: 1001px) {
  .lede__laptop-break {
    display: initial;
  }
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 0vw, 40px);
}

.stats li {
  padding-top: 16px;
  border-top: 2px solid var(--navy);
}

.stats strong {
  display: block;
  color: var(--navy);
  font-size: clamp(2.6rem, 8.4vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.07em;
  line-height: 0.9;
}

.stats span {
  display: block;
  margin-top: 10px;
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* White boxes, as used for the call to action in the prospectus. */
.box {
  padding: clamp(24px, 3.6vw, 40px);
  background: #fff;
  /* Dark text wherever a box sits: a band would set white. */
  color: var(--text);
}

.box h3 {
  color: var(--navy);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.08;
}

.box p {
  margin-top: 14px;
}

.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

.campus {
  display: flex;
  flex-direction: column;
}

.label {
  color: var(--blue);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.campus .label {
  margin-bottom: 10px;
}

.campus__count {
  color: var(--navy);
  font-weight: 700;
}

.campus__footer {
  margin-top: auto;
}

.campus .link {
  align-self: flex-start;
  margin-block: 9px -9px;
  padding-block: 9px;
}

@media (min-width: 861px) {
  .campus__footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }

  .campus__footer .link {
    align-self: baseline;
    margin-block: 0;
    padding-block: 9px;
    white-space: nowrap;
  }
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: var(--gap);
}

.gallery img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.gallery img {
  aspect-ratio: 3 / 2;
}

.gallery>figcaption {
  grid-column: 1 / -1;
  margin-top: 0;
  white-space: nowrap;
}

figcaption {
  margin-top: 10px;
  color: var(--text-soft);
  font-size: 0.8125rem;
}

/* Event photos: a mosaic of tiles in different sizes. The tiles are placed in
   order, so the sizes below follow their position in the markup:
   1 big, 2 tall, 3 and 4 small, 5 big, 6 big.
   The grid is 3:2, so a small tile is a 3:2 photo and nothing is cropped there.
   Each photo links to its full-size file; site.js opens it in a viewer. */
.photos__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  aspect-ratio: 3 / 2;
}

.photos__item {
  position: relative;
  display: block;
  overflow: hidden;
  background: rgba(12, 16, 166, 0.14);
}

.photos__item:nth-child(1),
.photos__item:nth-child(5),
.photos__item:nth-child(6) {
  grid-column: span 2;
  grid-row: span 2;
}

.photos__item:nth-child(2) {
  grid-row: span 2;
}

.photos__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Where a tall crop of a wide photo needs to keep its subject. */
.photos__item:nth-child(2) img {
  object-position: 68% 50%;
}

.photos__item:focus-visible img {
  transform: scale(1.04);
}

@media (hover: hover) {
  .photos__item:hover img {
    transform: scale(1.04);
  }
}

.photos__item:focus-visible {
  outline-offset: -3px;
  z-index: 1;
}

/* Dark bands (cover artwork again)
   ========================================================================== */

.band {
  padding-block: var(--space);
  background: var(--ink);
  color: #fff;
}

.band--low {
  background-position: center 96%;
}

.band__lede {
  max-width: 34ch;
  margin-top: 22px;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.5;
}

/* Pre-registration form
   ========================================================================== */

.form__fields {
  display: grid;
  gap: 18px;
}

.form__hint,
.form__small {
  color: var(--text-soft);
  font-size: 0.875rem;
  line-height: 1.45;
}

.form__hint {
  margin-top: -8px;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
}

.field {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
}

.field label,
.field legend {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.optional {
  color: var(--text-soft);
  font-weight: 400;
}

.field input[type="text"],
.field input[type="email"] {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid #83859f;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  letter-spacing: 0;
}

.field input::placeholder {
  color: #7a7b90;
}

.field input[type="text"]:focus-visible,
.field input[type="email"]:focus-visible {
  border-color: var(--navy);
  outline-offset: 0;
}

.field input[aria-invalid="true"] {
  border-color: var(--error);
}

.field__error {
  margin-top: 6px;
  color: var(--error);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

.field__error:empty {
  display: none;
}

.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

.choice {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice__box {
  display: block;
  height: 100%;
  padding: 12px 14px;
  border: 1.5px solid #83859f;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.choice__box strong {
  display: block;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
}

.choice__box span {
  display: block;
  margin-top: 2px;
  color: var(--text-soft);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
}

.choice input:checked+.choice__box {
  border-color: var(--navy);
  background: var(--navy);
}

.choice input:checked+.choice__box strong,
.choice input:checked+.choice__box span {
  color: #fff;
}

.choice input:focus-visible+.choice__box {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.field[data-invalid] .choice__box {
  border-color: var(--error);
}

.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.4;
  cursor: pointer;
}

/* The row answers a tap 11px above and below the box, with the same room taken. */
.field .check {
  display: grid;
  padding-block: 11px;
  margin-block: -11px;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
}

.field .choice {
  margin-bottom: 0;
}

.check input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--navy);
}

.form__trap {
  position: absolute;
  left: -9999px;
}

.form__status {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.form__status:empty {
  display: none;
}

.form__status[data-state="error"] {
  padding: 12px 14px;
  border-left: 4px solid var(--error);
  background: #fbeaec;
  color: #6f0013;
}

.form__done:focus {
  outline: none;
}

/* FAQ
   ========================================================================== */

#about,
#faq {
  scroll-margin-top: calc(-1 * var(--space));
}

.faq {
  border-top: 2px solid var(--navy);
}

.faq details {
  -webkit-tap-highlight-color: transparent;
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  color: var(--navy);
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
}

.faq summary:focus:not(:focus-visible) {
  outline: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  width: 1ch;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 0.7;
  text-align: center;
}

.faq details[open] summary::after {
  content: "\2212";
}

@media (hover: hover) {
  .faq summary:hover {
    color: var(--blue);
  }
}

.faq p {
  max-width: 62ch;
  padding-bottom: 22px;
}

/* The questions on the left, the navy box on the right. */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  column-gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.faq-layout>div {
  display: contents;
}

.faq-layout .section__head {
  grid-column: 1;
  grid-row: 1;
}

.faq-layout .faq {
  grid-column: 1;
  grid-row: 2;
}

.faq-box {
  grid-column: 2;
  grid-row: 2;
}

.faq-box {
  display: grid;
  justify-items: center;
  padding: clamp(32px, 5vw, 56px);
  gap: 24px;
  background: var(--navy);
  color: #fff;
}

.faq-box__icon {
  width: 64px;
  height: 64px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linejoin: miter;
}

.faq-box h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
}

.faq-box .btn {
  margin-top: 6px;
}

/* The address is a plain link: 44px to tap, with the room taken closer to 24px. */
.faq-box__mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -8px -10px;
  color: #fff;
  font-weight: 600;
  overflow-wrap: anywhere;
  text-underline-offset: 4px;
}

@media (hover: hover) {
  .faq-box__mail:hover {
    color: var(--lav);
  }
}

/* Call to action (the white box from the prospectus) */
.cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px clamp(24px, 5vw, 64px);
  align-items: center;
  padding: clamp(28px, 5vw, 56px);
  background: #fff;
  color: var(--navy);
}

.cta__text p {
  margin-top: 14px;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

.cta__actions {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.cta__actions .link {
  margin-block: -9px;
  padding-block: 9px;
}

/* Sponsors
   ========================================================================== */

.sponsors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  width: min(100%, 920px);
  margin-inline: auto;
  gap: clamp(16px, 2.8vw, 32px) clamp(16px, 4vw, 56px);
  margin-bottom: clamp(20px, 3vw, 36px);
}

.sponsors>li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.sponsors>li {
  display: flex;
  min-width: 0;
}

@media (max-width: 700px) {
  .sponsors {
    gap: 14px;
  }
}

@media (min-width: 901px) {
  .sponsors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 920px);
    column-gap: clamp(24px, 3vw, 48px);
  }
}

@media (max-width: 500px) {
  .sponsors {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 360px);
    gap: 12px;
  }

  .sponsors__logo {
    padding: 0;
  }

  .sponsors__logo--elevenlabs img {
    transform: scale(0.82);
  }
}

.sponsors__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(92px, 12vw, 136px);
  padding: clamp(16px, 2.6vw, 28px) clamp(12px, 3vw, 32px);
  cursor: pointer;
}

/* Keep every sponsor mark black by default, then lighten it to dark grey on interaction. */
.sponsors__logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(56px, 6vw, 80px);
  object-fit: contain;
  filter: brightness(0);
  transition: filter 0.15s ease;
}

.sponsors__logo:hover img,
.sponsors__logo:focus-visible img,
.sponsors__logo:active img {
  filter: brightness(0) invert(0.38);
}

.sponsors__logo--bdss img {
  height: clamp(40px, 4vw, 52px);
}

.sponsors__logo--css img {
  width: min(100%, 190px);
  height: auto;
}

.sponsors__logo--setsquared img {
  width: min(100%, 280px);
  height: auto;
}

/* On a phone every logo takes a row of its own, except BDSS and CSS Bristol,
   which share the last row. These rules sit after the logo rules above so that
   they win; the 500px block earlier in this section only handles the single
   column. */
@media (max-width: 500px) {
  .sponsors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .sponsors>li {
    flex: 0 0 100%;
  }

  .sponsors>li:has(.sponsors__logo--bdss, .sponsors__logo--css) {
    flex: 0 0 auto;
    margin-block: 8px;
  }

  .sponsors__logo--bdss,
  .sponsors__logo--css {
    min-height: 64px;
  }

  .sponsors__logo--bdss img {
    height: clamp(38px, 11vw, 46px);
  }

  .sponsors__logo--css img {
    width: min(100%, 140px);
  }

  .sponsors__logo--setsquared img {
    width: min(100%, 250px);
  }
}

/* Keep the sponsor section close to the partner banner below. */
#our-sponsors {
  padding-bottom: clamp(20px, 2vw, 30px);
}

@media (max-width: 700px) {
  #our-sponsors {
    padding-bottom: 8px;
  }
}

/* Banners
   Full-width bands. The white one is the partner email box: words and a form on
   the left, and a black and white photo that runs to the edge of the screen and
   breaks up into squares where it meets the words. The navy one is
   pre-registration: the title on the left and a wide form on the right.
   ========================================================================== */

.banner {
  background: #fff;
  color: var(--text);
}

.banner--navy {
  background: var(--navy);
  color: #fff;
}

.banner--navy h2 {
  color: #fff;
}

/* The words line up with the rest of the page (the left edge of .wrap) and the
   photo carries on to the right edge of the screen. The padding is a share of the
   section's width, as .wrap's margin is, so a scrollbar does not throw it out. */
.banner__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 44vw, 700px);
  column-gap: clamp(16px, 3vw, 48px);
  align-items: stretch;
  padding-left: max(var(--gutter), (100% - var(--max)) / 2);
}

.banner__body {
  min-width: 0;
  padding-block: clamp(28px, 3.2vw, 44px);
}

.banner__photo {
  position: relative;
  min-height: 220px;
}

/* The left edge of the photo breaks up into 12px squares. The mask has two
   layers: a strip of squares that thins out towards the left, then a solid fill
   after it. Where a square is missing the banner shows through. The outer 12px
   of the mask is empty, so the picture is also clipped there: when the photo's
   edge falls between two screen pixels, a faint line of picture would otherwise
   show along it. */
.banner__photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 50%;
  clip-path: inset(0 0 0 12px);
  -webkit-mask-image: url("assets/dissolve-side.svg"), linear-gradient(#000, #000);
  mask-image: url("assets/dissolve-side.svg"), linear-gradient(#000, #000);
  -webkit-mask-repeat: repeat-y, no-repeat;
  mask-repeat: repeat-y, no-repeat;
  -webkit-mask-position: 0 0, 108px 0;
  mask-position: 0 0, 108px 0;
  -webkit-mask-size: 120px 288px, calc(100% - 108px) 100%;
  mask-size: 120px 288px, calc(100% - 108px) 100%;
}

.banner__lede {
  margin-top: 12px;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.45;
}

/* The two sentences take a line each. */
.banner__lede span {
  display: block;
  text-wrap: balance;
}

.banner__form {
  max-width: 36rem;
  margin-top: clamp(16px, 2vw, 22px);
}

/* The email box: field and button sit in one row, flush against each other. */
.banner__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

#sponsor-interest .banner__row:focus-within {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

#sponsor-interest .banner__row :focus-visible {
  outline: none;
}

.banner__done {
  color: var(--navy);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.4;
}

.banner__done:focus {
  outline: none;
}

/* A plain link under the box. The room it takes is 34px, and the area that
   answers a tap is 44px. */
.banner__alt {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  color: var(--navy);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.banner__alt-links {
  display: grid;
  justify-items: start;
  margin-bottom: -10px;
}

/* Pre-registration: the title on the left (the .split grid) and the form on the
   right, two columns wide so the banner stays short. */
.banner__split {
  padding-block: clamp(36px, 4.6vw, 64px);
}

.banner--navy .banner__form {
  max-width: none;
  margin-top: 0;
}

.banner--navy .form__fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
  align-items: start;
}

/* The first and last name fields join the grid, so email can sit beside the
   university. */
.banner--navy .form__row {
  display: contents;
}

.banner--navy .form__fields> :is(fieldset, noscript, .form__status, .form__small) {
  grid-column: 1 / -1;
}

/* The submit button spans both form columns. */
.banner--navy .form__fields>.btn {
  grid-column: 1 / -1;
  align-self: center;
}

/* Pre-registration on navy: white type and white fields, and the choices turn
   white when picked. Errors sit on a white chip, as red does not read on navy. */
.banner--navy .form__small {
  color: rgba(255, 255, 255, 0.9);
}

.banner--navy a,
.banner--navy .link {
  color: #fff;
}

@media (hover: hover) {
  .banner--navy .link:hover {
    color: var(--lav);
  }
}

.banner--navy .field input[type="text"],
.banner--navy .field input[type="email"] {
  border-color: #fff;
}

.banner--navy .field input[type="text"]:focus-visible,
.banner--navy .field input[type="email"]:focus-visible {
  border-color: var(--blue);
  outline-offset: 2px;
}

.banner--navy .field input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 2px #fff;
}

.banner--navy .field__error {
  display: inline-block;
  padding: 3px 8px;
  background: #fff;
}

.banner--navy .field__error:empty {
  display: none;
}

.banner--navy .choice__box {
  border-color: rgba(255, 255, 255, 0.8);
}

.banner--navy .choice__box strong {
  color: #fff;
}

.banner--navy .choice__box span {
  color: var(--lav);
}

.banner--navy .choice input:checked+.choice__box {
  border-color: #fff;
  background: #fff;
}

.banner--navy .choice input:checked+.choice__box strong {
  color: var(--navy);
}

.banner--navy .choice input:checked+.choice__box span {
  color: var(--text-soft);
}

.banner--navy .choice input:focus-visible+.choice__box {
  outline-color: #fff;
}

.banner--navy .field[data-invalid] .choice__box {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--error);
}

.banner--navy .check input {
  accent-color: #fff;
}

.banner--navy .form__done h3 {
  color: #fff;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.08;
}

/* Footer
   ========================================================================== */

.site-footer {
  padding: clamp(48px, 7vw, 80px) 0 28px;
  background: var(--ink);
  color: #fff;
  font-size: 0.9375rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: 40px clamp(24px, 5vw, 72px);
}

.site-footer__logo {
  display: block;
  width: auto;
  height: 40px;
  margin-bottom: 18px;
}

.site-footer__about {
  max-width: 36ch;
  color: var(--lav);
}

.site-footer h2 {
  margin-bottom: 14px;
  color: var(--lav);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer li+li {
  margin-top: 12px;
}

.site-footer li span {
  display: block;
  color: var(--lav);
  font-size: 0.8125rem;
}

.site-footer a {
  text-underline-offset: 4px;
}

@media (hover: hover) {
  .site-footer a:hover {
    color: var(--lav);
  }
}

/* The two email addresses are plain text links. Their hit area grows up and
   down without moving the lines. */
.site-footer ul:not(.social) a {
  padding-block: 12px;
}

.social li+li {
  margin-top: 16px;
}

.social a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-block: -8px;
  font-weight: 600;
  text-decoration: none;
}

@media (hover: hover) {
  .social a:hover span {
    text-decoration: underline;
  }
}

.social svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-footer .social span {
  display: inline;
  color: inherit;
  font-size: inherit;
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 20px;
  border-top: 1px solid rgba(197, 206, 253, 0.3);
  color: var(--lav);
  font-size: 0.8125rem;
}

/* Photo viewer (built by site.js)
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 37, 0.94);
  color: #fff;
}

.lightbox::backdrop {
  background: rgba(0, 0, 37, 0.94);
}

.lightbox:not([open]) {
  display: none;
}

.lightbox__stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 64px clamp(12px, 6vw, 88px) 20px;
}

.lightbox__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lightbox__caption {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  color: var(--lav);
  font-size: 0.875rem;
  line-height: 1.4;
}

.lightbox__count {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

@media (hover: hover) {
  .lightbox__btn:hover {
    background: rgba(255, 255, 255, 0.28);
  }
}

.lightbox__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.lightbox__btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lightbox__btn--close {
  top: 10px;
  right: 12px;
}

.lightbox__btn--prev,
.lightbox__btn--next {
  top: 50%;
  margin-top: -24px;
}

.lightbox__btn--prev {
  left: 12px;
}

.lightbox__btn--next {
  right: 12px;
}

/* Smaller screens
   ========================================================================== */

/* Upright tablets and phones. A tablet held sideways is wide but short, so it
   keeps the wide cover from the top of the file instead. */
@media (max-width: 1000px) and (orientation: portrait) {

  /* Reserve a right-hand column for the circuit heart. The title and text stay
     in the left column, and shrink on short screens to keep the buttons in view. */
  .hero {
    --wm: min(55vw,
        620px,
        max(min(320px, (100svh - 315px) / 1.35),
          (100svh - 380px) / 1.35,
          160px));
    --under: 0.1;

    align-items: flex-start;
  }

  .hero__icon {
    width: min(35vw, 350px);
  }
}

/* Phones, held upright: keep the logo, title, and event text above a large,
   pale heart graphic, with the call to action below. */
@media (max-width: 700px) and (orientation: portrait) {
  .hero {
    --wm: min(100vw - 2 * var(--gutter),
        620px,
        max(min(320px, (100svh - 315px) / 1.35),
          (100svh - 380px) / 1.35,
          160px));
    --under: 0.089;

    min-height: 0;
    padding-top: clamp(206px, 22.5vh, 222px);
    padding-bottom: 30px;
  }

  .hero__inner {
    position: static;
  }

  .hero__icon {
    position: absolute;
    top: 43%;
    left: 50%;
    right: auto;
    display: block;
    width: min(108vw, 70svh);
    max-width: none;
    transform: translate(-50%, -50%);
    opacity: 0.32;
    margin: 0;
  }

  .hero__text {
    width: var(--wm);
    margin-top: clamp(12px, 2vh, 18px);
  }

  .hero__kicker,
  .hero__place {
    color: #fff;
  }

  .hero__place {
    font-weight: 700;
  }

  .hero__actions {
    position: relative;
    z-index: 2;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-inline: 0;
    gap: clamp(6px, 2vw, 10px);
    margin-top: clamp(76px, 9vh, 88px);
  }

  .hero__actions .btn {
    width: 100%;
    min-height: clamp(40px, 11vw, 48px);
    padding: 10px clamp(8px, 3vw, 14px);
    font-size: clamp(0.625rem, 3vw, 0.875rem);
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
}

@media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
  :root {
    --gutter: max(clamp(64px, 8vw, 96px), calc(env(safe-area-inset-left) + 28px));
  }

  .site-header .wrap {
    width: min(100% - 2 * var(--header-gutter), var(--max));
  }

  .site-header .brand {
    margin-left: calc(var(--gutter) - var(--header-gutter));
  }

  .hero__icon {
    top: 43%;
    right: 16px;
    width: min(38vw, 290px, calc(100% - var(--wm) - 24px));
  }

}

@media (max-width: 860px) {

  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__grid> :first-child {
    grid-column: 1 / -1;
  }

  .cta {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-layout .section__head,
  .faq-layout .faq,
  .faq-box {
    grid-column: 1;
    grid-row: auto;
  }

  .faq-box {
    margin-top: 32px;
  }

  /* The words come first and the photo runs the full width under them, with its
     top edge breaking up into squares instead of its left. */
  .banner__grid {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
  }

  .banner__body {
    padding-inline: var(--gutter);
    padding-bottom: clamp(24px, 5vw, 36px);
  }

  /* Full width: with an aspect ratio and a height cap, the width would otherwise
     shrink to fit the capped height and leave a gap beside the photo. */
  .banner__photo {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    max-height: 400px;
  }

  .banner__photo img {
    object-position: 40% 25%;
    clip-path: inset(12px 0 0 0);
    -webkit-mask-image: url("assets/dissolve-top.svg"), linear-gradient(#000, #000);
    mask-image: url("assets/dissolve-top.svg"), linear-gradient(#000, #000);
    -webkit-mask-repeat: repeat-x, no-repeat;
    mask-repeat: repeat-x, no-repeat;
    -webkit-mask-position: 0 0, 0 60px;
    mask-position: 0 0, 0 60px;
    -webkit-mask-size: 480px 72px, 100% calc(100% - 60px);
    mask-size: 480px 72px, 100% calc(100% - 60px);
  }

  /* Three columns of four rows, still 3:2 tiles. The big photo sits top left with
     the tall one beside it; below, a tall one on each side and two small ones
     between. */
  .photos__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    aspect-ratio: 9 / 8;
  }

  .photos__item:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }

  .photos__item:nth-child(2) {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .photos__item:nth-child(3) {
    grid-column: 2;
    grid-row: 3;
  }

  .photos__item:nth-child(4) {
    grid-column: 2;
    grid-row: 4;
  }

  .photos__item:nth-child(5) {
    grid-column: 1;
    grid-row: 3 / 5;
  }

  .photos__item:nth-child(6) {
    grid-column: 3;
    grid-row: 3 / 5;
  }

  .photos__item:nth-child(5) img {
    object-position: 42% 50%;
  }

  .photos__item:nth-child(6) img {
    object-position: 46% 50%;
  }
}

@media (max-width: 700px) {
  :root {
    --nav-h: 0px;
  }

  .site-header {
    position: static;
    height: 0;
    margin-bottom: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .brand {
    position: absolute;
    z-index: 100;
    top: calc(env(safe-area-inset-top, 0px) + 36px);
    left: var(--header-gutter);
    padding-block: 0;
    margin: 0;
  }

  .brand img {
    height: 26px;
  }

  .nav {
    position: absolute;
    z-index: 101;
    top: calc(env(safe-area-inset-top, 0px) + 24px);
    right: var(--header-gutter);
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .nav> :not(.nav__link--wide) {
    display: none;
  }

  .nav__link--wide {
    display: inline-flex;
    padding: 12px 4px;
    margin: 0;
    font-size: 0.7rem;
  }

  .brand__name {
    display: none;
  }

  .pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery img:first-child {
    grid-column: 1 / -1;
  }

  .gallery>figcaption {
    white-space: nowrap;
    font-size: clamp(0.6875rem, 3.2vw, 0.8125rem);
  }

  /* Two columns of eight rows. The big photos take the full width, and the tall
     one sits beside the two small ones. The tiles are placed in order again. */
  .photos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(8, minmax(0, 1fr));
    aspect-ratio: 3 / 8;
  }

  .photos__item:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }

  .photos__item:nth-child(1),
  .photos__item:nth-child(5),
  .photos__item:nth-child(6) {
    grid-column: span 2;
    grid-row: span 2;
  }

  .photos__item:nth-child(2) {
    grid-row: span 2;
  }

  .photos__item:nth-child(5) img,
  .photos__item:nth-child(6) img {
    object-position: 50% 50%;
  }

  /* Arrows move below the photo so they never cover it. */
  .lightbox__stage {
    padding: 64px 12px 84px;
  }

  .lightbox__btn--prev,
  .lightbox__btn--next {
    top: auto;
    bottom: 18px;
    margin-top: 0;
  }

  .lightbox__btn--prev {
    left: calc(50% - 58px);
  }

  .lightbox__btn--next {
    right: calc(50% - 58px);
  }
}

@media (max-width: 560px) {
  .banner--navy .form__fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .banner__alt {
    font-size: 0.875rem;
  }

  /* Keeps "Pre-register" on one line in the header. */
  .nav {
    gap: 12px;
  }

  .nav__link {
    letter-spacing: 0.06em;
  }

  .btn--small {
    padding-inline: 12px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The email box stacks: field, then a full-width button. */
  .banner__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .banner__row .btn {
    width: 100%;
  }

  .stats {
    gap: 12px;
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Under 420px the header has room for one word of the link ("Partner"). The
   full words are still its accessible name and sit on the buttons and banners. */
@media (max-width: 419px) {
  .nav__more {
    display: none;
  }
}

/* Three equal thirds are too narrow for "PARTICIPANTS" at this tracking, so
   the columns fit their words instead and the tracking eases a little. */
@media (max-width: 400px) {
  .stats {
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
  }

  .stats span {
    letter-spacing: 0.04em;
  }
}

/* The smallest phones: tighter header, so the logo and both items still fit. */
@media (max-width: 340px) {
  .site-header__row {
    gap: 8px;
  }

  .nav {
    gap: 6px;
  }

  .nav__link {
    padding-inline: 0;
    margin-inline: 0;
    letter-spacing: 0.02em;
  }

  .btn--small {
    padding-inline: 10px;
    letter-spacing: 0.04em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}