:root{
    --brand-blue: #1e3a8a;
    --brand-blue-600:#1d4ed8;
    --brand-gold: #cfa63a;
    --brand-gold-700:#b88e22;

    --bg: #f7f8fb;
    --surface: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --border: #e5e7eb;
    --radius: 14px;
    --shadow: 0 12px 28px rgba(0,0,0,.08);
  }

  *,*::before,*::after{ box-sizing:border-box }
  html:focus-within{ scroll-behavior:smooth }
  body{ margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial; color:var(--text); background:var(--bg); line-height:1.2 }
  img,svg,video{ max-width:100%; height:auto; display:block }
  a{ color:inherit; text-decoration:none }
  button{ font:inherit }
  :focus{ outline:2px solid var(--brand-blue-600); outline-offset:2px }

  /* Header */
  .site-header{ position:relative; background:transparent; }
  .header-media{ position:relative; }
  .header-img{ width:100%; height:auto; }

  /* Mobile hamburger below header */
  .mobile-menu-toggle{
    text-align:center;
    margin:12px 0;
  }
  .menu-toggle{
    display:none;
    align-items:center; gap:8px; cursor:pointer;
    padding:.55rem .8rem;
    border-radius:10px;
    border:1px solid var(--brand-blue-600);
    background:var(--brand-blue);
    color:#fff;
  }
  @media (max-width: 1023px){
    .menu-toggle{ display:inline-flex; }
  }

  .shell{
    max-width:1200px; margin:18px auto; padding:0 20px;
    display:grid; grid-template-columns: 260px 1fr; gap:22px;
  }

  .sidebar{ position:relative }
  .nav-card{
    top:18px; background:var(--surface);
    border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
    overflow:hidden;
  }
  .nav-card header{
    padding:14px 16px; font-weight:600; color:var(--brand-blue);
    background: linear-gradient(180deg,#fafafa,#f1f5f9);
    border-bottom:1px solid var(--border);
  }
  .nav-primary{ padding:8px }
  .nav-primary ul{ list-style:none; margin:0; padding:0 }
  .nav-primary li {
	  margin: 0;
	}

  .nav-primary a{
    display:flex; align-items:center; gap:10px;
    padding:6px 12px; line-height: 1.2; border-radius:10px; color:var(--text);
    border:1px solid transparent;
  }
  .nav-primary a:hover{ background:#f7f8ff; border-color:#e0e7ff; }
  .nav-primary a[aria-current="page"]{
    background: linear-gradient(180deg, #fff7e6, #fff2cc);
    border-color:#fde68a; color:#7a5a13; font-weight:600;
  }
  
  .nav-primary i {
	  width: 22px;
	  text-align: center;
	  color: #b88e22;         /* soft gold */
	  opacity: 0.9;
	  transition: transform 0.25s ease, color 0.25s ease;
	}

	.nav-primary a:hover i {
	  color: #1d4ed8;         /* brand blue */
	  transform: scale(1.15) rotate(-4deg);
	}

  .content{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); overflow:hidden;
  }
  .content header{
    padding:18px 20px; border-bottom:1px solid var(--border);
    background:linear-gradient(180deg,#fafafa,#f1f5f9);
  }
  .content header h2{ margin:0; font-size: clamp(20px,2.2vw,26px) }
  .body{ padding:20px; display:grid; gap:18px;  }
  .body a{ color:blue; text-decoration:underline }
  .callout{
    padding:14px 16px; border:1px dashed #cbd5e1; background:#f8fafc; border-radius:12px;
  }
  .cta{
    display:inline-block; padding:.65rem 1rem;
    background:linear-gradient(180deg,var(--brand-blue),var(--brand-blue-600));
    color:#fff; border-radius:10px; border:1px solid #173584;
  }
  .cta:hover{ filter:brightness(1.05) }

  .site-footer{ margin-top:26px; background:#0b1220; color:#cbd5e1 }
  .footer-inner{ max-width:1200px; margin:0 auto; padding:22px 20px; display:grid; gap:16px; }
  .footer-menu{ display:flex; flex-wrap:wrap; gap:10px 16px }
  .footer-menu a{ padding:8px 10px; border-radius:8px; color:#cbd5e1; border:1px solid rgba(255,255,255,.08) }
  .footer-menu a:hover{ background:rgba(255,255,255,.06) }
  .copyright small{ color:#9fb0c9 }
  
  .social-icons {
	  display: flex;
	  justify-content: center;
	  gap: 1px;
	  margin-bottom: 12px;
	}

	.social-icons a img {
	  width: 28px;
	  height: 28px;
	  transition: transform 0.2s ease, filter 0.2s ease;
	}

	.social-icons a img:hover {
	  transform: scale(1.15);
	  filter: brightness(1.2);
	}
	
	.roundbox {
		border:2px solid blue;
		border-radius:10px;
		padding: 0 12px;
	}

  @media (max-width: 1023px){
    .shell{ grid-template-columns: 1fr; gap:18px; }

    /* Off-canvas sidebar */
    .sidebar{
      position:fixed; inset:0 20% 0 0; max-width:320px;
      translate:-100% 0; transition:translate .25s ease; z-index:9998;
    }
    .sidebar.open{ translate:0 0; }
    .nav-card{ height:100%; border-radius:0; top:0; box-shadow: 10px 0 30px rgba(0,0,0,.2) }

    .offcanvas-backdrop{
      position:fixed; inset:0; background:rgba(0,0,0,.45);
      opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:9997;
    }
    .offcanvas-backdrop.show{ opacity:1; pointer-events:auto; }

  }
  
 

  .wrap{
    margin-inline: auto;
    max-width: 1100px;
    padding: 1rem;
  }
  
    .wrap a{ color:blue; text-decoration:underline }

  .two-col{
    display: grid;
    grid-template-columns:
      clamp(220px, 25%, 380px)
      1fr;
    gap: 1rem;
    align-items: start;
  }

  @media (max-width: 800px) {
    .two-col{
      grid-template-columns: 1fr;   /* stack */
    }
  }