@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/font-ee96cd2f.0f53d1c03b39.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/font-c141f5fd.0a2f1fca2636.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/font-8ee1388e.99a84c176157.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/font-23d0a115.db1083ed2d69.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/font-8aa3c0aa.d29b0cfc1b6b.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/font-b0644bc6.71e3725632d8.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/font-f4a0605a.2078240cee94.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/font-e8783f02.f4de5157f0f3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/font-1c15fe49.c4fbd9994039.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/font-8c10dcf1.e553fa829fd9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/font-21abf004.d69b8909cbcc.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/font-2bf7ef31.e08ad84517b0.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/font-6bbbde3c.155f6e701097.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/font-860aac25.03f6218074ce.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* AVI webfonts — Source Serif 4 (editorial display serif) + Outfit (UI/product sans).
   Loaded from Google Fonts. NOTE: served via CDN, not self-hosted binaries.
   See README "Caveats" — flag if you need offline/self-hosted .woff2 files. */
/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */



/* ============================================================
   AVI — Color tokens
   CRISP WHITE, art-forward. A clean white ground and neutral
   near-black ink let the ARTWORK carry the colour. The brand
   itself is a confident burnt-umber accent + a three-pillar
   score system in three distinct, gallery-toned hues:
     UMBER = Market · COBALT = Cultural · OCHRE = Critical.
   Burnt umber is also the single interactive accent.

   Token NAMES are kept stable across refits so components don't
   break — `--gold-*` holds BURNT UMBER, `--blue-*` holds COBALT,
   `--lilac-*` holds OCHRE.

   White is the DEFAULT ground (`:root`). The dark "gallery at
   night" register is opt-in via the `.avi-night` scope.
   ============================================================ */
