[hidden] { display: none !important; }

/* ---------- who card ---------- */
.who-card { position: relative; border: 1px solid var(--grain); background: var(--floor-2); padding: 2.1rem 1.4rem 1.5rem; border-radius: 0.2rem; }
.who-card .who { font-family: var(--display); font-style: italic; font-size: 1.4rem; line-height: 1.3; font-variation-settings: "SOFT" 100, "WONK" 1; }
.who-card .fine { margin-top: 1rem; }

/* ---------- the list ---------- */
.interest-grid { display: grid; gap: 1.2rem; margin-top: 2.4rem; }
@media (min-width: 700px) { .interest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .interest-grid { grid-template-columns: repeat(6, 1fr); } }

.interest {
  position: relative; background: var(--floor-2); border: 1px solid var(--grain);
  padding: 2.1rem 1.4rem 1.5rem; border-radius: 0.2rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
@media (min-width: 1000px) {
  .interest { grid-column: span 2; }
  .interest.lead { grid-column: span 4; }
  .interest.wide { grid-column: span 3; }
}
.interest > .tape { position: absolute; top: -0.8rem; left: 1rem; }
.interest h3 { font-size: 1.7rem; margin-top: 0.4rem; }
.interest.lead h3 { font-size: clamp(1.9rem, 3vw, 2.4rem); }
.interest p { color: var(--chalk-dim); font-size: 0.98rem; line-height: 1.55; }
.interest strong { color: var(--chalk); font-weight: 600; }
.interest .fact {
  margin-top: auto; padding-top: 0.9rem; border-top: 1px dashed var(--grain);
  font-family: var(--label); text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.92rem;
}
.interest .fact b { color: var(--chalk); font-weight: 600; }

.interest.lead { background: var(--chalk); border-color: var(--chalk); }
.interest.lead h3, .interest.lead .fact b { color: var(--floor); }
.interest.lead p { color: var(--floor-2); }
.interest.lead .fact { color: var(--floor-2); border-top-color: rgba(128, 122, 140, 0.5); }
.interest.lead a { color: var(--floor); }

/* ---------- the letter ---------- */
.letter { background: var(--floor-2); }
.letter-grid { display: grid; gap: 2.4rem; align-items: start; }
@media (min-width: 900px) { .letter-grid { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }
.letter h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); max-width: none; }
.letter h2 em { color: var(--tape-now); font-variation-settings: "SOFT" 100, "WONK" 1; }
.letter-list { list-style: none; margin-top: 1.6rem; }
.letter-list li { position: relative; padding: 0.7rem 0 0.7rem 1.6rem; border-bottom: 1px solid var(--grain); color: var(--chalk-dim); }
.letter-list li::before {
  content: ""; position: absolute; left: 0; top: 1.15rem; width: 0.85rem; height: 0.4rem;
  background: var(--tape-now); transform: rotate(-8deg);
}

/* ---------- signup ---------- */
.signup { border: 1px solid var(--grain); background: var(--floor); padding: 1.8rem 1.4rem 1.5rem; border-radius: 0.2rem; }
.signup form { display: flex; flex-direction: column; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-family: var(--label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.92rem; color: var(--chalk-dim); }
.field .opt { text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 0.85rem; }
.field input {
  font: inherit; color: var(--chalk); background: var(--floor-2);
  border: 1px solid var(--grain); border-bottom: 2px solid var(--chalk-dim);
  border-radius: 0.15rem; padding: 0.72rem 0.8rem; width: 100%;
}
.field input::placeholder { color: var(--chalk-dim); opacity: 0.7; }
.field input:focus { outline: 2px solid var(--tape); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup button { align-self: flex-start; border: 0; cursor: pointer; font-family: var(--label); }
.signup button[disabled] { opacity: 0.6; cursor: progress; }
.form-msg { font-size: 0.95rem; color: var(--chalk-dim); }
.form-msg[data-kind="err"] { color: var(--tape-now); }
.signup-done { display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-start; }
.signup-done h3 { font-size: 1.6rem; }
.signup-done p { color: var(--chalk-dim); }