/* y-it landing. Canon v4: 13 System B tokens, five faces. Spring (blue/sage) for chapters 1-2,
   warning red for the locked chapter, volt only in the wordmark, slate for the full-bleed band. */
:root {
  --cream: #F5F2EC; --neutral: #E5E0D8; --charcoal: #3A3A3A; --slate: #1E2B38;
  --blue: #5D7BEA; --red: #E35050; --sage: #7CB8B8; --volt: #D9E021; --graybl: #7A8390; --gray: #C5C5C5;
  --series: #C0392B;
  --display: "Big Shoulders Display", Impact, sans-serif;
  --body: "Work Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --label: "Outfit", "Work Sans", sans-serif;
  --quote: "Lora", Georgia, serif;
}
* { box-sizing: border-box; }
html { background: var(--cream); overflow-x: clip; }
body { margin: 0; background: var(--cream); color: var(--charcoal); font-family: var(--body); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.series { background: var(--series); color: var(--cream); font: 700 12px var(--mono); letter-spacing: .18em; text-transform: uppercase; text-align: center; padding: 10px 16px; }
.top { display: flex; justify-content: center; padding: 28px 16px 0; }
.wordmark { text-decoration: none; display: inline-flex; align-items: baseline; background: var(--neutral); padding: 10px 18px; border-radius: 4px; }
.wm-dom { font: 600 22px var(--body); color: var(--charcoal); }
.wm-y { font: 900 38px/1 var(--display); color: var(--volt); text-shadow: 0 1px 0 rgba(0,0,0,.28); margin: 0 2px; }

main { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* hero: spring, the pitch phase */
.hero { max-width: 760px; margin: 0 auto; padding: 56px 0 64px; text-align: center; }
.status { font: 700 13px var(--label); color: var(--blue); margin: 0 0 18px; }
.status .dot { display: inline-block; width: 5px; height: 5px; background: var(--blue); border-radius: 50%; vertical-align: middle; margin: 0 8px; }
.headline { font: 900 clamp(48px, 9vw, 96px)/.92 var(--display); text-transform: uppercase; color: var(--slate); margin: 0 0 24px; letter-spacing: .005em; text-wrap: balance; }
.body { font-size: 20px; max-width: 58ch; margin: 0 auto 32px; }

.signup { display: flex; gap: 10px; max-width: 560px; margin: 0 auto; }
.signup input[type="email"] { flex: 1; min-width: 0; font: 400 18px var(--body); padding: 16px 18px; border: 2px solid var(--slate); background: #fff; color: var(--charcoal); border-radius: 4px; }
.signup button { font: 900 20px var(--display); text-transform: uppercase; letter-spacing: .03em; padding: 0 24px; border: 2px solid var(--slate);
  background: var(--slate); color: var(--cream); border-radius: 4px; cursor: pointer; white-space: nowrap; }
.signup button:hover { background: var(--blue); border-color: var(--blue); }
.signup button[disabled] { opacity: .6; cursor: default; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.form-msg { min-height: 1.5em; margin: 12px 0 0; font-weight: 700; }
.form-msg.ok { color: #2f7d3a; }
.form-msg.err { color: var(--red); }
.aside { font: italic 400 17px var(--quote); color: var(--graybl); margin: 8px auto 0; max-width: 52ch; }
.consent { font-size: 13px; color: var(--graybl); margin: 18px auto 0; max-width: 56ch; }

/* chapters */
.section-title { font: 900 clamp(32px, 5vw, 52px)/1 var(--display); text-transform: uppercase; color: var(--slate); text-align: center; margin: 0 0 32px; }
.chapters { padding: 56px 0; border-top: 2px solid var(--neutral); }
.ch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ch { position: relative; background: #fff; padding: 26px 24px 64px; border-top: 6px solid var(--blue); }
.ch.free:nth-child(2) { border-top-color: var(--sage); }
.ch.locked { background: var(--slate); color: var(--neutral); border-top-color: var(--red); }
.ch .ch-num { font: 900 76px/.8 var(--display); color: var(--blue); margin: 0 0 10px; }
.ch.free:nth-child(2) .ch-num { color: var(--sage); }
.ch.locked .ch-num { color: var(--red); }
.ch h3 { font: 900 30px/1 var(--display); text-transform: uppercase; margin: 0 0 6px; color: var(--slate); }
.ch.locked h3 { color: var(--cream); }
.ch .ch-kind { font: 700 13px var(--label); color: var(--graybl); margin: 0 0 12px; }
.ch.locked .ch-kind { color: var(--gray); }
.ch p { margin: 0 0 10px; font-size: 16px; }
.tag { position: absolute; left: 24px; bottom: 22px; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; padding: 5px 10px; border: 2px solid var(--blue); color: var(--blue); }
.ch.free:nth-child(2) .tag { border-color: var(--sage); color: #4f8f8f; }
.ch.locked .tag { border-color: var(--red); color: var(--red); }

/* the shout: full-bleed slate, the tagline system */
.shout { background: var(--slate); padding: 64px 16px; text-align: center; }

/* topic picker */
.topic-pick { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 10px 8px 14px; background: #fff; border: 2px solid var(--neutral); border-radius: 4px; }
.topic-pick label { font: 700 13px var(--label); color: var(--graybl); }
.topic-pick select { font: 700 15px var(--body); color: var(--slate); border: 0; background: transparent; padding: 4px; cursor: pointer; max-width: 60vw; }

/* pre-order */
.preorder { margin: 36px auto 0; max-width: 560px; padding: 22px 24px; border: 2px dashed var(--slate); text-align: center; background: #fff; }
.po-kicker { font: 700 13px var(--label); color: var(--graybl); margin: 0 0 6px; }
.po-line { margin: 0 0 14px; font-size: 18px; }
.po-price { font: 900 30px var(--display); color: var(--slate); }
.preorder s { color: var(--graybl); margin-left: 4px; }
.po-btn { display: inline-block; font: 900 20px var(--display); text-transform: uppercase; letter-spacing: .03em; text-decoration: none;
  padding: 12px 22px; background: var(--blue); color: #fff; border-radius: 4px; }
.po-btn[aria-disabled="true"] { background: var(--gray); color: var(--charcoal); cursor: default; pointer-events: none; }
.po-fine { font-size: 13px; color: var(--graybl); margin: 12px 0 0; }
.shout-line { font: 900 clamp(30px, 5.4vw, 56px)/1.08 var(--display); text-transform: uppercase; color: var(--cream); margin: 0; letter-spacing: .01em; }
.shout-line b { color: var(--red); }

.why { max-width: 680px; margin: 0 auto; padding: 64px 0 40px; }
.why p { margin: 0 0 18px; }
.pull { font: italic 400 22px/1.4 var(--quote); color: var(--slate); border-left: 4px solid var(--blue); padding-left: 18px; }

.foot { text-align: center; padding: 32px 16px 48px; font-size: 14px; color: var(--graybl); border-top: 2px solid var(--neutral); }
.foot .fine { font-size: 12px; }
#vtag { font-family: var(--mono); }

@media (max-width: 760px) {
  .ch-grid { grid-template-columns: 1fr; }
  .signup { flex-direction: column; }
  .signup button { padding: 16px; }
  .hero { padding-top: 40px; }
}