/* =============================================================================
   613 Agency Rock-Off: static rebuild of www.rockoff.ca as of October 2026.
   Sizes, colours and the layout grid mirror the original Squarespace styles.
   ============================================================================= */

/* ---- Fonts ----------------------------------------------------------------- */

@font-face {
  font-family: "Space Mono";
  src: url("../fonts/space-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("../fonts/space-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Free stand-in for Rama Gothic E: at 101% its letter widths match the original, and
   Rama's ascent and descent (0.90em / 0.25em) put the letters on the same baseline. */
@font-face {
  font-family: "Saira Extra Condensed";
  src: url("../fonts/saira-extra-condensed-700.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 101%;
  ascent-override: 89.11%;
  descent-override: 24.75%;
  line-gap-override: 0%;
}

/* ---- Tokens ---------------------------------------------------------------- */

:root {
  --black: hsl(0 0% 0%);
  --white: hsl(0 0% 98.04%);          /* #fafafa */
  --pure-white: hsl(0 0% 100%);
  --accent: hsl(0 0% 86.27%);         /* #dcdcdc */
  --dark-accent: hsl(0 0% 10.98%);    /* #1c1c1c */

  --font-heading: "rama-gothic-e", "Saira Extra Condensed", "Arial Narrow", sans-serif;
  --font-body: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --max-page-width: 1400px;
  --gutter: 3vw;            /* page side padding on desktop */
  --mobile-gutter: 6vw;     /* page side padding on phones */
}

/* ---- Reset and page -------------------------------------------------------- */

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

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

@media screen and (max-width: 991px) {
  html {
    font-size: 16px;
  }
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video,
iframe,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

/* ---- Type scale -------------------------------------------------------------
   Squarespace's fluid sizing: each size value step adds 1.2vw to 1rem, portrait
   phones scale with viewport height instead, and from 1484px every size is flat. */

h1,
h2,
h3,
h4 {
  margin: 2rem 0;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

h1 { --size: 10;  line-height: 0.64em; }
h2 { --size: 5.2; line-height: 0.832em; }
h3 { --size: 2.6; line-height: 0.936em; }
h4 { --size: 1.6; line-height: 0.976em; }

p {
  margin: 1rem 0;
}

.text-small {
  --size: 0.6;
}

h1,
h2,
h3,
h4,
.text-small,
.btn,
.fluid-size {
  font-size: calc((var(--size) - 1) * 1.2vw + 1rem);
}

@media screen and (max-width: 767px) and (orientation: portrait) {
  h1,
  h2,
  h3,
  h4,
  .text-small,
  .btn,
  .fluid-size {
    font-size: calc((var(--size) - 1) * 0.012 * min(100vh, 900px) + 1rem);
  }
}

@media screen and (min-width: 1484px) {
  h1,
  h2,
  h3,
  h4,
  .text-small,
  .btn,
  .fluid-size {
    font-size: calc(var(--size) * 1rem);
  }
}

/* Rich text blocks drop the outer margins of their first and last child. */
.rte > :first-child {
  margin-top: 0;
}

.rte > :last-child {
  margin-bottom: 0;
}

/* ---- Sections ---------------------------------------------------------------
   Every page section is a full-width band; content is centred vertically inside
   a minimum height, with padding that scales with the larger viewport side. */

.section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--section-bg, var(--black));
  color: var(--section-text, var(--white));
}

.section__inner {
  position: relative;
  width: 100%;
}

.section--small {
  min-height: 33vh;
}

.section--small > .section__inner {
  padding-block: 3.3vmax;
}

.section--medium {
  min-height: 66vh;
}

.section--medium > .section__inner {
  padding-block: 6.6vmax;
}

/* Colour themes from the original site. */
.theme-default {
  --section-bg: var(--black);
  --section-text: var(--white);
  --heading-color: var(--pure-white);
  --button-color: var(--pure-white);
  --button-hover-text: var(--black);
}

.theme-black {
  --section-bg: var(--black);
  --section-text: var(--white);
  --heading-color: var(--white);
  --button-color: var(--accent);
  --button-hover-text: var(--black);
}

.theme-bright-inverse {
  --section-bg: var(--black);
  --section-text: var(--accent);
  --heading-color: var(--white);
  --button-color: var(--accent);
  --button-hover-text: var(--black);
}

.section h1,
.section h2,
.section h3,
.section h4 {
  color: var(--heading-color, inherit);
}

/* ---- Layout grid ------------------------------------------------------------
   The original's "Fluid Engine" grid: 8 columns on phones and 24 from 768px,
   plus a flexible gutter column each side. Blocks are placed with grid-area,
   so the layout scales exactly like the original between breakpoints.
   Set --rows-m / --rows-d on the grid to the original row counts. */

.grid {
  --grid-gutter: calc(var(--mobile-gutter) - 11px);
  --cell-max-width: calc((var(--max-page-width) - 11px * 7) / 8);
  position: relative;
  display: grid;
  grid-template-rows: repeat(var(--rows-m, 1), minmax(24px, auto));
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  gap: 11px;
  overflow-x: clip;
}

@media (min-width: 768px) {
  .grid {
    --grid-gutter: calc(var(--gutter) - 11px);
    --cell-max-width: calc((var(--max-page-width) - 11px * 23) / 24);
    --container-width: min(var(--max-page-width), calc(100vw - var(--gutter) * 2));
    grid-template-rows: repeat(var(--rows-d, 1), minmax(calc(var(--container-width) * 0.0215), auto));
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
  }
}

/* A block on the grid; content sits at the top unless the section says otherwise. */
.grid > * {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}

/* ---- Buttons ----------------------------------------------------------------
   Outline buttons: text and border in the theme's button colour, filled on hover. */

.btn {
  --size: 0.6;
  display: inline-block;
  padding: 1.3em 1.9em;
  border: 1px solid var(--button-color, currentColor);
  border-radius: 0;
  background: transparent;
  color: var(--button-color, currentColor);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.1s linear, color 0.1s linear;
}

@media (hover: hover) {
  .btn:hover {
    background: var(--button-color, currentColor);
    color: var(--button-hover-text, var(--black));
  }
}

/* Light grey on the dark sections; light sections and cards set --focus-color to black. */
:focus-visible {
  outline: 2px solid var(--focus-color, var(--accent));
  outline-offset: 4px;
}

/* ---- Utilities ------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 1rem;
  left: -9999px;
  z-index: 100;
  padding: 0.75em 1.25em;
  background: var(--white);
  color: var(--black);
  font-size: 0.75rem;
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus {
  left: 1rem;
}

/* A form field only spam bots fill in; FormSubmit drops any submission that has it. */
.honeypot {
  display: none;
}

/* Content fades in as it scrolls into view, like the original's site animation
   (00-base.js staggers the start of each fade). */
.js .reveal {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.js .reveal.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transition: none;
  }
}

/* ---- header ---- */

/* Just the logo, on a black bar laid over the top of the banner. It scrolls away
   with the page; the banner's top padding (--header-height) leaves room for it. */
:root {
  --header-logo-size: 50px;
  --header-padding-y: 0.9vw;
  --header-height: calc(var(--header-logo-size) + var(--header-padding-y) * 2);
}

#site-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  width: 100%;
  padding: var(--header-padding-y) var(--gutter);
  background: var(--black);
}

.site-header__logo img {
  width: var(--header-logo-size);
  height: var(--header-logo-size);
}

/* Phones, and tablets with a touch screen: 6vw all round, logo centred. */
@media (pointer: coarse) and (max-width: 1024px), (max-width: 799px) {
  :root {
    --header-padding-y: var(--mobile-gutter);
  }

  #site-header {
    justify-content: center;
    padding-inline: var(--mobile-gutter);
  }
}

