/* hanghere.app
   Tokens first, then the pieces every page shares, then each page.

   Desktop (1101 px and up): the home and bookclub pages are the Figma frames (1728 x 1117)
   fitted to the viewport. Positions follow the viewport's width (--sx) and height (--sy), so
   the page fills the screen exactly and never scrolls; type, the phone and the forms scale with
   the smaller of the two (--s), never below 0.7, so text stays readable. The Menu
   opens over the page and shifts nothing. The legal pages read in the flow and scroll.

   Narrow screens (Proposed, no frame): one column, in reading order, scrolling. */

:root {
  --bg: #fcfdf7;
  --ink: #0a0a0a;
  --ink-soft: #3a3a3a;
  --grey: #747474;
  --grey-light: #868686;
  --line: #d4d4d4;
  --on-ink: #ffffff;

  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;

  /* One frame pixel, horizontally and vertically, and the uniform scale for things that keep
     their proportions. */
  --sx: calc(100vw / 1728);
  --sy: calc(100vh / 1117);
  --s: max(min(var(--sx), var(--sy)), 0.7px);

  --gutter: 16px;
  /* The wordmarks are outlined text at one size: both have the baseline 87.72 units below the
     top; "iOS app" runs 112 units deep (the p's), "Bookclub" 90. Lining them up by baseline,
     not by box, keeps the footer in one place on every page. */
  --wm-ios-width: 1077;
  --wm-bookclub-width: 1150;
  --wm-ios-below: 24.28;
  --wm-bookclub-below: 2.28;
  /* The narrowest text column that keeps the headline on three lines at 28 px. */
  --pitch-min: 710px;
  --radius-field: 8px;
  --radius-button: 8px;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/SourceSerif4-Italic.woff2") format("woff2");
}

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

html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

h1,
h2,
p {
  margin: 0;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

em,
.serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

/* The honeypot: off screen for people, present for bots. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Header: the serif "Menu" centred at the top. The list opens beneath it, over the page. */
.site-header {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  pointer-events: none;
}

.site-header nav {
  position: relative;
  display: inline-block;
  pointer-events: auto;
}

.menu-toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: 500 20px/1.35 var(--serif);
  font-style: italic;
  color: var(--ink-soft);
}

.menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  margin: 11px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.menu a {
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--grey-light);
}

.menu a:hover {
  color: var(--ink);
}

/* Footer: the wordmark bottom left, a link bottom right, sitting on one line. In the flow it
   sits at the bottom of the window until the content pushes it further down. */
.site-footer {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  flex: 0 0 auto;
  /* Both at the same unit (the container's width over 1150), so caps match. */
  width: calc(var(--wm-ios-width) / var(--wm-bookclub-width) * 100%);
  margin-bottom: calc(var(--wm-ios-below) / var(--wm-bookclub-width) * -100%);
}

.wordmark-bookclub {
  width: 100%;
  margin-bottom: calc(var(--wm-bookclub-below) / var(--wm-bookclub-width) * -100%);
}

.wordmark img {
  width: 100%;
}

.footer-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  line-height: 24px;
  text-decoration: none;
  color: var(--grey-light);
  white-space: nowrap;
}

.footer-link:hover {
  color: var(--ink);
}

.footer-link svg {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
}

/* Text */
.tagline {
  font-size: 20px;
  line-height: 1.35;
}

.headline {
  margin-top: 20px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 500;
}

.subline {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--grey);
}

.section-title {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 500;
}

.muted {
  color: var(--grey-light);
}

/* Forms: label 14 px grey, field 37 px high with a 1 px line and 8 px corners. */
.signup {
  width: 100%;
  max-width: 407px;
}

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

.field + .field {
  margin-top: 16px;
}

.field label {
  font-size: 14px;
  line-height: 1.2;
  color: var(--grey-light);
}

.field input {
  width: 100%;
  height: 37px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
}

.field input:focus {
  border-color: var(--ink);
  outline: none;
}

.signup-row {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.signup-note {
  flex: 1 1 auto;
  max-width: 264px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--grey-light);
}

.button {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  margin: 0;
  padding: 10px;
  border-radius: var(--radius-button);
  background: var(--ink);
  color: var(--on-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
}

.button:hover {
  background: var(--ink-soft);
}

.button[disabled] {
  opacity: 0.6;
  cursor: default;
}

.tester {
  margin-top: 21px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--ink);
  cursor: pointer;
}

.tester input {
  flex: 0 0 auto;
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
}

