/* -----------------------------------------------------------
   ROOT VARIABLES
----------------------------------------------------------- */
:root{
  --sidebar-w: 220px;
  --bg-soft: #FBFEFE;
  --text: #243344;
  --muted: #6f7a82;
  --accent: #0B6FAF;
  --max-content: 1100px;
}

/* -----------------------------------------------------------
   BASE / RESET
----------------------------------------------------------- */
* { box-sizing: border-box; }
html, body {
  margin:0;
  height:100%;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg-soft);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}

img, svg, iframe {
  max-width:100%;
  height:auto;
  display:block;
}

/* -----------------------------------------------------------
   LAYOUT
----------------------------------------------------------- */
.app {
  display:flex;
  min-height:100vh;
  width:100%;
}

.content {
  flex:1;
  min-height:100vh;
  padding:36px;
  margin-left:var(--sidebar-w);
}

main {
  max-width:var(--max-content);
  margin:0 auto;
  width:100%;
}

/* -----------------------------------------------------------
   SIDEBAR (DESKTOP)
----------------------------------------------------------- */
.sidebar {
  width:var(--sidebar-w);
  min-width:var(--sidebar-w);
  background:#fff;
  border-right:1px solid rgba(0,0,0,0.06);
  padding:22px 18px 80px;
  position:fixed;
  top:0; left:0; bottom:0;
  display:flex;
  flex-direction:column;
  gap:18px;
  overflow-y:auto;
  z-index:999;
}

.logo img { max-width:160px; }

.primary-nav ul {
  margin:0; padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.primary-nav a {
  padding:10px 12px;
  text-decoration:none;
  border-radius:8px;
  color:var(--text);
  display:block;
  transition:0.15s;
  font-weight:500;
}

.primary-nav a:hover { background:rgba(11,111,175,0.05); color:var(--accent); }
.primary-nav a.active { color:var(--accent) !important; font-weight:600; }

.back-home-link {
  margin-top:20px;
  font-size:14px;
  color:var(--accent);
  font-weight:600;
  text-decoration:none;
}

.sidebar .copyright {
  position:absolute; bottom:18px;
  font-size:13px; color:var(--muted);
}

/* -----------------------------------------------------------
   MOBILE HEADER (HIDDEN ON DESKTOP)
----------------------------------------------------------- */
.mobile-top { display:none; }

/* -----------------------------------------------------------
   SECTIONS
----------------------------------------------------------- */
section { margin-bottom:36px; }
section h2 { font-size:26px; margin:12px 0; font-weight:700; }

/* -----------------------------------------------------------
   FOUNDER PAGE LAYOUT
----------------------------------------------------------- */
.founder-about-wrapper {
  display:flex;
  gap:28px;
  align-items:flex-start;
  margin-bottom:32px;
}

.founder-photo img {
  width:260px;
  border-radius:10px;
  object-fit:cover;
  border:2px solid #e9eef3;
}

.founder-about-text { flex:1; min-width:0; }
.founder-about-text h2 {
  margin-top:0;
  font-size:26px;
  font-weight:700;
}

/* dash list */
.dash-list { list-style:none; padding-left:0; }
.dash-list li {
  position:relative;
  padding-left:24px;
  margin-bottom:8px;
}
.dash-list li::before {
  content:"–";
  position:absolute; left:0; top:0;
  font-weight:600;
}

/* -----------------------------------------------------------
   TWO-COLUMN IMAGES — CLEAN + FINAL VERSION
----------------------------------------------------------- */
.two-col-images {
  display:flex;
  flex-wrap:nowrap;
  gap:20px;
  justify-content:space-between;
  align-items:flex-start;
  margin:20px 0;
}

.two-col-images a {
  flex:0 0 48%;
  max-width:48%;
  text-decoration:none;
  display:block;
}

.two-col-images img {
  width:100%;
  height:auto;
  border-radius:10px;
  border:2px solid #e5e5e5;
  object-fit:contain;
}

/* -----------------------------------------------------------
   MOBILE ≤900px
----------------------------------------------------------- */
@media (max-width:900px){

  .sidebar { display:none; }

  .content { margin-left:0; padding:18px; padding-bottom:28px; }

  .mobile-top {
    display:block;
    background:#fff;
    padding:10px 12px;
    border-bottom:1px solid rgba(0,0,0,0.08);
    position:sticky;
    top:0;
    text-align:center;
    z-index:1000;
  }

  .mobile-logo { width:140px; margin:0 auto 8px; }

  .mobile-tabs {
    display:flex;
    justify-content:space-around;
    gap:6px;
  }

  .mobile-tabs a {
    flex:1;
    padding:8px 10px;
    background:#f2f5f7;
    text-decoration:none;
    border-radius:6px;
    font-size:14px;
    font-weight:600;
    color:#243344;
  }

  .mobile-tabs a.active { background:var(--accent); color:#fff; }

  /* Founder mobile */
  .founder-about-wrapper {
    flex-direction:column;
    align-items:center;
    gap:14px;
  }

  .founder-photo img {
    width:72%;
    max-width:300px;
  }

  /* Mobile two-col-images (FULL WIDTH FIXED HERE) */
  .two-col-images {
    flex-direction:column !important;
    gap:14px !important;
  }

  .two-col-images a {
    width:100% !important;
    max-width:100% !important;
    flex:none !important;
    margin:0 auto !important;
  }

  .two-col-images img {
    width:100% !important;
    max-width:100% !important;
  }

  section { scroll-margin-top:140px; }
}

/* -----------------------------------------------------------
   ACCESSIBILITY
----------------------------------------------------------- */
a:focus {
  outline:3px solid rgba(11,111,175,0.2);
  outline-offset:3px;
}
/* FORCE proper H2 style in founder page (fix override issue) */
.founder-about-text h2 {
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  text-align: left !important;
  color: #20223D !important;
}
/* ---- SIDEBAR HEADING STYLING ---- */
.sidebar-founder-heading .founder-name {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #20223D !important;
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
}

.sidebar-founder-heading .founder-title {
  font-size: 14px !important;
  color: #6f7a82 !important;
  font-weight: 500 !important;
  margin-top: 0 !important;
  line-height: 1.2 !important;
}
.mobile-founder-heading {
  font-size: 22px !important;
  font-weight: 700 !important;  /* name bold */
  color: #20223D !important;
  line-height: 1.25 !important;
  margin-bottom: 6px !important;
}

.mobile-founder-title {
  font-size: 15px !important;
  font-weight: 500 !important; /* subtitle regular */
  color: #6f7a82 !important;
}
/* -----------------------------------------------------------
   BOOK ENTRY – Safe isolated two-column layout
----------------------------------------------------------- */

.book-entry {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 28px 0;
}

.book-img {
  flex: 0 0 160px;
  max-width: 160px;
}

.book-img img {
  width: 100%;
  border-radius: 10px;
  border: 2px solid #e5e5e5;
  object-fit: cover;
}

.book-text {
  flex: 1;
}

.book-text h4 {
  margin: 0 0 6px 0;
  font-size: 20px;
  color: #20223D;
}

.book-text p {
  margin: 6px 0;
}

.book-text a {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.book-text a:hover {
  text-decoration: underline;
}

.pub-year {
  color: #6f7a82;
  margin-left: 6px;
  font-size: 14px;
}

/* MOBILE STACK */
@media (max-width: 900px) {
  .book-entry {
    flex-direction: column;
    text-align: left;
  }

  .book-img {
    max-width: 260px;
    width: 70%;
    margin: 0 auto;
  }
}