/* ─── XXIautomate shared theme — pulled directly from index.html ───────────
 *
 * Single source of truth for the site's design system. Linked from every
 * sub-page (services, about, work, plans, contact, etc.) so they all use
 * identical tokens, the same nav, the same footer, the same film grain.
 *
 * If the homepage's design changes, update here, then every page follows.
 * ───────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Box-look surgery 2026-05-01: card backgrounds now match page bg → cards
     stop reading as visible boxes. Type-scale tightened ~25% for a denser,
     more professional feel (less "AI-generated marketing site"). */
  --bg: #FAF9F6;
  --bg-card: #FAF9F6;        /* was #FFFFFF — kill visible card boxes on cream bg */
  --bg-elev: #FFFFFF;         /* keep available for moments needing real elevation */
  --text: #050505;
  --text-dim: #4A4540;
  --text-muted: #9E978C;
  --text-ghost: rgba(5,5,5,0.06);
  --gold: #C9A04C;            /* slightly muted from #D4AF37 — less AI-bright */
  --gold-light: #DCB55E;
  --gold-dim: rgba(201,160,76,0.08);
  --gold-glow: rgba(201,160,76,0.20);
  --border: rgba(0,0,0,0.08);  /* slightly stronger so hairlines actually read */
  --border-gold: rgba(201,160,76,0.16);

  /* Type stack — single serif (Instrument Serif), single sans (Inter), single mono (DM Mono). */
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Monaco, monospace;

  /* Type scale — pulled back from Anthropic-grade-very-large to professional-restrained.
     Roman flagged "too zoomed in / too big". H1s now max ~3.5rem instead of 5.5rem. */
  --type-display: clamp(2.4rem, 4.8vw, 3.6rem);   /* 38–58px — page H1 */
  --type-h1:      clamp(1.9rem, 3.4vw, 2.6rem);    /* 30–42px — section H1 */
  --type-h2:      clamp(1.5rem, 2.6vw, 2rem);      /* 24–32px — section H2 */
  --type-h3:      clamp(1.2rem, 1.8vw, 1.45rem);   /* 19–23px — sub-head */
  --type-lede:    clamp(1.05rem, 1.3vw, 1.15rem);  /* 17–18px — intro paragraph */
  --type-body:    1.0625rem;                       /* 17px — body, tighter than 18px */
  --type-small:   0.9375rem;                       /* 15px — captions */
  --type-mono:    0.6875rem;                       /* 11px — eyebrow + chrome */

  /* Spacing — pulled back from "vast" to "generous". */
  --space-section:        clamp(72px, 10vw, 144px);
  --space-section-tight:  clamp(48px, 7vw, 96px);
  --space-block:          clamp(32px, 5vw, 56px);

  /* Reading measure — keeps body prose at 68ch for comfortable scanning. */
  --measure:        68ch;
  --measure-tight:  56ch;
  --measure-display: 24ch;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}
::selection { background: var(--gold); color: var(--bg); }

/* Visual chrome stripped 2026-04-29: viewport-frame, film grain, vignette, radial gradient
   all removed. Anthropic/Stripe/Linear sites have NONE of these — restraint is the feel.
   Markup tags <div class="film-vignette"> + <div class="viewport-frame"> stay as no-op
   shells (so we don't have to update 21 HTML files); they just render nothing now. */
.film-vignette, .viewport-frame { display: none; }

/* ─── MARBLE — site-wide stone vibe (2026-05-02) ───────────────────────
   Three quiet layers fixed behind every page:
     1. Warm radial tints (light pooling, like sunlight on travertine)
     2. Fine fractal grain (stone surface noise — feTurbulence)
     3. Ghost gold veining (organic curves, very low contrast)
   Cream + gold palette stays dominant. Anti-AI-slop: no swirling,
   no shimmer, no animation. Static museum-grade marble. */
body {
  background-image:
    radial-gradient(ellipse 42% 32% at 18% 22%, rgba(201,160,76,0.045), transparent 70%),
    radial-gradient(ellipse 50% 36% at 82% 78%, rgba(201,160,76,0.038), transparent 72%),
    radial-gradient(ellipse 32% 40% at 50% 50%, rgba(110,82,38,0.022), transparent 65%);
  background-attachment: fixed;
  background-color: var(--bg);
}
body::before {
  /* Stone grain — fractalNoise filter, multiply-blended onto the cream */
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3' stitchTiles='stitch' seed='3'/><feColorMatrix values='0 0 0 0 0.74  0 0 0 0 0.58  0 0 0 0 0.28  0 0 0 0.085 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 700px 700px;
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 0.85;
}
body::after {
  /* Ghost gold veining — organic curves with layered weights for depth */
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1200' preserveAspectRatio='none'><g fill='none' stroke-linecap='round'><path d='M0 220 Q360 170 720 260 T1600 230' stroke='rgba(201,160,76,0.115)' stroke-width='1.6'/><path d='M0 780 Q420 720 820 820 T1600 790' stroke='rgba(201,160,76,0.095)' stroke-width='1.4'/><path d='M0 460 Q380 510 760 470 T1600 500' stroke='rgba(201,160,76,0.065)' stroke-width='1.0'/><path d='M240 0 Q300 380 220 760 T300 1200' stroke='rgba(201,160,76,0.085)' stroke-width='1.2'/><path d='M1080 0 Q1140 320 1060 660 T1140 1200' stroke='rgba(201,160,76,0.075)' stroke-width='1.1'/><path d='M0 320 Q200 340 380 310 T780 330' stroke='rgba(160,128,68,0.055)' stroke-width='0.8'/><path d='M820 540 Q1020 560 1200 530 T1600 550' stroke='rgba(160,128,68,0.05)' stroke-width='0.8'/><path d='M0 880 Q260 900 520 880 T1000 870' stroke='rgba(160,128,68,0.045)' stroke-width='0.7'/></g></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.95;
}
/* All real content sits above the marble layer */
body > * { position: relative; z-index: 1; }

