/* ---------------------------------------------------
   Steffy George — Portfolio
   Palette drawn from the portfolio boards:
   sage green, mustard yellow, dusty mauve, terracotta
--------------------------------------------------- */

:root{
  --sage:        #d7ded2;
  --sage-deep:   #b9c4ac;
  --paper:       #faf8f3;
  --paper-dim:   #f2efe6;
  --ink:         #1e1d19;
  --ink-soft:    #565349;
  --line:        #d9d4c6;

  --mustard:     #dcb94a;
  --mauve:       #a17f74;
  --terracotta:  #a8482f;

  --serif: 'EB Garamond', Georgia, serif;
  --sans: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;

  --maxw: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* subtle paper grain overlay, echoes the textured boards */
.grain{
  position: fixed; inset:0; pointer-events:none; z-index: 1000;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------------- Header ---------------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  transition: background .35s ease, border-color .35s ease, padding .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled{
  background: rgba(250,248,243,.88);
  backdrop-filter: blur(10px);
  border-color: var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.35rem 0;
  transition: padding .3s ease;
}
.site-header.scrolled .header-inner{ padding: 0.9rem 0; }

.brand{
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 1.25rem; text-decoration:none; letter-spacing:.01em;
}

.nav{ display:flex; align-items:center; gap: 2rem; }
.nav a{
  text-decoration:none; font-size:.92rem; letter-spacing:.02em;
  color: var(--ink); position:relative; padding: .25rem 0;
}
.nav a:not(.nav-cta)::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--ink); transform: scaleX(0); transform-origin: right;
  transition: transform .3s ease;
}
.nav a:not(.nav-cta):hover::after{ transform: scaleX(1); transform-origin: left; }

.nav-cta{
  border:1px solid var(--ink); border-radius: 999px; padding: .5rem 1.1rem !important;
}
.nav-cta:hover{ background: var(--ink); color: var(--paper); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding: 8px;
}
.nav-toggle span{ width:22px; height:1.5px; background:var(--ink); display:block; transition: all .3s ease; }

/* ---------------- Hero ---------------- */
.hero{
  position:relative; min-height: 100svh; display:flex; align-items:center;
  background: var(--sage); overflow:hidden;
}
.hero-map{
  position:absolute; inset:0;
  background-size: cover; background-position: 65% 50%;
  opacity: .55;
}
.hero-map::after{ content:''; }
.hero::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(215,222,210,.97) 0%, rgba(215,222,210,.75) 42%, rgba(215,222,210,.35) 100%);
}
.hero-inner{ position:relative; z-index:2; padding-top: 6rem; max-width: 760px; }

.eyebrow{
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink-soft); margin: 0 0 1.4rem;
}
.hero-title{
  font-family: var(--serif); font-weight:500; margin:0 0 1rem;
  font-size: clamp(3rem, 9vw, 6rem); line-height: .98; letter-spacing:-.01em;
}
.hero-title em{ font-style: italic; font-weight:500; color: var(--terracotta); }

.hero-role{
  font-size: clamp(1.05rem, 2vw, 1.3rem); margin: 0 0 1.4rem; font-weight:500;
}
.hero-lede{
  max-width: 46ch; color: var(--ink-soft); font-size: 1.02rem; margin: 0 0 2.2rem;
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--sans); font-size:.92rem; letter-spacing:.02em;
  padding: .9rem 1.6rem; border-radius: 999px; text-decoration:none;
  border: 1px solid var(--ink); transition: all .28s ease;
}
.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ background: var(--terracotta); border-color: var(--terracotta); }
.btn-ghost{ background: transparent; color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--paper); }
.btn-lg{ padding: 1.1rem 2.2rem; font-size: 1.05rem; }

