/* === Dark, clean base === */
:root{
  --bg:#0b0c0e; --surface:#121418; --text:#e9e9ec; --muted:#a9adb7;
  --accent:#5ab0ff; --accent2:#ffd66b; --card:#161a20; --border:#23262b;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --font:-apple-system,BlinkMacSystemFont,"Inter","SF Pro Text",Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7f8fb; --surface:#fff; --text:#121317; --muted:#4b4f57; --card:#fff; --border:#e6e8ee; --shadow:0 8px 24px rgba(0,0,0,.08) }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;border-radius:12px}

/* Layout containers */
.container{max-width:1200px;margin:0 auto;padding:24px clamp(16px,5vw,48px)}
.narrow{max-width:900px}

/* Sticky header nav */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:color-mix(in oklab,var(--bg) 82%,transparent);
  border-bottom:1px solid var(--border);
}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.brand{display:flex;align-items:center;gap:10px}
.brand-badge{background:var(--text);color:var(--bg);font-weight:700;padding:6px 10px;border-radius:12px}
.navlinks a{margin-left:22px;color:var(--muted);cursor:pointer}
.navlinks a:hover,.navlinks a.active{color:var(--text)}

/* Footer */
.footer{border-top:1px solid var(--border);color:var(--muted);padding:24px 0;margin-top:64px}

/* Eyebrow, headings, copy */
.eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:.18em;margin:0 0 8px}
.headline{font-size:clamp(36px,6vw,64px);line-height:1.05;margin:0 0 14px;font-weight:800}
.highlight{background:var(--accent2);color:#111;padding:0 .22em;border-radius:8px}
.dek{color:var(--muted);max-width:52ch;margin:0 0 16px}
.hero-subtitle{
  margin:0 0 22px;
  max-width:34ch;
  font-size:clamp(18px,2.4vw,28px);
  line-height:1.2;
  color:var(--text);
}
.hero-note{max-width:58ch}

/* Buttons */
.actions{display:flex;gap:12px;margin-top:18px}
.actions--secondary{margin-top:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;
  border:1px solid var(--border);box-shadow:var(--shadow);cursor:pointer;
  transition:border-color .16s ease,color .16s ease,transform .16s ease,background-color .16s ease;
}
.btn:hover{border-color:color-mix(in oklab,var(--accent) 30%,var(--border));transform:translateY(-1px)}
.btn--solid{background:var(--text);color:var(--bg);border-color:transparent}
.btn--outline{background:transparent;color:var(--text)}
.btn--ghost{
  background:color-mix(in oklab,var(--surface) 92%,transparent);
  color:var(--muted);
  box-shadow:none;
}
.btn--ghost:hover{color:var(--text)}

/* Split hero (Mina-style) */
.hero-split{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  align-items:stretch;
  min-height:78vh;
  border-bottom:1px solid var(--border);
}
.hero-left{padding:72px clamp(16px,5vw,48px) 64px}
.hero-right{
  position:relative;
  overflow:hidden;
  border-left:1px solid var(--border);
  background:
    radial-gradient(circle at 18% 14%, rgba(240,236,228,.14), transparent 30%),
    radial-gradient(circle at 82% 22%, rgba(170,165,156,.1), transparent 28%),
    linear-gradient(180deg, #171717 0%, #101010 42%, #0b0b0b 100%);
}
.hero-portrait-wrap{
  position:relative;
  z-index:1;
  min-height:100%;
  display:grid;
  place-items:center;
  padding:64px clamp(24px,5vw,56px);
}
.hero-portrait-card{
  position:relative;
  margin:0;
  width:min(100%,460px);
  display:grid;
  justify-items:center;
  gap:20px;
  text-align:center;
}
.hero-portrait{
  width:min(78vw,340px);
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:999px;
  border:8px solid rgba(236,233,226,.92);
  box-shadow:
    0 0 0 1px rgba(110,110,108,.65),
    0 32px 70px rgba(0,0,0,.3);
  background:var(--surface);
}
.hero-portrait-caption{
  text-align:center;
  padding:0 12px;
}
.hero-portrait-name{
  margin:0;
  font-size:clamp(28px,3.2vw,40px);
  line-height:1.05;
  font-weight:700;
  letter-spacing:.01em;
}
.hero-garden{
  position:absolute;
  pointer-events:none;
}
.hero-garden--top{
  top:-5%;
  right:-10%;
  width:78%;
  height:46%;
  border-radius:45% 55% 58% 42% / 42% 44% 56% 58%;
  background:
    radial-gradient(circle at 38% 50%, rgba(134,134,130,.66), rgba(82,82,79,.9) 56%, rgba(30,30,30,.96) 100%);
  filter:blur(6px);
  opacity:.92;
}
.hero-garden--mid{
  left:-8%;
  bottom:14%;
  width:84%;
  height:32%;
  border-radius:58% 42% 48% 52% / 56% 58% 42% 44%;
  background:
    radial-gradient(circle at 54% 50%, rgba(156,153,146,.54), rgba(96,95,90,.78) 58%, rgba(28,28,28,.94) 100%);
  filter:blur(10px);
  opacity:.82;
}
.hero-garden--path{
  left:50%;
  bottom:-16%;
  width:74%;
  height:56%;
  transform:translateX(-50%) rotate(-8deg);
  border-radius:48% 52% 0 0 / 70% 70% 0 0;
  background:
    radial-gradient(circle at 50% 22%, rgba(241,239,234,.7), rgba(179,175,168,.48) 44%, rgba(112,110,106,.18) 78%, transparent 82%);
  opacity:.62;
}
.hero-right::before,
.hero-right::after{
  content:"";
  position:absolute;
  inset:auto;
  pointer-events:none;
}
.hero-right::before{
  left:10%;
  top:16%;
  width:1px;
  height:58%;
  background:linear-gradient(180deg, transparent, rgba(226,222,214,.16), transparent);
}
.hero-right::after{
  left:16%;
  right:12%;
  bottom:24%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(226,222,214,.15), transparent);
}
@media (max-width:900px){
  .navlinks{display:none}
  .hero-split{grid-template-columns:1fr;min-height:auto}
  .hero-left{padding-bottom:32px}
  .hero-right{min-height:520px;border-left:none;border-top:1px solid var(--border)}
  .hero-portrait-card{width:min(100%,420px)}
  .hero-portrait{width:min(78vw,300px)}
  .hero-garden--top{width:92%;right:-22%;height:40%}
  .hero-garden--mid{width:98%;left:-18%;bottom:18%}
  .hero-garden--path{width:88%;bottom:-10%}
  .hero-right::before{left:8%;top:14%;height:54%}
  .hero-right::after{left:8%;right:8%;bottom:22%}
}

/* Cards & grids */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;
  transition:transform .15s ease,border-color .16s ease;
  cursor:pointer
}
.card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in oklab,var(--accent) 30%,var(--border));
}
.card h3{margin:12px 10px 8px}
.card p{margin:0 10px 12px;color:var(--muted)}

