@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');
:root{--ink:#20231e;--paper:#f2f0e9;--muted:#77796f;--accent:#a65b3d;--line:#d8d5ca;--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px}a{color:inherit;text-decoration:none}.site-header{height:84px;padding:0 5.5vw;display:flex;align-items:center;justify-content:space-between;background:var(--paper);position:relative;z-index:5}.wordmark{font-size:15px;letter-spacing:.18em;font-weight:700;white-space:nowrap}.wordmark span{font-weight:400}.site-header nav{display:flex;gap:30px;margin-left:35px}.site-header nav a,.nav-buy{font-size:11px;letter-spacing:.08em;text-transform:uppercase}.site-header nav a{color:#62645d}.site-header nav a:hover,.under-link:hover{color:var(--accent)}.nav-buy{border-bottom:1px solid var(--ink);padding:9px 0}.nav-buy span{margin-left:10px}.menu-toggle{display:none;background:none;border:0;font-size:22px}.hero{min-height:690px;height:calc(100vh - 84px);max-height:850px;position:relative;display:flex;align-items:center;overflow:hidden;background:#eee5d6;}.hero-image,.hero-shade{display:none}.hero-image{display:none}.hero-shade{display:none}.hero-copy{position:relative;color:#29291f;width:min(590px,47vw);margin-left:7.5vw;margin-top:-10px;z-index:2;padding:20px 0}.eyebrow,.section-kicker{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}.light{color:#e5d8c6}.hero-emblem{width:116px;height:51px;margin:0 0 17px;color:#596044}.hero-emblem svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.hero-copy .eyebrow{color:#77704f;margin:0 0 10px}.hero h1{font:600 clamp(48px,5.4vw,76px)/1.02 var(--serif);letter-spacing:-.045em;margin:0 0 12px;max-width:620px;color:#29291f}.hero-sub{font:italic 500 clamp(17px,1.7vw,22px)/1.35 var(--serif);letter-spacing:.025em;margin:0 0 24px;color:#625b42}.hero-tagline{font:500 clamp(17px,1.8vw,22px)/1.45 var(--serif);max-width:470px;margin:0 0 14px;color:#343429}.hero-question{font:italic 500 clamp(17px,1.65vw,21px)/1.5 var(--serif);max-width:470px;margin:0;color:#5b4b36}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:32px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;gap:20px;padding:17px 22px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}.button-light{background:#f2eee5;color:#20231e}.button-buy{background:#343d2b;color:#fff8e9;box-shadow:0 9px 22px rgba(43,48,32,.22);border:1px solid rgba(255,255,255,.18);padding:18px 23px}.button-buy strong{font:600 13px var(--sans);letter-spacing:.04em;color:#e6d4a9}.button-buy span{font-size:16px}.button-dark{background:#252a23;color:white;margin-top:28px}.button span{font-size:15px}.text-link{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#4e4c3c}.light-link{color:#fff}.hero-index{position:absolute;bottom:23px;left:7.5vw;color:#746b53;font-size:9px;letter-spacing:.2em}.section-pad{padding:105px 10vw}.section-kicker{color:var(--accent);margin-bottom:58px}.intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:10vw}.intro h2,.book-info h2,.author h2,.journal h2,.reviews h2,.contact h2,.buy-band h2{font:500 clamp(38px,4.5vw,62px)/1.12 var(--serif);letter-spacing:-.035em;margin:0}.intro h2 em,.book-info h2 em,.author h2 em,.journal h2 em,.reviews h2 em,.contact h2 em,.buy-band h2 em{color:var(--accent);font-weight:500}.intro-text{max-width:470px;padding-top:5px}.lead{font:500 19px/1.55 var(--serif)}.intro-text p:not(.lead),.journal-head p,.reviews-grid p,.contact-grid p{color:#66685f;line-height:1.85;font-size:13px}.under-link{display:inline-block;margin-top:25px;border-bottom:1px solid var(--ink);padding-bottom:10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase}.under-link span{margin-left:20px}.book-section{background:#e7e4db}.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:12vw;align-items:center}.book-visual{max-width:460px}.book-frame{padding:22px;background:#f7f4ec;box-shadow:0 25px 55px #28291f20;transform:rotate(-2deg)}.book-frame img{display:block;width:100%}.image-note{font-size:9px;letter-spacing:.18em;color:#77796f;margin-top:25px}.book-info{max-width:480px}.book-info .eyebrow{color:var(--accent);margin-bottom:24px}.book-info h2{font-size:clamp(55px,6vw,82px)}.book-author{font-size:10px;letter-spacing:.2em;margin:20px 0 28px}.rule{height:1px;background:#c9c5b9;margin:0 0 28px}.facts{border-top:1px solid #cbc7bb;margin-top:30px}.facts div{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #cbc7bb;gap:15px}.facts span{font-size:9px;letter-spacing:.15em;color:#77796f}.facts strong{font-size:11px;font-weight:600;text-align:right}.fine-print{font-size:10px;color:#77796f}.fragment{background:#282d26;color:#f4f0e8;text-align:center}.fragment .section-kicker{color:#c78a6e;text-align:left}.fragment-inner{max-width:850px;margin:auto}.fragment-inner .eyebrow{color:#c9a68f}.fragment h2{font:500 clamp(30px,4vw,52px)/1.3 var(--serif);margin:30px 0}.fragment-note{font-size:12px;color:#c4c4b9;line-height:1.8}.ornament{display:block;color:#c78a6e;font-size:22px;margin-top:40px}.author-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:12vw;align-items:center}.author-mark{height:280px;width:280px;border:1px solid #c9c4b8;border-radius:50%;display:grid;place-items:center;font:500 100px var(--serif);color:#a65b3d;position:relative}.author-mark span{font-style:italic;margin-left:-35px;color:#30352e}.author h2{margin:20px 0}.author .eyebrow{color:var(--accent)}.placeholder-note{font-size:11px;color:#89897f;border-left:2px solid #b47b5f;padding-left:15px;margin-top:28px;line-height:1.7}.journal{background:#e7e4db}.journal-head{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:50px}.journal-head p{max-width:300px}.journal-placeholder{display:grid;grid-template-columns:1.3fr .7fr;background:#d8d5ca;min-height:280px}.journal-photo{background:url('assets/fotografie-hero.png') center 65%/cover;filter:saturate(.65)}.journal-placeholder>div:last-child{padding:40px;align-self:center}.journal-placeholder span,.review-empty span{font-size:9px;letter-spacing:.18em;color:var(--accent)}.journal-placeholder p{font:500 18px/1.55 var(--serif);max-width:310px}.buy-band{background:#30372e;color:#f2eee5;padding:75px 10vw;display:flex;justify-content:space-between;align-items:center;gap:50px}.buy-band h2{font-size:clamp(42px,5vw,64px)}.buy-side{min-width:270px}.buy-side>strong{font:500 48px var(--serif)}.buy-side small{font-size:17px}.buy-side p{font-size:11px;color:#c8c9bd;margin:7px 0 25px}.button-disabled{background:#e5e0d4;color:#55594e;cursor:default;letter-spacing:.04em;font-size:9px}.reviews-grid{display:grid;grid-template-columns:1fr 1fr;gap:12vw}.reviews-grid h2{margin-bottom:25px}.review-empty{border-top:1px solid var(--line);padding-top:25px}.review-empty p{font:italic 20px var(--serif)}.contact{background:#e7e4db}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12vw}.contact-grid>div{padding-top:8px}.contact-email{display:inline-block;font:500 22px var(--serif);margin:20px 0 35px;border-bottom:1px solid #a65b3d;padding-bottom:10px}.social-links{display:flex;gap:25px}.social-links a{font-size:10px;text-transform:uppercase;letter-spacing:.13em}footer{display:flex;justify-content:space-between;align-items:center;padding:30px 5.5vw;font-size:9px;letter-spacing:.1em;color:#77796f}.footer-mark{color:var(--ink)}
@media(max-width:900px){.site-header{height:72px}.site-header nav{gap:14px}.site-header nav a{font-size:9px}.hero{height:680px}.hero-copy{margin-left:6vw;width:49vw}.hero-index{left:6vw}.section-pad{padding:80px 7vw}.book-grid{gap:7vw}.author-grid{gap:7vw}.author-mark{width:220px;height:220px;font-size:80px}.buy-band{padding:65px 7vw}}
@media(max-width:650px){.site-header{padding:0 6vw}.site-header nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--paper);padding:25px 7vw;flex-direction:column;gap:22px;margin:0}.menu-open .site-header nav{display:flex}.nav-buy{margin-left:auto;margin-right:20px;font-size:9px}.menu-toggle{display:block}.hero{height:760px;min-height:0;align-items:flex-start}.hero-image{display:none}.hero-shade{display:none}.hero-copy{width:83vw;margin:68px 0 0 7vw;padding:10px 0}.hero-emblem{width:92px;height:40px;margin-bottom:12px}.hero h1{font-size:44px;max-width:370px}.hero-sub{font-size:18px;margin-bottom:19px}.hero-tagline,.hero-question{font-size:17px;max-width:360px}.hero-actions{gap:18px;flex-wrap:wrap;margin-top:24px}.button-buy{padding:16px 17px}.hero-index{font-size:7px;bottom:15px;left:7vw;color:#746b53}.button{padding:15px}.section-pad{padding:70px 7vw}.section-kicker{margin-bottom:38px}.intro-grid,.book-grid,.author-grid,.reviews-grid,.contact-grid{grid-template-columns:1fr;gap:42px}.intro h2,.author h2,.journal h2,.reviews h2,.contact h2{font-size:43px}.book-visual{max-width:340px;margin:auto}.book-info h2{font-size:65px}.author-mark{width:170px;height:170px;font-size:65px;margin:auto}.journal-head{display:block}.journal-head p{margin-top:25px}.journal-placeholder{grid-template-columns:1fr}.journal-photo{min-height:210px}.journal-placeholder>div:last-child{padding:28px}.buy-band{padding:65px 7vw;display:block}.buy-side{margin-top:40px}.buy-side>strong{font-size:42px}.reviews-grid{gap:35px}.contact-email{font-size:18px}footer{padding:25px 7vw;gap:15px;flex-wrap:wrap}footer span{order:3;width:100%}}

/* Navigation refinements */
header .nav-buy, .nav-buy {
  background: #39432f;
  color: #fff8e9 !important;
  border: 1px solid #39432f;
  padding: 12px 19px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: .075em;
  box-shadow: 0 4px 12px rgba(49, 54, 38, .14);
}
header .nav-buy:hover, .nav-buy:hover {
  background: #4a563d;
  color: #fff !important;
}
header nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 34px);
}
header nav a:not(.nav-buy) {
  color: inherit;
  text-decoration: none;
  transition: opacity .2s ease;
}
header nav a:not(.nav-buy):hover { opacity: .68; }
.hero-emblem { margin: 0 0 17px; }

