/* ============================================================
   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); }

.snap.a .img { height: 9rem;   background-image: linear-gradient(150deg,#a9c0cf,#6d8aa3); }
.snap.b .img { height: 8rem;  background-image: linear-gradient(160deg,#d8b49a,#a87053); }
.snap.c .img { height: 9.5rem; background-image: linear-gradient(140deg,#b9c7a8,#77906a); }

/* 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: 46rem; 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; }

.price-table { width: 100%; border-collapse: collapse; text-align: left;
  font-size: .95rem; color: var(--ink); }
.price-table th { font-family: var(--hand); font-weight: 400; color: var(--rose);
  font-size: 1rem; padding: 0 .6rem .5rem; border-bottom: 2px solid var(--ink); }
.price-table td { padding: .72rem .6rem; border-bottom: 1px solid rgba(27,26,23,.14);
  color: var(--ink-soft); }
.price-table tbody tr:last-child td { border-bottom: 0; }
/* the number is the thing being read, so let it carry */
.price-table td:nth-child(2) { color: var(--ink); font-weight: 600; white-space: nowrap; }
.price-table th:last-child, .price-table td:last-child { text-align: right; white-space: nowrap; }
.land-price .scrawl { display: block; width: fit-content; margin: 1.6rem auto .2rem; rotate: -1.5deg; }
.land-price .land-fine { max-width: 32rem; margin: 1rem auto 0; }

@media (max-width: 30rem) {
  .price-table { font-size: .88rem; }
  .price-table th, .price-table td { padding-left: .25rem; padding-right: .25rem; }
}

/* ---- 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; }
}