/* Substack, stripped to what carries the feel: a 680px column, Spectral for
   anything that speaks, the system sans for anything that reads, and exactly
   one colour. The only saturated things on the page are the tip numbers, the
   section kickers, and the button — which is where the eye should end up. */

:root {
  --orange: #ff6719;
  --orange-deep: #e85c12;
  --ink: #1a1a1a;
  --ink-soft: #6b6b6b;
  --ink-faint: #9a9a9a;
  --line: #e6e6e6;
  --bg: #ffffff;

  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

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

.wrap { max-width: 680px; margin: 0 auto; padding: 0 24px; }

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

/* ------------------------------------------------------------------- hero */

.hero { padding: 56px 0 8px; }

.hero h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(38px, 7vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.rule { width: 48px; height: 4px; background: var(--orange); margin-top: 26px; border-radius: 2px; }

/* ------------------------------------------------------------------- tips */

.kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 36px;
  margin-bottom: 8px;
}

.tips { list-style: none; }

.tip {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
/* No exception for the last row. Tip 15 closes the free list and tip 16 opens
   the locked one, and dropping the rule between them is the one place a seam
   would show. */

.num {
  font-family: var(--serif);
  color: var(--orange);
  font-weight: 600;
  font-size: 15px;
  min-width: 34px;
  text-align: right;
  flex: none;
  font-variant-numeric: tabular-nums;
}

.txt { flex: 1; min-width: 0; }
.txt b { font-weight: 600; }
.txt em { font-style: normal; color: var(--ink-soft); }

/* --------------------------------------------------------- gate + the fog */

.gate-zone { position: relative; }

/* Absolute, so it reserves no height: the list runs straight from tip 15 into
   tip 16 with nothing interrupting it. The rail spans the locked half and gives
   the sticky card a track to ride down. */
.gate-rail {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.gate {
  position: sticky;
  top: 18vh;
  max-width: 440px;
  margin: 96px auto 0;
  pointer-events: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  padding: 30px 28px 26px;
  text-align: center;
}

.gate h2 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.gate .lede { margin: 10px 0 20px; color: var(--ink-soft); font-size: 15px; }

.row {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.row input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 13px 14px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
}
.row input::placeholder { color: var(--ink-faint); }
.row input:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.row button {
  border: none;
  cursor: pointer;
  background: var(--orange);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 20px;
  white-space: nowrap;
  transition: background 0.15s;
}
.row button:hover { background: var(--orange-deep); }
.row button:disabled { opacity: 0.6; cursor: default; }

.fine { display: block; margin-top: 12px; color: var(--ink-faint); font-size: 12.5px; }

.err { display: none; margin-top: 10px; color: var(--orange-deep); font-size: 13px; }
.err.is-on { display: block; }

.btn {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.btn:hover { background: var(--orange-deep); }

.linkish {
  display: block;
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  width: 100%;
}
.linkish:hover { color: var(--ink-soft); }

.addr { color: var(--ink); font-weight: 600; }

.fog { user-select: none; -webkit-user-select: none; pointer-events: none; }

/* Blurred per block rather than as one filtered wrapper. The locked half runs
   to about 11,000px, and a single filter layer that tall is a large texture for
   the compositor to hold; 145 small ones cost nothing and scroll smoothly. */
.fog .kicker,
.fog .tip { filter: blur(7px); }

/* ----------------------------------------------------------- sent banner */

.banner {
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--orange);
  color: #fff;
  text-align: center;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
}
.banner[hidden] { display: none; }

/* ----------------------------------------------------------------- mobile */

@media (max-width: 520px) {
  .hero { padding: 36px 0 4px; }
  .gate { padding: 26px 18px 22px; top: 10vh; margin-top: 80px; }
  .row { flex-direction: column; }
  .row button { width: 100%; }
  .tip { gap: 12px; }
  .num { min-width: 26px; }
}

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