/* Header, navigation, buttons, chips, figures */
header.site { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
header.site .wrap { height: var(--header); display: flex; align-items: center; justify-content: space-between; gap: var(--s-l); }
.logo { font: 500 18px/1 var(--font-text); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.logo span { color: var(--ink-3); margin-left: 6px; }
nav.main { display: flex; gap: var(--s-2xs); }
nav.main a, .mnav a { font: 500 var(--fs-nav)/20px var(--font-text); text-decoration: none; padding: 8px 14px; border-radius: var(--radius-full); color: var(--ink-2); transition: background .2s, color .2s; white-space: nowrap; }
nav.main a:hover { color: var(--ink); background: var(--surface); }
nav.main a.on, .mnav a.on { background: var(--ink); color: #fff; }
.progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--ink); }
.mnav { display: none; }

.btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: var(--radius-full); border: 1px solid var(--ink); font: 500 var(--fs-nav)/1 var(--font-text); text-decoration: none; transition: background .2s, color .2s; }
.btn:hover { background: var(--ink); color: #fff; }
.btn.pri { background: var(--ink); color: #fff; }
.btn.pri:hover { background: var(--ink-2); border-color: var(--ink-2); }

.chip { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--bg); font: 400 var(--fs-small)/1 var(--font-text); text-decoration: none; white-space: nowrap; transition: border-color .2s, background .2s; }
a.chip:hover { border-color: var(--ink); }
.chip.p { background: var(--placeholder); border-color: transparent; }
a.chip.p:hover { border-color: var(--ink); }
.chip.off { color: var(--ink-3); border-style: dashed; }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xs); margin-top: var(--s-xl); }
.links .lbl { font: 500 var(--fs-label)/16px var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.links .lbl:not(:first-child) { margin-left: var(--s-m); }

.fig { display: flex; flex-direction: column; gap: var(--s-xs); min-width: 0; }
.fig .zoom { display: block; width: 100%; background: var(--placeholder); overflow: hidden; cursor: zoom-in; }
.fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.fig.fit img { object-fit: contain; padding: 6%; }
.fig .zoom:hover img { transform: scale(1.03); }
.fig.r34 .zoom { aspect-ratio: 3 / 4; }
.fig.r43 .zoom { aspect-ratio: 4 / 3; }
.fig figcaption { font: 400 var(--fs-caption)/18px var(--font-text); color: var(--ink-2); }

.ib { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: inline-grid; place-items: center; font-size: 18px; line-height: 1; transition: border-color .2s, background .2s; }
.ib:hover:not(:disabled) { border-color: var(--ink); }
.ib:disabled { opacity: .35; cursor: default; }
.ib.inv { border-color: rgba(255,255,255,.35); color: #fff; }
.ib.inv:hover:not(:disabled) { border-color: #fff; }