@media (max-width: 767px) {
  :root {
    --header-logo-size: 30px;
  }
}

/* ---- banner ---- */

/* The Rock-Off artwork below the header, inset 2vw each side. As in the original
   16:9 gallery, its frame is 56.25% of its width tall plus 1px (Squarespace's
   minimum height on top of the padding) and the artwork covers it. */
#banner {
  padding-top: var(--header-height);
}

#banner .section__inner {
  padding-inline: 2vw;
  container-type: inline-size;
}

.banner__image {
  width: 100%;
  height: calc(56.25cqw + 1px);
  object-fit: cover;
}

/* ---- intro ---- */

.intro__heading,
.intro__text {
  text-align: center;
}

/* As on the original, pre-wrap keeps the typed trailing space, nudging the last line left. */
.intro__text p {
  white-space: pre-wrap;
}

.intro__heading {
  grid-area: 4 / 1 / 8 / 11;
  z-index: 1;
}

.intro__text {
  grid-area: 10 / 3 / 15 / 9;
  z-index: 2;
}

@media (min-width: 768px) {
  .intro__heading {
    grid-area: 4 / 2 / 8 / 26;
  }

  .intro__text {
    grid-area: 9 / 9 / 14 / 19;
  }
}

/* ---- how-it-works ---------------------------------------------------------- */

