* { box-sizing: border-box; }
html { background: var(--color-bg); color: var(--color-text); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--color-bg); color: var(--color-text); font-family: var(--font-ui); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.menu-open, body.lightbox-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--color-accent); color: var(--color-bg); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

h1, h2, h3, p, figure, blockquote { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; }
em { font-family: var(--font-display); font-weight: 400; }

.skip-link { position: fixed; z-index: 1000; left: 1rem; top: 1rem; transform: translateY(-180%); padding: .65rem .9rem; background: var(--color-text); color: var(--color-bg); }
.skip-link:focus { transform: none; }

.content-wide { width: min(100%, var(--content-wide)); margin-inline: auto; padding-inline: var(--gutter); }
.content-narrow { width: min(100%, var(--content-narrow)); margin-inline: auto; padding-inline: var(--gutter); }
.page-shell { padding-top: 6rem; }

.meta-label, .meta-line, .photo-thumb__meta, .home-hero figcaption { font-size: .66rem; line-height: 1.35; letter-spacing: .18em; text-transform: uppercase; color: var(--color-muted); }
.meta-line { display: flex; justify-content: space-between; gap: 1rem; }
.large-copy { font-family: var(--font-display); font-size: clamp(1.65rem, 2.6vw, 2.7rem); line-height: 1.16; color: var(--color-text); }

code { padding: .15em .35em; border: 1px solid var(--color-line); color: var(--color-text); background: var(--color-surface); }