:root {
  color-scheme: light;

  --color-ink: #0b0b0a;
  --color-white: #fff;
  --color-paper: #f4efe5;
  --color-paper-bright: #fffaf0;
  --color-line: rgba(255, 250, 240, 0.48);
  --color-focus: rgba(11, 11, 10, 0.18);
  --color-hold: #171717;
  --color-hold-hole: #626262;
  --color-hold-hole-shadow: #050505;

  --font-body:
    "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: "Zilla Slab", Georgia, "Times New Roman", serif;

  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: clamp(2rem, 4vw, 3rem);
  --space-xl: clamp(4rem, 10vw, 8rem);

  --measure-copy: 68ch;
  --measure-content: 920px;
  --measure-display: 1120px;
  --page-gutter: clamp(28px, 5vw, 72px);

  --surface-warm: var(--color-paper);
  --surface-clean: var(--color-white);

  --radius-sm: 4px;
  --border-thin: 1px solid var(--color-line);
  --border-strong: 2px solid var(--color-ink);
  --button-shadow: 0 4px 0 rgba(11, 11, 10, 0.24);
  --button-shadow-raised: 0 5px 0 rgba(11, 11, 10, 0.24);
  --focus-ring: 0 0 0 4px var(--color-focus);

  --nav-offset: clamp(24px, 4vw, 48px);
  --logo-size: clamp(38px, 6vw, 54px);
  --hero-content-offset: clamp(5rem, 12vw, 10rem);
}

@font-face {
  font-family: "Fira Mono";
  src: url("assets/fonts/fira-mono-400.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Fira Mono";
  src: url("assets/fonts/fira-mono-700.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Zilla Slab";
  src: url("assets/fonts/zilla-slab-400.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Zilla Slab";
  src: url("assets/fonts/zilla-slab-700.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

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

html {
  min-height: 100%;
  font-family: var(--font-body);
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--color-ink);
  background: var(--surface-warm);
}

p,
ul,
dl {
  width: min(var(--measure-copy), 100%);
  margin: 0 0 var(--space-md);
  line-height: 1.7;
}

ul {
  padding-left: 1.5em;
}

li {
  padding-left: var(--space-2xs);
}

li + li,
li > ul {
  margin-top: var(--space-xs);
}

dl {
  margin: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin: var(--space-xs) 0 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  text-wrap: balance;
}

h1 {
  max-width: 12ch;
  font-size: clamp(3.5rem, 6.25vw, 5.1rem);
  line-height: 0.86;
}

h1 span {
  display: block;
  white-space: nowrap;
}

h2 {
  width: min(760px, 100%);
  font-size: clamp(2.7rem, 6vw, 5.6rem);
  line-height: 0.95;
}

h3 {
  width: min(var(--measure-copy), 100%);
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  line-height: 1.05;
}

section {
  padding: var(--space-xl) var(--page-gutter);
}

section > * {
  width: min(var(--measure-content), 100%);
}

.content-box {
  width: min(var(--measure-content), 100%);
}

.content-stack {
  display: grid;
  gap: var(--space-lg);
}

.campaign-layout {
  display: grid;
  grid-template-columns: minmax(min(48ch, 100%), 1fr) minmax(190px, 340px);
  gap: clamp(var(--space-md), 3vw, var(--space-lg));
  align-items: start;
  width: min(var(--measure-display), 100%);
}

.campaign-copy {
  width: min(62ch, 100%);
}

.campaign-copy h3 {
  margin: var(--space-lg) 0 var(--space-md);
}

.campaign-copy h3:first-child {
  margin-top: 0;
}

.campaign-copy p:last-child {
  margin-bottom: 0;
}

.reward-tiers {
  display: grid;
  gap: var(--space-sm);
  width: 100%;
}

.reward-tiers__subtitle {
  width: 100%;
  margin: var(--space-md) 0 0;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1;
}

.reward-tier {
  display: flex;
  min-height: 240px;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(244, 239, 229, 0.56);
  border: 1px solid rgba(11, 11, 10, 0.18);
  border-radius: var(--radius-sm);
}

.reward-tier h3 {
  width: 100%;
  margin-bottom: var(--space-sm);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1;
}

.reward-tier p {
  width: 100%;
}

.reward-tier p:last-child {
  margin-bottom: 0;
}

.reward-tier__cost {
  margin-bottom: var(--space-xs);
  font-weight: 700;
  line-height: 1.2;
}

.reward-tier__cost s {
  color: rgba(11, 11, 10, 0.5);
}

.reward-tier__button {
  margin-top: auto;
}

.reward-tier__note {
  margin-top: var(--space-xs);
  font-size: 0.78rem;
  line-height: 1.4;
}

.signup-status,
.signup-modal__status {
  width: min(var(--measure-copy), 100%);
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-paper-bright);
  line-height: 1.5;
}

.signup-status[data-tone="success"],
.signup-modal__status[data-tone="success"] {
  background: #e8f5e1;
}

.signup-status[data-tone="error"],
.signup-modal__status[data-tone="error"] {
  background: #fde8e8;
}

.signup-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: rgba(11, 11, 10, 0.56);
}

.signup-modal.is-open {
  display: flex;
}

.signup-modal__panel {
  position: relative;
  width: min(520px, 100%);
  padding: clamp(1.5rem, 4vw, 2rem);
  background: var(--color-paper-bright);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--button-shadow);
}

.signup-modal__panel h2 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.signup-modal__panel p {
  width: 100%;
}

.signup-modal__panel label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-weight: 700;
}

