/* style_v2.css - Story Page Redesign */

body{
  margin:0;
  background:#ffffff;
  color:#333;
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.7;
}
header{text-align:center;padding:20px 0 10px;}
h1{margin:0;color:#4B2E83;font-size:2.5rem;}
.tagline{margin-top:8px;color:#666;font-style:italic;}
nav{background:#4B2E83;}
.menu{
  display:flex;
  justify-content:center;
  list-style:none;
  margin:0;
  padding:0;
}

@media(max-width:800px){
  .menu{
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .menu::-webkit-scrollbar{
    display:none;
  }

  .menu a{
    flex:0 0 auto;
  }
}
.menu a{display:block;padding:15px 24px;color:#fff;text-decoration:none;font-weight:bold}
.menu a:hover,.menu a.active{background:#FFD54A;color:#4B2E83;}
main{max-width:1280px;margin:50px auto;padding:0 30px;}
footer{margin-top:60px;padding:20px;text-align:center;background:#ece6dc;}

.chapter{margin:70px 0;}
.chapter-title{
  padding:18px 24px;
  border-radius:18px;
  font-size:2rem;
  color:#2f2f2f;
}
.chapter-subtitle{
  margin:12px 8px 30px;
  color:#666;
  font-style:italic;
}

.education .chapter-title{background:#DCEEFF;}
.family .chapter-title{background:#DEF5DF;}
.retirement .chapter-title{background:#FFF3C9;}
.present .chapter-title{background:#EFE0FF;}

.card-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
 gap:30px;
}

.story-card{
 border-radius:18px;
 overflow:hidden;
 box-shadow:none;
 transition:.25s;
}
.story-card:hover{
 transform:none;
 box-shadow:none;
}

/* THE IMPORTANT PART: COLORED CARDS */
.education .story-card{background:#DCEEFF;border:3px solid #222;}
.family .story-card{background:#DEF5DF;border:3px solid #222;}
.retirement .story-card{background:#FFF3C9;border:3px solid #222;}
.present .story-card{background:#EFE0FF;border:3px solid #222;}

.photo-placeholder{
 height:170px;
 background:rgba(255,255,255,.40);
 border-bottom:3px solid rgba(0,0,0,.20);
 position:relative;
}
.photo-placeholder:before{
 content:"";
 position:absolute;
 inset:18px;
 border:2px dashed rgba(0,0,0,.15);
 border-radius:12px;
}

.story-content{padding:24px;}
.story-card h4{
 margin:0;
 color:#4B2E83;
 font-size:1.5rem;
}
.story-years{
 margin:8px 0 18px;
 font:bold .95rem Arial,Helvetica,sans-serif;
 color:#666;
}

@media(max-width:800px){
 .card-grid{grid-template-columns:1fr;}
}



/* ==========================================================
   Installed Photographs (Version 4 - 3:2 aspect ratio)
   ========================================================== */

.photo-frame{
  aspect-ratio:4 / 3;
  padding:18px;
  box-sizing:border-box;
  border-bottom:3px solid rgba(0,0,0,.20);
}

.photo-frame-wide{
  aspect-ratio:16 / 9;
  padding:18px;
  box-sizing:border-box;
  border-bottom:3px solid rgba(0,0,0,.20);
}

.photo-mat{
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:12px;
}

.photo-mat img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:12px;
  border:2px solid #222;
  box-sizing:border-box;
}