/* Sites module (element 17) on ADD Moor: map ADD Moor tokens onto the names sites.css rides on, and give the owner
   panel ADD Moor's own button language (pill, ink / citrus / ghost). */
:root { --font: var(--sans); --display: var(--serif); --radius: var(--r); --brick: var(--coral); --line-2: var(--line); --nav-bg: color-mix(in srgb, var(--paper) 88%, transparent); }
.r4s .card { background: var(--card); box-shadow: var(--shadow); }
.r4s .eyebrow { font: 500 .72rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--moss); }
.r4s .btn-ghost, .r4s-bar .btn-ghost, .r4s-sheet .btn-ghost, .r4-links .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.r4s .btn-sm, .r4s-sheet .btn-sm, .r4-links .btn-sm { min-height: 40px; padding: 0 16px; font-size: .9rem; }
.r4s .btn-sunset, .r4s-bar .btn-sunset { background: var(--citrus); color: #1b1203; }
:root[data-theme="dark"] /* public home: owner's main photo + visit card */
.r4-hero-fig { margin: 22px 0 0; aspect-ratio: 16/10; max-width: 34rem; }
.r4-hero-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r4-about { margin-top: 8px; }
.r4-notice { background: var(--deep); color: #fff; }