.signup-modal__panel input {
  width: 100%;
  min-height: 48px;
  margin-bottom: var(--space-sm);
  padding: 0 var(--space-sm);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font: inherit;
}

.signup-modal__panel input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.signup-modal__panel form .button {
  width: 100%;
}

.signup-modal__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 36px;
  height: 36px;
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.signup-modal__cancel {
  margin-top: var(--space-sm);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.button[data-loading="true"] {
  opacity: 0.72;
  cursor: wait;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-md);
  color: inherit;
  font-size: clamp(0.76rem, 1.4vw, 0.88rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
}

.eyebrow:hover,
.eyebrow:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.button {
  display: inline-flex;
  width: fit-content;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-md);
  color: var(--color-paper);
  background: var(--color-ink);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--button-shadow);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease,
    color 140ms ease;
}

.button:hover,
.button:focus-visible {
  color: var(--color-ink);
  background: transparent;
  transform: translateY(-1px);
  box-shadow: var(--button-shadow-raised);
}

.button:focus-visible {
  outline: none;
  box-shadow: var(--button-shadow-raised), var(--focus-ring);
}

.button:disabled {
  cursor: default;
  opacity: 1;
}

.button:disabled:hover {
  color: var(--color-paper);
  background: var(--color-ink);
  transform: none;
  box-shadow: var(--button-shadow);
}

.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.icon-link svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.hero {
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--surface-clean);
  isolation: isolate;
}

.hero__content {
  width: min(var(--measure-display), 100%);
  padding-top: var(--hero-content-offset);
}

.hero__content h2 {
  width: min(var(--measure-display), 100%);
  margin-bottom: var(--space-lg);
}