/* Header brand emblem: mountains and compass immediately before the wordmark */
.site-header .wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.site-header .brand-emblem {
  display: inline-flex;
  width: 35px;
  height: 27px;
  flex: 0 0 35px;
  color: #596044;
}
.site-header .brand-emblem svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Header layout: brand left, navigation centered, purchase action right */
.site-header {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 26px;
}
.site-header .wordmark {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 13px;
}
.site-header .brand-emblem {
  width: 54px;
  height: 40px;
  flex: 0 0 54px;
}
.site-header nav {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.1vw, 34px);
  white-space: nowrap;
}
.site-header > .nav-buy {
  justify-self: end;
  align-self: center;
  white-space: nowrap;
  margin-left: 0;
  margin-right: 0;
}
.site-header .menu-toggle {
  display: none;
}
@media (max-width: 900px) {
  .site-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  .site-header .brand-emblem {
    width: 43px;
    height: 32px;
    flex-basis: 43px;
  }
  .site-header nav {
    gap: 12px;
  }
}
@media (max-width: 700px) {
  .site-header {
    display: flex;
  }
  .site-header > .nav-buy {
    margin-left: auto;
    margin-right: 8px;
  }
  .site-header nav {
    display: none;
  }
  .site-header .menu-toggle {
    display: inline-flex;
  }
}

