:root{
  --bg:#F5F7FB; --text:#0F172A; --muted:#5B6472; --accent:#B11222;
  --card:#FFFFFF; --line:#E6EAF2; --chip:#EEF2F7; --max:1080px;
}
*,*:before,*:after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:16px/1.65 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif}
a{color:#0F172A;text-decoration:none} a:hover{opacity:.88}
img{max-width:100%;display:block}
h1,h2,h3{letter-spacing:.2px}
.small{font-size:.92rem;color:var(--muted)}
.container{max-width:var(--max);margin:0 auto;padding:1.25rem}
.section{padding:1.6rem 0;border-top:1px solid var(--line)}
header{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:blur(8px) saturate(1.2);border-bottom:1px solid var(--line);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav .brand{font-weight:800}
.nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.hero{padding:2rem 0 .8rem;border:0}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.hero h1{font-size:clamp(1.6rem,2.6vw,2.3rem);margin:.2rem 0 .6rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:.4rem 0 .8rem}
.chips span{background:var(--chip);border:1px solid var(--line);padding:.18rem .5rem;border-radius:.6rem;color:var(--muted);font-size:.9rem}
.portrait-card{place-self:center;max-width:clamp(170px,24vw,300px);aspect-ratio:3/4;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 8px 22px rgba(16,24,40,.15);background:#FFF}
.portrait-card img{width:100%;height:100%;object-fit:cover}
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.1rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;min-height:100%;box-shadow:0 6px 18px rgba(16,24,40,.06)}
.card figure{aspect-ratio:2/3;background:#F2F4F8}
.card img{width:100%;height:100%;object-fit:cover}
.card h3{font-size:1rem;margin:.8rem .9rem .35rem}
.card p{margin:0 .9rem 1rem;color:var(--muted)}
.btn{display:inline-block;background:#111827;color:#fff;border:1px solid #1F2937;padding:.55rem .8rem;border-radius:8px}
.sep{height:.75rem}
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:1.6rem;align-items:start}
.portrait-stack{position:relative;width:clamp(220px,30vw,340px);aspect-ratio:4/5;margin:auto}
.portrait-stack img{position:absolute;inset:auto;max-width:70%;border-radius:10px;border:1px solid var(--line);box-shadow:0 8px 24px rgba(16,24,40,.16)}
.portrait-stack img:first-child{left:0;top:0;transform:rotate(-2.2deg)}
.portrait-stack img:last-child{right:0;bottom:0;transform:rotate(1.8deg)}
footer{border-top:1px solid var(--line);margin-top:.5rem}
@media (max-width:880px){
  .hero-grid,.about-grid{grid-template-columns:1fr}
  .portrait-card{max-width:240px}
}