:root {
  --navy: #081a35;
  --navy-2: #10294f;
  --paper: #fffdf7;
  --red: #ef3e4a;
  --lime: #e9f45b;
  --pink: #ffb6cd;
  --yellow: #ffd84d;
  --ink: #10223d;
  --muted: #657188;
  --line: rgba(8, 26, 53, 0.17);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}
a { color: inherit; }
.skip-link { position: fixed; left: 1rem; top: -6rem; z-index: 100; background: var(--lime); color: var(--navy); padding: .75rem 1rem; font-weight: 700; }
.skip-link:focus { top: 1rem; }
.site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 90rem;
  margin: auto;
  padding: 1.6rem 4vw;
  color: white;
}
.wordmark { text-decoration: none; font: 650 clamp(1.2rem, 2vw, 1.6rem)/1 "Literata", serif; }
.wordmark span { color: var(--pink); }
nav { display: flex; gap: clamp(1rem, 3vw, 2.6rem); }
nav a { color: rgba(255,255,255,.8); text-decoration: none; font-size: .9rem; font-weight: 600; }
nav a:hover, nav a:focus-visible { color: var(--lime); }

.hero {
  min-height: 47rem;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .95fr);
  align-items: center;
  overflow: hidden;
  background: var(--navy);
  color: white;
  padding: 8rem 7vw 5rem;
}
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: .55rem; background: linear-gradient(90deg,var(--red) 0 28%,var(--pink) 28% 48%,var(--yellow) 48% 67%,var(--lime) 67%); }
.hero-copy { max-width: 45rem; position: relative; z-index: 2; }
.eyebrow { margin: 0 0 1rem; font-size: .78rem; letter-spacing: .19em; font-weight: 700; color: var(--pink); }
.eyebrow.red { color: var(--red); }
.eyebrow.lime { color: #869600; }
h1, h2, h3 { font-family: "Literata", serif; line-height: 1.04; margin: 0; }
h1 { font-size: clamp(3.1rem, 6.3vw, 6.7rem); max-width: 11ch; letter-spacing: -.045em; }
.hero-intro { max-width: 37rem; color: rgba(255,255,255,.75); font-size: clamp(1.08rem, 1.7vw, 1.35rem); margin: 1.8rem 0 2.2rem; }
.button { display: inline-flex; align-items: center; gap: 1.2rem; padding: .9rem 1.15rem; text-decoration: none; font-weight: 700; border: 2px solid transparent; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--navy); background: var(--lime); }
.button-primary:hover { background: white; }
.hero-art { position: absolute; inset: 0 0 0 45%; opacity: .96; }
.hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy) 0, rgba(8,26,53,.88) 11%, rgba(8,26,53,.16) 56%, rgba(8,26,53,.3) 100%); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; }
.margin-note { position: absolute; right: 2.3vw; bottom: 3.2rem; z-index: 3; border-left: 2px solid var(--pink); padding-left: 1rem; font-size: .78rem; line-height: 1.55; color: rgba(255,255,255,.75); }

.winston { display: grid; grid-template-columns: .28fr 1fr .8fr; gap: clamp(2rem,5vw,6rem); align-items: start; max-width: 88rem; margin: auto; padding: clamp(6rem, 12vw, 11rem) 6vw; }
.chapter-number { color: var(--pink); font: 750 clamp(5rem, 10vw, 9rem)/.8 "Literata"; }
.winston h2, .section-heading h2, .about h2 { font-size: clamp(2.6rem,5vw,5.3rem); letter-spacing: -.045em; }
.lede { font: 500 clamp(1.2rem,2vw,1.6rem)/1.55 "Literata"; }
.status-line { display: flex; align-items: center; gap: .75rem; margin-top: 2rem; color: var(--muted); font-size: .9rem; font-weight: 600; }
.status-dot { width: .75rem; height: .75rem; background: var(--yellow); border-radius: 50%; box-shadow: 0 0 0 .35rem rgba(255,216,77,.23); }
blockquote { margin: 2.2rem 0 0; padding: 2rem 0 0; border-top: 1px solid var(--line); }
blockquote p { margin: 0; font: 650 clamp(1.3rem,2.1vw,2rem)/1.35 "Literata"; color: var(--navy-2); }

