/* ============================================================
   BASE — reset, typography roles, layout primitives.
   Reads tokens only. No raw colors, sizes, or fonts here.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
 font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
 color:var(--ink);background:var(--ground);
 -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;cursor:pointer}

/* container: steps up on big monitors, never pinned small */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
@media (min-width:1800px){.wrap{max-width:var(--maxw-wide)}}

/* typography roles */
h1,.h1{font-family:var(--font-display);font-size:var(--fs-hero);line-height:var(--lh-tight);font-weight:400;color:var(--ink)}
h2,.h2{font-family:var(--font-display);font-size:var(--fs-h2);line-height:var(--lh-tight);font-weight:400;color:var(--ink)}
h3,.h3{font-size:var(--fs-h3);font-weight:600;color:var(--ink)}
.caps{font-size:var(--fs-caps);letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:600}
.kicker{font-size:var(--fs-caps);letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:600;color:var(--accent)}
.soft{color:var(--ink-soft)}
.small{font-size:var(--fs-small)}

/* section rhythm */
.section{padding-block:var(--section)}
.section-tight{padding-block:calc(var(--section)*.55)}

/* accessible focus */
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px}

/* photo slot: fixed aspect box, image fills it, NEVER crop a supplied
   photo to fit a different aspect than its slot was designed for */
.photo{background:var(--line);border-radius:var(--radius);overflow:hidden}
.photo>img{width:100%;height:100%;object-fit:cover}
.photo-43{aspect-ratio:4/3}
.photo-11{aspect-ratio:1/1}
.photo-169{aspect-ratio:16/9}

/* skip link for keyboard users */
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);padding:var(--s3) var(--s4);z-index:99}
.skip:focus{left:var(--s3)}