/* The reference is one paper composition, including the navigation above it. */
.about-page {
  --header-height: 86px;
  --font-display: "Times New Roman", Times, serif;
  --paper: #f3f0e9;
  --ink: #252421;
  --ink-strong: #171715;
  --ink-muted: #77746e;
  --button: #272624;
  --button-hover: #403e39;
  --ink-rule: #d2cec5;
  background: var(--paper);
}
.hero {
  margin-top: calc(-1 * var(--header-height));
  height: 100svh;
  min-height: 760px;
  overflow: hidden;
  background: var(--paper);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('/v2/paper-grain.png') center / 900px 900px;
  opacity: .8;
  pointer-events: none;
}
.hero-art {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mask-image: none;
  mix-blend-mode: multiply;
  opacity: .86;
}
.hero-copy { width: min(100%, 1450px); padding: max(116px, calc(13svh - 8px)) 24px 0; }
.app-availability { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0 0 28px; padding: 6px 11px; border: 1px solid #403e39; border-radius: 6px; background: var(--button); color: var(--paper); font-family: var(--font-display); text-align: left; }
.app-availability svg { width: 22px; height: 26px; flex: none; }
.app-availability-copy { display: flex; flex-direction: column; gap: 1px; }
.app-availability small { font-size: 10px; line-height: 1.2; color: #d2cec5; }
.app-availability strong { font-size: 20px; line-height: 1; font-weight: 400; }
.hero h1 { font-size: 120px; line-height: .84; margin-bottom: 32px; font-weight: 400; }
.hero-title-first { display: block; transform: scaleX(.87); }
.hero h1 em { display: block; max-width: none; transform: scaleX(.8); }
.hero-description { color: #726e69; font-size: 23px; line-height: 1.4; margin-bottom: 28px; }
.signup { width: 600px; max-width: 100%; }
.waitlist-form { background: #f5f2eb66; border: 1px solid #b2ada4; border-radius: 8px; }
.waitlist-form input { font: 400 20px/1.3 var(--font-display); padding: 19px 26px; }
.waitlist-form input::placeholder { color: #99948b; }
.waitlist-form button { font: 400 20px/1.3 var(--font-display); padding: 19px 28px; background: var(--button); }
.privacy-line { font: 400 17px/1.4 var(--font-display); color: #817b73; margin-top: 13px; }
.privacy-line a { font-size: 13px; }
.hero-explore { font: 400 18px/1.25 var(--font-display); margin-bottom: 28px; color: #746f66; }
.hero-explore::before { display: none; }
.hero-explore span { font-size: 26px; margin-top: 5px; }
@media (min-width: 1800px) {
  .hero-copy { width: 1640px; }
  .hero h1 { font-size: 144px; }
  .hero-description { font-size: 27px; margin-bottom: 32px; }
  .signup { width: 728px; }
  .waitlist-form input, .waitlist-form button { font-size: 24px; padding-block: 20px; }
  .waitlist-form button { padding-inline: 34px; }
  .privacy-line { font-size: 20px; }
  .hero-explore { font-size: 21px; }
}
@media (min-width: 2400px) {
  .hero-copy { width: 2100px; }
  .hero h1 { font-size: 176px; }
  .signup { width: 900px; }
  .hero-description { font-size: 32px; }
  .waitlist-form input, .waitlist-form button { font-size: 28px; padding-block: 24px; }
}
@media (max-width: 1250px) { .hero h1 { font-size: 94px; } }
@media (max-width: 1000px) { .hero h1 { font-size: 76px; } .hero-description { font-size: 20px; } }
@media (max-height: 820px) and (min-width: 1001px) {
  .hero { min-height: 700px; }
  .hero-copy { padding-top: 108px; }
  .hero h1 { font-size: 96px; margin-bottom: 22px; }
  .app-availability { margin-bottom: 22px; }
  .hero-description { font-size: 20px; margin-bottom: 22px; }
}
@media (max-width: 700px) {
  .about-page { --header-height: 68px; }
  .hero { min-height: 780px; max-height: none; }
  .hero-copy { padding: 100px 22px 0; }
  .hero h1 { font-size: 52px; line-height: .98; margin-bottom: 20px; }
  .hero h1 em { display: inline-block; max-width: 460px; transform: none; }
  .hero-title-first { transform: none; }
  .app-availability { margin-bottom: 22px; }
  .hero-description { margin-inline: auto; font-size: 16px; line-height: 1.5; margin-bottom: 22px; }
  .hero-art { object-fit: cover; object-position: center; }
  .waitlist-form { background: var(--paper); }
  .waitlist-form input { font-size: 16px; padding: 17px 14px; }
  .waitlist-form button { font-size: 16px; padding: 17px 15px; }
  .privacy-line { max-width: 260px; margin-inline: auto; font-size: 14px; }
  .privacy-line a { font-size: 12px; }
  .hero-explore { font-size: 16px; margin-bottom: max(18px, env(safe-area-inset-bottom)); color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .about-page .masthead { transition: none; } }
@media (max-width: 380px) { .hero h1 { font-size: 46px; } }