/* Homepage hero text hierarchy */
.hero-copy .eyebrow {
  color: #77796f;
  margin: 0 0 13px;
  font-size: 10px;
  letter-spacing: .18em;
}
.hero-copy h1 {
  margin-bottom: 12px;
}
.hero-copy .hero-sub {
  margin: 0 0 28px;
  color: #77796f;
  font-size: clamp(15px, 1.45vw, 19px);
}
.hero-copy .hero-question {
  max-width: 540px;
  margin: 0;
  color: #343429;
  font: 500 clamp(19px, 2vw, 25px)/1.42 var(--serif);
}
.hero-copy .hero-tagline {
  max-width: 470px;
  margin: 13px 0 0;
  color: #89877c;
  font: 400 clamp(12px, 1.1vw, 14px)/1.55 var(--sans);
  letter-spacing: .015em;
}
@media (max-width: 650px) {
  .hero-copy .hero-question { font-size: 20px; }
  .hero-copy .hero-tagline { font-size: 12px; }
}

/* Subtle paired hero actions and editorial categories */
.hero-copy .hero-categories {
  margin: 9px 0 0;
  color: #77796f;
  font: 500 10px/1.7 var(--sans);
  letter-spacing: .105em;
  text-transform: uppercase;
}
.hero-copy .hero-categories span {
  color: #a65b3d;
  padding: 0 5px;
}
.hero-copy .hero-actions {
  gap: 14px;
}
.hero-copy .hero-actions .button-buy {
  background: #e5dfd1;
  color: #34392e;
  border: 1px solid #c9c2b2;
  box-shadow: none;
  padding: 15px 19px;
  font-size: 10px;
  letter-spacing: .09em;
  transition: background .2s ease, border-color .2s ease;
}
.hero-copy .hero-actions .button-buy:hover {
  background: #dcd4c3;
  border-color: #aaa18e;
}
.hero-copy .hero-actions .text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 17px;
  border: 1px solid #c9c2b2;
  color: #55584e;
  background: rgba(255,255,255,.16);
  letter-spacing: .09em;
  transition: background .2s ease, border-color .2s ease;
}
.hero-copy .hero-actions .text-link:hover {
  background: #e8e2d6;
  border-color: #aaa18e;
}