/* Full-bleed crowd photo (black and white already) under a 30% black overlay. */
.how-it-works__background {
  position: absolute;
  inset: 0;
}

.how-it-works__background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.how-it-works__background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0.3;
}

.how-it-works__inner {
  padding-block: 10vmax;
  text-align: center;
}

/* Title, steps and button share the page's inset width: 3vw gutters, 1400px at most. */
.how-it-works__title,
.how-it-works__steps,
.how-it-works__action {
  width: min(100% - 2 * var(--gutter), var(--max-page-width));
  margin-inline: auto;
}

.how-it-works__title {
  margin-block: 0 70px;
  line-height: 1.5;
}

.how-it-works__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: start;
  margin-block: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 576px) {
  .how-it-works__steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .how-it-works__steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.how-it-works__step {
  min-width: 0;
}

.how-it-works__number,
.how-it-works__text {
  max-width: 75%;
  margin: 0 auto;
}

.how-it-works__number {
  --size: 1.2;
  line-height: 0.832em;
}

.how-it-works__text {
  --size: 0.9;
  margin-top: 6%;
}

.how-it-works__action {
  margin-top: 70px;
}

/* ---- highlights ---- */

.highlights__heading {
  grid-area: 1 / 2 / 4 / 10;
  text-align: center;
}

.highlights__media {
  grid-area: 4 / 2 / 11 / 10;
}

@media (min-width: 768px) {
  .highlights__heading {
    grid-area: 3 / 16 / 9 / 26;
    justify-content: center;
  }

  .highlights__media {
    grid-area: 1 / 2 / 11 / 14;
    justify-content: center;
  }
}

/* A 16:9 photo where the original's video sat. Squarespace's video wrapper kept 0.5625%
   of its width free below the player, which lifts it slightly when centred; kept so the
   photo sits exactly where the video did. */
.highlights__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-bottom: 0.5625%;
  object-fit: cover;
}

/* ---- When & Where ---------------------------------------------------------- */

#when-where {
  text-align: center;
}

.when-where__heading {
  grid-area: 2 / 2 / 4 / 10;
  z-index: 2;
}

.when-where__map {
  position: relative;
  grid-area: 4 / 2 / 10 / 10;
  z-index: 0;
}

.when-where__details {
  grid-area: 11 / 4 / 13 / 8;
  z-index: 4;
}

@media (min-width: 768px) {
  .when-where__heading {
    grid-area: 5 / 5 / 10 / 10;
    z-index: 1;
  }

  /* Runs into the right-hand gutter column, so the map meets the viewport edge. */
  .when-where__map {
    grid-area: 1 / 14 / 22 / 27;
    z-index: 2;
  }

  .when-where__details {
    grid-area: 11 / 5 / 19 / 10;
  }
}

/* The map fills its block without affecting the row heights. The filter darkens
   Google's standard map to approximate Squarespace's "Minimal Dark" style:
   #1f1f1f land, faint grey roads and mid-grey labels. */
.when-where__map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) invert(0.885) brightness(0.874);
}

/* ---- charity ---- */

/* Plain block flow so the heading and paragraph margins collapse, as in the original text block. */
.charity__text {
  display: block;
  grid-area: 1 / 2 / 8 / 10;
  text-align: center;
}

.charity__photo {
  position: relative;
  grid-area: 9 / 2 / 16 / 10;
  z-index: 1;
}

.charity__action {
  grid-area: 17 / 4 / 19 / 8;
  z-index: 2;
}

@media (min-width: 768px) {
  .charity__text {
    grid-area: 1 / 7 / 6 / 21;
  }

  .charity__photo {
    grid-area: 7 / 8 / 18 / 20;
  }

  .charity__action {
    grid-area: 19 / 12 / 21 / 16;
  }
}

/* The photo fills its block (centred crop), dimmed by the original's 32% black overlay. */
.charity__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.charity__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.32);
}

/* A "stretched" button: it fills its grid block, with the label centred both ways. */
.charity__action .btn {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-block: 0;
}

/* ---- concert ---- */

/* OrKidstra's holiday concert: a short invitation beside the poster (stacked on phones). */
.concert__text {
  grid-area: 1 / 2 / 5 / 10;
  justify-content: center;
  text-align: center;
}

/* Flex items keep their margins apart: 1rem here plus the paragraph's 1rem matches
   the collapsed gap in the other text blocks. */
.concert__text h2 {
  margin-bottom: 1rem;
}

.concert__action {
  margin-top: 2rem;
}

.concert__poster {
  grid-area: 6 / 2 / 12 / 10;
}

