@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Inter:wght@400;500;600&display=swap');
:root{
  --ink:#111315;
  --gold:#b39a68;
  --dark:#090c0e;
  --white:#f5f3ef;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#090c0e;color:var(--ink);font-family:Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.site-header{position:absolute;z-index:20;top:0;left:0;width:100%;height:86px;padding:18px 4.3vw;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:0;white-space:nowrap}
.brand-mark{width:96px;height:128px;object-fit:contain;transform:translateY(5px);display:block}
nav{display:flex;gap:44px;font-size:12px;letter-spacing:.035em;font-weight:500}
nav a:hover,.text-link:hover{color:var(--gold)}
h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;margin:0}
.hero{height:583px;position:relative;overflow:hidden;background:url('assets/hero-bg.jpg') center 48%/cover no-repeat}
.hero-copy{position:absolute;left:max(11.3vw,90px);top:178px;z-index:2}
h1{font-size:38px;line-height:1.12;letter-spacing:.005em}
.gold-rule{width:40px;height:1px;background:var(--gold);margin:15px 0}
.hero-copy p{font-size:15px;line-height:1.55;margin:0 0 27px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;font-size:12px;letter-spacing:.045em;font-weight:500;transition:.2s ease}
.button span{margin-left:8px;font-size:14px}
.button.dark{background:#090c0e;color:var(--gold)}
.button.dark:hover{background:#15191b}
.hero-book{position:absolute;right:max(11.2vw,100px);top:82px;width:292px;z-index:3;filter:drop-shadow(0 18px 14px rgba(0,0,0,.20));transition:transform .25s ease}
.hero-book img{display:block;width:100%;height:auto}

.books-section{height:435px;position:relative;overflow:hidden;padding-top:28px;background:transparent}
.books-section::before{content:"";position:absolute;inset:0;background:rgba(28,31,31,.30);pointer-events:none;z-index:1}
.books-heading,.books-stage,.books-section>.button{z-index:2}
.books-heading{text-align:center;position:relative}
.books-heading h2{font-size:29px;line-height:1}
.books-heading .gold-rule{margin:12px auto 0}
.books-stage{width:min(94vw,1440px);height:320px;margin:11px auto 0;position:relative}
.books-row{position:absolute;z-index:2;left:50%;bottom:clamp(45px,calc(4.25vw + 1px),60px);transform:translateX(-50%);width:min(88vw,1320px);display:flex;justify-content:center;align-items:flex-end;gap:30px}
.shelf-book{width:180px;flex:0 1 180px;display:block;transition:transform .22s ease;filter:drop-shadow(0 10px 9px rgba(0,0,0,.24));transform-origin:bottom center}
.shelf-book img{display:block;width:100%;height:auto;clip-path:inset(0 3.2% 1.2% 3.2%)}
.shelf-book-first{position:relative}
.shelf-book-first::after{content:"KAI RINGLSTETTER";position:absolute;top:5.5%;left:50%;transform:translateX(-50%);z-index:4;color:#f5f3ef;font-family:Arial,Helvetica,sans-serif;font-size:8px;font-weight:500;letter-spacing:.12em;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.82);pointer-events:none}
.shelf-book:hover{transform:translateY(-7px) scale(1.012)}
.shelf-board{position:absolute;z-index:1;left:50%;bottom:10px;transform:translateX(-50%);width:min(82vw,1120px);height:auto;filter:drop-shadow(0 13px 13px rgba(0,0,0,.28))}
.button.outline{border:1px solid var(--gold);color:var(--gold);background:rgba(15,17,18,.08);position:absolute;left:50%;bottom:18px;transform:translateX(-50%);white-space:nowrap}
.button.outline:hover{background:rgba(179,154,104,.12)}

/* The mockup uses one continuous visual background below the bookshelf. */
.lower-world{position:relative;min-height:1005px;color:#f4f2ee;background:url('assets/author-bg.jpg') center center/cover no-repeat}
.lower-world::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,11,12,.28) 0%,rgba(8,11,12,.30) 38%,rgba(7,10,12,.48) 60%,rgba(7,10,12,.88) 84%,rgba(7,10,12,.96) 100%);pointer-events:none}
.author-section{height:400px;position:relative;overflow:hidden}
.author-copy{position:absolute;left:max(11.3vw,90px);top:54px;z-index:1}
.author-copy h2{font-size:28px;line-height:1}
.author-copy .gold-rule{margin:13px 0 19px}
.author-copy p{font-size:14px;line-height:1.5;margin:0 0 14px}
.text-link{display:inline-block;color:var(--gold);font-size:11px;letter-spacing:.055em;font-weight:500;margin-top:5px}
.text-link span{margin-left:10px}
.link-rule{width:95px;height:1px;background:var(--gold);margin-top:5px}
.newsletter{height:170px;position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:0 max(8vw,90px);background:rgba(7,10,12,.28);color:#f4f2ee;border-top:1px solid rgba(179,154,104,.16)}
.newsletter h2{font-size:28px;line-height:1}
.newsletter .gold-rule{margin:10px 0 11px}
.newsletter p{font-size:13px;line-height:1.55;margin:0;color:#dedbd6}
.signup{display:flex;width:354px;height:40px}
.signup input{flex:1;background:rgba(0,0,0,.16);border:1px solid #77736c;border-right:0;color:#fff;padding:0 13px;font-size:11px;letter-spacing:.035em;outline:none}
.signup input::placeholder{color:#eee}
.signup button{width:135px;border:0;background:var(--gold);color:#fff;font-size:11px;letter-spacing:.045em}

.footer{height:74px;background:#080b0d;color:#e8e5df;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 4.4vw;font-size:10px;letter-spacing:.035em}
.socials,.footer-links{display:flex;gap:24px;align-items:center}
.socials svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
.socials svg path:first-child{fill:currentColor;stroke:none}.socials svg .cut{fill:#080b0d;stroke:none}.socials svg .cut-dot{fill:#080b0d;stroke:none}
.footer-links{justify-content:center}.copyright{text-align:right}.footer a:hover{color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:1200px){
  .site-header{padding:18px 30px}.nav{gap:26px}
  nav{gap:26px}.hero-book{right:7vw;width:292px}.hero-copy{left:8vw}
  .books-row{gap:14px;width:94vw}.shelf-book{width:17vw;flex-basis:17vw}
}
@media (max-width:900px){
  .site-header{height:76px;padding:15px 22px}.brand-mark{width:76px;height:102px;transform:translateY(4px)}nav{gap:15px;font-size:10px;flex-wrap:wrap;justify-content:flex-end}
  .hero{height:760px}.hero-copy{left:7vw;top:145px}.hero-book{width:300px;right:50%;top:405px;transform:translateX(50%)}h1{font-size:34px}
  .books-section{height:540px;padding-top:38px}.books-stage{height:360px}.books-row{gap:4px;width:96vw}.shelf-book{width:18.8vw;flex-basis:18.8vw}.shelf-board{bottom:10px;width:96vw}.button.outline{bottom:17px}
  .lower-world{background-position:center center}.author-section{height:500px}.author-copy{left:8vw;top:55px}.author-copy h2{font-size:28px}
  .newsletter{height:auto;min-height:230px;flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;padding:42px 8vw;background:rgba(7,10,12,.55)}.signup{width:min(100%,520px)}
  .footer{height:auto;min-height:120px;grid-template-columns:1fr;gap:18px;padding:22px 6vw;text-align:center}.copyright{text-align:center}.socials,.footer-links{justify-content:center}
}
@media (max-width:620px){
  .site-header{align-items:flex-start}.brand-mark{width:64px;height:86px;transform:translateY(2px)}nav{gap:10px;max-width:260px}
  .hero{height:800px;background-position:57% center}.hero-copy{top:120px}.hero-copy p{font-size:15px}h1{font-size:31px}.hero-book{top:400px;width:270px}
  .books-section{height:500px;padding:42px 8px 0}.books-heading h2{font-size:25px}.books-stage{height:335px;margin-top:16px}.books-row{gap:1px}.shelf-book{width:19.8vw;flex-basis:19.8vw}.shelf-board{width:100%;bottom:9px}.button.outline{bottom:16px}
  .lower-world{background-position:center center}.author-section{height:540px}.author-copy{left:8vw;top:60px}.author-copy p{font-size:15px}
  .newsletter{min-height:280px;padding:42px 8vw;background:rgba(7,10,12,.62)}.newsletter h2{font-size:25px}.signup{width:100%}.signup button{width:110px}
}


/* V28: active navigation item */
.site-header nav a.active,
header nav a.active,
nav a.active {
  color: var(--gold) !important;
}