/* The Green Book Caravan, front page. Ground: the 1948 cover's green panel. Type: one slab, like the hotel ads of the period. */
:root {
  --green: #4f8c45;   /* the cover panel, sampled */
  --deep: #1f3d22;    /* the same green, inked down */
  --paper: #e9e1cc;   /* the page, sampled */
  --ink: #1b1a16;
  --mark: rgba(255, 214, 92, .38);
  --slab: "Rokkitt", "Rockwell", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--green); color: var(--ink); font: 400 20px/1.5 var(--slab); }
img { display: block; max-width: 100%; }
a, button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }

.stage {
  min-height: 100vh; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 440px);
  gap: clamp(32px, 6vw, 96px); align-items: center; justify-content: center; padding: 48px 24px;
}

/* the book: the index page lies under the cover; the cover swings back on its spine */
.book { position: relative; aspect-ratio: 1141 / 1599; width: 100%; perspective: 2400px; }
.page, .cover { position: absolute; inset: 0; }
.page { background: var(--paper); box-shadow: 14px 14px 0 var(--deep); }
.page img, .cover img { width: 100%; height: 100%; object-fit: cover; }
.cover {
  border: 0; padding: 0; cursor: pointer; background: var(--paper); transform-origin: left center;
  transition: transform 1.3s cubic-bezier(.45, .05, .25, 1), box-shadow 1.3s; box-shadow: 14px 14px 0 var(--deep); z-index: 2;
  backface-visibility: hidden;
}
.book.open .cover { transform: rotateY(-168deg); box-shadow: 0 0 0 transparent; pointer-events: none; }

/* the three marked lines on the index: a highlighter, not an underline */
.hot { position: absolute; left: 9.6%; width: 41.5%; top: var(--y); height: 2.2%; background: var(--mark); mix-blend-mode: multiply; border-radius: 2px; }
.hot:hover, .hot.lit, .hot:focus-visible { background: rgba(255, 200, 40, .75); }

.side h1 { font: 900 clamp(48px, 7vw, 92px)/.92 var(--slab); margin: 0 0 22px; color: var(--paper); letter-spacing: -.01em; }
.side h2 { font: 900 clamp(30px, 3.6vw, 42px)/1 var(--slab); margin: 0 0 18px; color: var(--paper); }
.side p { margin: 0 0 26px; max-width: 30em; color: var(--paper); font-size: 21px; }
.go { display: inline-block; background: var(--ink); color: var(--paper); border: 0; padding: 14px 26px; font-weight: 600; font-size: 21px; text-decoration: none; cursor: pointer; }
.go:hover { background: var(--deep); }

.stops { list-style: none; margin: 0 0 26px; padding: 0; }
.stops li { margin: 0 0 12px; }
.stops a { display: block; text-decoration: none; background: var(--paper); padding: 12px 16px 13px; color: var(--ink); line-height: 1.35; border-left: 8px solid transparent; }
.stops a b { display: block; font-weight: 900; font-size: 24px; margin-bottom: 2px; }
.stops li.lit a, .stops a:hover { border-left-color: #f0c23c; }

.made { background: var(--deep); color: var(--paper); padding: 48px 24px 56px; }
.made p { max-width: 46em; margin: 0 auto 12px; font-size: 19px; }
.made .fine { font-size: 15px; opacity: .75; }

@media (max-width: 860px) {
  .stage { grid-template-columns: 1fr; gap: 32px; padding-top: 28px; }
  .book { max-width: 420px; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) { .cover { transition: none; } }