:root {
  /* --- Crisp white — the canvas (default ground) --- */
  --paper-50:  #FFFFFF;   /* lifted card / pure white plate */
  --paper-100: #FFFFFF;   /* page — crisp white */
  --paper-200: #F4F2EE;   /* sunken / faint tint block */
  --paper-300: #E6E3DC;   /* deeper tint / hairline base */

  /* --- Neutral near-black ink (text on white) --- */
  --ink-pure:  #111110;   /* display ink — near-black */
  --ink-soft:  #44423D;   /* secondary ink / body */
  --ink-faint: #7C7A73;   /* tertiary ink / captions */
  --ink-ghost: #ABA9A1;   /* muted / faint labels */

  /* --- Warm near-black neutrals (for the .avi-night ground) --- */
  --ink-950: #0B0A09;
  --ink-900: #100E0C;     /* night page background */
  --ink-850: #16140F;
  --ink-800: #1B1813;
  --ink-750: #221E18;
  --ink-700: #2A251E;
  --ink-600: #38322A;
  --ink-500: #4A4238;

  /* --- Cream foreground (text on the night ground) --- */
  --cream-50:  #F8F5EE;
  --cream-100: #EDE8DF;
  --cream-200: #D6D0C4;
  --cream-300: #ABA396;
  --cream-400: #7E776B;
  --cream-500: #5A554C;

  /* ============================================================
     THE TRIO — burnt umber · cobalt · ochre.
     Three distinct, gallery-toned hues. Each ships a soft tint, a
     core (blocks, bars, markers), a pressed deep, and an `-ink`
     value tuned to stay legible as TEXT on white.
     ============================================================ */

  /* --- BURNT UMBER — Market + interactive accent (family: gold) --- */
  --gold-50:  #F4E7E0;
  --gold-100: #E6C7B8;   /* soft tint */
  --gold-300: #CC8463;
  --gold-500: #B05433;   /* core — burnt umber */
  --gold-600: #8E4126;   /* pressed / deep */
  --gold-700: #5E2B19;
  --gold-ink: #9A4527;   /* legible umber-as-text on white */

  /* --- COBALT — Cultural (family: blue) --- */
  --blue-100: #C8D4E6;   /* soft tint */
  --blue-300: #6E8AB5;
  --blue-500: #2B4E86;   /* core — cobalt blue */
  --blue-600: #213D68;   /* pressed / deep */
  --blue-700: #16294A;
  --blue-ink: #284B7E;   /* legible cobalt-as-text on white */

  /* --- OCHRE — Critical (family: lilac) --- */
  --lilac-100: #ECD9AC;  /* soft tint */
  --lilac-300: #D6B25E;
  --lilac-500: #B5821F;  /* core — ochre */
  --lilac-600: #946818;  /* pressed / deep */
  --lilac-700: #634611;
  --lilac-ink: #7E5C18;  /* legible ochre-as-text on white */

  /* --- Semantic status (functional, sit quietly beside the trio) --- */
  --positive: #2E7D5B;   /* value up / gains — cool emerald (distinct from umber) */
  --negative: #A8302A;   /* value down — a true red, kept clear of umber */
  --warning:  #B07D2E;   /* caution — muted amber */

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components.
     Default mapping = the LIGHT gallery-white ground.
     ============================================================ */
  /* Backgrounds & surfaces */
  --bg-page:        var(--paper-100);
  --bg-sunken:      var(--paper-200);
  --surface-raised: var(--paper-50);
  --surface-card:   var(--paper-50);
  --surface-hover:  var(--paper-200);
  --surface-control:var(--paper-200);

  /* Text */
  --text-display:   var(--ink-pure);
  --text-primary:   var(--ink-pure);
  --text-secondary: var(--ink-soft);
  --text-tertiary:  var(--ink-faint);
  --text-muted:     var(--ink-ghost);
  --text-on-gold:   #FFFFFF;   /* white for text atop a solid UMBER fill */
  --text-on-accent: #FFFFFF;   /* white for text atop the accent (umber) */

  /* Brand accent — interactive (links, focus, primary action) = BURNT UMBER */
  --accent:         var(--gold-500);
  --accent-soft:    var(--gold-100);
  --accent-press:   var(--gold-600);
  --accent-on:      #FFFFFF;

  /* Pillars — the trio for blocks, bars, markers */
  --pillar-market:   var(--gold-500);   /* burnt umber */
  --pillar-cultural: var(--blue-500);   /* cobalt */
  --pillar-critical: var(--lilac-500);  /* ochre */
  /* Pillar TEXT — legible deep hues for labels on the current ground */
  --text-market:     var(--gold-ink);
  --text-cultural:   var(--blue-ink);
  --text-critical:   var(--lilac-ink);

  /* Lines & borders */
  --line-subtle:  rgba(20, 17, 13, 0.07);
  --line:         rgba(20, 17, 13, 0.14);
  --line-strong:  rgba(20, 17, 13, 0.24);
  --line-accent:  rgba(176, 84, 51, 0.45);

  /* Tinted fills (for badges / soft chips) */
  --fill-gold:     rgba(176, 84, 51, 0.12);
  --fill-blue:     rgba(43, 78, 134, 0.10);
  --fill-lilac:    rgba(181, 130, 31, 0.14);
  --fill-neutral:  rgba(20, 17, 13, 0.05);
  --fill-positive: rgba(46, 125, 91, 0.13);
  --fill-negative: rgba(168, 48, 42, 0.12);

  /* --- Paper rules (structural hairlines on the light ground) --- */
  --rule-faint:  rgba(20, 17, 13, 0.07);
  --rule:        rgba(20, 17, 13, 0.14);
  --rule-strong: rgba(20, 17, 13, 0.28);
  --rule-ink:    rgba(20, 17, 13, 0.88);

  /* The deepened pillar text aliases kept for back-compat with the
     marketing kit, which references these names directly. */
  /* --gold-ink / --blue-ink / --lilac-ink defined above. */

  color-scheme: light;
}

/* ============================================================
   GALLERY AT NIGHT — the opt-in dark register.
   Warm near-black ground, cream text, the warm trio brightened so
   it sings on dark. Add `class="avi-night"` to any surface.
   ============================================================ */
