/* ==========================================================================
   The Growth Filter

   Written mobile first: the rules below are the phone layout. The block near
   the bottom marked "Wider screens" is the only part that applies to tablets
   and laptops.
   ========================================================================== */

:root {
  /* Colour. Every colour on the page comes from this short list. */
  --bg:        #0C0B09;   /* warm near black, not pure black */
  --raised:    #15130F;   /* barely lighter, for the email field */
  --ink:       #EDEAE3;   /* soft off white, main text */
  --muted:     #8C877D;   /* secondary text */
  --brass:     #C4A265;   /* the one accent */
  --brass-dim: #7E6738;
  --rule:      rgba(237, 234, 227, 0.11);

  /* Type */
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, Arial, sans-serif;
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --pad: 24px;   /* space between the text and the edge of a phone screen */
  --col: 640px;  /* the text column never gets wider than this */

  color-scheme: dark;   /* makes scrollbars and autofill match the page */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

main > section {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 var(--pad);
}

h1, h2, h3 { font-weight: 600; margin: 0; text-wrap: balance; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   The hairline. This is the motif of the whole page: a thin line that things
   pass through. It marks the example filter and every section break.
   -------------------------------------------------------------------------- */

.hairline,
h2::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(to right,
              var(--brass) 0, var(--rule) 58%, transparent 100%);
}

/* Accessibility helpers -------------------------------------------------- */

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

.skip {
  position: absolute; left: -9999px;
  background: var(--brass); color: var(--bg);
  padding: 12px 16px; z-index: 10; border-radius: 4px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { left: var(--pad); top: 12px; }

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

/* Wordmark --------------------------------------------------------------- */

.wordmark {
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: var(--col);
  margin: 0 auto;
  padding: 30px var(--pad) 0;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Two bars: the filter itself, in miniature */
.wordmark .mark {
  width: 19px; height: 9px; flex: none;
  border-top: 1.5px solid var(--brass);
  border-bottom: 1.5px solid var(--brass-dim);
}

/* Hero ------------------------------------------------------------------- */

.hero { padding-top: 66px; padding-bottom: 92px; }

/* Small label above the headline, so a first-time visitor knows what this is */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 20px;
}

h1 {
  font-size: clamp(2.15rem, 10vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
  margin-bottom: 26px;
}

.lede {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 32ch;
}

/* The example filter question, sitting below the line it has to pass */
.specimen { margin: 46px 0; }

.specimen .hairline { margin-bottom: 24px; }

.specimen blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 7vw, 2.25rem);
  line-height: 1.34;
  letter-spacing: -0.012em;
}

.specimen figcaption {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Signup form ------------------------------------------------------------ */

.signup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.signup input[type="email"] {
  font: inherit;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 15px 16px;
  width: 100%;
  min-height: 54px;          /* comfortable to tap with a thumb */
}
.signup input::placeholder { color: #5C574E; }
.signup input:hover { border-color: rgba(237, 234, 227, 0.2); }

.signup button {
  font: inherit;
  font-weight: 600;
  color: var(--bg);
  background: var(--brass);
  border: 0;
  border-radius: 5px;
  padding: 15px 16px;
  min-height: 54px;
  cursor: pointer;
  transition: background 130ms ease;
}
.signup button:hover { background: #D3B278; }
.signup button[disabled] { opacity: 0.5; cursor: default; }

.note {
  margin: 3px 0 0;
  font-size: 0.87rem;
  line-height: 1.45;
  color: var(--muted);
}
.note.ok    { color: var(--brass); }
.note.error { color: #DE8A72; }

/* Section headings ------------------------------------------------------- */

.steps, .kinds, .stance, .close { padding-bottom: 92px; }

h2 {
  font-size: clamp(1.6rem, 6.6vw, 2rem);
  line-height: 1.16;
  letter-spacing: -0.024em;
  margin: 0 0 34px;
}
h2::before { margin-bottom: 38px; }

/* Steps. Numbered because this genuinely is a sequence. ------------------- */

.steps ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 38px;
}

.steps .num {
  display: block;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--brass);
  margin-bottom: 11px;
}

.steps h3 {
  font-size: 1.11rem;
  letter-spacing: -0.012em;
  margin-bottom: 7px;
}

.steps p, .kinds p, .stance p { color: var(--muted); }

/* Counted or kept -------------------------------------------------------- */

.pair { display: grid; gap: 30px; }

.kind { border-left: 2px solid var(--brass-dim); padding-left: 18px; }

.kind h3 {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}

/* Closing block ---------------------------------------------------------- */

.close > p { color: var(--muted); margin-bottom: 26px; max-width: 40ch; }

/* Footer ----------------------------------------------------------------- */

footer {
  max-width: var(--col);
  margin: 0 auto;
  padding: 30px var(--pad) 52px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   Wider screens (tablet and laptop)
   ========================================================================== */

@media (min-width: 700px) {
  :root { --pad: 40px; }

  body { font-size: 18px; }

  .hero { padding-top: 104px; padding-bottom: 124px; }
  .steps, .kinds, .stance, .close { padding-bottom: 124px; }

  h2 { margin-bottom: 42px; }
  h2::before { margin-bottom: 48px; }

  .lede { font-size: 1.22rem; max-width: 34ch; }
  .specimen { margin: 56px 0; }

  /* Email field and button sit side by side once there is room for both */
  .signup { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .signup input[type="email"] { flex: 1 1 250px; width: auto; }
  .signup button { flex: 0 0 auto; padding-left: 30px; padding-right: 30px; }
  .note { flex: 1 0 100%; }

  .pair { grid-template-columns: 1fr 1fr; gap: 44px; }
  .steps ol { gap: 44px; }

  footer { padding-bottom: 68px; }
}

/* If the phone is set to reduce motion, remove it */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}