/* reset, type roles, links, buttons, focus, skip links */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--bar-h) + 12px); background: var(--night); }
body {
  overflow-x: clip; min-height: 100vh; background: var(--night); color: var(--ivory-dim);
  font: 400 var(--t-body)/1.65 var(--f-body); text-wrap: pretty;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; color: var(--ivory); text-wrap: balance; font-optical-sizing: auto; }
h2 { font-size: var(--t-h2); line-height: 1.02; letter-spacing: -0.005em; }
h3 { font-size: var(--t-h3); line-height: 1.15; }
p + p { margin-top: 1em; }
a { color: var(--ivory); text-decoration-color: var(--brass-deep); text-underline-offset: 0.22em; text-decoration-thickness: 1px; transition: color 200ms ease, text-decoration-color 200ms ease; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ol[role="list"], ul[role="list"] { list-style: none; padding: 0; }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.flow { padding-block: var(--pad-flow); background: var(--night); position: relative; }
.measure { max-width: 34em; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.label, .sc, .tag, .eyebrow, .format {
  font-family: var(--f-sc); font-weight: 700; font-size: var(--t-label); line-height: 1.3;
  letter-spacing: 0.08em; color: var(--brass); font-kerning: normal;
}
.label { margin-bottom: var(--s-4); }
.label .lt { font-family: var(--f-display); font-weight: 400; font-size: 1.15em; letter-spacing: 0.01em; color: var(--brass-glint); }
.tag { margin-bottom: var(--s-3); }
.turn { font: italic 400 var(--t-turn)/1.2 var(--f-display); color: var(--brass-glint); text-wrap: balance; }
.head h2 { margin-bottom: var(--s-4); }

.skip { position: fixed; left: 12px; top: 12px; z-index: 100; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: var(--brass); color: var(--night); font: 700 var(--t-label) var(--f-sc); letter-spacing: 0.08em; text-decoration: none; }
.skip:focus-visible { width: auto; height: auto; overflow: visible; clip-path: none; padding: 12px 18px; }

:focus-visible { outline: 2px solid var(--brass-glint); outline-offset: 3px; }
.card :focus-visible, .slip :focus-visible { outline-color: var(--oxblood); }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 52px; padding: 0 var(--s-6); background: var(--brass); color: var(--night);
  font: 700 0.9375rem var(--f-sc); letter-spacing: 0.08em; text-decoration: none; white-space: nowrap;
  overflow: hidden; isolation: isolate; box-shadow: 0 0 0 0 rgba(242, 199, 122, 0);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.btn::after { /* brass glint band, driven by motion.css */
  content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%); pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(220, 192, 126, 0.6) 50%, transparent 80%);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--brass-glint); box-shadow: 0 0 22px 0 rgba(242, 199, 122, 0.28); }
  a:not(.btn):hover { color: var(--brass-glint); text-decoration-color: var(--brass-glint); }
}
.btn:active { background: var(--brass-glint); box-shadow: 0 0 34px 2px rgba(242, 199, 122, 0.5); transition-duration: 90ms; }
.textlink { font-family: var(--f-sc); font-weight: 700; font-size: var(--t-label); letter-spacing: 0.08em; }