/* Wordmark: both parts use the same bold weight */
.site-header .wordmark,
.site-header .wordmark span {
  font-weight: 700;
}

/* Hero actions: identical typography and matching button dimensions */
.hero-copy .hero-actions .button-buy,
.hero-copy .hero-actions .text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: 46px;
  padding: 14px 17px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-copy .hero-actions .button-buy {
  background: #e5dfd1;
  color: #34392e;
  border: 1px solid #c9c2b2;
  box-shadow: none;
}

.hero-copy .hero-actions .text-link {
  background: rgba(255,255,255,.16);
  color: #55584e;
  border: 1px solid #c9c2b2;
  text-decoration: none;
}

.hero-copy .hero-actions .button-buy:hover,
.hero-copy .hero-actions .text-link:hover {
  background: #dcd4c3;
  border-color: #aaa18e;
}

/* Series page copy */
.series-copy {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.series-copy p {
  color: #55584f;
  font-size: 15px;
  line-height: 1.9;
  margin: 0 0 24px;
}
.series-copy p.lead {
  color: #34372f;
  font: 500 20px/1.65 var(--serif);
  margin-bottom: 25px;
}
.series-copy p:last-of-type {
  font: 500 18px/1.7 var(--serif);
  color: #45483e;
}
.series-copy strong {
  font-weight: 700;
}
.series-copy em {
  color: #55584f;
}
.series-copy .under-link {
  margin-top: 12px;
}
@media (max-width: 650px) {
  .series-copy p { font-size: 14px; line-height: 1.8; }
  .series-copy p.lead { font-size: 18px; line-height: 1.6; }
  .series-copy p:last-of-type { font-size: 17px; }
}

/* Volume I: use the supplied transparent 3D book mockup */
.book-visual {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.book-frame {
  padding: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.book-frame img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 23px rgba(40, 35, 24, .16));
}
.book-description {
  margin: 0;
}
.book-description p {
  margin: 0 0 15px;
  color: #62645d;
  font-size: 13px;
  line-height: 1.75;
}
.book-description p.lead {
  margin-bottom: 17px;
  color: #34372f;
  font: 500 16px/1.62 var(--serif);
}
.book-description strong {
  color: #8b6a36;
  font-weight: 700;
}
.book-description + .facts {
  margin-top: 28px;
}
@media (max-width: 650px) {
  .book-visual {
    max-width: 320px;
  }
  .book-description p {
    font-size: 13px;
    line-height: 1.72;
  }
  .book-description p.lead {
    font-size: 16px;
  }
}

/* Volume I title and subtitle hierarchy */
.book-subtitle {
  margin: 14px 0 20px;
  color: #77796f;
  font: 500 16px/1.45 var(--serif);
}
.book-info .book-author {
  margin-top: 0;
}
.book-info .button-dark strong {
  font: 600 13px var(--sans);
  letter-spacing: .04em;
  margin-left: 5px;
  color: #e6d4a9;
}
.book-info .button-dark span {
  margin-left: 2px;
}

/* Volume I layout: text on the left, 3D book on the right */
.book-grid .book-info {
  order: 1;
}
.book-grid .book-visual {
  order: 2;
  justify-self: end;
}


/* Author portrait */
.author-portrait {
  width: 100%;
  max-width: 430px;
  justify-self: center;
  overflow: hidden;
  background: #e9e5dc;
}
.author-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 42%;
}
.author-copy > p:not(.eyebrow) {
  max-width: 690px;
  line-height: 1.8;
}
.author-copy .lead {
  margin-top: 0;
}
@media (max-width: 760px) {
  .author-portrait {
    max-width: 360px;
  }
}

