/* Shared design tokens, motion and helpers. Loaded first on every page. */
:root{
  /* Navy matches the logo mark (#1B2A5E) */
  --navy:#1B2A5E;--navy-600:#26397A;--navy-800:#121D45;
  --blue:#2F5A92;--blue-50:#EEF2F8;--blue-100:#DCE4EF;
  --gold:#B5832A;--gold-600:#9A6F20;--gold-300:#E2B66A;--gold-50:#F7EFE0;--gold-text:#8A5F17;--gold-text-2:#7A5512;
  --cream:#F6F4EF;--cream-2:#EFEBE2;--card:#FFFFFF;--line:#E2DED4;--line-2:#EEEAE1;--field:#C9C3B6;
  --ink:#1F2633;--muted:#5A6372;--muted-2:#4A5262;--on-navy:#D5DEEB;--on-navy-2:#B8C4D6;
  --ok:#1F6B43;--ok-bg:#E3F1E8;--dev-bg:#F3ECE0;
  --shadow-sm:0 1px 2px rgba(27,42,94,.06),0 2px 8px rgba(27,42,94,.05);
  --shadow-md:0 4px 10px rgba(27,42,94,.08),0 14px 32px rgba(27,42,94,.12);
  --shadow-lg:0 10px 24px rgba(27,42,94,.12),0 28px 60px rgba(27,42,94,.18);
  --r-sm:6px;--r-md:12px;--r-lg:14px;
  --ease-out:cubic-bezier(.2,.7,.2,1);--dur:220ms;
  /* Faint blueprint grid for navy bands */
  --grid-navy:linear-gradient(rgba(246,244,239,.05) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(246,244,239,.05) 1px,transparent 1px) 0 0/32px 32px;
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
html{scroll-padding-top:calc(var(--hdr-h,76px) + 16px)}
::selection{background:rgba(181,131,42,.28)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}

/* Icons (inline sprite in index.html) */
.ico{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.125em}
.ico-chip{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--gold-50);color:var(--gold-text);font-size:22px;transition:transform var(--dur) var(--ease-out),background-color var(--dur)}

/* Blueprint panel: image placeholder. Swap for <img class="ph" src alt> to use a photo. */
.ph{position:relative;display:flex;align-items:center;justify-content:center;width:100%;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);color:var(--gold-300);
  background:radial-gradient(circle at 70% 30%,rgba(226,182,106,.14),transparent 60%),
    linear-gradient(rgba(246,244,239,.10) 1px,transparent 1px) 0 0/96px 96px,
    linear-gradient(90deg,rgba(246,244,239,.10) 1px,transparent 1px) 0 0/96px 96px,
    linear-gradient(rgba(246,244,239,.05) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg,rgba(246,244,239,.05) 1px,transparent 1px) 0 0/24px 24px,
    var(--navy)}
.ph::after{content:"";position:absolute;inset:14px;border:1px dashed rgba(246,244,239,.22);border-radius:8px;pointer-events:none}
.ph .ico{width:30%;height:auto;max-width:140px;aspect-ratio:1;stroke-width:1.25;opacity:.9}
img.ph{display:block;object-fit:cover;height:auto}

/* Keyframes */
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes draw-mark{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Scroll reveal: only hidden when motion.js has set html.motion */
html.motion .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i,0) * 60ms)}
html.motion .rv.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}
}