/* ============================================================================
   cv_brand.css — Capers Ventures canonical design system ("Cinematic Operator")
   SINGLE SOURCE OF TRUTH for the look of every artifact: page, PDF, freebie,
   cover, post. Inline this :root block at the top of any standalone HTML
   (for local→PDF renders), or <link> it when the artifact is deployed.
   Tokens come from design_language_and_knobs.md Part 2. Change a token here →
   everything that uses it re-renders consistent.
   v1 · 2026-06-09
   ========================================================================== */

:root{
  /* COLOR (60% ink/charcoal · 30% bone · 10% gold — gold is a scalpel) */
  --ink:#0D0D0D;          /* near-black background */
  --charcoal:#1A1A18;     /* panel / surface */
  --panel:#222220;        /* raised surface */
  --gold:#C9A857;         /* primary accent — CV gold */
  --gold-bright:#E0C46A;  /* hover / emphasis */
  --gold-dark:#A8893E;    /* pressed / gradient stop */
  --bone:#F4F1EA;         /* off-white text */
  --muted:#8A8578;        /* secondary text */
  --line:#33322E;         /* hairline / divider */

  /* TYPE */
  --disp:'Archivo',system-ui,sans-serif;   /* display — headlines, ALL-CAPS option */
  --body:'Inter',system-ui,sans-serif;     /* body — readable */
  --mono:'JetBrains Mono',monospace;       /* eyebrows / labels / data */
  --scale:1.333;                            /* modular scale (perfect fourth) */
  --lead-body:1.6; --lead-disp:1.02;

  /* SPACE (8pt grid: 8/16/24/40/64/96) */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --maxw:1180px;

  /* DEPTH (restraint: low soft shadow, 1px gold hairline) */
  --shadow:0 18px 40px rgba(0,0,0,.55);
  --radius:14px;
}

/* Google Fonts (artifacts should also add the <link>; this @import is a fallback) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800;900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

/* ---- BASE ---- */
.cv-dark{background:var(--ink);color:var(--bone);font-family:var(--body);line-height:var(--lead-body);-webkit-font-smoothing:antialiased}
.cv-grain{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E")}
.cv-wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---- TYPE PRIMITIVES ---- */
.cv-display{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:var(--lead-disp);letter-spacing:-.02em;color:#fff}
.cv-h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:1.04;letter-spacing:-.01em}
.cv-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.cv-lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:62ch;font-weight:300}
.cv-gold{color:var(--gold)} .cv-muted{color:var(--muted)}

/* ---- COMPONENTS ---- */
.cv-mark{width:46px;height:46px;border-radius:8px;background:var(--gold);color:var(--ink);font-family:var(--disp);font-weight:900;font-size:24px;display:flex;align-items:center;justify-content:center;letter-spacing:-1px}
.cv-btn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--ink);font-weight:700;font-family:var(--disp);text-transform:uppercase;letter-spacing:.02em;padding:14px 26px;border-radius:10px;text-decoration:none;box-shadow:0 8px 26px rgba(201,168,87,.28)}
.cv-btn:hover{background:var(--gold-bright)}
.cv-hairline{height:1px;background:var(--gold);border:0;opacity:.7}
.cv-card{background:var(--charcoal);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}

/* ============================================================================
   ATTRIBUTION / LINK-BACK — the "can't be cut" rule (Paris 2026-06-09).
   Every free artifact MUST carry the link back to CV where it survives sharing:
   (1) .cv-cta-band  — a full CTA placed MID-document (never the last page).
   (2) .cv-runfoot   — a per-PAGE attribution strip so even one shared page links back.
   ========================================================================== */

/* (1) Mid-document CTA band — drop this AFTER the core value, BEFORE the end. */
.cv-cta-band{background:radial-gradient(700px 300px at 50% 0%,rgba(201,168,87,.14),transparent 62%),var(--charcoal);
  border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:var(--radius);
  padding:40px 32px;text-align:center;margin:48px 0}
.cv-cta-band .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.cv-cta-band h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(22px,3vw,32px);color:#fff;margin:10px 0 6px}
.cv-cta-band p{color:var(--muted);font-size:15px;max-width:48ch;margin:0 auto 18px}
.cv-cta-band .links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cv-cta-band a.sec{color:var(--bone);border:1px solid var(--line);border-radius:10px;padding:13px 20px;text-decoration:none;font-size:14px}
.cv-cta-band a.sec:hover{border-color:var(--gold);color:var(--gold)}

/* (2) Per-page running footer — repeat on EVERY page of a multi-page PDF.
   For print, position:fixed + @page makes it appear on each page. */
.cv-runfoot{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:8px 0}
.cv-runfoot .gold{color:var(--gold)}
@media print{
  .cv-runfoot{position:fixed;bottom:0.35in;left:0.6in;right:0.6in}
  .cv-page{page-break-after:always}
}

