/* Lynn Haskell — lynnhaskell.com
   Palette + type derived from series/windrose-harbor/assets/brand/trade-dress-spec.md
   Cream #FBF1DA · Gold #D0A23F (thin rule/accent ONLY) · warm-grey body (never pure black) */

:root{
  --cream:        #FBF1DA;   /* sampled brand cream */
  --cream-page:   #FAF4E7;   /* slightly lighter field for large areas */
  --gold:         #D0A23F;   /* sampled brand gold — thin rules/accents only */
  --gold-ink:     #8A6420;   /* darker gold for link text (contrast-safe on cream) */
  --ink:          #33302A;   /* warm dark-grey body text (not pure black) */
  --ink-soft:     #6A6355;   /* muted warm-grey for secondary text */
  --rule:         #E4D8B8;   /* faint warm rule */
  --maxw:         42rem;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--cream-page);
  color:var(--ink);
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:1.0625rem;      /* 17px */
  line-height:1.7;
  font-weight:400;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:2.5rem 1.25rem 4rem;}

/* ---- eyebrow / label: Montserrat letterspaced all-caps (cover label register) ---- */
.eyebrow{
  font-family:"Montserrat", sans-serif;
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:0.72rem;
  font-weight:600;
  color:var(--gold-ink);
  margin:0 0 0.75rem;
}

/* ---- headings: Cormorant Garamond SemiBold (cover title register) ---- */
h1,h2,h3{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600;
  color:var(--ink);
  line-height:1.15;
  margin:0 0 0.5rem;
}
h1{font-size:2.6rem; letter-spacing:0.01em;}
h2{font-size:1.7rem; margin-top:2.5rem;}
h3{font-size:1.35rem; margin-top:1.75rem;}
p{margin:0 0 1rem;}
.lede{font-size:1.15rem; color:var(--ink);}

/* ---- thin gold rule: the ONE place gold gets used as a shape ---- */
.rule{
  border:0; height:0;
  border-top:1px solid var(--gold);
  width:3.5rem; margin:1.5rem 0;
}
.rule.center{margin-left:auto; margin-right:auto;}
hr{border:0; border-top:1px solid var(--rule); margin:2.5rem 0;}

/* ---- links: warm-grey underline, gold-ink on hover (gold never a fill) ---- */
a{color:var(--gold-ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px; text-decoration-color:var(--rule);}
a:hover{text-decoration-color:var(--gold);}

/* ---- text link that reads as a call to action (still not a filled button) ---- */
.cta{display:inline-block; font-weight:600; letter-spacing:0.02em; margin:0.25rem 0 0.5rem;
  border-bottom:1px solid var(--gold); text-decoration:none; padding-bottom:2px;}
.cta:hover{color:var(--ink);}

/* ---- header / nav ---- */
header.site{text-align:center; padding-top:1rem;}
header.site .name{font-family:"Cormorant Garamond",serif; font-weight:600;
  font-size:2rem; display:block; color:var(--ink); text-decoration:none;}
nav.site{margin:1rem 0 0; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.16em;}
nav.site a{margin:0 0.6rem; color:var(--ink-soft); text-decoration:none;}
nav.site a:hover{color:var(--gold-ink);}

/* ---- book entries ---- */
.book{margin:2.75rem 0; padding-top:1.5rem; border-top:1px solid var(--rule);}
.book:first-of-type{border-top:0;}
.book img.cover{display:block; width:220px; max-width:60%; height:auto; margin:0 0 1.25rem;
  box-shadow:0 6px 22px rgba(60,48,20,0.18);}
.shelf{color:var(--ink-soft); font-style:italic; margin:0.75rem 0 1rem;}
.badge{display:inline-block; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.16em;
  color:var(--gold-ink); border:1px solid var(--gold); border-radius:2px;
  padding:0.15rem 0.5rem; margin-bottom:0.75rem;}

.answer{color:var(--ink);}          /* the factual answer beneath each question H2 */

/* ---- collapsible full-description layer (spoiler-guard on finale) ---- */
details.more{margin:0.5rem 0 1rem;}
details.more > summary{
  cursor:pointer; list-style:none; display:inline-block;
  font-family:"Montserrat",sans-serif; font-size:0.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.16em; color:var(--gold-ink);
  border-bottom:1px solid var(--gold); padding-bottom:2px;
}
details.more > summary::-webkit-details-marker{display:none;}
details.more > summary::after{content:" \203A";}          /* › closed */
details.more[open] > summary::after{content:" \2304";}     /* ⌄ open */
details.more > summary:focus-visible{outline:2px solid var(--gold-ink); outline-offset:3px;}
details.more > p:first-of-type{margin-top:1rem;}
footer.site{margin-top:3.5rem; padding-top:1.5rem; border-top:1px solid var(--rule);
  font-size:0.85rem; color:var(--ink-soft); text-align:center;}

/* ---- mobile-first is the base; widen type a touch on larger screens ---- */
@media (min-width:40rem){
  body{font-size:1.125rem;}      /* 18px */
  h1{font-size:3.1rem;}
  .wrap{padding-top:3.25rem;}
}

/* ---- style-check swatches (only used by _style-check.html) ---- */
.sw{display:inline-block; width:120px; height:80px; border-radius:4px; margin:0.35rem 0.5rem 0.1rem 0;
  vertical-align:top; border:1px solid rgba(0,0,0,0.08);}
.sw+small{display:inline-block; width:120px; margin-right:0.5rem; font-size:0.72rem; color:var(--ink-soft);}