/* albertbonet.cat — estil */
:root{
  --bg:#121110; --bg2:#1b1916; --bg3:#24211d; --line:#34302a;
  --ink:#ece6da; --ink2:#b9b0a1; --muted:#8a8274;
  --gold:#d9b25f; --gold2:#f1c36a; --red:#a5242a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --w:1160px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold2);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3{font-weight:500;line-height:1.2;letter-spacing:.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.center{text-align:center}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--gold);color:#000;padding:8px 12px;z-index:99}

/* capçalera */
.top{position:sticky;top:0;z-index:20;background:rgba(18,17,16,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.brand{display:flex;flex-direction:column;color:var(--ink);line-height:1.1}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand-name{font-size:1.45rem;letter-spacing:.14em;text-transform:uppercase}
.brand-sub{font-family:var(--sans);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.nav{display:flex;align-items:center;gap:4px;font-family:var(--sans);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.nav a{color:var(--ink2);padding:10px 12px;border-radius:4px}
.nav a:hover,.nav a[aria-current]{color:var(--ink);text-decoration:none;background:var(--bg3)}
.nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--gold)}
.nav .lang{margin-left:10px;border:1px solid var(--gold);color:var(--gold)}
.nav .lang:hover{background:var(--gold);color:#111}
.dd{position:relative;display:inline-block}
.dd-menu{display:none;position:absolute;top:100%;left:0;min-width:240px;background:var(--bg2);border:1px solid var(--line);padding:6px;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:flex;flex-direction:column}
.menu-btn{display:none;font:inherit;font-family:var(--sans);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;background:none;color:var(--ink);border:1px solid var(--line);padding:8px 14px;border-radius:4px;cursor:pointer}

/* hero */
.hero{position:relative;min-height:58vh;display:flex;align-items:center;background:#000 url(/img/frontal.jpg) center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(18,17,16,.85))}
.hero-in{position:relative;z-index:1;width:100%}
.hero-tag{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.15;margin:0;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.hero-tag .f2{color:var(--gold)}
[data-frase] span{transition:opacity .6s ease}
[data-frase].fade span{opacity:0}
@media (prefers-reduced-motion:reduce){[data-frase] span{transition:none}}

/* seccions */
.section{padding:64px 24px}
.narrow{max-width:820px}
.kicker{font-family:var(--sans);font-size:.8rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin:0 0 28px}
.page-title{font-size:clamp(2rem,4vw,3rem);margin:0 0 .3em;text-transform:uppercase;letter-spacing:.08em}
.lead{font-size:1.15rem;color:var(--ink2);max-width:760px;margin-bottom:2em}
.crumb{font-family:var(--sans);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.light{font-weight:400;color:var(--ink2)}
.btn{display:inline-block;font-family:var(--sans);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;padding:12px 20px;border:1px solid var(--gold);color:var(--gold);border-radius:3px;margin:6px 8px 0 0}
.btn:hover{background:var(--gold);color:#111;text-decoration:none}
.btn-ghost{border-color:var(--line);color:var(--ink2)}
.link-arrow{font-family:var(--sans);font-size:.82rem;letter-spacing:.06em}

/* novetats */
.latest{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.feature{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:start;background:var(--bg2);border:1px solid var(--line);padding:24px;border-radius:6px}
.feature img{box-shadow:0 12px 30px rgba(0,0,0,.5)}
.feature h3{font-size:1.5rem;margin:.2em 0 .5em}
.feature h3 a{color:var(--ink)}
.card-quote{font-style:italic;color:var(--ink2)}
.band{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.author-teaser{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center;padding:64px 24px}
.author-teaser img{border-radius:4px;filter:grayscale(.15)}

/* graella de llibres */
.group-title{font-size:1.5rem;margin:56px 0 24px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.group-title a{color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.card{display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:var(--gold)}
.card-cover img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:top}
.card-body{padding:18px 18px 22px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.2rem;margin:0 0 .3em;text-transform:uppercase;letter-spacing:.04em}
.card h3 a{color:var(--ink)}
.card-sub{font-size:.95rem;color:var(--gold);margin:0 0 .5em}
.card .card-quote{font-size:.95rem;line-height:1.5}
.card-meta{font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:auto}
.card .link-arrow{margin-top:8px}

/* fitxa de llibre */
.book-top{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:56px;align-items:start}
.book-cover{margin:0;position:sticky;top:96px}
.book-cover img{box-shadow:0 20px 50px rgba(0,0,0,.6);border-radius:2px}
.book-head h1{font-size:clamp(2.2rem,4.5vw,3.4rem);margin:0;text-transform:uppercase;letter-spacing:.06em}
.book-sub{font-size:1.3rem;color:var(--gold);margin:.3em 0 0}
.book-quote{margin:28px 0 36px;padding:6px 0 6px 22px;border-left:3px solid var(--gold);font-size:1.25rem;font-style:italic;color:var(--ink2)}
.book h2{font-family:var(--sans);font-size:.8rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin:2em 0 1em}
.book-bottom{display:grid;grid-template-columns:1.2fr 1fr;gap:32px 56px;margin:40px 0;padding-top:24px;border-top:1px solid var(--line)}
.book-bottom .buy-box{grid-column:1/-1;background:var(--bg2);border:1px solid var(--line);padding:4px 28px 16px;border-radius:6px}
.fitxa{margin:0;font-size:.95rem}
.fitxa div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:8px 0;border-bottom:1px dotted var(--line)}
.fitxa dt{font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:4px}
.fitxa dd{margin:0}
.pend{color:var(--muted);font-style:italic}

/* autor */
.author-body{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:start}
.author-photo{margin:0;position:sticky;top:96px}
.author-photo img{border-radius:4px}
.prose p{max-width:68ch}
.prose p:last-child strong{display:block;font-size:1.2rem;color:var(--gold);font-weight:400;font-style:italic;margin-top:1em}

/* contacte */
.contact-big{list-style:none;padding:0;margin:0 0 40px}
.contact-big li{padding:18px 0;border-bottom:1px solid var(--line);font-size:1.2rem}
.contact-big span{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.contact-img{margin:0;max-width:520px}

/* peu */
.foot{border-top:1px solid var(--line);background:#0d0c0b;padding:48px 0 24px;font-size:.95rem}
.foot-in{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot-name{font-size:1.2rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .3em}
.contact-list{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:.88rem}
.contact-list li{padding:3px 0;color:var(--ink2)}
.ico{display:inline-block;width:1.6em;color:var(--gold)}
.foot-legal{margin-top:32px;padding-top:16px;border-top:1px solid var(--line);font-family:var(--sans);font-size:.75rem}

/* portada selector d'idioma */
.landing{min-height:100vh;background:#000 url(/img/frontal.jpg) center/cover no-repeat}
.land{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.8));padding:24px}
.land-tag{font-size:clamp(1.3rem,3vw,2rem);font-style:italic;color:var(--ink2);margin:0 0 1.2em}
.land-name{font-size:clamp(3rem,9vw,6.5rem);letter-spacing:.14em;text-transform:uppercase;margin:0;line-height:1}
.land-sub{font-family:var(--sans);letter-spacing:.35em;text-transform:uppercase;color:var(--gold);font-size:.85rem;margin:1.2em 0 2.4em}
.land-langs{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.land-langs a{font-family:var(--sans);letter-spacing:.2em;text-transform:uppercase;font-size:.9rem;padding:14px 34px;border:1px solid var(--gold);color:var(--ink);min-width:200px;background:rgba(0,0,0,.4)}
.land-langs a:hover{background:var(--gold);color:#111;text-decoration:none}

/* responsive */
@media (max-width:1020px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .latest{grid-template-columns:1fr}
}
@media (max-width:860px){
  body{font-size:18px}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg2);border-bottom:1px solid var(--line);padding:8px 16px 16px}
  .nav.open{display:flex}
  .nav a{padding:12px}
  .nav .lang{margin:8px 0 0;text-align:center}
  .dd{display:block}.dd-menu{display:flex;flex-direction:column;position:static;border:0;box-shadow:none;background:none;padding:0 0 0 16px}
  .book-top,.book-bottom,.author-body,.author-teaser{grid-template-columns:1fr}
  .book-cover,.author-photo{position:static;max-width:340px}
  .author-teaser img{max-width:260px}
  .section{padding:40px 20px}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr 1fr;gap:16px}
  .card-body{padding:12px}
  .card .card-quote{display:none}
  .feature{grid-template-columns:110px 1fr;padding:16px;gap:16px}
  .fitxa div{grid-template-columns:1fr;gap:0}
}