.contact-email {
  margin-top: 1.25rem;
}
.contact-email a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Mobile-first corrections: full-width canvas and a more compact header/hero */
@media (max-width: 700px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  .site-header {
    width: 100%;
    min-width: 0;
    height: 72px;
    padding: 0 14px;
    gap: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .site-header .wordmark {
    min-width: 0;
    gap: 7px;
    font-size: 10.5px;
    letter-spacing: .11em;
  }
  .site-header .brand-emblem {
    width: 36px;
    height: 29px;
    flex: 0 0 36px;
  }
  .site-header > .nav-buy {
    margin: 0 2px 0 auto;
    padding: 10px 8px;
    font-size: 7.5px;
    letter-spacing: .06em;
    white-space: nowrap;
  }
  .site-header .menu-toggle {
    display: block;
    flex: 0 0 auto;
    padding: 4px;
    font-size: 22px;
    line-height: 1;
  }
  .site-header nav {
    top: 72px;
    left: 0;
    right: 0;
    width: 100%;
    padding: 22px 24px;
  }
  main, .hero, .section-pad, .buy-band, footer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .hero {
    height: auto;
    min-height: 760px;
    max-height: none;
    align-items: flex-start;
    padding: 0;
    background: #eee5d6;
  }
  .hero-copy {
    width: auto;
    max-width: 520px;
    margin: 76px 24px 64px;
    padding: 0;
  }
  .hero-copy .eyebrow {
    font-size: 9px;
    margin-bottom: 12px;
  }
  .hero h1 {
    font-size: clamp(39px, 10vw, 48px);
    line-height: 1.05;
    max-width: 100%;
  }
  .hero-sub {
    font-size: 17px;
    line-height: 1.4;
    margin-bottom: 24px;
  }
  .hero-copy .hero-question {
    max-width: 100%;
    font-size: 19px;
    line-height: 1.45;
  }
  .hero-copy .hero-tagline {
    max-width: 100%;
    font-size: 13px;
    line-height: 1.6;
    margin-top: 16px;
  }
  .hero-copy .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 25px;
  }
  .hero-copy .hero-actions .button-buy,
  .hero-copy .hero-actions .text-link {
    min-height: 48px;
    padding: 12px 15px;
    font-size: 9px;
    gap: 10px;
  }
  .hero-copy .hero-categories {
    max-width: 100%;
    margin-top: 13px;
    font-size: 9px;
    line-height: 1.8;
    letter-spacing: .09em;
  }
  .hero-index { display: none; }
}


