/* DreamLand / Phil Crosby Author
   Palette pulled directly off the book's own cover art: dusty gold wordmark,
   sepia sky, moss-green landscape, near-black silhouettes.
   Grit comes from lighting, contrast and type. No grunge textures. */

@font-face { font-family: 'Cinzel'; font-weight: 400; font-display: swap; src: url('fonts/Cinzel-400.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-weight: 700; font-display: swap; src: url('fonts/Cinzel-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('fonts/Inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('fonts/Inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('fonts/Inter-700.woff2') format('woff2'); }

:root {
  --black: #0B0A09;
  --char: #15130F;
  --panel: #1C1913;
  --gold: #D9A83C;
  --gold-dim: #A8802B;
  --sepia: #C08A34;
  --moss: #6B7355;
  --rust: #9A3E2A;
  --bone: #EDE6D6;
  --muted: #9C9585;
  --hair: rgba(217,168,60,0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--bone);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* height:auto is load-bearing. Every img carries width/height attributes for
   layout stability, and with max-width alone the width shrinks while the
   attribute height stays, stretching the image vertically. It made the hero
   cover render at roughly a 2:1 ratio instead of its real 4:5. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--bone); }

.wrap { width: min(1120px, 92vw); margin: 0 auto; }
.narrow { width: min(760px, 92vw); margin: 0 auto; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,10,9,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hair);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 20px; }
.brand { font-family: 'Cinzel', serif; font-weight: 700; font-size: 19px; letter-spacing: 0.16em; color: var(--gold); text-transform: uppercase; }
.brand small { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 10px; letter-spacing: 0.28em; color: var(--muted); margin-top: 2px; }
.nav ul { list-style: none; display: flex; gap: 26px; align-items: center; }
.nav ul a { font-size: 14px; letter-spacing: 0.06em; color: var(--bone); }
.nav ul a:hover, .nav ul a.on { color: var(--gold); }
.nav-cta { border: 1px solid var(--gold); padding: 8px 16px; border-radius: 2px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.nav-cta:hover { background: var(--gold); color: var(--black) !important; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--hair); }
/* Framed on the lower two thirds of the cover (the town and the ferris wheel).
   Framing it higher put the cover's own DREAMLAND wordmark directly behind the
   headline, and the two fought each other. A slight blur keeps it as
   atmosphere rather than competing content. */
.hero-bg {
  position: absolute; inset: 0;
  /* A dedicated 1120x576 plate cropped out of the cover art, not the cover
     itself. Two attempts at solving this with background-position failed:
     the cover is tall and narrow, and at any middle percentage its own
     DREAMLAND wordmark and title block bled through directly behind the
     headline. Cropping the text out of the file removes the problem instead
     of trying to frame around it. */
  background-image: url('img/hero-park.jpg');
  background-size: cover;
  background-position: 50% 58%;
  background-repeat: no-repeat;
  opacity: 0.32; filter: saturate(0.85) blur(3px); transform: scale(1.04);
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,10,9,0.94) 0%, rgba(11,10,9,0.70) 46%, rgba(11,10,9,0.30) 100%),
    linear-gradient(180deg, rgba(11,10,9,0.60) 0%, rgba(11,10,9,0.55) 55%, var(--black) 100%);
}
.hero-inner { position: relative; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: center; padding: 72px 0 68px; }
/* Capped on purpose. Uncapped, the tall cover drove the hero past 770px and
   pushed the headline under the fold with a slab of empty space above it. */
.hero-cover { max-width: 360px; margin-left: auto; }
.kicker { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-dim); font-weight: 600; }
h1.tagline {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: clamp(40px, 6.4vw, 74px); line-height: 1.02;
  letter-spacing: 0.01em; margin: 18px 0 0; color: var(--bone);
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
}
h1.tagline em { font-style: normal; color: var(--gold); }
.hero p.lede { margin-top: 22px; font-size: 19px; color: #D8D0BE; max-width: 30em; }
.hero-cover { position: relative; }
.hero-cover img { border-radius: 3px; box-shadow: 0 30px 70px rgba(0,0,0,0.7), 0 0 0 1px rgba(217,168,60,0.25); }
.stars { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 14px; color: var(--muted); }
.stars b { color: var(--gold); font-size: 16px; letter-spacing: 0.08em; }

.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  display: inline-block; padding: 14px 26px; border-radius: 2px;
  font-weight: 600; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--gold); transition: all .18s ease;
}
.btn-primary { background: var(--gold); color: var(--black); }
.btn-primary:hover { background: var(--bone); border-color: var(--bone); color: var(--black); }
.btn-ghost { color: var(--gold); }
.btn-ghost:hover { background: rgba(217,168,60,0.12); color: var(--gold); }

