/* FinFlow case-study artboard tokens — matches naveen-sereddy.vercel.app
   identity: charcoal ink, off-white "bone", single gold accent, Fraunces/Inter. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,400..500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --c-paper: #0D0D0D;
  --c-surface: #141414;
  --c-surface-2: #1B1B1B;

  --c-ink: #EDE7DD;
  --c-ink-2: #1B1B1B;
  --c-ink-3: #B7B0A6;
  --c-ink-4: #8A847B;

  --c-line: rgba(237, 231, 221, 0.12);

  --c-accent: #D4A85A;
  --c-accent-2: #E7C384;
  --c-accent-tint: rgba(212, 168, 90, 0.08);
  --c-accent-line: rgba(212, 168, 90, 0.25);

  --c-success: #6FCF8E;
  --c-success-bg: rgba(111, 207, 142, 0.12);
  --c-error: #E2766B;
  --c-error-bg: rgba(226, 118, 107, 0.12);

  --f-serif: 'Fraunces', Georgia, serif;
  --f-sans: 'Inter', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ================================================================
   NARRATIVE SCROLL LAYOUT
   The artifacts (.ab) were authored as fixed 1760x1100 design frames.
   Here they are reflowed into a single long-scrolling page: each one
   becomes a full-width <section> band, content capped to a readable
   column, stacked top to bottom. No canvas, pan/zoom, or frame chrome.
   ================================================================ */

.case-page {
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
}

/* Full-bleed section band; alternating surface tones for rhythm. */
.cs-band {
  padding: 84px 32px;
  border-bottom: 1px solid var(--c-line);
}
.cs-band:nth-child(even) { background: #121212; }

/* ── Artifact, reflowed into a section ── */
.ab {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  height: auto;
  display: flex;
  flex-direction: column;
  background: transparent;
  color: var(--c-ink);
  font-family: var(--f-sans);
}

.ab-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--c-line);
  flex: 0 0 auto;
}
.ab-head__left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ab-head__right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex: 0 0 auto; }

.ab-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-accent);
}
.ab-eyebrow .num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 4px; border-radius: 6px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  color: var(--c-accent-2);
}

.ab-title {
  font-family: var(--f-serif); font-style: italic; font-weight: 500;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.06; letter-spacing: -0.015em;
  color: var(--c-ink); margin: 0;
}

.ab-sub {
  max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--c-ink-3); margin: 0;
}

.ab-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ab-meta__k {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--c-ink-4);
}
.ab-meta__v { font-size: 15px; font-weight: 600; color: var(--c-ink); }

/* Body holds the artifact's own content grid; it now sizes to content. */
.ab-body {
  flex: none; min-height: 0; padding: 36px 0 0;
}

/* The per-artifact footer brand bar was canvas chrome — hide in the
   scroll layout (the page has one shared footer). */
.ab-foot { display: none; }

/* Focus ring — gold, matches portfolio. */
.case-page a:focus-visible,
.case-page button:focus-visible,
.case-page iframe:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Narrow-viewport fallback: collapse the artifacts' top-level inline
   grids to a single column (inline styles are overridden with !important). */
@media (max-width: 820px) {
  .cs-band { padding: 60px 20px; }
  .ab-head { flex-direction: column; }
  .ab-head__right { align-items: flex-start; }
  .ab-body > div[style*="grid"] { grid-template-columns: 1fr !important; height: auto !important; }
}