body{margin:0;font-family:Arial,sans-serif;background:#f7f2ef;color:#333}
.hero{text-align:center;padding:40px 20px;background:linear-gradient(180deg,#fff,#f7f2ef)}
.logo{max-width:180px}
.hero h1{color:#7b1023;margin:10px 0 0}
.hero p{color:#777}
.story-grid,.segment-list{display:grid;gap:14px;max-width:1000px;margin:auto;padding:20px}
.story-btn,.segment-btn,.nav-btn{
padding:16px;border:none;border-radius:16px;text-decoration:none;
background:white;box-shadow:0 4px 12px rgba(0,0,0,.08);cursor:pointer;
font-size:16px;font-weight:600;color:#333
}
.available{background:#7b1023;color:white}
.container{max-width:1000px;margin:auto;padding:20px}
.card{background:white;border-radius:20px;padding:20px;margin-bottom:20px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
audio{width:100%}
.nav-row{display:flex;gap:10px;margin-bottom:15px}
.segment-btn:hover,.story-btn:hover{transform:translateY(-2px)}
@media(min-width:768px){
.story-grid,.segment-list{grid-template-columns:repeat(2,1fr)}
}