.avi-night {
  --bg-page:        var(--ink-900);
  --bg-sunken:      var(--ink-850);
  --surface-raised: var(--ink-800);
  --surface-card:   var(--ink-750);
  --surface-hover:  var(--ink-700);
  --surface-control:var(--ink-600);

  --text-display:   var(--cream-50);
  --text-primary:   var(--cream-100);
  --text-secondary: var(--cream-200);
  --text-tertiary:  var(--cream-300);
  --text-muted:     var(--cream-400);
  --text-on-gold:   #FFFFFF;
  --text-on-accent: #0B0A09;

  --accent:         var(--gold-300);
  --accent-soft:    rgba(204, 132, 99, 0.22);
  --accent-press:   var(--gold-500);
  --accent-on:      #0B0A09;

  --pillar-market:   var(--gold-300);
  --pillar-cultural: var(--blue-300);
  --pillar-critical: var(--lilac-300);
  --text-market:     var(--gold-300);
  --text-cultural:   var(--blue-300);
  --text-critical:   var(--lilac-300);

  --line-subtle:  rgba(237, 232, 223, 0.07);
  --line:         rgba(237, 232, 223, 0.12);
  --line-strong:  rgba(237, 232, 223, 0.20);
  --line-accent:  rgba(204, 132, 99, 0.55);

  --fill-gold:     rgba(204, 132, 99, 0.18);
  --fill-blue:     rgba(110, 138, 181, 0.18);
  --fill-lilac:    rgba(214, 178, 94, 0.18);
  --fill-neutral:  rgba(237, 232, 223, 0.06);
  --fill-positive: rgba(110, 184, 145, 0.16);
  --fill-negative: rgba(206, 110, 96, 0.16);

  --positive: #6EB891;
  --negative: #CE6E60;

  --rule-faint:  rgba(237, 232, 223, 0.07);
  --rule:        rgba(237, 232, 223, 0.12);
  --rule-strong: rgba(237, 232, 223, 0.22);
  --rule-ink:    rgba(237, 232, 223, 0.85);

  color-scheme: dark;
  background: var(--ink-900);
  color: var(--cream-100);
}

/* `.avi-paper` is retained as an explicit light scope (e.g. a light
   plate dropped inside a night page). It re-asserts the default
   light ground, so existing usages keep working. */
.avi-paper {
  --bg-page:        var(--paper-100);
  --bg-sunken:      var(--paper-200);
  --surface-raised: var(--paper-50);
  --surface-card:   var(--paper-50);
  --surface-hover:  var(--paper-200);
  --surface-control:var(--paper-200);

  --text-display:   var(--ink-pure);
  --text-primary:   var(--ink-pure);
  --text-secondary: var(--ink-soft);
  --text-tertiary:  var(--ink-faint);
  --text-muted:     var(--ink-ghost);

  --accent:         var(--gold-500);
  --accent-soft:    var(--gold-100);

  --pillar-market:   var(--gold-500);
  --pillar-cultural: var(--blue-500);
  --pillar-critical: var(--lilac-500);
  --text-market:     var(--gold-ink);
  --text-cultural:   var(--blue-ink);
  --text-critical:   var(--lilac-ink);

  --line-subtle: var(--rule-faint);
  --line:        var(--rule);
  --line-strong: var(--rule-strong);
  --line-accent: rgba(176, 84, 51, 0.5);

  --positive: #2E7D5B;
  --negative: #A8302A;

  background: var(--paper-100);
  color: var(--ink-pure);
}

/* ============================================================
   AVI — Typography tokens
   A DUAL-VOICE system. Two typefaces, each with one unbreakable job:

   • Source Serif 4 (`--font-display`) — the EDITORIAL / art-world
     voice. Display headlines, section titles, artist names, the
     AVI score read as a catalogue figure, and italic pull-quotes.
   • Outfit (`--font-sans`) — the PRODUCT / finance voice. Body,
     labels, overlines, all UI controls, and every table, delta &
     metric (with tabular figures).

   They share a line in only one place by design (artist name +
   score). The discipline of one-job-each is what keeps two
   typefaces reading as simple rather than busy.
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Source Serif 4', 'Iowan Old Style', Georgia, serif; /* editorial voice */
  --font-sans:    'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* product voice */
  --font-data:    'Outfit', ui-monospace, 'SF Mono', monospace; /* with font-feature tnum */

  /* Fluid display sizes (px) */
  --text-display-xl: 72px;  /* hero serif */
  --text-display-l:  56px;
  --text-display-m:  40px;
  --text-display-s:  30px;

  /* UI / body sizes */
  --text-2xl: 24px;
  --text-xl:  20px;
  --text-lg:  17px;
  --text-md:  15px;   /* base body */
  --text-sm:  13px;
  --text-xs:  11px;   /* labels / overline */

  /* Score numerals (the signature 0–100 figure) */
  --text-score-xl: 88px;
  --text-score-l:  56px;
  --text-score-m:  34px;

  /* Weights */
  --fw-light: 300;     /* @kind font */
  --fw-regular: 400;   /* @kind font */
  --fw-medium: 500;    /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */

  /* Line heights */
  --lh-tight: 1.05;    /* @kind font */
  --lh-snug: 1.2;      /* @kind font */
  --lh-normal: 1.45;   /* @kind font */
  --lh-relaxed: 1.65;  /* @kind font */

  /* Letter-spacing */
  --ls-tight: -0.02em;     /* large sans display */
  --ls-display: -0.012em;  /* serif editorial display */
  --ls-normal: 0em;
  --ls-label: 0.04em;
  --ls-overline: 0.16em;   /* all-caps eyebrow / nav (matches wordmark) */
}