.site-header {
  position: absolute;
  top: var(--nav-offset);
  right: var(--page-gutter);
  left: var(--page-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  z-index: 2;
}

.header-title {
  flex: 0 0 auto;
  font-size: clamp(1.35rem, 2vw, 1.5rem);
  line-height: 0.9;
}

.header-title a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.header-title img {
  width: var(--logo-size);
  height: var(--logo-size);
  flex: 0 0 auto;
  object-fit: contain;
}

.header-nav {
  display: flex;
  max-width: 100%;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
}

.header-title a:focus-visible,
.header-nav a {
  color: var(--color-ink);
}

.header-title a:focus-visible {
  border-radius: var(--radius-sm);
  outline: none;
  box-shadow: var(--focus-ring);
}

.header-nav a {
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.header-nav a:hover,
.header-nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.updates-marker {
  width: 2.25rem;
  margin: var(--space-lg) 0 var(--space-xs);
  border-top: 2px solid currentColor;
}

.signup-actions {
  display: flex;
  width: min(650px, 100%);
  align-items: flex-start;
  gap: 12px;
  margin-bottom: var(--space-lg);
}

.signup {
  display: grid;
  grid-template-columns: minmax(0, 270px) auto;
  width: min(410px, 100%);
  flex: 0 1 410px;
  gap: 10px;
}

.signup input,
.signup button {
  min-height: 48px;
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  font: inherit;
}

.signup input {
  min-width: 0;
  padding: 0 15px;
  color: var(--color-ink);
  background: rgba(255, 250, 240, 0.92);
  outline: none;
}

.signup input:focus {
  border-color: var(--color-paper-bright);
  box-shadow: 0 0 0 3px rgba(255, 250, 240, 0.26);
}

.signup button {
  padding: 0 22px;
  color: var(--color-ink);
  background: var(--color-paper-bright);
  border-color: var(--color-paper-bright);
  font-weight: 400;
  cursor: pointer;
}

.signup button:hover {
  background: var(--color-paper);
  border-color: var(--color-paper);
}

.content-section {
  color: var(--color-ink);
  background: var(--surface-warm);
}

.content-section--contrast {
  background: var(--surface-clean);
}

.content-section h3 {
  margin: var(--space-lg) 0 var(--space-md);
}

.content-section p + ul {
  margin-top: calc(var(--space-xs) * -1);
}

.content-section li + li {
  margin-top: var(--space-sm);
}

.content-section li > ul {
  margin-top: var(--space-sm);
  padding-left: var(--space-lg);
}

.equipment-list,
.equipment-list ul {
  list-style: none;
}

.equipment-list {
  width: min(var(--measure-content), 100%);
  padding-left: 0;
  columns: 2;
  column-gap: var(--space-lg);
}

.equipment-list > li {
  position: relative;
  break-inside: avoid;
  padding-left: 2.1rem;
}

.equipment-list li::before,
.equipment-list li::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.equipment-list li::before {
  top: 0.45em;
  left: 0;
  width: 1.25rem;
  height: 0.8rem;
  background:
    radial-gradient(
      ellipse at 35% 22%,
      rgba(255, 255, 255, 0.22),
      transparent 42%
    ),
    var(--color-hold);
  border-radius: 55% 45% 48% 52% / 60% 48% 52% 40%;
  box-shadow:
    inset -3px -3px 0 rgba(0, 0, 0, 0.38),
    inset 2px 2px 0 rgba(255, 255, 255, 0.09);
  transform: rotate(-8deg);
}

.equipment-list > li:nth-child(3n + 2)::before {
  width: 1.35rem;
  height: 0.7rem;
  border-radius: 68% 32% 66% 34% / 50% 61% 39% 50%;
  transform: rotate(9deg);
}

.equipment-list > li:nth-child(3n + 3)::before {
  width: 1rem;
  height: 0.9rem;
  border-radius: 44% 56% 54% 46% / 52% 66% 34% 48%;
  transform: rotate(-16deg);
}

.equipment-list li::after {
  top: calc(0.45em + 0.28rem);
  left: 0.34rem;
  width: 0.12rem;
  height: 0.12rem;
  background: var(--color-hold-hole);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px var(--color-hold-hole-shadow),
    0.38rem -0.05rem 0 var(--color-hold-hole),
    0.38rem -0.05rem 0 1px var(--color-hold-hole-shadow),
    0.72rem 0.08rem 0 var(--color-hold-hole),
    0.72rem 0.08rem 0 1px var(--color-hold-hole-shadow);
}

.equipment-list > li:nth-child(3n + 3)::after {
  left: 0.22rem;
  box-shadow:
    0 0 0 1px var(--color-hold-hole-shadow),
    0.28rem -0.04rem 0 var(--color-hold-hole),
    0.28rem -0.04rem 0 1px var(--color-hold-hole-shadow),
    0.55rem 0.07rem 0 var(--color-hold-hole),
    0.55rem 0.07rem 0 1px var(--color-hold-hole-shadow);
}

.equipment-list li li {
  padding-left: var(--space-2xs);
}

.equipment-list li li::before,
.equipment-list li li::after {
  content: none;
}

.equipment-list li ul {
  list-style: disc;
}

.site-footer {
  display: flex;
  min-height: 8svh;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px var(--page-gutter);
  color: var(--color-paper);
  background: var(--color-ink);
  font-size: 0.92rem;
}

.site-footer a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(390px, 100%);
}

.footer-signup {
  width: 100%;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
}

.footer-signup label {
  display: block;
  margin-bottom: 8px;
  line-height: 1.4;
}

.footer-signup__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
}

.footer-signup input,
.footer-signup button {
  min-height: 44px;
  border: 1px solid var(--color-paper);
  border-radius: var(--radius-sm);
  font: inherit;
}

.footer-signup input[type="email"] {
  min-width: 0;
  padding: 0 12px;
  color: var(--color-ink);
  background: var(--color-paper);
  outline: none;
}

.footer-signup input[type="email"]:focus {
  outline: 2px solid var(--color-paper-bright);
  outline-offset: 2px;
}

.footer-signup button {
  padding: 0 14px;
  color: var(--color-ink);
  background: var(--color-paper);
  cursor: pointer;
  font-weight: 700;
}

.footer-signup button:hover,
.footer-signup button:focus-visible {
  background: var(--color-paper-bright);
}

.footer-signup button:focus-visible {
  outline: 2px solid var(--color-paper-bright);
  outline-offset: 2px;
}

.footer-signup button:disabled {
  cursor: default;
  opacity: 0.7;
}

.footer-signup button:disabled:hover {
  background: var(--color-paper);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 760px) {
  .hero {
    align-items: start;
    padding-top: 42px;
  }

  .hero__content {
    padding-top: calc(var(--space-xl) + var(--space-lg));
  }

  h1 {
    max-width: 12ch;
    font-size: clamp(3.1rem, 13vw, 4.8rem);
  }

  .signup,
  .signup-actions {
    width: min(340px, 100%);
  }

  .signup {
    grid-template-columns: 1fr;
  }

  .signup-actions {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: var(--space-sm);
  }

  .campaign-layout {
    grid-template-columns: 1fr;
  }

  .reward-tier {
    min-height: 0;
  }

  .equipment-list {
    columns: 1;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .site-footer__contact {
    width: 100%;
  }

  .footer-signup {
    width: min(370px, 100%);
  }

  .site-footer__links {
    align-items: flex-start;
  }
}