/* Shared chrome for the three Home section 1 compositions. Nothing here is composition-specific. */
*{box-sizing:border-box}
/* Local mirror of the seam position so photo geometry and the seam line never disagree. */
body{--seam:38%;--edge-l:0.15;--edge-r:0.80}
@media(max-width:1023px){body{--seam:24%}}
html,body{margin:0}
body{background:var(--bg-page);color:var(--fg-default);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
a{color:var(--color-navy);text-decoration:none}
a:hover{color:var(--color-coral)}
.nav{display:flex;align-items:baseline;justify-content:space-between;padding:22px 40px 20px;position:relative;z-index:3}
.wordmark{font-family:var(--font-serif);font-weight:500;font-size:22px;letter-spacing:.005em;color:var(--color-navy)}
.navlinks{display:flex;gap:28px;font-size:13px;font-weight:500;letter-spacing:.01em}
.navlinks a{color:rgba(15,26,46,.78);transition:color var(--dur-fast) var(--ease-out)}
.navlinks a:hover{color:var(--color-coral)}
.hero{position:relative;overflow:hidden}
.numeral{font-family:var(--font-serif);font-size:30px;line-height:1;color:rgba(15,26,46,.3)}
.tagline{font-family:var(--font-serif);font-style:italic;font-size:19px;line-height:1.45;color:rgba(26,26,31,.78)}
.display{font-family:var(--font-serif);font-weight:500;font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--tracking-tight);color:var(--color-navy);margin-top:0;margin-bottom:0}
.lede{max-width:62ch;font-size:var(--fs-body);line-height:var(--lh-body);color:rgba(26,26,31,.76);margin:0}
.ctas{display:flex;gap:14px;align-items:center}
.photo{position:absolute;overflow:hidden}
/* Percentages on margin resolve against the box's inline size, so the crop offset stays
   deterministic no matter how the box is sized. */
.photo img{display:block;width:100%;max-width:none}
@media(max-width:1023px){.nav{padding:20px 28px}.navlinks{gap:20px}}
/* Below 768 the five-link row cannot sit beside the wordmark without pushing the page sideways. */
@media(max-width:767px){.nav{flex-direction:column;align-items:flex-start;gap:14px;padding:18px 20px}.navlinks{flex-wrap:wrap;gap:8px 18px;font-size:13.5px}}