*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--whitewash);
  -webkit-font-smoothing:antialiased;
  position:relative;
}
img,svg{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

/* focus visibility, kept crisp even with all the motion below */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--terracotta);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:fixed;top:-60px;left:16px;z-index:1000;
  background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:2px;
  font-size:13px;font-weight:600;letter-spacing:0.04em;
  transition:top .25s ease;
}
.skip-link:focus{top:16px;}

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--terracotta);
}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05;}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px;}
@media(max-width:640px){.wrap{padding:0 22px;}}

.section-head{max-width:640px;margin:0 auto 0;text-align:center;padding:0 20px;}
.section-head h2{font-size:clamp(28px,4vw,44px);margin-top:14px;}
.section-head p{margin-top:16px;color:var(--ink-soft);font-size:16px;line-height:1.6;}

/* placeholder photo generator */
.ph{background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;}
.ph-icon{opacity:0.5;}

/* ---------- GRAIN / DEPTH LAYER ----------
   A fixed, whole-page film-grain overlay. Very low opacity, blend-mode
   overlay so it reads as texture rather than noise. Kills the "sterile"
   flatness without adding visible decoration. */
.grain-overlay{
  position:fixed;inset:0;z-index:999;pointer-events:none;
  opacity:0.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}