:root{
  --pine:#12261F; --moss:#1B3A30; --parchment:#EAE3D2; --brass:#C2A15F; --mist:#A7B9AE;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--pine);color:var(--parchment);font:400 1.0625rem/1.7 var(--sans)}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}

header .wrap{display:flex;justify-content:space-between;align-items:baseline;padding-top:1.75rem;padding-bottom:1.75rem;gap:1rem;flex-wrap:wrap}
.mark{font:500 1.5rem/1 var(--serif);text-decoration:none;letter-spacing:.01em}
nav{display:flex;gap:1.75rem;font-size:.95rem}
nav a{color:var(--mist);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
nav a:hover,nav a[aria-current="page"]{color:var(--parchment);border-color:var(--brass)}

.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:4rem;align-items:center;padding:4.5rem 0 6rem}
h1{font:500 clamp(3.4rem,8vw,6.5rem)/.95 var(--serif);margin:0 0 1.75rem;letter-spacing:-.01em}
.lede{font:italic 400 clamp(1.4rem,2.4vw,1.85rem)/1.35 var(--serif);color:var(--brass);margin:0 0 1.5rem;max-width:30rem}
.hero p{max-width:34rem;color:var(--mist);margin:0 0 2.25rem}
.btn{display:inline-block;padding:.85rem 1.6rem;border:1px solid var(--brass);color:var(--parchment);text-decoration:none;font-weight:500;transition:background .2s,color .2s}
.btn:hover{background:var(--brass);color:var(--pine)}

.cover{display:block;width:min(100%,19rem);height:auto;margin:0 auto;box-shadow:14px 18px 0 -4px rgba(0,0,0,.3)}

section{padding:4.5rem 0;border-top:1px solid rgba(194,161,95,.28)}
h2{font:500 clamp(2.2rem,4vw,3rem)/1.05 var(--serif);margin:0}
.split{display:grid;grid-template-columns:.8fr 1.4fr;gap:4rem}
.split p{margin:0 0 1.25rem;max-width:38rem}
.split p:last-child{margin-bottom:0}

/* Simple inner pages (Contact) */
.page{padding:3rem 0 6rem;min-height:55vh}
.page h1{font-size:clamp(3rem,6.5vw,5rem);margin-bottom:1.5rem}
.page p{max-width:38rem;margin:0 0 1.5rem}

/* Book page */
.book-hero{display:grid;grid-template-columns:.75fr 1.25fr;gap:4rem;align-items:start;padding:3rem 0 6rem}
.book-hero .cover{width:min(100%,20rem)}
.book-hero .yr{display:block;font:italic 400 1.35rem/1 var(--serif);color:var(--brass);margin-bottom:1rem}
.book-hero h1{font-size:clamp(3rem,6.5vw,5rem);margin-bottom:1rem}
.book-hero .sub{font:italic 400 clamp(1.4rem,2.4vw,1.8rem)/1.35 var(--serif);color:var(--mist);margin:0 0 1.75rem;max-width:32rem}
.book-hero p{max-width:36rem;margin:0 0 2rem}
.details{display:grid;grid-template-columns:7rem 1fr;gap:.35rem 1.5rem;margin:0 0 2.25rem;padding-top:1.5rem;border-top:1px solid rgba(194,161,95,.28);color:var(--mist);font-size:.95rem;max-width:36rem}
.details dt{color:var(--brass)}
.details dd{margin:0}

/* Reviews carousel */
.reviews h2{margin-bottom:3rem}
.carousel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"prev view next" ". count .";gap:1.5rem 2rem;align-items:center}
.car-viewport{grid-area:view;min-width:0;max-width:46rem;width:100%;margin:0 auto}
.car-btn{display:none;grid-area:prev;place-items:center;width:3.25rem;height:3.25rem;padding:0;background:transparent;border:1px solid var(--brass);color:var(--parchment);cursor:pointer;transition:background .2s,color .2s}
.car-btn.next{grid-area:next}
.carousel.is-ready .car-btn{display:grid}
.car-btn:hover{background:var(--brass);color:var(--pine)}
.count{display:none;grid-area:count;margin:0;text-align:center;color:var(--mist);font-size:.95rem;letter-spacing:.05em}
.carousel.is-ready .count{display:block}

.slide{position:relative;margin:0 0 3rem;padding-top:3.5rem;animation:slide-in .4s ease}
.slide:last-child{margin-bottom:0}
.slide::before{content:"\201C";position:absolute;top:-.35rem;left:-.1rem;font:500 6.5rem/1 var(--serif);color:var(--brass)}
.slide[hidden]{display:none}
.q{margin:0;font:italic 400 clamp(1.25rem,2vw,1.5rem)/1.5 var(--serif);color:var(--parchment)}
.q p{margin:0 0 1rem}
.q p:last-child{margin-bottom:0}
.carousel.is-ready .q{max-height:15.75rem;overflow:hidden}
.carousel.is-ready .is-clamped:not(.is-open) .q{-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.carousel.is-ready .is-open .q{max-height:none}
.more{background:none;border:0;border-bottom:1px solid var(--brass);padding:0 0 2px;margin:1.25rem 0 0;color:var(--parchment);font:500 .95rem var(--sans);cursor:pointer;transition:color .2s}
.more:hover{color:var(--brass)}
.more[hidden]{display:none}
.slide figcaption{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid rgba(194,161,95,.28)}
.who{display:block;font:500 1.5rem/1.2 var(--serif);color:var(--parchment)}
.role{display:block;margin-top:.3rem;color:var(--mist);font-size:.95rem;line-height:1.5}
@keyframes slide-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* end reviews */

.btn-stack{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}

.media h2{margin-bottom:2rem}
.media ul{margin:0;padding-left:1.25rem;max-width:46rem}
.media li{margin:0 0 1rem}
.media li::marker{color:var(--brass)}
.media a{text-underline-offset:4px;text-decoration-color:var(--brass)}

.contact{background:var(--moss)}
a.mail{font:500 clamp(1.5rem,3vw,2.2rem)/1.2 var(--serif);text-underline-offset:6px;text-decoration-color:var(--brass)}
.social{display:flex;gap:1.5rem;margin-top:1.5rem;color:var(--mist)}

footer{padding:2.5rem 0;color:var(--mist);font-size:.9rem}

@media (max-width:52rem){
  .carousel{grid-template-columns:auto 1fr auto;grid-template-areas:"view view view" "prev count next";gap:1.5rem 1rem}
  .car-btn{width:3rem;height:3rem}
  .slide::before{font-size:5.5rem}
  .hero,.split,.book-hero{grid-template-columns:1fr;gap:3rem}
  .hero{padding:2.5rem 0 4rem}
  .book-hero{padding:1.5rem 0 4rem}
  .cover,.book-hero .cover{order:-1;width:min(70%,15rem);margin:0 0 1rem}
  .details{grid-template-columns:1fr;gap:0}
  .details dd{margin-bottom:.75rem}
  nav{gap:1.25rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.slide{animation:none}}