/* ============================================================
   AVI — Spacing & layout tokens. 4px base scale.
   ============================================================ */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1440px;
  --gutter: 24px;
  --sidebar-w: 248px;
}

/* ============================================================
   AVI — Effects: radii, borders, shadows, motion.
   Light gallery ground → elevation comes from a white plate +
   hairline rule + a soft, low-alpha ambient shadow. Restrained,
   institutional. Sharper corners suit the De Stijl register.
   ============================================================ */
:root {
  /* Radii — crisp and squared for the arty/De Stijl register.
     Nothing pill-soft except chips and avatars. */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* Borders */
  --border-hairline: 1px solid var(--line);
  --border-subtle:   1px solid var(--line-subtle);
  --border-strong:   1px solid var(--line-strong);

  /* Shadows — soft, low-alpha ambient for the light ground */
  --shadow-sm: 0 1px 2px rgba(20,17,13,0.06);
  --shadow-md: 0 10px 30px -16px rgba(20,17,13,0.22);
  --shadow-lg: 0 26px 60px -34px rgba(20,17,13,0.32);
  --shadow-gold: 0 10px 30px -14px rgba(242,194,10,0.30);

  /* Focus ring — primary blue */
  --ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--accent);

  /* Motion — quiet, precise. No bounce. */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);           /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
  --dur-slow: 360ms;   /* @kind other */
}

/* Deeper ambient shadows on the night ground */
.avi-night {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.35);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.45);
  --shadow-gold: 0 8px 28px rgba(247,212,62,0.18);
}

/* ============================================================
   AVI — base reset + brand defaults. Sets the light gallery-white
   canvas and SANS-LED default typography (serif is now an
   editorial accent, not the workhorse). Components style locally.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1;
}

/* Display headings (h1/h2) speak the EDITORIAL serif voice; structural
   sub-heads (h3/h4) stay in the product sans. The dual-voice split. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--text-display);
  margin: 0;
}
h3, h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-display);
  margin: 0;
}

/* Opt-in helpers to override the default per context. */
.avi-serif { font-family: var(--font-display); font-weight: var(--fw-regular); letter-spacing: var(--ls-display); }
.avi-sans  { font-family: var(--font-sans); }

a { color: var(--accent); text-decoration: none; }

/* Numerals: tabular figures for any data/score context */
.avi-tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* Score-arc draw-on: resting state is the FULL arc (so it stays visible
   with reduced motion or if the animation never runs); it draws on from
   zero via stroke-dashoffset. The element sets --avi-arc-len inline. */
@keyframes aviDrawArc { from { stroke-dashoffset: var(--avi-arc-len, 0); } to { stroke-dashoffset: 0; } }
.avi-arc-draw { stroke-dashoffset: 0; animation: aviDrawArc 1100ms cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .avi-arc-draw { animation: none; } }

/* All-caps eyebrow / overline — echoes the wordmark's tracking */
.avi-overline {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

::selection { background: var(--gold-100); color: var(--ink-pure); }

/* Custom scrollbars — tuned for the light ground */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--paper-300); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-ghost); }
::-webkit-scrollbar-track { background: transparent; }

/* On the night ground, restore dark-tuned scrollbars + selection */
.avi-night ::selection { background: var(--gold-300); color: var(--ink-pure); }
.avi-night ::-webkit-scrollbar-thumb { background: var(--ink-600); }
.avi-night ::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }

