html,body{
      height:100%
    }

    body{
      margin:0; color:#e9ecff; 
      background-color: #ff7a59; 
      font-family: "Merriweather", serif;
      line-height:1.6;
    }

    .container{max-width:1100px; padding:24px; margin:0 auto;}


    header{
      display:grid; gap:24px; align-items:center;
      grid-template-columns: 1.2fr 1fr;
      padding: 36px 0 8px;
    }

    .title{
      font-family: "Merriweather", serif;
      font-weight:700; 
      font-size: clamp(32px, 7vw, 56px);
      line-height:1.1; 
      margin:0 0 12px;
      letter-spacing: .5px;
      color: #e9ecff;
    }

    .subtitle{
      margin:0; 
      color:#0d1020; 
      font-weight:600; 
      font-size: clamp(16px, 2.4vw, 20px)
    }

    .hero-card{
      background-color: #ffd166;
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 500px;
      box-shadow: #ff7a59; 
      overflow:hidden; position:relative;
    }

    .hero-img{
      display:block; 
      width:100%; 
      height:100%; 
      object-fit:cover; 
      aspect-ratio: 4/3;
    }
   
    .card{
      background:#ffd166; 
      border:1px solid rgba(255,255,255,.08); 
      border-radius:50px; 
      box-shadow: #7aa2f7;}

    .card-inner{
      padding:22px 22px;
    }

    .chip{
      display:inline-block; 
      padding:6px 12px; 
      border-radius:999px; 
      font-size:13px; 
      font-weight:600; 
      color:ghostwhite;
      background: #0b1412;
    }
   
    section{
      margin: 28px 0
    }

    h2{
      color: #0f1226;
      font-family: "DM Sans", sans-serif;
      font-weight:700; 
      letter-spacing:.4px; 
      margin:0 0 14px;
    }


    .list{
      display:grid; 
      gap:12px; 
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      margin-top:10px;
    }
    .list .item{
      padding:14px 14px; 
      border-radius:14px; 
      border:1px dashed rgba(255,255,255,.15); 
      background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.08));}

   .item-title{
    color: #0d1020;
    display:block; 
    margin-bottom:4px; 
    font-weight:700;
  }

  p{
    color: #7aa2f7;
  }

  .assignments li a{
  display:block; 
  padding:4px 0; 
  text-decoration:none;
}