.concert__poster img {
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .concert__text {
    grid-area: 1 / 3 / 13 / 11;
  }

  .concert__poster {
    grid-area: 1 / 12 / 13 / 26;
    justify-content: center;
  }
}

/* ---- quote ---- */

#quote {
  min-height: 10vh;
}

#quote > .section__inner {
  padding-block: 1vmax;
}

/* The photo fills its block without affecting the row heights. */
.quote__photo {
  position: relative;
  grid-area: 2 / 2 / 8 / 9;
  z-index: 0;
}

.quote__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* A near-white card over the photo, padded by 6% of its width, content centred vertically. */
.quote__card {
  --heading-color: var(--black);
  --focus-color: var(--black);
  grid-area: 6 / 3 / 13 / 10;
  z-index: 1;
  justify-content: center;
  margin: 0;
  padding: 6%;
  background: var(--white);
  color: var(--black);
}

.quote__text {
  margin: 0;
}

/* Flex items keep their margins apart: this is the original's collapsed heading margin. */
.quote__source {
  margin-top: 2rem;
}

.quote__source a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

@media (min-width: 768px) {
  .quote__photo {
    grid-area: 3 / 2 / 17 / 18;
  }

  .quote__card {
    grid-area: 5 / 15 / 13 / 26;
  }
}

/* ---- FAQs -------------------------------------------------------------------
   Heading on the left, accordion on the right (stacked on phones). */

.faqs__heading {
  grid-area: 1 / 2 / 3 / 10;
}

.faqs__list {
  --divider: color-mix(in srgb, var(--accent) 50%, transparent);
  grid-area: 3 / 2 / 13 / 10;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--divider);
}

@media (min-width: 768px) {
  .faqs__heading {
    grid-area: 1 / 4 / 4 / 11;
  }

  .faqs__list {
    grid-area: 1 / 11 / 19 / 25;
  }
}

.faqs__item {
  border-bottom: 1px solid var(--divider);
}

/* Questions use the h4 size. The original's "normal" line height is set explicitly,
   rounded to whole pixels as it was, so it doesn't depend on the font's own metrics. */
.faqs__question {
  --size: 1.6;
  margin: 0;
  line-height: 1.135;
  line-height: round(1.135em, 1px);
}

.faqs__toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 30px 0;
  border: 0;
  background: none;
  color: var(--section-text);
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}

.faqs__title {
  flex: 1;
  padding-right: 24px;
}

/* Plus icon drawn with two 1px lines; the upright one lies flat while open. */
.faqs__icon {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
}

.faqs__icon::before,
.faqs__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  height: 1px;
  margin: auto 0;
  background: currentColor;
}

.faqs__icon::after {
  transform: rotate(90deg);
  transition: transform 0.2s;
}

.faqs__toggle[aria-expanded="true"] .faqs__icon::after {
  transform: none;
}

/* High-contrast modes repaint backgrounds, so draw the lines in the system text colour. */
@media (forced-colors: active) {
  .faqs__icon::before,
  .faqs__icon::after {
    background: ButtonText;
  }
}

/* Answers sit in the right-hand 85% of the row (300px wide on phones). The spacing
   is padding so that it stays inside the answer while it slides open. */
.faqs__answer p {
  min-width: 85%;
  max-width: 300px;
  margin: 0 0 0 auto;
  padding: 1rem 0 calc(1rem + 15px);
}

/* Without JavaScript every answer stays open. */
html:not(.js) .faqs__answer {
  display: block;
}

html:not(.js) .faqs__icon::after {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .faqs__icon::after {
    transition: none;
  }
}

/* ---- newsletter ---- */

/* Custom section height: 10vh minimum, padded by a tenth of 10vmax. */
#newsletter {
  min-height: 10vh;
}

#newsletter > .section__inner {
  padding-block: calc(10vmax / 10);
}

/* The near-white card: content at the top on phones, centred vertically from 768px. */
.newsletter__card {
  --heading-color: var(--black);
  --button-color: var(--black);
  --button-hover-text: var(--white);
  --focus-color: var(--black);
  grid-area: 3 / 2 / 18 / 10;
  padding: 6%;
  background: var(--white);
  color: var(--black);
  text-align: center;
}

@media (min-width: 768px) {
  .newsletter__card {
    grid-area: 3 / 2 / 18 / 26;
    justify-content: center;
  }
}

.newsletter__title,
.newsletter__text {
  width: 85%;
  margin-inline: auto;
}

.newsletter__title {
  margin-block: 0 1rem;
  line-height: 1;
}

