/* rm-brand.css — the shared layer for Roger Maragh's sites (site-brand/PLAN.md).
   Each site keeps its own palette and faces; this file gives them the same ergonomics,
   motion and provenance footer. A site sets its colours on :root with the --rm-* names. */
:root{
  --rm-bg:#f7f4ee; --rm-ink:#1b1a17; --rm-mute:#5d584e; --rm-line:#e6dfd1; --rm-card:#fffdf8;
  --rm-accent:#2f5d50; --rm-on-accent:#fff;
  --rm-foot-bg:#1b1a17; --rm-foot-ink:#d9d2c3; --rm-foot-link:#efe4c8;
  --rm-seal:#b8995a; --rm-seal-ink:#1b1a17; --rm-seal-sub:#c2ad80;
  --rm-radius:16px; --rm-measure:65ch; --rm-tap:48px;
  --rm-ease:cubic-bezier(.2,.7,.2,1); --rm-fast:160ms; --rm-base:220ms;
  --rm-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --rm-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--rm-accent);outline-offset:3px;border-radius:6px}
:where(p,li){max-width:var(--rm-measure)}

/* Buttons and tappable cards: 48px targets, a small lift on hover/press. */
.rm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--rm-tap);padding:0 22px;
  border-radius:999px;font:600 15px/1 var(--rm-sans);text-decoration:none;cursor:pointer;
  transition:transform var(--rm-fast) var(--rm-ease),background-color var(--rm-fast),box-shadow var(--rm-fast)}
.rm-btn--solid{background:var(--rm-ink);color:var(--rm-bg);border:1px solid var(--rm-ink)}
.rm-btn--line{background:transparent;color:var(--rm-ink);border:1px solid color-mix(in srgb,var(--rm-ink) 40%,transparent)}
.rm-btn:hover{transform:translateY(-2px)} .rm-btn:active{transform:translateY(0) scale(.98)}
.rm-lift{transition:transform var(--rm-base) var(--rm-ease),box-shadow var(--rm-base) var(--rm-ease),border-color var(--rm-base)}
.rm-lift:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(0,0,0,.35);border-color:color-mix(in srgb,var(--rm-accent) 45%,var(--rm-line))}

/* Reveal on scroll (rm-brand.js adds .rm-in). Without JS or with reduced motion, everything is simply shown. */
.rm-js [data-rm-reveal]{opacity:0;transform:translateY(14px);transition:opacity 520ms var(--rm-ease),transform 520ms var(--rm-ease)}
.rm-js [data-rm-reveal].rm-in{opacity:1;transform:none}

/* Provenance footer: copyright always; the seal says "Approved" only for a release Roger approved. */
.rm-prov{background:var(--rm-foot-bg);color:var(--rm-foot-ink);font:14px/1.7 var(--rm-sans)}
.rm-prov__in{max-width:1080px;margin:0 auto;padding:30px 24px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.rm-prov p{margin:0;max-width:none}
.rm-prov a{color:var(--rm-foot-link);text-underline-offset:3px}
.rm-prov__links{margin-top:6px!important;font-size:13px}
.rm-seal{display:flex;align-items:center;gap:14px;padding:10px 18px 10px 10px;border:1px solid var(--rm-seal);border-radius:999px;text-decoration:none;color:inherit}
.rm-seal__mark{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--rm-seal);color:var(--rm-seal-ink);
  font:600 15px/1 Fraunces,ui-serif,Georgia,serif;letter-spacing:.03em}
.rm-seal__t1{display:block;font-weight:600;font-size:13.5px;color:var(--rm-foot-ink)}
.rm-seal__t2{display:block;font:11.5px/1.5 var(--rm-mono);color:var(--rm-seal-sub)}
.rm-seal--pending{border-style:dashed;opacity:.85}
.rm-seal--pending .rm-seal__mark{background:transparent;color:var(--rm-seal);border:1px dashed var(--rm-seal)}
@media (max-width:720px){.rm-prov__in{grid-template-columns:1fr}.rm-seal{justify-self:start}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rm-btn,.rm-lift,.rm-js [data-rm-reveal]{transition:none!important;transform:none!important;opacity:1!important}
}