/* ================= West Virginia Mountain Maw Maw =================
   Tokens lifted from the design bundle, which carried them as inline
   styles. Moved into a stylesheet because inline styles cannot hold
   media queries, and the bundle had none: the hero's two columns had a
   combined minimum of 580px and overflowed every phone. */

:root{
  --paper:       #f2ece0;   /* page ground */
  --paper-alt:   #e9e1d0;   /* alternating bands */
  --forest:      #2f4032;   /* dark section, buttons, headings */
  --ink:         #241f1a;
  --ink-body:    #3b352c;
  --ink-soft:    #5d564a;
  --ink-mute:    #7d7263;
  --ink-faint:   #8b8071;
  --rule:        #d8cdb8;
  --rule-strong: #cdbfa4;
  --bark:        #6a4a2a;   /* hover, link underline */
  --wheat:       #b99a6b;
  --on-forest:      #eee6d6;
  --on-forest-mute: #a8bda6;
  --on-forest-soft: #cfe0cb;
  --button-text:    #f4efe4;

  --display: 'Cormorant Garamond', Georgia, serif;
  --body:    Vollkorn, Georgia, serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
::selection{ background:var(--forest); color:var(--paper); }
:focus-visible{ outline:2px solid var(--bark); outline-offset:3px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:50;
  background:var(--forest); color:var(--button-text);
  padding:12px 18px; font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
}
.skip-link:focus{ left:0; }

.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-mute);
}

/* ---------------- header ---------------- */
.site-header{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding:26px 7vw 22px;
  border-bottom:1px solid var(--rule);
}
.brand{
  font-family:var(--display); font-size:21px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--forest);
}
.site-nav{
  display:flex; gap:28px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
}
.site-nav a{ color:var(--ink-soft); text-decoration:none; transition:color .2s ease; }
.site-nav a:hover{ color:var(--forest); }
.site-nav .download{ color:var(--bark); border-bottom:1px solid var(--wheat); }
.site-nav .download:hover{ color:var(--forest); border-bottom-color:var(--forest); }

/* ---------------- hero ---------------- */
.hero{ position:relative; padding:8vh 7vw 0; }
.hero__grid{
  display:grid;
  grid-template-columns:minmax(320px,1.35fr) minmax(260px,.85fr);
  gap:6vw; align-items:start;
}
.hero__eyebrow{ margin-bottom:28px; letter-spacing:.18em; font-size:12px; }
.hero h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(44px,8.5vw,128px);
  line-height:.92; letter-spacing:-.02em;
  margin:0 0 6px; color:var(--ink);
}
.hero__byline{
  font-family:var(--display); font-style:italic;
  font-size:clamp(22px,2.6vw,34px);
  color:var(--forest); margin-bottom:34px;
}
.hero p{
  font-size:20px; line-height:1.62; max-width:34em;
  color:var(--ink-body); text-wrap:pretty; margin:0 0 18px;
}
.hero p:last-of-type{ margin-bottom:40px; }
.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:22px; }
.hero__note{
  font-family:var(--mono); font-size:12px;
  color:var(--ink-mute); letter-spacing:.06em;
}

.btn{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--forest); color:var(--button-text);
  padding:17px 30px;
  font-family:var(--mono); font-size:13px;
  letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; border-radius:2px;
  transition:background .2s ease;
}
.btn:hover{ background:var(--bark); }
.btn--lg{ padding:18px 34px; }

.cover{ margin:0; }
.cover img{
  display:block; width:100%;
  /* height:auto is load-bearing. The img carries width/height attributes so
     the layout reserves space before it loads, but without this the 1536px
     height attribute wins over aspect-ratio, the box renders twice as tall as
     it should, and object-fit:cover crops the title off both edges. */
  height:auto;
  aspect-ratio:2/3; object-fit:cover;
  border:1px solid var(--rule-strong);
  box-shadow:14px 16px 0 var(--paper-alt);   /* hard offset, no blur */
}
.cover figcaption{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--ink-faint); margin-top:16px; text-align:center;
}

/* The ridge: a Blue Ridge panorama between the hero and the content.
   Full-bleed, so it breaks out of the hero's 7vw side padding. */
.ridge{
  position:relative;
  margin:9vh -7vw 0;
  line-height:0;               /* no descender gap under the image */
}
.ridge img{
  display:block; width:100%;
  /* The art is about 5:1. Left to its own ratio it becomes an 80px slice on a
     phone, so height is driven directly and the sides crop instead. */
  height:clamp(180px, 22vw, 340px);
  object-fit:cover; object-position:center 62%;
}
/* The panorama's sky is a cool blue and the page is warm cream, so the top edge
   would otherwise read as a pasted-in strip. This fades the paper down over it
   so the mountains rise out of the page instead. */
.ridge::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:45%;
  background:linear-gradient(var(--paper) 0%, rgba(242,236,224,.72) 42%, rgba(242,236,224,0) 100%);
  pointer-events:none;
}

/* ---------------- the book ---------------- */
.book{
  padding:8vh 7vw; background:var(--paper-alt);
  border-bottom:1px solid var(--rule);
}
.book__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:48px 56px; max-width:1180px;
}
.book__grid .eyebrow{ margin-bottom:14px; }
.book__grid p{
  font-family:var(--display); font-size:27px; line-height:1.35;
  margin:0; color:var(--forest);
}

