body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #f9fafc;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
section + section {
  border-top: 1px solid rgba(0,0,0,0.05);
  padding-top: 32px;
}

/* === Unified Background === */
:root {
  --page-bg: #f9fafc; /* pick one soft neutral for all sections */
  --page-max: 1040px;
}

html, body {
  background: var(--page-bg);
  color: #0f172a;
  margin: 0;
  padding: 0;
}

/* Force all top-level bands to inherit it */
.band,
.band--light,
.band--alt,
.wrap,
.inner,
.page-bg,
.container,
.container-global {
  background: transparent !important;
}

/* Ensure consistent width + spacing */
.wrap,
.inner,
.band > .inner,
.band .inner,
.container,
.container-global,
#header .container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
}


/* === Global page width + background (hard lock) === */
:root { --page-max: 1040px; --page-bg: #f6f7fb; }

html, body { background: var(--page-bg); }

/* Force every main container to the same width */
#header .container,
.wrap,
.inner,
.band > .inner,
.band .inner,
.container,
.container-global {
  max-width: var(--page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  box-sizing: border-box !important;
}

/* Optional: unify cards so header card = body cards */
.card {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 16px rgba(2,6,23,0.08);
}



:root{
  /* palette */
  --bg:#f7f7f5;
  --surface:#ffffff;
  --ink:#101216;
  --muted:#5d6672;
  --line:#e6e7ea;
  --accent:#0b63ce;
  --accent-2:#5ca3ff;

  /* layout */
  --maxw:900px;
  --radius:16px;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 10px 30px rgba(16,24,40,.08);

  /* edge art controls */
  --edge-intensity: .55;        /* bump to .7 for stronger, .35 for subtler */
  --edge-blur: 0px;             /* can set to 6px for softer shapes */
}

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

body{
  margin:0;
  font: 500 13px/1.8 "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink);
  background:var(--bg);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  font-synthesis-weight:none;
}

a{ color:var(--accent); text-decoration:none; text-underline-offset:3px }
a:hover{ text-decoration:underline; color:#0a54ad }

/* ===== Ambient background (paper base + edge-only graphics) ===== */
.page-bg{
  position:fixed; inset:0; z-index:-1;
  background: linear-gradient(#fafaf9, #f7f9fb);
}

/* Corner/edge shapes live outside the content column */
.page-bg::before{
  content:"";
  position:absolute; inset:-60px; pointer-events:none; z-index:0;
  filter: blur(var(--edge-blur));
  /* Bigger, richer corner blobs + arcs */
  background:
    radial-gradient(70vmax 48vmax at -14% -18%, rgba(92,163,255,.22), transparent 62%),
    radial-gradient(58vmax 44vmax at 118% 114%, rgba(11,99,206,.20), transparent 64%),
    conic-gradient(from 210deg at 112% -6%, rgba(11,99,206,.12), rgba(11,99,206,0) 38%),
    conic-gradient(from 350deg at -8% 108%, rgba(92,163,255,.10), rgba(92,163,255,0) 42%),
    radial-gradient(32rem 24rem at 105% 10%, rgba(11,99,206,.10), transparent 70%),
    radial-gradient(28rem 22rem at -6% 90%, rgba(92,163,255,.12), transparent 72%);
  opacity: var(--edge-intensity);
  will-change: transform;
  animation: floatEdges 28s ease-in-out infinite alternate;
}

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: transparent; /* was gradient */
  pointer-events: none;
}


/* fine paper grid on top */
.page-bg::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background: radial-gradient(1px 1px at 8px 8px, rgba(16,24,40,.06), transparent 1px);
  background-size: 32px 32px;
  opacity:.10;
}

/* carve a clean hole around the main column (when supported) */
@supports (mask: radial-gradient(circle, black, transparent)){
  .page-bg::before{
    mask:
      radial-gradient(
        circle at 50% 44%,
        transparent calc(var(--maxw)/2 + 220px),
        black calc(var(--maxw)/2 + 320px)
      );
  }
}

/* Parallax float */
@keyframes floatEdges{
  0%   { transform: translate3d(0, 0, 0) }
  100% { transform: translate3d(0, -24px, 0) }
}

/* dial back on smaller screens */
@media (max-width:1100px){
  :root{ --edge-intensity: .28 }
  .page-bg::before{ animation:none }
}

/* reduce motion accessibility */
@media (prefers-reduced-motion: reduce){
  .page-bg::before{ animation:none }
}

/* Wrapper */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:48px 28px 72px }

/* NAV */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:28px;
  backdrop-filter:saturate(1.05);
}