/* scroll progress */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 10000;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  width: 0%; transition: none;
  box-shadow: 0 0 8px rgba(212,175,55,0.4);
}

/* ─── NAV ─── */
nav {
  position: fixed; top: 12px; left: 12px; right: 12px; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 72px;
  opacity: 0; transform: translateY(-10px);
  animation: navFadeIn 0.6s cubic-bezier(0.16,1,0.3,1) 0.1s forwards;
}
nav::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: transparent;
  border-radius: 0;
  transition: all 0.6s cubic-bezier(0.16,1,0.3,1);
  z-index: -1;
}
nav.scrolled::before {
  top: 8px; left: 24px; right: 24px; bottom: 8px;
  background: rgba(232,228,222,0.88);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-radius: 50px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
@keyframes navFadeIn { to { opacity: 1; transform: translateY(0); } }
.nav-logo {
  font-family: 'Inter', -apple-system, sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #3a3a3a; flex-shrink: 0;
  text-decoration: none;
}
.nav-center {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 36px; align-items: center;
}
.nav-center a, .nav-right a {
  font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(50,50,50,0.55); text-decoration: none; transition: color 0.3s;
}
.nav-center a:hover, .nav-right a:hover { color: #1a1a1a; }
.nav-center a.active, .nav-right a.active { color: var(--gold); }
.nav-right { display: flex; align-items: center; flex-shrink: 0; }

/* ─── COMMON TYPOGRAPHY ─── */
.section-overline { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--type-mono); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 28px; }
.section-h2 { font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif; font-size: var(--type-h2); font-weight: 400; letter-spacing: -0.5px; line-height: 1.15; color: var(--text); margin-bottom: 32px; max-width: var(--measure-display); }
.section-h2 em { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500; color: var(--gold); }
.section-body { font-family: var(--font-sans); font-size: var(--type-body); font-weight: 400; color: var(--text-dim); max-width: var(--measure); line-height: 1.7; }
.section-body em { font-family: 'Playfair Display', serif; font-style: italic; color: var(--gold); }

/* ─── VARIANT C TYPOGRAPHY (2026-05-07) ───────────────────────────────────
 * Roman locked Variant C from typography-test.html: Spine's editorial calm
 * (Instrument Serif lowercase headlines + JetBrains Mono labels) layered
 * with XXI's Playfair italic gold emphasis spans. Site-wide overrides
 * below — high-specificity selectors target inline-styled headings and
 * page-scoped CSS rules across index/about/services/work/contact/playbook.
 *
 * Rules:
 *  1. h1, h2, h3 → Instrument Serif weight 400, lowercase (no transform), tighter line-height
 *  2. <em> inside headings → Playfair Display italic gold (XXI's brand sparkle — UNCHANGED)
 *  3. Eyebrows / overlines / labels → JetBrains Mono weight 500 + wide letter-spacing
 *  4. Body copy stays Inter (no change)
 * ───────────────────────────────────────────────────────────────────────── */

/* (1) HEADLINES — Instrument Serif, weight 400, no uppercase. Use !important
       so we beat inline-style font-family declarations on hero/section h1-h3.
       text-transform also forced to none — uppercase Inter looked good in caps,
       lowercase Instrument Serif is the whole point of Variant C. */
h1, h2, h3,
.section-h2, .section-h3,
.page-hero h1, .page-hero h2, .page-hero h3,
.hero h1, .hero h2,
.hero-h1,
.cta-h2, .final-cta h2,
.alt-inner h2, .surface-section h2, .anon-section h2, .wall-head h2,
.work-section h2, .svc-engagement-section h2, .compare-section h2, .faq-section h2,
.services-intro p, .surface-card h3, .anon-card h3, .feature-h3, .recursion-card h3,
.engagement-card h3, .surface-tile h4, .alt-card h3, .demo h2,
.success h2 {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.5px !important;
  line-height: 1.15 !important;
}

/* (1b) Hero h1 keeps a tighter line-height because it's a single long line. */
.hero-h1, .hero h1, .page-hero h1 {
  line-height: 1.0 !important;
  letter-spacing: -1.5px !important;
}

/* (1c) <em> inside headings — Playfair italic gold survives the override.
        Critical: this re-declares font-family so it wins over rule (1). */
h1 em, h2 em, h3 em,
.hero-h1 em, .page-hero h1 em, .hero h1 em,
.cta-h2 em, .final-cta h2 em,
.section-h2 em, .section-h3 em,
.alt-inner h2 em, .surface-section h2 em, .anon-section h2 em,
.wall-head h2 em, .work-section h2 em, .svc-engagement-section h2 em,
.compare-section h2 em, .faq-section h2 em, .demo h2 em,
.surface-card h3 em, .anon-card h3 em, .feature-h3 em, .recursion-card h3 em,
.alt-card h3 em {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--gold) !important;
  text-transform: none !important;
}

