@font-face {
  font-family: "Cormorant Syndicate";
  src: url("/assets/cormorant-syndicate.woff") format("woff");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --ink: #0F1012;
  --paper: #F3F1EA;
  --soft: #C9C7C0;
  --muted: #9A988F;
  --faint: #6E6D68;
  --line: #24262A;
  --green: #2EC27E;
  --serif: "Cormorant Syndicate", "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1180px;
  --track: 0.26em;
}

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

html { background: var(--ink); color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(19px, 1.2vw + 13px, 22px);
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }

::selection { background: var(--green); color: var(--ink); }

:focus-visible { outline: 1px solid var(--green); outline-offset: 4px; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--gutter); top: 12px; background: var(--paper); color: var(--ink); padding: 8px 14px; z-index: 10; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type */

.label {
  font-size: 13px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}

.caps {
  font-size: clamp(26px, 2.2vw + 14px, 40px);
  letter-spacing: var(--track);
  text-transform: uppercase;
  line-height: 1.25;
}

.caps--sm { font-size: 16px; letter-spacing: 0.3em; line-height: 1.4; }
.caps--muted { color: var(--muted); }

.rule { display: block; width: 44px; height: 1px; background: var(--green); }

/* header */

.top {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px var(--gutter);
  z-index: 2;
}

.top__mark img { width: 188px; }

.top__nav { display: flex; gap: clamp(18px, 3vw, 40px); align-items: center; }

.top__nav a {
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--soft);
  transition: color .2s ease;
}

.top__nav a:hover { color: var(--paper); }
.top__apply { color: var(--paper) !important; border-bottom: 1px solid var(--green); padding-bottom: 3px; }

/* hero */

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px var(--gutter) 72px;
  gap: 30px;
  background: radial-gradient(ellipse 70% 55% at 50% 42%, #15171A 0%, var(--ink) 70%);
}

.hero__title {
  font-size: clamp(42px, 5.4vw + 12px, 92px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  max-width: 100%;
}

.hero__title span { display: block; text-wrap: balance; }

.hero__lede { max-width: 34ch; color: var(--soft); text-wrap: pretty; }

.hero__actions { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 10px; }

/* buttons and links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 34px;
  border: 1px solid rgba(243, 241, 234, .55);
  color: var(--paper);
  background: transparent;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--solid { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--solid:hover { background: transparent; color: var(--paper); }
.btn[disabled] { opacity: .6; cursor: progress; }

.link {
  font-size: 17px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}

.link:hover { color: var(--paper); border-color: var(--muted); }

/* sections */

.section {
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(88px, 11vw, 160px) var(--gutter);
  border-top: 1px solid var(--line);
}

.section__head { display: grid; gap: 18px; max-width: 40rem; }
.section__intro { color: var(--soft); max-width: 36ch; text-wrap: pretty; }

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

.steps {
  list-style: none;
  margin: clamp(56px, 7vw, 96px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 64px);
}

.steps li { display: grid; gap: 14px; align-content: start; padding-top: 24px; border-top: 1px solid var(--line); }
.steps__n { font-size: 15px; letter-spacing: 0.08em; color: var(--green); }
.steps p { color: var(--soft); }

.list { margin: 0; display: grid; gap: 0; }
.list > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; padding: 26px 0; border-top: 1px solid var(--line); }
.list > div:last-child { border-bottom: 1px solid var(--line); }
.list dt { font-size: 15px; letter-spacing: 0.28em; text-transform: uppercase; padding-top: 4px; }
.list dd { margin: 0; color: var(--soft); }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px); }
.pair > div { display: grid; gap: 14px; align-content: start; padding-top: 24px; border-top: 1px solid var(--line); }
.pair p { color: var(--soft); }

.prose { display: grid; gap: 1.1em; max-width: 34ch; font-size: clamp(21px, 1.2vw + 15px, 26px); line-height: 1.5; }

/* email list */

.section--list { display: grid; justify-items: center; text-align: center; gap: 18px; }
.section--list .section__intro { margin-bottom: 18px; }
.section--list { padding-bottom: clamp(110px, 13vw, 180px); }

.signup--hero { margin-top: 12px; }

.signup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: min(100%, 520px);
  border: 1px solid rgba(243, 241, 234, .3);
  transition: border-color .2s ease;
}