/* ============================================================
   AVI Design System — global stylesheet entry point.
   Consumers link THIS file. Imports only — no rules here.
   ============================================================ */
/* AVI webfonts — Source Serif 4 (editorial display serif) + Outfit (UI/product sans).
   Loaded from Google Fonts. NOTE: served via CDN, not self-hosted binaries.
   See README "Caveats" — flag if you need offline/self-hosted .woff2 files. */
/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */



/* ============================================================
   AVI — Color tokens
   CRISP WHITE, art-forward. A clean white ground and neutral
   near-black ink let the ARTWORK carry the colour. The brand
   itself is a confident burnt-umber accent + a three-pillar
   score system in three distinct, gallery-toned hues:
     UMBER = Market · COBALT = Cultural · OCHRE = Critical.
   Burnt umber is also the single interactive accent.

   Token NAMES are kept stable across refits so components don't
   break — `--gold-*` holds BURNT UMBER, `--blue-*` holds COBALT,
   `--lilac-*` holds OCHRE.

   White is the DEFAULT ground (`:root`). The dark "gallery at
   night" register is opt-in via the `.avi-night` scope.
   ============================================================ */
:root {
  /* --- Crisp white — the canvas (default ground) --- */
  --paper-50:  #FFFFFF;   /* lifted card / pure white plate */
  --paper-100: #FFFFFF;   /* page — crisp white */
  --paper-200: #F4F2EE;   /* sunken / faint tint block */
  --paper-300: #E6E3DC;   /* deeper tint / hairline base */

  /* --- Neutral near-black ink (text on white) --- */
  --ink-pure:  #111110;   /* display ink — near-black */
  --ink-soft:  #44423D;   /* secondary ink / body */
  --ink-faint: #7C7A73;   /* tertiary ink / captions */
  --ink-ghost: #ABA9A1;   /* muted / faint labels */

  /* --- Warm near-black neutrals (for the .avi-night ground) --- */
  --ink-950: #0B0A09;
  --ink-900: #100E0C;     /* night page background */
  --ink-850: #16140F;
  --ink-800: #1B1813;
  --ink-750: #221E18;
  --ink-700: #2A251E;
  --ink-600: #38322A;
  --ink-500: #4A4238;

  /* --- Cream foreground (text on the night ground) --- */
  --cream-50:  #F8F5EE;
  --cream-100: #EDE8DF;
  --cream-200: #D6D0C4;
  --cream-300: #ABA396;
  --cream-400: #7E776B;
  --cream-500: #5A554C;

  /* ============================================================
     THE TRIO — burnt umber · cobalt · ochre.
     Three distinct, gallery-toned hues. Each ships a soft tint, a
     core (blocks, bars, markers), a pressed deep, and an `-ink`
     value tuned to stay legible as TEXT on white.
     ============================================================ */

  /* --- BURNT UMBER — Market + interactive accent (family: gold) --- */
  --gold-50:  #F4E7E0;
  --gold-100: #E6C7B8;   /* soft tint */
  --gold-300: #CC8463;
  --gold-500: #B05433;   /* core — burnt umber */
  --gold-600: #8E4126;   /* pressed / deep */
  --gold-700: #5E2B19;
  --gold-ink: #9A4527;   /* legible umber-as-text on white */

  /* --- COBALT — Cultural (family: blue) --- */
  --blue-100: #C8D4E6;   /* soft tint */
  --blue-300: #6E8AB5;
  --blue-500: #2B4E86;   /* core — cobalt blue */
  --blue-600: #213D68;   /* pressed / deep */
  --blue-700: #16294A;
  --blue-ink: #284B7E;   /* legible cobalt-as-text on white */

  /* --- OCHRE — Critical (family: lilac) --- */
  --lilac-100: #ECD9AC;  /* soft tint */
  --lilac-300: #D6B25E;
  --lilac-500: #B5821F;  /* core — ochre */
  --lilac-600: #946818;  /* pressed / deep */
  --lilac-700: #634611;
  --lilac-ink: #7E5C18;  /* legible ochre-as-text on white */

  /* --- Semantic status (functional, sit quietly beside the trio) --- */
  --positive: #2E7D5B;   /* value up / gains — cool emerald (distinct from umber) */
  --negative: #A8302A;   /* value down — a true red, kept clear of umber */
  --warning:  #B07D2E;   /* caution — muted amber */

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components.
     Default mapping = the LIGHT gallery-white ground.
     ============================================================ */
  /* Backgrounds & surfaces */
  --bg-page:        var(--paper-100);
  --bg-sunken:      var(--paper-200);
  --surface-raised: var(--paper-50);
  --surface-card:   var(--paper-50);
  --surface-hover:  var(--paper-200);
  --surface-control:var(--paper-200);

  /* Text */
  --text-display:   var(--ink-pure);
  --text-primary:   var(--ink-pure);
  --text-secondary: var(--ink-soft);
  --text-tertiary:  var(--ink-faint);
  --text-muted:     var(--ink-ghost);
  --text-on-gold:   #FFFFFF;   /* white for text atop a solid UMBER fill */
  --text-on-accent: #FFFFFF;   /* white for text atop the accent (umber) */

  /* Brand accent — interactive (links, focus, primary action) = BURNT UMBER */
  --accent:         var(--gold-500);
  --accent-soft:    var(--gold-100);
  --accent-press:   var(--gold-600);
  --accent-on:      #FFFFFF;

  /* Pillars — the trio for blocks, bars, markers */
  --pillar-market:   var(--gold-500);   /* burnt umber */
  --pillar-cultural: var(--blue-500);   /* cobalt */
  --pillar-critical: var(--lilac-500);  /* ochre */
  /* Pillar TEXT — legible deep hues for labels on the current ground */
  --text-market:     var(--gold-ink);
  --text-cultural:   var(--blue-ink);
  --text-critical:   var(--lilac-ink);

  /* Lines & borders */
  --line-subtle:  rgba(20, 17, 13, 0.07);
  --line:         rgba(20, 17, 13, 0.14);
  --line-strong:  rgba(20, 17, 13, 0.24);
  --line-accent:  rgba(176, 84, 51, 0.45);

  /* Tinted fills (for badges / soft chips) */
  --fill-gold:     rgba(176, 84, 51, 0.12);
  --fill-blue:     rgba(43, 78, 134, 0.10);
  --fill-lilac:    rgba(181, 130, 31, 0.14);
  --fill-neutral:  rgba(20, 17, 13, 0.05);
  --fill-positive: rgba(46, 125, 91, 0.13);
  --fill-negative: rgba(168, 48, 42, 0.12);

  /* --- Paper rules (structural hairlines on the light ground) --- */
  --rule-faint:  rgba(20, 17, 13, 0.07);
  --rule:        rgba(20, 17, 13, 0.14);
  --rule-strong: rgba(20, 17, 13, 0.28);
  --rule-ink:    rgba(20, 17, 13, 0.88);

  /* The deepened pillar text aliases kept for back-compat with the
     marketing kit, which references these names directly. */
  /* --gold-ink / --blue-ink / --lilac-ink defined above. */

  color-scheme: light;
}

