/* Under-construction pages (2026-10-18). Shared tokens and pieces for uc-1 to uc-5.
   Same palette, fonts and rabbit as site/index.html (mono-rabbit-v4): black, white, grey only. */
@font-face { font-family: "Aire Pro"; src: url("../fonts/AireLightPro.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Aire Pro"; src: url("../fonts/AireRomanPro.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Aire Pro"; src: url("../fonts/AireRomanItalicPro.otf") format("opentype"); font-weight: 300 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Avenir Next DS"; src: url("../fonts/AvenirNextLTPro-UltLt.otf") format("opentype"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Avenir Next DS"; src: url("../fonts/AvenirNextLTPro-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Avenir Next DS"; src: url("../fonts/AvenirNextLTPro-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }

:root {
  --ink: #000; --paper: #f1f1ef; --grey: #8a8a86; --line: rgba(241,241,239,.14); --dim: rgba(241,241,239,.55);
  --serif: "Aire Pro", "Times New Roman", serif; --sans: "Avenir Next DS", Avenir, "Helvetica Neue", sans-serif;
  --bg: var(--ink); --fg: var(--paper);
}
.light { --bg: var(--paper); --fg: #0b0b0b; --line: rgba(0,0,0,.12); --dim: rgba(0,0,0,.55); }
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--fg); font: 400 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
.rmark { display: block; width: 100%; height: 100%; fill: currentColor; overflow: visible; }
.rmark .eyes { fill: currentColor; }
.kicker { font: 400 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); display: inline-flex; gap: 10px; align-items: center; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.serif { font-family: var(--serif); font-weight: 300; letter-spacing: -.01em; }
.serif em { font-style: italic; }

/* contact row: used on every version */
.links { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 999px;
  font: 400 13px/1 var(--sans); letter-spacing: .04em; text-decoration: none; transition: background .25s, color .25s, border-color .25s; cursor: pointer; background: none; color: inherit; }
.btn:hover, .btn:focus-visible { background: var(--fg); color: var(--bg); border-color: var(--fg); outline: none; }
.btn svg { width: 14px; height: 14px; fill: currentColor; }
.btn .copied { display: none; }
.btn.is-copied .copied { display: inline; } .btn.is-copied .lbl { display: none; }

/* version switcher, for review only: remove before shipping */
.uc-switch { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: rgba(128,128,128,.18); backdrop-filter: blur(8px); font: 500 11px/1 var(--sans); }
.uc-switch a { padding: 7px 10px; border-radius: 999px; text-decoration: none; opacity: .6; }
.uc-switch a[aria-current] { background: var(--fg); color: var(--bg); opacity: 1; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }