:root {
      --bg1: #fdf6ec;
      --bg2: #e6f0ea;
      --brand1: #a57c65;
      --brand2: #8fa89f;
      --paper: #ffffff;
      --ink: #3b3b3b;
      --accent: #8b6f61;
      --muted: #e2dcd6;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: 'Proxima Nova', 'Agrandir', sans-serif;
      background: linear-gradient(135deg, var(--bg1), var(--bg2));
      color: var(--ink);
    }

    /* Hide radio buttons */
    .state-radio {
      display: none;
    }

    /* TOP BAR */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 10;
      background: rgba(255, 255, 255, 0.65);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(226, 220, 214, 0.8);
    }

    .topbar-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 16px 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      font-family: 'Playfair Display', serif;
      font-weight: 700;
      letter-spacing: 1px;
      color: var(--accent);
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
    }

    /* TAB BUTTONS */
    .tabs {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .tab-btn {
      cursor: pointer;
      border: none;
      font-size: 13px;
      padding: 6px 14px;
      border-radius: 20px;
      background: rgba(165, 124, 101, 0.12);
      color: var(--accent);
      transition: 0.50s ease;
      display: inline-block;
      user-select: none;
      text-decoration: none;
    }

    .tab-btn:hover { background: rgba(165, 124, 101, 0.20); }

    /* Active Tab Styling via Radio Buttons */
    #tab-home-radio:checked ~ .topbar .tab-btn[for="tab-home-radio"],
    #tab-childhood-radio:checked ~ .topbar .tab-btn[for="tab-childhood-radio"],
    #tab-teenage-radio:checked ~ .topbar .tab-btn[for="tab-teenage-radio"],
    #tab-college-radio:checked ~ .topbar .tab-btn[for="tab-college-radio"],
    #tab-blog-radio:checked ~ .topbar .tab-btn[for="tab-blog-radio"],
    #tab-social-radio:checked ~ .topbar .tab-btn[for="tab-social-radio"],
    #tab-auto-radio:checked ~ .topbar .tab-btn[for="tab-auto-radio"],
    #tab-albums-radio:checked ~ .topbar .tab-btn[for="tab-albums-radio"] {
      background: rgba(165, 124, 101, 0.30);
      font-weight: 700;
    }

    /* HERO */
    .hero {
      background: linear-gradient(135deg, var(--brand1), var(--brand2));
      color: #fff;
      padding: 70px 16px 55px;
    }

    .hero-inner {
      max-width: 1050px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.3fr 0.7fr;
      gap: 18px;
      align-items: center;
    }

    .hero h1 {
      font-family: 'Playfair Display', serif;
      font-size: 44px;
      margin: 0 0 12px;
      letter-spacing: 2px;
    }

    .hero p {
      margin: 0 0 18px;
      line-height: 1.7;
      opacity: 0.95;
      max-width: 62ch;
    }

    .cta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
    }

    .btn {
      display: inline-block;
      text-decoration: none;
      font-size: 14px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      color: #fff;
      background: rgba(255, 255, 255, 0.16);
      transition: 0.25s ease;
      cursor: pointer;
    }

    .btn:hover { background: rgba(255, 255, 255, 0.28); }

    .btn-primary {
      background: #fff;
      color: var(--accent);
      border-color: #fff;
      font-weight: 600;
    }

    .btn-primary:hover { opacity: 0.92; }

    .hero-side {
      display: flex;
      flex-direction: column;
      gap: 14px;
      align-items: center;
      justify-content: center;
    }

    .hero-img {
      width: 220px;
      height: 220px;
      object-fit: cover;
      border-radius: 50%;
      border: 5px solid rgba(255, 255, 255, 0.85);
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
    }

    .hero-card {
      width: 100%;
      background: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.30);
      border-radius: 18px;
      padding: 18px 16px;
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.10);
    }

    .hero-card h3 {
      margin: 0 0 8px;
      font-size: 16px;
      letter-spacing: 0.5px;
    }

    .hero-card ul {
      margin: 0;
      padding-left: 18px;
      line-height: 1.7;
      font-size: 14px;
      opacity: 0.95;
    }

    /* WRAP */
    .wrap {
      max-width: 1050px;
      margin: -35px auto 60px;
      padding: 0 16px;
    }

    /* FIRST PAGE CARDS PANEL */
    .panel {
      background: var(--paper);
      border-radius: 18px;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
      padding: 22px 18px;
      border: 1px solid rgba(226, 220, 214, 0.7);
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
    }

    .card {
      grid-column: span 6;
      background: #fff;
      border: 1px solid rgba(226, 220, 214, 0.8);
      border-radius: 16px;
      padding: 18px 16px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    }

    .card h2 {
      font-family: 'Lora', serif;
      color: var(--accent);
      margin: 0 0 10px;
      font-size: 20px;
    }

    .card p {
      margin: 0 0 10px;
      line-height: 1.8;
      text-align: justify;
      text-indent: 2em;
      font-size: 15px;
    }

    /* Read button */
    .read-btn{
      display:inline-block;
      border:none;
      cursor:pointer;
      font-size: 13px;
      color: var(--accent);
      background: rgba(139,111,97,0.10);
      padding: 8px 14px;
      border-radius: 999px;
      text-decoration:none;
      transition: 0.25s ease;
    }
    .read-btn:hover{ background: rgba(139,111,97,0.18); }

    /* TAB CONTENT SECTIONS */
    .section-full {
      display: block !important; /* Forces the content to show up */
      background: #fff;
      border: 1px solid rgba(226, 220, 214, 0.8);
      border-radius: 18px;
      padding: 22px 18px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
      margin-top: 20px;
    }

    .hero-img, .life-portrait {
      cursor: pointer;
    }

    /* Section Visibility Logic */
    #tab-home-radio:checked ~ .wrap #tab-home,
    #tab-childhood-radio:checked ~ .wrap #tab-childhood,
    #tab-teenage-radio:checked ~ .wrap #tab-teenage,
    #tab-college-radio:checked ~ .wrap #tab-college,
    #tab-blog-radio:checked ~ .wrap #tab-blog,
    #tab-social-radio:checked ~ .wrap #tab-social,
    #tab-auto-radio:checked ~ .wrap #tab-auto,
    #tab-albums-radio:checked ~ .wrap #tab-albums {
      display: block;
    }

    .section-full h2 {
      font-family: 'Lora', serif;
      color: var(--accent);
      margin: 0 0 10px;
    }

    .section-full p {
      font-size: 15px;
      line-height: 1.8;
      text-align: justify;
      text-indent: 2em;
      margin-bottom: 14px;
    }

    sup {
      font-size: 10px;
      color: #8fa89f;
      font-weight: bold;
    }

    .divider {
      border: none;
      height: 1px;
      background: var(--muted);
      margin: 24px 0;
    }

    /* Next/Prev */
    .nav-row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top: 18px;
    }
    .nav-btn {
      display: inline-block;
      cursor: pointer;
      padding: 10px 14px;
      background-color: #8b6f61;
      color: #fff;
      border-radius: 5px;
      text-decoration: none;
      transition: 0.3s;
      border:none;
      font-size: 14px;
      user-select: none;
    }
    .nav-btn:hover { background-color: #6d4f39; }

    footer {
      background: var(--accent);
      color: #fff;
      padding: 22px 16px;
      text-align: center;
      font-size: 13px;
    }

    footer a {
      color: #fff;
      text-decoration: none;
    }

    /* ===== Portrait image on the RIGHT (Childhood/Teenage/College) ===== */
    .life-row{
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 18px;
      align-items: start;
      margin-top: 12px;
    }
    .life-row a img {
      cursor: pointer;
      transition: 0.3s;
    }
    .life-row a img:hover {
      opacity: 0.8;
      transform: scale(1.02);
    }
    .life-portrait{
      width: 100%;
      height: 380px;
      object-fit: cover;
      border-radius: 16px;
      border: 1px solid rgba(226, 220, 214, 0.8);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
      display: block;
    }

    /* ===== Albums (click category to show 3 photos) ===== */
    .album-buttons{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 10px 0 16px;
    }
    .album-btn{
      cursor: pointer;
      border: none;
      font-size: 14px;
      padding: 10px 16px;
      border-radius: 999px;
      background: rgba(139,111,97,0.12);
      color: var(--accent);
      transition: 0.25s ease;
      font-weight: 600;
      display: inline-block;
      user-select: none;
    }
    .album-btn:hover{ background: rgba(139,111,97,0.18); }

    /* Album Active Styling */
    #album-me-radio:checked ~ .album-buttons .album-btn[for="album-me-radio"],
    #album-family-radio:checked ~ .album-buttons .album-btn[for="album-family-radio"],
    #album-friends-radio:checked ~ .album-buttons .album-btn[for="album-friends-radio"],
    #album-music-radio:checked ~ .album-buttons .album-btn[for="album-music-radio"],
    #album-movies-radio:checked ~ .album-buttons .album-btn[for="album-movies-radio"],
    #album-shows-radio:checked ~ .album-buttons .album-btn[for="album-shows-radio"],
    #album-dream-radio:checked ~ .album-buttons .album-btn[for="album-dream-radio"], 
    #album-bucket-radio:checked ~ .album-buttons .album-btn[for="album-bucket-radio"] {
      background: rgba(139,111,97,0.30);
    }

    .album-grid{
      display: none;
      grid-template-columns: repeat(12, 1fr);
      gap: 15px;
      margin: 20px 0;
    }

    #album-me-radio:checked ~ #album-me {
     display: grid;
    }

    /* Album Grid Visibility */
    #album-me-radio:checked ~ #album-me,
    #album-family-radio:checked ~ #album-family,
    #album-friends-radio:checked ~ #album-friends,
    #album-music-radio:checked ~ #album-music,
    #album-movies-radio:checked ~ #album-movies,
    #album-shows-radio:checked ~ #album-shows,
    #album-dream-radio:checked ~ #album-dream,
    #album-bucket-radio:checked ~ #album-bucket{
      display: grid !important;
    }

    .album-item{
      grid-column: span 4;
      background:#fff;
      border: 1px solid rgba(226, 220, 214, 0.8);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
      transition: transform 0.3s ease;
    }
    .album-item img{
      width:100%;
      height:400px;
      object-fit:cover;
      display:block;
    }
    .album-item:hover {
      transform: translateY(-5px);
    }
    .album-caption{
      padding: 10px 12px;
      font-size: 14px;
      color: var(--accent);
      font-weight: 600;
      text-align: center;
    }

    @media (max-width: 600px) {
      .hero-inner { grid-template-columns: 1fr; }
      .card { grid-column: span 12; }
      .hero h1 { font-size: 38px; }
      .hero-side { margin-top: 10px; }
      .hero-img { width: 200px; height: 200px; }

      .life-row{ grid-template-columns: 1fr; }
      .life-portrait{ height: 320px; }

      .album-item{ grid-column: span 12; }
    
   /* Hide all nav buttons first */
      .nav-row .nav-btn {
        display: none;
      }

      /* WHEN MYSELF IS ACTIVE */
      #album-me-radio:checked ~ .nav-row .prev-me,
      #album-me-radio:checked ~ .nav-row .next-me {
        display: inline-block;
      }

      /* WHEN FAMILY IS ACTIVE */
      #album-family-radio:checked ~ .nav-row .prev-family,
      #album-family-radio:checked ~ .nav-row .next-family {
        display: inline-block;
      }

      /* WHEN FRIENDS IS ACTIVE */
      #album-friends-radio:checked ~ .nav-row .prev-friends,
      #album-friends-radio:checked ~ .nav-row .next-friends {
        display: inline-block;
      }

      /* WHEN FRIENDS IS ACTIVE */
      #album-music-radio:checked ~ .nav-row .prev-music,
      #album-music-radio:checked ~ .nav-row .next-music {
        display: inline-block;
      }
      
            /* WHEN MOVIES IS ACTIVE */
      #album-movies-radio:checked ~ .nav-row .prev-movies,
      #album-movies-radio:checked ~ .nav-row .next-movies {
        display: inline-block;
      }

            /* WHEN FRIENDS IS ACTIVE */
      #album-shows-radio:checked ~ .nav-row .prev-shows,
      #album-shows-radio:checked ~ .nav-row .next-shows {
        display: inline-block;
      }

            /* WHEN FRIENDS IS ACTIVE */
      #album-dream-radio:checked ~ .nav-row .prev-dream,
      #album-dream-radio:checked ~ .nav-row .next-dream {
        display: inline-block;
      }
            /* WHEN FRIENDS IS ACTIVE */
      #album-bucket-radio:checked ~ .nav-row .prev-bucket,
      #album-bucket-radio:checked ~ .nav-row .next-bucket {
        display: inline-block;
      }
        #album-beats {
        display: none;
      }

      #album-beats-radio:checked ~ #album-beats {
        display: grid;
      }
      
      

}