/* ===== NAV ===== */

.oz-hero{
	margin-top: 40px;
}
.resize{
  padding-top: 10px;
  padding-bottom: 150px;
  margin: var(--space-2) auto var(--space-5);
  width: 80%; max-width: 1100px; height: 64px;
  opacity: .9;
}
.site-nav{
  position: sticky; top: 0; z-index: 10;
  background: var(--color-bg);
  border-bottom: 0px solid var(--color-border);
  backdrop-filter: blur(6px);
}
.nav-inner{
  display:flex; 
  justify-content: center;
  gap: 150px;
  padding: 1rem;
  margin-bottom: 30px;
}
.nav-links{ display:flex; gap: clamp(6rem,1vw,1.25rem); }
.nav-link{
  padding: .9rem .4rem; 
  border-radius: var(--radius-pill);
  color: var(--primitive-olive-600);
  font-size: 20px;
}
.nav-link:hover{ color: var(--primitive-green-50); }

.brand{ display:grid; place-items:center; }
.brand-mark{
  display:grid; place-items:center;
  width:65px; height: 65px;
  font-weight: var(--font-weight-display);
  letter-spacing: .02em;
}

/* ===== HERO (text stack left, art right) ===== */
.hero{
  padding: var(--space-2) 0 var(--space-5);
  display:grid;
  grid-template-columns: 1.2fr .8fr;   /* keep image on the right */
  gap: var(--space-4);
  justify-content: center;
}
.hero-copy{
  display:flex;
  flex-direction:column;
  align-items:flex;       /* left edge alignment */
  justify-content:center;       /* vertically center the stack */
}
.hero-copy h1{
  font-size: var(--font-size-hero);
  line-height: 1.2;
  margin-bottom: var(--space-2);
  display: flex;
  justify-content: center;
}
.lead{
  color: var(--color-muted);
  font-size: var(--font-size-lead);
  margin-bottom: var(--space-3);
  text-align:center;
}
.hero-copy .btn{ align-self:flex-start; }

.hero-art{
  /* replace with your composed portrait/flowers image */
  aspect-ratio: 1/1;
  width: min(100%, 440px);
  margin-inline: auto;
  background: center/contain no-repeat var(--hero-art, url("file:///Macintosh HD/Users/hannahgaley/Desktop/images/hero-portrait.svg") );
  filter: drop-shadow(var(--shadow-soft));
}

/* Divider */
.divider{
  margin: var(--space-5) auto var(--space-4);
  width: 92%; max-width: 1100px; height: 64px;
  background: center/contain no-repeat var(--divider-image, url("decalForWeb.svg") );
  opacity: .9;
}

/* ===== BUTTONS ===== */
.btn2{
	margin-left: 200px;
}
.btn{
  display:inline-block;
  padding: .5rem 3rem;
  border-radius: var(--radius-pill);
  background: var(--primitive-green-50);
  color: var(--color-brand-contrast);
  box-shadow: var(--shadow-hard);
  transition: transform .08s ease, background .18s ease, box-shadow .18s ease;
  
}
.btn-header{
justify-content: center;	
	}

.btn:hover{ background: var(--primitive-hover); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); box-shadow: 0 2px 0 rgba(0,0,0,.18); }

.btn-secondary{
  display:inline-flex; gap:.4rem; align-items: flex-end;
  padding: .45rem 2rem;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  margin-right: 2rem;
 
}
.btn-secondary:hover{ background: var(--color-brand-hover);}

/* Links via tokens */
.link{ border-bottom: 1px dashed color-mix(in oklab, var(--color-brand) 60%, transparent); }
.link:hover{ color: var(--color-brand); }

/* ===== PROJECTS (image on top, then text) ===== */
.projects{ padding-bottom: var(--space-4); }

.project{
  display:flex;
  flex-direction:column;        /* stack image above copy */
  align-items:center;
  text-align:center;
  padding: var(--space-5) 0;
  border-top: 0px solid color-mix(in oklab, var(--color-border) 65%, transparent);
}
.project + .project{ border-top: none; }

.frame{
  width: min(100%, 520px);
  aspect-ratio: 3/4;
  margin-bottom: var(--space-1);
  background: center/contain no-repeat var(--frame-image);
  filter: drop-shadow(var(--shadow-soft));
  margin-right: 20px;
}
.project-info h2{
  font-size: var(--font-size-h2);
  margin-bottom: 2rem;
}
.project-desc{
  color: var(--color-muted);
  max-width: 60ch;
  margin: 0 auto var(--space-5);
  font-size: 20px;
}

/* Anchor sections */
.section-anchor{ padding: var(--space-4) 0 0; }

/* ===== FOOTER ===== */
.site-footer{
  margin-top: var(--space-6);
  background: var(--primitive-footer); /* the full-width color band */
  color: var(--color-brand-contrast);
  width: 100%;
}

.footer-inner{
  max-width: 1100px;      /* or var(--content-max) */
  margin: 0 auto;         /* centers the inner content */
  padding: 1rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-small);
}
.site-footer{
  position: relative;
  background: var(--primitive-footer);
}

.site-footer::before{
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: 0 0 0 100vmax var(--primitive-footer);
  clip-path: inset(0 -100vmax); /* allows the shadow to extend beyond any max-width parent */
  z-index: -1;
}

.container2{
	display:flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
	padding: .07rem 5rem;
	gap: 12rem;
	margin-left: 6rem;
}

#hero-title {
 font-display: block;
 margin: 2rem;
}

#p1-title {
	font-size: 45px;
}





/* ===== RESPONSIVE ===== */
@media (max-width:960px){
	.footer-inner{align-content: center; flex-wrap: nowrap;}
}

@media (max-width: 960px){
  .hero{ grid-template-columns: 1fr; text-align:center; }
  .hero-art{ order: 2; }  /* keep text first, image second on mobile */
  .hero-copy{ order: 1; }
}

/* ===== DISCIPLINES ===== */
.disciplines {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-5) 0 var(--space-6);
  text-align: center;
  flex-wrap: wrap;
}

.discipline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; /* ensures button aligns evenly */
  width: 250px; /* consistent width for alignment */
  min-height: 580px; /* adjust this height so all are equal */
  padding: 1rem;
}

.discipline h2 {
  font-size: var(--font-size-h2);
  margin-top: 0.5rem;
}

.discipline p {
  color: var(--color-muted);
  max-width: 60ch;
  font-size: var(--font-size-body);
  line-height: var(--line-height);
  margin: 1rem 0 2rem;
}

.discipline img {
  height: auto;
  display: block;
  margin: 0 auto 1rem;
}

/* Allow separate sizing per icon */
#icon-gd { width: 270px; height: 203px; }   
#icon-ill { width: 250px; height: auto; }  
#icon-ux { width: 200px; height: auto; }   

@media (min-width: 900px) {
  .disciplines {
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
  }
  .discipline {
    max-width: 350px;
  }
}