.hero-cover { display: none; }

/* Mobile hero: book first, urban concrete dissolving into warm natural plaster */
@media (max-width: 700px) {
  .site-header .menu-toggle {
    width: 34px;
    height: 34px;
    padding: 7px 4px;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
  }
  .site-header .menu-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--ink);
  }
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    background:
      radial-gradient(ellipse at 78% 58%, rgba(255,255,255,.28), transparent 52%),
      repeating-linear-gradient(7deg, rgba(80,78,70,.025) 0 1px, transparent 1px 7px),
      linear-gradient(180deg, #555650 0%, #77766e 34%, #c4bfb2 54%, #eee9de 72%, #f2f0e9 100%);
    padding: 0 0 54px;
    overflow: hidden;
  }
  .hero-cover {
    width: 100%;
    min-height: 0;
    height: clamp(390px, 112vw, 520px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 28px 12vw 18px;
    position: relative;
    background:
      radial-gradient(ellipse at 50% 74%, rgba(20,20,17,.42), transparent 58%),
      repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px),
      repeating-linear-gradient(91deg, rgba(0,0,0,.035) 0 1px, transparent 1px 8px),
      linear-gradient(135deg, #4d4e49, #77766e 58%, #aaa69a);
    border-bottom: 1px solid rgba(255,255,255,.22);
  }
  .hero-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .42;
    background:
      linear-gradient(90deg, transparent 0 8%, rgba(25,26,23,.24) 8.2% 8.5%, transparent 8.7%),
      linear-gradient(180deg, transparent 0 15%, rgba(20,20,18,.22) 15.2% 15.5%, transparent 15.7%),
      radial-gradient(ellipse at 12% 40%, rgba(20,20,18,.55), transparent 24%);
    pointer-events: none;
  }
  .hero-cover img {
    display: block;
    position: relative;
    z-index: 1;
    width: min(100%, 390px);
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 22px 20px rgba(0,0,0,.48));
  }
  .hero-copy {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 36px 7vw 0;
    color: #25261f;
  }
  .hero-copy .eyebrow {
    font-size: 10px;
    letter-spacing: .2em;
    margin: 0 0 14px;
    color: #7e4c37;
  }
  .hero h1 {
    font-size: clamp(42px, 11vw, 54px);
    line-height: 1.02;
    margin: 0 0 8px;
  }
  .hero-sub {
    font-size: 18px;
    line-height: 1.4;
    margin: 0 0 28px;
    color: #526044;
  }
  .hero-copy .hero-question {
    max-width: 100%;
    font-size: clamp(20px, 5.2vw, 24px);
    line-height: 1.35;
    margin: 0;
    color: #29291f;
  }
  .hero-copy .hero-tagline {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.55;
    margin: 14px 0 0;
    color: #66665d;
  }
  .hero-copy .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
    margin-top: 25px;
  }
  .hero-copy .hero-actions .button-buy,
  .hero-copy .hero-actions .text-link {
    min-height: 52px;
    width: 100%;
    justify-content: center;
    padding: 15px 16px;
    font-size: 10px;
    letter-spacing: .11em;
    text-align: center;
  }
  .hero-copy .hero-actions .button-buy {
    background: #303a29;
    color: #fff8e9;
  }
  .hero-copy .hero-actions .text-link {
    border: 1px solid #a9a596;
    color: #34352e;
  }
  .hero-copy .hero-categories {
    max-width: 100%;
    margin-top: 15px;
    font-size: 9px;
    line-height: 1.8;
    letter-spacing: .09em;
    color: #77776d;
  }
}


