@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@500;600&display=swap");

:root{
  --bg:#F7F5F2;
  --text:#121212;
  --muted:#6C6C6C;
  --accent:#C7B29A;
  --card:#FFFFFF;

  --container:1200px;
  --radius:20px;

  --font-sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-serif:"Playfair Display",Georgia,"Times New Roman",serif;

  /* Desktop (unchanged) */
  --hero-base-w:clamp(420px,33vw,520px);
  --arch-w:clamp(260px,24vw,320px);
  --arch-top:48%;
  --hero-reserve:clamp(180px,14vw,260px);
  --column-gap:clamp(32px,3.5vw,56px);
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
img{
    display:block;
    max-width:100%;
    height:auto
}
.sr-only{position:absolute!important;
    width:1px;
    height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Layout */
.container{width:min(100% - 4rem,var(--container));margin-inline:auto}
.container.narrow{width:min(100% - 3rem,840px)}
.section{padding:clamp(2rem,5vw,4rem) 0}
.section-title{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.8rem,3.5vw,2.4rem);margin:0 0 1rem}
.lead{max-width:64ch}


/* Links/Buttons */
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}

.btn{
  --btn-h:44px;
  --btn-w:clamp(140px,22vw,180px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--btn-h);
  width:var(--btn-w);
  padding:0 1.1rem;
  background:var(--text);
  color:var(--bg);
  border:1px solid var(--text);
  border-radius:999px;
  line-height:1;
  transition:transform .16s ease,background .16s ease,color .16s ease;
}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn.ghost{background:transparent;color:var(--text)}
.btn.sm{
  --btn-h:36px;
  --btn-w:clamp(120px,24vw,150px);
  font-size:.95rem;
}
:where(a,button,.btn):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Header/Nav */
.site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
.logo{font-family:var(--font-serif);font-weight:600}
.nav-list{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.nav-list a{padding:.35rem .6rem;border-radius:8px}
.nav-list a:hover{background:color-mix(in srgb,var(--text) 8%,transparent);text-decoration:none}
.nav-list a.is-active{background:color-mix(in srgb,var(--text) 10%,transparent)}

/* Hero */
.hero{padding:clamp(2.5rem,6vw,5rem) 0;}
.hero-grid{
  display:grid;
  grid-template-columns:calc(var(--hero-base-w) + var(--hero-reserve)) 1fr;
  align-items:center;
  column-gap:var(--column-gap);
}
.hero-visual{
  position:relative;
  width:var(--hero-base-w);
  justify-self:start;
  isolation:isolate;
}
.hero-base{
  width:100%;
  max-height:680px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.35);
  transform-origin:center;
  animation:baseGrow 1.1s ease .6s both;
}

/* Arch */
.arch{
  position:absolute;
  top:var(--arch-top);
  left:92%;
  transform:translate(-50%,-50%);
  width:var(--arch-w);
  border-radius:999px 999px 18px 18px;
  overflow:hidden;
  box-shadow:0 28px 60px -28px rgba(0,0,0,.35);
  z-index:2;
  animation:archFade .85s ease .1s both;
}
.arch img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

/* Copy */
.hero-copy .display{margin:0 0 .5rem;font-family:var(--font-serif);font-weight:600;line-height:1.05;font-size:clamp(2.2rem,6.3vw,4rem)}
.hero-copy .display span{display:block}
.hero-copy .eyebrow{margin:.25rem 0 1rem;color:var(--muted);font-size:.95rem;letter-spacing:.16em;text-transform:uppercase}
.hero-copy .lead{max-width:60ch}
.hero-copy .cta{
  margin-top:1rem;
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}
.hero-copy .cta .btn{
  flex:0 0 var(--btn-w);
  justify-content:center;
}

/* Projects */
.project-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:clamp(1rem,2vw,1.25rem);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:stretch;               
}
.project-list > li{                   
  display:flex;
}

.project{                            
  display:flex;
  height:100%;
  width:100%;
}

