/* ============================================================
   Zivvy — Site Design System Foundation
   Extracted from inline <style> to enable HTTP caching.
   Contains: tokens, reset, base type, buttons, textlinks,
   emergence, view transitions, passbadge.
   Page-specific layouts remain inline as critical CSS.
   ============================================================ */

:root{
  --primary-500:#6a0dad; --primary-600:#5a0b93;
  --tertiary-500:#ffd700;
  --gold-safe-warm:#a47516;
  --black-luxury:#0F0F0F; --black-hero:#060D0D;
  --white-luxury:#F8F2E8; --white-utility:#FAFAFA;
  --text-on-dark:#FFFFFF;
  --text-on-dark-muted:rgba(255,255,255,0.70);
  --text-on-dark-faint:rgba(255,255,255,0.52);
  --text-muted-light:rgba(15,15,15,0.65);
  --border-subtle:rgba(15,15,15,0.08);
  --border-dark:rgba(255,255,255,0.12);
  --font-display:"neue-haas-grotesk-display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-text:"neue-haas-grotesk-text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-accent:"Caveat","neue-haas-grotesk-text",sans-serif;
  --type-display-xl:clamp(3rem,5.6vw,4rem);
  --type-display-lg:clamp(2.5rem,4.6vw,3.25rem);
  --type-display-md:clamp(2rem,3.6vw,2.75rem);
  --type-display-sm:clamp(1.6rem,2.6vw,2rem);
  --motion-base:300ms; --motion-slow:500ms;
  --ease:cubic-bezier(0.2,0.8,0.2,1);
  --maxw:1344px;
}

/* Reset + base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-text);font-weight:400;color:var(--black-luxury);background:var(--white-luxury);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* Layout wrap */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,64px)}

/* Eyebrow */
.eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.15em}
.eyebrow.gold{color:var(--tertiary-500)}
.eyebrow.purple{color:var(--primary-500)}

/* Display headings — page-specific sizing kept inline */
h1,h2,h3{font-family:var(--font-display);letter-spacing:-0.02em}

/* Emergence animation utility */
.rise{opacity:0;transform:translateY(16px);transition:opacity var(--motion-slow) var(--ease),transform var(--motion-slow) var(--ease)}
.rise.in{opacity:1;transform:none}

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

/* Buttons */
.btn{display:inline-block;font-family:var(--font-text);font-size:16px;font-weight:700;letter-spacing:.02em;padding:16px 30px;cursor:pointer;transition:transform var(--motion-base) var(--ease),background var(--motion-base) var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--tertiary-500);color:var(--black-hero);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.btn-purple{background:var(--primary-500);color:#fff}
.btn-purple:hover{background:var(--primary-600)}
.btn-ghost-dark{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.btn-ghost-dark:hover{border-color:#fff}

/* Inline text links */
.textlink{font-weight:700;color:var(--primary-500);border-bottom:2px solid rgba(106,13,173,.25);padding-bottom:2px;transition:border-color var(--motion-base) var(--ease)}
.textlink:hover{border-color:var(--primary-500)}
.textlink.on-dark{color:var(--tertiary-500);border-color:rgba(255,215,0,.3)}
.textlink.on-dark:hover{border-color:var(--tertiary-500)}

/* Design-pass badge */
.passbadge{position:fixed;bottom:16px;right:16px;z-index:60;background:var(--black-luxury);color:#fff;font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:1px;padding:8px 12px;border:1px solid rgba(255,255,255,.2);opacity:.85}
.passbadge a{color:var(--tertiary-500)}

/* Cross-document view transitions — dip through dark */
@view-transition{navigation:auto}
::view-transition{background:#060D0D}
@keyframes vt-dip{to{opacity:0;transform:translateY(6px)}}
@keyframes vt-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
::view-transition-old(root){animation:vt-dip 200ms cubic-bezier(0.2,0.8,0.2,1) both}
::view-transition-new(root){animation:vt-arrive 260ms 170ms cubic-bezier(0.2,0.8,0.2,1) both}
.passbadge{view-transition-name:zv-passbadge}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}