/* =================================================================== */
/*  Color system (validator-safe) + tokens                              */
/* =================================================================== */
:root{
  /* Base neutral scale (approx. to your OKLCH greys) */
  --neutral-0: #f7f7f7;
  --neutral-1: #eeeeee;
  --neutral-2: #e6e6e6;
  --neutral-3: #dddddd;
  --neutral-4: #d3d3d3;
  --neutral-5: #bfbfbf; /* mid grey */
  --neutral-6: #a6a6a6;
  --neutral-7: #8c8c8c;
  --neutral-8: #666666;
  --neutral-9: #333333;

  /* accents (approximations of your OKLCH choices) */
  --accent-1: #1f7a5c;  /* dark green */
  --accent-2: #d8c7a3;  /* soft beige */

  /* app tokens */
  --bg:     var(--neutral-0);
  --text:   var(--neutral-9);
  --border: var(--neutral-3);

  /* typefaces */
  --ff-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-head: "Caveat", cursive;

  /* gutters & breakpoints */
  --gutter: 1rem;          /* mobile gutter */
  --bp-s: 31.25rem;        /* 500px (note: vars can't be used in @media) */
  --bp-m: 40.625rem;       /* 650px */
  --bp-l: 53.75rem;        /* 860px */
}

/* =================================================================== */
/*  Global                                                              */
/* =================================================================== */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

html, body { block-size: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.5;
}

/* images scale down nicely everywhere */
img{ max-inline-size: 100%; block-size: auto; display: block; }

h1, h2, h3{
  margin: 0;
  font-weight: 400;
  font-family: var(--ff-head);
}
h1{ font-size: 3.125rem; line-height: .95; }  /* mobile first */
h2{ font-size: 1.625rem; }
h3{ font-size: 1.25rem; }

a{ color: var(--accent-1); }
a:hover{ color: var(--accent-2); text-decoration: none; }

/* ============================================================= */
/* Navigation Bar                                                */
/* ============================================================= */

