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

  position: fixed; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  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 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; }
}