/* Uniform thumbnails across site */
.card .thumb{
  position:relative;width:100%;aspect-ratio:16/10;
  overflow:hidden;border-radius:12px;border:1px solid var(--border);
  background:var(--surface)
}
.card .thumb img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block
}
/* (Optional) exact-fit variant — avoid if you want uniform “fill” look */
.thumb--fit img{object-fit:contain;background:var(--surface)}

/* About card on homepage */
.about{margin-top:40px}
.about-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--shadow);padding:18px 18px
}
.about-text{max-width:60ch;color:var(--muted)}
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
}

/* === Mobile menu (hamburger) === */
.menu-toggle{
  display:none; /* shown under 900px */
  -webkit-appearance:none; appearance:none;
  background:transparent; border:0; padding:10px;
  border-radius:12px; cursor:pointer; color:var(--text);
}
.menu-toggle:focus-visible{ outline:2px solid var(--accent2); outline-offset:2px }

/* Hamburger icon (3 bars) */
.menu-toggle .bars{ position:relative; width:26px; height:18px; display:block }
.menu-toggle .bars::before,
.menu-toggle .bars::after,
.menu-toggle .bars span{
  content:""; position:absolute; left:0; right:0; height:2px; border-radius:2px;
  background:var(--text); transition:transform .25s ease, opacity .2s ease;
}
.menu-toggle .bars::before{ top:0 }
.menu-toggle .bars span{ top:8px }
.menu-toggle .bars::after{ bottom:0 }

/* When open, turn into X */
.menu-toggle[aria-expanded="true"] .bars::before{ transform:translateY(8px) rotate(45deg) }
.menu-toggle[aria-expanded="true"] .bars span{ opacity:0 }
.menu-toggle[aria-expanded="true"] .bars::after{ transform:translateY(-8px) rotate(-45deg) }

/* === Top-attached dropdown (stationary under header) === */
.mobile-menu{
  position:absolute; top:100%; left:0; right:0;
  background:var(--card); border-bottom:1px solid var(--border);
  box-shadow:var(--shadow); display:none; z-index:40;
}
.menu-open .mobile-menu{ display:block }

.mobile-menu__sheet{ max-width:1200px; margin:0 auto; padding:0 24px }
.mobile-menu__card{ padding:8px }
.mobile-menu__links{
  display:flex; flex-direction:column; gap:0; padding:8px 0;
}
.mobile-menu__links a{
  color:var(--text); padding:12px 0; border-bottom:1px solid var(--border); cursor:pointer;
}
.mobile-menu__links a:last-child{ border-bottom:none }

/* Hide desktop nav on phones, show hamburger */
@media (max-width:900px){
  .navlinks{ display:none; }
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }
}

/* Article pages */
.project-hero{margin:0 0 14px}
.project-hero img{width:100%;height:auto;border-radius:16px;border:1px solid var(--border)}
.lead{font-size:1.05rem;color:var(--text)}
.muted{color:var(--muted)}
.bullets{line-height:1.6}
.breadcrumbs{color:var(--muted);margin:8px 0 20px}
.breadcrumbs a{color:var(--muted);cursor:pointer}