/* =========================================================
   THEME TOKENS
   ========================================================= */
:root{
  --bg:#fdfdff;
  --text:#000000;
  --muted:#5e2e16;
  --brand:#c06311;
  --brand-2:#e4a269;
  --shadow:0 10px 30px rgba(141,141,141,0.15);
  --radius:18px;
}

/* Sizing reset */
*,*::before,*::after{ box-sizing:border-box }

/* =========================================================
   BASE & LAYOUT
   ========================================================= */
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(124,197,255,.06), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(181,240,208,.05), transparent 60%),
    var(--bg);
  line-height:1.6;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{ width:min(1100px, 92%); margin-inline:auto }
section{ padding:28px 0 }
.section-title{ font-size:1.8rem; margin:14px 0 10px }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card.pad{ padding:28px }
.btn{
  display:inline-block; background:var(--brand-2);
  color:#0a0b0f; font-weight:700; padding:10px 16px; border-radius:999px; border:0;
  box-shadow:var(--shadow);
}
.links{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap }
.tag{ border:1px solid rgba(255,255,255,.12); padding:7px 12px; border-radius:999px; color:var(--text); background:rgba(255,255,255,.03) }

/* Prevent grid children from overflowing their columns */
.project, .project-gallery, .project-body { min-width:0 }

/* =========================================================
   HEADER / NAV
   ========================================================= */
header{
  position:sticky; top:0;
  backdrop-filter:saturate(1.4) blur(8px);
  background:rgba(233, 207, 168, 0.6);
  border-bottom:1px solid rgba(255,255,255,.06);
  z-index:50;
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.logo{ font-weight:800; letter-spacing:.4px }
.logo b{ color:var(--brand) }
.nav a{ color:var(--text); opacity:.9; margin-left:18px }
.nav-cta{ margin-left:16px }

/* =========================================================
   HERO (FULL-BLEED)
   ========================================================= */
.hero-fullbleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:52px 0 22px;
  display: block;
}
.hero-fullbleed .card{
  width: min(1100px, 92%);
  margin-inline: auto; /* center the hero content */
}
.eyebrow{ color:var(--brand); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem }
h1{ font-size:clamp(28px, 4vw, 44px); line-height:1.18; margin:6px 0 10px }
.subtitle{ color:var(--muted); font-size:1.02rem }
.accent{ color:var(--brand) }
.info{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px; margin-top:16px
}
.info div{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px; padding:12px 14px
}
.info b{ display:block; font-size:.78rem; color:var(--muted); font-weight:600 }
.info span{ font-weight:600 }

/* =========================================================
   ABOUT + HEADSHOT (SIDE BY SIDE, MATCHED HEIGHTS)
   ========================================================= */
.about-grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:24px; align-items:stretch; /* equal heights */
}
.about-card{ height:100% }
.about-photo{
  margin:0; border:1px solid rgba(255,255,255,.10); border-radius:10px;
  box-shadow:var(--shadow); overflow:hidden; display:grid; align-items:stretch;
  height:100%; background:#eaf2ef;
}
.about-photo img{ width:100%; height:100%; object-fit:cover; object-position:center }

/* =========================================================
   PROJECTS
   ========================================================= */
/* Projects container = one full-width column (stacked bubbles) */
.projects{
  display: grid;
  grid-template-columns: 1fr;  /* previously repeat(12,1fr) */
  gap: 24px;                   /* space between the two project bubbles */
}

/* Project card: keep article clean; .card gives the bubble look */
.project.project-stacked{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Project card: let the .card provide the bubble look; keep article clean */
.project.project-stacked{
  display: grid;
  grid-template-columns: 1fr;  /* images above, text below */
  gap: 14px;

  /* remove bubble styles that were here before */
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* 4-wide gallery row (unchanged, just here for clarity) */
.project-gallery.gallery-row4{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.project-gallery.gallery-row4 figure{
  margin: 0;
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  overflow: hidden;
  background: #eee;  /* no border */
}
.project-gallery.gallery-row4 img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* (optional) tighten padding inside each bubble a touch */
.projects .card.pad { padding: 22px; }

/* add breathing room between multiple projects */
.projects .project-stacked{ margin-bottom: 18px; }

/* 4-wide gallery row (evenly spaced, same height, no borders) */
.project-gallery.gallery-row4{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
}
.project-gallery.gallery-row4 figure{
  margin:0; position:relative; aspect-ratio:3 / 2; /* all equal height */
  border-radius:8px; overflow:hidden; background:#eee; /* no border */
}
.project-gallery.gallery-row4 img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* Project description card (kept subtle inside bubble) */
.project-body{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px; padding:18px;
}
.proj-eyebrow{ color:var(--brand); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.75rem }
.project h3{ margin:6px 0 6px }
.bullets{ margin:10px 0 0; padding-left:18px }
.bullets li{ margin:6px 0 }

/* =========================================================
   RESUME
   ========================================================= */
.resume-grid{ display:grid; grid-template-columns:2fr 1.2fr; gap:18px }
.line{ margin:.2rem 0 }
.rule{ border:0; border-top:1px solid rgba(255,255,255,.08); margin:16px 0 }
.skills-list{ margin:0 0 10px }
.pad-top{ margin-top:16px }
.resume-actions{ margin-top:16px }

/* =========================================================
   FOOTER
   ========================================================= */
footer{ padding:36px 0 64px; color:var(--muted) }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 920px){
  .resume-grid{ grid-template-columns:1fr }
}
@media (max-width: 900px){
  .about-grid{ grid-template-columns:1fr }
  .about-photo{ max-height:340px }
  .project-gallery.gallery-row4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .project-gallery.gallery-row4{ grid-template-columns:1fr; }
}