/* Bad Bot Books — Smoky Blue Grey theme.
   Complete shared stylesheet for all five pages.
   Rename your chosen file to style.css. */
:root {
  --green: #495B68; /* Main background (variable name retained for compatibility) */
  --dark: #FFF9E9; /* Light body/navigation text and button background */
  --shape: #B8C8D0; /* Soft geometric accents */
  --cream: #495B68; /* Button text on light background */
}
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; min-height:100svh; background:var(--green); color:var(--dark); font-family: ui-rounded, 'Avenir Next', Avenir, 'Trebuchet MS', system-ui, sans-serif; overflow-x:hidden; }
    .page { position:relative; isolation:isolate; display:flex; flex-direction:column; min-height:100svh; overflow:hidden; }
    .pattern { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
    .shape { position:absolute; opacity:.105; }
    .circle { width:360px; aspect-ratio:1; border:48px solid var(--shape); border-radius:50%; top:-150px; left:-155px; transform:rotate(15deg); }
    .star { width:340px; height:340px; right:-125px; top:13%; background:var(--shape); clip-path:polygon(50% 0%,60% 34%,85% 15%,68% 42%,100% 50%,68% 58%,85% 85%,60% 66%,50% 100%,40% 66%,15% 85%,32% 58%,0 50%,32% 42%,15% 15%,40% 34%); transform:rotate(18deg); }
    .arc { border:55px solid var(--shape); border-radius:50%; width:480px; height:480px; bottom:-345px; left:8%; }
    .diamond { width:165px; height:165px; background:var(--shape); transform:rotate(22deg); bottom:16%; right:9%; border-radius:25px; }
    .dots { position:absolute; left:12%; top:49%; width:115px; height:115px; opacity:.18; background-image:radial-gradient(var(--shape) 4px, transparent 4.5px); background-size:24px 24px; transform:rotate(-12deg); }
    .top { display:flex; align-items:center; justify-content:space-between; max-width:1280px; width:100%; margin:0 auto; padding:29px clamp(24px,6vw,72px); }
    .wordmark { display:inline-flex; align-items:center; gap:10px; color:var(--dark); text-decoration:none; font-size:16px; font-weight:950; letter-spacing:-.7px; }
    .wordmark .dot { background:var(--dark); color:var(--green); width:31px; height:31px; border-radius:10px; display:grid; place-items:center; font-size:19px; transform:rotate(-12deg); }
    nav { display:flex; align-items:center; gap:clamp(17px,3vw,39px); }
    nav a { color:var(--dark); font-weight:800; text-decoration:none; font-size:14px; }
    nav a:hover, footer a:hover { text-decoration:underline; text-underline-offset:5px; }
    .main { width:100%; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 24px 70px; }
    .logo-slot { width:min(450px,90vw); min-height:165px; display:grid; place-items:center; margin:0 auto 32px; }
    .brand-demo { position:relative; transform:rotate(-3deg); filter:drop-shadow(5px 7px 0 rgba(22,62,50,.15)); }
    .brand-demo span { display:block; font-weight:1000; font-size:clamp(57px,10vw,115px); letter-spacing:-.105em; line-height:.81; -webkit-text-stroke:5px var(--dark); paint-order:stroke fill; }
    .brand-demo .bad { color:#ffdd5a; transform:rotate(-4deg); }
    .brand-demo .bot { color:#ff836c; transform:rotate(3deg) translateX(3px); }
    .brand-demo .books { color:#f7f6eb; transform:rotate(-2deg); }
    .brand-demo::after { content:'✦'; position:absolute; color:#f4f0df; -webkit-text-stroke:2px var(--dark); font-size:60px; right:-52px; top:20px; transform:rotate(18deg); }
    .eyebrow { margin:0 0 20px; font-size:13px; text-transform:uppercase; font-weight:950; letter-spacing:.24em; }
    h1 { font-size:clamp(44px,7.2vw,91px); line-height:.99; margin:0; letter-spacing:-.065em; font-weight:950; max-width:880px; }
    .intro { font-size:clamp(17px,2.1vw,22px); line-height:1.6; font-weight:600; max-width:575px; margin:27px auto 32px; }
    .button { background:var(--dark); border:2px solid var(--dark); color:var(--cream); text-decoration:none; display:inline-flex; justify-content:center; align-items:center; min-height:54px; padding:0 29px; font-size:15px; border-radius:100px; font-weight:900; transition:transform .2s,background .2s,color .2s; }
    .button:hover { transform:translateY(-3px); background:transparent; color:var(--dark); }
    footer { display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; max-width:1280px; padding:24px clamp(24px,6vw,72px) 32px; margin:auto auto 0; font-size:12px; font-weight:700; }
    footer .links { display:flex; flex-wrap:wrap; gap:23px; }
    footer a { text-decoration:none; color:inherit; }
    @media(max-width:640px) { .top { flex-direction:column; gap:25px; padding-top:22px; } nav { gap:25px; } .main { padding-top:54px; padding-bottom:75px; } .logo-slot { margin-bottom:26px; } .brand-demo::after { right:-24px; font-size:39px; } .diamond {right:-80px;} .dots {left:-50px;} footer { flex-direction:column; text-align:center; gap:13px; } footer .links {justify-content:center; gap:17px;} }
    @media(prefers-reduced-motion:reduce) { *,*::before,*::after {scroll-behavior:auto!important;transition:none!important;} }

/* Logo dimensions */
.header-logo { display:block; max-width:100%; max-height:65px; width:auto; height:auto; }
.hero-logo { display:block; max-width:100%; max-height:300px; width:auto; height:auto; }


/* Shared styles for Contact, Privacy, Terms and Copyright */
    .interior { width:min(100% - 48px,790px); margin:0 auto; padding:72px 0 110px; flex:1; position:relative; }
    .interior--contact { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; max-width:700px; }
    .interior h1 { font-size:clamp(46px,7vw,82px); line-height:1.03; letter-spacing:-.065em; margin:0 0 26px; }
    .interior h2 { font-size:clamp(23px,3vw,30px); letter-spacing:-.035em; margin:42px 0 12px; }
    .interior p, .interior li { font-size:16px; line-height:1.78; font-weight:550; }
    .interior ul { padding-left:23px; }
    .interior a:not(.button) { color:inherit; text-underline-offset:4px; }
    .interior .lede { font-size:clamp(18px,2.5vw,22px); line-height:1.55; font-weight:650; max-width:650px; }
    .interior .kicker { margin:0 0 18px; font-size:12px; text-transform:uppercase; letter-spacing:.22em; font-weight:950; }
    .interior .updated { margin-top:4px; font-size:13px; opacity:.8; }
    .interior .note { border-top:2px solid color-mix(in srgb, var(--dark) 25%, transparent); padding-top:24px; margin-top:50px; }
    .interior--contact .button { margin-top:20px; }
    .interior--contact .mini { margin-top:24px; font-size:14px; }
    nav a[aria-current="page"], footer a[aria-current="page"] { text-decoration:underline; text-underline-offset:6px; }
    :focus-visible { outline:3px solid var(--dark); outline-offset:5px; }
    @media(max-width:640px) { .interior { padding:50px 0 90px; } }


/* Clear, high-contrast keyboard focus on the dark background. */
:focus-visible { outline-color: #FFF9E9; }

/* Homepage featured book preview */
.featured-book { width:min(100%,760px); margin:clamp(70px,9vw,120px) auto 0; text-align:center; }
.featured-kicker { text-transform:uppercase; font-size:12px; font-weight:900; letter-spacing:.18em; margin:0 0 14px; opacity:.84; }
.featured-book h2 { font-size:clamp(30px,4.5vw,48px); line-height:1.1; letter-spacing:-.045em; margin:0; }
.featured-description { font-size:clamp(16px,2vw,19px); line-height:1.5; max-width:540px; margin:18px auto 30px; }
.book-preview { margin:0 auto; width:min(330px,78vw); perspective:1000px; }
.book-preview img { display:block; width:100%; height:auto; border-radius:5px 9px 9px 5px; box-shadow:0 15px 35px rgba(0,0,0,.24),-6px 0 0 rgba(255,255,255,.12); transform:rotate(-2deg); transition:transform .3s ease, box-shadow .3s ease; }
.book-preview:hover img { transform:translateY(-10px) rotate(0deg) scale(1.025); box-shadow:0 26px 48px rgba(0,0,0,.32),-6px 0 0 rgba(255,255,255,.12); }
.book-preview figcaption { font-size:12px; font-weight:750; margin-top:23px; opacity:.8; }
@media (prefers-reduced-motion:reduce) { .book-preview img { transition:none; } .book-preview:hover img {transform:none;} }