@font-face {
  font-family: 'Inter';
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Dela Gothic One';
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/dela-gothic-one-latin.woff2') format('woff2');
}

:root {
  --yellow: #FFE500;
  --ink: #13131A;
  --heading: #151515;
  --gap: 2.75rem;
  --pad-x: 6rem;
  --pad-y: 6rem;
}

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

html { font-size: 17pt; -webkit-text-size-adjust: none; }

body {
  min-width: 320px;
  overflow-x: hidden;
  background: #000;
  color: #fff;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.025rem;
  line-height: 1.875;
  text-align: center;
}

/* Starfield: yellow dots fly out from the centre behind the black panels (script.js draws them) */
#stars { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
main, #done { position: relative; z-index: 1; }

/* Black full-screen panels: hero, community, request form, thank-you */
.panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
}

.inner { width: 100%; max-width: 60rem; padding: var(--pad-y) var(--pad-x); }
.inner > * + *, .copy > * + * { margin-top: var(--gap); }

/* Type */
.eyebrow {
  color: var(--yellow);
  font-size: 0.875em;
  font-weight: 600;
  letter-spacing: 0.35rem;
  line-height: 2;
  text-transform: uppercase;
}

.display, .title, .copy h2 {
  font-family: 'Dela Gothic One', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}

.display { font-size: 5.5em; letter-spacing: -0.075rem; line-height: 1.125; }
.title, .copy h2 { font-size: 3em; letter-spacing: -0.025rem; line-height: 1.25; }
.copy h2 { color: var(--heading); }
.tight { color: #FFFAFA; line-height: 1.625; }
.muted { color: #EDEDED; }

.smallcaps {
  color: #CFCFCF;
  font-size: 1.5em;
  font-variant: small-caps;
  font-weight: 500;
  letter-spacing: 0.15rem;
  line-height: 1.125;
}

/* Buttons and arrow links */
.button, .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  background: var(--yellow);
  color: #000;
  text-decoration: none;
  transition: transform 0.25s ease;
}

.button {
  width: fit-content;
  height: 4.375rem;
  padding: 0 2.1875rem 0 2.5375rem;
  border: 0;
  border-radius: 2.5rem;
  font: 600 0.875em/1 'Inter', sans-serif;
  letter-spacing: 0.35rem;
  text-transform: uppercase;
  cursor: pointer;
}

.button:hover { transform: scale(1.1125); }
.button:disabled { opacity: 0.6; cursor: wait; }
.button svg { width: 1.25em; height: 1.25em; margin-left: 0.5em; fill: currentColor; }

.arrow { width: 4rem; height: 4rem; border-radius: 50%; background: var(--ink); color: var(--yellow); }
.arrow:hover { transform: scale(1.2); }
.arrow svg { width: 60%; height: 60%; fill: currentColor; }
.white .arrow { color: #fff; }

/* Virtue sections: copy on one half, photo filling the other */
.split {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40rem;
  color: #000;
  line-height: 1.625;
}

.yellow { background: var(--yellow); }
.white { background: #fff; }
.copy { width: 50%; padding: var(--pad-y) var(--pad-x); }
.split img { position: absolute; inset: 0 0 0 50%; width: 50%; height: 100%; object-fit: cover; }
.white .copy { margin-left: 50%; }
.white img { inset: 0 50% 0 0; }

/* Benefits */
.benefits {
  width: 30rem;
  max-width: 100%;
  margin-inline: auto;
  padding: 0;
  list-style: none;
  color: #EDEDED;
  text-align: left;
}

.benefits li { display: flex; gap: 0.875rem; }

.benefits li::before {
  content: '';
  flex: none;
  width: 0.875rem;
  height: 1.875rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20,12.2c.1-.2.2-.5.3-.7,1.5-3.2,3.9-4.6,7.4-4.8,5.5-.2,9.7,4.4,9.2,9.8-.2,2-1,3.7-2.4,5.1l-13.6,15.3c-.5.4-1.6.4-2,0l-13.6-15.3c-1-1.1-1.6-1.9-2-3.4-1.3-4.5.9-9.4,5.4-11.1,2.5-.9,6-.7,8.2.8,1.4,1,2.4,2.5,3,4.1Z' fill='%23FFE500'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Request form */
form { display: grid; gap: 1.75rem; width: 32rem; max-width: 100%; margin-inline: auto; }

input, textarea {
  width: 100%;
  height: 4.375rem;
  padding: 0 1.53125rem;
  border: 0;
  border-radius: 0.375rem;
  background: #fff;
  color: #000;
  font: 400 1em 'Inter', sans-serif;
  letter-spacing: 0.025rem;
  appearance: none;
}

textarea { height: 10rem; padding: 1.2rem 1.53125rem 1.53125rem; line-height: 1.875; resize: vertical; }
input:focus, textarea:focus { outline: 0; box-shadow: 0 0 0 2px var(--yellow), inset 0 0 0 1px var(--yellow); }
input[name="your-url"] { display: none; } /* spam honeypot: humans never see it */
form .button { font-weight: 500; }
.form-status:empty { display: none; }

.inner > hr { width: 10rem; height: 1px; margin: 6rem auto; border: 0; background: var(--yellow); }

/* Thank-you state: /#done swaps the page for the confirmation panel */
#done { display: none; }
#done:target { display: flex; }
body:has(#done:target) main { display: none; }

/* Motion: smooth anchor scrolling, content fades in as it enters the viewport */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .js .inner > *, .js .copy > * {
    transition: opacity 0.5s ease 0.125s, translate 0.5s ease 0.125s, transform 0.25s ease;
  }

  .js .inner > :not(.in), .js .copy > :not(.in) { opacity: 0; translate: 0 1rem; }
  .js .eyebrow:not(.in), .js .button:not(.in) { translate: 0 -1rem; }
  .js .inner > p:not(.eyebrow, .in), .js .copy > p:not(.in) { translate: 1rem 0; }
}

@media (max-width: 1680px) { html { font-size: 12pt; } }
@media (max-width: 980px) { html { font-size: 11pt; } }

@media (max-width: 736px) {
  html { font-size: 12pt; }
  :root { --pad-x: 2rem; --pad-y: 3.5rem; }
  .display { font-size: 2.5em; letter-spacing: -0.065rem; }
  .title, .copy h2 { font-size: 1.75em; line-height: 1.375; }
  .split { display: block; min-height: 0; }
  .copy, .white .copy { width: 100%; margin-left: 0; }
  .split img { position: static; display: block; width: 100%; height: 37.5rem; }
  .arrow { width: 4.5rem; height: 4.5rem; }
  .inner > hr { margin: 2rem auto; }
}

@media (max-width: 480px) {
  :root { --gap: 2.4rem; }
  .button { width: 100%; max-width: 32rem; }
  .split img { height: 30rem; }
}

@media (max-width: 360px) {
  :root { --pad-x: 1.5rem; }
  .split img { height: 26.25rem; }
}