/* ============================================================
   GALLERY AT NIGHT — the opt-in dark register.
   Warm near-black ground, cream text, the warm trio brightened so
   it sings on dark. Add `class="avi-night"` to any surface.
   ============================================================ */
.avi-night {
  --bg-page:        var(--ink-900);
  --bg-sunken:      var(--ink-850);
  --surface-raised: var(--ink-800);
  --surface-card:   var(--ink-750);
  --surface-hover:  var(--ink-700);
  --surface-control:var(--ink-600);

  --text-display:   var(--cream-50);
  --text-primary:   var(--cream-100);
  --text-secondary: var(--cream-200);
  --text-tertiary:  var(--cream-300);
  --text-muted:     var(--cream-400);
  --text-on-gold:   #FFFFFF;
  --text-on-accent: #0B0A09;

  --accent:         var(--gold-300);
  --accent-soft:    rgba(204, 132, 99, 0.22);
  --accent-press:   var(--gold-500);
  --accent-on:      #0B0A09;

  --pillar-market:   var(--gold-300);
  --pillar-cultural: var(--blue-300);
  --pillar-critical: var(--lilac-300);
  --text-market:     var(--gold-300);
  --text-cultural:   var(--blue-300);
  --text-critical:   var(--lilac-300);

  --line-subtle:  rgba(237, 232, 223, 0.07);
  --line:         rgba(237, 232, 223, 0.12);
  --line-strong:  rgba(237, 232, 223, 0.20);
  --line-accent:  rgba(204, 132, 99, 0.55);

  --fill-gold:     rgba(204, 132, 99, 0.18);
  --fill-blue:     rgba(110, 138, 181, 0.18);
  --fill-lilac:    rgba(214, 178, 94, 0.18);
  --fill-neutral:  rgba(237, 232, 223, 0.06);
  --fill-positive: rgba(110, 184, 145, 0.16);
  --fill-negative: rgba(206, 110, 96, 0.16);

  --positive: #6EB891;
  --negative: #CE6E60;

  --rule-faint:  rgba(237, 232, 223, 0.07);
  --rule:        rgba(237, 232, 223, 0.12);
  --rule-strong: rgba(237, 232, 223, 0.22);
  --rule-ink:    rgba(237, 232, 223, 0.85);

  color-scheme: dark;
  background: var(--ink-900);
  color: var(--cream-100);
}