.signup:focus-within { border-color: var(--paper); }

.signup input {
  min-width: 0;
  min-height: 56px;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: 19px;
}

.signup input::placeholder { color: var(--faint); }
.signup input:focus { outline: none; }
.signup .btn { min-height: 56px; border: 0; border-left: 1px solid rgba(243, 241, 234, .3); }

.signup__msg { grid-column: 1 / -1; min-height: 0; font-size: 17px; color: var(--soft); text-align: left; padding: 0 20px; }
.signup__msg:not(:empty) { padding: 12px 20px 14px; border-top: 1px solid var(--line); }
.signup__msg[data-tone="ok"] { color: var(--green); }
.signup__msg[data-tone="error"] { color: #E59A8A; }

/* closing */

.section--close { display: grid; justify-items: center; text-align: center; gap: 30px; padding-bottom: clamp(110px, 13vw, 180px); }
.close__title { font-size: clamp(32px, 3vw + 14px, 56px); line-height: 1.15; max-width: 18ch; text-wrap: balance; }
.close__note { color: var(--muted); font-size: 17px; }

/* footer */

.foot {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
  padding: 0 var(--gutter) 28px;
}

.foot__mark { width: 150px; opacity: .8; }
.foot__nav a { font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.foot__nav a:hover { color: var(--paper); }
.foot__risk { max-width: 62ch; font-size: 14px; line-height: 1.6; color: var(--faint); }
.foot__legal { font-size: 13px; letter-spacing: 0.2em; color: var(--faint); }

/* gentle entrance, skipped for people who prefer less motion */

@media (prefers-reduced-motion: no-preference) {
  .hero > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero > :nth-child(2) { animation-delay: .08s; }
  .hero > :nth-child(3) { animation-delay: .16s; }
  .hero > :nth-child(4) { animation-delay: .24s; }
  .hero > :nth-child(5) { animation-delay: .32s; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
}

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

/* small screens */

@media (max-width: 860px) {
  .top__nav a:not(.top__apply) { display: none; }
  .section--split { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .top { padding-top: 22px; }
  .top__mark img { width: 150px; }
  .list > div { grid-template-columns: 1fr; gap: 8px; }
  .signup { grid-template-columns: 1fr; }
  .signup .btn { border-left: 0; border-top: 1px solid rgba(243, 241, 234, .3); }
  .hero { padding-top: 120px; }
}

/* single screen: header, hero and footer always fit the viewport */

main { flex: 1; display: flex; flex-direction: column; }

.hero {
  padding: clamp(84px, 12vh, 120px) var(--gutter) clamp(20px, 4vh, 48px);
  gap: clamp(16px, 3.2vh, 30px);
  background: radial-gradient(ellipse 70% 60% at 50% 46%, #15171A 0%, var(--ink) 70%);
}

.hero__title { font-size: clamp(36px, min(5.4vw + 12px, 10vh), 92px); }
.hero .rule { margin: clamp(0px, .6vh, 6px) 0; }
.signup--hero { margin-top: clamp(4px, 1.2vh, 12px); }

.foot { gap: 6px; padding: 0 var(--gutter) clamp(16px, 3vh, 28px); }
.foot__risk { font-size: 13px; line-height: 1.5; max-width: 54ch; }
.foot__legal { font-size: 12px; }

@media (max-width: 560px) {
  .top { padding: 20px var(--gutter); }
  .top__mark img { width: 140px; }
  .hero { padding-top: clamp(76px, 12vh, 104px); }
  .hero__title { font-size: clamp(34px, min(10vw, 6.4vh), 44px); line-height: 1.12; }
  .hero__title span { display: inline; }
  .hero__title { text-wrap: balance; }
  .hero__lede { font-size: 18px; }
  .label { font-size: 12px; letter-spacing: .3em; }
  .signup input, .signup .btn { min-height: 52px; }
  .foot__risk { font-size: 12px; }
}

@media (max-height: 620px) and (max-width: 560px) {
  .signup { grid-template-columns: minmax(0, 1fr) auto; }
  .signup .btn { border-top: 0; border-left: 1px solid rgba(243, 241, 234, .3); padding: 0 18px; }
}