/* ============================================================
   The landing is a yearbook page, not a product page.

   Everything behind it is a dark console, and the first version
   of this looked like one. A yearbook is a printed object: warm
   paper, a serif set with room around it, photographs taped down
   at careless angles, somebody's handwriting in the margin, gold
   foil on the cover.

   So this is paper. The one dark band in the middle is the book
   itself, and it earns the contrast by being the only one.
   ============================================================ */

.land {
  --paper:     #f6f1e4;
  --paper-2:   #efe8d6;
  --paper-3:   #e5dcc6;
  --ink:       #1b1a17;
  --ink-soft:  #57524a;
  --ink-faint: #6f6a60;   /* dark enough for the fine print to pass AA */
  --foil:      #a9832f;
  --foil-lit:  #d8ae57;
  --rose:      #9c4a4a;
  --night:     #16141b;

  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --hand: "Segoe Script", "Bradley Hand", "Snell Roundhand", "Apple Chancery", cursive;
  --plain: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* The page is its own scroll container, so the #waitlist anchor scrolls this
     rather than the document — and the scroll behaviour has to be set here. */
  position: fixed; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  scroll-behavior: smooth;
  color: var(--ink); font-family: var(--plain);
  background:
    /* the tooth of the paper */
    repeating-linear-gradient(103deg, rgba(0,0,0,.013) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(11deg,  rgba(0,0,0,.010) 0 3px, transparent 3px 7px),
    radial-gradient(120% 80% at 50% -10%, #fffdf6, var(--paper) 55%, var(--paper-2));
}

/* ---- the running head ---- */
.land-bar {
  display: flex; align-items: baseline; gap: .9rem;
  max-width: 70rem; margin: 0 auto; padding: 1.5rem 1.4rem .9rem;
  border-bottom: 1px solid rgba(27,26,23,.14);
}
.land-bar .mark {
  font-family: var(--display); font-size: 1.02rem; margin-right: auto;
  letter-spacing: .01em;
}
.land-bar .mark em { font-style: italic; color: var(--foil); }
.land-bar .folio {
  font-family: var(--display); font-size: .8rem; color: var(--ink-faint);
  letter-spacing: .3em; text-transform: uppercase;
}
.land-ghost {
  background: none; border: 1px solid rgba(27,26,23,.26); color: var(--ink);
  border-radius: 999px; padding: .4rem 1rem; font: 500 .85rem var(--plain);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.land-ghost:hover { background: rgba(27,26,23,.05); border-color: var(--ink); }

/* ---- hero ---- */
.land-hero {
  max-width: 70rem; margin: 0 auto; padding: 3.4rem 1.4rem 4.5rem;
  display: grid; gap: 3rem; align-items: center;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
}
.land-eyebrow {
  font: 600 .7rem var(--plain); letter-spacing: .26em; text-transform: uppercase;
  color: var(--foil); display: flex; align-items: center; gap: .8rem;
}
.land-eyebrow::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, rgba(169,131,47,.6), transparent); }

.land-hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.7rem, 7vw, 4.8rem); line-height: .98;
  letter-spacing: -.025em; margin: 1.2rem 0 0;
}
.land-hero h1 .hand {
  display: block; font-family: var(--hand); font-style: italic;
  color: var(--foil); font-size: 1.06em; line-height: 1.1;
  transform: rotate(-2deg); transform-origin: left center; margin-top: .1em;
}
.land-lead {
  color: var(--ink-soft); font-size: clamp(1rem, 1.35vw, 1.1rem);
  line-height: 1.68; max-width: 31rem; margin: 1.3rem 0 0;
}
.land-cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 2rem; }
.land-btn {
  display: inline-block; text-decoration: none; cursor: pointer; border: 0;
  border-radius: 999px; padding: .85rem 1.8rem; font: 600 .98rem var(--plain);
  transition: transform .12s, box-shadow .2s, background .2s, color .2s;
}
.land-btn.ink { background: var(--ink); color: var(--paper); box-shadow: 0 10px 24px -14px rgba(0,0,0,.9); }
.land-btn.ink:hover { transform: translateY(-1px); background: #000; }
.land-btn.quiet { background: transparent; color: var(--ink); border: 1px solid rgba(27,26,23,.3); }
.land-btn.quiet:hover { background: rgba(27,26,23,.05); border-color: var(--ink); }
.land-fine { color: var(--ink-faint); font-size: .84rem; margin: 1.1rem 0 0; }

/* ---- the taped-down photographs ---- */
.land-pile { position: relative; min-height: 29rem; justify-self: center; width: min(26rem, 88vw); }
.snap {
  position: absolute; background: #fffdf7; padding: .6rem .6rem 2.4rem;
  border-radius: 2px; box-shadow: 0 .8rem 2rem -.6rem rgba(40,30,15,.38);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.snap .img { display: block; border-radius: 1px; background-size: cover; }
.snap .cap {
  position: absolute; left: 0; right: 0; bottom: .6rem; text-align: center;
  font-family: var(--hand); font-size: .9rem; color: #4a453c;
}
.snap::before {                       /* a strip of tape */
  content: ""; position: absolute; top: -.7rem; left: 50%; translate: -50% 0;
  width: 3.6rem; height: 1.3rem; background: rgba(226,214,180,.72);
  box-shadow: 0 1px 2px rgba(0,0,0,.14); rotate: -3deg;
}
.land-pile:hover .snap { box-shadow: 0 1.1rem 2.4rem -.6rem rgba(40,30,15,.45); }

/* Spread so every caption stays readable — a stack that hides its own
   captions is just clutter. */
.snap.a { width: 10.5rem; left: 0;      top: 0;       rotate: -7deg;  z-index: 2; }
.snap.b { width: 10rem;   right: 0;     top: 2.4rem;  rotate: 5.5deg; z-index: 1; }
.snap.c { width: 11rem;   left: 5.5rem; bottom: 0;    rotate: 2deg;   z-index: 3; }
.land-pile:hover .snap.a { transform: rotate(-3deg) translateY(-4px); }
.land-pile:hover .snap.b { transform: rotate(8deg) translateY(-4px); }
.land-pile:hover .snap.c { transform: rotate(0deg) translateY(-6px); }

/* The book's own artwork, not photographs -- see assets/README.md for why the
   frames are not filled with real students. Generated once by scene() in
   js/seed.js and saved, because the landing page does not load the book's
   JavaScript. The gradient stays underneath as the fallback: if the SVG is
   slow or blocked the frame is still a coloured photograph, never a hole. */
.snap.a .img { height: 9rem;   background-color: #e8a87c;
  background-image: url(../../assets/snap-last-day.svg), linear-gradient(150deg,#f3c9a0,#c98b6b); }
.snap.b .img { height: 8rem;   background-color: #2c5340;
  background-image: url(../../assets/snap-civils.svg), linear-gradient(160deg,#3d7a5a,#1e3c2c); }
.snap.c .img { height: 9.5rem; background-color: #b5a68c;
  background-image: url(../../assets/snap-sports-day.svg), linear-gradient(140deg,#ded6c4,#8d8068); }

/* a scrawl across the pile, like somebody signed the page */
/* A margin note in somebody's hand. Where a script face exists it uses one;
   where it does not, a slanted serif still reads as handwriting rather than
   as a badly drawn squiggle. */
.land-sign, .land-end .scrawl, .land-price .scrawl {
  font-family: var(--hand); font-style: italic; color: var(--rose);
  font-size: 1.35rem; letter-spacing: .01em;
}
.land-sign {
  position: absolute; right: -.6rem; bottom: -2.4rem; z-index: 5;
  rotate: -6deg; pointer-events: none;
}
.land-sign::after {                    /* the underline of a quick signature */
  content: ""; position: absolute; left: .2rem; right: 1.6rem; bottom: -.35rem;
  height: 1px; background: currentColor; opacity: .5;
}
.land-end .scrawl { display: block; width: fit-content; margin: 2rem auto .2rem; rotate: -1.5deg; }

/* ---- the contents page ---- */
.land-steps-wrap { border-top: 1px solid rgba(27,26,23,.14); border-bottom: 1px solid rgba(27,26,23,.14); }
.land-steps-in { max-width: 70rem; margin: 0 auto; padding: 3.6rem 1.4rem; }
.land-steps-in h2 {
  font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  margin: 0 0 .3rem; letter-spacing: -.015em;
}
.land-steps-in .sub { color: var(--ink-soft); margin: 0 0 2.6rem; max-width: 34rem; }
.steps { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.step-n {
  font-family: var(--display); font-size: 2.6rem; color: var(--foil); line-height: 1;
  border-bottom: 1px solid rgba(27,26,23,.16); padding-bottom: .6rem;
}
.step h3 { font-family: var(--display); font-weight: 600; font-size: 1.16rem; margin: .9rem 0 .4rem; }
.step p { margin: 0; color: var(--ink-soft); line-height: 1.62; font-size: .95rem; }
.step em { font-style: italic; color: var(--ink); }

/* ---- the one dark band: the book itself ---- */
.land-book-band {
  background:
    radial-gradient(90% 120% at 78% 30%, rgba(216,174,87,.16), transparent 62%),
    linear-gradient(180deg, #1a1820, var(--night));
  color: #ece6d8;
}
.land-book-in {
  max-width: 70rem; margin: 0 auto; padding: 4.5rem 1.4rem;
  display: grid; gap: 3rem; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.land-book-in h2 {
  font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  margin: .8rem 0 .6rem; letter-spacing: -.015em;
}
.land-book-in p { color: #a7a094; line-height: 1.68; margin: 0; max-width: 28rem; }
.land-book-in .land-eyebrow { color: var(--foil-lit); }
.land-book-in .land-eyebrow::after { background: linear-gradient(90deg, rgba(216,174,87,.55), transparent); }

.land-cover-wrap { justify-self: center; perspective: 1500px; }
.cover {
  width: min(18rem, 66vw); aspect-ratio: 3 / 4; border-radius: .35rem .8rem .8rem .35rem;
  background:
    linear-gradient(105deg, rgba(255,255,255,.08), transparent 42%),
    linear-gradient(160deg, #47232c, #2d141b 62%, #200e14);
  box-shadow: 0 2.2rem 4rem -1rem rgba(0,0,0,.85), 0 0 0 1px rgba(216,174,87,.18) inset;
  transform: rotateY(-16deg) rotateX(5deg) rotateZ(-1.5deg);
  display: grid; place-items: center; text-align: center; padding: 2rem 1.3rem;
  position: relative; transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.land-cover-wrap:hover .cover { transform: rotateY(-7deg) rotateX(2deg); }
.cover::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .9rem;
  background: linear-gradient(90deg, rgba(0,0,0,.6), transparent); border-radius: .35rem 0 0 .35rem;
}
.cover::after {
  content: ""; position: absolute; inset: .85rem .7rem;
  border: 1px solid rgba(216,174,87,.4); border-radius: .18rem;
}
.cover .crest-ring {
  width: 3.3rem; height: 3.3rem; border-radius: 50%; border: 1.5px solid var(--foil-lit);
  display: grid; place-items: center; font-family: var(--display);
  color: var(--foil-lit); font-size: .98rem; letter-spacing: .04em;
}
.cover .school {
  font: 600 .62rem var(--plain); letter-spacing: .28em; text-transform: uppercase;
  color: rgba(216,174,87,.88); margin-top: 1.5rem;
}
.cover .title { font-family: var(--display); font-size: 1.62rem; line-height: 1.12; color: #f4efe3; margin-top: .5rem; }
.cover .year { font-family: var(--display); font-size: .92rem; color: rgba(244,239,227,.6); margin-top: .5rem; letter-spacing: .2em; }

/* ---- margin notes ---- */
.land-why { max-width: 70rem; margin: 0 auto; padding: 4.2rem 1.4rem 1rem; }
.why-grid { display: grid; gap: 1.6rem 2.2rem; grid-template-columns: 1fr; margin-top: 2.2rem; }
@media (min-width: 34rem) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .why-grid { grid-template-columns: repeat(4, 1fr); } }
.why { border-top: 2px solid var(--ink); padding-top: 1rem; }
.why .k { font-family: var(--hand); color: var(--rose); font-size: 1.05rem; }
.why h3 { font-family: var(--display); font-weight: 600; font-size: 1.08rem; margin: .3rem 0 .45rem; }
.why p { margin: 0; color: var(--ink-soft); line-height: 1.62; font-size: .93rem; }

/* ---- what it costs ---- */
.land-price { max-width: 64rem; margin: 0 auto; padding: 4.2rem 1.4rem 1rem; text-align: center; }
.land-price h2 { font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: .4rem 0 .9rem; letter-spacing: -.015em; }
.land-price .land-lead { margin: 0 auto 2rem; max-width: 34rem; }

/* ---- the price, as cards ----
   Six bands, one card each. The temptation with a card layout is to give each
   tier its own feature list, but every tier here is the SAME product — only the
   size and the rate change — so a per-card list could only be padding. What is
   actually included is said once, underneath, where it is true of all of them.

   No per-card button either: seats are chosen inside the editor's panel after a
   school is approved, so a "buy 200" button on the landing page would promise a
   flow that does not exist. */
.price-cards {
  display: grid; gap: 1rem; text-align: left; margin-top: 2.2rem;
  /* Six bands read as two rows of three. auto-fit gave 4+2, which leaves a
     hole where two cards are missing and makes the taper look incomplete. */
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 56rem) { .price-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .price-cards { grid-template-columns: 1fr; } }
.pcard {
  display: flex; flex-direction: column; gap: .45rem;
  padding: 1.15rem 1.2rem 1.25rem; border-radius: 14px;
  background: rgba(255,253,246,.74);
  border: 1px solid rgba(27,26,23,.14);
  box-shadow: 0 .6rem 1.7rem -1.1rem rgba(40,30,15,.5);
  transition: transform .16s, box-shadow .16s;
}
.pcard:hover { transform: translateY(-3px); box-shadow: 0 1rem 2.2rem -1rem rgba(40,30,15,.55); }
.pcard .pc-note { font-family: var(--hand); color: var(--rose); font-size: .98rem; }
.pcard .pc-seats {
  font-family: var(--display); font-size: 2.1rem; line-height: 1.05;
  letter-spacing: -.02em; color: var(--ink);
}
.pcard .pc-seats span {
  font-family: var(--plain); font-size: .78rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-faint); margin-left: .35rem;
}
/* The per-person rate is the card's last line, so it takes the rule and the
   bottom edge that the class total used to have. */
.pcard .pc-each {
  margin-top: auto; padding-top: .7rem; color: var(--ink-soft); font-size: .95rem;
  border-top: 1px solid rgba(27,26,23,.14);
}
.pcard .pc-each strong {
  font-family: var(--display); font-weight: 400; font-size: 1.5rem;
  color: var(--foil); margin-right: .15rem;
}

/* The best rate is the one dark card, the same trick the book band uses: it
   earns the contrast by being the only one. */
.pcard.best {
  background: var(--night); border-color: rgba(216,174,87,.38);
  box-shadow: 0 .9rem 2.2rem -1rem rgba(0,0,0,.6);
}
.pcard.best .pc-seats { color: #ece6d8; }
.pcard.best .pc-each { color: #a7a094; border-top-color: rgba(236,230,216,.2); }
.pcard.best .pc-each strong { color: var(--foil-lit); }
.pcard.best .pc-note { color: var(--foil-lit); }

/* True, and the single most useful thing on this section: 300 seats cost what
   250 cost, so a year near that mark should take the 300. */
.pcard .pc-flag {
  align-self: flex-start; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px;
  background: rgba(216,174,87,.16); color: var(--foil-lit);
  border: 1px solid rgba(216,174,87,.34);
}

/* What every one of them includes, said once. */
.price-all {
  margin: 1.8rem auto 0; max-width: 40rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(27,26,23,.14);
  display: grid; gap: .5rem .9rem; text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.price-all li { list-style: none; color: var(--ink-soft); font-size: .92rem; }
.price-all li::before { content: "✓"; color: var(--foil); margin-right: .5rem; }

@media (max-width: 30rem) {
  .price-cards { gap: .8rem; }
  .pcard { padding: 1rem 1rem 1.1rem; }
}

/* ---- the waitlist ----
   A form on a yearbook page should look like something clipped into it, not
   like a web form dropped on top: the boxes are ruled lines to write on, and
   the card is a leaf of slightly whiter paper with a shadow under it. */
.land-wait { border-top: 1px solid rgba(27,26,23,.14); margin-top: 3.4rem; }
.land-wait-in { max-width: 46rem; margin: 0 auto; padding: 4.2rem 1.4rem 1rem; }
.land-wait h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: .9rem 0 .8rem; letter-spacing: -.015em;
}
.land-wait .land-lead { margin: 0 0 2.2rem; max-width: 36rem; }

.wait-card {
  background: linear-gradient(180deg, rgba(255,253,246,.9), rgba(255,253,246,.62));
  border: 1px solid rgba(27,26,23,.15); border-radius: .25rem;
  box-shadow: 0 .9rem 2.2rem -.9rem rgba(40,30,15,.34);
  padding: 2rem 1.7rem 1.7rem;
}
.wait-grid { display: grid; gap: 1.5rem 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .wait-grid { grid-template-columns: 1fr 1fr; } }
.wait-wide { grid-column: 1 / -1; }

.wait-f { display: block; }
.wait-f > span {
  display: block; margin-bottom: .45rem;
  font: 600 .68rem var(--plain); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint);
}
.wait-f input {
  width: 100%; box-sizing: border-box; background: transparent;
  border: 0; border-bottom: 1px solid rgba(27,26,23,.32); border-radius: 0;
  padding: .45rem .15rem; color: var(--ink);
  font: 400 1.05rem var(--display);
  transition: border-color .15s;
}
.wait-f input::placeholder { font: 400 .92rem var(--plain); color: rgba(111,106,96,.62); }
.wait-f input:hover { border-bottom-color: rgba(27,26,23,.5); }
.wait-f input:focus { border-bottom-color: var(--foil); }
/* The ruled line alone is too quiet to be the only focus signal. */
.wait-f input:focus-visible { outline: 2px solid var(--foil); outline-offset: 3px; }
.wait-f input:disabled { color: var(--ink-faint); }

/* Not for people: off the page, out of the accessibility tree, never focused. */
.wait-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wait-err {
  margin-top: 1.6rem; padding: .7rem .9rem; border-radius: .2rem;
  background: rgba(156,74,74,.08); border: 1px solid rgba(156,74,74,.3);
  color: #7d3636; font-size: .92rem;
}
.wait-go { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.9rem; }
.wait-go .land-fine { margin: 0; flex: 1 1 16rem; }
.wait-go .land-btn.ink:disabled { opacity: .62; cursor: default; transform: none; }

.wait-done .scrawl {
  font-family: var(--hand); font-style: italic; color: var(--rose);
  font-size: 1.35rem; display: block; width: fit-content; rotate: -1.5deg;
  margin-bottom: .6rem;
}
.wait-done h3 { font-family: var(--display); font-weight: 400; font-size: 1.45rem; margin: 0 0 .6rem; }
.wait-done p { color: var(--ink-soft); line-height: 1.66; margin: 0 0 .8rem; }
.wait-done .land-fine { margin: 0; }
.wait-done a, .land-hero .land-fine a { color: var(--foil); }

@media (max-width: 58rem) {
  .wait-go .land-btn { flex: 1 1 100%; text-align: center; }
}

/* ---- the last page ---- */
.land-end { max-width: 70rem; margin: 0 auto; padding: 4.2rem 1.4rem 5rem; text-align: center; }
.land-end h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin: 0 0 1.4rem; letter-spacing: -.015em; }
.land-end .rule { width: 5rem; height: 1px; background: rgba(27,26,23,.25); margin: 1.6rem auto; }
.land-foot-note { color: var(--ink-faint); font-size: .85rem; }
.land-foot-note a { color: var(--foil); }

@media (max-width: 58rem) {
  .land-hero, .land-book-in { grid-template-columns: 1fr; gap: 2.6rem; }
  .land-pile { order: -1; min-height: 22rem; }
  .land-cta .land-btn { flex: 1 1 100%; text-align: center; }
}
@media (max-width: 40rem) {
  .land-eyebrow { display: block; }
  .land-eyebrow::after { content: none; }
  .land-bar .folio { display: none; }
}

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