/* ============================================================================
   COMPONENT VARIANTS (so artifacts don't all look the same) — showcase: components_showcase.html
   BUTTONS: one primary + one secondary per page (never all five). House default = .cv-btn-grad.
   ========================================================================== */
.cv-btn-base{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.02em;padding:14px 26px;border-radius:10px;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:all .25s ease}
.cv-btn-grad{background:linear-gradient(135deg,var(--gold-bright),var(--gold-dark));color:var(--ink);box-shadow:0 8px 22px rgba(201,168,87,.25)}   /* DEFAULT primary */
.cv-btn-grad:hover{background:linear-gradient(135deg,var(--gold),#8f7430)}
.cv-btn-ghost{background:transparent;color:var(--gold);border-color:var(--gold)}                                                                  /* DEFAULT secondary */
.cv-btn-ghost:hover{background:var(--gold);color:var(--ink)}
.cv-btn-l2d{background:var(--bone);color:var(--ink)}                                                                                              /* light→dark flip */
.cv-btn-l2d:hover{background:var(--ink);color:var(--gold);border-color:var(--gold)}
.cv-btn-ink{background:var(--ink);color:var(--gold);border-color:var(--gold)}                                                                    /* dark-section button */
.cv-btn-ink:hover{box-shadow:0 0 0 3px rgba(201,168,87,.25),0 0 24px rgba(201,168,87,.4);background:#151311}

/* CARDS: default neutral; reach for an accent/gradient edge only on the ONE card that matters (scarce = signature). */
.cv-card-sharp{background:var(--charcoal);border:1px solid var(--line);border-radius:2px}
.cv-card-gradedge{border-radius:6px;border:1px solid transparent;background:
   linear-gradient(var(--charcoal),var(--charcoal)) padding-box,
   linear-gradient(135deg,var(--gold),transparent 60%) border-box}                /* "soft open edge" — Paris-liked */
.cv-card-accent{background:var(--charcoal);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 10px 10px 0}  /* colored accent edge — Paris-liked, use sparingly */
.cv-card-asym{background:var(--charcoal);border:1px solid var(--line);border-radius:2px 18px 2px 18px}
.cv-card-soft{background:radial-gradient(140% 120% at 0% 0%,rgba(201,168,87,.06),transparent 50%),var(--charcoal);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}

/* SIGNATURE BAND — the gradient-core + hairline top/bottom section (Paris-liked). ONE per piece, for the thesis line. */
.cv-band{background:radial-gradient(700px 300px at 50% 0%,rgba(201,168,87,.16),transparent 62%),var(--ink);
   border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:54px 24px;text-align:center}
.cv-band h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(22px,3.4vw,34px);color:#fff}
.cv-band h3 .cv-gold{color:var(--gold)}

/* ATTENTION HEADLINE (.cv-hook) — top-of-funnel hook that grabs + holds (parallel to .cv-band but for the opening line).
   Devices that hold the eye: oversized scale, gold glow, an eyebrow with a gold rule, and a gold UNDERLINE anchoring the key word. */
.cv-hook{position:relative;padding:88px 0;overflow:hidden}
.cv-hook::before{content:"";position:absolute;inset:0;background:radial-gradient(820px 440px at 12% 0%,rgba(201,168,87,.18),transparent 58%);pointer-events:none}
.cv-hook .cv-eyebrow{display:inline-block;border-bottom:1px solid var(--gold);padding-bottom:7px;position:relative}
.cv-hook h1{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.92;
   font-size:clamp(44px,8.5vw,112px);color:#fff;margin:24px 0 0;position:relative;max-width:16ch}
/* the holding device: gold key word with a gold underline anchor */
.cv-hook h1 .key{color:var(--gold);position:relative;white-space:nowrap}
.cv-hook h1 .key::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.09em;background:var(--gold);opacity:.85}
.cv-hook .cv-sub{font-size:clamp(17px,2.2vw,22px);color:var(--muted);max-width:48ch;margin-top:26px;font-weight:300;position:relative}
@media(max-width:768px){ .cv-hook{padding:60px 0} .cv-hook h1{max-width:100%} }

/* ============================================================================
   LIGHT GROUND LAYER — v2 · 2026-07-14 (ADDITIVE; nothing above is changed)
   WHY: everything above is dark-first (.cv-dark = ink, .cv-card = charcoal,
   .cv-band = ink, .cv-display = #fff). On 2026-06-11 Paris locked a standing
   rule: NEVER an all-black / near-black full-bleed ground on any surface —
   pages, heroes, PDFs, exports. The v1 components silently violate it.
   Rather than rewrite v1 (and risk anything already using it), this layer adds
   LIGHT surface variants. Compose pages with these; keep the dark classes for
   *panels and accents inside* a light page, never as the page ground.
   60% bone/sand · 30% ink type · 10% gold — gold stays a scalpel.
   ========================================================================== */
:root{
  --sand:#EAE5DA;        /* secondary light surface / band ground */
  --paper:#FFFFFF;       /* card surface on bone */
  --rule:#DAD3C4;        /* hairline on light */
  --muted-l:#6B6559;     /* secondary text ON LIGHT (v1 --muted is for dark) */
}

/* BASE */
.cv-lightbase{background:var(--bone);color:var(--ink);font-family:var(--body);line-height:var(--lead-body);-webkit-font-smoothing:antialiased}
.cv-l-display{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:var(--lead-disp);letter-spacing:-.02em;color:var(--ink)}
.cv-l-h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:1.04;letter-spacing:-.01em;color:var(--ink)}
.cv-l-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dark)}
.cv-l-lead{font-size:clamp(17px,2vw,20px);color:var(--muted-l);max-width:62ch;font-weight:300}
.cv-l-gold{color:var(--gold-dark)}   /* gold-dark reads on bone; --gold does not */
.cv-l-muted{color:var(--muted-l)}
.cv-l-section{padding:var(--s5) 0;border-top:1px solid var(--rule)}