.tester input::before {
  content: "";
  width: 50%;
  height: 50%;
  border-radius: 2px;
  background: var(--ink);
  transform: scale(0);
  transition: transform 120ms ease;
}

.tester input:checked::before {
  transform: scale(1);
}

.signup-privacy {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--grey-light);
}

.signup-error {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--ink);
}

.signup-done {
  width: 100%;
  max-width: 407px;
}

.signup-done p + p {
  margin-top: 8px;
}

/* Home: the phone. The frame is the owner's mockup (1038 x 1882); the screen sits at 124, 97
   with 786 x 1703 inside it and 110 px corners, and the Dynamic Island at 392, 118, 250 x 74.
   The walkthrough plays in the screen's place, under a black pill where the island is, with the
   reader's first page as its poster. */
.phone {
  position: relative;
  margin: 0;
  width: 345px;
  max-width: 100%;
}

.phone-frame {
  position: relative;
  z-index: 0;
  width: 100%;
}

.phone-screen {
  position: absolute;
  z-index: 1;
  left: 11.946%;
  top: 5.154%;
  width: 75.723%;
  height: 90.489%;
  object-fit: cover;
  border-radius: 14% / 6.46%;
  background: #000;
}

.phone-island {
  position: absolute;
  z-index: 2;
  left: 37.77%;
  top: 6.27%;
  width: 24.08%;
  height: 3.93%;
  border-radius: 999px;
  background: #000;
}

.pitch .signup,
.pitch .signup-done {
  margin-top: 65px;
}

.store {
  margin-top: 47px;
}

.store .badge {
  margin-top: 13px;
  width: 133px;
}

/* Bookclub */
.pick-meta {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.month {
  font: 500 18px/1.35 var(--serif);
  font-style: italic;
  color: var(--ink);
}

.members {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--grey);
}

.members b {
  font-weight: 700;
}

.book-title {
  margin-top: 16px;
  font-size: 30px;
  line-height: 1.2;
}

.book-author {
  margin-top: 8px;
  font-size: 24px;
  line-height: 1.2;
  color: var(--grey-light);
}

.blurb {
  margin-top: 16px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
}

.join .signup,
.join .signup-done {
  margin-top: 16px;
}

.join .field label {
  font-size: 16px;
}

.join .signup-row {
  justify-content: space-between;
}

/* Plain pages: privacy, terms, thanks, 404. They read in the flow and scroll. */
.article {
  width: min(100% - 2 * var(--gutter), 643px);
  margin: 0 auto;
  padding-top: 142px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
}

.article h1 {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 500;
}

.article .meta {
  margin-top: 8px;
  color: var(--grey-light);
}

.article h2 {
  margin-top: 32px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
}

.article h2 + p {
  margin-top: 8px;
}

.article p + p {
  margin-top: 12px;
}

.article nav {
  margin-top: 40px;
  padding-bottom: 80px;
  display: flex;
  gap: 24px;
}

.page-plain .site-footer {
  padding: 80px var(--gutter) 40px;
}

/* Narrow screens: one column, in reading order. */
@media (max-width: 1100px) {
  .hero,
  .bookclub {
    padding: 96px var(--gutter) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 48px;
  }

  .phone {
    width: min(345px, 100%);
  }

  .pitch,
  .pick,
  .join {
    width: min(100%, var(--pitch-min));
    min-width: min(var(--pitch-min), 100%);
  }

  .pitch .headline {
    max-width: none;
  }

  .page-home .site-footer,
  .page-bookclub .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 80px var(--gutter) 40px;
  }

  .page-home .wordmark,
  .page-bookclub .wordmark {
    margin-bottom: 0;
  }

  .signup-row {
    flex-wrap: wrap;
  }

  .pitch .signup,
  .pitch .signup-done {
    margin-top: 40px;
  }
}