/* (2) EYEBROWS / OVERLINES / LABELS — JetBrains Mono. Targets the most
       common label class names used across the 6 marketing pages. */
.overline, .eyebrow, .demo-meta, .section-overline, .section-label,
.hero-tagline, .hero-eyebrow, .hero-label,
.ticker-overline, .ticker-label,
.process-num, .play-num, .price-meta, .price-tier,
.section-counter .label, .deliverables, .footer-mark, .footer-logo,
.surface-card .outcome-chip, .anon-card .badge, .wall-head .meta,
.svc-tier .price-line .from, .svc-tier .row .k,
.compare-row .glyph + *, .compare-section .row .k,
.engagement-card .row .k, .engagement-card .for,
.feature-receipt .k, .receipt .k, .stack-chip,
.outcome-tile .k, .pipeline-stats .stat .k, .pipeline-card .label,
.process-step .when, .process-step .step-num,
.surface-tile .num, .surface-tile .see,
.work-section .status-pill, .demo-visual .status-pill,
.demo-visual .browser-bar .url, .pillar h4,
.stack-row .k, .stack-row .v,
.field label, .submit-row .note, .alt-card .num, .alt-card a.link,
.trust .line, .trust-row .item,
.faq-section .q, .faq-section .a-meta {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Monaco, monospace !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
}

/* (2b) Tinier monospace labels keep slightly wider tracking but smaller font.
        Roman's preference: never go below 9.5px on labels. */
.section-counter .label, .surface-tile .num,
.deliverables, .receipt .k, .stack-chip,
.pipeline-card .label, .process-step .when,
.outcome-tile .k, .pipeline-stats .stat .k,
.trust-row .item, .price-meta {
  letter-spacing: 0.18em !important;
}

/* (2c) Footer + nav-link mono fix — these are tiny, need wider tracking. */
.footer-mark, .footer-links, .footer-links a {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.22em !important;
}
nav a, nav .nav-logo {
  font-family: 'Inter', -apple-system, sans-serif !important;
}

/* ─── BUTTONS ─── */
.btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--text); color: var(--bg); border: 1px solid rgba(0,0,0,0.05); font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), background 0.4s, box-shadow 0.5s; border-radius: 4px; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
.btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; color: var(--gold); background: transparent; border: 1px solid var(--border-gold); font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; transition: all 0.4s; border-radius: 4px; }
.btn-ghost:hover { color: var(--text); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(212,175,55,0.1); }

/* ─── REVEAL ANIMATIONS (matches homepage) ─── */
.reveal { opacity: 0; transition: opacity 1.1s cubic-bezier(0.22,1,0.36,1), transform 1.1s cubic-bezier(0.22,1,0.36,1), filter 1.1s cubic-bezier(0.22,1,0.36,1); transform: translateY(48px) scale(0.985); filter: blur(6px); }
.reveal.visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

/* ─── DIVIDER ─── */
.divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 0; }

/* ─── FOOTER ─── simplified per audit: 3 lines max, no redundancy, generous space */
footer { padding: var(--space-section-tight) 48px var(--space-block); border-top: 1px solid var(--border); background: var(--bg); position: relative; z-index: 2; }
.footer-mark { font-family: var(--font-mono); font-size: var(--type-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }
.footer-mark em { color: var(--gold); font-style: normal; }
.footer-links { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: var(--type-mono); color: var(--text-muted); flex-wrap: wrap; }
.footer-links a { color: var(--text-dim); text-decoration: none; transition: color 0.3s; letter-spacing: 0.18em; text-transform: uppercase; }
.footer-links a:hover { color: var(--gold); }
.footer-sep { opacity: 0.25; }

/* ─── MOBILE ─── */
@media (max-width: 768px) {
  nav { padding: 0 20px; height: 56px; top: 6px; left: 6px; right: 6px; }
  nav.scrolled::before { left: 12px; right: 12px; }
  .nav-center { display: none; }
  footer { padding: 56px 24px 32px; }
  .viewport-frame { border-width: 6px; border-radius: 12px; }
}