/* Header shell so the dropdown can anchor under it */
.site-header .banner {
  position: relative; /* needed for the absolute dropdown on mobile */
}

/* Base nav layout (desktop) */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav .site-title {
  font-weight: 700;
}

/* Tabs (desktop) */
.nav .tabs {
  display: flex;
  gap: 0.75rem;
}

.nav .tab {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}

/* Hamburger button (hidden on desktop) */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

/* --- Mobile tweaks --- */
@media (max-width: 768px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Collapse the tab list by default on mobile */
  .nav .tabs {
    position: absolute;
    right: 1rem;
    top: calc(100% + 0.5rem);
    display: none;               /* hidden until opened */
    flex-direction: column;
    min-width: 220px;
    padding: 0.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);

    /* match your dark banner; tweak as you like */
    background: #111;
  }

  /* Visible state when toggled */
  .nav .tabs.open {
    display: flex;
  }

  /* Make touch targets comfy */
  .nav .tab {
    padding: 0.75rem 1rem;
  }
}
.site-title{
  font:700 clamp(20px,1.2rem + .2vw,26px)/1 "Newsreader", serif;
  letter-spacing:.2px; font-variation-settings:"opsz" 24;
}
.tabs{ display:flex; gap:24px; flex-wrap:wrap }
.tab{
  color:var(--muted); padding:10px 0; border-bottom:2px solid transparent; position:relative;
}
.tab:hover{ color:#0a54ad; text-decoration:none }
.tab[aria-current="page"]{ color:var(--ink); border-color:transparent }
.tab[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:2px;
}

/* HERO */
.hero{
  margin:0 -28px 18px;
  padding:18px 28px;
  background:linear-gradient(180deg, rgba(16,24,40,.05), rgba(16,24,40,.02));
  border-radius:18px;
  border:1px solid #eaecef;
}

/* HEADER */
.header{
  display:grid; grid-template-columns:320px 1fr; gap:72px; align-items:start;
}
@media (max-width:900px){ .header{ grid-template-columns:1fr; gap:28px } }

/* Portrait with glow ring */
.portrait{
  position:relative;
  max-width:320px; width:100%;
  aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(#fff,#f6f7f9);
  box-shadow:var(--shadow);
  margin:auto;
}
.portrait::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  background:linear-gradient(135deg,#0b63ce,#5ca3ff);
  z-index:-1; filter:blur(14px); opacity:.5;
}
.portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block }

/* Headings */
h1{
  font-family:"Newsreader", serif;
  font-variation-settings:"opsz" 32;
  font-weight:700;
  font-size:clamp(2.1rem,1.2rem + 1.8vw,3.1rem);
  line-height:1.22;
  margin:0 0 6px;
  letter-spacing:.1px;
  text-wrap:balance;
}
h2{
  font-family:"Newsreader", serif;
  font-variation-settings:"opsz" 24;
  font-weight:700;
  font-size:clamp(1.3rem,1.02rem + .6vw,1.6rem);
  line-height:1.3;
  margin:0 0 12px;
  letter-spacing:.2px;
  position:relative;
}
h2::after{
  content:""; display:block; width:56px; height:2px; border-radius:2px;
  margin:10px 0 4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  opacity:.65;
}

.role{ color:var(--muted); font-weight:600; letter-spacing:.2px; margin:2px 0 14px; text-wrap:balance }
.subtitle{ color:var(--muted); margin-bottom:18px; font-size:1.05rem; max-width:65ch }

/* Social buttons */
.social{ display:flex; gap:12px; margin:0 0 18px }
.social a{
  width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:var(--ink);
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.social a:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(11,99,206,.18);
  color:#fff; background:var(--accent); border-color:var(--accent);
}

/* Chips / Buttons */
.chips{ display:flex; gap:12px; flex-wrap:wrap }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface);
}
.chip.primary{
  background:linear-gradient(180deg,var(--accent),#094f9f);
  color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(11,99,206,.24);
}
.chip.primary:hover{ filter:brightness(1.05) }

/* ===== Full-width section bands ===== */
.band{
  margin:10px 0px;
  padding:0px 0px;
  border-radius:0px;
  border:1px solid #eceef2;
  background:linear-gradient(180deg,#ffffff,#fbfbfd);
}
.band--light{ background:#fff }
.band--alt{
  background:
    linear-gradient(180deg,#ffffff,#fbfbfd),
    radial-gradient(600px 280px at 95% 0%, rgba(16,24,40,.05), transparent 60%);
  border:1px solid #eceef2;
}
.band > .inner{ max-width:var(--maxw); margin:0 auto }
.band + .band{ margin-top:0px }

/* Sections */
section{ padding:10px 0 10px }

/* Cards */
.card{
  position:relative; border-radius:var(--radius); padding:22px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(180deg, rgba(16,24,40,.10), rgba(16,24,40,.06)) border-box;
  border:1px solid transparent; box-shadow:var(--shadow);
}

/* Lists & meta */
.grid{ display:grid; gap:16px }
.item + .item{ border-top:1px dashed var(--line); padding-top:14px }
.title{ font-weight:700 }
.meta{ color:var(--muted); font-size:.98rem }
ul.clean{ margin:.35rem 0 0 1.25rem }

/* Pills (skills tags) */
.pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:.4rem }
.pill{
  padding:8px 12px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
}

/* Footer */
footer{
  color:var(--muted); font-size:.98rem; margin-top:48px;
  border-top:1px solid var(--line); padding-top:16px; text-align:center;
}

/* ===== Optional: Gallery & Lightbox (Design page) ===== */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:18px;
}
.tile{
  position:relative; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background:var(--surface);
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.tile:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(16,24,40,.14) }
.shot{ width:100%; height:100%; display:block; aspect-ratio:1/1; object-fit:cover; object-position:50% 20%; background:#f4f6f8 }
.tile.wide .shot{ aspect-ratio:16/9 }
.tile.tall .shot{ aspect-ratio:3/4 }
.caption{
  position:absolute; left:10px; bottom:10px;
  background:rgba(16,18,22,.55); color:#fff; padding:6px 10px;
  border-radius:10px; font-size:.92rem; letter-spacing:.1px; backdrop-filter:blur(4px);
}

/* Lightbox */
.lightbox[hidden]{ display:none !important }
.lightbox{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.78);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.lb-inner{ position:relative; max-width:92vw; max-height:86vh }
.lb-img{
  max-width:92vw; max-height:86vh; width:auto; height:auto;
  border-radius:14px; border:1px solid rgba(255,255,255,.25);
  box-shadow:0 20px 60px rgba(0,0,0,.5); display:block;
}
.lb-caption{ color:#fff; text-align:center; margin-top:10px; opacity:.9; font-size:.98rem }
.lb-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.35); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.lb-btn:hover{ background:rgba(0,0,0,.55); transform:translateY(-50%) scale(1.04) }
.lb-prev{ left:-56px }
.lb-next{ right:-56px }
.lb-close{
  position:absolute; top:-54px; right:0;
  width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.35); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:820px){
  .lb-prev{ left:8px }
  .lb-next{ right:8px }
  .lb-close{ top:-48px; ri
}
/* compact, organized hero helpers */
.actions{
  display:flex;
  gap:12px 16px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:14px;
}
.actions .social{ margin:0 }              /* remove default bottom margin */

.pills{ margin-top:8px }                  /* tighten above pills */
.pill{ font-size:.95rem }                 /* slightly smaller pills */

/* optional: make the subtitle + pills feel balanced */
.subtitle{ margin-bottom:10px }

/* --- Hero spacing fixes --- */

/* bring role + subtitle closer together */
.header .role{
  margin-top: 2px;
  margin-bottom: 6px;   /* was larger; reduces the gap */
}
.header .subtitle{
  margin-top: 0;
  margin-bottom: 8px;   /* a small cushion before pills */
}

/* add space between pills and social row */
.pills{
  gap: 10px;
  margin-top: 6px;
  margin-bottom: 14px;  /* creates clear separation from icons */
}

/* actions row stays tidy; ensure no extra margin from .social */
.actions{
  display: flex;
  align-items: center;
  gap: 14px 18px;
  margin-top: 0;        /* spacing controlled by .pills above */
}
.actions .social{ margin: 0; }

/* (optional) slightly smaller pill size so it feels lighter */
.pill{ font-size: .95rem; padding: 7px 11px; }
/* === Subtle geometric tile background === */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2; /* push below all content but above html background */
  background-color: #f9fafc;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
body.nav-open { overflow: hidden; }