/* ============================================================
   Hillery Trippe for Yountville Town Council — shared styles
   Palette & type system derived from the campaign flyer mockups
   ============================================================ */
:root{
  --navy:#1b3a5c;
  --navy-deep:#12293f;
  --cream:#f6f1e2;
  --card:#fbf7ec;
  --green:#2f5d3a;
  --green-soft:#4a7a55;
  --gold:#c99b3f;
  --ink:#2a3540;
  --serif:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --script:"Caveat","Segoe Script",cursive;
  --shadow:0 12px 32px rgba(18,41,63,.14);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--cream);
}
img,svg{max-width:100%;height:auto}
a{color:var(--green)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- page scaffold ---------- */
.page-bg{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(180deg,rgba(246,241,226,.94) 0%,rgba(246,241,226,.82) 34%,rgba(246,241,226,.6) 100%),
    url("../assets/vineyard.jpg") center 72% / cover no-repeat;
}
.page-bg--home{
  background:
    linear-gradient(90deg,rgba(246,241,226,.9) 0%,rgba(246,241,226,.55) 38%,rgba(246,241,226,.05) 62%,rgba(246,241,226,0) 100%),
    linear-gradient(0deg,rgba(246,241,226,.55) 0%,rgba(246,241,226,0) 30%),
    url("../assets/hero-balloon.jpg") center 38% / cover no-repeat;
}
main{flex:1}
.content{width:min(1150px,100%);margin:0 auto;padding:1.5rem clamp(1.2rem,4vw,3rem) 4.5rem}
.content--narrow{max-width:950px}
.lead{font-size:1.12rem;max-width:62ch}

/* ---------- header ---------- */
.site-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:2rem;padding:1.6rem clamp(1.2rem,4vw,3.5rem) 1rem;
}
.logo{display:block;text-decoration:none;line-height:1}
.logo-name{
  display:block;font-family:var(--serif);font-weight:800;
  font-size:1.9rem;letter-spacing:.02em;line-height:.95;
  text-transform:uppercase;color:var(--navy);
}
.logo-sub{
  display:block;margin-top:.5rem;font-weight:700;font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--green);
}
.site-nav{display:flex;gap:clamp(1rem,2.5vw,2.4rem);padding-top:.55rem;flex-wrap:wrap}
.site-nav a{
  font-weight:800;font-size:1.2rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--navy);text-decoration:none;padding-bottom:.35rem;
  border-bottom:3px solid transparent;
}
.site-nav a:hover{color:var(--green)}
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:92px;height:46px;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--navy);padding:0;
}
.nav-toggle svg{width:64px;height:32px;fill:currentColor}
.nav-toggle[aria-expanded="true"]{background:rgba(27,58,92,.08)}
.site-nav a.active{border-bottom-color:var(--green)}

/* ---------- home hero ---------- */
.hero{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  width:min(1200px,100%);margin:0 auto;
  padding:2rem clamp(1.2rem,5vw,4rem) 5rem;
}
.hero-eyebrow{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1.5rem,3.5vw,2.4rem);letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy);margin:0;
}
.hero h1{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(3.4rem,10vw,7rem);line-height:.92;
  text-transform:uppercase;color:var(--navy);margin:.4rem 0 1.6rem;
}
.hero-tagline-wrap{margin:0 0 2.2rem}
.hero-tagline{
  display:inline-block;background:var(--green);color:#fff;font-weight:700;
  font-size:clamp(1.05rem,2.2vw,1.5rem);line-height:1.5;
  padding:.55em .85em;border-radius:6px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--navy);color:var(--cream);
  font-family:var(--sans);font-weight:700;font-size:.85rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:1em 1.7em;border:0;border-radius:3px;cursor:pointer;
}
.btn:hover{background:var(--navy-deep)}

/* ---------- page titles ---------- */
.page-title{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(2.4rem,6vw,4rem);letter-spacing:.04em;line-height:1.05;
  text-transform:uppercase;color:var(--navy);margin:1rem 0 .5em;
}
.page-title::after{
  content:"";display:block;width:90px;height:4px;
  background:var(--green);margin-top:.35em;
}
.page-title--center{text-align:center}
.page-title--center::after{margin-left:auto;margin-right:auto}

/* ---------- cards & icon items ---------- */
.card{
  background:var(--card);border-radius:16px;box-shadow:var(--shadow);
  padding:1.7rem 1.6rem;
}
.card h2,.card h3{
  font-family:var(--sans);font-size:.92rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--navy);margin:0 0 .3rem;
}
.card p{margin:0;font-size:.97rem}

.icon-item{display:flex;gap:1.1rem;align-items:flex-start;margin:1.5rem 0}
.icon-item h2,.icon-item h3{
  font-family:var(--sans);font-size:.92rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--navy);margin:.2rem 0 .3rem;
}
.icon-item p{margin:0;font-size:.97rem}
.icon-badge{
  flex:0 0 52px;width:52px;height:52px;border-radius:50%;
  background:var(--green);color:var(--cream);
  display:inline-flex;align-items:center;justify-content:center;
}
.icon-badge svg{width:26px;height:26px;fill:currentColor}

.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:2rem}
.cards-grid .card{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}

.experience-grid{
  display:grid;grid-template-columns:1.6fr 1fr;
  gap:clamp(1.5rem,3.5vw,2.8rem);align-items:stretch;margin-top:1.5rem;
}
.experience-grid .card{display:flex;flex-direction:column;justify-content:center}