/* `.avi-paper` is retained as an explicit light scope (e.g. a light
   plate dropped inside a night page). It re-asserts the default
   light ground, so existing usages keep working. */
.avi-paper {
  --bg-page:        var(--paper-100);
  --bg-sunken:      var(--paper-200);
  --surface-raised: var(--paper-50);
  --surface-card:   var(--paper-50);
  --surface-hover:  var(--paper-200);
  --surface-control:var(--paper-200);

  --text-display:   var(--ink-pure);
  --text-primary:   var(--ink-pure);
  --text-secondary: var(--ink-soft);
  --text-tertiary:  var(--ink-faint);
  --text-muted:     var(--ink-ghost);

  --accent:         var(--gold-500);
  --accent-soft:    var(--gold-100);

  --pillar-market:   var(--gold-500);
  --pillar-cultural: var(--blue-500);
  --pillar-critical: var(--lilac-500);
  --text-market:     var(--gold-ink);
  --text-cultural:   var(--blue-ink);
  --text-critical:   var(--lilac-ink);

  --line-subtle: var(--rule-faint);
  --line:        var(--rule);
  --line-strong: var(--rule-strong);
  --line-accent: rgba(176, 84, 51, 0.5);

  --positive: #2E7D5B;
  --negative: #A8302A;

  background: var(--paper-100);
  color: var(--ink-pure);
}

/* ============================================================
   AVI — Typography tokens
   A DUAL-VOICE system. Two typefaces, each with one unbreakable job:

   • Source Serif 4 (`--font-display`) — the EDITORIAL / art-world
     voice. Display headlines, section titles, artist names, the
     AVI score read as a catalogue figure, and italic pull-quotes.
   • Outfit (`--font-sans`) — the PRODUCT / finance voice. Body,
     labels, overlines, all UI controls, and every table, delta &
     metric (with tabular figures).

   They share a line in only one place by design (artist name +
   score). The discipline of one-job-each is what keeps two
   typefaces reading as simple rather than busy.
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Source Serif 4', 'Iowan Old Style', Georgia, serif; /* editorial voice */
  --font-sans:    'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* product voice */
  --font-data:    'Outfit', ui-monospace, 'SF Mono', monospace; /* with font-feature tnum */

  /* Fluid display sizes (px) */
  --text-display-xl: 72px;  /* hero serif */
  --text-display-l:  56px;
  --text-display-m:  40px;
  --text-display-s:  30px;

  /* UI / body sizes */
  --text-2xl: 24px;
  --text-xl:  20px;
  --text-lg:  17px;
  --text-md:  15px;   /* base body */
  --text-sm:  13px;
  --text-xs:  11px;   /* labels / overline */

  /* Score numerals (the signature 0–100 figure) */
  --text-score-xl: 88px;
  --text-score-l:  56px;
  --text-score-m:  34px;

  /* Weights */
  --fw-light: 300;     /* @kind font */
  --fw-regular: 400;   /* @kind font */
  --fw-medium: 500;    /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */

  /* Line heights */
  --lh-tight: 1.05;    /* @kind font */
  --lh-snug: 1.2;      /* @kind font */
  --lh-normal: 1.45;   /* @kind font */
  --lh-relaxed: 1.65;  /* @kind font */

  /* Letter-spacing */
  --ls-tight: -0.02em;     /* large sans display */
  --ls-display: -0.012em;  /* serif editorial display */
  --ls-normal: 0em;
  --ls-label: 0.04em;
  --ls-overline: 0.16em;   /* all-caps eyebrow / nav (matches wordmark) */
}