/* ---------- sections ---------- */
section { padding: 84px 0; }
section.tight { padding: 60px 0; }
.band { background: var(--char); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.band-deep { background: linear-gradient(180deg, #12100C 0%, #0B0A09 100%); border-top: 1px solid var(--hair); }
h2 {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: clamp(27px, 3.6vw, 40px); line-height: 1.15; color: var(--bone);
}
h2 em { font-style: normal; color: var(--gold); }
h3 { font-family: 'Cinzel', serif; font-weight: 700; font-size: 21px; color: var(--gold); letter-spacing: 0.02em; }
.eyebrow { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-dim); font-weight: 600; margin-bottom: 14px; }
.lead { font-size: 20px; color: #D8D0BE; }
p + p { margin-top: 16px; }
.muted { color: var(--muted); }
strong { color: var(--bone); font-weight: 600; }

/* ---------- the "not your genre" band ---------- */
.pull {
  border-left: 3px solid var(--gold);
  padding: 6px 0 6px 26px;
  font-family: 'Cinzel', serif; font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.34; color: var(--bone);
}
.pull cite { display: block; font-family: 'Inter', sans-serif; font-style: normal; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 16px; }

/* ---------- review grid ---------- */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; margin-top: 40px; }
.review { background: var(--panel); border: 1px solid var(--hair); border-radius: 4px; padding: 24px; }
.review .rstars { color: var(--gold); letter-spacing: 3px; font-size: 13px; }
.review h4 { font-family: 'Cinzel', serif; font-size: 17px; color: var(--bone); margin: 10px 0 10px; font-weight: 700; }
.review p { font-size: 15.5px; color: #CDC5B4; line-height: 1.6; }
.review cite { display: block; font-style: normal; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 16px; }

/* ---------- world / lands ---------- */
.lands { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 38px; }
.land { background: var(--panel); border: 1px solid var(--hair); border-radius: 4px; padding: 26px; position: relative; }
.land .num { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.28em; color: var(--gold-dim); }
.land h3 { margin: 8px 0 10px; }
.land p { font-size: 15.5px; color: #C6BEAD; }
.land.unknown { border-style: dashed; opacity: 0.72; }
.land.unknown h3 { color: var(--muted); }

/* ---------- signup ---------- */
.signup { background: linear-gradient(180deg, #171310 0%, #0E0C0A 100%); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.signup-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
form.subscribe { margin-top: 26px; }
.field { display: flex; gap: 10px; flex-wrap: wrap; }
.field input[type=email], .field input[type=text] {
  flex: 1 1 260px; padding: 15px 16px; font-size: 16px; font-family: inherit;
  background: #0A0908; color: var(--bone);
  border: 1px solid rgba(217,168,60,0.32); border-radius: 2px;
}
.field input::placeholder { color: #6E6759; }
.field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,168,60,0.14); }
form.subscribe button { cursor: pointer; font-family: inherit; }
.formnote { font-size: 13px; color: var(--muted); margin-top: 14px; }
.formmsg { margin-top: 14px; font-size: 15px; min-height: 1.2em; }
.formmsg.err { color: #E08B72; }
.formmsg.ok { color: var(--gold); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- formats / buy ---------- */
.formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 34px; }
.fmt { background: var(--panel); border: 1px solid var(--hair); border-radius: 4px; padding: 22px; text-align: center; }
.fmt .n { font-family: 'Cinzel', serif; font-size: 18px; color: var(--gold); }
.fmt .d { font-size: 14px; color: var(--muted); margin-top: 6px; }

/* ---------- split blocks ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.rev > *:first-child { order: 2; }
.split img { border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); }
.figcap { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* ---------- facts ---------- */
.facts { list-style: none; margin-top: 26px; border-top: 1px solid var(--hair); }
.facts li { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.facts li span:first-child { color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-size: 12.5px; }

/* ---------- socials ---------- */
.socials { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.socials a {
  border: 1px solid var(--hair); border-radius: 2px; padding: 10px 18px;
  font-size: 13.5px; letter-spacing: 0.08em; color: var(--bone);
}
.socials a:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- footer ---------- */
footer { padding: 54px 0 40px; border-top: 1px solid var(--hair); background: #070706; }
footer .cols { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
footer .fine { margin-top: 34px; font-size: 13px; color: #6E6759; }
footer a { color: #C8C0AF; font-size: 14px; }
footer a:hover { color: var(--gold); }
footer ul { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
footer h5 { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); font-weight: 700; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-inner, .split, .signup-inner { grid-template-columns: 1fr; gap: 36px; }
  .split.rev > *:first-child { order: 0; }
  .hero-cover { max-width: 320px; }
  .nav ul { display: none; }
  section { padding: 60px 0; }
  body { font-size: 16px; }
}