/* Kin & Bough — shared site styles. Fonts are the same OFL files the trees are drawn with. */
@font-face { font-family: "Jost"; src: url(/fonts/jost-400-latin.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url(/fonts/jost-500-latin.woff) format("woff"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Jost"; src: url(/fonts/jost-300-latin.woff) format("woff"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url(/fonts/cg-600-latin.woff) format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url(/fonts/cg-500i-latin.woff) format("woff"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url(/fonts/pin-400-latin.woff) format("woff"); font-display: swap; }

:root {
  --bg: #f6f1e7; --card: #fffdf8; --ink: #2b2925; --ink-2: #4a463e; --muted: #736d61; --line: #e2dacb;
  --accent: #55704e; --accent-ink: #f7f4ec; --warm: #b8694f; --err: #a8362a; --ok: #2f6b3a;
  --serif: "Cormorant Garamond", Georgia, serif; --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif; --script: "Pinyon Script", cursive;
  --r: 14px; --shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgba(60, 45, 20, .35);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; margin: 0 0 .4em; letter-spacing: -.01em; }
a { color: var(--accent); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 12px max(16px, env(safe-area-inset-left)); background: rgba(246, 241, 231, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.wordmark { font: 600 26px/1 var(--serif); color: var(--ink); text-decoration: none; letter-spacing: -.01em; margin-right: auto; }
.wordmark i { font-family: var(--script); font-style: normal; font-weight: 400; color: var(--accent); font-size: 1.05em; }
.pill { font: 500 13px/1 var(--sans); padding: 7px 11px; border-radius: 999px; background: var(--card); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.pill.ok { background: #e5f0e2; color: var(--ok); box-shadow: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 500 16px/1 var(--sans); cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.06); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.small { min-height: 42px; padding: 0 16px; font-size: 15px; }
.linkbtn { background: none; border: 0; padding: 6px 0; color: var(--accent); font: 500 15px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkbtn.small { font-size: 14px; }
:focus-visible { outline: 3px solid #c9a75f; outline-offset: 2px; }
.wrap { width: min(100% - 32px, 1080px); margin: 0 auto; }
.noscroll { overflow: hidden; }
[hidden] { display: none !important; }