/* Desktop: the frames, fitted to the viewport. Every number is the frame's, times a scale. */
@media (min-width: 1101px) {
  .page-home,
  .page-bookclub {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }

  .site-header {
    top: calc(46 * var(--sy));
  }

  .menu-toggle {
    font-size: calc(20 * var(--s));
  }

  .menu {
    margin-top: calc(11 * var(--s));
    gap: calc(8 * var(--s));
  }

  .menu a {
    font-size: calc(16 * var(--s));
    line-height: 1.25;
  }

  .page-home .site-footer,
  .page-bookclub .site-footer {
    position: absolute;
    left: calc(65 * var(--sx));
    right: calc(74 * var(--sx));
    bottom: calc(68 * var(--sy));
  }

  .wordmark {
    width: calc(var(--wm-ios-width) * var(--sx));
    margin-bottom: calc(var(--wm-ios-below) * -1 * var(--sx));
  }

  .wordmark-bookclub {
    width: calc(var(--wm-bookclub-width) * var(--sx));
    margin-bottom: calc(var(--wm-bookclub-below) * -1 * var(--sx));
  }

  .footer-link {
    font-size: calc(20 * var(--s));
    line-height: 1.2;
    padding-bottom: calc(3 * var(--sy));
  }

  /* Type and controls */
  .tagline {
    font-size: calc(20 * var(--s));
  }

  .headline {
    margin-top: calc(20 * var(--s));
    font-size: calc(28 * var(--s));
    max-width: calc(643 * var(--s));
  }

  .subline {
    margin-top: calc(20 * var(--s));
    font-size: calc(18 * var(--s));
    max-width: calc(536 * var(--s));
  }

  .section-title {
    font-size: calc(30 * var(--s));
  }

  .signup,
  .signup-done {
    max-width: calc(407 * var(--s));
  }

  .field {
    gap: calc(8 * var(--s));
  }

  .field + .field {
    margin-top: calc(16 * var(--s));
  }

  .field label {
    font-size: calc(14 * var(--s));
  }

  .field input {
    height: calc(37 * var(--s));
    padding: 0 calc(10 * var(--s));
    font-size: calc(16 * var(--s));
    border-radius: calc(8 * var(--s));
  }

  .signup-row {
    margin-top: calc(16 * var(--s));
    gap: calc(15 * var(--s));
  }

  .signup-note {
    max-width: calc(264 * var(--s));
    font-size: calc(14 * var(--s));
  }

  .button {
    padding: calc(10 * var(--s));
    font-size: calc(16 * var(--s));
    border-radius: calc(8 * var(--s));
  }

  .tester {
    margin-top: calc(21 * var(--s));
    gap: calc(12 * var(--s));
    font-size: calc(12 * var(--s));
  }

  .tester input {
    width: calc(20 * var(--s));
    height: calc(20 * var(--s));
    border-radius: calc(4 * var(--s));
  }

  .signup-privacy {
    margin-top: calc(16 * var(--s));
    font-size: calc(12 * var(--s));
  }

  .signup-error {
    margin-top: calc(12 * var(--s));
    font-size: calc(14 * var(--s));
  }

  /* Home: the phone at x 474, y 215; the text column 35 px to its right, starting at y 268. */
  .hero {
    position: absolute;
    left: calc(474 * var(--sx));
    top: calc(215 * var(--sy));
    right: calc(74 * var(--sx));
    display: grid;
    grid-template-columns: calc(345 * var(--s)) minmax(0, calc(643 * var(--s)));
    column-gap: calc(35 * var(--s));
    align-items: start;
  }

  .phone {
    width: calc(345 * var(--s));
  }

  .pitch {
    padding-top: calc(53 * var(--s));
  }

  .pitch .signup,
  .pitch .signup-done {
    margin-top: calc(65 * var(--s));
  }

  .store {
    margin-top: calc(47 * var(--s));
  }

  .store .badge {
    margin-top: calc(13 * var(--s));
    width: calc(133 * var(--s));
  }

  /* Bookclub: the pick at x 394 (385 wide), the form at x 926 (407 wide), both from y 295. */
  .bookclub {
    position: absolute;
    left: calc(394 * var(--sx));
    right: calc(395 * var(--sx));
    top: calc(295 * var(--sy));
    display: grid;
    grid-template-columns: calc(385 * var(--s)) calc(407 * var(--s));
    justify-content: space-between;
    column-gap: calc(48 * var(--s));
  }

  .pick-meta {
    margin-top: calc(16 * var(--s));
    gap: calc(16 * var(--s));
  }

  .month {
    font-size: calc(18 * var(--s));
  }

  .members {
    font-size: calc(16 * var(--s));
  }

  .book-title {
    margin-top: calc(16 * var(--s));
    font-size: calc(30 * var(--s));
  }

  .book-author {
    margin-top: calc(8 * var(--s));
    font-size: calc(24 * var(--s));
  }

  .blurb {
    margin-top: calc(16 * var(--s));
    font-size: calc(20 * var(--s));
  }

  .join .signup,
  .join .signup-done {
    margin-top: calc(16 * var(--s));
  }

  .join .field label {
    font-size: calc(16 * var(--s));
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}