/* ---------------- the hills ---------------- */
.hills{ padding:9vh 7vw; background:var(--forest); color:var(--on-forest); }
.hills__inner{ max-width:1180px; margin:0 auto; }
.hills .eyebrow{ color:var(--on-forest-mute); margin-bottom:10px; }
.hills h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(34px,5vw,60px); margin:0 0 48px; letter-spacing:-.01em;
}
.poem{ columns:2; column-gap:64px; font-size:18.5px; line-height:1.85; }
.poem p{ margin:0 0 26px; break-inside:avoid; }
.poem p:last-child{ margin-bottom:0; }
.poem .refrain{ font-style:italic; color:var(--on-forest-soft); }

/* ---------------- readers ---------------- */
.readers{ padding:9vh 7vw; background:var(--paper); }
.readers__inner{ max-width:900px; margin:0 auto; text-align:center; }
.readers .eyebrow{ margin-bottom:34px; }
.readers blockquote{
  margin:0; font-family:var(--display);
  font-size:clamp(24px,3.6vw,40px); line-height:1.36;
  color:var(--ink); text-wrap:pretty;
}
.readers cite{
  display:block; font-style:normal;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  color:var(--ink-mute); margin-top:30px;
}

/* ---------------- closing call to action ---------------- */
.get{
  padding:8vh 7vw 9vh; background:var(--paper-alt);
  border-top:1px solid var(--rule); text-align:center;
}
.get h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(32px,4.6vw,56px); margin:0 0 18px; color:var(--forest);
}
.get p{
  font-size:19px; line-height:1.6; max-width:30em;
  margin:0 auto 36px; color:var(--ink-body);
}

/* ---------------- acknowledgments ----------------
   Carried over from the previous site, which credited these three by name.
   Reuses the eyebrow-over-name pattern from the book section so it reads as
   part of the page rather than a bolted-on colophon. */
.thanks{
  padding:7vh 7vw 8vh; background:var(--paper);
  border-top:1px solid var(--rule);
}
.thanks__inner{ max-width:1180px; margin:0 auto; text-align:center; }
.thanks .eyebrow{ margin-bottom:18px; }
.thanks__lead{
  font-family:var(--display); font-style:italic;
  font-size:clamp(24px,3vw,34px); line-height:1.3;
  color:var(--forest); margin:0 0 44px;
}
.thanks__credits{
  list-style:none; margin:0 0 44px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:32px 40px;
}
.thanks__credits li{ display:flex; flex-direction:column; gap:8px; }
.thanks__credits .eyebrow{ margin-bottom:0; }
.thanks__name{
  font-family:var(--display); font-size:26px; line-height:1.2;
  color:var(--ink);
}
.thanks__close{
  font-size:18px; line-height:1.6; max-width:34em;
  margin:0 auto 18px; color:var(--ink-body); text-wrap:pretty;
}
.thanks__sign{
  font-family:var(--display); font-style:italic; font-size:20px;
  color:var(--ink-soft); margin:0;
}

/* ---------------- footer ---------------- */
.site-footer{
  padding:34px 7vw 46px; background:var(--paper);
  border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:16px 40px; justify-content:space-between;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  color:var(--ink-faint);
}

/* ======================= Responsive =======================
   The bundle shipped no breakpoints at all. */

@media (max-width:900px){
  /* The two hero columns had a combined minimum of 580px plus a 6vw gap,
     so below roughly 640px they forced the page sideways. */
  .hero__grid{ grid-template-columns:1fr; gap:44px; }
  .cover{ max-width:340px; }
  .poem{ columns:1; }
  .ridge{ margin-top:7vh; }
}

@media (max-width:640px){
  .site-header{ padding:20px 6vw 18px; gap:14px; }
  .site-nav{ gap:16px 20px; font-size:11px; }
  .hero{ padding:5vh 6vw 0; }
  /* Must track the hero's side padding or the panorama stops being full-bleed. */
  .ridge{ margin-inline:-6vw; }
  /* Capped below the desktop minimum so the band does not get taller as the
     screen gets narrower when crossing this breakpoint. */
  .ridge img{ height:clamp(150px, 30vw, 195px); }
  .hero__eyebrow{ margin-bottom:20px; font-size:11px; letter-spacing:.14em; }
  .hero__byline{ margin-bottom:26px; }
  .hero p{ font-size:18px; }
  .hero p:last-of-type{ margin-bottom:30px; }
  .cover{ max-width:none; }
  .book, .hills, .readers, .get{ padding-left:6vw; padding-right:6vw; }
  .book__grid{ gap:34px; }
  .book__grid p{ font-size:23px; }
  .poem{ font-size:17px; line-height:1.8; }
  .hills h2{ margin-bottom:32px; }
  .thanks{ padding-left:6vw; padding-right:6vw; }
  .thanks__lead{ margin-bottom:34px; }
  .thanks__credits{ gap:26px; margin-bottom:34px; }
  .thanks__name{ font-size:23px; }
  .thanks__close{ font-size:17px; }
  .site-footer{ padding:28px 6vw 36px; gap:10px; }
}

@media (max-width:400px){
  /* "Mountain Maw Maw" is the longest unbreakable run on the page. */
  .hero h1{ font-size:clamp(38px,11vw,52px); }
  .btn{ padding:15px 22px; font-size:12px; letter-spacing:.1em; }
  .hero__actions{ gap:16px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

@media print{
  .site-nav, .skip-link, .ridge{ display:none; }
  body{ background:#fff; }
  .hills{ background:#fff; color:#000; }
}