@font-face { font-family: Basier; src: url(assets/basier-semibold.otf); font-weight: 600; }
@font-face { font-family: Milling; src: url(assets/milling-triplex.otf); }
@font-face { font-family: Suisse; src: url(assets/suisse-regular.otf); font-weight: 400; }
@font-face { font-family: Suisse; src: url(assets/suisse-medium.otf); font-weight: 500; }
@font-face { font-family: Suisse; src: url(assets/suisse-semibold.otf); font-weight: 600; }

:root {
  --ink: #272727;
  --berry: #8e1949;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: #fffdfd;
  color: var(--ink);
  font: 500 clamp(16px, 1.4vw, 18px)/1.25 Suisse, Arial, sans-serif;
}
p, h1, h2 { margin: 0; }
img { display: block; }
a { color: inherit; }
input, button { font: inherit; }
:focus-visible { outline: 2px solid var(--berry); outline-offset: 3px; }
h1:focus { outline: none; }

.page {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: clamp(20px, 4svh, 56px);
}
.layout {
  width: min(1149px, calc(100% - 2 * clamp(20px, 7vw, 100px)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: max-content minmax(0, 840px);
  gap: clamp(36px, 13vw, 200px);
}
.sidebar { display: flex; flex-direction: column; gap: 10px; }
.brand { display: flex; align-items: center; gap: 4.8px; text-decoration: none; color: #931848; }
.brand span { width: 80.64px; height: 43.008px; font: 27.648px Milling, sans-serif; }
.sidebar-link { text-decoration: none; white-space: nowrap; }
.sidebar-link:hover { text-decoration: underline; }
.mobile-label { display: none; }
.home, .hero-group, header { display: grid; }
.home, header { gap: clamp(6px, 1.4svh, 12px); }
.hero-group { gap: clamp(16px, 4svh, 33px); }
h1 { font: 600 clamp(30px, 4.25vw, 47px)/1.02 Basier, sans-serif; letter-spacing: -.04em; }
.home, .hero-group { container-type: inline-size; }
.home h1, .hero-group p { white-space: nowrap; }
.home h1 { font-size: min(clamp(30px, 4.25vw, 47px), 7.7cqi); }
.hero-group p { font-size: min(1em, 4.2cqi); }
.mobile-subtitle { display: none; }
.join-link { color: var(--berry); font-weight: 600; text-decoration-color: #8e193f4a; text-decoration-skip-ink: none; }
.hero { position: relative; width: min(100%, calc(68svh * 840 / 564)); aspect-ratio: 840 / 564; overflow: clip; border-radius: 17px; }
.hero img { position: absolute; object-fit: cover; }
.hero-fill { inset: 0; width: 100%; height: 100%; }
.hero-photo { width: 105.83%; height: 142.38%; left: .06%; top: -35.84%; }
.hero-overlay { width: 98.1%; height: 101.42%; left: 5.42%; top: 7.95%; border-radius: 11px; }

.waitlist, .signup { display: grid; gap: clamp(20px, 5.2svh, 52px); }
.fields { display: grid; gap: clamp(9px, 2svh, 20px); }
.fields label { display: grid; gap: clamp(5px, 1.2svh, 12px); }
.fields input {
  width: 100%;
  padding: clamp(6px, 1.05svh, 10px) 10px;
  border: 1.5px solid #e4e4e7;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.5;
}
.fields input::placeholder { color: #a0a0ab; opacity: 1; }
.participation { display: grid; gap: clamp(12px, 4svh, 35px); }
.policy { display: grid; gap: clamp(5px, 1.2svh, 12px); }
.policy h2 { font: inherit; }
.policy p { font-weight: 400; line-height: 1.5; }
.policy a { text-decoration-color: #27272745; text-decoration-skip-ink: none; }
.actions, .agreement { display: flex; align-items: center; }
.actions { justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.agreement { gap: 5px; white-space: nowrap; }
.agreement input {
  appearance: none;
  display: grid;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid #c2c2c2;
  border-radius: 4px;
  cursor: pointer;
}
.agreement input:checked { background: var(--berry); border-color: var(--berry); }
.agreement input:checked::after { content: ""; width: 8px; height: 5px; border: solid white; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.status { order: 1; flex-basis: 100%; font-size: 14px; }
.status:empty { display: none; }
button {
  flex: none;
  padding: clamp(8px, 1.1svh, 10px) clamp(18px, 4vw, 42px);
  border: 0;
  border-radius: 32px;
  background: var(--berry);
  color: white;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}
button:disabled { opacity: .3; cursor: default; }

@media (max-width: 768px) {
  .page { align-items: stretch; }
  .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: clamp(16px, 4svh, 32px);
  }
  .layout > section { align-self: center; }
  .layout:has(.home:not([hidden])) { row-gap: clamp(18px, 3svh, 28px); }
  .layout > .home {
    gap: clamp(12px, 3svh, 28px);
  }
  .home h1 { text-align: center; }
  .hero-group {
    justify-items: center;
    gap: 0;
    padding: clamp(10px, 3.2vw, 20px);
    border: 1px solid #e4e4e7;
    border-radius: 20px;
  }
  .desktop-subtitle { display: none; }
  .hero-group .mobile-subtitle {
    display: block;
    width: 100%;
    padding-block: clamp(12px, 3svh, 28px) clamp(16px, 4svh, 36px);
    font-size: clamp(13px, 4.5cqi, 28px);
    line-height: 1.45;
    text-align: center;
    white-space: normal;
  }
  .hero-group .hero {
    width: 100%;
    height: min(66.67cqi, 39svh);
    border-radius: 12px;
  }
  .sidebar { flex-direction: row; align-items: center; justify-content: space-between; }
  .sidebar-link {
    padding: 10px clamp(12px, 3vw, 20px);
    border-radius: 999px;
    background: #15161b;
    color: white;
    font-size: 14px;
    font-weight: 600;
  }
  .sidebar-link:hover { background: #303138; text-decoration: none; }
  .sidebar-link[aria-current="page"], .desktop-label { display: none; }
  .mobile-label { display: inline; }
}

@media (max-height: 640px) {
  .page { padding-block: 14px; }
  .waitlist, .signup { gap: 14px; }
  .fields { gap: 8px; }
  .policy p { line-height: 1.3; }
}

@media (max-width: 768px) and (max-height: 700px) {
  .layout:has(.home:not([hidden])) { row-gap: clamp(16px, 5svh, 36px); }
  .hero-group .mobile-subtitle { padding-block: 12px 20px; }
  .hero-group .hero { max-height: 37svh; }
}

@media (max-width: 768px) and (max-height: 570px) {
  .hero-group .mobile-subtitle { font-size: clamp(13px, 4.5cqi, 18px); }
  .hero-group .hero { max-height: 32svh; }
}

@media (max-width: 768px) and (max-height: 470px) {
  .layout:has(.home:not([hidden])) { row-gap: 14px; }
  .hero-group .mobile-subtitle { padding-block: 8px 12px; font-size: min(1em, 4.5cqi); }
  .hero-group .hero { max-height: 34svh; }
}

@media (max-height: 470px) {
  .page { padding-block: 10px; }
  .layout { row-gap: 10px; }
  .brand span { height: auto; }
  .waitlist, .signup, .participation { gap: 8px; }
  .fields { gap: 4px; }
  .fields label, .policy, header { gap: 3px; }
  .fields input, button { padding-block: 4px; }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
  .fields label:first-child { grid-column: 1 / -1; }
  .fields label, .policy { font-size: 14px; }
  .fields input { font-size: 16px; }
  .policy p { line-height: 1.2; }
}

@media (max-width: 400px) and (max-height: 470px) {
  .layout { width: calc(100% - 32px); }
  .waitlist h1 { font-size: 26px; }
  .waitlist header p, .policy { font-size: 13px; }
  .sidebar .brand img { height: 24px; width: auto; }
  .sidebar .brand span { font-size: 23px; }
}