/* ============================================================
   AVI — Spacing & layout tokens. 4px base scale.
   ============================================================ */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1440px;
  --gutter: 24px;
  --sidebar-w: 248px;
}

/* ============================================================
   AVI — Effects: radii, borders, shadows, motion.
   Light gallery ground → elevation comes from a white plate +
   hairline rule + a soft, low-alpha ambient shadow. Restrained,
   institutional. Sharper corners suit the De Stijl register.
   ============================================================ */
:root {
  /* Radii — crisp and squared for the arty/De Stijl register.
     Nothing pill-soft except chips and avatars. */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* Borders */
  --border-hairline: 1px solid var(--line);
  --border-subtle:   1px solid var(--line-subtle);
  --border-strong:   1px solid var(--line-strong);

  /* Shadows — soft, low-alpha ambient for the light ground */
  --shadow-sm: 0 1px 2px rgba(20,17,13,0.06);
  --shadow-md: 0 10px 30px -16px rgba(20,17,13,0.22);
  --shadow-lg: 0 26px 60px -34px rgba(20,17,13,0.32);
  --shadow-gold: 0 10px 30px -14px rgba(242,194,10,0.30);

  /* Focus ring — primary blue */
  --ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--accent);

  /* Motion — quiet, precise. No bounce. */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);           /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
  --dur-slow: 360ms;   /* @kind other */
}

/* Deeper ambient shadows on the night ground */
.avi-night {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.35);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.45);
  --shadow-gold: 0 8px 28px rgba(247,212,62,0.18);
}

/* ============================================================
   AVI — base reset + brand defaults. Sets the light gallery-white
   canvas and SANS-LED default typography (serif is now an
   editorial accent, not the workhorse). Components style locally.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1;
}

/* Display headings (h1/h2) speak the EDITORIAL serif voice; structural
   sub-heads (h3/h4) stay in the product sans. The dual-voice split. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--text-display);
  margin: 0;
}
h3, h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-display);
  margin: 0;
}

/* Opt-in helpers to override the default per context. */
.avi-serif { font-family: var(--font-display); font-weight: var(--fw-regular); letter-spacing: var(--ls-display); }
.avi-sans  { font-family: var(--font-sans); }

a { color: var(--accent); text-decoration: none; }

/* Numerals: tabular figures for any data/score context */
.avi-tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* Score-arc draw-on: resting state is the FULL arc (so it stays visible
   with reduced motion or if the animation never runs); it draws on from
   zero via stroke-dashoffset. The element sets --avi-arc-len inline. */
@keyframes aviDrawArc { from { stroke-dashoffset: var(--avi-arc-len, 0); } to { stroke-dashoffset: 0; } }
.avi-arc-draw { stroke-dashoffset: 0; animation: aviDrawArc 1100ms cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .avi-arc-draw { animation: none; } }

/* All-caps eyebrow / overline — echoes the wordmark's tracking */
.avi-overline {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

::selection { background: var(--gold-100); color: var(--ink-pure); }

/* Custom scrollbars — tuned for the light ground */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--paper-300); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-ghost); }
::-webkit-scrollbar-track { background: transparent; }

/* On the night ground, restore dark-tuned scrollbars + selection */
.avi-night ::selection { background: var(--gold-300); color: var(--ink-pure); }
.avi-night ::-webkit-scrollbar-thumb { background: var(--ink-600); }
.avi-night ::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }



    html, body { margin: 0; }
    @keyframes aviKenBurns { from { transform: scale(1.0); } to { transform: scale(1.08); } }
  
.avi-art-layer { position:absolute;inset:0;opacity:0;transition:opacity 1700ms var(--ease-standard,ease); }
.avi-art-layer.is-active { opacity:1;animation:aviKenBurns 14s ease-out both; }
.avi-art-layer picture,.avi-art-layer img { display:block;width:100%;height:100%; }
.avi-art-layer img { object-fit:cover;object-position:center; }
@media(prefers-reduced-motion:reduce) { .avi-art-layer.is-active {animation:none} .avi-art-layer {transition:none} }