/* ---------- about page ---------- */
.about-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:stretch;
}
.about-copy{
  background:rgba(246,241,226,.88);padding:1.5rem 1.7rem;border-radius:16px;
  display:flex;flex-direction:column;
}
.about-copy .script{margin-top:auto;padding-top:1.8rem}
.portrait-frame{
  margin:0;border-radius:18px;overflow:hidden;background:#fff;
  border:8px solid #fff;box-shadow:var(--shadow);
}
.portrait-frame img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px}
.script{
  font-family:var(--script);font-weight:600;color:var(--green);
  font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.2;margin:1.8rem 0 0;
}
.signature{
  font-family:var(--script);font-weight:600;color:var(--navy);
  font-size:clamp(2.8rem,5vw,3.8rem);line-height:1;margin:.3rem 0 0;
}

/* ---------- signup bar ---------- */
.signup{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;margin-top:2.5rem;
}
.signup-copy{flex:1 1 320px}
.signup-form{display:flex;gap:.8rem;flex-wrap:wrap;flex:1 1 320px;justify-content:flex-end}
.signup-form input[type=email]{
  flex:1;min-width:200px;padding:.85em 1em;
  border:2px solid var(--navy);border-radius:3px;
  font:inherit;background:#fff;color:var(--ink);
}

/* ---------- footer ---------- */
.site-footer{
  background:var(--navy);color:var(--cream);text-align:center;
  padding:1.7rem 1rem 1.3rem;margin-top:auto;
}
.footer-motto{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.2rem,2.9vw,1.75rem);letter-spacing:.22em;
  text-transform:uppercase;margin:0;
}
.footer-motto span{color:#9ec9a8;margin:0 .3em}
.footer-fine{margin:.8rem 0 0;font-size:.72rem;letter-spacing:.06em;opacity:.75}
.footer-fine a{color:inherit}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .experience-grid,.about-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .site-header{flex-direction:column;gap:1rem}
  .site-nav{padding-top:0}
}
@media (max-width:760px){
  .site-header{
    flex-direction:row;align-items:flex-start;justify-content:space-between;
    gap:1rem;position:relative;
  }
  .nav-toggle{margin-top:-4px}
  .nav-toggle{display:inline-flex}
  .site-nav{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:50;
    flex-direction:column;gap:1.1rem;padding:1.2rem 1.4rem 1.4rem;
    background:var(--cream);box-shadow:0 18px 34px rgba(18,41,63,.18);
    border-bottom:3px solid var(--green);
  }
  .site-nav.open{display:flex}
  .site-nav a{font-size:1.18rem}
}
@media (max-width:640px){
  .cards-grid{grid-template-columns:1fr}
  .signup{flex-direction:column;align-items:stretch}
  .signup-copy,.signup-form{flex:0 0 auto}
  .signup-form .btn{width:100%}
  .footer-motto{font-size:.95rem;letter-spacing:.09em}
  .hero{padding-bottom:3.5rem}
}

/* ---------- desktop "frame" layout: header + footer pinned, no page scroll ---------- */
@media (min-width:981px){
  html,body{height:100%}
  .page-bg{height:100vh;min-height:0;overflow:hidden}
  main{overflow-y:auto;display:flex;flex-direction:column}
  main > .content{margin:auto;width:min(1150px,100%)}

  .site-header{padding:.9rem clamp(1.2rem,4vw,3.5rem) .5rem}
  .logo-name{font-size:1.5rem}
  .logo-sub{margin-top:.3rem;font-size:.6rem}
  .site-nav{padding-top:.4rem}
  .site-nav a{font-size:1.1rem}

  .content{padding:.4rem clamp(1.2rem,4vw,3rem) 1rem}
  .page-title{font-size:clamp(1.9rem,3vw,2.5rem);margin:.3rem 0 .3em}
  .page-title::after{width:70px;height:3px;margin-top:.25em}
  .lead{font-size:1rem;margin:.4em 0}
  .lead+.lead{margin-top:-.2em}

  .card{padding:1rem 1.1rem;border-radius:14px}
  .card h2,.card h3,.icon-item h2,.icon-item h3{font-size:.84rem}
  .card p,.icon-item p{font-size:.88rem;line-height:1.45}
  .icon-item{margin:.6rem 0;gap:.85rem}
  .icon-badge{flex:0 0 40px;width:40px;height:40px}
  .icon-badge svg{width:20px;height:20px}
  .cards-grid{gap:1rem;margin-top:1.1rem}
  .experience-grid{gap:clamp(1rem,2vw,1.6rem);margin-top:.8rem}
  .signup{margin-top:1.1rem}

  .hero{padding-bottom:3rem}
  .hero h1{font-size:clamp(3rem,8vw,5.4rem)}
  .hero-tagline-wrap{margin-bottom:1.6rem}

  .script{font-size:clamp(1.4rem,2.2vw,1.8rem);margin-top:1rem}
  .signature{font-size:clamp(2.2rem,4vw,3rem)}

  .site-footer{padding:1rem 1rem .8rem}
  .footer-motto{font-size:clamp(1rem,1.9vw,1.3rem)}
}

/* ---------- photo credits modal ---------- */
.footer-fine a{color:inherit}
.credits-dialog{
  border:0;border-radius:16px;box-shadow:0 24px 60px rgba(18,41,63,.35);
  background:var(--card);color:var(--ink);
  width:min(92vw,340px);padding:1rem 1.1rem;font-size:.8rem;
}
.credits-dialog::backdrop{background:rgba(18,41,63,.55)}
.credits-dialog h2{
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);margin:0 0 .5rem;
}
.credits-dialog p{margin:.35rem 0;line-height:1.45}
.credits-dialog .btn{margin-top:.7rem;font-size:.68rem;padding:.7em 1.3em}

@media (min-width:641px){
  .site-footer{position:relative}
  .footer-fine{
    position:absolute;right:clamp(1rem,3vw,2rem);top:50%;
    transform:translateY(-50%);margin:0;
  }
  .credits-dialog{margin:auto clamp(.8rem,2vw,1.6rem) 4.4rem auto}
}