@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. */

/* ── "2000s mode" toggle — discreet entry to the retro prototype.
   Remove this rule + the #retro-toggle anchor in index.html to drop. */
#retro-toggle {
  position: fixed;
  left: 18px; bottom: 18px;
  z-index: 500;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 8px 14px;
  border-radius: 100px;
  box-shadow: 0 8px 22px rgba(42,32,27,0.18);
  opacity: 0.55;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
#retro-toggle:hover {
  opacity: 1;
  transform: translateY(-2px);
  background: var(--pop);
  border-color: var(--pop);
}

/* ── 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; }
}

/* ── SOFT "SCREEN" PANELS — gentle depth so pages aren't flat ──
   Whisper-light raised backdrops behind each block. No hard
   borders — just a faint warm fill (lighter than the cream
   page) and a very soft shadow, so content reads as gently
   lifted off the page rather than printed flat on it. */

/* Case-study pages: a soft screen behind each section */
.cs-section {
  background: linear-gradient(180deg,
              rgba(252,248,241,0.72) 0%,
              rgba(243,235,221,0.22) 100%);
  border-radius: 20px;
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  box-shadow: 0 10px 34px rgba(42,32,27,0.05);
}
/* Section panels now provide the rhythm — the old hairline
   dividers between them would float oddly, so retire them. */
.cs-divider { display: none; }

/* Work page: subtle vertical sheen on cards + lift the mosaic */
.proj-card {
  background: linear-gradient(180deg, var(--white) 0%, var(--paper) 100%);
}
.proj-card:hover { background: var(--white); }
.proj-grid { box-shadow: 0 16px 44px rgba(42,32,27,0.05); }

/* Homepage cards: soft overlay screen on every theme for consistent
   depth. background-color stays the card theme; this adds a gentle
   top-down light sheen on top so none of them read flat. */
.snap-card[data-theme="cream"],
.snap-card[data-theme="white"],
.snap-card[data-theme="yellow"] {
  background-image: linear-gradient(180deg,
              rgba(252,248,241,0.9) 0%,
              rgba(252,248,241,0) 72%);
}
.snap-card[data-theme="dark"] {
  background-image: linear-gradient(180deg,
              rgba(255,255,255,0.09) 0%,
              rgba(255,255,255,0) 60%);
}