:root{--plum:#4b2142;--bone:#f5efe7;--ink:#222;--ink-soft:#555;--accent:#6f2b5f;--white:#fff}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-serif, Georgia, 'Times New Roman', serif;color:var(--ink);background:var(--bone)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width: 920px; margin: 0 auto; padding: 24px;}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;background:var(--white);border-bottom:1px solid rgba(0,0,0,.06);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:36px;height:36px;border-radius:8px;background: linear-gradient(135deg, var(--plum), var(--accent));display:flex;align-items:center;justify-content:center;color:var(--bone);font-weight:700;font-size:18px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.nav a{margin-left:16px;font-size:15px}
.hero{display:grid;grid-template-columns: 1fr;gap:24px;align-items:center;padding:32px 24px}
.card{background:var(--white);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:24px}
.h1{font-size: clamp(28px, 3vw, 40px); margin:0 0 8px 0; color:var(--plum)}
.h2{font-size: 22px; margin: 0 0 8px 0; color:var(--plum)}
.p{font-size: 17px; line-height:1.6; color:var(--ink-soft)}
.buttons{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px}
.btn{display:inline-block; padding:12px 16px; border-radius:999px; font-weight:600;background:var(--plum); color:var(--bone); border:2px solid var(--plum)}
.btn.secondary{background:transparent; color:var(--plum); border-color:var(--plum)}
.btn:hover{transform: translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.12)}
.grid{display:grid; grid-template-columns:1fr; gap:24px}
.latest{margin-top: 8px; padding: 16px; border-left: 4px solid var(--accent); background: #fff;border-radius:12px}
.footer{padding: 24px; text-align:center; color:#777; font-size:14px}
.cover{
  display:block;
  width:100%;
  max-width:600px; /* larger for desktop */
  height:auto;     /* preserve aspect ratio */
  object-fit:contain; /* no cropping */
  background:none;
  border-radius:0;
  box-shadow:none;
}
.hero-wrap{ display:grid; grid-template-columns: 1fr; gap:24px; align-items:center; }
@media (min-width: 880px){ .hero-wrap{ grid-template-columns: 0.9fr 1.1fr } }
.post-meta{ color:#777; font-size:14px; margin-bottom:8px }
.post-title{ margin:0 0 8px 0; font-size:26px; color:var(--plum) }
.post{ background:var(--white); padding:24px; border-radius:16px; box-shadow: 0 8px 24px rgba(0,0,0,.08) }
.list-item{ padding:16px; background:#fff; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.05) }


.hero-wrap img{max-width:100%; height:auto}
.hero .card, .hero, .container{overflow:visible}


/* Frame to guarantee no clipping and add breathing room */
.cover-frame{
  display:inline-block;
  padding:12px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.cover{
  display:block;
  width:100%;
  max-width:600px; /* larger for desktop */
  height:auto;     /* preserve aspect ratio */
  object-fit:contain; /* no cropping */
  background:none;
  border-radius:0;
  box-shadow:none;
}

/* no overflow clipping */
.hero, .hero .card, .hero-wrap, .container { overflow: visible; }
.hero-wrap img { max-width: 100%; height: auto; }


@media (min-width: 980px){
  .hero-wrap{ grid-template-columns: 1.25fr 0.75fr; } /* give the cover more room */
}



.h1, .h2, .post-title{
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 0.2px;
}



@media (min-width: 1100px){
  .hero-wrap{ grid-template-columns: 1.5fr 0.8fr; gap: 36px; }
  .hero-text{ max-width: 560px; }
}
@media (min-width: 1400px){
  .hero-wrap{ grid-template-columns: 1.6fr 0.8fr; }
  .hero-text{ max-width: 580px; }
}
/* Make headings a touch larger on desktop */
@media (min-width: 1100px){
  .h1{ font-size: 44px; }
}
/* Keep paragraphs readable */
.hero-text .p{ max-width: 60ch; }



/* Taller homepage cover on wide screens */
@media (min-width: 1100px){
  .home-hero .cover{
    height: min(90vh, 1100px);
    width: auto;
    max-width: none; /* allow height to drive scaling */
  }
}



/* Ensure the hero grid doesn't vertically center content */
.hero-wrap{ align-items: start; }

/* On wide screens, scale the cover by height so it matches tall text */
@media (min-width: 1100px){
  .home-hero .cover{
    height: min(95vh, 1200px); /* taller than before */
    width: auto !important;    /* override any inline width */
    max-width: none !important;
  }
}