.scroll-cue{
  position:absolute; bottom: 2.4rem; left:50%; transform: translateX(-50%);
  width: 26px; height: 42px; border:1px solid var(--ink-soft); border-radius: 20px; z-index:2;
}
.scroll-cue span{
  position:absolute; top:8px; left:50%; width:4px; height:4px; margin-left:-2px;
  background: var(--ink); border-radius:50%;
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue{ 0%{ opacity:1; top:8px;} 70%{opacity:0; top:24px;} 100%{opacity:0; top:24px;} }

/* ---------------- Intro strip ---------------- */
.intro{ padding: 5.5rem 0; border-bottom: 1px solid var(--line); }
.intro-grid{
  display:grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items:start;
}
.intro-text{
  font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.5; margin:0;
}
.intro-tags{ display:flex; flex-direction:column; gap:.75rem; align-items:flex-start; }
.intro-tags span{
  font-size:.82rem; letter-spacing:.03em; text-transform:uppercase;
  padding:.5rem .95rem; border:1px solid var(--line); border-radius: 999px;
  color: var(--ink-soft);
}

/* ---------------- Section heading ---------------- */
.section-heading{
  display:flex; align-items:baseline; gap: .85rem;
  font-family: var(--serif); font-style: italic; font-weight:500;
  font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 3rem;
}
.section-heading .num{
  font-family: var(--sans); font-style: normal; font-weight:600;
  font-size: .95rem; color: var(--ink-soft); border:1px solid var(--line);
  border-radius:50%; width:2.2rem; height:2.2rem; display:inline-flex;
  align-items:center; justify-content:center; letter-spacing:0;
}

.work{ padding: 6.5rem 0 2rem; }

/* ---------------- Project ---------------- */
.project{ padding: 4rem 0; border-top: 1px solid var(--line); }
.project-head{
  display:grid; grid-template-columns: auto 1fr auto; gap: 1.5rem 2rem;
  align-items:center; margin-bottom: 2.5rem;
}
.project-index{
  font-family: var(--serif); font-style: italic; font-size: 2.6rem;
  color: var(--accent); line-height:1;
}
.project-title{
  font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 .35rem; font-weight:600; letter-spacing:-.01em;
}
.project-sub{ margin:0; color: var(--ink-soft); font-size: .95rem; }
.project-tags{ display:flex; flex-wrap:wrap; gap:.5rem; justify-self:end; }
.project-tags span{
  font-size:.74rem; letter-spacing:.03em; text-transform:uppercase;
  padding:.4rem .8rem; border-radius:999px; background: var(--accent-tint); color: var(--accent-dark);
}

.project-body{
  display:grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items:center; margin-bottom: 2.5rem;
}
.project-alt .project-body{ grid-template-columns: .85fr 1.15fr; }
.project-alt .project-body .project-copy{ order:1; }
.project-alt .project-body .project-media{ order:2; }

.project-media img{
  border-radius: 6px; box-shadow: 0 20px 50px -25px rgba(30,29,25,.35);
  border: 1px solid var(--line);
}
.project-copy p{ color: var(--ink-soft); margin: 0 0 1.1rem; }
.project-copy strong{ color: var(--ink); }

.project-gallery{
  display:grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
  padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 auto;
}
.project-gallery img{
  border-radius: 6px; border: 1px solid var(--line);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.project-gallery img:hover{ transform: translateY(-4px); }

/* ---------------- About ---------------- */
.about{ padding: 6.5rem 0; background: var(--paper-dim); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.about-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items:center; }
.about-media img{
  border-radius: 6px; filter: grayscale(1) contrast(1.05);
  border: 1px solid var(--line);
}
.about-copy p{ color: var(--ink-soft); max-width: 58ch; }
.about-skills{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-top: 2.25rem;
}
.about-skills h4{ margin: 0 0 .4rem; font-size:.85rem; letter-spacing:.03em; text-transform:uppercase; }
.about-skills p{ margin:0; font-size:.88rem; color: var(--ink-soft); }

/* ---------------- Experience / Timeline ---------------- */
.experience{ padding: 6.5rem 0; }
.timeline-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.timeline-col h3{
  font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft);
  margin: 0 0 1.75rem;
}
.timeline{ list-style:none; margin:0; padding:0; border-left: 1px solid var(--line); }
.timeline li{
  position:relative; padding: 0 0 2rem 1.75rem; display:flex; flex-direction:column; gap:.2rem;
}
.timeline li::before{
  content:''; position:absolute; left:-4.5px; top: .35rem; width:8px; height:8px;
  border-radius:50%; background: var(--terracotta);
}
.timeline li:last-child{ padding-bottom:0; }
.tl-date{ font-size:.78rem; letter-spacing:.03em; color: var(--ink-soft); }
.tl-title{ font-weight:600; font-size: 1.05rem; }
.tl-place{ font-size:.9rem; color: var(--ink-soft); }

/* ---------------- Contact ---------------- */
.contact{
  position:relative; padding: 8rem 0; background: var(--sage); overflow:hidden;
  text-align:center;
}
.hero-map--footer{ opacity:.4; background-position: 30% 60%; }
.contact::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 30%, rgba(250,248,243,.55), rgba(215,222,210,.94) 70%);
}
.contact-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.contact-title{
  font-family: var(--serif); font-weight:500; font-size: clamp(2rem, 5vw, 3.2rem);
  line-height:1.15; margin: 0 0 2.2rem;
}
.contact-title em{ font-style:italic; color: var(--terracotta); }
.contact-sub{ margin-top: 1.25rem; color: var(--ink-soft); font-size:.9rem; }
.contact-linkedin{ margin-top: 1rem; }

/* ---------------- Footer ---------------- */
.site-footer{ padding: 2rem 0; }
.footer-inner{
  display:flex; justify-content:space-between; font-size:.8rem; color: var(--ink-soft);
  flex-wrap:wrap; gap:.5rem;
}

/* ---------------- Reveal animation ---------------- */
.reveal{
  opacity:0; transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .scroll-cue span{ animation:none; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px){
  .intro-grid{ grid-template-columns: 1fr; }
  .about-grid{ grid-template-columns: 1fr; }
  .about-media{ max-width: 320px; }
  .about-skills{ grid-template-columns: 1fr 1fr; }
  .timeline-grid{ grid-template-columns: 1fr; gap: 3rem; }
  .project-body, .project-alt .project-body{ grid-template-columns: 1fr; }
  .project-alt .project-body .project-copy,
  .project-alt .project-body .project-media{ order: initial; }
  .project-gallery{ grid-template-columns: 1fr; }
  .project-head{ grid-template-columns: 1fr; }
  .project-tags{ justify-self:start; }
}

@media (max-width: 720px){
  .nav{
    position:fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
    background: var(--paper); flex-direction:column; align-items:flex-start;
    padding: 6rem 2rem 2rem; gap: 1.75rem; box-shadow: -10px 0 40px rgba(0,0,0,.12);
    transform: translateX(100%); transition: transform .35s ease;
  }
  .nav.open{ transform: translateX(0); }
  .nav a{ font-size: 1.05rem; }
  .nav-toggle{ display:flex; }
  .about-skills{ grid-template-columns: 1fr; }
}