.site-nav {
  background: rgba(255,255,255,0.96);
  border-block-end: 1px solid var(--border);
  padding-block: .75rem;
  position: sticky;
  top: 0;
  inset-inline: 0;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.nav-inner {
  max-inline-size: 68rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logotype */
.logo {
  font-family: var(--ff-head);
  font-size: 2rem;
  color: var(--neutral-9);
  text-decoration: none;
}

/* Menu layout */
.nav-menu {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

/* Menu links */
.nav-menu a {
  text-decoration: none;
  color: var(--neutral-9);
  padding-block: .25rem;
  font-weight: 600;
}

.nav-menu a:hover {
  color: var(--accent-1);
}

/* Active page */
.nav-active {
  border-block-end: 2px solid var(--accent-1);
  padding-block-end: .25rem;
}

/* Contact button */
.nav-contact {
  padding: .5rem .75rem;
  border-radius: .375rem;
  color: var(--neutral-0) !important;
  background: var(--accent-1);
}

.nav-contact:hover {
  background: var(--accent-2);
  color: var(--neutral-9) !important;
}
* ============================================================= */
/* MOBILE + TABLET — RESPONSIVE NAV (Like your friend's layout)  */
/* ============================================================= */

@media (max-width: 48rem) {  /* 768px */
  
  /* Allow wrapping */
  .nav-inner {
    flex-wrap: wrap;
    row-gap: .75rem;
  }

  /* Logo takes entire top line */
  .logo {
    flex-basis: 100%;
  }

  /* Menu wraps automatically */
  .nav-menu {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .75rem 1.25rem;
  }

  /* Reduce link size a bit */
  .nav-menu a {
    font-size: .9rem;
    padding-inline: .25rem;
  }

  /* Smaller Contact button */
  .nav-contact {
    padding: .35rem .55rem;
    font-size: .85rem;
  }
}

/* common container */
.content-wrapper{
  inline-size: 100%;
  max-inline-size: 56.25rem;         /* 900px cap for regular pages */
  margin-inline: auto;
  padding: 1.5rem var(--gutter);
}

/* card used on home + resume header */
.content-bg{
  inline-size: 100%;
  max-inline-size: 68rem;             /* larger cap for hero card */
  margin-inline: auto;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: .75rem;
  padding: clamp(1.25rem, 2vw + 1rem, 2.5rem);
  box-shadow:
    0 1.25rem 3rem rgba(0,0,0,0.28),
    0 .05rem .5rem rgba(0,0,0,0.06) inset;
  backdrop-filter: blur(2px);
}

/* buttons */
.btn, a.btn{
  background: var(--accent-1);
  color: var(--neutral-0);
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .1em;
  line-height: 1;
  display: inline-block;
  padding: .4375rem .625rem;
  border-radius: .25rem;
  text-decoration: none;
}

/* =================================================================== */
/*  HOME (hero) – mobile-first                                         */
/* =================================================================== */
body.home{
  background-image:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url("../images/bg-home-office-studio-2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
}



/* Content area (row 1) */
.home .content-wrapper{
   flex: 1;
  padding-top: 1.5rem;  /* lifts the card up */
  display: flex;
  justify-content: center;
}







/* Card sizing just on the home page */
.home .content-bg{
  inline-size: min(92vw, 38rem);  /* fluid width with max */
  margin: 0 auto 1.25rem;         /* small gap above footer */
  padding: 1rem 1.25rem;
  border-radius: .65rem;

  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow:
    0 1rem 2.25rem rgba(0,0,0,0.24),
    0 .05rem .4rem  rgba(0,0,0,0.05) inset;
  backdrop-filter: blur(2px);
}

/* Footer is always the second row */
body.home > footer{
  grid-row: 2;
}

/* Step-up at ≥500px */
@media (min-width: 31.25rem){
  .home .content-bg{
    inline-size: min(88vw, 42rem);
    padding: clamp(1.1rem, 2vw + 1rem, 2.25rem);
    border-radius: .75rem;
    margin-block-end: 1.5rem;
  }
}

/* Desktop ≥860px: center hero vertically again */
@media (min-width: 53.75rem){
  .home .content-wrapper{
    align-items: center;
    padding-top: 0;
  }
}

/* =================================================================== */
/*  Resume                                                              */
/* =================================================================== */
.resume .content-wrapper{ max-inline-size: 64rem; }

.resume header::before{
  content: "";
  display: block;
  inline-size: 100%;
  block-size: clamp(10rem, 35vw, 23.4375rem);
  margin-block-end: 1rem;
  border-radius: .5rem;
  background: url("../images/bg-home-office-studio-2.png") center / cover no-repeat;
}

/* sections */
.resume-section{
  inline-size: 100%;
  max-inline-size: 64rem;
  margin-inline: auto;
  margin-block-end: 2rem;
}
.resume-section h2{
  border-block-end: 2px dashed var(--border);
  padding-block-end: .375rem;
  margin-block-end: .75rem;
}

/* simple 2-column at large screens for work items */
.work-item{ margin-block: 1.5rem; }
.work-details p{ margin: 0; }

@media (min-width: 53.75rem){
  .work-item{
    display: grid;
    grid-template-columns: 18.75rem 1fr; /* 300px + fluid */
    column-gap: 1.25rem;
  }
}

/* =================================================================== */
/*  Projects (future)                                                   */
/* =================================================================== */
/* PROJECTS GRID WITH SUBGRID */
.projects-section .project-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto; /* Required for subgrid */
  gap: 1.5rem;
}

@media (min-width: 40.625rem) {
  .projects-section .project-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 53.75rem) {
  .projects-section .project-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* PROJECT CARD USING SUBGRID */
.project-items {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: .75rem;

  background: rgba(255,255,255,0.96);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1.25rem;
  text-align: center;
  box-shadow:
    0 1rem 2rem rgba(0,0,0,0.10),
    0 .05rem .4rem rgba(0,0,0,0.04) inset;
}

.project-items .btn {
  margin-block-start: auto;
  align-self: center;
}


/* =================================================================== */
/*  Footer                                                              */
/* =================================================================== */
footer{
  background: var(--neutral-9);
  color: var(--neutral-2);
  padding: .75rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1rem;
}
footer p{ margin: 0; }
footer a{ color: var(--accent-2); }
footer a:hover{ color: var(--accent-1); }

.socials{
  list-style: none;
  display: flex;
  gap: .5rem;
  margin: 0;
  padding: 0;
  margin-left: auto; /* push icons to the right */
}
.socials img{
  inline-size: 2rem;
  block-size: 2rem;
  display: block;
}
.socials a:hover img{ opacity: .65; }

/* =================================================================== */
/*  Type scale bump (wider screens)                                     */
/* =================================================================== */
@media (min-width: 31.25rem){
  h1{ font-size: 4.375rem; }
  h2{ font-size: 2.25rem; }
  h3{ font-size: 1.5rem; }
}
/* ===== Projects: Grid upgrade to 3 columns at large screens ===== */
@media (min-width: 53.75rem){
  .project-wrapper{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =================================================================== */
/* Projects page                                                        */
/* =================================================================== */

body.projects .project-items{
  /* panel */
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--border);
  border-radius: .75rem;
  box-shadow:
    0 1rem 2rem rgba(0,0,0,0.10),
    0 .05rem .4rem rgba(0,0,0,0.04) inset;

  /* vertical stack inside the card */
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.25rem;
  text-align: center;
  min-block-size: 28rem;                /* equal heights */
}

/* card title + blurb */
body.projects .project-items h3{
  margin: .25rem 0 0;
  font-family: var(--ff-head);
  font-size: 1.5rem;
}
body.projects .project-items > p:first-of-type{
  color: var(--neutral-8);
  max-inline-size: 38ch;
  margin-inline: auto;
}

body.projects .project-items img{
  inline-size: 92%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: .5rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  padding: .25rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,0.08);
  margin-inline: auto;
}

/* full-width button pinned to bottom of card */
body.projects .project-items .btn{
  margin-block-start: auto;             /* push to bottom */
  align-self: stretch;
  text-align: center;
  padding: .625rem .75rem;
  border-radius: .5rem;
}

/* keep your 1→2→3 column grid with higher specificity on projects page */
body.projects .projects-section .project-wrapper{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 40.625rem){
  body.projects .projects-section .project-wrapper{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 53.75rem){
  body.projects .projects-section .project-wrapper{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ============================================================= */
/* CONTACT PAGE                                                   */
/* ============================================================= */

body.contact {
  background-image: url("../images/bg-home-office-studio-2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  backdrop-filter: blur(3px);
}

/* Dark overlay blur */
.contact-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  z-index: -1;
}

/* Card */
.contact-card {
  background: rgba(255,255,255,0.96);
  padding: 2rem;
  border-radius: .75rem;
  max-width: 40rem;
  margin: 5rem auto 2rem;
  text-align: center;
  box-shadow: 0 1.25rem 3rem rgba(0,0,0,0.28);
}

/* Avatar Circle */
.initial-circle {
  width: 120px;
  height: 120px;
  background: var(--accent-1);
  color: white;
  font-size: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 auto 1rem;
}