.project figure{
  margin:0;
  background:var(--card);
  border:1px solid color-mix(in srgb,var(--text) 10%,transparent);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.35);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;                        
  transition:transform .18s ease,box-shadow .18s ease;
}
.project figure:hover{transform:translateY(-2px);box-shadow:0 10px 28px -18px color-mix(in srgb,var(--text) 50%,transparent)}
.project img{width:100%;height:220px;object-fit:cover}
.project figcaption{padding:1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:.25rem 0 .5rem}
.tags li{font-size:.85rem;color:var(--muted);border:1px solid color-mix(in srgb,var(--text) 14%,transparent);padding:.25rem .5rem;border-radius:999px}
.actions{display:flex;gap:.5rem;margin-top:auto}

/* Certifications */
.cert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch; 
}

.cert {
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 0; 
  padding: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}


/* Skills */
.skills-grid{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:clamp(20px,4vw,48px);
}
.skills-heading{
  font-family:var(--font-serif);
  font-weight:600;
  line-height:.9;
  font-size:clamp(2.4rem,8vw,4.5rem);
  margin:0;
  grid-column:1 / -1;
}
.skills-media{
  margin:0;
  width:min(38vw,460px);
  overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.35);
}
.skills-media img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.skills-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,3vw,32px);
}
.skills-col h3{margin:.25rem 0 .5rem;font-size:1.2rem}
.bullets{margin:0;padding-left:1.1rem;color:var(--muted)}
.bullets li{margin:.35rem 0}

/* Journey */
.journey-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:clamp(24px,4vw,48px);
}
.journey-heading{
  font-family:var(--font-serif);
  font-weight:600;
  line-height:0.95;
  font-size:clamp(2.4rem,8vw,4.5rem);
  margin:0 0 1rem;
}
.journey-sub{
  font-size:clamp(1.1rem,2.5vw,1.35rem);
  color:var(--text);
  margin:.25rem 0 1rem;
}
.journey-text{
  color:var(--muted);
  max-width:48ch;
}
.journey-arch{
  margin:0;
  width:clamp(280px,42vw,520px);
  justify-self:end;
  border-radius:999px 999px 0 0;
  overflow:hidden;
  background:var(--card);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.35);
}
.journey-arch img{
  width:100%;
  height:100%;
  object-fit:cover;

}

/* CTA */
.section.cta{text-align:center}
.section.cta .btn{margin-top:.75rem;background:var(--accent);color:#111;border-color:var(--accent)}

/* Footer */
.site-footer{border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent);padding:1.25rem 1rem;color:var(--muted);text-align:center}

/* Motion */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}

