:root{
  
      --surface:#ffffff;
      --text:#222;
      --primary:#ffe4c4;
      --radius:16px;
      --shadow:0 8px 24px rgba(0,0,0,.12);
    }
.c{
  color: #222;
}
    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0; background:var(--bg); color:var(--text);
      font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      line-height:1.55; padding:24px;
    }

    .wrap{
      max-width:1200px; margin:0 auto; background:var(--surface);
      border-radius:var(--radius); box-shadow:var(--shadow); padding:28px;
    }

    .title{
      font-size:clamp(22px, 2.4vw, 32px);
      font-weight:700; color:var(--primary); text-align:center; margin:4px 0 20px;
    }

    /* hide radios but keep them focusable for a11y */
    .visually-hidden{
      position:absolute; width:1px; height:1px; margin:-1px; border:0; padding:0;
      clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap;
    }

    .content{
      display:grid; grid-template-columns:260px 1fr; gap:24px; min-height:520px;
    }

    /* TABS (LEFT ON DESKTOP) */
    .tabs{
      background:var(--surface); border:1px solid #ffe4c4; border-radius:14px; padding:8px;
      display:flex; flex-direction:column; gap:8px; position:sticky; top:24px; height:fit-content;
    }
    .tabs label{
      display:flex; align-items:center; gap:12px; padding:12px 14px;
      border-radius:12px; cursor:pointer; color:#333; font-weight:600;
      transition:transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
      user-select:none;
    }
    .tabs label i{ width:22px; text-align:center; }
    .tabs label:hover{ background:#f6f4ff; }
    .tabs label:active{ transform:scale(.98); }

    /* ACTIVE TAB STYLE (works for all breakpoints) */
    #tab1:checked ~ .content .tabs label[for="tab1"],
    #tab2:checked ~ .content .tabs label[for="tab2"],
    #tab3:checked ~ .content .tabs label[for="tab3"],
    #tab4:checked ~ .content .tabs label[for="tab4"],
    #tab5:checked ~ .content .tabs label[for="tab5"]{
      background:var(--primary); color:#000000; box-shadow:0 6px 18px rgba(0, 0, 0, 0.35);
    }

    /* PANELS */
    .panels{
      background:var(--surface); border:1px solid #eee; border-radius:14px; padding:18px;
    }
    .panel{ display:none; animation:fade .25s ease; }
    @keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

    /* show the matched panel */
    #tab1:checked ~ .content .panels #p1,
    #tab2:checked ~ .content .panels #p2,
    #tab3:checked ~ .content .panels #p3,
    #tab4:checked ~ .content .panels #p4,
    #tab5:checked ~ .content .panels #p5{ display:block; }

    .panel h2{
      margin:4px 0 12px; font-size:clamp(20px, 2.2vw, 28px); line-height:1.25;
    }
    .badges{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px; }
    .badge{
      font-size:12px; background:var(--primary-ghost); color:var(--primary);
      padding:6px 10px; border-radius:999px; border:1px solid #e2dcff;
      display:inline-flex; align-items:center; gap:6px;
    }

    .media{
      border-radius:14px; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.10);
      aspect-ratio: 16 / 9; background:#f4f4f6; margin-bottom:16px;
    }
    .media img{ width:100%; height:100%; object-fit:cover; display:block; }

    .grid{
      display:grid; gap:18px; grid-template-columns:1.2fr .8fr;
    }
    .desc{ color:#333; }
    .meta{
      background:#ffe4c4; border:1px solid #eee; border-radius:12px; padding:14px;
    }
    .meta h3{ margin:0 0 10px; font-size:16px; }
    .meta ul{ margin:0; padding-left:18px; }
    .meta li{ margin:6px 0; color:#444; }

    /* MOBILE / TABLET */
    @media (max-width: 900px){
      .content{ grid-template-columns:1fr; }
      .tabs{
        position:static; flex-direction:row; gap:10px; padding:8px; overflow-x:auto;
        border-radius:12px; scrollbar-width:none;
      }
      .tabs::-webkit-scrollbar{ display:none; }
      .tabs label{
        flex:0 0 auto; padding:10px 12px; background:#fff; border:1px solid #eee;
      }
      /* active tab on mobile */
      #tab1:checked ~ .content .tabs label[for="tab1"],
      #tab2:checked ~ .content .tabs label[for="tab2"],
      #tab3:checked ~ .content .tabs label[for="tab3"],
      #tab4:checked ~ .content .tabs label[for="tab4"],
      #tab5:checked ~ .content .tabs label[for="tab5"]{
        background:var(--primary); color:#fff; border-color:transparent;
      }
      .grid{ grid-template-columns:1fr; }
    }