/* HOOK — the attention headline, on light */
.cv-l-hook{position:relative;padding:88px 0;overflow:hidden}
.cv-l-hook::before{content:"";position:absolute;inset:0;background:radial-gradient(820px 440px at 12% 0%,rgba(201,168,87,.22),transparent 58%);pointer-events:none}
.cv-l-hook .cv-l-eyebrow{display:inline-block;border-bottom:1px solid var(--gold-dark);padding-bottom:7px}
.cv-l-hook h1{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.92;
  font-size:clamp(44px,8.5vw,112px);color:var(--ink);margin:24px 0 0;position:relative;max-width:16ch}
.cv-l-hook h1 .key{color:var(--gold-dark);position:relative;white-space:nowrap}
.cv-l-hook h1 .key::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.09em;background:var(--gold-dark);opacity:.85}
.cv-l-hook .cv-sub{font-size:clamp(17px,2.2vw,22px);color:var(--muted-l);max-width:48ch;margin-top:26px;font-weight:300;position:relative}
@media(max-width:768px){ .cv-l-hook{padding:60px 0} .cv-l-hook h1{max-width:100%} }

/* CARDS on light — sharp by default; ONE gradient/accent edge per page (scarce = signature) */
.cv-l-card{background:var(--paper);border:1px solid var(--rule);border-radius:2px;padding:26px}
.cv-l-card-gradedge{padding:26px;border-radius:6px;border:1px solid transparent;background:
   linear-gradient(var(--paper),var(--paper)) padding-box,
   linear-gradient(135deg,var(--gold),transparent 60%) border-box}
.cv-l-card-accent{background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--gold-dark);border-radius:0 10px 10px 0;padding:26px}

/* SIGNATURE BAND on light — the gold thesis moment. ONE per page, mid-document. */
.cv-l-band{background:radial-gradient(700px 300px at 50% 0%,rgba(201,168,87,.22),transparent 64%),var(--sand);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:56px 24px;text-align:center}
.cv-l-band h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(22px,3.4vw,34px);color:var(--ink);margin:10px 0 8px}
.cv-l-band p{color:var(--muted-l);max-width:50ch;margin:0 auto 22px}
.cv-l-band .links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* BUTTONS on light — primary keeps the gradient; secondary is a gold-dark ghost so it reads on bone */
.cv-l-btn-ghost{background:transparent;color:var(--gold-dark);border-color:var(--gold-dark)}
.cv-l-btn-ghost:hover{background:var(--gold-dark);color:var(--bone)}

/* INK PANEL — a dark slab used *inside* a light page (a proof block, a quote).
   This is the ONLY sanctioned use of the dark ground: a panel, never the page. */
.cv-l-inkpanel{background:var(--ink);color:var(--bone);border-radius:var(--radius);padding:40px 32px}
.cv-l-inkpanel h3{color:#fff}

/* PRINT — minimal ink. Black on white, no gradients/washes/shadows. */
@media print{
  .cv-lightbase{background:#fff;color:#000}
  .cv-l-hook::before,.cv-l-band{background:none}
  .cv-l-hook{padding:24px 0}
  .cv-l-card,.cv-l-card-gradedge,.cv-l-card-accent{background:#fff;border:1px solid #999;border-image:none}
  .cv-l-card-accent{border-left:3px solid #000}
  .cv-l-band{border-top:2px solid #000;border-bottom:2px solid #000;padding:24px 0}
  .cv-l-inkpanel{background:#fff;color:#000;border:1px solid #000}
  .cv-btn-base,.cv-btn-grad,.cv-l-btn-ghost{background:none!important;color:#000!important;border:1px solid #000!important;box-shadow:none!important}
  .cv-l-eyebrow,.cv-l-gold{color:#000}
  .cv-l-section{padding:24px 0;border-top:1px solid #999}
}