@keyframes archFade{from{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes baseGrow{from{transform:scale(.975)}to{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .arch,.hero-base{animation:none!important}
  .reveal{opacity:1;transform:none}
}

/* ---------------- Responsive ---------------- */

/* Tablet */
@media (max-width:900px){
  :root{
    --overlap:.5;
    --hero-base-w:70vw;
    --arch-w:42vw;
    --hero-reserve:calc((1 - var(--overlap)) * var(--arch-w));
  }
  .container{width:min(100% - 2rem,var(--container))}
  .hero-grid{grid-template-columns:calc(var(--hero-base-w) + var(--hero-reserve)) 1fr}
  .hero-visual{width:var(--hero-base-w);padding-right:var(--hero-reserve)}
  .arch{
    top:47%;
    left:calc(100% - (var(--overlap) * var(--arch-w)));
    transform:translate(-50%,-50%);
  }

  .skills-grid{grid-template-columns:1fr}
  .skills-heading{grid-column:1/-1}
  .skills-media{width:100%}
  .skills-columns{grid-template-columns:1fr 1fr}

  .journey-grid{
    grid-template-columns:1fr 1fr;
  }
  .journey-arch{justify-self:center;width:min(520px,46vw)}
}

/* Mobile */
@media (max-width:560px){
  :root{
    --overlap:.5;
    --hero-base-w:68vw;
    --arch-w:36vw;
    --hero-reserve:calc((1 - var(--overlap)) * var(--arch-w));
  }
  .container{width:min(100% - 2rem,var(--container))}
  .hero{overflow:hidden}
  .hero-grid{
    grid-template-columns:1fr;
    row-gap:1.25rem;
    justify-items:center;
  }
  .hero-visual{
    width:var(--hero-base-w);
    padding-right:var(--hero-reserve);
    justify-self:center;
    position:relative;
  }
  .arch{
    top:45%;
    left:calc(100% - (var(--overlap) * var(--arch-w)));
    transform:translate(-50%,-50%);
  }
  .hero-copy{
    text-align:center;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .lead{margin-inline:auto}

  .skills-columns{grid-template-columns:1fr}

  .journey-grid{
    grid-template-columns:1fr;
    gap:1.5rem;
    text-align:left;
  }
  .journey-heading{font-size:clamp(2.2rem,10vw,3.2rem)}
  .journey-arch{
    justify-self:center;
    width:72vw;
  }
}

/* Contact card */
.card{
  background:var(--card);
  border:1px solid color-mix(in srgb,var(--text) 10%,transparent);
  border-radius:var(--radius);
  padding:1rem;
}

/* Contact photo */
.contact-photo {
  text-align: center;
  padding: 2rem 0;
}
.contact-photo img {
  width: 80%;
  height: auto;
  margin-inline: auto;
  display: block;
  box-shadow: 0 20px 50px -28px rgba(0,0,0,.25);
}

/* ------------------------------------------------------------------
   Burger + mobile nav (desktop-safe)
-------------------------------------------------------------------*/

/* default (desktop) */
.burger{
  display:none;            /* hidden on desktop */
  margin-left:auto;        /* push to the right when visible */
  background:transparent;
  border:0;
  padding:0;
}

/* animate burger → X */
.burger svg line{
  transition:transform .25s ease, opacity .25s ease;
  transform-origin:center;
}
.burger[aria-expanded="true"] svg line:nth-child(1){
  transform:rotate(45deg) translate(4px,4px);
}
.burger[aria-expanded="true"] svg line:nth-child(2){
  opacity:0;
}
.burger[aria-expanded="true"] svg line:nth-child(3){
  transform:rotate(-45deg) translate(4px,-4px);
}

/* desktop nav stays inline */
.nav{ position:static; }
.nav .nav-list{
  display:flex;
  gap:1rem;
}

/* ------------------------------------------------------------------
   Mobile
-------------------------------------------------------------------*/
@media (max-width:760px){
  /* show burger on mobile */
  .burger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px; height:42px;
    border:1px solid color-mix(in srgb,var(--text) 12%, transparent);
    border-radius:12px;
    cursor:pointer;
  }
  .burger:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  /* dropdown menu */
  .nav{ position:relative; }

  .nav .nav-list{
    position:absolute;
    right:0;
    top:calc(100% + .5rem);
    min-width:220px;
    padding:.5rem;
    display:flex;
    flex-direction:column;
    gap:.25rem;
    background:var(--card);
    border:1px solid color-mix(in srgb,var(--text) 10%,transparent);
    border-radius:12px;
    box-shadow:0 16px 40px -22px rgba(0,0,0,.35);
    z-index:30;

    /* closed state */
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }

  /* open state toggled by JS: nav.classList.toggle('is-open') */
  .nav.is-open .nav-list{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    transition:opacity .18s ease, transform .18s ease;
  }

  .nav .nav-list a{
    display:block;
    padding:.6rem .75rem;
    border-radius:8px;
  }
  .nav .nav-list a:hover{
    background:color-mix(in srgb,var(--text) 8%, transparent);
    text-decoration:none;
  }

  /* hide inline layout spacing from desktop */
  .header-inner{ gap:.5rem; }
}