/* The field and the button share a line when there is room and wrap onto two otherwise,
   separated by the whitespace between them, as in the original. */
.newsletter__input,
.newsletter__button {
  margin: 1.5rem 0.25rem 0.5rem;
  padding: 1.4rem 2rem;
  line-height: 1.2rem;
  vertical-align: top;
}

.newsletter__input {
  width: 17.5rem;
  border: 1px solid rgb(0 0 0 / 0.12);
  border-radius: 0;
  background: var(--pure-white);
  text-align: left;
  appearance: none;
}

.newsletter__input::placeholder {
  color: rgb(0 0 0 / 0.3);
  opacity: 1;
}

/* Under the button the original kept 2.5rem of padding and margins plus an empty footnote line. */
.newsletter__button {
  margin-bottom: calc(2.5rem + 1.5em);
}

/* Keep the button's hover transition alongside the fade-in. */
.js .newsletter__button {
  transition: opacity 0.9s ease, background-color 0.1s linear, color 0.1s linear;
}

.newsletter__thanks {
  margin: 0;
}

.newsletter__error {
  margin: 0 0 1rem;
}

.newsletter__thanks:focus {
  outline: none;
}

/* The original's compact layout for cards under 320px wide (viewports up to 363px). */
@media (max-width: 363px) {
  .newsletter__title,
  .newsletter__text {
    width: auto;
  }

  .newsletter__text {
    line-height: normal;
  }

  .newsletter__input {
    display: block;
    width: calc(100% - 0.5rem);
    margin-inline: auto;
  }

  /* Here the empty footnote's -2rem margin ended the form just below the button. */
  .newsletter__button {
    margin-top: 1rem;
    margin-bottom: calc(1.5em - 1rem);
  }
}

/* ---- footer ---- */

/* Three grid rows. From 768px the year (left) and the icons (centred) share the middle
   row; on phones both fill the lower two, the icons centred across the full width. */
.site-footer__year {
  grid-area: 2 / 2 / 4 / 5;
  justify-content: center;
}

.site-footer__social {
  grid-area: 2 / 2 / 4 / 10;
  z-index: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .site-footer__year {
    grid-area: 2 / 2 / 3 / 4;
  }

  .site-footer__social {
    grid-area: 2 / 10 / 3 / 18;
  }
}

/* Squarespace's small "regular" social icons: 20px links, 12px apart, each showing
   the middle of its 64-unit icon tile at twice the size. */
.site-footer__link {
  display: block;
  margin: 0 6px;
  transition: opacity 0.17s ease-in-out;
}

.site-footer__link svg {
  fill: currentColor;
}

@media (hover: hover) {
  .site-footer__link:hover {
    opacity: 0.8;
  }
}

/* ---- register page ---- */

/* The band registration form and its thank-you page. The header sits over the top of
   the section, so the content starts below it. */
#register > .section__inner,
#thanks > .section__inner {
  padding: calc(var(--header-height) + 6.6vmax) var(--mobile-gutter) 6.6vmax;
}

@media (min-width: 768px) {
  #register > .section__inner,
  #thanks > .section__inner {
    padding-inline: var(--gutter);
  }
}

.register {
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
}

/* Section-title size, like the home page's headings. */
.register__title {
  --size: 5.2;
  margin: 0 0 2rem;
  line-height: 0.832em;
}

.register__intro {
  margin: 0 0 3rem;
}

.register__form {
  text-align: left;
}

.register__note {
  margin: 0 0 1.5rem;
}

.register__fields {
  display: grid;
  gap: 1.5rem 1rem;
}

@media (min-width: 768px) {
  .register__fields {
    grid-template-columns: 1fr 1fr;
  }

  .register__field--wide {
    grid-column: 1 / -1;
  }
}

.register__field label {
  display: block;
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Solid white boxes like the sign-up form's field. Text stays at least 16px on phones,
   so iPhones don't zoom in when a field is tapped. */
.register__field input,
.register__field textarea {
  display: block;
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid rgb(0 0 0 / 0.12);
  border-radius: 0;
  background: var(--pure-white);
  color: var(--black);
  line-height: 1.5;
  appearance: none;
}

.register__field textarea {
  min-height: 8rem;
  resize: vertical;
}

.register__field ::placeholder {
  color: rgb(0 0 0 / 0.4);
  opacity: 1;
}

.register__button {
  margin-top: 2.5rem;
}

.register__error {
  margin: 1rem 0 0;
}

/* Thank-you page: the countdown back to the homepage, above the button. */
.register__redirect {
  margin: -1rem 0 2.5rem;
}