:root{
  --radius:16px;
  --shadow:0 6px 18px rgba(0,0,0,.08);
  --text:#1b1b1b;
  --muted:#5a616a;
  --bg:#fcfcfc;
  --card:#fff;
  --primary:#193A59;      /* dusty/navy */
  --accent:#6B8BA4;
  --warm:#F7E7CE;
  --highlight:#F4B942;
  --link:#1b4b7a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Georgia,'Times New Roman',serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

/* =========================
   Global Navigation (desktop default)
   ========================= */
.nav{
  position:sticky; top:0; z-index:10;
  background:var(--card);
  border-bottom:1px solid rgba(0,0,0,.06);
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 20px;
}
.brand{font-weight:700;letter-spacing:.5px}
.brand .dot{color:var(--accent)}

.controls{display:flex; gap:8px; flex-wrap:wrap}
.btn{
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  box-shadow:var(--shadow);
}
.btn:hover{transform:translateY(-1px)}
/* hamburger hidden on desktop; shown on mobile */
.nav-toggle{
  display:none;
  background:#fff;
  border:1px solid rgba(0,0,0,.15);
  border-radius:8px;
  padding:8px 10px;
  line-height:1;
  box-shadow:var(--shadow, 0 1px 4px rgba(0,0,0,.08));
}

/* =========================
   Hero + Grid + Cards
   ========================= */
.hero{
  display:grid; gap:16px;
  padding:48px 20px 28px;
  max-width:1100px; margin:0 auto;
}
.hero h1{font-size:clamp(28px,4vw,42px); margin:0; line-height:1.2}

.grid{
  max-width:1100px; margin:12px auto 64px; padding:0 20px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:18px;
}
.card{
  background:var(--card);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  display:grid; gap:6px;
}
.card h3{margin:0 0 6px}
.card p{margin:0; color:var(--muted)}
ul{margin:.2rem 0 0 1.1rem}
hr.sep{border:none; border-top:1px solid rgba(0,0,0,.06); margin:20px 0}

/* =========================
   Skills chips
   ========================= */
.chip-list{
  display:flex; flex-wrap:wrap; gap:8px; padding-left:0; list-style:none;
}
.chip-list li{
  border:1px solid rgba(0,0,0,.12);
  background:var(--card);
  border-radius:999px;
  padding:6px 10px;
  font-size:.95rem;
}

/* =========================
   Project details (Projects page)
   ========================= */
.card details{
  margin-top:8px;
  background:#fffdf8;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  padding:8px 10px;
}
.card details summary{
  cursor:pointer;
  font-weight:700;
  color:var(--primary);
  list-style:none;
}
.card details[open] summary{ color:var(--accent); }
.card details .case{ margin-top:6px; }
.card details h4{ margin:8px 0 4px; color:var(--primary); }

/* =========================
   Article typography
   ========================= */
.article{padding:1rem 1rem 2.5rem; max-width:820px; margin:0 auto}
.article-header h1{margin:.5rem 0 0; color:var(--primary)}
.byline{color:var(--muted); margin:.25rem 0 1rem}
.article-body{font-size:1.08rem}
.article-body h2{margin-top:1.5rem; color:var(--primary)}
.article-body p{margin:.75rem 0}

/* =========================
   Site footer (unified)
   ========================= */
.site-footer{
  margin-top:24px;
  background:var(--primary);
  color:#fff;
  padding:16px 20px;
}
.site-footer .wrap{
  max-width:1100px; margin:0 auto;
  display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.site-footer nav a{ color:var(--warm); margin-right:12px; }
.site-footer nav a:hover{ color:var(--accent); text-decoration:none; }

/* Hide the injected Close button on desktop */
.menu-close { display: none; }

/* Medium screens */
@media (min-width:861px) and (max-width:1100px){
  .btn{padding:8px 10px}
  .grid{grid-template-columns:repeat(auto-fit, minmax(280px,1fr))}
}

/* =========================
   Mobile polish + FULL-SCREEN OVERLAY MENU
   ========================= */
@media (max-width:860px){
  /* Show + style the Close button only on phones */
  .menu-close{
    display:inline-flex;
    align-self:flex-end;
    margin-bottom:24px;
    background:transparent;
    color:#fff;
    border:2px solid #fff;
    border-radius:14px;
    padding:10px 14px;
    font-size:16px;
  }
  .menu-close:active,
  .menu-close:hover{ background:rgba(255,255,255,.09); }

  /* Basic mobile polish */
  .hero-wrap{ grid-template-columns:1fr !important; gap:18px; }
  .hero-title{ font-size:clamp(28px,8vw,40px); }
  .lead{ font-size:16px; }

  /* Hamburger visible; desktop controls hidden by default on mobile */
  .nav-toggle{ display:inline-block; }
  .nav{ gap:8px; padding:10px 12px; }

  /* Use .controls as a full-screen overlay when nav is open */
  .nav .controls{
    display:none;                 /* HIDDEN by default on phones */
    position:fixed;
    inset:0;
    background:var(--primary);    /* dusty/navy backdrop */
    color:#fff;
    z-index:1000;
    padding:24px 18px 32px;
    overflow:auto;

    /* layout for the overlay menu */
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:14px;
  }
  /* Only show when nav is open */
  .nav.is-open .controls{ display:flex; }

  /* Full-width white-outline buttons */
  .nav .controls .btn{
    width:min(560px, 88vw);
    text-align:center;
    padding:16px 18px;
    border-radius:16px;
    font-size:20px;
    background:transparent;
    color:#fff;
    border:2px solid #fff;
    box-shadow:none;
  }
  .nav .controls .btn:hover{
    background:rgba(255,255,255,.09);
    text-decoration:none;
    transform:none;
  }

  /* Prevent page scroll when menu open */
  body.menu-open{ overflow:hidden; }

  /* Cards & grids: single column */
  .grid{ grid-template-columns:1fr !important; gap:14px; }

  /* Images in cards: allow natural height on phones */
  .card img{
    width:100%;
    height:auto !important;
    max-height:360px;
    object-fit:cover;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.06);
  }
}

/* Prevent active tab from highlighting incorrectly (desktop) */
.controls a.btn { color: var(--text); background: #fff; }
.controls a.btn:hover { background: var(--warm); text-decoration:none; }
.controls a.btn[aria-current="page"] { background: var(--accent); color:#fff; }