/* -----------------------------------------------
   Otter Stream Press – Clean Stylesheet
   ----------------------------------------------- */

/* === Root variables === */
:root{
  --cream:#F8F5F0;
  --slate:#2E3135;
  --brass:#B89C67;
  --accent:#E9B208;
  --radius:16px;
  --header-h:64px;
  --gutter-l:max(1rem, env(safe-area-inset-left));
  --gutter-r:max(1rem, env(safe-area-inset-right));
}

/* === Global Reset === */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0; overflow-x:hidden;
  background:var(--cream); color:var(--slate);
  font:16px/1.6 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html{ scrollbar-gutter:stable }
@supports not (scrollbar-gutter:stable){ html{ overflow-y:scroll } }
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:underline; text-decoration-color:rgba(184,156,103,.5); text-underline-offset:4px }
input,button,textarea{ font:inherit }

/* === Layout helpers === */
.container{ max-width:1100px; margin:0 auto; padding-inline:var(--gutter-l) var(--gutter-r) }
.section{ padding:28px 0; border-top:1px solid rgba(184,156,103,.3) }
.row{ display:grid; grid-template-columns:1fr auto; gap:8px }
@media (max-width:640px){ .row{ grid-template-columns:1fr } }

/* === Type scale === */
h1,h2,h3,h4{
  font-family:"Libre Baskerville", Georgia, serif;
  line-height:1.3; margin:0 0 .6rem;
}
h1{ font-size:clamp(22px, 2vw + 10px, 28px); font-weight:700; letter-spacing:-0.01em }
h2{ font-size:clamp(18px, 1.6vw + 8px, 22px); font-weight:700; letter-spacing:-0.005em }
h3{ font-size:clamp(16px, .9vw + 7px, 19px); font-weight:600 }
.small{ font-size:13px; color:#3a3d41 }

/* === Header === */
.header{
  position:fixed; top:0; left:0; right:0;
  z-index:1000;
  background:rgba(248,245,240,.85);
  backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid rgba(184,156,103,.4);
}
.header.is-scrolled{
  background:rgba(248,245,240,.98);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
body{ padding-top:var(--header-h) }

.header .nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; padding-inline:var(--gutter-l) var(--gutter-r);
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none }
.brand span{ font-family:"Libre Baskerville",Georgia,serif; font-size:20px; letter-spacing:.3px; white-space:nowrap }

/* === Navigation === */
.site-nav{ display:flex; align-items:center; gap:12px }
.site-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:16px }
.site-nav a{
  text-decoration:none;
  border:1px solid transparent;
  border-radius:8px;
  padding:6px 10px;
  transition:background-color .2s ease,border-color .2s ease,transform .15s ease;
}
.site-nav a:hover{
  border-color:var(--accent);
  background:rgba(233,178,8,.08);
}
.site-nav a.active{
  border-color:var(--accent);
  background:rgba(233,178,8,.08);
}
.site-nav a.cta{ border-color:rgba(184,156,103,.6) }
.site-nav a::after{ content:none }
.btn:focus-visible,
.site-nav a:focus-visible{
  outline:2px solid rgba(184,156,103,.75);
  outline-offset:2px;
  border-color:rgba(184,156,103,.75);
}

/* Mobile nav */
.mobile-toggle{
  display:none; border:1px solid rgba(184,156,103,.6);
  border-radius:8px; padding:8px 12px;
  background:rgba(255,255,255,.4);
}
@media (max-width:800px){
  .brand span{ font-size:18px }
  .mobile-toggle{ display:inline-block }
  .navmenu{
    display:none !important; position:absolute; left:var(--gutter-l); right:var(--gutter-r); top:100%;
    z-index:9999; background:rgba(248,245,240,.97);
    border-bottom:1px solid rgba(184,156,103,.35);
    padding:10px 16px; border-radius:var(--radius);
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .25s cubic-bezier(.25,.8,.25,1), transform .25s cubic-bezier(.25,.8,.25,1);
  }
  html.nav-open .navmenu, .navmenu.is-open{
    display:block !important; opacity:1; transform:translateY(0); pointer-events:auto;
  }
  .site-nav ul{ flex-direction:column; gap:8px }
  .site-nav a{ display:block; padding:10px 12px; border-radius:12px }
}

