/* v1.7.3 – Variant B (Modern): Covers left, text right, balanced hero */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Playfair+Display:wght@700;800&display=swap');

:root{
  --ink:#2A241C; --charcoal:#3A342C; --head:#1E1913;
  --gold:#8C7131; --pine:#0A1C0F;
  --paper:#D8D3C4; --surface:#E5E1D5; --line:#CFCAB9; --lilac:#C9CBDC;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.68;letter-spacing:.2px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

header{position:sticky;top:0;z-index:40;background:rgba(216,211,196,.92);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line);padding:12px 18px}
nav a{margin-right:16px;color:var(--pine);text-decoration:none}
nav a:hover{opacity:.9}

.container{max-width:1120px;margin:0 auto;padding:0 18px}

h1,h2,h3{font-family:'Playfair Display',serif;color:var(--head)}
h1{font-size:46px;line-height:1.14;margin:0 0 10px 0;font-weight:800}
h2{font-size:32px;margin:0 0 8px 0}
p.lead{font-size:18px;color:var(--charcoal);margin:0}

.button{display:inline-block;background:var(--pine);color:#fff;border:1px solid #07140b;border-radius:14px;padding:10px 14px;margin-right:8px;box-shadow:0 6px 14px rgba(10,28,15,.22);text-decoration:none}
.button--ghost{background:transparent;color:var(--pine)}

.section{padding:64px 0}

/* === HERO – Variant B === */
.hero{
  padding:68px 0;
  background:
    radial-gradient(1100px 420px at 15% -8%, rgba(10,28,15,.08), transparent 60%),
    linear-gradient(180deg,var(--lilac) 0%, var(--paper) 85%);
}
.hero-grid{
  display:grid;gap:28px;align-items:center;
  grid-template-columns: 1fr 1.1fr;
}
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr}
}

.covers-wrap{display:flex;align-items:center;gap:0}
.covers-wrap img{
  height:190px; width:auto; aspect-ratio:3/4;
  border-radius:14px; border:1px solid var(--line);
  box-shadow:0 10px 22px rgba(42,42,42,.18);
  object-fit:cover; background:#eee;
}
.covers-wrap img + img{margin-left:-22px}
@media(max-width:700px){
  .covers-wrap img{height:150px}
  .covers-wrap img + img{margin-left:-16px}
}

.hero-text .sub{font-size:16px;color:var(--charcoal);margin-bottom:12px}
.hero-actions{margin-top:14px}

/* PROJECTS */
.projects-grid{display:grid;gap:22px}
@media(min-width:900px){.projects-grid{grid-template-columns:repeat(2,1fr)}}
.project-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 8px 18px rgba(42,42,42,.12)}
.progress{height:8px;background:#ddd;border-radius:6px;overflow:hidden;margin:10px 0}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#AE9051);width:0}
button{background:var(--pine);color:#fff;border:1px solid #07140b;border-radius:10px;padding:10px 14px;cursor:pointer;box-shadow:0 6px 14px rgba(10,28,15,.22)}
button:hover{opacity:.92}

/* FOOTER */
footer{padding:36px 0;border-top:1px solid var(--line);background:var(--surface);color:var(--charcoal)}