@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ═══════════════════════════════════════════════════════════
   EDITORIAL THEME — warm, premium, confident
   Single source of truth. Linked LAST in every page so this
   :root overrides each page's inline tokens. Styling only —
   no copy, structure, routes, or section changes.
   Remove the <link> to this file to fully revert.
   ═══════════════════════════════════════════════════════════ */

/* ── PALETTE TOKENS ──────────────────────────────────────── */
:root {
  --ink:       #2a201b;   /* espresso — text */
  --paper:     #f3ebdd;   /* warm cream — background */
  --paper2:    #eaded0;   /* deeper cream */
  --white:     #fcf8f1;   /* warm white — cards / cells */
  --pop:       #7c3445;   /* muted burgundy-wine — primary accent */
  --pop-deep:  #5e2733;   /* deep wine — button hover */
  --pop2:      #e6d2ab;   /* warm parchment — secondary tone / dark-card accent */
  --rose:      #c68a86;   /* dusty rose — rare accent only */
  --sage:      #55633f;   /* warm olive — availability signal */
  --muted:     #8a7c6c;   /* warm taupe — secondary text */
  --border:    rgba(42,32,27,0.12);  /* warm soft border */
  --radius:    20px;
}

/* ── TYPOGRAPHY ──────────────────────────────────────────────
   Body → clean, warm Instrument Sans (superfamily of the
   already-loaded Instrument Serif). Headings keep Syne.    */
body {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
}

/* Comfortable measure on body copy */
.hero-sub2, .proj-what, .page-desc, .card-body,
.metric-label, .contact-strip p { line-height: 1.8; }

/* Keep DM Mono as the editorial "label / meta" voice */
.section-label, .card-eyebrow, .avail-pill,
.nav-links a, .nav-pill, .ticker-item,
.proj-client, .proj-tag, .proj-result, .proj-cta,
.vis-label, .filter-btn, .filter-label, .breadcrumb,
.card-counter, .card-hint, .section-divider-count,
.btn-primary, .btn-ghost, .btn-ghost-light,
footer p, .footer-links a {
  font-family: 'DM Mono', monospace;
}

/* ── DISPLAY HEADINGS — larger, more confident ───────────── */
.hero-hl {
  font-size: clamp(56px, 6.8vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.045em;
}
.page-title {
  font-size: clamp(46px, 5.8vw, 82px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
/* italic serif accents lean into the editorial feel */
.hero-hl .accent, .section-title em,
.metrics-left .section-title em,
.page-title em, .contact-strip h2 em {
  color: var(--pop);
}

/* ── SPACING — more breathing room (vertical longhands only,
   so mobile.css horizontal rules stay intact) ───────────── */
.hero            { padding-top: 10rem; padding-bottom: 6rem; }
.snap-section    { padding-top: 6.5rem; padding-bottom: 6.5rem; }
.metrics         { padding-top: 7rem;  padding-bottom: 7rem; }
.services        { padding-top: 7rem;  padding-bottom: 7rem; }
.projects        { padding-top: 7rem;  padding-bottom: 7rem; }
.contact         { padding-top: 7rem;  padding-bottom: 7rem; }
.projects-section{ padding-top: 1rem;  padding-bottom: 5rem; }
.page-header     { padding-top: 9rem;  padding-bottom: 2.5rem; }
.snap-header     { margin-bottom: 2.6rem; }

/* ── CARDS — fewer, larger, calmer (feature-story feel) ──── */
.snap-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.snap-card {
  padding: 2.4rem;
  border-radius: 22px;
}
.snap-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(42,32,27,0.12);
}
.proj-card { padding: 2.6rem; }

/* ── BUTTONS — intentional, elegant, consistent sitewide ─── */
.btn-primary {
  padding: 15px 32px;
  letter-spacing: 0.1em;
  border-radius: 100px;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover {
  background: var(--pop-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(94,39,51,0.22);
}
.nav-pill:hover { background: var(--pop) !important; }

/* ── PROJECT THUMBNAIL COVERS — mute bright purple/blue tech
   gradients into the warm editorial family. Dark image
   scrims (rgba overlays) are intentionally left untouched. */
.vis-ai    { background: linear-gradient(135deg,#2a201b,#4a2630); }
.vis-web3  { background: linear-gradient(135deg,#3a2230,#5c2c3e); }
.vis-health{ background: linear-gradient(135deg,#2a2520,#46382e); }
/* .vis-bali (forest), .vis-amber (warm brown), .vis-dark/.vis-c1
   (espresso) already sit in the warm family — kept as-is. */

/* ── RARE DUSTY-ROSE ACCENT ──────────────────────────────── */
#cursor.big { background: var(--rose); }
.squiggle path { stroke: var(--rose); }

/* ── HERO PHOTO — gentle ambient float ───────────────────────
   Slow, subtle drift + soft rotation wobble. Keeps the
   original 1.5deg tilt as the resting pose. Hover lifts it. */
@keyframes heroFloat {
  0%   { transform: translateY(0)     rotate(1.5deg);  }
  50%  { transform: translateY(-14px) rotate(-0.6deg); }
  100% { transform: translateY(0)     rotate(1.5deg);  }
}
.hero-photo {
  animation: heroFloat 7s ease-in-out infinite;
  transition: box-shadow .4s ease, transform .4s ease;
  will-change: transform;
}
.hero-photo:hover {
  animation-play-state: paused;
  transform: translateY(-6px) rotate(0deg) scale(1.015);
  box-shadow: 0 32px 80px rgba(42,32,27,0.20);
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .hero-photo { animation: none; }
}