/* === Hero === */
.hero{ padding:48px 0 28px; text-align:center }
.hero-intro{ max-width:700px; margin:0 auto }
.lede{
  font-size:17px; line-height:1.65;
  max-width:65ch; margin:0 auto 14px;
}
.signup-inline{
  display:grid; grid-template-columns:1fr auto; gap:8px;
  max-width:480px; margin:0 auto 8px;
}
@media (max-width:640px){ .signup-inline{ grid-template-columns:1fr } }
.input{
  border:1px solid rgba(184,156,103,.5);
  border-radius: 8px;
  padding:10px 12px;
  background:rgba(255,255,255,.85);
  width:100%; height:40px;
}
.tiny-note{ margin:6px 0 0; font-size:12.5px; color:#6b6e73 }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* === Buttons === */
.btn{
  display:inline-block;
  border:1px solid rgba(184,156,103,.6);
  border-radius: 8px;
  background:rgba(255,255,255,.5);
  padding:0 14px;
  height:40px; line-height:38px;
  text-decoration:none;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .15s ease;
  cursor: pointer;
}
.btn:hover{
  background:rgba(233,178,8,.12);
  border-color:var(--accent);
}
.btn:active{
  transform:translateY(0);
  background:rgba(184,156,103,.25);
}
.btn:disabled{ opacity:.6; cursor:default; transform:none }
.btn.buy,.jtl{
  background:var(--accent);
  color:white;
  border-color:rgb(184,142,0);
}
.btn.buy:hover,.jtl:hover,.jtl.cta:hover{
  background:rgb(217, 157, 6);
  border-color:rgb(184,142,0);
}

/* === Cards + Grids === */
.card{
  background:rgba(255,255,255,.4);
  border:1px solid rgba(184,156,103,.25);
  border-radius:var(--radius);
  padding:16px;
}
.grid{ display:grid; gap:18px }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.card-link{ display:block; color:inherit; text-decoration:none }
.eyebrow{
  display:inline-block; margin-top:8px;
  font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:#6b6e73;
}

/* === Section headings === */
.section h2{ text-align:left; padding-inline:0 }
.section--press > .container > h2{
  max-width:1100px; margin:0 auto 0;
/*  padding-inline:var(--gutter-l) var(--gutter-r);*/
}

/* === Banner / Aphorism === */
.banner{
  background:linear-gradient(0deg, rgba(248,245,240,.95), rgba(248,245,240,.95));
  padding:28px 0;
  border-top:1px solid rgba(184,156,103,.22);
  text-align:center;
}
.aphorism{
  font-family:"Libre Baskerville", Georgia, serif;
  font-weight:700;
  font-size:clamp(16px, 1.3vw + 10px, 20px);
  letter-spacing:.01em;
  margin:0;
  color:var(--accent);
  opacity:.9;
}

/* === Featured Book === */
.book-hero{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:center }
.book-cover{
  display:block; max-width:100%; height:auto;
  border:1px solid rgba(184,156,103,.4);
  border-radius:var(--radius);
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.feature-copy{
  width:80%; margin:5%;
  text-align:left; max-width:60ch;
}
@media (min-width:900px){ .book-cover{ max-width:75%; margin:0 auto } }
@media (min-width:1200px){ .book-cover{ max-width:60% } }
@media (max-width:800px){
  .book-hero{ grid-template-columns:1fr }
  .book-cover{ max-width:90%; margin:12px auto }
  .feature-copy{ width:90%; max-width:none }
}
.feature-copy .btn{ margin-right:8px }

/* === Footer === */
.footer{ border-top:1px solid rgba(184,156,103,.4); padding:28px 0; margin-top:40px }

/* === Effects === */
.fade-in{ animation:fadeInUp .6s ease both }
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(8px) }
  to{ opacity:1; transform:translateY(0) }
}
html{ scroll-behavior:smooth }
#signup,#footer-signup{ scroll-margin-top:80px }

/* === Objects placeholder === */
.objects-placeholder{
  display:block;
  max-width:280px;
  height:auto;
  margin:0 auto;
  border:1px solid rgba(184,156,103,.4);
  border-radius:var(--radius);
}
.signup-success, .input-success{
  background: rgba(233,178,8,.06);
  border: 1px solid rgba(46,49,53,.15);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #3a3d41;
  opacity: .85;
}
#enq-message.input{ min-height:160px }