.shelves { background: #f1f0e9; padding: clamp(5rem,10vw,9rem) 6vw; }
.section-heading { max-width: 82rem; margin: 0 auto 3.5rem; }
.shelf-grid { display: grid; grid-template-columns: 1fr 1fr; max-width: 82rem; margin: auto; box-shadow: 0 2rem 6rem rgba(8,26,53,.12); }
.shelf-card { min-height: 31rem; position: relative; display: flex; flex-direction: column; overflow: hidden; padding: clamp(2rem,4vw,4rem); }
.children-card { background: var(--yellow); color: var(--navy); }
.grown-card { background: var(--navy); color: white; }
.card-number { margin: 0 0 4rem; font-weight: 700; font-size: .8rem; letter-spacing: .18em; opacity: .65; }
.shelf-card h3 { font-size: clamp(2.4rem,4vw,4.2rem); max-width: 8ch; }
.shelf-card > p:not(.card-number) { max-width: 31rem; font-size: 1.1rem; }
.shelf-card a, .quiet-link { margin-top: auto; position: relative; z-index: 2; font-weight: 700; text-underline-offset: .35rem; }
.card-stripe { position: absolute; height: 1rem; inset: auto 0 0; background: linear-gradient(90deg,var(--red) 0 33%,var(--pink) 33% 66%,var(--lime) 66%); }
.red-thread { position: absolute; width: 22rem; height: 22rem; right: -7rem; bottom: -9rem; border: 3px solid var(--red); border-radius: 45% 55% 51% 49%; transform: rotate(29deg); opacity: .72; }

.about { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem,8vw,9rem); max-width: 82rem; margin: auto; padding: clamp(6rem,12vw,11rem) 6vw; }
.about-kicker { align-self: center; position: relative; border: 1px solid var(--line); padding: 2rem; }
.big-m { display: block; color: var(--red); font: 750 clamp(10rem,22vw,18rem)/.78 "Literata"; letter-spacing: -.12em; }
.about-kicker p { margin: 2rem 0 0; font-weight: 700; line-height: 1.4; }
.about-copy p:not(.eyebrow) { font: 500 clamp(1.1rem,1.8vw,1.35rem)/1.7 "Literata"; color: #3b485e; }

.closing { text-align: center; background: var(--red); color: white; padding: clamp(6rem,11vw,10rem) 6vw; }
.closing .eyebrow { color: var(--navy); }
.closing-line { font: 500 clamp(1.8rem,4vw,3.8rem)/1.25 "Literata"; margin: 2rem 0 0; }
.closing-emphasis { font: 750 italic clamp(3.7rem,8vw,8rem)/1 "Literata"; margin: .5rem 0 3rem; letter-spacing: -.05em; }
.button-light { border-color: white; }
.button-light:hover { background: white; color: var(--red); }
footer { display: flex; justify-content: space-between; gap: 1rem; padding: 2rem 5vw; background: var(--navy); color: rgba(255,255,255,.62); font-size: .82rem; }
footer p { margin: 0; }

@media (max-width: 850px) {
  .site-header { align-items: flex-start; }
  nav { display: none; }
  .hero { min-height: 46rem; grid-template-columns: 1fr; padding-top: 9rem; }
  .hero-art { inset: 42% 0 0 24%; opacity: .66; }
  .hero-art::after { background: linear-gradient(180deg,var(--navy),transparent 48%); }
  .margin-note { display: none; }
  .winston { grid-template-columns: 1fr; }
  .chapter-number { font-size: 5rem; }
  .shelf-grid, .about { grid-template-columns: 1fr; }
  .shelf-card { min-height: 28rem; }
}
@media (max-width: 520px) {
  h1 { font-size: clamp(2.8rem, 15vw, 4rem); }
  .hero { padding-inline: 1.4rem; }
  .hero-art { left: 5%; }
  .winston, .shelves, .about { padding-left: 1.4rem; padding-right: 1.4rem; }
  .shelf-card { padding: 2rem 1.5rem; }
  footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}