/* ============================================================
   AILEEN JOYCE DE GUZMAN — Portfolio brand foundation
   Navy + Gold + Cream. Commissioned-cat motif.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800&family=Archivo:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* core palette pulled from the cat artwork */
  --ink:#143a52;        /* deep navy outline */
  --ink-2:#1d4e6b;
  --ink-3:#2b6286;
  --blue:#7ba3c9;       /* flat-cat blue */
  --blue-soft:#b9cde0;
  --blue-pale:#dde8f2;
  --gold:#f0b94a;       /* signature yellow */
  --gold-deep:#e0a02f;
  --gold-soft:#f7d79a;
  --gold-pale:#fbeccb;
  --cream:#fbf7ee;      /* warm paper */
  --cream-2:#f4ecdb;
  --paper:#fffdf8;
  --ink-95:#0f2c40;

  --shadow-sm:0 1px 2px rgba(20,58,82,.08), 0 2px 8px rgba(20,58,82,.06);
  --shadow-md:0 8px 24px rgba(20,58,82,.10), 0 2px 6px rgba(20,58,82,.07);
  --shadow-lg:0 24px 60px rgba(20,58,82,.16), 0 6px 18px rgba(20,58,82,.10);

  --font-display:'Spectral', Georgia, serif;
  --font-ui:'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono:'Space Mono', ui-monospace, monospace;

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:34px;
  --maxw:1240px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font-ui);color:var(--ink);background:var(--cream);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{display:block;max-width:100%;}
a{color:inherit;}
::selection{background:var(--gold-soft);color:var(--ink-95);}

h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.04;margin:0;
  letter-spacing:-.01em;text-wrap:balance;}
p{margin:0;line-height:1.6;}

.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);}

/* shared button */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-ui);
  font-weight:700;font-size:.95rem;padding:.8em 1.4em;border-radius:999px;
  border:2px solid var(--ink);background:var(--ink);color:var(--cream);
  cursor:pointer;text-decoration:none;transition:transform .18s ease, box-shadow .18s ease, background .18s;}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn--gold{background:var(--gold);border-color:var(--gold);color:var(--ink-95);}
.btn--ghost{background:transparent;color:var(--ink);}

/* paw bullet */
.paw{display:inline-block;width:1em;height:1em;background:var(--gold);
  -webkit-mask:url('cats/paw-navy.png') center/contain no-repeat;
  mask:url('cats/paw-navy.png') center/contain no-repeat;vertical-align:-.12em;}

/* utility */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px);}
.cat-float{animation:catbob 4.5s ease-in-out infinite;}
@keyframes catbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;}}