/* Final mobile refinements based on phone screenshots */
@media (max-width: 700px) {
  /* Keep every section aligned to the same full-width mobile canvas. */
  .section-pad,
  .buy-band,
  footer {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  .section-pad {
    padding-left: 7vw;
    padding-right: 7vw;
  }

  /* More even rhythm between the long editorial sections. */
  .intro.section-pad,
  .book-section.section-pad,
  .author.section-pad,
  .journal.section-pad,
  .reviews.section-pad,
  .contact.section-pad {
    padding-top: 68px;
    padding-bottom: 72px;
  }

  .section-kicker {
    margin-bottom: 42px;
  }

  .series-copy p.lead {
    font-size: clamp(19px, 4.8vw, 22px);
    line-height: 1.58;
  }

  .series-copy p {
    font-size: 15px;
    line-height: 1.78;
  }

  .series-copy p:last-of-type {
    font-size: 17px;
    line-height: 1.65;
  }

  /* Keep the author portrait prominent without letting it dominate the page. */
  .author-portrait {
    margin-bottom: 2px;
  }

  .author-portrait img {
    width: 100%;
    height: auto;
    max-height: 620px;
    object-fit: cover;
    object-position: center 42%;
  }

  .author-copy .eyebrow {
    margin-bottom: 24px;
  }

  .author-copy h2 {
    margin-bottom: 26px;
    font-size: clamp(40px, 10.5vw, 52px);
    line-height: 1.04;
  }

  .author-copy .lead {
    font-size: 20px;
    line-height: 1.55;
  }

  .author-copy > p:not(.eyebrow) {
    font-size: 15px;
    line-height: 1.8;
  }

  /* Slightly tighter calls to action, still easy to tap. */
  .hero-copy .hero-actions .button-buy,
  .hero-copy .hero-actions .text-link {
    min-height: 48px;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .hero-copy .hero-categories {
    max-width: 340px;
  }

  .book-info .button-dark {
    min-height: 54px;
  }

  .fragment-inner h2 {
    font-size: clamp(30px, 8vw, 40px);
    line-height: 1.22;
  }

  .contact-grid {
    gap: 34px;
  }

  footer {
    gap: 18px;
    flex-wrap: wrap;
  }
}

@media (max-width: 380px) {
  .site-header {
    padding-left: 10px;
    padding-right: 10px;
  }

  .site-header .wordmark {
    font-size: 9.5px;
    letter-spacing: .09em;
  }

  .site-header > .nav-buy {
    padding: 9px 7px;
    font-size: 7px;
  }

  .hero-cover {
    height: clamp(360px, 108vw, 430px);
    padding-left: 9vw;
    padding-right: 9vw;
  }
}


/* Desktop hero: make the 3D book and urban concrete backdrop visible */
@media (min-width: 761px) {
  .hero {
    min-height: 690px;
    height: min(820px, calc(100vh - 84px));
    max-height: 850px;
    background: linear-gradient(90deg, #eee8dc 0%, #eee8dc 49%, #77766f 49%, #77766f 100%);
    align-items: stretch;
  }
  .hero-cover {
    display: flex;
    position: absolute;
    inset: 0 0 0 auto;
    width: 51%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 38px 5vw 38px 3vw;
    overflow: hidden;
    background:
      radial-gradient(ellipse at 52% 76%, rgba(18,18,16,.42), transparent 58%),
      repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px),
      repeating-linear-gradient(91deg, rgba(0,0,0,.04) 0 1px, transparent 1px 9px),
      linear-gradient(135deg, #4d4e49 0%, #77766e 58%, #aaa69a 100%);
    border-left: 1px solid rgba(255,255,255,.18);
  }
  .hero-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .42;
    background:
      linear-gradient(90deg, transparent 0 8%, rgba(25,26,23,.24) 8.2% 8.5%, transparent 8.7%),
      linear-gradient(180deg, transparent 0 15%, rgba(20,20,18,.22) 15.2% 15.5%, transparent 15.7%),
      radial-gradient(ellipse at 12% 40%, rgba(20,20,18,.55), transparent 24%);
    pointer-events: none;
  }
  .hero-cover img {
    display: block;
    position: relative;
    z-index: 1;
    width: auto;
    height: 88%;
    max-width: 88%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 24px 24px rgba(0,0,0,.48));
  }
  .hero-copy {
    width: min(590px, 42vw);
    max-width: 590px;
    margin-left: 7.5vw;
    margin-right: 3vw;
    padding: 30px 0;
    z-index: 2;
  }
}