/* ============================================================
   base.css — reset, typography defaults, helpers
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:var(--fs-body); line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:var(--brass-deep); text-decoration:none; }
a:hover{ color:var(--ink); }
ul,ol{ margin:0; padding:0; }
button{ font:inherit; }
:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }

/* text-wrap:balance evens the line lengths of a heading instead of filling the first line and
   orphaning whatever is left — "…one relationship at a / time" was the symptom. It applies to
   every heading here rather than per-component, because a title can land in any block and the
   two components that had it (.hero__title, .cta__title) were the only two that never broke.
   Browsers without it wrap exactly as before, so there is nothing to fall back to. */
h1,h2,h3,h4{ font-family:var(--font-serif); font-weight:500; color:var(--ink); margin:0; text-wrap:balance; }
/* Body copy wants `pretty`, not `balance`: it only prevents a one-word last line, and leaves
   long text otherwise filled. Balancing a paragraph would make its measure ragged. */
p,li,dd,figcaption,blockquote{ text-wrap:pretty; }
h1{ font-size:var(--fs-h1); line-height:1.1; letter-spacing:-.015em; font-weight:400; }
h2{ font-size:var(--fs-h2); line-height:1.15; letter-spacing:-.01em; }
h3{ font-size:var(--fs-h3); line-height:1.2; letter-spacing:-.01em; }
h4{ font-size:var(--fs-h4); font-family:var(--font-sans); font-weight:600; line-height:1.3; }
p{ margin:0 0 var(--space-4); }
strong{ font-weight:600; }

.display{ text-wrap:balance; font-family:var(--font-serif); font-weight:400; font-size:var(--fs-display);
  line-height:1.05; letter-spacing:-.02em; }
.lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--ink-soft); }
.overline{ font-size:var(--fs-overline); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brass-deep); display:inline-block; }
.eyebrow{ font-size:var(--fs-caption); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brass-deep); }
.muted{ color:var(--ink-muted); }
.small{ font-size:var(--fs-sm); }

/* accessibility helpers */
.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:var(--space-4); top:-100px; z-index:200;
  background:var(--ink); color:var(--bg); padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-sm); transition:top .2s var(--ease); }
.skip-link:focus{ top:var(--space-4); color:var(--bg); }

/* the signature brass hairline that draws itself in */
.fpg-rule{ height:1px; background:var(--brass); border:0; width:100%;
  transform-origin:left; transform:scaleX(0); transition:transform .6s var(--ease); }
.fpg-rule.is-visible{ transform:scaleX(1); }

/* scroll-reveal — only hidden when JS is present (graceful no-JS fallback) */
.reveal{ transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-1{ transition-delay:.06s } .reveal-2{ transition-delay:.12s } .reveal-3{ transition-delay:.18s } .reveal-4{ transition-delay:.24s }

/* film grain — the warmth that keeps "Golden Hour" from feeling like a template */
body::after{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' 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){ body::after{ opacity:.04 } }

/* image treatments */
.media-img{ margin:0; overflow:hidden; position:relative; background:var(--sand); }
.media-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.zoom img{ transition:transform .8s var(--ease); }
.zoom:hover img{ transform:scale(1.05); }
.ratio-16x9{ aspect-ratio:16/9 } .ratio-4x3{ aspect-ratio:4/3 } .ratio-3x4{ aspect-ratio:3/4 }
.ratio-1x1{ aspect-ratio:1/1 } .ratio-4x5{ aspect-ratio:4/5 } .ratio-21x9{ aspect-ratio:21/9 }
.round-md{ border-radius:var(--radius-md) } .round-lg{ border-radius:var(--radius-lg) }