/* Shared base: reset, page, links, focus, logo, nav, label, button, reduced motion. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--secondary); font: var(--w-regular) var(--fs-body)/var(--lh-body) var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; line-height: inherit; }
ol, ul { list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 0.125rem solid var(--accent); outline-offset: 0.1875rem; border-radius: 0.125rem; }
.skip { position: absolute; left: -624rem; }
.skip:focus { left: var(--s-4); top: var(--s-4); background: var(--surface); padding: var(--s-2) var(--s-4); border-radius: var(--radius); z-index: 50; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); }
.logo { font-size: var(--fs-sub); font-weight: var(--w-black); line-height: var(--lh-sub); color: var(--primary); text-transform: uppercase; letter-spacing: .03em; }

/* Links: regular at rest, semibold on hover, underlined. Colour shift only. */
.link { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--secondary); text-decoration: underline; transition: color .3s var(--ease-link); }
.link:hover, .link:focus-visible { color: var(--primary); font-weight: var(--w-semibold); }
.nav { display: flex; gap: var(--s-12); }

.label { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: var(--w-semibold); text-transform: lowercase; color: var(--secondary); }
.heading { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--w-semibold); color: var(--primary); }
.body { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure); }
.key { font-weight: var(--w-semibold); color: var(--primary); }
.sub, .note { font-size: var(--fs-sub); line-height: var(--lh-sub); }

.button { display: inline-flex; align-items: center; gap: var(--s-6); min-height: 3rem; font-size: var(--fs-sub); line-height: var(--lh-sub); padding: var(--s-2) var(--s-4); border: 0.0625rem solid var(--primary); border-radius: var(--radius); background: transparent; color: var(--primary); font-family: inherit; font-weight: var(--w-semibold); text-transform: lowercase; letter-spacing: .03em; cursor: pointer; transition: background .3s var(--ease-out), color .3s var(--ease-out); }
.button:hover { background: var(--primary); color: var(--bg); }

.img { border-radius: var(--radius); background: var(--surface); cursor: zoom-in; width: 100%; }

/* TEMP: motion is forced on via class force-motion on html. Remove that class when the motion toggle is built. */
@media (prefers-reduced-motion: reduce) { html:not(.force-motion) { scroll-behavior: auto; } html:not(.force-motion) *, html:not(.force-motion) *::before, html:not(.force-motion) *::after { animation: none !important; transition: none !important; } }